@chenchaolong/plugin-trade-compliance-workbench 0.1.6 → 0.1.7

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

@@ -311,12 +311,13 @@
     }
 
     function renderProductsPage() {
-      const groups = groupBy(filteredProducts, (item) => value(item.supplierName, '未识别供应商'))
       return h('div', { className: 'tcw-page products-page' },
-        pageToolbar('供应商商品', '供应商合同识别结果先进入待审核，确认后按供应商归类入库。', [
+        businessPanel('供应商商品', '上传供应商合同后，识别结果在列表内完成审核、驳回和入库。', [
           uploadButton('upload_supplier_contract', '上传供应商合同')
-        ]),
-        renderListPanel('供应商商品列表', 'pending-supplier-products', supplierReviews, ['供应商', '商品', '型号', '海关编码', '退税率', '英文品名', '管控状态'], (item) => {
+        ], [
+          renderListToolbar('供应商商品列表', supplierReviews.length),
+          h('div', { className: 'pending-supplier-products tcw-table-section' },
+            reviewTable(['供应商', '商品', '型号', '海关编码', '退税率', '英文品名', '管控状态'], supplierReviews, (item) => {
             const row = readMerged(item)
             return [
               value(row.supplierName),
@@ -327,17 +328,21 @@
               value(row.englishName),
               status(controlStatusText(row.controlledStatus), controlStatusLevel(row.controlledStatus))
             ]
-          }, '暂无供应商商品识别结果。上传供应商合同并等待智能体识别后会显示在这里。')
+            }, '暂无供应商商品识别结果。上传供应商合同并等待智能体识别后会显示在这里。')
+          )
+        ])
       )
     }
 
     function renderWorkbooksPage() {
       return h('div', { className: 'tcw-page workbooks-page' },
-        pageToolbar('销售发票', '上传购销合同后审核发票字段，审核通过后生成固定模板 Excel。', [
+        businessPanel('销售发票', '上传购销合同后，先审核发票字段，再生成固定模板 Excel。', [
           uploadButton('upload_sales_contract', '上传购销合同'),
           h('button', { className: 'tcw-btn tcw-btn-primary', disabled: busy, onClick: generateWorkbook }, '生成销售发票')
-        ]),
-        renderListPanel('购销合同识别列表', 'pending-sales-contracts', salesReviews, ['文件/标题', '发票号', '合同号', '买方', '卖方'], (item) => {
+        ], [
+          renderListToolbar('购销合同识别列表', salesReviews.length),
+          h('div', { className: 'pending-sales-contracts tcw-table-section' },
+            reviewTable(['文件/标题', '发票号', '合同号', '买方', '卖方'], salesReviews, (item) => {
             const row = readMerged(item)
             return [
               value(item.title),
@@ -346,14 +351,21 @@
               value(row.buyerName),
               value(row.sellerName)
             ]
-          }, '暂无购销合同识别结果。'),
-        panel('已生成销售发票', table(['文件名', '发票号', '合同号', '模板工作表', '状态'], filteredWorkbooks, (item) => [
-          value(item.fileName),
-          value(item.invoiceNo),
-          value(item.contractNo),
-          Array.isArray(item.sheetNames) ? item.sheetNames.join('、') : '-',
-          status(value(item.status, 'generated'), 'ok')
-        ], '暂无销售发票生成历史。'))
+            }, '暂无购销合同识别结果。')
+          ),
+          h('section', { className: 'tcw-history-section' },
+            h('div', { className: 'tcw-subsection-head' },
+              h('div', null, h('h3', null, '已生成销售发票'), h('p', null, `${filteredWorkbooks.length} 条生成历史`))
+            ),
+            table(['文件名', '发票号', '合同号', '模板工作表', '状态'], filteredWorkbooks, (item) => [
+              value(item.fileName),
+              value(item.invoiceNo),
+              value(item.contractNo),
+              Array.isArray(item.sheetNames) ? item.sheetNames.join('、') : '-',
+              status(value(item.status, 'generated'), 'ok')
+            ], '暂无销售发票生成历史。')
+          )
+        ])
       )
     }
 
