initial commit

frontend/src/views/ItemDetail.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import EntityChips from '../components/EntityChips.vue';
+import { api, type ItemDetail } from '../services/api';
+
+const route = useRoute();
+const item = ref<ItemDetail | null>(null);
+
+const customization = computed(() => {
+  if (!item.value) {
+    return [];
+  }
+
+  return [
+    item.value.customization.dyeable ? '可染色' : '',
+    item.value.customization.dualDyeable ? '可双区染色' : '',
+    item.value.customization.patternEditable ? '可改花纹' : ''
+  ].filter(Boolean);
+});
+
+onMounted(async () => {
+  item.value = await api.itemDetail(String(route.params.id));
+});
+</script>
+
+<template>
+  <p v-if="!item" class="status">加载中</p>
+  <section v-else>
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ item.name }}</h1>
+        <p class="page-subtitle">{{ item.category.name }} · {{ item.usage.name }}</p>
+      </div>
+      <RouterLink class="link-button" to="/items">返回列表</RouterLink>
+    </div>
+
+    <div class="detail-grid">
+      <section class="detail-section">
+        <h2>入手方式</h2>
+        <EntityChips :items="item.acquisitionMethods" />
+      </section>
+
+      <section class="detail-section">
+        <h2>自定义</h2>
+        <div v-if="customization.length" class="chips">
+          <span v-for="entry in customization" :key="entry" class="chip">{{ entry }}</span>
+        </div>
+        <p v-else class="meta-line">无</p>
+      </section>
+
+      <section class="detail-section">
+        <h2>标签</h2>
+        <EntityChips :items="item.tags" />
+      </section>
+
+      <section class="detail-section">
+        <h2>材料单信息</h2>
+        <template v-if="item.recipe">
+          <RouterLink :to="`/recipes/${item.recipe.id}`">{{ item.recipe.name }}</RouterLink>
+          <EntityChips :items="item.recipe.materials" />
+        </template>
+        <p v-else class="meta-line">无</p>
+      </section>
+
+      <section class="detail-section">
+        <h2>相关栖息地</h2>
+        <ul class="row-list">
+          <li v-for="habitat in item.relatedHabitats" :key="habitat.id">
+            <RouterLink :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
+            <span>× {{ habitat.quantity }}</span>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </section>
+</template>