@chenchaolong/plugin-trade-compliance-workbench 0.1.44 → 0.1.45

package/dist/lib/remote-components/trade-compliance-workbench/app.js

@@ -70,6 +70,7 @@
     const [activePage, setActivePage] = React.useState('overview-page')
     const [selectedIds, setSelectedIds] = React.useState([])
     const [statusFilter, setStatusFilter] = React.useState('all')
+    const [overviewTab, setOverviewTab] = React.useState('all')
     const [busy, setBusy] = React.useState(false)
     const [query, setQuery] = React.useState('')
     const [pageByList, setPageByList] = React.useState({})
@@ -103,7 +104,7 @@
       }
     }, [])
 
-    React.useEffect(reportResize, [data, activePage, selectedIds, statusFilter, busy, formDialog, deleteDialog, hsCodeSearch, hsCodeDetailDialog])
+    React.useEffect(reportResize, [data, activePage, selectedIds, statusFilter, overviewTab, busy, formDialog, deleteDialog, hsCodeSearch, hsCodeDetailDialog])
 
     const reviewItems = data.reviewItems.filter((item) => !isPlaceholderReviewItem(item))
     const pendingItems = reviewItems.filter((item) => (item.reviewStatus || 'pending') === 'pending')
@@ -646,7 +647,7 @@
           )
         ),
         h('nav', { className: 'tcw-nav', 'aria-label': '主导航' }, [
-          tab('overview-page', '待处理', '1', pendingItems.length, 'blue'),
+          tab('overview-page', '总览', '1', pendingItems.length, 'blue'),
           tab('controlled-goods-page', '管控规则库', '2', controlledReviews.length, 'green'),
           tab('products-page', '供应商商品', '3', supplierReviews.length, 'orange'),
           tab('workbooks-page', '销售发票', '4', salesReviews.length + filteredWorkbooks.length, 'violet'),
@@ -707,21 +708,43 @@
     }
 
     function renderOverviewPage() {
+      const pendingOverviewItems = overviewTab === 'all'
+        ? pendingItems.slice(0, 12)
+        : pendingItems.filter((item) => item.type === overviewTab).slice(0, 12)
       return h('div', { className: 'tcw-page overview-page' },
         h('section', { className: 'tcw-metrics' },
-          metric('待审核', pendingItems.length),
-          metric('管控识别待审', pendingControlledReviews.length),
-          metric('供应商商品待审', pendingSupplierReviews.length),
-          metric('销售合同待审', pendingSalesReviews.length),
-          metric('已入库管控商品', data.controlledGoods.length),
-          metric('已入库供应商商品', data.products.length),
-          metric('销售发票历史', data.workbookGenerations.length),
-          metric('全部审核记录', reviewItems.length)
+          metric('待审核', pendingItems.length, '总', 'blue'),
+          metric('管控识别待审', pendingControlledReviews.length, '盾', 'green'),
+          metric('供应商商品待审', pendingSupplierReviews.length, '品', 'orange'),
+          metric('销售合同待审', pendingSalesReviews.length, '票', 'violet'),
+          metric('已入库管控商品', data.controlledGoods.length, '仓', 'slate'),
+          metric('已入库供应商商品', data.products.length, '商', 'green'),
+          metric('销售发票历史', data.workbookGenerations.length, '文', 'violet'),
+          metric('全部审核记录', reviewItems.length, '记', 'blue')
         ),
-        panel('最近待审核', pendingItems.slice(0, 12).length
-          ? compactReviewList(pendingItems.slice(0, 12))
-          : empty('暂无待审核记录。智能体识别结果会先出现在这里。'))
+        panel('待办事项明细',
+          h('div', { className: 'tcw-overview-panel' },
+            h('div', { className: 'tcw-overview-tabs' }, [
+              overviewTabButton('all', '全部', pendingItems.length),
+              overviewTabButton('controlled_goods', '规则', pendingItems.filter((item) => item.type === 'controlled_goods').length),
+              overviewTabButton('supplier_product', '商品', pendingItems.filter((item) => item.type === 'supplier_product').length),
+              overviewTabButton('customs_workbook', '发票', pendingItems.filter((item) => item.type === 'customs_workbook').length)
+            ]),
+            pendingOverviewItems.length
+              ? compactReviewList(pendingOverviewItems)
+              : empty('暂无待审核记录。智能体识别结果会先出现在这里。')
+          )
+        )
       )
+
+      function overviewTabButton(key, label, count) {
+        return h('button', {
+          key,
+          type: 'button',
+          className: overviewTab === key ? 'tcw-overview-tab active' : 'tcw-overview-tab',
+          onClick: () => setOverviewTab(key)
+        }, `${label}${typeof count === 'number' ? ` ${count}` : ''}`)
+      }
     }
 
     function renderControlledGoodsPage() {
@@ -1282,8 +1305,14 @@
 
   }
 
-  function metric(label, valueText) {
-    return h('div', { className: 'tcw-metric' }, h('span', null, label), h('strong', null, valueText))
+  function metric(label, valueText, icon, tone) {
+    return h('div', { className: 'tcw-metric' },
+      h('span', { className: 'tcw-metric-icon ' + (tone || 'blue') }, icon || '·'),
+      h('div', { className: 'tcw-metric-body' },
+        h('span', null, label),
+        h('strong', null, valueText)
+      )
+    )
   }
 
   function panel(title, content) {
@@ -1794,7 +1823,7 @@
   }
 
     function pageTitle(key) {
-      if (key === 'overview-page') return '待处理'
+      if (key === 'overview-page') return '总览'
       if (key === 'controlled-goods-page') return '管控规则库'
       if (key === 'products-page') return '供应商商品'
       if (key === 'hs-code-search-page') return '工具'
@@ -1810,7 +1839,7 @@
     }
 
     function pageBreadcrumb(key) {
-      if (key === 'overview-page') return 'Workspace / 待处理'
+      if (key === 'overview-page') return 'Workspace / 总览'
       if (key === 'controlled-goods-page') return 'Workspace / 管控规则库'
       if (key === 'products-page') return 'Workspace / 供应商商品'
       if (key === 'workbooks-page') return 'Workspace / 销售发票'
@@ -1818,7 +1847,7 @@
     }
 
     function assistantTip(key) {
-      if (key === 'overview-page') return '从待处理开始，优先确认管控规则和供应商商品，再推进发票生成。'
+      if (key === 'overview-page') return '从总览开始，优先确认管控规则和供应商商品，再推进发票生成。'
       if (key === 'controlled-goods-page') return '维护管控商品时，建议先核对 HS 编码和关键词，再保存入库。'
       if (key === 'products-page') return '供应商商品可先选用候选 HS 编码，再检查英文品名和管控状态。'
       if (key === 'workbooks-page') return '购销合同审核完毕后，再生成销售发票，避免后面重改。'
@@ -1878,9 +1907,33 @@ button, input, textarea, select { font: inherit; letter-spacing: 0; }
 .tcw-subsection-head h3, .tcw-list-title h3 { margin: 0; font-size: 15px; line-height: 1.3; }
 .tcw-subsection-head p, .tcw-list-title span { margin: 0; color: var(--tcw-muted); font-size: 12px; }
 .tcw-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
-.tcw-metric { display: grid; gap: 4px; border: 1px solid var(--tcw-border); border-radius: 8px; background: var(--tcw-card); padding: 12px; }
-.tcw-metric span { color: var(--tcw-muted); font-size: 12px; }
-.tcw-metric strong { font-size: 22px; line-height: 1; }
+.tcw-metric {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  border: 1px solid var(--tcw-border);
+  border-radius: 8px;
+  background: var(--tcw-card);
+  padding: 12px;
+}
+.tcw-metric-icon {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  font-size: 18px;
+  font-weight: 900;
+}
+.tcw-metric-icon.blue { background: #e8f0ff; color: var(--tcw-primary); }
+.tcw-metric-icon.green { background: #e7f8ef; color: var(--tcw-success); }
+.tcw-metric-icon.orange { background: #fff2df; color: var(--tcw-warning); }
+.tcw-metric-icon.violet { background: #f1eaff; color: var(--tcw-violet); }
+.tcw-metric-icon.slate { background: #eef2f6; color: var(--tcw-slate); }
+.tcw-metric-body { display: grid; gap: 2px; }
+.tcw-metric-body span { color: var(--tcw-muted); font-size: 12px; }
+.tcw-metric-body strong { font-size: 22px; line-height: 1; }
 .tcw-field { display: grid; gap: 5px; min-width: 0; }
 .tcw-field span { color: var(--tcw-muted); font-size: 12px; font-weight: 800; }
 .tcw-field-check { align-content: end; }
@@ -2044,6 +2097,34 @@ body { background: var(--tcw-bg); letter-spacing: 0; }
   background: #eff6ff;
   color: #174ea6;
 }
+.tcw-overview-panel {
+  display: grid;
+  gap: 12px;
+}
+.tcw-overview-tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  width: fit-content;
+  border: 1px solid var(--tcw-border);
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+}
+.tcw-overview-tab {
+  min-height: 38px;
+  border: 0;
+  border-right: 1px solid var(--tcw-border);
+  background: #fff;
+  color: var(--tcw-muted);
+  padding: 8px 16px;
+  font-weight: 800;
+}
+.tcw-overview-tab:last-child { border-right: 0; }
+.tcw-overview-tab.active {
+  background: #eff6ff;
+  color: var(--tcw-primary);
+}
 .tcw-tab em {
   min-width: 22px;
   border-radius: 999px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chenchaolong/plugin-trade-compliance-workbench",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "description": "Trade Compliance Workbench app plugin for controlled goods review, supplier product management, and customs workbook generation.",
   "author": {
     "name": "XpertAI",