From 5210a140ba2e01d8b6af72fb635d798a7e41f526 Mon Sep 17 00:00:00 2001
From: ouhaolan <ou@haolan.vip>
Date: Fri, 17 Apr 2026 09:46:21 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/directives/permission/hasPermi.ts         |    9 +-
 src/hooks/web/useTagsView.ts                  |    9 +-
 .../components/TagsView/src/TagsView.vue      |   62 +-
 src/utils/routerHelper.ts                     |    3 +-
 src/views/system/user/DeptTree.vue            |   19 +-
 .../ydoyun/report/lijun/reportpage6/index.vue |  109 +-
 .../ydoyun/report/productDaily/index.vue      | 2365 +++++++++++++++++
 types/router.d.ts                             |    4 +
 日志汇总统计.html                             |  143 +
 9 files changed, 2675 insertions(+), 48 deletions(-)
 create mode 100644 src/views/ydoyun/report/productDaily/index.vue
 create mode 100644 日志汇总统计.html

diff --git a/src/directives/permission/hasPermi.ts b/src/directives/permission/hasPermi.ts
index 90cd025..44bae36 100644
--- a/src/directives/permission/hasPermi.ts
+++ b/src/directives/permission/hasPermi.ts
@@ -1,4 +1,5 @@
 import type { App } from 'vue'
+import { toRaw } from 'vue'
 import { useUserStore } from '@/store/modules/user'
 
 const { t } = useI18n() // 国际化
