@chenchaolong/plugin-trade-compliance-workbench 0.1.47 → 0.1.49

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

@@ -74,6 +74,8 @@
     const [busy, setBusy] = React.useState(false)
     const [query, setQuery] = React.useState('')
     const [pageByList, setPageByList] = React.useState({})
+    const [pageSizeByList, setPageSizeByList] = React.useState({})
+    const [pageJumpByList, setPageJumpByList] = React.useState({})
     const [detailItem, setDetailItem] = React.useState(null)
     const [formDialog, setFormDialog] = React.useState(null)
     const [deleteDialog, setDeleteDialog] = React.useState(null)
@@ -84,6 +86,7 @@
       loading: false,
       searched: false,
       error: '',
+      jumpPage: '',
       result: null
     })
     const pollingRef = React.useRef(null)
@@ -104,10 +107,11 @@
       }
     }, [])
 
-    React.useEffect(reportResize, [data, activePage, selectedIds, statusFilter, overviewTab, busy, formDialog, deleteDialog, hsCodeSearch, hsCodeDetailDialog])
+    React.useEffect(reportResize, [data, activePage, selectedIds, statusFilter, overviewTab, pageByList, pageSizeByList, busy, formDialog, deleteDialog, hsCodeSearch, hsCodeDetailDialog])
 
     const reviewItems = data.reviewItems.filter((item) => !isPlaceholderReviewItem(item))
     const pendingItems = reviewItems.filter((item) => (item.reviewStatus || 'pending') === 'pending')
+    const filteredPendingItems = filterItems(pendingItems, query, overviewSearchKeys)
     const controlledReviewRows = reviewItems.filter((item) => item.type === 'controlled_goods' && item.reviewStatus !== 'confirmed')
     const controlledRows = controlledReviewRows.concat(data.controlledGoods.map(toControlledGoodsReviewRow))
     const controlledReviews = applyStatusFilter(filterItems(controlledRows, query, reviewSearchKeys), statusFilter)
@@ -194,15 +198,17 @@
       }
     }
 
