优化

src/modules/customers/pages/CustomerDetailView.vue

@@ -439,25 +439,25 @@ watch(orderPage, (page, previousPage) => {
 .customer-detail-page { min-width: 0; }
 .detail-header { display:flex; min-width:0; align-items:center; gap:12px; }
 .back-button { flex:0 0 auto; }
-.company-mark { display:grid; width:44px; height:44px; flex:0 0 auto; place-items:center; border-radius:12px; background:#eef1ff; color:var(--cc-primary); }
+.company-mark { display:grid; width:44px; height:44px; flex:0 0 auto; place-items:center; border-radius:12px; background:linear-gradient(135deg,rgba(102,126,234,.18),rgba(240,147,251,.18)); color:#667eea; box-shadow:0 4px 12px rgba(102,126,234,.16); }
 .detail-page-toolbar { min-width:0; flex:1; }
 .header-actions { display:flex; flex:0 0 auto; gap:8px; }
 .header-actions :deep(.el-button + .el-button) { margin-left:0; }
-.overview-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(31,43,74,.08); }
+.overview-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid rgba(255,255,255,.5); border-radius:12px; background:rgba(255,255,255,.95); box-shadow:0 3px 12px rgba(15,23,42,.05); }
 .overview-strip article { display:flex; min-width:0; align-items:center; gap:14px; padding:22px 24px; border-right:1px solid var(--cc-border); }
 .overview-strip article:last-child { border-right:0; }
 .metric-icon { display:grid; width:44px; height:44px; flex:0 0 auto; place-items:center; border-radius:12px; }
-.metric-icon.is-blue { background:#eef1ff; color:#596fde; }.metric-icon.is-green { background:#eaf8f1; color:#159260; }.metric-icon.is-amber { background:#fff5e8; color:#c87519; }
+.metric-icon.is-blue { background:linear-gradient(135deg,rgba(102,126,234,.15),rgba(118,75,162,.1)); color:#667eea; }.metric-icon.is-green { background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(22,163,74,.1)); color:#16a34a; }.metric-icon.is-amber { background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(234,88,12,.1)); color:#ea580c; }
 .overview-strip p,.overview-strip span { margin:0; color:var(--cc-muted); font-size:12px; }
 .overview-strip strong { display:block; margin:5px 0 4px; color:#172033; font-size:26px; line-height:1; }
 .overview-strip small { margin-left:5px; color:#475467; font-size:12px; font-weight:600; }
-.detail-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow-x:auto; border-radius:14px 14px 0 0; background:#fff; box-shadow:0 8px 22px rgba(31,43,74,.06); }
-.detail-tabs button { position:relative; display:flex; min-width:128px; min-height:64px; align-items:center; justify-content:center; gap:8px; padding:0 14px; border:0; background:transparent; color:#667085; font-weight:650; cursor:pointer; }
-.detail-tabs button::after { position:absolute; right:0; bottom:0; left:0; height:3px; background:transparent; content:""; }
-.detail-tabs button:hover { background:#fafbff; color:#344054; }.detail-tabs button.active { background:#f2f3ff; color:var(--cc-primary); }.detail-tabs button.active::after { background:var(--cc-primary); }
+.detail-tabs { display:flex; gap:0; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid rgba(228,228,231,.5); border-radius:20px 20px 0 0; background:rgba(255,255,255,.95); box-shadow:0 -4px 16px rgba(0,0,0,.04); scrollbar-width:thin; }
+.detail-tabs button { display:inline-flex; min-width:max-content; min-height:0; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; padding:16px 28px; border:0; border-bottom:3px solid transparent; background:transparent; color:#71717a; font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer; transition:all .3s cubic-bezier(.4,0,.2,1); }
+.detail-tabs button:hover { background:rgba(102,126,234,.05); color:#667eea; }
+.detail-tabs button.active { border-bottom-color:#667eea; background:rgba(102,126,234,.08); color:#667eea; font-weight:800; }
 .tab-panel { min-height:400px; padding-top:18px; }
 .basic-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:18px; align-items:start; }
-.detail-panel { min-width:0; padding:22px; border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(31,43,74,.06); }
+.detail-panel { min-width:0; padding:22px; border:1px solid rgba(255,255,255,.5); border-radius:12px; background:rgba(255,255,255,.95); box-shadow:0 3px 12px rgba(15,23,42,.05); }
 .contact-panel,.user-panel { grid-column:1 / -1; }
 .panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--cc-border); }
 .panel-title h2 { margin:0; color:#344054; font-size:16px; }.panel-title p { margin:5px 0 0; color:var(--cc-muted); font-size:11px; }.panel-title > svg { color:var(--cc-primary); }
@@ -467,7 +467,7 @@ watch(orderPage, (page, previousPage) => {
 .qualification-list { display:flex; flex-direction:column; gap:8px; }
 .qualification-list button { display:grid; width:100%; grid-template-columns:38px minmax(0,1fr) auto auto 20px; align-items:center; gap:10px; padding:10px; border:1px solid var(--cc-border); border-radius:10px; background:#fff; color:inherit; text-align:left; cursor:pointer; }
 .qualification-list button:hover { border-color:#b9c3f5; background:#fafbff; }.qualification-list button:disabled { cursor:wait; opacity:.65; }
-.file-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:9px; background:#eef1ff; color:var(--cc-primary); }
+.file-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:9px; background:linear-gradient(135deg,rgba(102,126,234,.15),rgba(118,75,162,.1)); color:#667eea; }
 .qualification-list strong,.qualification-list small { display:block; }.qualification-list strong { font-size:12px; }.qualification-list small,.file-date { margin-top:3px; color:var(--cc-muted); font-size:10px; }.file-date { margin:0; white-space:nowrap; }
 .section-empty,.module-empty { display:flex; min-height:150px; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:#98a2b3; text-align:center; }
 .section-empty strong,.module-empty strong { color:#475467; font-size:13px; }.section-empty span,.module-empty p { max-width:600px; margin:0; color:var(--cc-muted); font-size:11px; line-height:1.7; }
@@ -480,7 +480,7 @@ table { width:100%; min-width:720px; border-collapse:collapse; font-size:12px; }
 .business-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid var(--cc-border); border-radius:12px; }.business-summary > div { display:grid; min-height:130px; place-items:center; align-content:center; gap:8px; border-right:1px solid var(--cc-border); }.business-summary > div:last-child { border-right:0; }.business-summary svg { color:var(--cc-primary); }.business-summary span { color:var(--cc-muted); font-size:11px; }.business-summary strong { color:#25324a; font-size:20px; }
 .contract-note { margin-top:18px; padding:16px 18px; border-radius:10px; background:#f8fafc; }.contract-note strong { color:#344054; font-size:12px; }.contract-note p { margin:5px 0 0; color:var(--cc-muted); font-size:11px; line-height:1.7; }
 .qualification-preview { display:grid; min-height:320px; max-height:72vh; overflow:auto; place-items:center; border-radius:10px; background:#f8fafc; }.qualification-preview img { display:block; max-width:100%; height:auto; }.qualification-preview iframe { width:100%; min-height:68vh; border:0; background:#fff; }
-@media (max-width:960px) { .basic-layout { grid-template-columns:1fr; }.contact-panel,.user-panel { grid-column:auto; }.detail-tabs { grid-template-columns:repeat(4,150px); }.qualification-panel { order:3; }.user-panel { order:4; } }
+@media (max-width:960px) { .basic-layout { grid-template-columns:1fr; }.contact-panel,.user-panel { grid-column:auto; }.qualification-panel { order:3; }.user-panel { order:4; } }
 @media (max-width:720px) { .detail-header { align-items:flex-start; flex-wrap:wrap; }.detail-page-toolbar { width:100%; flex-basis:100%; }.company-mark { width:40px; height:40px; }.header-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }.header-actions :deep(.el-tag) { grid-column:1 / -1; justify-self:start; }.header-actions :deep(.el-button) { min-height:44px; }.overview-strip { grid-template-columns:1fr; }.overview-strip article { border-right:0; border-bottom:1px solid var(--cc-border); }.overview-strip article:last-child { border-bottom:0; }.detail-panel { padding:16px; }.info-grid { grid-template-columns:1fr; }.info-grid > div.wide { grid-column:auto; }.business-summary { grid-template-columns:1fr; }.business-summary > div { min-height:100px; border-right:0; border-bottom:1px solid var(--cc-border); }.business-summary > div:last-child { border-bottom:0; } }
 @media (max-width:420px) { .company-mark { display:none; }.header-actions { grid-template-columns:1fr; }.header-actions :deep(.el-tag) { grid-column:auto; }.qualification-list button { grid-template-columns:36px minmax(0,1fr) auto; }.qualification-list .file-date,.qualification-list button > svg { display:none; } }
 </style>

src/modules/customers/pages/CustomersView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch, type Component } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Building2, CheckCircle2, Download, Eye, FileText, FileUp, KeyRound, LogIn, MoreHorizontal, Pencil, Plus, Power, Save, ShieldCheck, ShieldX, Trash2 } from '@lucide/vue'
+import { CheckCircle2, Download, Eye, FileText, FileUp, KeyRound, LogIn, Pencil, Plus, Power, Save, ShieldCheck, ShieldX, Trash2 } from '@lucide/vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
 import { createPlatformExportTask } from '@/modules/downloads'
@@ -187,16 +187,16 @@ const creditCodeEstablished = ref(false)
 const unifiedSocialCreditCodePattern = /^[0-9A-Z]{18}$/
 
 const customerColumns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', minWidth: 280, slotName: 'actions' },
-  { key: 'tenantCode', prop: 'tenantCode', label: '客户编号', minWidth: 170 },
-  { key: 'company', label: '公司名称', minWidth: 230, slotName: 'company' },
-  { key: 'unifiedSocialCreditCode', prop: 'unifiedSocialCreditCode', label: '统一社会信用代码', minWidth: 205, defaultVisible: false, formatter: (row: PlatformTenantResource) => displayText(row.unifiedSocialCreditCode) },
+  { key: 'actions', label: '操作', width: 620, slotName: 'actions' },
+  { key: 'tenantCode', prop: 'tenantCode', label: '客户编号', width: 220, className: 'customer-code-column' },
+  { key: 'company', label: '公司名称', width: 250, slotName: 'company' },
+  { key: 'unifiedSocialCreditCode', prop: 'unifiedSocialCreditCode', label: '统一社会信用代码', width: 220, formatter: (row: PlatformTenantResource) => displayText(row.unifiedSocialCreditCode) },
   { key: 'contactName', prop: 'contactName', label: '联系人', minWidth: 120, formatter: (row: PlatformTenantResource) => displayText(row.contactName) },
   { key: 'contactPhone', prop: 'contactPhone', label: '电话', minWidth: 150, formatter: (row: PlatformTenantResource) => displayText(row.contactPhone) },
-  { key: 'salesOwnerName', prop: 'salesOwnerName', label: '销售人员', minWidth: 120, defaultVisible: false, formatter: (row: PlatformTenantResource) => displayText(row.salesOwnerName) },
-  { key: 'paymentTermDays', prop: 'paymentTermDays', label: '账期(天)', width: 105, defaultVisible: false, formatter: (row: PlatformTenantResource) => row.paymentTermDays ?? 0 },
+  { key: 'salesOwnerName', prop: 'salesOwnerName', label: '销售人员', minWidth: 120, formatter: (row: PlatformTenantResource) => displayText(row.salesOwnerName) },
+  { key: 'paymentTermDays', prop: 'paymentTermDays', label: '账期(天)', width: 105, formatter: (row: PlatformTenantResource) => row.paymentTermDays ?? 0 },
   { key: 'status', label: '状态', width: 110, slotName: 'status' },
-  { key: 'orderCount', label: '运单数', width: 100, slotName: 'orderCount', defaultVisible: false },
+  { key: 'orderCount', label: '运单数', width: 100, slotName: 'orderCount' },
   { key: 'createdAt', prop: 'createdAt', label: '入驻时间', minWidth: 165, formatter: (row: PlatformTenantResource) => formatDate(row.createdAt) },
 ]
 
@@ -645,11 +645,6 @@ function hasReviewAction(row: PlatformTenantResource) {
     && access.can('platform:customer:review')
     && (access.can('platform:customer:approve') || access.can('platform:customer:reject'))
 }
-function customerPrimaryActionCount(row: PlatformTenantResource) {
-  return Number(access.can('platform:customer:view'))
-    + Number(access.can('platform:customer:view') && access.can('platform:customer:edit'))
-    + Number(hasReviewAction(row))
-}
 function customerSecondaryActions(row: PlatformTenantResource): CustomerRowAction[] {
   return [
     ...(canResetPassword(row) ? ['reset-password' as const] : []),
@@ -658,18 +653,6 @@ function customerSecondaryActions(row: PlatformTenantResource): CustomerRowActio
     ...(canArchive() ? ['delete' as const] : []),
   ]
 }
-function directCustomerActions(row: PlatformTenantResource) {
-  return customerSecondaryActions(row).slice(0, Math.max(0, 3 - customerPrimaryActionCount(row)))
-}
-function moreCustomerActions(row: PlatformTenantResource) {
-  return customerSecondaryActions(row).slice(Math.max(0, 3 - customerPrimaryActionCount(row)))
-}
-function customerMoreActionsLabel(row: PlatformTenantResource) {
-  const identifier = [row.tenantName, row.tenantCode]
-    .map((value) => String(value ?? '').trim())
-    .find(Boolean)
-  return `更多客户操作：${identifier || '当前客户'}`
-}
 function customerActionLabel(row: PlatformTenantResource, action: CustomerRowAction) {
   if (action === 'reset-password') return '重置密码'
   if (action === 'impersonate') return '跳转登录'
@@ -962,25 +945,17 @@ onMounted(() => { void loadCustomers() })
       </template>
       <section v-if="!loadError" class="surface-panel table-panel" :aria-busy="loading">
       <div v-if="reviewLoadError" class="review-sync-error" role="alert"><div><ShieldX :size="17" /><span>{{ reviewLoadError.message }}</span></div><el-button link type="primary" @click="reloadPendingReviews">重新加载待审核客户</el-button></div>
-      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="customerColumns" preference-key="customers-table" :loading="loading" :total="result.total" aria-label="客户列表" row-key="id" empty-text="暂无符合筛选条件的客户">
+      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="customerColumns" preference-key="customers-table" :loading="loading" :total="result.total" aria-label="客户列表" row-key="id" empty-text="暂无符合筛选条件的客户" class="customer-list-table" :stripe="true" border>
         <template #toolbar-actions><div class="customers-table-actions"><el-button v-if="access.can('platform:customer:export') && access.can('platform:download:list')" :loading="exportSubmitting" :disabled="loading || exportSubmitting" @click="exportCustomers"><Download :size="16" />导出Excel</el-button><el-button v-if="access.can('platform:customer:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增客户</el-button></div></template>
         <template #actions="{ row }">
           <div class="table-actions">
-            <el-button v-if="access.can('platform:customer:view')" link type="primary" @click="showDetail(row as PlatformTenantResource)"><Eye :size="15" />详情</el-button>
-            <el-button v-if="access.can('platform:customer:view') && access.can('platform:customer:edit')" link type="primary" @click="openEdit(row as PlatformTenantResource)"><Pencil :size="15" />编辑</el-button>
-            <el-button v-if="hasReviewAction(row as PlatformTenantResource)" link type="warning" :disabled="reviewSubmitting" @click="openDecision(row as PlatformTenantResource, access.can('platform:customer:approve') ? 'approve' : 'reject')"><ShieldCheck :size="15" />审核</el-button>
-            <el-button v-for="action in directCustomerActions(row as PlatformTenantResource)" :key="action" link :type="customerActionType(row as PlatformTenantResource, action)" :disabled="customerActionDisabled(action)" @click="handleMoreAction(row as PlatformTenantResource, action)"><component :is="customerRowActionIcons[action]" :size="15" />{{ customerActionLabel(row as PlatformTenantResource, action) }}</el-button>
-            <el-dropdown v-if="moreCustomerActions(row as PlatformTenantResource).length" trigger="click" :disabled="rowActionId === String((row as PlatformTenantResource).id)" popper-class="customer-action-menu" @command="handleMoreAction(row as PlatformTenantResource, String($event))">
-              <el-button link type="primary" :aria-label="customerMoreActionsLabel(row as PlatformTenantResource)" :title="customerMoreActionsLabel(row as PlatformTenantResource)"><MoreHorizontal :size="16" /></el-button>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item v-for="action in moreCustomerActions(row as PlatformTenantResource)" :key="action" :command="action" :disabled="customerActionDisabled(action)" :divided="action === 'delete'" :class="{ 'customer-action-menu__danger': action === 'delete' }"><component :is="customerRowActionIcons[action]" :size="15" />{{ customerActionLabel(row as PlatformTenantResource, action) }}</el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
+            <el-button v-if="access.can('platform:customer:view')" class="customer-action-button customer-action-detail" size="small" @click="showDetail(row as PlatformTenantResource)"><Eye :size="14" />详情</el-button>
+            <el-button v-if="access.can('platform:customer:view') && access.can('platform:customer:edit')" class="customer-action-button customer-action-edit" size="small" @click="openEdit(row as PlatformTenantResource)"><Pencil :size="14" />编辑</el-button>
+            <el-button v-if="hasReviewAction(row as PlatformTenantResource)" class="customer-action-button customer-action-review" size="small" :disabled="reviewSubmitting" @click="openDecision(row as PlatformTenantResource, access.can('platform:customer:approve') ? 'approve' : 'reject')"><ShieldCheck :size="14" />审核</el-button>
+            <el-button v-for="action in customerSecondaryActions(row as PlatformTenantResource)" :key="action" :class="[`customer-action-button`, `customer-action-${action}`, { 'is-enable': action === 'status' && (row as PlatformTenantResource).status !== 'ACTIVE', 'is-disable': action === 'status' && (row as PlatformTenantResource).status === 'ACTIVE' }]" size="small" :disabled="customerActionDisabled(action)" @click="handleMoreAction(row as PlatformTenantResource, action)"><component :is="customerRowActionIcons[action]" :size="14" />{{ customerActionLabel(row as PlatformTenantResource, action) }}</el-button>
           </div>
         </template>
-        <template #company="{ row }"><div class="customer-company-cell"><span><Building2 :size="18" /></span><strong>{{ (row as PlatformTenantResource).tenantName }}</strong></div></template>
+        <template #company="{ row }"><strong class="customer-company-name">{{ (row as PlatformTenantResource).tenantName }}</strong></template>
         <template #status="{ row }"><el-tag :type="statusMeta((row as PlatformTenantResource).status).type" effect="light">{{ statusMeta((row as PlatformTenantResource).status).label }}</el-tag></template>
         <template #orderCount="{ row }">{{ access.can('platform:order:list') ? (orderCounts[String((row as PlatformTenantResource).id)] ?? '—') : '—' }}</template>
         <template #pagination-left="{ total: tableTotal }"><span>共 {{ tableTotal }} 个客户</span></template>
@@ -1096,7 +1071,31 @@ onMounted(() => { void loadCustomers() })
 :global(.customer-action-menu .el-dropdown-menu__item) { min-height:40px; gap:8px; }
 :global(.customer-action-menu .customer-action-menu__danger) { color:var(--el-color-danger); }
 .review-sync-error { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; border-bottom:1px solid #fecdca; background:#fffafa; color:#b42318; font-size:12px; } .review-sync-error > div { display:flex; min-width:0; align-items:center; gap:8px; } .review-sync-error span { overflow-wrap:anywhere; }
-.customer-company-cell { display:flex; min-width:0; align-items:center; gap:10px; } .customer-company-cell > span { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:7px; background:#eef4ff; color:var(--cc-primary); } .customer-company-cell strong { overflow:hidden; text-overflow:ellipsis; }
+.customer-company-name { display:block; overflow:hidden; color:#334155; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
+.customers-table-actions :deep(.el-button--primary) { border:0; background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%); box-shadow:0 4px 12px rgba(102,126,234,.3); }
+.customers-table-actions :deep(.el-button--default) { border-color:rgba(102,126,234,.22); }
+:deep(.customer-list-table .el-table__header-wrapper th) { background:#f7f9fc; }
+:deep(.customer-list-table .el-table) { --el-table-border-color:#e5eaf1; --el-table-row-hover-bg-color:rgba(102,126,234,.06); border:1px solid #e5eaf1; border-radius:0; overflow:hidden; }
+:deep(.customer-list-table .el-table__inner-wrapper::before) { background:#e5eaf1; }
+:deep(.customer-list-table .el-table__body tr.el-table__row--striped > td) { background:#fbfcff; }
+:deep(.customer-list-table .el-table__body tr:hover > td) { background:rgba(102,126,234,.06) !important; }
+:deep(.customer-list-table .el-table__body td), :deep(.customer-list-table .el-table__header th) { border-right:1px solid #edf1f5; }
+:deep(.customer-list-table .el-table__body td:last-child), :deep(.customer-list-table .el-table__header th:last-child) { border-right:0; }
+:deep(.customer-list-table .customer-code-column .cell) { white-space:nowrap; }
+:deep(.customer-list-table .customer-action-button) { min-height:28px; margin:0; padding:5px 9px; border-radius:8px; font-size:12px; font-weight:650; box-shadow:0 2px 6px rgba(15,23,42,.06); }
+:deep(.customer-list-table .customer-action-detail) { border-color:#bfdbfe; background:#eff6ff; color:#2563eb; }
+:deep(.customer-list-table .customer-action-edit) { border-color:#c7d2fe; background:#eef2ff; color:#667eea; }
+:deep(.customer-list-table .customer-action-review) { border-color:#fed7aa; background:#fff7ed; color:#ea580c; }
+:deep(.customer-list-table .customer-action-reset-password) { border-color:#ddd6fe; background:#f5f3ff; color:#7c3aed; }
+:deep(.customer-list-table .customer-action-impersonate) { border-color:#bae6fd; background:#f0f9ff; color:#0369a1; }
+:deep(.customer-list-table .customer-action-status.is-enable) { border-color:#bbf7d0; background:#f0fdf4; color:#16a34a; }
+:deep(.customer-list-table .customer-action-status.is-disable), :deep(.customer-list-table .customer-action-delete) { border-color:#fecaca; background:#fef2f2; color:#dc2626; }
+:deep(.customer-list-table .customer-action-button:hover) { filter:brightness(.97); transform:none; box-shadow:0 2px 6px rgba(15,23,42,.06); }
+:deep(.customer-list-table .el-tag) { border:0; border-radius:12px; font-weight:650; }
+:deep(.customer-list-table .el-tag--success) { background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(22,163,74,.1)); color:#16a34a; }
+:deep(.customer-list-table .el-tag--warning) { background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(234,88,12,.1)); color:#ea580c; }
+:deep(.customer-list-table .el-tag--danger) { background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.1)); color:#dc2626; }
+:deep(.customer-list-table .el-tag--info) { background:linear-gradient(135deg,rgba(102,126,234,.15),rgba(118,75,162,.1)); color:#667eea; }
 .capital-input { display:grid; grid-template-columns:minmax(0,1fr) 130px; width:100%; gap:8px; } .capital-input :deep(.el-input-number),.capital-input :deep(.el-select) { width:100%; }
 .qualification-heading { display:flex; justify-content:flex-end; margin-bottom:12px; } .qualification-hint { margin:12px 0 0; color:var(--cc-muted); font-size:12px; line-height:1.6; } .qualification-hint span,.qualification-label > span { color:var(--el-color-danger); }
 .qualification-credit-code { max-width:420px; margin-top:16px; } .qualification-credit-code small,.field-hint { display:block; margin-top:6px; color:var(--cc-muted); font-size:11px; line-height:1.5; }

src/modules/finance/routes.ts

@@ -1,9 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router'
 
 export const financeRoutes = [
-  { path: 'finance/customer-accounts', name: 'finance-customer-accounts', component: () => import('./pages/FinanceCustomerAccountsView.vue'), meta: { title: '客户账户', description: '查看客户 CNY 应收台账并维护独立账期', permission: 'platform:finance:bill:view' } },
+  { path: 'finance/customer-accounts', name: 'finance-customer-accounts', component: () => import('./pages/FinanceCustomerAccountsView.vue'), meta: { title: '客户账户', description: '查看客户 CNY 应收台账并维护独立账期', permission: 'platform:finance:account:view' } },
   { path: 'finance/customer-arap', name: 'finance-customer-arap', component: () => import('./pages/FinanceCustomerArapView.vue'), meta: { title: '客户应收应付', description: '按客户追溯入库单、订单和柜次费用来源', permission: 'platform:finance:bill:view' } },
   { path: 'finance/customer-statements', name: 'finance-customer-statements', component: () => import('./pages/FinanceCustomerStatementsView.vue'), meta: { title: '客户对账单', description: '维护 CNY 客户对账单并在出账后冻结', permission: 'platform:finance:bill:view' } },
-  { path: 'finance/settlement-receivables', name: 'finance-settlement-receivables', component: () => import('./pages/FinanceSettlementReceivablesView.vue'), meta: { title: '结算单应收', description: '登记客户收款、凭证及对应对账单金额', permission: 'platform:finance:receipt:view' } },
-  { path: 'finance/settlement-payables', name: 'finance-settlement-payables', component: () => import('./pages/FinanceSettlementPayablesView.vue'), meta: { title: '结算单应付', description: '登记单票及整柜公共成本并追溯业务来源', permission: 'platform:finance:cost:view' } },
+  { path: 'finance/settlement-receivables', name: 'finance-settlement-receivables', component: () => import('./pages/FinanceSettlementReceivablesView.vue'), meta: { title: '结算单应收', description: '登记客户收款、凭证及对应对账单金额', permission: 'platform:finance:settlement-ar:view' } },
+  { path: 'finance/settlement-payables', name: 'finance-settlement-payables', component: () => import('./pages/FinanceSettlementPayablesView.vue'), meta: { title: '结算单应付', description: '登记单票及整柜公共成本并追溯业务来源', permission: 'platform:finance:settlement-ap:view' } },
 ] satisfies RouteRecordRaw[]

src/modules/inbounds/measurement/InboundMeasurementPanel.test.ts

@@ -100,6 +100,7 @@ function measurement(overrides: Partial<InboundMeasurementDetail> = {}): Inbound
 async function mountPanel(permissions = [
   'platform:firstleg:inbound:measure:view',
   'platform:firstleg:inbound:measure:edit',
+  'platform:firstleg:inbound:measure:manual-entry',
   'platform:firstleg:inbound:measure:submit',
 ]) {
   const pinia = createPinia()
@@ -170,6 +171,16 @@ describe('InboundMeasurementPanel', () => {
     expect(document.body.textContent).toContain('保存箱规')
   })
 
+  it('does not expose manual carton entry without its dedicated permission', async () => {
+    const wrapper = await mountPanel([
+      'platform:firstleg:inbound:measure:view',
+      'platform:firstleg:inbound:measure:edit',
+      'platform:firstleg:inbound:measure:submit',
+    ])
+
+    expect(wrapper.text()).not.toContain('手动录入箱规')
+  })
+
   it('does not expose unknown measurement source codes', async () => {
     vi.mocked(getInboundMeasurement).mockResolvedValueOnce(measurement({ sourceType: 'LEGACY_DEVICE' }))
 

src/modules/inbounds/measurement/InboundMeasurementPanel.vue

@@ -97,6 +97,7 @@ const manualForm = reactive<ManualCartonFormModel>({
 
 const canView = computed(() => access.can('platform:firstleg:inbound:measure:view'))
 const canEdit = computed(() => access.can('platform:firstleg:inbound:measure:edit'))
+const canManualEntry = computed(() => access.can('platform:firstleg:inbound:measure:manual-entry'))
 const canSubmit = computed(() => access.can('platform:firstleg:inbound:measure:submit'))
 const customerId = computed(() => props.customerId || props.tenantId || '')
 const hasContext = computed(() => Boolean(customerId.value && props.inboundId))
@@ -104,7 +105,7 @@ const countEditableProcess = computed(() => ['WAIT_MEASURE', 'MEASURING', 'MEASU
 const submitEditableProcess = computed(() => ['WAIT_MEASURE', 'MEASURING', 'MEASURE_REJECTED'].includes(detail.value?.processStatus || ''))
 const mayMaintain = computed(() => canEdit.value && countEditableProcess.value && !loading.value && !submitting.value)
 const manualEntryEditableProcess = computed(() => ['WAIT_MEASURE', 'MEASURING', 'MEASURE_REJECTED'].includes(detail.value?.processStatus || ''))
-const mayCreateManualEntry = computed(() => canEdit.value && manualEntryEditableProcess.value && !loading.value && !saving.value && !submitting.value && !isDirty.value)
+const mayCreateManualEntry = computed(() => canManualEntry.value && manualEntryEditableProcess.value && !loading.value && !saving.value && !submitting.value && !isDirty.value)
 const confirmedPackageCount = computed(() => form.items.reduce((sum, item) => sum + (Number.isFinite(item.packageCount) ? item.packageCount : 0), 0))
 const expectedPackageCount = computed(() => detail.value?.originalPackageCount ?? null)
 const packageCountDifference = computed(() => expectedPackageCount.value == null ? null : confirmedPackageCount.value - expectedPackageCount.value)
@@ -556,7 +557,7 @@ onBeforeUnmount(releaseImagePreview)
           <section class="measurement-section measurement-items-section">
             <div class="measurement-section__heading">
               <div><h3>扫描箱测量数据明细</h3><p>每条记录对应一个实际扫描箱；人工只确认该条记录代表的箱数，设备实测值不可在此修改。</p></div>
-              <el-button v-if="canEdit" type="primary" plain :disabled="!mayCreateManualEntry" @click="openManualEntry"><Plus :size="15" />手动录入箱规</el-button>
+              <el-button v-if="canManualEntry" type="primary" plain :disabled="!mayCreateManualEntry" @click="openManualEntry"><Plus :size="15" />手动录入箱规</el-button>
             </div>
 
             <el-empty v-if="!form.items.length" description="暂无扫描箱测量数据" />

src/modules/inbounds/measurement/api.test.ts

@@ -112,7 +112,7 @@ describe('inbound measurement API', () => {
       machineNo: 'MANUAL-ADMIN', measuredAt: '2026-08-12T14:00:00', scannedShipmentId: null,
     }, image)).resolves.toEqual(result)
     const [path, body, config] = vi.mocked(http.post).mock.calls[0]!
-    expect(path).toBe('/platform/v1/first-leg/inbounds/7001/measurement/carton-scans')
+    expect(path).toBe('/platform/v1/first-leg/inbounds/7001/measurement/manual-cartons')
     expect(body).toBeInstanceOf(FormData)
     expect((body as FormData).get('image')).toBe(image)
     expect(config).toEqual({ params: { tenantId: '10001' }, headers: { 'Content-Type': 'multipart/form-data' } })

src/modules/inbounds/measurement/api.ts

@@ -78,7 +78,7 @@ export async function createManualCartonScan(
   data.append('data', new Blob([JSON.stringify(payload)], { type: 'application/json' }))
   data.append('image', image)
   const response = await http.post<ApiEnvelope<CartonMeasurementResult>, ApiEnvelope<CartonMeasurementResult>>(
-    `${measurementPath(inboundId)}/carton-scans`,
+    `${measurementPath(inboundId)}/manual-cartons`,
     data,
     { params: { tenantId: customerId }, headers: { 'Content-Type': 'multipart/form-data' } },
   )