From 932a0520f105f0f2d4403a02850079e4efaadcc5 Mon Sep 17 00:00:00 2001
From: Sisyphus <sisyphus@direv.local>
Date: Sun, 5 Jul 2026 10:15:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(F006-W3xC):=206=20=E4=B8=AA=E6=96=B0=20vie?=
 =?UTF-8?q?w=20(P2=20=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86=E5=85=A8?=
 =?UTF-8?q?=E9=83=A8,=20=E5=90=AB=E8=80=81=20vue=20=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E5=8F=82=E8=80=83)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

P2.1 /product/shop 商品店铺 (占位 + 老 vue 12 字段预览)
P2.2 /supplier/good 商品管理 (占位 + 老 vue 12 字段预览)
P2.3 /supplier/servicegood 服务商品 (占位 + 老 vue 10 字段预览)
P2.4 /other/groupbuy 拼团活动 (走 /other/groupbuy/page 真 API, 11 行)
P2.5 /other/seckill 秒杀活动 (走 /other/seckill/page 真 API, 3 行)
P2.6 /api/feedback 意见反馈 (占位 + 老 vue 7 字段预览)

字段参考来源: devbox /data/平台开发/04-源码/product_network_vue/src/views/
- supplier/good.vue: 12 列 (icon/title/enterpriseName/3 级分类/brand/unit/createDate/onShelf/checkOpinion/checkStatus)
- supplier/servicegood.vue: 10 列 (icon/title/enterpriseName/3 级分类/pricedName/createDate/isDistribution/checkStatus)
- api/feedback.vue: 7 列 (title/content/orderCode/createDate/nickName/phone/imgList)
- product/shop.vue: 无对应老 vue 文件, 复用 supplier/good 字段模板

占位页升级: el-result 报错 + 额外加 1 个预期字段展示卡 (key/label/desc 三列), 让用户验收时知道这页面后端实现后应该长啥样

后端 /supplier/good/page 报 400 id 类型错 (老 controller @GetMapping(/{id}) 抢 page 路径), 占位符合实际
---
 src/modules/api/feedback/FeedbackListView.vue | 81 +++++++++++++++++
 src/modules/product/shop/ShopListView.vue     | 86 +++++++++++++++++++
 src/modules/supplier/good/GoodListView.vue    | 86 +++++++++++++++++++
 .../servicegood/ServiceGoodListView.vue       | 84 ++++++++++++++++++
 src/router/index.ts                           | 38 ++++++++
 5 files changed, 375 insertions(+)
 create mode 100644 src/modules/api/feedback/FeedbackListView.vue
 create mode 100644 src/modules/product/shop/ShopListView.vue
 create mode 100644 src/modules/supplier/good/GoodListView.vue
 create mode 100644 src/modules/supplier/servicegood/ServiceGoodListView.vue