@@ -24,8 +25,8 @@ export function hasPermi(app: App<Element>) {
 const userStore = useUserStore()
 const all_permission = '*:*:*'
 export const hasPermission = (permission: string[]) => {
-  return (
-    userStore.permissions.has(all_permission) ||
-    permission.some((permission) => userStore.permissions.has(permission))
-  )
+  // Vue 3.5+ 对响应式 Set 存字符串时，直接 .has 可能触发 WeakMap keys must be objects
+  const raw = toRaw(userStore.permissions) as Set<string> | undefined
+  if (!raw?.size) return false
+  return raw.has(all_permission) || permission.some((p) => raw.has(p))
 }
diff --git a/src/hooks/web/useTagsView.ts b/src/hooks/web/useTagsView.ts
index 31eadb0..619fc99 100644
--- a/src/hooks/web/useTagsView.ts
+++ b/src/hooks/web/useTagsView.ts
@@ -15,17 +15,20 @@ export const useTagsView = () => {
   }
 
   const closeLeft = (callback?: Fn) => {
-    tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+    const tag = unref(selectedTag)
+    if (tag) tagsViewStore.delLeftViews(tag as RouteLocationNormalizedLoaded)
     callback?.()
   }
 
   const closeRight = (callback?: Fn) => {
-    tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+    const tag = unref(selectedTag)
+    if (tag) tagsViewStore.delRightViews(tag as RouteLocationNormalizedLoaded)
     callback?.()
   }
 
   const closeOther = (callback?: Fn) => {
-    tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+    const tag = unref(selectedTag)
+    if (tag) tagsViewStore.delOthersViews(tag as RouteLocationNormalizedLoaded)
     callback?.()
   }
 
diff --git a/src/layout/components/TagsView/src/TagsView.vue b/src/layout/components/TagsView/src/TagsView.vue
index af492ba..1e10f09 100644
--- a/src/layout/components/TagsView/src/TagsView.vue
+++ b/src/layout/components/TagsView/src/TagsView.vue
@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, unref, watch } from 'vue'
-import type { RouteLocationNormalizedLoaded, RouterLinkProps } from 'vue-router'
+import type {
+  RouteLocationNormalizedLoaded,
+  RouteLocationRaw,
+  RouterLinkProps
+} from 'vue-router'
 import { useRouter } from 'vue-router'
 import { usePermissionStore } from '@/store/modules/permission'
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -83,17 +87,17 @@ const toLastView = () => {
   const visitedViews = tagsViewStore.getVisitedViews
   const latestView = visitedViews.slice(-1)[0]
   if (latestView) {
-    push(latestView)
+    // 使用 fullPath 字符串，避免 push(整段 RouteLocation) 在部分环境下触发 WeakMap 相关运行时错误
+    push(latestView.fullPath)
   } else {
-    if (
-      unref(currentRoute).path === permissionStore.getAddRouters[0].path ||
-      unref(currentRoute).path === permissionStore.getAddRouters[0].redirect
-    ) {
+    const first = permissionStore.getAddRouters[0]
+    if (!first?.path) return
+    const curPath = unref(currentRoute).path
+    if (curPath === first.path || curPath === first.redirect) {
       addTags()
       return
     }
-    // You can set another route
-    push(permissionStore.getAddRouters[0].path)
+    push(first.path)
   }
 }
 
@@ -137,8 +141,20 @@ const moveToCurrentTag = async () => {
 
 const tagLinksRefs = useTemplateRefsList<RouterLinkProps>()
 
+/** router-link 的 to 可能是 fullPath 字符串或对象，统一成路径字符串再比较 */
+function resolveRouterLinkToPath(to: RouteLocationRaw | undefined): string | undefined {
+  if (to == null) return undefined
+  if (typeof to === 'string') return to
+  if (typeof to === 'object' && 'fullPath' in to && typeof (to as RouteLocationNormalizedLoaded).fullPath === 'string') {
+    return (to as RouteLocationNormalizedLoaded).fullPath
+  }
+  return undefined
+}
+
 const moveToTarget = (currentTag: RouteLocationNormalizedLoaded) => {
   const wrap$ = unref(scrollbarRef)?.wrapRef
+  if (!wrap$) return
+
   let firstTag: Nullable<RouterLinkProps> = null
   let lastTag: Nullable<RouterLinkProps> = null
 
@@ -148,33 +164,37 @@ const moveToTarget = (currentTag: RouteLocationNormalizedLoaded) => {
     firstTag = tagList[0]
     lastTag = tagList[tagList.length - 1]
   }
-  if ((firstTag?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath) {
+  const cur = currentTag.fullPath
+  if (resolveRouterLinkToPath(firstTag?.to) === cur) {
     // 直接滚动到0的位置
     const { start } = useScrollTo({
-      el: wrap$!,
+      el: wrap$,
       position: 'scrollLeft',
       to: 0,
       duration: 500
     })
     start()
-  } else if ((lastTag?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath) {
+  } else if (resolveRouterLinkToPath(lastTag?.to) === cur) {
     // 滚动到最后的位置
     const { start } = useScrollTo({
-      el: wrap$!,
+      el: wrap$,
       position: 'scrollLeft',
-      to: wrap$!.scrollWidth - wrap$!.offsetWidth,
+      to: wrap$.scrollWidth - wrap$.offsetWidth,
       duration: 500
     })
     start()
   } else {
     // find preTag and nextTag
     const currentIndex: number = tagList.findIndex(
-      (item) => (item?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath
+      (item) => resolveRouterLinkToPath(item?.to) === cur
     )
+    if (currentIndex < 0) return
+
     const tgsRefs = document.getElementsByClassName(`${prefixCls}__item`)
 
-    const prevTag = tgsRefs[currentIndex - 1] as HTMLElement
-    const nextTag = tgsRefs[currentIndex + 1] as HTMLElement
+    const prevTag = tgsRefs[currentIndex - 1] as HTMLElement | undefined
+    const nextTag = tgsRefs[currentIndex + 1] as HTMLElement | undefined
+    if (!nextTag || !prevTag) return
 
     // the tag's offsetLeft after of nextTag
     const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + 4
@@ -182,17 +202,17 @@ const moveToTarget = (currentTag: RouteLocationNormalizedLoaded) => {
     // the tag's offsetLeft before of prevTag
     const beforePrevTagOffsetLeft = prevTag.offsetLeft - 4
 
-    if (afterNextTagOffsetLeft > unref(scrollLeftNumber) + wrap$!.offsetWidth) {
+    if (afterNextTagOffsetLeft > unref(scrollLeftNumber) + wrap$.offsetWidth) {
       const { start } = useScrollTo({
-        el: wrap$!,
+        el: wrap$,
         position: 'scrollLeft',
-        to: afterNextTagOffsetLeft - wrap$!.offsetWidth,
+        to: afterNextTagOffsetLeft - wrap$.offsetWidth,
         duration: 500
       })
       start()
     } else if (beforePrevTagOffsetLeft < unref(scrollLeftNumber)) {
       const { start } = useScrollTo({
-        el: wrap$!,
+        el: wrap$,
         position: 'scrollLeft',
         to: beforePrevTagOffsetLeft,
         duration: 500
@@ -364,7 +384,7 @@ watch(
             @visible-change="visibleChange"
           >
             <div>
-              <router-link :ref="tagLinksRefs.set" v-slot="{ navigate }" :to="{ ...item }" custom>
+              <router-link :ref="tagLinksRefs.set" v-slot="{ navigate }" :to="item.fullPath" custom>
                 <div
                   :class="`h-full flex items-center justify-center whitespace-nowrap pl-15px ${prefixCls}__item--label`"
                   @click="navigate"
diff --git a/src/utils/routerHelper.ts b/src/utils/routerHelper.ts
index cf1b362..38bc038 100644
--- a/src/utils/routerHelper.ts
+++ b/src/utils/routerHelper.ts
@@ -74,7 +74,8 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
       alwaysShow:
         route.children &&
         route.children.length > 0 &&
-        (route.alwaysShow !== undefined ? route.alwaysShow : true)
+        (route.alwaysShow !== undefined ? route.alwaysShow : true),
+      ...(route.id != null ? { menuId: Number(route.id) } : {})
     } as any
     // 特殊逻辑：如果后端配置的 MenuDO.component 包含 ?，则表示需要传递参数
     // 此时，我们需要解析参数，并且将参数放到 meta.query 中
diff --git a/src/views/system/user/DeptTree.vue b/src/views/system/user/DeptTree.vue
index 71ed6cd..2d77bd0 100644
--- a/src/views/system/user/DeptTree.vue
+++ b/src/views/system/user/DeptTree.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="head-container">
-    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称">
+    <el-input
+      v-model="deptName"
+      class="mb-20px"
+      clearable
+      placeholder="请输入部门名称，回车查询"
+      @keyup.enter="applyDeptFilter"
+      @clear="applyDeptFilter"
+    >
       <template #prefix>
         <Icon icon="ep:search" />
       </template>
@@ -45,6 +52,11 @@ const filterNode = (name: string, data: Tree) => {
   return data.name.includes(name)
 }
 
+/** 输入完成后回车（或点清空）再筛选，避免每键都过滤 */
+const applyDeptFilter = () => {
+  treeRef.value?.filter(deptName.value)
+}
+
 /** 处理部门被点击 */
 let currentNode: any = {}
 const handleNodeClick = async (row: { [key: string]: any }, treeNode: any) => {
@@ -67,11 +79,6 @@ const handleNodeClick = async (row: { [key: string]: any }, treeNode: any) => {
 }
 const emits = defineEmits(['node-click'])
 
-/** 监听deptName */
-watch(deptName, (val) => {
-  treeRef.value!.filter(val)
-})
-
 /** 初始化 */
 onMounted(async () => {
   await getTree()
diff --git a/src/views/ydoyun/report/lijun/reportpage6/index.vue b/src/views/ydoyun/report/lijun/reportpage6/index.vue
index 35d10c6..06f8962 100644
--- a/src/views/ydoyun/report/lijun/reportpage6/index.vue
+++ b/src/views/ydoyun/report/lijun/reportpage6/index.vue
@@ -828,7 +828,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch, onMounted, onUnmounted, onBeforeUnmount, onDeactivated, nextTick } from 'vue'
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  onMounted,
+  onUnmounted,
+  onBeforeUnmount,
+  onActivated,
+  onDeactivated,
+  nextTick
+} from 'vue'
 import dayjs from 'dayjs'
 import type { EChartsOption } from 'echarts'
 import Echart from '@/components/Echart/src/Echart.vue'
@@ -844,7 +855,7 @@ import { useUserStore } from '@/store/modules/user'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { ElMessage } from 'element-plus'
 import { Icon } from '@/components/Icon'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import type { CategoryDiagnosticData } from './components/categoryCardListComponents.vue'
 import { useAiAssistant } from '@/components/AiAssistant/useAiAssistant'
 
@@ -1264,7 +1275,26 @@ const loadingPie = ref(false)
 /** 商品明细列表加载状态 */
 const loadingProductList = ref(false)
 
-const { setPageLoading, setPageModuleName, setPageModuleCode, setScreenshotTarget } = useAiAssistant()
+const {
+  setPageLoading,
+  setPageModuleName,
+  setPageModuleCode,
+  setScreenshotTarget,
+  setAiAssistantFabEnabled
+} = useAiAssistant()
+const route = useRoute()
+/** 每日汇报模块名称：与后台菜单名称一致（meta.title），缺省为「商品大盘」 */
+const aiMenuModuleName = computed(() => {
+  const t = route.meta?.title
+  return typeof t === 'string' && t.trim() ? t.trim() : '商品大盘'
+})
+watch(
+  aiMenuModuleName,
+  (name) => {
+    setPageModuleName(name)
+  },
+  { immediate: true }
+)
 const reportPageRootRef = ref<HTMLElement | null>(null)
 watch(
   [loadingKpi, loadingCategory, loadingPie, loadingProductList],
@@ -1272,6 +1302,7 @@ watch(
   { immediate: true }
 )
 onUnmounted(() => {
+  setAiAssistantFabEnabled(false)
   setPageModuleName(null)
   setPageModuleCode(null)
   setScreenshotTarget(null)
@@ -2222,9 +2253,22 @@ const handleQuery = async () => {
     name: 'YDY_AI_GET_SPDP1'
   } as any)
     .then((kpiRes: any) => {
-      const data = Array.isArray(kpiRes?.data) ? kpiRes.data : (Array.isArray(kpiRes) ? kpiRes : null)
-      if (data && data.length > 0) {
-        kpiList.value = data.map((item: any) => mapApiRowToKpi(item))
+      let raw: any[] | null = null
+      if (kpiRes != null) {
+        if (kpiRes.code != null && kpiRes.data != null) {
+          raw = Array.isArray(kpiRes.data) ? kpiRes.data : null
+        } else if (Array.isArray(kpiRes)) {
+          raw = kpiRes
+        } else if (kpiRes.data != null) {
+          raw = Array.isArray(kpiRes.data) ? kpiRes.data : null
+        }
+      }
+      // 前几行常为列配置（含 keys/orders、无 code）；数据行含供货商 code
+      const dataRows = (raw || []).filter(
+        (row) => row != null && row.code != null && String(row.code).trim() !== ''
+      )
+      if (dataRows.length > 0) {
+        kpiList.value = dataRows.map((item: any) => mapApiRowToKpi(item))
       }
     })
     .catch(() => {})
@@ -2330,20 +2374,55 @@ const handleQuery = async () => {
   })
 }
 
+/** 颜色字段 up/down/flat → 趋势 */
+function trendFromColorField(c: unknown): 'up' | 'down' | 'flat' {
+  if (c == null || String(c).trim() === '') return 'flat'
+  const s = String(c).toLowerCase()
+  if (s.includes('up')) return 'up'
+  if (s.includes('down')) return 'down'
+  return 'flat'
+}
+
 // 将接口返回的一行数据映射为 KPI 卡片格式（按后端字段名适配，无则保留默认）
 function mapApiRowToKpi(row: any): KPIData {
-  const trend = row.trend === 'up' || row.trend === 1 ? 'up' : row.trend === 'down' || row.trend === -1 ? 'down' : 'flat'
+  const trend =
+    row.trend === 'up' || row.trend === 1
+      ? 'up'
+      : row.trend === 'down' || row.trend === -1
+        ? 'down'
+        : trendFromColorField(row.value1color ?? row.value2color ?? row.value3color ?? row.tagcolor)
+
   const rawTrendText = row.trendText ?? row.rateText
-  const trendText =
-    rawTrendText == null ? null : typeof rawTrendText === 'number' ? rawTrendText : Number(rawTrendText) || 0
+  let trendText: number | null = null
+  if (rawTrendText != null) {
+    const n = typeof rawTrendText === 'number' ? rawTrendText : Number(rawTrendText)
+    trendText = Number.isFinite(n) ? n : null
+  }
+
+  const v1 = row.value1 != null && String(row.value1).trim() !== '' ? String(row.value1) : ''
+  const v2 = row.value2 != null && String(row.value2).trim() !== '' ? String(row.value2) : ''
+  const v3 = row.value3 != null && String(row.value3).trim() !== '' ? String(row.value3) : ''
+  const legacyVal = String(row.value ?? row.mainValue ?? row.val ?? '').trim()
+  const combinedMetrics =
+    [v1 && `毛利率 ${v1}`, v2 && `动销 ${v2}`, v3 && `销售额 ${v3}`].filter(Boolean).join('  ·  ') || ''
+
+  const descFromApi = row.descs ?? row.desc ?? row.compareText
+  const descFromTags = [row.tag, row.value1date, row.value2date, row.value3date].filter(
+    (x) => x != null && String(x).trim() !== ''
+  )
+  const descs =
+    (descFromApi != null && String(descFromApi).trim() !== ''
+      ? String(descFromApi)
+      : descFromTags.join('  |  ')) ?? ''
+
   return {
     title: row.title ?? row.mainTitle ?? row.name ?? '',
-    unit: row.unit ?? '¥',
-    value: String(row.value ?? row.mainValue ?? row.val ?? ''),
+    unit: row.unit != null && String(row.unit).trim() !== '' ? String(row.unit) : '',
+    value: legacyVal || combinedMetrics,
     valueSuffix: row.valueSuffix ?? row.suffix ?? '',
     trendText,
     trend,
-    descs: row.descs ?? row.desc ?? row.compareText ?? '',
+    descs,
     bottomText: row.bottomText,
     bottomTextClass: row.bottomTextClass,
     progress: row.progress,
@@ -2636,7 +2715,7 @@ function applyQueryDefaults() {
 }
 
 onMounted(async () => {
-  setPageModuleName('商品驾驶舱')
+  setAiAssistantFabEnabled(true)
   setPageModuleCode('ProductDashboard:main')
   await nextTick()
   if (reportPageRootRef.value) setScreenshotTarget(reportPageRootRef.value)
@@ -2752,7 +2831,11 @@ onBeforeUnmount(() => {
 })
 
 // keep-alive 下切走时不会触发 onBeforeUnmount，只触发 onDeactivated，离开时也要保存缓存
+onActivated(() => {
+  setAiAssistantFabEnabled(true)
+})
 onDeactivated(() => {
+  setAiAssistantFabEnabled(false)
   saveDataCache()
 })
 </script>
diff --git a/src/views/ydoyun/report/productDaily/index.vue b/src/views/ydoyun/report/productDaily/index.vue
new file mode 100644
index 0000000..6022feb
--- /dev/null
+++ b/src/views/ydoyun/report/productDaily/index.vue
@@ -0,0 +1,2365 @@
+<template>
+  <div ref="reportPageRootRef" class="sxrb-page">
+    <div class="top-header">
+      <div class="header-right">
+        <div class="header-query">
+          <el-form :inline="true" :model="queryParams" class="filter-form">
+            <el-form-item label="路线">
+              <el-select
+                v-model="queryParams.route"
+                placeholder="请选择路线"
+                filterable
+                clearable
+                class="filter-control"
+              >
+                <el-option
+                  v-for="opt in routeSelectOptions"
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="门店">
+              <el-select
+                v-model="queryParams.ckdm"
+                placeholder="请选择门店"
+                filterable
+                clearable
+                class="filter-control"
+              >
+                <el-option
+                  v-for="opt in storeSelectOptions"
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="日期">
+              <el-date-picker
+                v-model="queryParams.rq"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                class="filter-control"
+                :disabled-date="disabledDate"
+              />
+            </el-form-item>
+            <el-form-item label="品牌">
+              <el-select
+                v-model="queryParams.brandValues"
+                multiple
+                collapse-tags
+                collapse-tags-tooltip
+                placeholder="请选择品牌"
+                class="filter-control filter-control-brand"
+              >
+                <el-option
+                  v-for="opt in productCategoryOptions"
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" :loading="isQuerying" @click="handleQuery">
+                <Icon icon="ep:search" />
+                查询
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="sxrb-ai-toolbar" aria-label="AI 操作">
+          <el-tooltip v-if="canEditAiModulePrompt" content="编辑提示词" placement="left">
+            <el-button text type="primary" class="sxrb-ai-btn-edit" @click="openPromptEdit">
+              <Icon icon="ep:edit-pen" class="sxrb-ai-btn-icon" />
+              提示词
+            </el-button>
+          </el-tooltip>
+          <el-button type="primary" class="sxrb-ai-btn-analyze" :loading="aiAnalyzeLoading" @click="handleAiAnalyze">
+            AI分析
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="sxrb-middle-row">
+      <div
+        class="card summary-card"
+        v-loading="isQuerying"
+        element-loading-text="加载中..."
+      >
+        <div class="card-title">销售情况</div>
+
+        <div class="bullet-summary">
+          <div class="bullet-container">
+            <div class="bullet-head">
+              <span class="bullet-label">今日毛利完成率</span>
+              <span class="bullet-value">{{ formatPercent(todayProfitGoalRate) }}</span>
+            </div>
+            <div class="bullet-graph">
+              <div
+                class="bullet-bar bullet-bar--today"
+                :style="{ width: clampPercent(todayProfitGoalRate) + '%' }"
+              ></div>
+              <div class="target-marker" :style="{ left: '100%' }"></div>
+            </div>
+            <div class="bullet-time-under">
+              <span class="bullet-time-label">完成率</span>
+              <span class="bullet-time-value">{{ formatPercent(todayProfitGoalRate) }}</span>
+            </div>
+          </div>
+
+          <div class="bullet-container">
+            <div class="bullet-head">
+              <span class="bullet-label">本月毛利完成率</span>
+              <span class="bullet-value">{{ formatPercent(monthProfitGoalRate) }}</span>
+            </div>
+            <div class="bullet-graph">
+              <div
+                class="bullet-bar bullet-bar--month"
+                :style="{ width: clampPercent(monthProfitGoalRate) + '%' }"
+              ></div>
+              <div class="target-marker" :style="{ left: '100%' }"></div>
+            </div>
+            <div class="bullet-time-under">
+              <span class="bullet-time-label">完成率</span>
+              <span class="bullet-time-value">{{ formatPercent(monthProfitGoalRate) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="summary-grid">
+          <div
+            v-for="item in summaryMetricItems"
+            :key="item.key"
+            class="stat-box"
+            :class="{ highlight: item.highlight }"
+          >
+            <span class="label">{{ item.label }}</span>
+            <div class="value">{{ renderSummaryMetricValue(item) }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="card trend-card"
+        v-loading="isQuerying"
+        element-loading-text="加载中..."
+      >
+        <div class="card-title trend-title">
+          <span class="trend-title-main">TOP图片墙</span>
+          <div class="trend-title-sub trend-inline-filters">
+            <el-select
+              v-model="imageFilter.storeValues"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              placeholder="门店"
+              class="trend-inline-select"
+              @change="() => handleImageScopeChange('cangku')"
+            >
+              <el-option
+                v-for="opt in storeSelectOptions"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+            <el-select
+              v-model="imageFilter.daleiValues"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              placeholder="大类"
+              class="trend-inline-select"
+              @change="() => handleImageScopeChange('dalei')"
+            >
+              <el-option
+                v-for="opt in daleiOptions"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+            <el-select
+              v-model="imageFilter.ztjValues"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              placeholder="正特价"
+              class="trend-inline-select"
+              @change="() => handleImageScopeChange('fjsx4')"
+            >
+              <el-option
+                v-for="opt in ztjOptions"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+            <el-select
+              v-model="imageFilter.zhongleiValues"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              placeholder="中类"
+              class="trend-inline-select"
+              @change="() => handleImageScopeChange('fjsx1')"
+            >
+              <el-option
+                v-for="opt in zhongleiOptions"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+          </div>
+        </div>
+        <div
+          class="trend-chart-wrap trend-product-wrap"
+          v-loading="imageWallLoading"
+          element-loading-text="图片加载中..."
+        >
+          <div v-if="topProductImageRows.length" class="product-image-grid">
+            <div
+              v-for="(item, idx) in topProductImageRows"
+              :key="`${item.spdm}-${idx}`"
+              class="product-image-card"
+            >
+              <div class="product-rank-badge">TOP {{ idx + 1 }}</div>
+              <img
+                v-if="item.pic"
+                class="product-image"
+                :src="item.pic"
+                :alt="item.spdm || '商品图片'"
+                loading="lazy"
+                referrerpolicy="no-referrer"
+                @click="openImagePreview(item)"
+              />
+              <div v-else class="product-image-empty">暂无图片</div>
+            </div>
+          </div>
+          <div v-else class="product-image-placeholder">暂无商品图片数据</div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="card category-container"
+      v-loading="isQuerying"
+      element-loading-text="加载中..."
+    >
+      <div class="card-title category-title">
+        <span class="category-title-main">品类维度分析列表</span>
+      </div>
+
+      <div class="table-scroll">
+        <table class="sxrb-table">
+          <thead>
+          <tr>
+            <th>仓库类别</th>
+            <th>正特价</th>
+            <th>大类</th>
+            <th>SKC</th>
+            <th>进货数量</th>
+            <th>退货数量</th>
+            <th>销售量</th>
+            <th>销售金额</th>
+            <th>销售成本</th>
+            <th>库存量</th>
+            <th>库存成本</th>
+            <th>销量占比</th>
+            <th>库存量占比</th>
+            <th>周转天</th>
+            <th>毛利率</th>
+            <th>销售折扣</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr v-for="(row, idx) in categoryRows" :key="`${row.DLMC || row.dlmc || 'row'}-${idx}`">
+            <td>{{ rawCellValue(row.CKDM ?? row.ckdm) }}</td>
+            <td>{{ rawCellValue(row.ZTJ ?? row.ztj) }}</td>
+            <td>{{ rawCellValue(row.DLMC ?? row.dlmc) }}</td>
+            <td>{{ formatNumber(row.SKC ?? row.skc) }}</td>
+            <td>{{ formatNumber(row.JHSL ?? row.jhsl) }}</td>
+            <td>{{ formatNumber(row.THSL ?? row.thsl) }}</td>
+            <td>{{ formatNumber(row.XSSL ?? row.xssl) }}</td>
+            <td>{{ formatMoney(row.XSJE ?? row.xsje) }}</td>
+            <td>{{ rawCellValue(row.SXCB ?? row.sxcb) }}</td>
+            <td>{{ formatNumber(row.KCSL ?? row.kcsl) }}</td>
+            <td>{{ formatMoney(row.KCCB ?? row.kccb) }}</td>
+            <td>{{ rawCellValue(row.XZZB ?? row.xzzb) }}</td>
+            <td>{{ rawCellValue(row.KCZB ?? row.kczb) }}</td>
+            <td>{{ rawCellValue(row.ZZT ?? row.zzt) }}</td>
+            <td>{{ rawCellValue(row.ML ?? row.ml) }}</td>
+            <td>{{ rawCellValue(row.XSZK ?? row.xszk) }}</td>
+          </tr>
+          <tr v-if="categoryRows.length" class="sxrb-total-row">
+            <td>总计</td>
+            <td>-</td>
+            <td>-</td>
+            <td>{{ formatNumber(categorySummaryRow.SKC) }}</td>
+            <td>{{ formatNumber(categorySummaryRow.JHSL) }}</td>
+            <td>{{ formatNumber(categorySummaryRow.THSL) }}</td>
+            <td>{{ formatNumber(categorySummaryRow.XSSL) }}</td>
+            <td>{{ formatMoney(categorySummaryRow.XSJE) }}</td>
+            <td>{{ formatMoney(categorySummaryRow.SXCB) }}</td>
+            <td>{{ formatNumber(categorySummaryRow.KCSL) }}</td>
+            <td>{{ formatMoney(categorySummaryRow.KCCB) }}</td>
+            <td>{{ formatAvg(categorySummaryRow.XZZB) }}</td>
+            <td>{{ formatAvg(categorySummaryRow.KCZB) }}</td>
+            <td>{{ formatAvg(categorySummaryRow.ZZT) }}</td>
+            <td>{{ formatAvg(categorySummaryRow.ML) }}</td>
+            <td>{{ formatAvg(categorySummaryRow.XSZK) }}</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <AiPromptEditDialog
+      v-if="canEditAiModulePrompt"
+      v-model="promptEditVisible"
+      :module-key="pageModuleKey"
+      :module-name="aiMenuModuleName"
+      :initial-prompt="promptMap[pageModuleKey]"
+      @saved="onPromptSaved"
+    />
+
+    <el-dialog
+      v-model="imagePreviewVisible"
+      title="图片详情"
+      width="680px"
+      append-to-body
+      destroy-on-close
+    >
+      <div class="image-preview-wrap">
+        <img v-if="currentPreviewImage" :src="currentPreviewImage" class="image-preview-main" alt="图片详情" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { computed, nextTick, onActivated, onDeactivated, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { ReportApi, type ExecuteProcedureParams } from '@/api/ydoyun/report/reportpage'
+import { useUserStore } from '@/store/modules/user'
+import { Icon } from '@/components/Icon'
+import { useAiAssistant } from '@/components/AiAssistant/useAiAssistant'
+import { useAiModulePromptEditor } from '@/hooks/web/useAiModulePromptEditor'
+import { ElMessage } from 'element-plus'
+import { AiModulePromptApi } from '@/api/ydoyun/aiModulePrompt'
+import AiPromptEditDialog from '../lijun/reportpage6/components/AiPromptEditDialog.vue'
+
+defineOptions({ name: 'ProductDaily' })
+
+const route = useRoute()
+const reportScene = computed(() => String((route.meta as any)?.query?.scene || '').trim().toLowerCase())
+const isProductDailyReport = computed(() => reportScene.value === 'product')
+/** 与 setPageModuleCode、AiPromptEditDialog 保存逻辑一致：component = moduleKey 冒号前一段 */
+const pageModuleComponent = computed(() => (isProductDailyReport.value ? 'ProductDaily' : 'SalesDaily'))
+const pageModuleKey = computed(() => `${pageModuleComponent.value}:main`)
+/** 每日汇报模块名称：与后台菜单名称一致（meta.title），缺省为「销售日报」 */
+const aiMenuModuleName = computed(() => {
+  const t = route.meta?.title
+  return typeof t === 'string' && t.trim() ? t.trim() : '销售日报'
+})
+
+/** 查询时同步 AI 悬浮按钮加载态；每日汇报绑定本页模块 */
+const aiAssistant = useAiAssistant()
+const { setAiAssistantFabEnabled } = aiAssistant
+const { canEditAiModulePrompt } = useAiModulePromptEditor()
+
+watch(
+  aiMenuModuleName,
+  (name) => {
+    aiAssistant.setPageModuleName(name)
+  },
+  { immediate: true }
+)
+const reportPageRootRef = ref<HTMLElement | null>(null)
+
+/** 本页提示词：ydoyun_ai_module_prompt（按组件拉取 map） */
+const promptMap = ref<Record<string, string>>({})
+const promptEditVisible = ref(false)
+const aiAnalyzeLoading = ref(false)
+
+const loadPromptMap = async () => {
+  try {
+    const map = await AiModulePromptApi.getPromptMapByComponent(pageModuleComponent.value)
+    promptMap.value = map || {}
+  } catch {
+    promptMap.value = {}
+  }
+  aiAssistant.setPagePrompt(promptMap.value[pageModuleKey.value] || null)
+}
+
+/** 每次打开编辑前拉最新，避免多人/多端保存后仍看到旧内容 */
+async function openPromptEdit() {
+  if (!canEditAiModulePrompt.value) return
+  await loadPromptMap()
+  promptEditVisible.value = true
+}
+
+async function onPromptSaved() {
+  await loadPromptMap()
+}
+
+async function handleAiAnalyze() {
+  if (!reportPageRootRef.value) {
+    ElMessage.warning('页面未就绪，请稍后重试')
+    return
+  }
+  /**
+   * 不可在调用 openWithScreenshot 之前 setPageLoading(true)：
+   * AiAssistantProvider.openWithScreenshot 在 pageLoading 为 true 时会直接 return，导致无反应。
+   * 加载态仅用本按钮的 aiAnalyzeLoading 即可。
+   */
+  aiAnalyzeLoading.value = true
+  try {
+    await loadPromptMap()
+    await nextTick()
+    await aiAssistant.openWithScreenshot(reportPageRootRef.value, {
+      moduleName: aiMenuModuleName.value,
+      moduleCode: pageModuleKey.value,
+      prompt: promptMap.value[pageModuleKey.value] || undefined,
+      pendingUserText:
+        '分析其中数据。'
+    })
+  } catch (e) {
+    console.error('AI 分析截图失败:', e)
+    ElMessage.error('截图失败，请稍后重试')
+  } finally {
+    aiAnalyzeLoading.value = false
+  }
+}
+
+const userStore = useUserStore()
+const username = computed(() => userStore.user.username || '')
+
+const queryDateLabel = computed(() =>
+  queryParams.rq ? dayjs(queryParams.rq).format('YYYY/M/D') : '--'
+)
+const todayLabel = computed(() => dayjs().format('YYYY/M/D'))
+
+/** 存储过程 YDY_AI_GET_QX_KEHU（@username）返回门店与路线 */
+const userStoreRows = ref<Array<{ ckdm: string; ckmc: string; route: string }>>([])
+
+const REPORT_ID = 7
+const PROCEDURE_SECRET = '123'
+const PROC_QX_KEHU = 'YDY_AI_GET_QX_KEHU'
+/** 商品图片查询：YDY_AI_GET_SPRB2(@pp,@CKDM,@rq_s,@rq_e,@p,@username,@type,@typevalues) */
+const PROC_SPRB2 = 'YDY_AI_GET_SPRB2'
+
+const queryParams = reactive({
+  route: '',
+  ckdm: '',
+  /** 默认查询日期：当前日期的前一天 */
+  rq: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
+  brandValues: [] as string[]
+})
+
+const productCategoryOptions = ref<Array<{ label: string; value: string }>>([])
+const imageFilter = reactive({
+  activeType: 'cangku',
+  storeValues: [] as string[],
+  daleiValues: [] as string[],
+  ztjValues: [] as string[],
+  zhongleiValues: [] as string[]
+})
+const daleiOptions = ref<Array<{ label: string; value: string }>>([])
+const ztjOptions = ref<Array<{ label: string; value: string }>>([])
+const zhongleiOptions = ref<Array<{ label: string; value: string }>>([])
+
+const routeSelectOptions = computed(() => {
+  const seen = new Set<string>()
+  return userStoreRows.value
+    .map((r) => r.route || '未分配线路')
+    .filter((r) => {
+      if (seen.has(r)) return false
+      seen.add(r)
+      return true
+    })
+    .map((r) => ({ value: r, label: r }))
+})
+
+const storeSelectOptions = computed(() =>
+  userStoreRows.value
+    .filter((r) => {
+      if (!queryParams.route) return true
+      const route = r.route || '未分配线路'
+      return route === queryParams.route
+    })
+    .map((r) => ({
+      value: r.ckdm,
+      label: r.ckmc || r.ckdm
+    }))
+)
+
+watch(
+  routeSelectOptions,
+  (options) => {
+    if (!options.length) {
+      queryParams.route = ''
+      return
+    }
+    const stillValid = options.some((o) => o.value === queryParams.route)
+    if (!queryParams.route || !stillValid) {
+      queryParams.route = options[0].value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  storeSelectOptions,
+  (options) => {
+    if (!options.length) {
+      queryParams.ckdm = ''
+      return
+    }
+    const stillValid = options.some((o) => o.value === queryParams.ckdm)
+    if (!queryParams.ckdm || !stillValid) {
+      queryParams.ckdm = options[0].value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  storeSelectOptions,
+  (options) => {
+    if (!options.length) {
+      imageFilter.storeValues = []
+      return
+    }
+    const validSet = new Set(options.map((o) => o.value))
+    imageFilter.storeValues = imageFilter.storeValues.filter((v) => validSet.has(v))
+    if (!imageFilter.storeValues.length && queryParams.ckdm) {
+      imageFilter.storeValues = [queryParams.ckdm]
+    }
+  },
+  { immediate: true }
+)
+
+const disabledDate = (time: Date) => time.getTime() > Date.now()
+
+const isQuerying = ref(false)
+
+async function loadUserStores() {
+  try {
+    const res = await ReportApi.executeProcedureWithData({
+      reportId: REPORT_ID,
+      name: PROC_QX_KEHU,
+      p: PROCEDURE_SECRET,
+      username: username.value
+    } satisfies ExecuteProcedureParams)
+    const list = extractProcedureList(res)
+    const rows = list
+      .map((row: any) => ({
+        ckdm: String(row.CKDM ?? row.ckdm ?? '').trim(),
+        ckmc: String(row.CKMC ?? row.ckmc ?? '').trim(),
+        route: String(
+          row.QYMC ??
+          row.qymc ??
+          row.XL ??
+          row.xl ??
+          row.LINE ??
+          row.line ??
+          row.LUXIAN ??
+          row.luxian ??
+          row.XIANLU ??
+          row.xianlu ??
+          row.ROAD ??
+          row.road ??
+          ''
+        ).trim()
+      }))
+      .filter((r) => r.ckdm)
+    userStoreRows.value = rows
+  } catch (e) {
+    console.warn('加载用户门店失败:', e)
+    userStoreRows.value = []
+  }
+}
+
+async function loadBrandOptions() {
+  try {
+    const res = await ReportApi.executeTable({ reportId: REPORT_ID, tableName: 'pinpai' })
+    const list = extractProcedureList(res)
+    const options = list
+      .map((row: any) => ({
+        label: String(row.PPMC ?? row.ppmc ?? row.PP ?? row.pp ?? '').trim(),
+        value: String(row.PPDM ?? row.ppdm ?? row.PP ?? row.pp ?? '').trim()
+      }))
+      .filter((opt) => opt.label && opt.value)
+    productCategoryOptions.value = options
+    const validValueSet = new Set(options.map((item) => item.value))
+    queryParams.brandValues = queryParams.brandValues.filter((v) => validValueSet.has(v))
+    if (!queryParams.brandValues.length && options.length) {
+      const hasDefault = options.some((item) => item.value === '1')
+      queryParams.brandValues = hasDefault ? ['1'] : [options[0].value]
+    }
+  } catch (e) {
+    console.warn('加载品牌选项失败:', e)
+    productCategoryOptions.value = []
+  }
+}
+
+function mapFilterOption(row: any): { label: string; value: string } | null {
+  const value = String(
+    row?.DM ??
+    row?.dm ??
+    row?.BH ??
+    row?.bh ??
+    row?.CODE ??
+    row?.code ??
+    row?.ID ??
+    row?.id ??
+    row?.VALUE ??
+    row?.value ??
+    row?.ZTJ ??
+    row?.ztj ??
+    row?.DLDM ??
+    row?.dldm ??
+    row?.ZLDM ??
+    row?.zldm ??
+    ''
+  ).trim()
+  const label = String(
+    row?.MC ??
+    row?.mc ??
+    row?.NAME ??
+    row?.name ??
+    row?.TEXT ??
+    row?.text ??
+    row?.ZTJ ??
+    row?.ztj ??
+    row?.DLMC ??
+    row?.dlmc ??
+    row?.ZLMC ??
+    row?.zlmc ??
+    value
+  ).trim()
+  if (!value) return null
+  return { label: label || value, value }
+}
+
+async function loadImageFilterOptions() {
+  try {
+    const [daleiRes, ztjRes, zhongleiRes] = await Promise.all([
+      ReportApi.executeProcedureWithData({
+        reportId: REPORT_ID,
+        name: 'YDY_AI_GET_QX_DALEI',
+        p: PROCEDURE_SECRET,
+        username: username.value
+      } satisfies ExecuteProcedureParams),
+      ReportApi.executeProcedureWithData({
+        reportId: REPORT_ID,
+        name: 'YDY_AI_GET_QX_ZTJ',
+        p: PROCEDURE_SECRET,
+        username: username.value
+      } satisfies ExecuteProcedureParams),
+      ReportApi.executeProcedureWithData({
+        reportId: REPORT_ID,
+        name: 'YDY_AI_GET_QX_ZHONGLEI',
+        p: PROCEDURE_SECRET,
+        username: username.value
+      } satisfies ExecuteProcedureParams)
+    ])
+    daleiOptions.value = extractProcedureList(daleiRes).map(mapFilterOption).filter((x): x is { label: string; value: string } => !!x)
+    ztjOptions.value = extractProcedureList(ztjRes).map(mapFilterOption).filter((x): x is { label: string; value: string } => !!x)
+    zhongleiOptions.value = extractProcedureList(zhongleiRes)
+      .map(mapFilterOption)
+      .filter((x): x is { label: string; value: string } => !!x)
+  } catch (e) {
+    console.warn('加载 TOP 图片墙筛选选项失败:', e)
+    daleiOptions.value = []
+    ztjOptions.value = []
+    zhongleiOptions.value = []
+  }
+}
+
+/** 图标地址：兼容 // 协议相对 URL */
+function normalizeWeatherIconUrl(url: string): string {
+  const u = String(url || '').trim()
+  if (!u) return ''
+  if (u.startsWith('//')) return `https:${u}`
+  return u
+}
+
+onActivated(() => {
+  setAiAssistantFabEnabled(true)
+})
+
+onDeactivated(() => {
+  setAiAssistantFabEnabled(false)
+})
+
+onMounted(async () => {
+  setAiAssistantFabEnabled(true)
+  aiAssistant.setPageModuleCode(pageModuleKey.value)
+  await loadPromptMap()
+  await loadBrandOptions()
+  await loadUserStores()
+  await loadImageFilterOptions()
+  await nextTick()
+  if (reportPageRootRef.value) aiAssistant.setScreenshotTarget(reportPageRootRef.value)
+  if (queryParams.ckdm && queryParams.rq) {
+    await handleQuery()
+  }
+})
+
+onUnmounted(() => {
+  setAiAssistantFabEnabled(false)
+  aiAssistant.setPageModuleName(null)
+  aiAssistant.setPageModuleCode(null)
+  aiAssistant.setScreenshotTarget(null)
+  aiAssistant.setPagePrompt(null)
+  aiAssistant.setPageLoading(false)
+})
+
+const summary = reactive<any>({})
+const categoryRows = ref<any[]>([])
+const productImageRows = ref<Array<{ spdm: string; pic: string }>>([])
+const topProductImageRows = computed(() => productImageRows.value.slice(0, 10))
+const imageWallLoading = ref(false)
+const imagePreviewVisible = ref(false)
+const currentPreviewImage = ref('')
+
+function clearReactiveObject(obj: Record<string, any>) {
+  Object.keys(obj).forEach((k) => delete obj[k])
+}
+
+function extractProcedureData(res: any): any {
+  return (res as any)?.data !== undefined ? (res as any).data : res
+}
+
+function extractProcedureList(res: any): any[] {
+  const raw = extractProcedureData(res)
+  if (Array.isArray(raw)) return raw
+  if (Array.isArray(raw?.list)) return raw.list
+  if (Array.isArray(raw?.data)) return raw.data
+  return []
+}
+
+function normalizeHyxf(v: any) {
+  // 兼容：可能返回 { member, ratio } 或 "18,100/45.2"
+  if (v == null) return v
+  if (typeof v === 'object') return v
+  if (typeof v === 'string') {
+    const parts = v.split('/')
+    if (parts.length >= 2) {
+      return { member: parts[0]?.trim(), ratio: parts[1]?.trim() }
+    }
+    return { member: v.trim() }
+  }
+  return { member: v }
+}
+
+// ========= 数据获取 =========
+async function handleQuery() {
+  if (!queryParams.route) {
+    ElMessage.warning('请选择路线')
+    return
+  }
+  if (!queryParams.ckdm) {
+    ElMessage.warning('请选择门店')
+    return
+  }
+  if (!queryParams.rq) {
+    ElMessage.warning('请选择日期')
+    return
+  }
+  if (!queryParams.brandValues?.length) {
+    ElMessage.warning('请选择品牌')
+    return
+  }
+
+  isQuerying.value = true
+  aiAssistant.setPageLoading(true)
+  try {
+    await Promise.all([
+      loadSummary(),
+      loadCategoryList(),
+      loadProductImageList()
+    ])
+  } catch (e) {
+    console.error('销售日报查询失败:', e)
+    ElMessage.error('销售日报查询失败，请稍后重试')
+  } finally {
+    isQuerying.value = false
+    aiAssistant.setPageLoading(false)
+  }
+}
+
+async function loadSummary() {
+  const summaryProcedureName = isProductDailyReport.value ? 'YDY_AI_GET_SPRB1' : 'YDY_AI_GET_SXRB'
+  const pp = (queryParams.brandValues || []).join(',')
+  const res = await ReportApi.executeProcedureWithData({
+    reportId: REPORT_ID,
+    name: summaryProcedureName,
+    rq_s: queryParams.rq,
+    rq_e: queryParams.rq,
+    ckdm: queryParams.ckdm,
+    pp: isProductDailyReport.value ? pp : undefined,
+    p: PROCEDURE_SECRET,
+    username: username.value
+  } satisfies ExecuteProcedureParams)
+
+  const raw = extractProcedureData(res)
+  const obj = Array.isArray(raw) ? raw[0] : raw
+
+  clearReactiveObject(summary)
+  Object.assign(summary, obj || {})
+  summary.hyxf = normalizeHyxf(summary.hyxf)
+  const anySum = summary as Record<string, unknown>
+  // 商品日报表字段别名归一，保证复用原模板时无需改动结构
+  if (anySum.jrXLdcl != null) anySum.jrdcl = anySum.jrXLdcl
+  if (anySum.byXLdcl != null) anySum.bydcl = anySum.byXLdcl
+  if (anySum.rmb != null) anySum.DRMB = anySum.rmb
+  if (anySum.JDJ == null && anySum.jdj != null) anySum.JDJ = anySum.jdj
+  if (anySum.PJZ == null && anySum.pjz != null) anySum.PJZ = anySum.pjz
+  if (anySum.zjzb == null && anySum.ZJZB != null) anySum.zjzb = anySum.ZJZB
+  if (anySum.kcl == null && anySum.KCL != null) anySum.kcl = anySum.KCL
+  // 毛利率：YDY_AI_GET_SXRB 可能返回 mll / MLL / ML
+  if (anySum.mll == null && anySum.MLL != null) anySum.mll = anySum.MLL
+  if (anySum.mll == null && anySum.ML != null) anySum.mll = anySum.ML
+  // 件单价：JDJ / jdj
+  if (anySum.JDJ == null && anySum.jdj != null) anySum.JDJ = anySum.jdj
+  // 日目标金额：rmb / DRMB / drmb 兼容
+  if (anySum.DRMB == null && anySum.drmb != null) anySum.DRMB = anySum.drmb
+  if (anySum.DRMB == null && anySum.rmb != null) anySum.DRMB = anySum.rmb
+}
+
+async function loadCategoryList() {
+  const pp = (queryParams.brandValues || []).join(',').trim()
+  if (!pp) {
+    categoryRows.value = []
+    return
+  }
+  const res = await ReportApi.executeProcedureWithData({
+    reportId: REPORT_ID,
+    name: 'YDY_AI_GET_SPRB3',
+    pp,
+    ckdm: queryParams.ckdm,
+    rq_s: queryParams.rq,
+    rq_e: queryParams.rq,
+    p: PROCEDURE_SECRET,
+    username: username.value
+  } satisfies ExecuteProcedureParams)
+
+  categoryRows.value = extractProcedureList(res)
+}
+
+async function loadProductImageList() {
+  const pp = (queryParams.brandValues || []).join(',')
+  if (!pp) {
+    productImageRows.value = []
+    return
+  }
+  const type = imageFilter.activeType || 'cangku'
+  const activeValues =
+    type === 'cangku'
+      ? imageFilter.storeValues
+      : type === 'dalei'
+        ? imageFilter.daleiValues
+        : type === 'fjsx4'
+          ? imageFilter.ztjValues
+          : imageFilter.zhongleiValues
+  const typevalues = activeValues.length ? activeValues.map((v) => `'${v}'`).join(',') : ''
+  imageWallLoading.value = true
+  try {
+    const res = await ReportApi.executeProcedureWithData({
+      reportId: REPORT_ID,
+      name: PROC_SPRB2,
+      pp,
+      ckdm: queryParams.ckdm,
+      rq_s: queryParams.rq,
+      rq_e: queryParams.rq,
+      type,
+      typevalues,
+      p: PROCEDURE_SECRET,
+      username: username.value
+    } satisfies ExecuteProcedureParams)
+    productImageRows.value = extractProcedureList(res).map((row: any) => ({
+      spdm: String(row.spdm ?? row.SPDM ?? '').trim(),
+      pic: normalizeWeatherIconUrl(String(row.pic ?? row.PIC ?? '').trim())
+    }))
+  } catch (e) {
+    console.warn('商品图片查询加载失败:', e)
+    productImageRows.value = []
+  } finally {
+    imageWallLoading.value = false
+  }
+}
+
+function handleImageFilterChange() {
+  if (!queryParams.ckdm || !queryParams.rq) return
+  loadProductImageList()
+}
+
+function handleImageScopeChange(type: 'cangku' | 'dalei' | 'fjsx4' | 'fjsx1') {
+  imageFilter.activeType = type
+  if (type !== 'cangku') imageFilter.storeValues = []
+  if (type !== 'dalei') imageFilter.daleiValues = []
+  if (type !== 'fjsx4') imageFilter.ztjValues = []
+  if (type !== 'fjsx1') imageFilter.zhongleiValues = []
+  if (type === 'cangku' && !imageFilter.storeValues.length && queryParams.ckdm) {
+    imageFilter.storeValues = [queryParams.ckdm]
+  }
+  handleImageFilterChange()
+}
+
+function openImagePreview(item: { pic: string }) {
+  if (!item?.pic) return
+  currentPreviewImage.value = item.pic
+  imagePreviewVisible.value = true
+}
+
+// ========= 字段归一/展示 =========
+function toFiniteNumber(v: any): number {
+  if (v == null || v === '') return NaN
+  if (typeof v === 'number') return Number.isFinite(v) ? v : NaN
+  const s = String(v).trim()
+  if (!s) return NaN
+  const cleaned = s
+    .replace(/[,\s，]/g, '')
+    .replace(/[¥￥]/g, '')
+    .replace(/%/g, '')
+  const n = Number(cleaned.replace(/[^0-9.+\-Ee]/g, ''))
+  return Number.isFinite(n) ? n : NaN
+}
+
+function normalizePercent(v: any): number {
+  const n = toFiniteNumber(v)
+  if (!Number.isFinite(n)) return 0
+  // 兼容：0.8 => 80%
+  return n <= 1 ? n * 100 : n
+}
+
+const todayProfitGoalRate = computed(() => normalizePercent(summary.jrMLdcl))
+const monthProfitGoalRate = computed(() => normalizePercent(summary.byMLdcl))
+
+type SummaryMetricType = 'percent' | 'money' | 'number' | 'raw'
+interface SummaryMetricItem {
+  key: string
+  label: string
+  value: any
+  type: SummaryMetricType
+  highlight?: boolean
+}
+
+const summaryMetricItems = computed<SummaryMetricItem[]>(() => [
+  { key: 'DRYJ', label: '当日业绩', value: summary.DRYJ, type: 'money', highlight: true },
+  { key: 'mll', label: '当日毛利率', value: summary.mll, type: 'percent' },
+  { key: 'lssl', label: '当日销量', value: summary.lssl, type: 'number', highlight: true },
+  { key: 'PJZ', label: '平均折扣', value: summary.PJZ ?? summary.xszk, type: 'raw' },
+  { key: 'ZRYJ', label: '昨日业绩', value: summary.ZRYJ, type: 'money' },
+  { key: 'mlltb', label: '昨日毛利率', value: summary.mlltb, type: 'percent' },
+  { key: 'jdj', label: '件单价', value: summary.jdj, type: 'money' },
+  { key: 'ZTJ', label: '正特价比', value: summary.ZTJ ?? summary.ztj ?? summary.zjzb, type: 'raw' },
+  { key: 'TBYJ', label: '同比业绩', value: summary.TBYJ, type: 'money' },
+  { key: 'mllhb', label: '同比毛利率', value: summary.mllhb, type: 'percent' },
+  { key: 'kcl', label: '库存量', value: summary.kcl, type: 'number' }
+])
+
+const categorySummaryRow = computed(() => {
+  const sumField = (keys: string[]) =>
+    categoryRows.value.reduce((acc, row) => {
+      const raw = keys.map((k) => row[k]).find((v) => v != null && v !== '')
+      const n = toFiniteNumber(raw)
+      return acc + (Number.isFinite(n) ? n : 0)
+    }, 0)
+  const avgField = (keys: string[]) => {
+    let sum = 0
+    let count = 0
+    categoryRows.value.forEach((row) => {
+      const raw = keys.map((k) => row[k]).find((v) => v != null && v !== '')
+      const n = toFiniteNumber(raw)
+      if (Number.isFinite(n)) {
+        sum += n
+        count += 1
+      }
+    })
+    return count ? sum / count : NaN
+  }
+  return {
+    SKC: sumField(['SKC', 'skc']),
+    JHSL: sumField(['JHSL', 'jhsl']),
+    THSL: sumField(['THSL', 'thsl']),
+    XSSL: sumField(['XSSL', 'xssl']),
+    XSJE: sumField(['XSJE', 'xsje']),
+    SXCB: sumField(['SXCB', 'sxcb']),
+    KCSL: sumField(['KCSL', 'kcsl']),
+    KCCB: sumField(['KCCB', 'kccb']),
+    XZZB: avgField(['XZZB', 'xzzb']),
+    KCZB: avgField(['KCZB', 'kczb']),
+    ZZT: avgField(['ZZT', 'zzt']),
+    ML: avgField(['ML', 'ml']),
+    XSZK: avgField(['XSZK', 'xszk'])
+  }
+})
+
+function clampPercent(v: any): number {
+  const n = normalizePercent(v)
+  return Math.min(100, Math.max(0, n))
+}
+
+function formatPercent(v: any): string {
+  const n = normalizePercent(v)
+  if (!Number.isFinite(n)) return '--'
+  return `${n.toFixed(1)}%`
+}
+
+/** 正价占比/特价占比/毛利率等：接口原样展示，不做 normalizePercent、不补 % */
+function rawCellValue(v: any): string {
+  if (v == null || v === '') return '-'
+  return String(v)
+}
+
+/**
+ * 品类行占比 PPZB：接口按「百分比数值」返回（0.71=0.71%、71=71%），
+ * 不可走 normalizePercent（≤1 会 *100，会把 0.71 误显示为 71%）。
+ */
+function formatCategoryPpzb(v: any): string {
+  if (v == null || v === '') return '--'
+  const n = toFiniteNumber(v)
+  if (!Number.isFinite(n)) return '--'
+  const abs = Math.abs(n)
+  if (abs < 10) {
+    return `${n.toFixed(2)}%`
+  }
+  if (n % 1 === 0) {
+    return `${Math.round(n)}%`
+  }
+  return `${n.toFixed(1)}%`
+}
+
+function formatMoney(v: any): string {
+  const n = toFiniteNumber(v)
+  if (!Number.isFinite(n)) return '--'
+  return n.toLocaleString('zh-CN', { maximumFractionDigits: 2 })
+}
+
+function formatNumber(v: any): string {
+  const n = toFiniteNumber(v)
+  if (!Number.isFinite(n)) return '--'
+  return n.toLocaleString('zh-CN', { maximumFractionDigits: 0 })
+}
+
+/** 正价/特价列：接口常为「金额/数量」一段字符串，拆开后分别按金额、件数展示 */
+function formatAmountSlashQuantity(v: any): string {
+  if (v == null || v === '') return '--'
+  if (typeof v === 'number' && Number.isFinite(v)) {
+    return formatMoney(v)
+  }
+  const s = String(v).trim()
+  if (!s) return '--'
+  const idx = s.indexOf('/')
+  if (idx === -1) {
+    return formatMoney(v)
+  }
+  const left = s.slice(0, idx).trim()
+  const right = s.slice(idx + 1).trim()
+  const moneyPart = left === '' ? '--' : formatMoney(left)
+  const qtyPart = right === '' ? '--' : formatNumber(right)
+  if (moneyPart === '--' && qtyPart === '--') return '--'
+  return `${moneyPart}/${qtyPart}`
+}
+
+function renderSummaryMetricValue(item: SummaryMetricItem): string {
+  switch (item.type) {
+    case 'percent':
+      return formatPercent(item.value)
+    case 'money':
+      return formatMoney(item.value)
+    case 'number':
+      return formatNumber(item.value)
+    case 'raw':
+      return rawCellValue(item.value)
+    default:
+      return '--'
+  }
+}
+
+function formatAvg(v: any): string {
+  const n = toFiniteNumber(v)
+  if (!Number.isFinite(n)) return '--'
+  return n.toLocaleString('zh-CN', { maximumFractionDigits: 2 })
+}
+
+</script>
+
+<style scoped>
+/* 布局变量 + Element Plus 主题变量（随主题色/暗黑切换） */
+.sxrb-page {
+  --sxrb-gap: 8px;
+  --sxrb-card-pad: 10px 12px;
+  --sxrb-radius: 6px;
+  /* 品类表：表头两行高度与 sticky 第二行 top 必须一致，否则会露出滚动区底色形成「断层」 */
+  --sxrb-category-thead-row1: 40px;
+  --sxrb-category-thead-row2: 28px;
+  --sxrb-category-thead-h: calc(var(--sxrb-category-thead-row1) + var(--sxrb-category-thead-row2));
+  --sxrb-col-brand-w: 148px;
+
+  background: var(--el-bg-color-page);
+  color: var(--el-text-color-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  /* 抵消 AppView 的 var(--app-content-padding): 0 20px 20px 20px，避免与页面自身 padding 叠成「双倍留白」 */
+  margin: 0 -20px -20px -20px;
+  padding: 8px 10px;
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  /* 品类区随数据行数增高，不占用 1fr 折叠高度；整页纵向滚动 */
+  grid-template-rows: auto auto auto;
+  gap: var(--sxrb-gap);
+  align-items: stretch;
+  min-height: calc(100vh - 84px);
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.top-header {
+  grid-column: 1 / span 2;
+  background: var(--el-bg-color);
+  padding: 8px 12px;
+  border-radius: var(--sxrb-radius);
+  border: 1px solid var(--el-border-color-light);
+  display: flex;
+  justify-content: space-between;
+  /* 与左侧天气同一条带等高：右侧查询+AI 获得相同交叉轴高度 */
+  align-items: center;
+  box-shadow: var(--el-box-shadow-light);
+  /* 天气 + 门店/日期/查询/AI 同一行；过窄时横向滚动，不把 AI 挤到下一行 */
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  gap: 6px 8px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.weather-bar {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  /* 与右侧筛选/AI 同排时：实况 + 近三天保持同一行，避免被挤成上下两行 */
+  flex-wrap: nowrap;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-self: stretch;
+  min-height: 0;
+}
+
+/* 实况区收窄（约 268px 上限），剩余宽度由「近三天」flex 吃掉 */
+.weather-primary-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  flex: 0 1 auto;
+  width: auto;
+  max-width: min(268px, 100%);
+  min-width: 0;
+}
+
+.weather-item {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding-right: 15px;
+  border-right: 1px solid var(--el-border-color-lighter);
+}
+
+.weather-item:last-of-type {
+  border-right: none;
+}
+
+.weather-item.today {
+  font-weight: bold;
+  color: var(--el-color-primary);
+}
+
+.weather-meta {
+  color: var(--el-text-color-secondary);
+  font-weight: normal;
+}
+
+.weather-item.today .weather-meta {
+  color: var(--el-color-primary);
+}
+
+.weather-current {
+  display: flex;
+  align-items: stretch;
+  gap: 12px;
+  padding: 10px 14px;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  border-radius: 14px;
+  border: 1px solid var(--el-border-color-lighter);
+  background: linear-gradient(
+    145deg,
+    rgba(64, 158, 255, 0.12) 0%,
+    rgba(144, 147, 153, 0.06) 55%,
+    rgba(103, 194, 58, 0.08) 100%
+  );
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.weather-current-icon-wrap {
+  flex-shrink: 0;
+  width: 52px;
+  height: 52px;
+  padding: 5px;
+  box-sizing: border-box;
+  border-radius: 14px;
+  overflow: hidden;
+  /* 浅冷色底：镂空/浅灰线稿图标在纯白底上易糊，衬底后轮廓更清晰 */
+  background: linear-gradient(160deg, #d9ebff 0%, #cfe2f8 45%, #c5daf3 100%);
+  border: 1px solid rgba(64, 158, 255, 0.22);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.65),
+    0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.weather-current-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+  /* 线稿图标：投影 + 略压暗，避免与浅底融在一起 */
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)) contrast(1.12) brightness(0.92);
+}
+
+.weather-current-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+}
+
+.weather-current-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.weather-current-city {
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--el-text-color-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.weather-current-tag {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--el-color-primary);
+  background: rgba(64, 158, 255, 0.12);
+  border: 1px solid rgba(64, 158, 255, 0.22);
+}
+
+.weather-current-bottom {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.weather-current-temp {
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  background: linear-gradient(120deg, var(--el-color-primary) 0%, #67c23a 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.weather-current-desc {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--el-text-color-secondary);
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 近三天：高度由 weatherThreeDaysAlignStyle 与左侧「当天实况」整列一致，内部行/卡垂直铺满 */
+.weather-three-days {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  /* 略提高基础宽度，三天卡片少被压扁 */
+  flex: 1 1 340px;
+  min-width: 0;
+  min-height: 0;
+  padding-right: 10px;
+  margin-right: 2px;
+  border-right: 1px solid var(--el-border-color-lighter);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.weather-three-days-row {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  flex-wrap: nowrap;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weather-day-card {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: none;
+  align-self: stretch;
+  height: 100%;
+  padding: 5px 6px;
+  border-radius: 8px;
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color-lighter);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  min-height: 0;
+  box-sizing: border-box;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.weather-day-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
+}
+
+.weather-day-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 3px;
+}
+
+.weather-day-card-head {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 6px;
+  line-height: 1.2;
+}
+
+.weather-day-week {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  line-height: 1.2;
+}
+
+.weather-day-date {
+  font-size: 9px;
+  font-weight: 500;
+  color: var(--el-text-color-secondary);
+  line-height: 1.2;
+}
+
+.weather-day-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  padding: 3px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  overflow: hidden;
+  background: linear-gradient(145deg, #dceaf9 0%, #d0e2f5 100%);
+  border: 1px solid rgba(64, 158, 255, 0.18);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.weather-day-icon-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+  border-radius: 6px;
+  vertical-align: middle;
+  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.2)) contrast(1.1) brightness(0.92);
+}
+
+.weather-day-icon-placeholder {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--el-fill-color) 0%, var(--el-fill-color-dark) 100%);
+}
+
+.weather-day-range {
+  font-size: 11px;
+  font-weight: 700;
+  text-align: left;
+  color: var(--el-text-color-primary);
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+}
+
+.weather-day-desc {
+  font-size: 9px;
+  line-height: 1.35;
+  color: var(--el-text-color-secondary);
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px 12px;
+  /* 与表单、AI 同一行不换行；过窄时随顶栏横向滚动 */
+  flex: 0 1 auto;
+  min-width: 0;
+  min-height: 0;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  align-self: stretch;
+}
+
+/* 表单区可略收缩，把一行空间让给查询+AI */
+.header-query {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: auto;
+  max-width: none;
+  display: flex;
+  align-items: center;
+  align-self: center;
+  min-height: 0;
+}
+
+.sxrb-ai-toolbar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  flex: 0 0 auto;
+  width: max-content;
+  max-width: none;
+  margin-left: auto;
+  align-self: stretch;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.sxrb-ai-toolbar :deep(.el-button) {
+  white-space: nowrap;
+}
+
+.sxrb-ai-toolbar .sxrb-ai-btn-edit,
+.sxrb-ai-toolbar .sxrb-ai-btn-analyze {
+  width: auto;
+  flex: 0 0 auto;
+  margin: 0;
+  padding-left: 6px;
+  padding-right: 6px;
+  min-width: 0;
+}
+
+.sxrb-ai-btn-edit :deep(.el-button__content),
+.sxrb-ai-toolbar .el-button--primary :deep(.el-button__content) {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sxrb-ai-btn-icon {
+  font-size: 16px;
+}
+
+.filter-form {
+  margin: 0;
+}
+
+.header-query :deep(.el-form--inline) {
+  width: auto;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+}
+
+.filter-form :deep(.el-form-item) {
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.filter-form :deep(.el-form-item:last-child) {
+  flex: 0 0 auto;
+  margin-right: 0;
+}
+
+.filter-form :deep(.el-form-item__label) {
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+  padding-right: 4px;
+  margin-right: 0;
+  white-space: nowrap;
+}
+
+.filter-form :deep(.el-form-item__content) {
+  margin-left: 0 !important;
+}
+
+.filter-form :deep(.filter-control) {
+  width: min(150px, 100%);
+  max-width: 100%;
+  min-width: 0;
+}
+
+/* 品牌多选文字较长，单独放宽避免看不到内容 */
+.filter-form :deep(.filter-control-brand) {
+  width: 240px;
+  min-width: 240px;
+}
+
+.filter-form :deep(.el-input__wrapper),
+.filter-form :deep(.el-select__wrapper) {
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px var(--el-border-color) inset;
+  min-height: 30px;
+}
+
+.filter-form :deep(.el-input__wrapper:hover),
+.filter-form :deep(.el-select__wrapper:hover) {
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+}
+
+.filter-form :deep(.el-button) {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.card {
+  background: var(--el-bg-color);
+  border-radius: var(--sxrb-radius);
+  padding: var(--sxrb-card-pad);
+  border: 1px solid var(--el-border-color-light);
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.card-title {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 0 0 10px;
+  padding: 0 0 8px 12px;
+  border-left: 3px solid var(--el-color-primary);
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  color: var(--el-text-color-primary);
+}
+
+/* 中间一行：flex 交叉轴拉伸，左右两卡始终同高 */
+.sxrb-middle-row {
+  grid-column: 1 / span 2;
+  display: flex;
+  align-items: stretch;
+  gap: var(--sxrb-gap);
+  min-width: 0;
+}
+
+.summary-card {
+  flex: 1.1;
+  min-width: 0;
+  min-height: 420px;
+  display: flex;
+  flex-direction: column;
+}
+
+.summary-card .card-title {
+  margin-bottom: 8px;
+  flex-shrink: 0;
+}
+
+.trend-card {
+  flex: 0.9;
+  min-width: 0;
+  min-height: 420px;
+  display: flex;
+  flex-direction: column;
+}
+
+.trend-card > .card-title {
+  flex-shrink: 0;
+}
+
+.trend-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+}
+
+.trend-title-main {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.trend-title-sub {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--el-text-color-secondary);
+  letter-spacing: 0.02em;
+}
+
+.trend-filter-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.trend-inline-filters {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.trend-inline-select {
+  width: 112px;
+  flex: 0 0 auto;
+}
+
+.trend-chart-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+.trend-product-wrap {
+  overflow: hidden;
+  padding-right: 2px;
+  min-height: 260px;
+}
+
+.product-image-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.product-image-card {
+  position: relative;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+  background: var(--el-fill-color-blank);
+  overflow: hidden;
+}
+
+.product-rank-badge {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  z-index: 2;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(90deg, #f56c6c, #e6a23c);
+}
+
+.product-image {
+  display: block;
+  width: 100%;
+  height: 86px;
+  object-fit: cover;
+  background: var(--el-fill-color-light);
+  cursor: pointer;
+}
+
+.product-image-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 86px;
+  color: var(--el-text-color-secondary);
+  font-size: 11px;
+  background: var(--el-fill-color-light);
+}
+
+.product-image-placeholder {
+  height: 100%;
+  min-height: 260px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.image-preview-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 260px;
+}
+
+.image-preview-main {
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+}
+
+.trend-chart-inner {
+  flex: 1;
+  min-height: 160px;
+  width: 100%;
+  min-width: 0;
+}
+
+.bullet-summary {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 14px;
+  margin-bottom: 8px;
+  flex-shrink: 0;
+}
+
+.bullet-container {
+  margin-bottom: 0;
+  min-width: 0;
+}
+
+.bullet-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 8px;
+}
+
+.bullet-time-under {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  padding-top: 6px;
+  border-top: 1px dashed var(--el-border-color-lighter);
+  min-width: 0;
+}
+
+.bullet-time-label {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  font-weight: 500;
+}
+
+.bullet-time-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-regular);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.bullet-label {
+  font-size: 13px;
+  color: var(--el-text-color-primary);
+}
+
+.bullet-value {
+  color: var(--el-color-primary);
+  font-size: 16px;
+  font-weight: 600;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.bullet-graph {
+  position: relative;
+  height: 16px;
+  background: var(--el-fill-color-light);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  overflow: visible;
+}
+
+.bullet-bar {
+  height: 16px;
+  background: var(--el-color-primary);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  transition: width 0.6s ease;
+  border-radius: 8px;
+}
+
+.bullet-bar--today {
+  box-shadow: 2px 0 8px color-mix(in srgb, var(--el-color-primary) 35%, transparent);
+}
+
+.bullet-bar--month {
+  opacity: 0.85;
+}
+
+.time-elapsed-line {
+  position: absolute;
+  width: 2px;
+  height: 24px;
+  background: var(--el-text-color-regular);
+  z-index: 5;
+  top: -4px;
+  border-radius: 1px;
+}
+
+.target-marker {
+  position: absolute;
+  width: 3px;
+  height: 20px;
+  background: var(--el-color-danger);
+  z-index: 5;
+  top: -2px;
+}
+
+.summary-grid {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-auto-rows: minmax(58px, auto);
+  gap: 6px;
+  margin-top: 2px;
+  align-content: stretch;
+}
+
+.stat-box {
+  background: var(--el-fill-color-lighter);
+  padding: 8px 10px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 4px;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-self: stretch;
+  box-sizing: border-box;
+}
+
+.stat-box.highlight {
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+}
+
+.label {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  display: block;
+  margin-bottom: 4px;
+}
+
+.value {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.value--drss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  gap: 0;
+  min-width: 0;
+}
+
+.value--drss .value-main {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1.2;
+  flex-shrink: 0;
+}
+
+.stat-drss-compare {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.stat-compare-flat {
+  color: var(--el-text-color-secondary) !important;
+  font-weight: 500;
+}
+
+.sxrb-metric-up {
+  color: var(--el-color-danger);
+}
+
+.sxrb-metric-down {
+  color: var(--el-color-primary);
+}
+
+.sub-txt {
+  font-size: 11px;
+  color: var(--el-color-primary);
+  margin-left: 4px;
+  font-weight: normal;
+}
+
+.category-container {
+  grid-column: 1 / span 2;
+  display: flex;
+  flex-direction: column;
+  min-height: 340px;
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+.category-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+}
+
+.category-title-main {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.category-title-sub {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--el-text-color-secondary);
+  letter-spacing: 0.02em;
+}
+
+.category-container .card-title {
+  margin-bottom: 8px;
+  flex-shrink: 0;
+}
+
+.table-scroll {
+  width: 100%;
+  flex: none;
+  /* 仅横向滚动宽表；纵向随 tbody 行数完整展开，不出现内部 y 轴滚动条 */
+  overflow-x: auto;
+  overflow-y: visible;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+  background: var(--el-bg-color);
+  margin-top: 0;
+  -webkit-overflow-scrolling: touch;
+  min-height: 250px;
+}
+
+.sxrb-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  min-width: 1200px;
+}
+
+.sxrb-table th {
+  background: var(--el-fill-color-light);
+  padding: 4px 6px;
+  border: 1px solid var(--el-border-color-lighter);
+  text-align: center;
+  white-space: nowrap;
+  font-weight: 600;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+.sxrb-table td {
+  padding: 5px;
+  border: 1px solid var(--el-border-color-lighter);
+  text-align: center;
+  white-space: nowrap;
+  background: var(--el-bg-color);
+}
+
+.sxrb-total-row td {
+  font-weight: 600;
+  background: var(--el-fill-color-light);
+}
+
+/* 表头纵向固定 + 仅「品牌品类」列横向冻结 */
+.sxrb-table--sticky thead tr:first-child th {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  background-color: var(--el-fill-color-light);
+  background-clip: padding-box;
+}
+
+/* 第一行：非 rowspan 与 rowspan 行高与第二行 sticky 的 top 严格对齐，避免横向滚动时两行之间露底断层 */
+.sxrb-table--sticky thead tr:first-child th[rowspan='2'] {
+  height: var(--sxrb-category-thead-h);
+  vertical-align: middle;
+}
+
+.sxrb-table--sticky thead tr:first-child th:not([rowspan]) {
+  height: var(--sxrb-category-thead-row1);
+  min-height: var(--sxrb-category-thead-row1);
+}
+
+.sxrb-table--sticky thead tr:nth-child(2) th {
+  position: sticky;
+  top: var(--sxrb-category-thead-row1);
+  z-index: 2;
+  background-color: var(--el-fill-color-light);
+  background-clip: padding-box;
+  height: var(--sxrb-category-thead-row2);
+  min-height: var(--sxrb-category-thead-row2);
+  box-sizing: border-box;
+}
+
+.sxrb-table--sticky thead tr:first-child th.sxrb-th-sticky {
+  z-index: 5;
+}
+
+.sxrb-table--sticky .sxrb-th-sticky,
+.sxrb-table--sticky .sxrb-td-sticky {
+  position: sticky;
+  background: var(--el-fill-color-light);
+}
+
+.sxrb-table--sticky tbody .sxrb-td-sticky {
+  background: var(--el-bg-color);
+  z-index: 1;
+}
+
+.sxrb-table--sticky .sxrb-col-brand {
+  left: 0;
+  min-width: var(--sxrb-col-brand-w);
+  max-width: 200px;
+  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.06);
+  vertical-align: middle;
+}
+
+.sxrb-brand-cell {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 6px;
+  line-height: 1.35;
+  min-width: 0;
+}
+
+.sxrb-brand-name {
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sxrb-brand-zb {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0.02em;
+  color: var(--el-color-primary);
+  background: linear-gradient(
+    180deg,
+    var(--el-color-primary-light-9) 0%,
+    var(--el-fill-color-light) 100%
+  );
+  border: 1px solid var(--el-color-primary-light-5);
+  border-radius: 6px;
+  padding: 1px 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.sxrb-table--sticky .sxrb-col-day-rate,
+.sxrb-table--sticky .sxrb-col-month-rate {
+  min-width: 108px;
+}
+
+.sxrb-table--sticky .sxrb-col-cat-zb,
+.sxrb-table--sticky .sxrb-col-cat-mll,
+.sxrb-table--sticky .sxrb-col-cat-jdj {
+  min-width: 88px;
+  max-width: 120px;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.sxrb-table--sticky td.sxrb-col-cat-metric {
+  font-size: 13px;
+  text-align: center;
+  color: var(--el-text-color-regular);
+}
+
+.sxrb-table--sticky thead tr:first-child th.sxrb-th-sticky.sxrb-col-brand {
+  z-index: 6;
+}
+
+.pair {
+  display: inline-block;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 金额/量 两段，略放宽避免「/」后半段被裁掉 */
+.pair.pair--money-qty {
+  max-width: min(320px, 100%);
+}
+
+.progress-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 100px;
+}
+
+.progress-bar-bg {
+  width: 100px;
+  height: 10px;
+  background: var(--el-fill-color-dark);
+  position: relative;
+  margin: 0 auto;
+  border-radius: 1px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 6px;
+  background: var(--el-color-primary);
+  position: absolute;
+  left: 0;
+  top: 2px;
+  border-radius: 1px;
+}
+
+.progress-marker {
+  position: absolute;
+  width: 2px;
+  height: 10px;
+  background: var(--el-text-color-regular);
+  top: 0;
+  transform: translateX(-1px);
+}
+
+.progress-text {
+  font-size: 10px;
+  color: var(--el-text-color-secondary);
+}
+
+/* 顶栏：天气与查询条件在中等宽度下纵向排列，避免挤压 */
+@media (max-width: 1200px) {
+  .top-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .weather-bar {
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .weather-primary-stack {
+    max-width: 100%;
+  }
+
+  .weather-three-days {
+    flex: 1 1 auto;
+    min-width: 0;
+    border-right: none;
+    padding-right: 0;
+    margin-right: 0;
+    padding-top: 10px;
+    margin-top: 6px;
+    border-top: 1px solid var(--el-border-color-lighter);
+    /* 竖屏仍与「当天实况」同高：由内联 style + JS 测量，勿用 !important 取消 */
+    box-sizing: border-box;
+  }
+
+  .weather-three-days-row {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .weather-day-card {
+    flex: 1 1 calc(33.333% - 6px);
+    min-width: 100px;
+  }
+
+  .header-right {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    align-items: stretch;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .header-query {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+    max-width: none;
+  }
+
+  /* 与宽屏一致：门店/日期/查询/提示词/AI 同一行，过窄横向滚动 */
+  .header-query :deep(.el-form--inline) {
+    flex-wrap: nowrap;
+  }
+
+  .filter-form {
+    width: auto;
+    min-width: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0;
+  }
+
+  .filter-form :deep(.el-form-item) {
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+
+  .filter-form :deep(.el-form-item:last-child) {
+    flex: 0 0 auto;
+    margin-right: 0;
+  }
+
+  .filter-form :deep(.filter-control) {
+    width: min(160px, 100%);
+    max-width: 100%;
+    min-width: 0;
+  }
+}
+
+/* 自适应：窄屏下中间两列改为上下堆叠，宫格与子弹图收紧 */
+@media (max-width: 1199px) {
+  .sxrb-page {
+    grid-template-columns: 1fr;
+  }
+
+  .sxrb-middle-row {
+    flex-direction: column;
+  }
+
+  .summary-card,
+  .trend-card {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .sxrb-page {
+    margin: 0 -20px -20px -20px;
+    padding: 8px 10px;
+  }
+
+  .summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: none;
+    grid-auto-rows: minmax(48px, auto);
+  }
+
+  .bullet-summary {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .filter-form :deep(.filter-control) {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .product-image-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: none;
+  }
+
+  .product-image,
+  .product-image-empty {
+    height: 84px;
+  }
+
+  .trend-inline-select {
+    width: 100px;
+  }
+}
+
+@media (max-width: 480px) {
+  .summary-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: none;
+    grid-auto-rows: minmax(48px, auto);
+  }
+
+  .weather-bar {
+    gap: 8px;
+  }
+}
+</style>
+
diff --git a/types/router.d.ts b/types/router.d.ts
index 03e91f1..eee2cee 100644
--- a/types/router.d.ts
+++ b/types/router.d.ts
@@ -36,6 +36,8 @@ import { defineComponent } from 'vue'
 **/
 declare module 'vue-router' {
   interface RouteMeta extends Record<string | number | symbol, unknown> {
+    /** 后台菜单 id（动态路由由 generateRoute 从菜单节点写入，用于 Dify 知识库命名等） */
+    menuId?: number
     hidden?: boolean
     alwaysShow?: boolean
     title?: string
@@ -68,6 +70,8 @@ declare global {
   }
 
   interface AppCustomRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+    /** 菜单编号，与后端 MenuVO.id 一致 */
+    id?: number
     icon: any
     name: string
     meta: RouteMeta
diff --git a/日志汇总统计.html b/日志汇总统计.html
new file mode 100644
index 0000000..a3222ab
--- /dev/null
+++ b/日志汇总统计.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>日志填报明细 - 已填报</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        body { background-color: #f0f2f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
+        .card { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .sidebar-active { border-right: 3px solid #1890ff; background: #e6f7ff; color: #1890ff; font-weight: bold; }
+        /* 限制内容列宽度并处理长文本溢出 */
+        .content-cell { 
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    </style>
+</head>
+<body class="p-6">
+
+    <div class="flex justify-between items-center mb-6">
+        <div>
+            <h1 class="text-xl font-bold text-gray-800">日志填报明细</h1>
+            <p class="text-sm text-gray-500">查看已完成提交的员工日志内容</p>
+        </div>
+        <div class="flex gap-3">
+            <input type="date" value="2026-04-12" class="border rounded px-3 py-1.5 text-sm outline-none focus:border-blue-500 shadow-sm bg-white text-gray-600">
+            <button class="bg-[#1890ff] text-white px-4 py-1.5 rounded text-sm hover:bg-blue-600 transition shadow-sm font-medium">导出已报明细</button>
+        </div>
+    </div>
+
+    <div class="flex gap-6">
+        <div class="w-64 flex-shrink-0 card p-4 h-fit">
+            <h3 class="font-bold mb-4 text-gray-700 text-sm flex items-center gap-2">
+                <i class="fas fa-sitemap text-blue-500"></i> 部门结构
+            </h3>
+            <ul class="space-y-1 text-sm">
+                <li class="p-3 sidebar-active cursor-pointer rounded flex justify-between">
+                    <span>全公司</span> <span class="opacity-60 font-normal">128</span>
+                </li>
+                <li class="p-3 hover:bg-gray-50 cursor-pointer rounded text-gray-600 flex justify-between transition">
+                    <span>店铺日报</span> <span class="text-gray-400 font-normal">45</span>
+                </li>
+                <li class="p-3 hover:bg-gray-50 cursor-pointer rounded text-gray-600 flex justify-between transition">
+                    <span>采购日报</span> <span class="text-gray-400 font-normal">32</span>
+                </li>
+                <li class="p-3 hover:bg-gray-50 cursor-pointer rounded text-gray-600 flex justify-between transition">
+                    <span>商品日报</span> <span class="text-gray-400 font-normal">51</span>
+                </li>
+            </ul>
+        </div>
+
+        <div class="flex-1 card overflow-hidden">
+            <div class="border-b px-6 py-4 flex justify-between items-center bg-gray-50/50">
+                <div class="flex gap-8">
+                    <button class="text-sm text-gray-400 pb-2 hover:text-gray-600 transition-all font-medium">未填报名单 (16)</button>
+                    <button class="text-sm font-bold border-b-2 border-blue-500 pb-2 text-blue-600 transition-all">已填报明细 (112)</button>
+                </div>
+                <div class="relative">
+                    <input type="text" placeholder="搜索姓名或内容..." class="text-xs border rounded-full px-4 py-1.5 w-64 outline-none focus:border-blue-500 shadow-sm">
+                    <i class="fas fa-search absolute right-3 top-2 text-gray-300"></i>
+                </div>
+            </div>
+
+            <table class="w-full text-left text-sm table-fixed">
+                <thead class="bg-gray-50 text-gray-500 border-b">
+                    <tr>
+                        <th class="px-6 py-4 font-bold w-40">姓名</th>
+                        <th class="px-6 py-4 font-bold w-56">部门</th>
+                        <th class="px-6 py-4 font-bold">填报内容</th>
+                        <th class="px-6 py-4 font-bold text-center w-28 uppercase text-[10px] tracking-wider">提交状态</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y text-gray-700">
+                    <tr class="hover:bg-blue-50/30 transition group">
+                        <td class="px-6 py-4 flex items-center gap-3">
+                            <span class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xs font-bold shadow-sm">王</span>
+                            <span class="font-medium text-gray-800">王小明</span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <div class="text-gray-700 font-medium">零售事业部</div>
+                            <div class="text-[10px] text-gray-400 uppercase tracking-tighter mt-0.5">Chenzhou Store · Manager</div>
+                        </td>
+                        <td class="px-6 py-4">
+                            <div class="bg-gray-50 p-2.5 rounded border border-transparent group-hover:border-gray-200 group-hover:bg-white transition relative">
+                                <p class="text-xs text-gray-600 leading-relaxed content-cell">
+                                    今日郴州店客流量较昨日回升，成交额达到预期目标。主推的春季新款T恤表现优异，转化率约12%。下午对新入职导购进行了系统培训。
+                                </p>
+                                <div class="absolute right-2 bottom-1 text-[10px] text-blue-500 opacity-0 group-hover:opacity-100 transition font-bold">详情 ></div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-50 text-green-600 border border-green-100">
+                                <i class="fas fa-check-circle mr-1"></i> 已提交
+                            </span>
+                        </td>
+                    </tr>
+
+                    <tr class="hover:bg-blue-50/30 transition group">
+                        <td class="px-6 py-4 flex items-center gap-3">
+                            <span class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center text-xs font-bold shadow-sm">李</span>
+                            <span class="font-medium text-gray-800">李华</span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <div class="text-gray-700 font-medium">采购部</div>
+                            <div class="text-[10px] text-gray-400 uppercase tracking-tighter mt-0.5">Supply Chain · Buyer</div>
+                        </td>
+                        <td class="px-6 py-4">
+                            <div class="bg-gray-50 p-2.5 rounded border border-transparent group-hover:border-gray-200 group-hover:bg-white transition relative">
+                                <p class="text-xs text-gray-600 leading-relaxed content-cell">
+                                    完成了与面料供应商的本周对账工作。确认了下周到货的夏季轻薄款面料数量及颜色。注意到原材料价格有小幅波动，已汇报给商品中心。
+                                </p>
+                                <div class="absolute right-2 bottom-1 text-[10px] text-blue-500 opacity-0 group-hover:opacity-100 transition font-bold">详情 ></div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-50 text-green-600 border border-green-100">
+                                <i class="fas fa-check-circle mr-1"></i> 已提交
+                            </span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div class="px-6 py-4 flex justify-between items-center border-t bg-gray-50/50 text-xs text-gray-500">
+                <span>显示 1 到 10 条，共 112 条已填报记录</span>
+                <div class="flex gap-2">
+                    <button class="p-1.5 border rounded bg-white hover:bg-gray-100 disabled:opacity-50" disabled>&lt;</button>
+                    <button class="p-1.5 border rounded bg-blue-500 text-white min-w-[30px] font-bold shadow-sm">1</button>
+                    <button class="p-1.5 border rounded bg-white hover:bg-gray-100 min-w-[30px]">2</button>
+                    <button class="p-1.5 border rounded bg-white hover:bg-gray-100 min-w-[30px]">3</button>
+                    <button class="p-1.5 border rounded bg-white hover:bg-gray-100">&gt;</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>
\ No newline at end of file