@chenchaolong/plugin-trade-compliance-workbench 0.1.48 → 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)
@@ -471,6 +475,7 @@
         hsCandidates: Array.isArray(merged.hsCodeCandidates) ? merged.hsCodeCandidates : [],
         hsCandidateKeyword: merged.hsCodeLookupKeyword || buildSupplierHsCandidateKeyword(merged),
         hsCandidatePage: 1,
+        hsCandidateJumpPage: '',
         hsCandidatePagination: null,
         hsCandidateStatus: merged.hsCodeLookupStatus || '',
         hsCandidateError: merged.hsCodeLookupError || '',
@@ -487,6 +492,7 @@
         hsCandidates: [],
         hsCandidateKeyword: '',
         hsCandidatePage: 1,
+        hsCandidateJumpPage: '',
         hsCandidatePagination: null,
         hsCandidateStatus: '',
         hsCandidateError: '',
@@ -672,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'),
@@ -689,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)
           )
         )
       )
@@ -892,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) {
@@ -1050,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)
@@ -1058,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() {
@@ -1167,20 +1214,67 @@
     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 visiblePages = pages.filter((item, index, arr) => arr.findIndex((candidate) => candidate.page === item.page) === index).slice(0, 10)
       const currentPage = pagination.currentPage || formDialog.hsCandidatePage || 1
-      return h('div', { className: 'tcw-pagination hs-code-pagination' },
-        h('span', null, `第 ${currentPage} 页`),
-        h('div', { className: 'tcw-page-buttons' },
-          h('button', { className: 'tcw-mini-btn', disabled: formDialog.hsCandidateLoading || !pagination.hasPrevious, onClick: () => searchSupplierHsCandidatesForForm(currentPage - 1) }, '上一页'),
-          visiblePages.map((item) => h('button', {
-            key: item.page,
-            className: item.current ? 'tcw-mini-btn active' : 'tcw-mini-btn',
-            disabled: formDialog.hsCandidateLoading || item.current,
-            onClick: () => searchSupplierHsCandidatesForForm(item.page)
-          }, String(item.page))),
-          h('button', { className: 'tcw-mini-btn', disabled: formDialog.hsCandidateLoading || !pagination.hasNext, onClick: () => searchSupplierHsCandidatesForForm(currentPage + 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 }, '跳转')
       )
     }
 
@@ -1372,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' },
@@ -1977,8 +2092,74 @@ 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%); }

package/package.json

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