-    async function searchSupplierHsCandidatesForForm() {
+    async function searchSupplierHsCandidatesForForm(page) {
       if (!formDialog || formDialog.type !== 'supplier_product' || busy) return
       const keyword = String(formDialog.hsCandidateKeyword || buildSupplierHsCandidateKeyword(formDialog.values) || '').trim()
       if (!keyword) {
         setFormDialog(Object.assign({}, formDialog, { hsCandidateError: '请输入商品名称、型号或海关编码后再查询。' }))
         return
       }
+      const nextPage = Math.max(1, Number(page) || 1)
       setFormDialog(Object.assign({}, formDialog, {
         hsCandidateKeyword: keyword,
+        hsCandidatePage: nextPage,
         hsCandidateLoading: true,
         hsCandidateError: '',
         hsCandidateStatus: ''
@@ -210,20 +216,22 @@
       try {
         const response = await executeAction('search_hs_code', null, {
           keywords: keyword,
-          page: 1,
+          page: nextPage,
           filterFailureCode: true,
           displayChapter: false,
           displayEnName: true
         }, {})
         assertActionSuccess(response)
         const result = getActionDataPayload(response)
-        const candidates = Array.isArray(result && result.results) ? result.results.slice(0, 10) : []
+        const candidates = Array.isArray(result && result.results) ? result.results : []
         setFormDialog((current) => current ? Object.assign({}, current, {
           hsCandidateKeyword: keyword,
+          hsCandidatePage: nextPage,
           hsCandidateLoading: false,
           hsCandidateError: '',
           hsCandidateStatus: candidates.length ? 'pending_confirmation' : 'not_found',
-          hsCandidates: candidates
+          hsCandidates: candidates,
+          hsCandidatePagination: result && result.pagination ? result.pagination : null
         }) : current)
       } catch (error) {
         setFormDialog((current) => current ? Object.assign({}, current, {
@@ -466,6 +474,9 @@
         values: valuesFromItem(item.type, item),
         hsCandidates: Array.isArray(merged.hsCodeCandidates) ? merged.hsCodeCandidates : [],
         hsCandidateKeyword: merged.hsCodeLookupKeyword || buildSupplierHsCandidateKeyword(merged),
+        hsCandidatePage: 1,
+        hsCandidateJumpPage: '',
+        hsCandidatePagination: null,
         hsCandidateStatus: merged.hsCodeLookupStatus || '',
         hsCandidateError: merged.hsCodeLookupError || '',
         hsCandidateLoading: false
@@ -480,6 +491,9 @@
         values: emptyFormValues(type),
         hsCandidates: [],
         hsCandidateKeyword: '',
+        hsCandidatePage: 1,
+        hsCandidateJumpPage: '',
+        hsCandidatePagination: null,
         hsCandidateStatus: '',
         hsCandidateError: '',
         hsCandidateLoading: false
@@ -664,15 +678,20 @@
     }
 
     function renderOverviewPage() {
-      const pendingOverviewItems = overviewTab === 'all'
-        ? pendingItems.slice(0, 12)
-        : pendingItems.filter((item) => item.type === overviewTab).slice(0, 12)
+      const filteredPendingControlledItems = filteredPendingItems.filter((item) => item.type === 'controlled_goods')
+      const filteredPendingSupplierItems = filteredPendingItems.filter((item) => item.type === 'supplier_product')
+      const filteredPendingSalesItems = filteredPendingItems.filter((item) => item.type === 'customs_workbook')
+      const overviewRows = overviewTab === 'all'
+        ? filteredPendingItems
+        : filteredPendingItems.filter((item) => item.type === overviewTab)
+      const overviewListKey = `overview-${overviewTab}`
+      const overviewPage = paginateRows(overviewListKey, overviewRows)
       return h('div', { className: 'tcw-page overview-page' },
         h('section', { className: 'tcw-metrics' },
-          metric('待审核', pendingItems.length, 'dashboard', 'blue'),
-          metric('管控识别待审', pendingControlledReviews.length, 'shield', 'green'),
-          metric('供应商商品待审', pendingSupplierReviews.length, 'box', 'orange'),
-          metric('销售合同待审', pendingSalesReviews.length, 'invoice', 'violet'),
+          metric('待审核', filteredPendingItems.length, 'dashboard', 'blue'),
+          metric('管控识别待审', filteredPendingControlledItems.length, 'shield', 'green'),
+          metric('供应商商品待审', filteredPendingSupplierItems.length, 'box', 'orange'),
+          metric('销售合同待审', filteredPendingSalesItems.length, 'invoice', 'violet'),
           metric('已入库管控商品', data.controlledGoods.length, 'archive', 'slate'),
           metric('已入库供应商商品', data.products.length, 'supplier', 'green'),
           metric('销售发票历史', data.workbookGenerations.length, 'document', 'violet'),
@@ -681,14 +700,15 @@
         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)
+              overviewTabButton('all', '全部', filteredPendingItems.length),
+              overviewTabButton('controlled_goods', '管控商品', filteredPendingControlledItems.length),
+              overviewTabButton('supplier_product', '供应商商品', filteredPendingSupplierItems.length),
+              overviewTabButton('customs_workbook', '销售发票', filteredPendingSalesItems.length)
             ]),
-            pendingOverviewItems.length
-              ? compactReviewList(pendingOverviewItems)
-              : empty('暂无待审核记录。智能体识别结果会先出现在这里。')
+            overviewPage.rows.length
+              ? compactReviewList(overviewPage.rows)
+              : empty('暂无待审核记录。智能体识别结果会先出现在这里。'),
+            pagination(overviewListKey, overviewRows.length)
           )
         )
       )
@@ -884,20 +904,26 @@
     function renderHsCodePagination(pagination) {
       if (!pagination || (!pagination.hasPrevious && !pagination.hasNext && (!pagination.pages || pagination.pages.length <= 1))) return null
       const pages = Array.isArray(pagination.pages) ? pagination.pages.filter((item) => item.page) : []
-      const visiblePages = pages.filter((item, index, arr) => arr.findIndex((candidate) => candidate.page === item.page) === index).slice(0, 10)
-      return h('div', { className: 'tcw-pagination hs-code-pagination' },
-        h('span', null, `第 ${pagination.currentPage || hsCodeSearch.page} 页`),
-        h('div', { className: 'tcw-page-buttons' },
-          h('button', { className: 'tcw-mini-btn', disabled: hsCodeSearch.loading || !pagination.hasPrevious, onClick: () => searchHsCodePage((pagination.currentPage || hsCodeSearch.page) - 1) }, '上一页'),
-          visiblePages.map((item) => h('button', {
-            key: item.page,
-            className: item.current ? 'tcw-mini-btn active' : 'tcw-mini-btn',
-            disabled: hsCodeSearch.loading || item.current,
-            onClick: () => searchHsCodePage(item.page)
-          }, String(item.page))),
-          h('button', { className: 'tcw-mini-btn', disabled: hsCodeSearch.loading || !pagination.hasNext, onClick: () => searchHsCodePage((pagination.currentPage || hsCodeSearch.page) + 1) }, '下一页')
-        )
-      )
+      const maxPage = Number(pagination.maxVisiblePage) || Math.max(...pages.map((item) => Number(item.page) || 0), pagination.currentPage || hsCodeSearch.page || 1)
+      const currentPage = pagination.currentPage || hsCodeSearch.page || 1
+      return renderUnifiedPagination({
+        page: currentPage,
+        totalPages: Math.max(1, maxPage),
+        pageSize: 10,
+        fixedPageSize: true,
+        loading: hsCodeSearch.loading,
+        hasPrevious: pagination.hasPrevious,
+        hasNext: pagination.hasNext,
+        jumpValue: hsCodeSearch.jumpPage || '',
+        onPageChange: searchHsCodePage,
+        onJumpInput: (nextValue) => setHsCodeSearch(Object.assign({}, hsCodeSearch, { jumpPage: nextValue })),
+        onJump: () => {
+          const nextPage = Number(hsCodeSearch.jumpPage)
+          if (!Number.isFinite(nextPage) || nextPage <= 0) return
+          searchHsCodePage(nextPage)
+          setHsCodeSearch((current) => Object.assign({}, current, { jumpPage: '' }))
+        }
+      })
     }
 
     function compactReviewList(items) {
@@ -1042,7 +1068,7 @@
     }
 
     function paginateRows(listKey, rows) {
-      const pageSize = 10
+      const pageSize = getPageSize(listKey)
       const total = rows.length
       const totalPages = Math.max(1, Math.ceil(total / pageSize))
       const current = Math.min(Math.max(pageByList[listKey] || 1, 1), totalPages)
@@ -1050,15 +1076,44 @@
     }
 
     function pagination(listKey, total) {
-      if (total <= 10) return null
+      if (total <= 0) return null
       const page = paginateRows(listKey, Array.from({ length: total }))
-      return h('div', { className: 'tcw-pagination' },
-        h('span', null, `共 ${total} 条，第 ${page.page} / ${page.totalPages} 页`),
-        h('div', { className: 'tcw-page-buttons' },
-          h('button', { className: 'tcw-mini-btn', disabled: page.page <= 1, onClick: () => setPageByList(Object.assign({}, pageByList, { [listKey]: page.page - 1 })) }, '上一页'),
-          h('button', { className: 'tcw-mini-btn', disabled: page.page >= page.totalPages, onClick: () => setPageByList(Object.assign({}, pageByList, { [listKey]: page.page + 1 })) }, '下一页')
-        )
-      )
+      return renderUnifiedPagination({
+        total,
+        page: page.page,
+        totalPages: page.totalPages,
+        pageSize: page.pageSize,
+        pageSizeOptions: [10, 20, 50],
+        jumpValue: pageJumpByList[listKey] || '',
+        onPageChange: (nextPage) => setLocalPage(listKey, nextPage, page.totalPages),
+        onPageSizeChange: (nextSize) => setLocalPageSize(listKey, nextSize),
+        onJumpInput: (nextValue) => setPageJumpByList(Object.assign({}, pageJumpByList, { [listKey]: nextValue })),
+        onJump: () => jumpLocalPage(listKey, page.totalPages)
+      })
+    }
+
+    function getPageSize(listKey) {
+      const value = Number(pageSizeByList[listKey])
+      return Number.isFinite(value) && value > 0 ? value : 10
+    }
+
+    function setLocalPage(listKey, nextPage, totalPages) {
+      const page = Math.min(Math.max(Number(nextPage) || 1, 1), totalPages || 1)
+      setPageByList(Object.assign({}, pageByList, { [listKey]: page }))
+    }
+
+    function setLocalPageSize(listKey, nextSize) {
+      const pageSize = Number(nextSize) || 10
+      setPageSizeByList(Object.assign({}, pageSizeByList, { [listKey]: pageSize }))
+      setPageByList(Object.assign({}, pageByList, { [listKey]: 1 }))
+      setPageJumpByList(Object.assign({}, pageJumpByList, { [listKey]: '' }))
+    }
+
+    function jumpLocalPage(listKey, totalPages) {
+      const value = Number(pageJumpByList[listKey])
+      if (!Number.isFinite(value) || value <= 0) return
+      setLocalPage(listKey, value, totalPages)
+      setPageJumpByList(Object.assign({}, pageJumpByList, { [listKey]: '' }))
     }
 
     function renderDetailModal() {
@@ -1100,7 +1155,7 @@
       const fields = formDialog.type === 'controlled_goods' ? controlledGoodsFormFields : supplierProductFormFields
       const title = `${formDialog.mode === 'create' ? '新增' : '编辑'}${formDialog.type === 'controlled_goods' ? '管控商品' : '供应商商品'}`
       return h('div', { className: 'tcw-modal-backdrop' },
-        h('form', { className: 'tcw-modal tcw-form-modal', onSubmit: saveProductForm },
+        h('form', { className: formDialog.type === 'supplier_product' ? 'tcw-modal tcw-form-modal tcw-form-modal-supplier' : 'tcw-modal tcw-form-modal', onSubmit: saveProductForm },
           h('div', { className: 'tcw-modal-head' },
             h('h2', null, title),
             h('button', { type: 'button', className: 'tcw-icon-btn', onClick: () => setFormDialog(null) }, '×')
@@ -1119,6 +1174,7 @@
 
     function renderSupplierHsCandidatePanel() {
       const candidates = Array.isArray(formDialog.hsCandidates) ? formDialog.hsCandidates : []
+      const pagination = formDialog.hsCandidatePagination || null
       return h('section', { className: 'tcw-hs-candidate-panel' },
         h('div', { className: 'tcw-subsection-head' },
           h('div', null,
@@ -1132,23 +1188,93 @@
               placeholder: '商品名称、型号或海关编码',
               onChange: (event) => setFormDialog(Object.assign({}, formDialog, { hsCandidateKeyword: event.target.value }))
             }),
-            h('button', { type: 'button', className: 'tcw-mini-btn', disabled: busy || formDialog.hsCandidateLoading, onClick: searchSupplierHsCandidatesForForm }, formDialog.hsCandidateLoading ? '查询中' : '查询')
+            h('button', { type: 'button', className: 'tcw-mini-btn', disabled: busy || formDialog.hsCandidateLoading, onClick: () => searchSupplierHsCandidatesForForm(1) }, formDialog.hsCandidateLoading ? '查询中' : '查询')
           )
         ),
         formDialog.hsCandidateError ? h('div', { className: 'tcw-error' }, formDialog.hsCandidateError) : null,
-        candidates.length ? table(['编码', '商品名称', '英文名称', '单位', '退税率', '监管', '检验检疫', '操作'], candidates, (candidate) => [
-          h('strong', { className: 'tcw-hs-code-text' }, value(candidate.code)),
-          value(candidate.name),
-          value(candidate.englishName),
-          value(candidate.unit),
-          value(candidate.taxRefundRate),
-          value(candidate.regulatoryConditions),
-          value(candidate.inspectionQuarantine),
-          h('div', { className: 'tcw-row-actions' },
-            h('button', { type: 'button', className: 'tcw-mini-btn', onClick: () => selectHsCandidate(candidate) }, '选用'),
-            h('button', { type: 'button', className: 'tcw-mini-btn', disabled: !candidate.code && !candidate.detailUrl, onClick: () => loadHsCodeDetail(candidate) }, '详情')
-          )
-        ], '暂无候选编码。') : empty('暂无候选编码，可调整关键词后查询。')
+        candidates.length ? h('div', { className: 'tcw-hs-candidate-result' },
+          table(['编码', '商品名称', '英文名称', '单位', '退税率', '监管', '检验检疫', '操作'], candidates, (candidate) => [
+            h('strong', { className: 'tcw-hs-code-text' }, value(candidate.code)),
+            value(candidate.name),
+            value(candidate.englishName),
+            value(candidate.unit),
+            value(candidate.taxRefundRate),
+            value(candidate.regulatoryConditions),
+            value(candidate.inspectionQuarantine),
+            h('div', { className: 'tcw-row-actions' },
+              h('button', { type: 'button', className: 'tcw-mini-btn', onClick: () => selectHsCandidate(candidate) }, '选用'),
+              h('button', { type: 'button', className: 'tcw-mini-btn', disabled: !candidate.code && !candidate.detailUrl, onClick: () => loadHsCodeDetail(candidate) }, '详情')
+            )
+          ], '暂无候选编码。'),
+          renderSupplierHsCandidatePagination(pagination)
+        ) : empty('暂无候选编码，可调整关键词后查询。')
+      )
+    }
+
+    function renderSupplierHsCandidatePagination(pagination) {
+      if (!pagination || (!pagination.hasPrevious && !pagination.hasNext && (!pagination.pages || pagination.pages.length <= 1))) return null
+      const pages = Array.isArray(pagination.pages) ? pagination.pages.filter((item) => item.page) : []
+      const currentPage = pagination.currentPage || formDialog.hsCandidatePage || 1
+      const maxPage = Number(pagination.maxVisiblePage) || Math.max(...pages.map((item) => Number(item.page) || 0), currentPage)
+      return renderUnifiedPagination({
+        page: currentPage,
+        totalPages: Math.max(1, maxPage),
+        pageSize: 10,
+        fixedPageSize: true,
+        loading: formDialog.hsCandidateLoading,
+        hasPrevious: pagination.hasPrevious,
+        hasNext: pagination.hasNext,
+        jumpValue: formDialog.hsCandidateJumpPage || '',
+        onPageChange: searchSupplierHsCandidatesForForm,
+        onJumpInput: (nextValue) => setFormDialog(Object.assign({}, formDialog, { hsCandidateJumpPage: nextValue })),
+        onJump: () => {
+          const nextPage = Number(formDialog.hsCandidateJumpPage)
+          if (!Number.isFinite(nextPage) || nextPage <= 0) return
+          searchSupplierHsCandidatesForForm(nextPage)
+          setFormDialog((current) => current ? Object.assign({}, current, { hsCandidateJumpPage: '' }) : current)
+        }
+      })
+    }
+
+    function renderUnifiedPagination(config) {
+      const totalPages = Math.max(1, Number(config.totalPages) || 1)
+      const page = Math.min(Math.max(Number(config.page) || 1, 1), totalPages)
+      const canPrevious = config.hasPrevious === undefined ? page > 1 : Boolean(config.hasPrevious)
+      const canNext = config.hasNext === undefined ? page < totalPages : Boolean(config.hasNext)
+      const loading = Boolean(config.loading)
+      const jumpValue = config.jumpValue || ''
+      const pageSize = Number(config.pageSize) || 10
+      return h('div', { className: 'tcw-pagination tcw-pagination-unified' },
+        config.total == null ? null : h('span', { className: 'tcw-pagination-total' }, `共 ${config.total} 条`),
+        h('button', { className: 'tcw-page-btn', disabled: loading || !canPrevious, onClick: () => config.onPageChange(1) }, '首页'),
+        h('button', { className: 'tcw-page-btn', disabled: loading || !canPrevious, onClick: () => config.onPageChange(page - 1) }, '上一页'),
+        h('span', { className: 'tcw-page-current' }, `第 ${page} / ${totalPages} 页`),
+        h('button', { className: 'tcw-page-btn', disabled: loading || !canNext, onClick: () => config.onPageChange(page + 1) }, '下一页'),
+        h('button', { className: 'tcw-page-btn', disabled: loading || !canNext, onClick: () => config.onPageChange(totalPages) }, '末页'),
+        h('span', { className: 'tcw-page-size-label' }, '每页'),
+        config.fixedPageSize
+          ? h('span', { className: 'tcw-page-size-fixed' }, `${pageSize} 条/页`)
+          : h('select', {
+            className: 'tcw-page-size-select',
+            value: pageSize,
+            onChange: (event) => config.onPageSizeChange(Number(event.target.value))
+          }, (config.pageSizeOptions || [10, 20, 50]).map((size) => h('option', { key: size, value: size }, `${size} 条/页`))),
+        h('input', {
+          className: 'tcw-page-jump-input',
+          type: 'number',
+          min: 1,
+          max: totalPages,
+          value: jumpValue,
+          placeholder: String(page),
+          onChange: (event) => config.onJumpInput(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault()
+              config.onJump()
+            }
+          }
+        }),
+        h('button', { className: 'tcw-page-btn', disabled: loading, onClick: config.onJump }, '跳转')
       )
     }
 
@@ -1340,6 +1466,27 @@
   }
 
   const reviewSearchKeys = ['title', 'sourceLocation']
+  const overviewSearchKeys = [
+    'title',
+    'sourceLocation',
+    'sourceFileName',
+    'fileName',
+    'supplierName',
+    'supplierCreditCode',
+    'productName',
+    'model',
+    'description',
+    'hsCode',
+    'contractHsCode',
+    'enrichedHsCode',
+    'englishName',
+    'invoiceNo',
+    'contractNo',
+    'buyerName',
+    'sellerName',
+    'controlNote',
+    'keywords'
+  ]
   const controlledGoodsFormFields = [
     { key: 'productName', label: '商品名称', placeholder: '例如：高性能服务器' },
     { key: 'hsCode', label: '海关编码', placeholder: '例如：8471501010' },
@@ -1945,11 +2092,83 @@ button, input, textarea, select { font: inherit; letter-spacing: 0; }
 		.tcw-error { border: 1px solid color-mix(in srgb, var(--tcw-danger) 35%, var(--tcw-border)); border-radius: 8px; background: color-mix(in srgb, var(--tcw-danger) 6%, var(--tcw-card)); color: var(--tcw-danger); padding: 10px 12px; font-size: 13px; font-weight: 800; }
 	.row-selection-checkbox { width: 16px; height: 16px; }
 .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-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--tcw-border); border-top: 0; border-radius: 0 0 8px 8px; background: var(--tcw-card); padding: 10px 12px; color: var(--tcw-muted); font-size: 12px; }
+.tcw-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--tcw-border);
+  border-radius: 8px;
+  background: var(--tcw-card);
+  padding: 8px 10px;
+  color: var(--tcw-muted);
+  font-size: 12px;
+}
+.tcw-pagination-unified { justify-content: flex-start; }
 .tcw-page-buttons { display: flex; gap: 8px; }
+.tcw-pagination-total {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  color: var(--tcw-primary);
+}
+.tcw-page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  min-height: 28px;
+  border: 1px solid var(--tcw-border);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--tcw-primary);
+  padding: 4px 9px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+}
+.tcw-page-btn:disabled {
+  cursor: not-allowed;
+  background: var(--tcw-soft);
+  color: #9aa7b8;
+}
+.tcw-page-current {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  border-radius: 6px;
+  background: var(--tcw-primary);
+  color: #fff;
+  padding: 4px 12px;
+  font-weight: 800;
+}
+.tcw-page-size-label {
+  color: var(--tcw-primary);
+  font-weight: 800;
+}
+.tcw-page-size-select,
+.tcw-page-jump-input,
+.tcw-page-size-fixed {
+  min-height: 28px;
+  border: 1px solid var(--tcw-border);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--tcw-text);
+  padding: 4px 8px;
+  font-size: 12px;
+}
+.tcw-page-size-select { min-width: 92px; }
+.tcw-page-size-fixed { display: inline-flex; align-items: center; }
+.tcw-page-jump-input { width: 56px; }
 .tcw-modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(15, 23, 42, .32); padding: 20px; }
 .tcw-modal { display: grid; gap: 12px; width: min(900px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--tcw-border); border-radius: 8px; background: var(--tcw-card); padding: 16px; box-shadow: 0 18px 48px rgba(15, 23, 42, .18); }
 .tcw-form-modal { width: min(960px, 100%); }
