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

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

@@ -606,41 +606,104 @@
     }
 
     return h('div', { className: 'tcw-shell' },
-      h('header', { className: 'tcw-header tcw-frame' },
-        h('div', { className: 'tcw-title-block' },
-          h('span', { className: 'tcw-kicker' }, '外贸合规工作台'),
-          h('h1', null, pageTitle(activePage)),
-          h('p', null, pageSubtitle(activePage))
+      renderSidebar(),
+      h('section', { className: 'tcw-workspace' },
+        h('header', { className: 'tcw-header' },
+          h('div', { className: 'tcw-title-block' },
+            h('span', { className: 'tcw-kicker' }, pageBreadcrumb(activePage)),
+            h('h1', null, pageTitle(activePage)),
+            h('p', null, pageSubtitle(activePage))
+          ),
+          h('div', { className: 'tcw-header-actions' },
+            h('input', { className: 'tcw-search', value: query, placeholder: '搜索商品、供应商、海关编码、文件名', onChange: (event) => setQuery(event.target.value) }),
+            h('button', { className: 'tcw-btn tcw-btn-soft', disabled: busy, onClick: () => reload() }, busy ? '处理中' : '刷新')
+          )
         ),
-        h('div', { className: 'tcw-header-actions' },
-          h('input', { className: 'tcw-search', value: query, placeholder: '搜索商品、供应商、海关编码、文件名', onChange: (event) => setQuery(event.target.value) }),
-          h('button', { className: 'tcw-btn tcw-btn-soft', disabled: busy, onClick: () => reload() }, busy ? '处理中' : '刷新')
-        )
-      ),
-      h('nav', { className: 'tcw-tabs tcw-frame' }, [
-        tab('overview-page', '工作台总览'),
-        tab('controlled-goods-page', '管控商品'),
-        tab('products-page', '供应商商品'),
-        tab('workbooks-page', '销售发票'),
-        tab('hs-code-search-page', '海关编码查询')
-      ]),
-      h('main', { className: 'tcw-main tcw-frame' },
-        h('section', { className: 'tcw-content' },
-          activePage === 'overview-page' ? renderOverviewPage() : null,
-          activePage === 'controlled-goods-page' ? renderControlledGoodsPage() : null,
-          activePage === 'products-page' ? renderProductsPage() : null,
-          activePage === 'workbooks-page' ? renderWorkbooksPage() : null,
-          activePage === 'hs-code-search-page' ? renderHsCodeSearchPage() : null
+        h('main', { className: 'tcw-main' },
+          h('section', { className: 'tcw-content' },
+            activePage === 'overview-page' ? renderOverviewPage() : null,
+            activePage === 'controlled-goods-page' ? renderControlledGoodsPage() : null,
+            activePage === 'products-page' ? renderProductsPage() : null,
+            activePage === 'workbooks-page' ? renderWorkbooksPage() : null,
+            activePage === 'hs-code-search-page' ? renderHsCodeSearchPage() : null
+          )
         )
       ),
+      renderAssistantPanel(),
       detailItem ? renderDetailModal() : null,
       formDialog ? renderFormModal() : null,
       deleteDialog ? renderDeleteConfirmModal() : null,
       hsCodeDetailDialog ? renderHsCodeDetailModal() : null
     )
 
-    function tab(key, label) {
-      return h('button', { key, className: key === activePage ? 'tcw-tab active' : 'tcw-tab', onClick: () => setActivePage(key) }, label)
+    function renderSidebar() {
+      return h('aside', { className: 'tcw-sidebar' },
+        h('div', { className: 'tcw-brand' },
+          h('div', { className: 'tcw-brand-mark' }, 'TC'),
+          h('div', null,
+            h('strong', null, '外贸合规工作台'),
+            h('span', null, 'Trade Compliance')
+          )
+        ),
+        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, '管控规则用于匹配供应商商品，已确认商品进入销售发票生成流程。')
+        )
+      )
+    }
+
+    function renderAssistantPanel() {
+      return h('aside', { className: 'tcw-assistant' },
+        h('div', { className: 'tcw-assistant-head' },
+          h('span', { className: 'tcw-assistant-mark' }, 'AI'),
+          h('div', null,
+            h('strong', null, '外贸合规助手'),
+            h('p', null, '按流程处理识别结果，减少来回切换。')
+          )
+        ),
+        h('section', { className: 'tcw-assistant-card' },
+          h('h3', null, '当前建议'),
+          h('p', null, assistantTip(activePage))
+        ),
+        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('products-page') }, '商品审核'),
+            h('button', { className: 'tcw-mini-btn', onClick: () => setActivePage('hs-code-search-page') }, '查 HS 编码')
+          ])
+        ),
+        h('section', { className: 'tcw-assistant-card' },
+          h('h3', null, '处理顺序'),
+          h('p', null, '先把管控规则和供应商商品确认入库，再审核购销合同并生成销售发票。')
+        )
+      )
+    }
+
+    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', null, label),
+        count == null ? null : h('em', null, count)
+      )
     }
 
     function renderOverviewPage() {
@@ -671,7 +734,7 @@
           renderListToolbar('管控商品列表', controlledReviews.length),
           h('div', { className: 'pending-controlled-goods confirmed-controlled-goods tcw-table-section' },
             reviewTable(['商品名称', '海关编码', '关键词', '管控说明', '来源'], page.rows, (item) => {
-            const row = readSupplierEditableMerged(item)
+            const row = readMerged(item)
             return [
               value(row.productName || item.title),
               value(row.hsCode),
@@ -1731,21 +1794,37 @@
   }
 
     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 '海关编码查询'
+      if (key === 'hs-code-search-page') return '工具'
       return '销售发票'
     }
 
   function pageSubtitle(key) {
-    if (key === 'overview-page') return '查看处理进度、待审核数量和最近识别结果。'
+    if (key === 'overview-page') return '按业务顺序聚合待审核事项，先确认基础资料，再生成销售发票。'
       if (key === 'controlled-goods-page') return '上传管控目录、审核识别结果、维护正式管控商品库。'
       if (key === 'products-page') return '上传供应商合同，审核商品、HS Code、退税率和管控状态。'
       if (key === 'hs-code-search-page') return '输入商品名称或海关编码，查询 HS 编码网结果。'
       return '上传购销合同，审核发票字段并生成固定模板 Excel。'
     }
 
+    function pageBreadcrumb(key) {
+      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 === 'controlled-goods-page') return '维护管控商品时，建议先核对 HS 编码和关键词，再保存入库。'
+      if (key === 'products-page') return '供应商商品可先选用候选 HS 编码，再检查英文品名和管控状态。'
+      if (key === 'workbooks-page') return '购销合同审核完毕后，再生成销售发票，避免后面重改。'
+      return '海关编码查询页用于人工确认候选结果，必要时可回到商品页继续处理。'
+    }
+
   function isObject(value) {
     return value && typeof value === 'object' && !Array.isArray(value)
   }
@@ -1888,6 +1967,317 @@ button, input, textarea, select { font: inherit; letter-spacing: 0; }
   .tcw-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .tcw-drawer { position: static; max-height: none; }
 }
+
+/* V2 process-oriented shell */
+:root {
+  --tcw-bg:#f4f7fb;
+  --tcw-card:#ffffff;
+  --tcw-soft:#f8fafc;
+  --tcw-text:#172033;
+  --tcw-muted:#65758c;
+  --tcw-border:#dbe5f0;
+  --tcw-primary:#2563eb;
+  --tcw-primary-dark:#1d4ed8;
+  --tcw-success:#139160;
+  --tcw-warning:#e07818;
+  --tcw-danger:#bd2f2f;
+  --tcw-violet:#7c3aed;
+  --tcw-slate:#526174;
+  --tcw-shadow:0 14px 42px rgba(20, 35, 55, .08);
+}
+body { background: var(--tcw-bg); letter-spacing: 0; }
+.tcw-shell {
+  display: grid;
+  grid-template-columns: 248px minmax(0, 1fr) 300px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  min-height: 100vh;
+  padding: 0;
+  background: var(--tcw-bg);
+}
+.tcw-sidebar {
+  display: grid;
+  grid-template-rows: auto auto auto 1fr;
+  align-content: start;
+  gap: 18px;
+  min-width: 0;
+  border-right: 1px solid var(--tcw-border);
+  background: var(--tcw-card);
+  padding: 20px 14px;
+}
+.tcw-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 6px 6px;
+}
+.tcw-brand-mark {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: #e8f0ff;
+  color: var(--tcw-primary);
+  font-size: 12px;
+  font-weight: 900;
+}
+.tcw-brand strong { display: block; font-size: 16px; line-height: 1.2; }
+.tcw-brand span { display: block; color: var(--tcw-muted); font-size: 12px; }
+.tcw-nav { display: grid; gap: 6px; }
+.tcw-tab {
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--tcw-text);
+  padding: 7px 8px;
+  text-align: left;
+  font-weight: 800;
+}
+.tcw-tab.active {
+  border-color: #d8e7ff;
+  background: #eff6ff;
+  color: #174ea6;
+}
+.tcw-tab em {
+  min-width: 22px;
+  border-radius: 999px;
+  background: #edf2f7;
+  color: var(--tcw-muted);
+  padding: 2px 6px;
+  font-size: 11px;
+  font-style: normal;
+  text-align: center;
+}
+.tcw-nav-icon {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+  font-size: 11px;
+  font-weight: 900;
+}
+.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;
+  min-width: 0;
+  padding: 18px;
+}
+.tcw-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  min-height: 64px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0 0 14px;
+}
+.tcw-kicker {
+  margin: 0 0 3px;
+  color: var(--tcw-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+.tcw-title-block h1 {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.2;
+}
+.tcw-title-block p {
+  margin: 4px 0 0;
+  color: var(--tcw-muted);
+  font-size: 13px;
+}
+.tcw-header-actions {
+  display: grid;
+  grid-template-columns: minmax(260px, 380px) auto;
+  gap: 8px;
+  align-items: center;
+}
+.tcw-main { display: grid; min-width: 0; }
+.tcw-content { min-width: 0; border: 0; background: transparent; padding: 0; }
+.tcw-business-panel, .tcw-panel {
+  border: 1px solid var(--tcw-border);
+  border-radius: 8px;
+  background: var(--tcw-card);
+  box-shadow: var(--tcw-shadow);
+}
+.tcw-business-head {
+  min-height: auto;
+  align-items: center;
+  border-bottom: 1px solid var(--tcw-border);
+  background: linear-gradient(90deg, #ffffff, #f7fbff);
+  padding: 20px 22px;
+}
+.tcw-business-head h2 { font-size: 18px; }
+.tcw-business-body { padding: 18px 22px 22px; }
+.tcw-metrics {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+.tcw-metric {
+  border-color: var(--tcw-border);
+  background: var(--tcw-card);
+  box-shadow: var(--tcw-shadow);
+}
+.tcw-metric strong { color: var(--tcw-text); font-size: 24px; }
+.tcw-btn, .tcw-upload, .tcw-mini-btn, .tcw-icon-btn {
+  border-radius: 7px;
+}
+.tcw-btn-primary {
+  border-color: var(--tcw-primary);
+  background: var(--tcw-primary);
+}
+.tcw-btn-primary:hover:not(:disabled) { background: var(--tcw-primary-dark); }
+.tcw-upload {
+  border-color: #bcd3ff;
+  background: #eff6ff;
+  color: var(--tcw-primary);
+}
+.tcw-table-wrap {
+  border-color: var(--tcw-border);
+  border-radius: 8px;
+}
+.tcw-table th {
+  background: var(--tcw-soft);
+  color: var(--tcw-muted);
+  font-size: 11px;
+}
+.tcw-table td { background: var(--tcw-card); }
+.tcw-table tr:hover td { background: #fbfdff; }
+.tcw-assistant {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  border-left: 1px solid var(--tcw-border);
+  background: var(--tcw-card);
+  padding: 18px 14px;
+}
+.tcw-assistant-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 2px 4px 8px;
+}
+.tcw-assistant-mark {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: #e7f8ef;
+  color: var(--tcw-success);
+  font-size: 12px;
+  font-weight: 900;
+}
+.tcw-assistant-head strong { display: block; font-size: 15px; }
+.tcw-assistant-head p {
+  margin: 3px 0 0;
+  color: var(--tcw-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+.tcw-assistant-card {
+  display: grid;
+  gap: 8px;
+  border: 1px solid var(--tcw-border);
+  border-radius: 8px;
+  background: var(--tcw-soft);
+  padding: 12px;
+}
+.tcw-assistant-card h3 {
+  margin: 0;
+  font-size: 13px;
+}
+.tcw-assistant-card p {
+  margin: 0;
+  color: var(--tcw-muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+.tcw-assistant-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.tcw-status.ok { background: #e7f8ef; color: var(--tcw-success); }
+.tcw-status.warn { background: #fff2df; color: #b35b00; }
+.tcw-status.danger { background: #fde8e6; color: var(--tcw-danger); }
+.tcw-status.muted { background: #eef2f6; color: var(--tcw-muted); }
+@media (max-width: 1280px) {
+  .tcw-shell { grid-template-columns: 230px minmax(0, 1fr); }
+  .tcw-assistant { display: none; }
+}
+@media (max-width: 900px) {
+  .tcw-shell { grid-template-columns: 1fr; }
+  .tcw-sidebar {
+    position: static;
+    border-right: 0;
+    border-bottom: 1px solid var(--tcw-border);
+  }
+  .tcw-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .tcw-workspace { padding: 14px; }
+  .tcw-header, .tcw-business-head, .tcw-list-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .tcw-header-actions { grid-template-columns: 1fr; }
+  .tcw-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 560px) {
+  .tcw-nav { grid-template-columns: 1fr; }
+  .tcw-metrics, .tcw-edit-grid, .tcw-edit-grid-two { grid-template-columns: 1fr; }
+}
 `
     document.head.appendChild(style)
   }

package/package.json

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