diff --git a/src/modules/api/feedback/FeedbackListView.vue b/src/modules/api/feedback/FeedbackListView.vue
new file mode 100644
index 0000000..695ca94
--- /dev/null
+++ b/src/modules/api/feedback/FeedbackListView.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * F006 意见反馈 - W3.x C P2
+ * 后端 /api/feedback/page 端点状态: 404 / 400 (端点不存在或参数错)
+ * 走 el-result 优雅占位 + 展示参考老 /vue 后台的预期字段
+ */
+import { onMounted, ref } from 'vue'
+import { httpGet } from '@/utils/request'
+
+interface FieldSpec { key: string; label: string; desc: string }
+
+const status = ref<'checking' | '404' | '200' | 'error'>('checking')
+const errorMsg = ref('')
+
+const expectedFields: FieldSpec[] = [
+  { key: 'title', label: '标题', desc: '反馈标题' },
+  { key: 'content', label: '反馈内容', desc: '详细描述' },
+  { key: 'orderCode', label: '订单编号', desc: '关联订单 (可空)' },
+  { key: 'createDate', label: '创建时间', desc: '提交时间' },
+  { key: 'nickName', label: '用户昵称', desc: '提交人' },
+  { key: 'phone', label: '电话', desc: '联系电话' },
+  { key: 'imgList', label: '反馈图片', desc: '图片数组 (预览)' }
+]
+
+onMounted(async () => {
+  try {
+    const r: any = await httpGet('/api/feedback/page', { page: 1, limit: 1 })
+    if (r?.code === 0) status.value = '200'
+    else { status.value = 'error'; errorMsg.value = r?.msg || '未知错误' }
+  } catch (e: any) {
+    if (e?.response?.status === 404 || e?.message?.includes('404')) {
+      status.value = '404'
+      errorMsg.value = '后端 API 未实现 (/api/feedback/page 返回 404)'
+    } else {
+      status.value = 'error'
+      errorMsg.value = e?.msg || e?.message || '请求失败'
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="rr-page">
+    <div class="rr-page-header">
+      <h2 class="rr-page-title">意见反馈</h2>
+      <p class="rr-page-sub">用户反馈信息 - 数据接口未实现, 占位页展示预期字段</p>
+    </div>
+    <div class="rr-card rr-status-card">
+      <el-result
+        :icon="status === '200' ? 'success' : 'warning'"
+        :title="status === '200' ? 'API 已就绪' : '后端 API 未实现'"
+        :sub-title="status === '200' ? '意见反馈 数据接口已通, 可正常加载' : (errorMsg || '请联系后端实现 /api/feedback/page 接口')"
+      >
+        <template #extra>
+          <el-tag v-if="status === 'checking'" type="info">检测中...</el-tag>
+          <el-tag v-else-if="status === '404'" type="warning">404 Not Found</el-tag>
+          <el-tag v-else-if="status === '200'" type="success">200 OK</el-tag>
+          <el-tag v-else type="danger">Error</el-tag>
+        </template>
+      </el-result>
+    </div>
+    <div class="rr-card rr-fields-card">
+      <h3 class="rr-section-title">预期字段 (参考老 /vue 后台)</h3>
+      <el-table :data="expectedFields" border size="small" :show-header="true" empty-text="无字段">
+        <el-table-column prop="key" label="字段名 (key)" width="220" />
+        <el-table-column prop="label" label="表头 (label)" width="180" />
+        <el-table-column prop="desc" label="说明" />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.rr-page { max-width: 1400px; }
+.rr-page-header { margin-bottom: 20px; }
+.rr-page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 4px; }
+.rr-page-sub { color: var(--ink-3); font-size: 13px; }
+.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
+.rr-status-card { padding: 20px 20px 8px; }
+.rr-section-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
+</style>
diff --git a/src/modules/product/shop/ShopListView.vue b/src/modules/product/shop/ShopListView.vue
new file mode 100644
index 0000000..7f05519
--- /dev/null
+++ b/src/modules/product/shop/ShopListView.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+/**
+ * F006 商品店铺 - W3.x C P2
+ * 后端 /product/shop/page 端点状态: 404 / 400 (端点不存在或参数错)
+ * 走 el-result 优雅占位 + 展示参考老 /vue 后台的预期字段
+ */
+import { onMounted, ref } from 'vue'
+import { httpGet } from '@/utils/request'
+
+interface FieldSpec { key: string; label: string; desc: string }
+
+const status = ref<'checking' | '404' | '200' | 'error'>('checking')
+const errorMsg = ref('')
+
+const expectedFields: FieldSpec[] = [
+  { key: 'icon', label: '封面', desc: '图片缩略图' },
+  { key: 'title', label: '商品名称', desc: '商品标题' },
+  { key: 'enterpriseName', label: '供应商', desc: '所属企业名' },
+  { key: 'firstCategoryName', label: '一级分类', desc: '一级分类名' },
+  { key: 'secondCategoryName', label: '二级分类', desc: '二级分类名' },
+  { key: 'thirdCategoryName', label: '三级分类', desc: '三级分类名' },
+  { key: 'brandName', label: '品牌', desc: '品牌名' },
+  { key: 'unitName', label: '单位', desc: '计量单位' },
+  { key: 'createDate', label: '申请时间', desc: '提交时间' },
+  { key: 'onShelf', label: '铺货', desc: '0=未铺货/1=已铺货' },
+  { key: 'checkOpinion', label: '审核意见', desc: '审核备注' },
+  { key: 'checkStatus', label: '状态', desc: '1=待审核/2=出售中/3=已驳回' }
+]
+
+onMounted(async () => {
+  try {
+    const r: any = await httpGet('/product/shop/page', { page: 1, limit: 1 })
+    if (r?.code === 0) status.value = '200'
+    else { status.value = 'error'; errorMsg.value = r?.msg || '未知错误' }
+  } catch (e: any) {
+    if (e?.response?.status === 404 || e?.message?.includes('404')) {
+      status.value = '404'
+      errorMsg.value = '后端 API 未实现 (/product/shop/page 返回 404)'
+    } else {
+      status.value = 'error'
+      errorMsg.value = e?.msg || e?.message || '请求失败'
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="rr-page">
+    <div class="rr-page-header">
+      <h2 class="rr-page-title">商品店铺</h2>
+      <p class="rr-page-sub">商品管理 (supplier/good 同款) - 数据接口未实现, 占位页展示预期字段</p>
+    </div>
+    <div class="rr-card rr-status-card">
+      <el-result
+        :icon="status === '200' ? 'success' : 'warning'"
+        :title="status === '200' ? 'API 已就绪' : '后端 API 未实现'"
+        :sub-title="status === '200' ? '商品店铺 数据接口已通, 可正常加载' : (errorMsg || '请联系后端实现 /product/shop/page 接口')"
+      >
+        <template #extra>
+          <el-tag v-if="status === 'checking'" type="info">检测中...</el-tag>
+          <el-tag v-else-if="status === '404'" type="warning">404 Not Found</el-tag>
+          <el-tag v-else-if="status === '200'" type="success">200 OK</el-tag>
+          <el-tag v-else type="danger">Error</el-tag>
+        </template>
+      </el-result>
+    </div>
+    <div class="rr-card rr-fields-card">
+      <h3 class="rr-section-title">预期字段 (参考老 /vue 后台)</h3>
+      <el-table :data="expectedFields" border size="small" :show-header="true" empty-text="无字段">
+        <el-table-column prop="key" label="字段名 (key)" width="220" />
+        <el-table-column prop="label" label="表头 (label)" width="180" />
+        <el-table-column prop="desc" label="说明" />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.rr-page { max-width: 1400px; }
+.rr-page-header { margin-bottom: 20px; }
+.rr-page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 4px; }
+.rr-page-sub { color: var(--ink-3); font-size: 13px; }
+.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
+.rr-status-card { padding: 20px 20px 8px; }
+.rr-section-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
+</style>
diff --git a/src/modules/supplier/good/GoodListView.vue b/src/modules/supplier/good/GoodListView.vue
new file mode 100644
index 0000000..6659a15
--- /dev/null
+++ b/src/modules/supplier/good/GoodListView.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+/**
+ * F006 商品管理 - W3.x C P2
+ * 后端 /supplier/good/page 端点状态: 404 / 400 (端点不存在或参数错)
+ * 走 el-result 优雅占位 + 展示参考老 /vue 后台的预期字段
+ */
+import { onMounted, ref } from 'vue'
+import { httpGet } from '@/utils/request'
+
+interface FieldSpec { key: string; label: string; desc: string }
+
+const status = ref<'checking' | '404' | '200' | 'error'>('checking')
+const errorMsg = ref('')
+
+const expectedFields: FieldSpec[] = [
+  { key: 'icon', label: '封面', desc: '图片缩略图 40x40' },
+  { key: 'title', label: '商品名称', desc: '商品标题' },
+  { key: 'enterpriseName', label: '供应商', desc: '所属企业名' },
+  { key: 'firstCategoryName', label: '一级分类', desc: '一级分类名' },
+  { key: 'secondCategoryName', label: '二级分类', desc: '二级分类名' },
+  { key: 'thirdCategoryName', label: '三级分类', desc: '三级分类名' },
+  { key: 'brandName', label: '品牌', desc: '品牌名' },
+  { key: 'unitName', label: '单位', desc: '计量单位' },
+  { key: 'createDate', label: '申请时间', desc: '提交时间' },
+  { key: 'onShelf', label: '铺货', desc: '0=未铺货/1=已铺货' },
+  { key: 'checkOpinion', label: '审核意见', desc: '审核备注' },
+  { key: 'checkStatus', label: '状态', desc: '1=待审核/2=出售中/3=已驳回' }
+]
+
+onMounted(async () => {
+  try {
+    const r: any = await httpGet('/supplier/good/page', { page: 1, limit: 1 })
+    if (r?.code === 0) status.value = '200'
+    else { status.value = 'error'; errorMsg.value = r?.msg || '未知错误' }
+  } catch (e: any) {
+    if (e?.response?.status === 404 || e?.message?.includes('404')) {
+      status.value = '404'
+      errorMsg.value = '后端 API 未实现 (/supplier/good/page 返回 404)'
+    } else {
+      status.value = 'error'
+      errorMsg.value = e?.msg || e?.message || '请求失败'
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="rr-page">
+    <div class="rr-page-header">
+      <h2 class="rr-page-title">商品管理</h2>
+      <p class="rr-page-sub">实物商品审核管理 - 数据接口未实现, 占位页展示预期字段</p>
+    </div>
+    <div class="rr-card rr-status-card">
+      <el-result
+        :icon="status === '200' ? 'success' : 'warning'"
+        :title="status === '200' ? 'API 已就绪' : '后端 API 未实现'"
+        :sub-title="status === '200' ? '商品管理 数据接口已通, 可正常加载' : (errorMsg || '请联系后端实现 /supplier/good/page 接口')"
+      >
+        <template #extra>
+          <el-tag v-if="status === 'checking'" type="info">检测中...</el-tag>
+          <el-tag v-else-if="status === '404'" type="warning">404 Not Found</el-tag>
+          <el-tag v-else-if="status === '200'" type="success">200 OK</el-tag>
+          <el-tag v-else type="danger">Error</el-tag>
+        </template>
+      </el-result>
+    </div>
+    <div class="rr-card rr-fields-card">
+      <h3 class="rr-section-title">预期字段 (参考老 /vue 后台)</h3>
+      <el-table :data="expectedFields" border size="small" :show-header="true" empty-text="无字段">
+        <el-table-column prop="key" label="字段名 (key)" width="220" />
+        <el-table-column prop="label" label="表头 (label)" width="180" />
+        <el-table-column prop="desc" label="说明" />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.rr-page { max-width: 1400px; }
+.rr-page-header { margin-bottom: 20px; }
+.rr-page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 4px; }
+.rr-page-sub { color: var(--ink-3); font-size: 13px; }
+.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
+.rr-status-card { padding: 20px 20px 8px; }
+.rr-section-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
+</style>
diff --git a/src/modules/supplier/servicegood/ServiceGoodListView.vue b/src/modules/supplier/servicegood/ServiceGoodListView.vue
new file mode 100644
index 0000000..d400fa1
--- /dev/null
+++ b/src/modules/supplier/servicegood/ServiceGoodListView.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * F006 服务商品 - W3.x C P2
+ * 后端 /supplier/servicegood/page 端点状态: 404 / 400 (端点不存在或参数错)
+ * 走 el-result 优雅占位 + 展示参考老 /vue 后台的预期字段
+ */
+import { onMounted, ref } from 'vue'
+import { httpGet } from '@/utils/request'
+
+interface FieldSpec { key: string; label: string; desc: string }
+
+const status = ref<'checking' | '404' | '200' | 'error'>('checking')
+const errorMsg = ref('')
+
+const expectedFields: FieldSpec[] = [
+  { key: 'icon', label: '封面', desc: '图片缩略图 40x40' },
+  { key: 'title', label: '商品名称', desc: '服务商品名' },
+  { key: 'enterpriseName', label: '供应商', desc: '所属企业名' },
+  { key: 'firstCategoryName', label: '一级分类', desc: '一级分类名' },
+  { key: 'secondCategoryName', label: '二级分类', desc: '二级分类名' },
+  { key: 'thirdCategoryName', label: '三级分类', desc: '三级分类名' },
+  { key: 'pricedName', label: '计价方式', desc: '按次/按时/包月' },
+  { key: 'createDate', label: '申请时间', desc: '提交时间' },
+  { key: 'isDistribution', label: '铺货', desc: '0=未/1=已/2=待审' },
+  { key: 'checkStatus', label: '状态', desc: '1=待审核/2=出售中/3=已驳回' }
+]
+
+onMounted(async () => {
+  try {
+    const r: any = await httpGet('/supplier/servicegood/page', { page: 1, limit: 1 })
+    if (r?.code === 0) status.value = '200'
+    else { status.value = 'error'; errorMsg.value = r?.msg || '未知错误' }
+  } catch (e: any) {
+    if (e?.response?.status === 404 || e?.message?.includes('404')) {
+      status.value = '404'
+      errorMsg.value = '后端 API 未实现 (/supplier/servicegood/page 返回 404)'
+    } else {
+      status.value = 'error'
+      errorMsg.value = e?.msg || e?.message || '请求失败'
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="rr-page">
+    <div class="rr-page-header">
+      <h2 class="rr-page-title">服务商品</h2>
+      <p class="rr-page-sub">服务商品审核管理 - 数据接口未实现, 占位页展示预期字段</p>
+    </div>
+    <div class="rr-card rr-status-card">
+      <el-result
+        :icon="status === '200' ? 'success' : 'warning'"
+        :title="status === '200' ? 'API 已就绪' : '后端 API 未实现'"
+        :sub-title="status === '200' ? '服务商品 数据接口已通, 可正常加载' : (errorMsg || '请联系后端实现 /supplier/servicegood/page 接口')"
+      >
+        <template #extra>
+          <el-tag v-if="status === 'checking'" type="info">检测中...</el-tag>
+          <el-tag v-else-if="status === '404'" type="warning">404 Not Found</el-tag>
+          <el-tag v-else-if="status === '200'" type="success">200 OK</el-tag>
+          <el-tag v-else type="danger">Error</el-tag>
+        </template>
+      </el-result>
+    </div>
+    <div class="rr-card rr-fields-card">
+      <h3 class="rr-section-title">预期字段 (参考老 /vue 后台)</h3>
+      <el-table :data="expectedFields" border size="small" :show-header="true" empty-text="无字段">
+        <el-table-column prop="key" label="字段名 (key)" width="220" />
+        <el-table-column prop="label" label="表头 (label)" width="180" />
+        <el-table-column prop="desc" label="说明" />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.rr-page { max-width: 1400px; }
+.rr-page-header { margin-bottom: 20px; }
+.rr-page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 4px; }
+.rr-page-sub { color: var(--ink-3); font-size: 13px; }
+.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
+.rr-status-card { padding: 20px 20px 8px; }
+.rr-section-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index a163ebb..dd337cb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -277,6 +277,44 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/modules/other/supplierBrand/SupplierBrandListView.vue'),
     meta: { title: '品牌管理' }
   },
+  // W3.x C P2.1-6: 商品管理 6 个 (product/shop, supplier/good, supplier/servicegood, other/groupbuy, other/seckill, api/feedback)
+  // groupbuy + seckill 走真数据, 其它 4 个后端未实现走占位
+  {
+    path: '/product/shop',
+    name: 'ShopList',
+    component: () => import('@/modules/product/shop/ShopListView.vue'),
+    meta: { title: '商品店铺' }
+  },
+  {
+    path: '/supplier/good',
+    name: 'SupplierGoodList',
+    component: () => import('@/modules/supplier/good/GoodListView.vue'),
+    meta: { title: '商品管理' }
+  },
+  {
+    path: '/supplier/servicegood',
+    name: 'ServiceGoodList',
+    component: () => import('@/modules/supplier/servicegood/ServiceGoodListView.vue'),
+    meta: { title: '服务商品' }
+  },
+  {
+    path: '/other/groupbuy',
+    name: 'GroupbuyList',
+    component: () => import('@/modules/other/groupbuy/GroupbuyListView.vue'),
+    meta: { title: '拼团活动' }
+  },
+  {
+    path: '/other/seckill',
+    name: 'SeckillList',
+    component: () => import('@/modules/other/seckill/SeckillListView.vue'),
+    meta: { title: '秒杀活动' }
+  },
+  {
+    path: '/api/feedback',
+    name: 'FeedbackList',
+    component: () => import('@/modules/api/feedback/FeedbackListView.vue'),
+    meta: { title: '意见反馈' }
+  },
 
   // W3.1 通用通配占位 — 覆盖菜单 70 个 url(两层路径,如 /admin/user/finance/recharge)
   // 注意:必须放在具体路由后面,否则会拦截 /inquiry /login