@@ -380,7 +392,28 @@
 
     function renderListPanel(title, className, rows, headers, mapRow, emptyText) {
       return panel(title, h('div', { className },
-        h('div', { className: 'tcw-list-toolbar' },
+        renderListToolbar(null, rows.length),
+        reviewTable(headers, rows, mapRow, emptyText)
+      ))
+    }
+
+    function businessPanel(title, subtitle, actions, content) {
+      return h('section', { className: 'tcw-business-panel' },
+        h('div', { className: 'tcw-business-head' },
+          h('div', null, h('h2', null, title), h('p', null, subtitle)),
+          h('div', { className: 'tcw-button-row' }, actions)
+        ),
+        h('div', { className: 'tcw-business-body' }, content)
+      )
+    }
+
+    function renderListToolbar(title, total) {
+      return h('div', { className: 'tcw-list-toolbar' },
+        h('div', { className: 'tcw-list-title' },
+          title ? h('h3', null, title) : null,
+          h('span', null, `${total || 0} 条记录`)
+        ),
+        h('div', { className: 'tcw-list-actions' },
           h('label', { className: 'tcw-filter' },
             h('span', null, '状态'),
             h('select', { className: 'status-filter', value: statusFilter, onChange: (event) => { setStatusFilter(event.target.value); setSelectedIds([]) } },
@@ -391,9 +424,8 @@
             )
           ),
           h('button', { className: 'tcw-btn tcw-btn-primary', disabled: busy || selectedIds.length === 0, onClick: batchApproveSelected }, `批量审核${selectedIds.length ? ` (${selectedIds.length})` : ''}`)
-        ),
-        reviewTable(headers, rows, mapRow, emptyText)
-      ))
+        )
+      )
     }
 
     function reviewTable(headers, rows, mapRow, emptyText) {
@@ -680,11 +712,11 @@
 * { box-sizing: border-box; }
 body { margin: 0; background: var(--tcw-bg); color: var(--tcw-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
 button, input { font: inherit; letter-spacing: 0; }
-.tcw-shell { display: grid; gap: 12px; min-height: 100vh; padding: 14px 16px 18px; }
-.tcw-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 520px); gap: 12px; align-items: end; }
+.tcw-shell { display: grid; gap: 10px; min-height: 100vh; padding: 12px 14px 18px; }
+.tcw-header { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(340px, 520px); gap: 12px; align-items: center; border: 1px solid var(--tcw-border); border-radius: 8px; background: var(--tcw-card); padding: 12px 14px; }
 .tcw-title-block { display: grid; gap: 3px; }
 .tcw-kicker { color: var(--tcw-primary); font-size: 12px; font-weight: 900; }
-.tcw-title-block h1 { margin: 0; font-size: 22px; line-height: 1.22; }
+.tcw-title-block h1 { margin: 0; font-size: 20px; line-height: 1.22; }
 .tcw-title-block p, .tcw-page-head p, .tcw-drawer-head p { margin: 0; color: var(--tcw-muted); font-size: 13px; }
 .tcw-header-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
 .tcw-search, .tcw-field input { width: 100%; min-height: 36px; border: 1px solid var(--tcw-border); border-radius: 6px; background: var(--tcw-card); color: var(--tcw-text); padding: 8px 10px; }
@@ -697,18 +729,28 @@ button, input { font: inherit; letter-spacing: 0; }
 .tcw-upload { border-style: dashed; border-color: color-mix(in srgb, var(--tcw-primary) 42%, var(--tcw-border)); color: var(--tcw-primary); font-weight: 800; }
 .tcw-upload input { display: none; }
 .tcw-notice { border: 1px solid color-mix(in srgb, var(--tcw-primary) 24%, var(--tcw-border)); border-radius: 6px; background: color-mix(in srgb, var(--tcw-primary) 7%, var(--tcw-card)); padding: 10px 12px; color: var(--tcw-primary-dark); font-size: 13px; }
-.tcw-tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--tcw-border); }
-.tcw-tab { min-height: 38px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--tcw-muted); padding: 8px 12px; cursor: pointer; font-weight: 900; }
+.tcw-tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--tcw-border); padding: 0 2px; }
+.tcw-tab { min-height: 34px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--tcw-muted); padding: 7px 12px; cursor: pointer; font-weight: 900; }
 .tcw-tab.active { border-color: var(--tcw-primary); color: var(--tcw-primary); }
 .tcw-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
 .tcw-main.with-drawer { grid-template-columns: minmax(0, 1fr) minmax(340px, 410px); }
 .tcw-content, .tcw-drawer, .tcw-panel, .tcw-supplier-block { border: 1px solid var(--tcw-border); border-radius: 8px; background: var(--tcw-card); }
