From 5ff88741398c463fa29365e5b4008b31881c3df7 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 27 Apr 2026 08:56:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(h5):=20=E7=A7=8D=E7=B1=BB=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=EF=BC=88=E5=AD=90=E7=B1=BB=20Tab=20+=20?=
 =?UTF-8?q?=E6=9D=90=E6=96=99=E5=88=97=E8=A1=A8=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend-h5/src/components/MaterialCard.vue   |  34 ++++++
 .../src/composables/useInfiniteScroll.js      |  12 ++
 frontend-h5/src/views/CategoryDetail.vue      | 106 +++++++++++++++++-
 3 files changed, 150 insertions(+), 2 deletions(-)
 create mode 100644 frontend-h5/src/components/MaterialCard.vue
 create mode 100644 frontend-h5/src/composables/useInfiniteScroll.js

diff --git a/frontend-h5/src/components/MaterialCard.vue b/frontend-h5/src/components/MaterialCard.vue
new file mode 100644
index 0000000..f6d2698
--- /dev/null
+++ b/frontend-h5/src/components/MaterialCard.vue
@@ -0,0 +1,34 @@
+<script setup>
+import Chip from './Chip.vue'
+import StarLevel from './StarLevel.vue'
+defineProps({ item: Object })
+
+const importanceTone = (lv) => {
+  if (lv === '核心') return 'danger'
+  if (lv === '优先') return 'info'
+  return 'neutral'
+}
+const costLabel = (v) => (v == null ? '—' : `${v > 0 ? '+' : ''}${Number(v)}%`)
+</script>
+
+<template>
+  <div class="bg-white rounded-card shadow-card p-4 active:bg-surface-warm cursor-pointer">
+    <div class="flex items-start gap-3">
+      <div class="flex-1 min-w-0">
+        <div class="text-base font-semibold truncate">{{ item.name }}</div>
+        <div class="mt-1 text-xs text-muted truncate">{{ item.factory_short_name || '—' }}</div>
+        <div class="mt-2 flex flex-wrap gap-1">
+          <Chip v-if="item.importance_level" :tone="importanceTone(item.importance_level)">{{ item.importance_level }}</Chip>
+          <Chip v-for="a in (item.advantage_display || []).slice(0,2)" :key="a" tone="brand">{{ a }}</Chip>
+        </div>
+      </div>
+      <div class="text-right shrink-0">
+        <div class="tnum text-lg font-semibold" :class="item.cost_compare < 0 ? 'text-brand' : 'text-neutral-800'">
+          {{ costLabel(item.cost_compare) }}
+        </div>
+        <div class="text-[11px] text-muted mt-0.5">成本对比</div>
+        <div class="mt-2"><StarLevel :value="item.score_level || 0" /></div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend-h5/src/composables/useInfiniteScroll.js b/frontend-h5/src/composables/useInfiniteScroll.js
new file mode 100644
index 0000000..5b06bc8
--- /dev/null
+++ b/frontend-h5/src/composables/useInfiniteScroll.js
@@ -0,0 +1,12 @@
+import { onMounted, onBeforeUnmount, ref } from 'vue'
+
+export function useInfiniteScroll(target, onLoad) {
+  const observer = ref(null)
+  onMounted(() => {
+    observer.value = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) onLoad()
+    })
+    if (target.value) observer.value.observe(target.value)
+  })
+  onBeforeUnmount(() => observer.value?.disconnect())
+}
diff --git a/frontend-h5/src/views/CategoryDetail.vue b/frontend-h5/src/views/CategoryDetail.vue
index 028f12b..1607d5f 100644
--- a/frontend-h5/src/views/CategoryDetail.vue
+++ b/frontend-h5/src/views/CategoryDetail.vue
@@ -1,2 +1,104 @@
-<script setup>defineOptions({ name: 'CategoryDetail' })</script>
-<template><div class="p-4">CategoryDetail 占位</div></template>
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import NavBar from '@/components/NavBar.vue'
+import MaterialCard from '@/components/MaterialCard.vue'
+import Skeleton from '@/components/Skeleton.vue'
+import { useUiStore } from '@/store/ui'
+import { fetchSubcategoriesByCategory, fetchMaterials } from '@/api/material'
+import { useInfiniteScroll } from '@/composables/useInfiniteScroll'
+
+defineOptions({ name: 'CategoryDetail' })
+const props = defineProps({ major: String, category: String })
+const router = useRouter()
+const ui = useUiStore()
+
+const stateKey = computed(() => `${props.major}::${props.category}`)
+const subs = ref([])
+const activeSub = ref(ui.categorySubTab[stateKey.value] || '')
+const items = ref([])
+const page = ref(1)
+const hasMore = ref(true)
+const loading = ref(false)
+const initialLoading = ref(true)
+const sentinel = ref(null)
+
+const loadSubs = async () => {
+  subs.value = await fetchSubcategoriesByCategory(props.major, props.category)
+}
+
+const resetAndLoad = async () => {
+  page.value = 1; items.value = []; hasMore.value = true
+  await loadMore()
+}
+
+const loadMore = async () => {
+  if (loading.value || !hasMore.value) return
+  loading.value = true
+  try {
+    const params = {
+      major_category: props.major,
+      material_category: props.category,
+      status: 'approved',
+      page: page.value,
+      page_size: 20,
+    }
+    if (activeSub.value) params.material_subcategory = activeSub.value
+    const res = await fetchMaterials(params)
+    const list = res.results || res
+    items.value.push(...list)
+    hasMore.value = !!res.next
+    page.value += 1
+  } finally { loading.value = false; initialLoading.value = false }
+}
+
+const pickSub = (v) => {
+  activeSub.value = v
+  ui.setSubTab(stateKey.value, v)
+  initialLoading.value = true
+  resetAndLoad()
+}
+
+onMounted(async () => {
+  await loadSubs()
+  await resetAndLoad()
+})
+
+useInfiniteScroll(sentinel, loadMore)
+
+const goDetail = (id) => router.push({ name: 'MaterialDetail', params: { id } })
+</script>
+
+<template>
+  <div class="min-h-screen pb-6">
+    <NavBar :title="category" />
+    <div class="sticky top-12 z-10 bg-white border-b border-line">
+      <div class="flex gap-1 overflow-x-auto px-2 py-2 no-scrollbar">
+        <button class="px-3 py-1 rounded-full text-sm whitespace-nowrap"
+          :class="activeSub === '' ? 'bg-brand text-white' : 'bg-surface-warm text-neutral-700'"
+          @click="pickSub('')">全部</button>
+        <button v-for="s in subs" :key="s.value"
+          class="px-3 py-1 rounded-full text-sm whitespace-nowrap"
+          :class="activeSub === s.value ? 'bg-brand text-white' : 'bg-surface-warm text-neutral-700'"
+          @click="pickSub(s.value)">{{ s.value }} ({{ s.count }})</button>
+      </div>
+    </div>
+
+    <section class="p-4 space-y-3">
+      <template v-if="initialLoading">
+        <Skeleton v-for="n in 4" :key="n" class="h-24" />
+      </template>
+      <template v-else-if="items.length">
+        <MaterialCard v-for="it in items" :key="it.id" :item="it" @click="goDetail(it.id)" />
+        <div ref="sentinel" class="py-4 text-center text-xs text-muted">
+          {{ hasMore ? (loading ? '加载中…' : '下拉加载') : '没有更多了' }}
+        </div>
+      </template>
+      <div v-else class="py-16 text-center text-sm text-muted">暂无材料</div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.no-scrollbar::-webkit-scrollbar { display: none; }
+</style>