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

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,27 +647,12 @@
           )
         ),
         h('nav', { className: 'tcw-nav', 'aria-label': '主导航' }, [
-          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'),
-          tab('hs-code-search-page', '工具', '5', null, 'slate')
-        ]),
-        h('section', { className: 'tcw-sidebar-section' },
-          h('h2', null, '主流程'),
-          h('ol', { className: 'tcw-flow-list' }, [
-            '维护管控规则',
-            '上传供应商合同',
-            '确认 HS 编码候选',
-            '审核供应商商品',
-            '上传购销合同',
-            '生成销售发票'
-          ].map((item) => h('li', { key: item }, h('span', null), item)))
-        ),
-        h('section', { className: 'tcw-sidebar-section compact' },
-          h('h2', null, '数据关系'),
-          h('p', null, '管控规则用于匹配供应商商品，已确认商品进入销售发票生成流程。')
-        )
+          tab('overview-page', '总览', 'dashboard', pendingItems.length, 'blue'),
+          tab('controlled-goods-page', '管控商品', 'shield', controlledReviews.length, 'green'),
+          tab('products-page', '供应商商品', 'box', supplierReviews.length, 'orange'),
+          tab('workbooks-page', '销售发票', 'invoice', salesReviews.length + filteredWorkbooks.length, 'violet'),
+          tab('hs-code-search-page', '工具', 'search', null, 'slate')
+        ])
       )
     }
 
@@ -686,7 +672,7 @@
         h('section', { className: 'tcw-assistant-card' },
           h('h3', null, '快捷入口'),
           h('div', { className: 'tcw-assistant-actions' }, [
-            h('button', { className: 'tcw-mini-btn', onClick: () => setActivePage('controlled-goods-page') }, '管控规则'),
+            h('button', { className: 'tcw-mini-btn', onClick: () => setActivePage('controlled-goods-page') }, '管控商品'),
             h('button', { className: 'tcw-mini-btn', onClick: () => setActivePage('products-page') }, '商品审核'),
             h('button', { className: 'tcw-mini-btn', onClick: () => setActivePage('hs-code-search-page') }, '查 HS 编码')
           ])
@@ -700,28 +686,50 @@
 
     function tab(key, label, icon, count, tone) {
       return h('button', { key, className: key === activePage ? 'tcw-tab active' : 'tcw-tab', onClick: () => setActivePage(key) },
-        h('span', { className: 'tcw-nav-icon ' + (tone || 'blue') }, icon),
+        h('span', { className: 'tcw-nav-icon ' + (tone || 'blue') }, iconImage(icon, label, tone)),
         h('span', null, label),
         count == null ? null : h('em', null, count)
       )
     }
 
     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, 'dashboard', 'blue'),
+          metric('管控识别待审', pendingControlledReviews.length, 'shield', 'green'),
+          metric('供应商商品待审', pendingSupplierReviews.length, 'box', 'orange'),
+          metric('销售合同待审', pendingSalesReviews.length, 'invoice', 'violet'),
+          metric('已入库管控商品', data.controlledGoods.length, 'archive', 'slate'),
+          metric('已入库供应商商品', data.products.length, 'supplier', 'green'),
+          metric('销售发票历史', data.workbookGenerations.length, 'document', 'violet'),
+          metric('全部审核记录', reviewItems.length, 'records', '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 +1290,42 @@
 
   }
 