+.tcw-form-modal-supplier {
+  width: min(1180px, calc(100vw - 96px));
+  max-height: min(760px, calc(100vh - 56px));
+  gap: 10px;
+  padding: 14px;
+}
 .tcw-confirm-modal { width: min(480px, 100%); }
 .tcw-hs-detail-modal { width: min(980px, 100%); }
 .tcw-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@@ -1959,6 +2178,61 @@ button, input, textarea, select { font: inherit; letter-spacing: 0; }
 .tcw-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 .tcw-edit-grid-two { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
 .tcw-field-wide { grid-column: 1 / -1; }
+.tcw-form-modal-supplier .tcw-modal-head h2 { font-size: 17px; }
+.tcw-form-modal-supplier .tcw-edit-grid-two {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px 12px;
+}
+.tcw-form-modal-supplier .tcw-field { gap: 4px; }
+.tcw-form-modal-supplier .tcw-field span { font-size: 11px; }
+.tcw-form-modal-supplier .tcw-field input,
+.tcw-form-modal-supplier .tcw-field select {
+  min-height: 32px;
+  padding: 6px 9px;
+}
+.tcw-form-modal-supplier .tcw-field textarea {
+  min-height: 58px;
+  padding: 7px 9px;
+}
+.tcw-form-modal-supplier .tcw-field-wide {
+  grid-column: span 3;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr);
+  gap: 10px;
+  align-items: start;
+  border-top: 1px solid var(--tcw-border);
+  padding-top: 10px;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-panel > .tcw-subsection-head {
+  align-items: center;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-panel > .tcw-table-wrap,
+.tcw-form-modal-supplier .tcw-hs-candidate-panel > .tcw-empty,
+.tcw-form-modal-supplier .tcw-hs-candidate-panel > .tcw-error {
+  grid-column: 1 / -1;
+  max-height: 210px;
+  overflow: auto;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-result {
+  display: grid;
+  gap: 8px;
+  grid-column: 1 / -1;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-result .tcw-table-wrap {
+  max-height: 210px;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-search {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+.tcw-form-modal-supplier .tcw-modal-actions {
+  position: sticky;
+  bottom: -14px;
+  border-top: 1px solid var(--tcw-border);
+  background: var(--tcw-card);
+  padding-top: 10px;
+}
 .tcw-confirm-text { margin: 0; color: var(--tcw-text); font-size: 14px; line-height: 1.7; }
 .tcw-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 .tcw-detail-field { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; align-items: start; border: 1px solid var(--tcw-border); border-radius: 6px; background: var(--tcw-soft); padding: 8px 10px; }

package/package.json

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