-.tcw-content { min-width: 0; padding: 12px; }
+.tcw-content { min-width: 0; border: 0; background: transparent; padding: 0; }
 .tcw-page { display: grid; gap: 12px; }
 .tcw-page-head, .tcw-drawer-head, .tcw-supplier-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
 .tcw-page-head h2, .tcw-drawer-head h2, .tcw-panel h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.35; }
 .tcw-button-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
 .tcw-panel { display: grid; gap: 10px; padding: 12px; }
+.tcw-business-panel { display: grid; gap: 0; border: 1px solid var(--tcw-border); border-radius: 8px; background: var(--tcw-card); overflow: hidden; }
+.tcw-business-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--tcw-border); background: var(--tcw-card); padding: 14px 16px; }
+.tcw-business-head h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.25; }
+.tcw-business-head p { margin: 0; color: var(--tcw-muted); font-size: 13px; }
+.tcw-business-body { display: grid; gap: 12px; padding: 14px 16px 16px; }
+.tcw-table-section { display: grid; gap: 0; }
+.tcw-history-section { display: grid; gap: 10px; border-top: 1px solid var(--tcw-border); padding-top: 14px; }
+.tcw-subsection-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.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; }
@@ -724,7 +766,9 @@ button, input { font: inherit; letter-spacing: 0; }
 .tcw-table tr:last-child td { border-bottom: 0; }
 .tcw-table tr.clickable { cursor: pointer; }
 .tcw-table tr.clickable:hover td { background: color-mix(in srgb, var(--tcw-primary) 5%, transparent); }
-.tcw-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
+.tcw-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
+.tcw-list-title { display: grid; gap: 2px; min-width: 160px; }
+.tcw-list-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
 .tcw-filter { display: inline-flex; align-items: center; gap: 8px; color: var(--tcw-muted); font-size: 13px; font-weight: 800; }
 .tcw-filter select { min-height: 34px; border: 1px solid var(--tcw-border); border-radius: 6px; background: var(--tcw-card); color: var(--tcw-text); padding: 6px 28px 6px 9px; }
 .tcw-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@@ -732,7 +776,7 @@ button, input { font: inherit; letter-spacing: 0; }
 .tcw-mini-btn.danger { border-color: color-mix(in srgb, var(--tcw-danger) 35%, var(--tcw-border)); background: color-mix(in srgb, var(--tcw-danger) 6%, var(--tcw-card)); color: var(--tcw-danger); }
 .tcw-mini-btn:disabled { cursor: not-allowed; opacity: .5; }
 .row-selection-checkbox { width: 16px; height: 16px; }
-.tcw-empty { display: grid; place-items: center; min-height: 96px; border: 1px dashed var(--tcw-border); border-radius: 8px; background: var(--tcw-soft); color: var(--tcw-muted); padding: 18px; text-align: center; }
+.tcw-empty { display: grid; place-items: center; min-height: 86px; border: 1px dashed var(--tcw-border); border-radius: 8px; background: var(--tcw-soft); color: var(--tcw-muted); padding: 16px; text-align: center; }
 .tcw-supplier-block { display: grid; gap: 10px; padding: 12px; }
 .tcw-supplier-head strong { font-size: 15px; }
 .tcw-supplier-head span { color: var(--tcw-muted); font-size: 12px; }
@@ -758,6 +802,8 @@ button, input { font: inherit; letter-spacing: 0; }
 .tcw-status.muted { background: #eef2f6; color: var(--tcw-muted); }
 @media (max-width: 1040px) {
   .tcw-header, .tcw-main.with-drawer, .tcw-form { grid-template-columns: 1fr; }
+  .tcw-business-head { align-items: stretch; flex-direction: column; }
+  .tcw-button-row, .tcw-list-actions { justify-content: flex-start; }
   .tcw-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .tcw-drawer { position: static; max-height: none; }
 }

package/package.json

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