-  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') }, iconImage(icon, label, tone)),
+      h('div', { className: 'tcw-metric-body' },
+        h('span', null, label),
+        h('strong', null, valueText)
+      )
+    )
+  }
+
+  function iconImage(name, label, tone) {
+    return h('img', { src: iconDataUri(name, tone), alt: label || '', 'aria-hidden': label ? undefined : true })
+  }
+
+  function iconDataUri(name, tone) {
+    const colors = {
+      blue: '#2563eb',
+      green: '#139160',
+      orange: '#e07818',
+      violet: '#7c3aed',
+      slate: '#526174'
+    }
+    const color = colors[tone] || colors.blue
+    const paths = {
+      dashboard: '<rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/>',
+      shield: '<path d="M12 3l7 3v5c0 4.8-2.9 8.2-7 10-4.1-1.8-7-5.2-7-10V6l7-3z"/><path d="M9 12l2 2 4-5"/>',
+      box: '<path d="M4 8l8-4 8 4-8 4-8-4z"/><path d="M4 8v8l8 4 8-4V8"/><path d="M12 12v8"/>',
+      invoice: '<path d="M7 3h8l4 4v14l-3-1.5L13 21l-3-1.5L7 21V3z"/><path d="M15 3v5h4"/><path d="M9 11h6"/><path d="M9 15h6"/>',
+      search: '<circle cx="11" cy="11" r="6"/><path d="M16 16l4 4"/>',
+      archive: '<path d="M4 7h16v13H4V7z"/><path d="M3 4h18v3H3z"/><path d="M9 11h6"/>',
+      supplier: '<path d="M4 20V8l8-4 8 4v12"/><path d="M8 20v-7h8v7"/><path d="M10 9h4"/>',
+      document: '<path d="M7 3h7l5 5v13H7V3z"/><path d="M14 3v6h5"/><path d="M9 13h6"/><path d="M9 17h6"/>',
+      records: '<path d="M6 5h12v16H6V5z"/><path d="M9 3h6v4H9z"/><path d="M9 11h6"/><path d="M9 15h6"/>'
+    }
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths[name] || paths.dashboard}</svg>`
+    return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg)
   }
 
   function panel(title, content) {
@@ -1794,8 +1836,8 @@
   }
 
     function pageTitle(key) {
-      if (key === 'overview-page') return '待处理'
-      if (key === 'controlled-goods-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 '工具'
       return '销售发票'
@@ -1810,15 +1852,15 @@
     }
 
     function pageBreadcrumb(key) {
-      if (key === 'overview-page') return 'Workspace / 待处理'
-      if (key === 'controlled-goods-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 / 销售发票'
       return 'Workspace / 工具'
     }
 
     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 +1920,38 @@ 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 img {
+  width: 22px;
+  height: 22px;
+  color: currentColor;
+}
+.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 +2115,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;
@@ -2063,48 +2162,16 @@ body { background: var(--tcw-bg); letter-spacing: 0; }
   font-size: 11px;
   font-weight: 900;
 }
+.tcw-nav-icon img {
+  width: 16px;
+  height: 16px;
+  color: currentColor;
+}
 .tcw-nav-icon.blue { background: #e8f0ff; color: var(--tcw-primary); }
 .tcw-nav-icon.green { background: #e7f8ef; color: var(--tcw-success); }
 .tcw-nav-icon.orange { background: #fff2df; color: var(--tcw-warning); }
 .tcw-nav-icon.violet { background: #f1eaff; color: var(--tcw-violet); }
 .tcw-nav-icon.slate { background: #eef2f6; color: var(--tcw-slate); }
-.tcw-sidebar-section {
-  display: grid;
-  gap: 8px;
-  border-top: 1px solid var(--tcw-border);
-  padding: 14px 6px 0;
-}
-.tcw-sidebar-section h2 {
-  margin: 0;
-  color: var(--tcw-muted);
-  font-size: 12px;
-}
-.tcw-sidebar-section.compact p {
-  margin: 0;
-  color: var(--tcw-muted);
-  font-size: 12px;
-  line-height: 1.6;
-}
-.tcw-flow-list {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  color: var(--tcw-text);
-  font-size: 12px;
-}
-.tcw-flow-list li {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.tcw-flow-list span {
-  width: 7px;
-  height: 7px;
-  border-radius: 999px;
-  background: var(--tcw-primary);
-}
 .tcw-workspace {
   display: grid;
   grid-template-rows: auto 1fr;

package/package.json

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