优化

src/modules/fee-items/pages/FeeItemsView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
@@ -341,7 +342,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="fee-items-page admin-density" spacing="normal">
+  <AdminPage as="div" class="fee-items-page admin-density admin-workbench" spacing="normal">
     <el-result v-if="!canView" icon="warning" title="无权查看费用项目" sub-title="请联系管理员开通费用项目查看权限" />
 
     <ListPageLayout v-else aria-label="费用项目管理">
@@ -349,7 +350,7 @@ onMounted(() => {
 
 
 
-      <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError"
+      <section class="workbench-table is-page-surface"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError"
           v-model:page="page"
           v-model:page-size="pageSize"
           :data="rows"
@@ -429,7 +430,7 @@ onMounted(() => {
         </DataTable></section>
     </ListPageLayout>
 
-    <AppDrawer class="admin-density admin-density-drawer admin-density-drawer--editor"
+    <AppDrawer class="admin-density admin-density-drawer admin-density-drawer--editor admin-workbench is-drawer"
       v-model="editorOpen"
       :title="editorTitle"
       size="min(620px, 94vw)"
@@ -437,14 +438,14 @@ onMounted(() => {
       :confirm-loading="saving"
     >
       <el-form class="density-form density-dialog-sections" ref="formRef" :model="form" :rules="rules" label-position="left" label-width="100px" :disabled="saving || editorLoading">
-        <section class="density-dialog-section" data-tone="work" aria-label="费用基本信息">
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="费用基本信息">
           <h3 class="density-dialog-section__title">基本信息 <InlineHelp title="默认价格说明">选择费用项目时自动带入，使用时仍可修改；清空表示不设置默认价格。</InlineHelp></h3>
           <table class="density-table density-table--editable fee-item-editor-table"><tbody>
             <tr><td><el-form-item label="费用名称" prop="feeTypeName" required><el-input v-model="form.feeTypeName" maxlength="128" placeholder="请输入费用名称" /></el-form-item></td><td><el-form-item label="费用分类" prop="category" required><el-input v-model="form.category" maxlength="64" placeholder="例如 仓储成本" /></el-form-item></td></tr>
             <tr><td><el-form-item label="贸易范围" prop="tradeScope" required><el-segmented v-model="form.tradeScope" :options="[{ label: '国内', value: 'DOMESTIC' }, { label: '国际', value: 'INTERNATIONAL' }]" /></el-form-item></td><td><el-form-item label="默认价格(CNY)" prop="defaultPrice"><el-input-number v-model="form.defaultPrice" :min="0" :max="9999999999.99" :precision="2" controls-position="right" placeholder="不填则由使用时手工录入" /></el-form-item></td></tr>
           </tbody></table>
         </section>
-        <section class="density-dialog-section" data-tone="work" aria-label="费用方向与供应商">
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="费用方向与供应商">
           <h3 class="density-dialog-section__title">费用方向 <InlineHelp title="费用方向说明">选择费用在提货和仓库环节的应收、应付属性。</InlineHelp></h3>
           <table class="density-table density-table--editable fee-direction-table"><thead><tr><th scope="col">环节</th><th scope="col">应付</th><th scope="col">应收</th></tr></thead><tbody>
             <tr><th scope="row">提货环节</th><td><el-checkbox v-model="form.pickupPayable" aria-label="提货环节应付" /></td><td><el-checkbox v-model="form.pickupReceivable" aria-label="提货环节应收" /></td></tr>
@@ -453,7 +454,7 @@ onMounted(() => {
             <tr v-if="hasPayableDirection"><td colspan="3"><el-form-item label="供应商类别" required><el-select v-model="form.supplierCategory" placeholder="请选择供应商类别"><el-option v-for="(label, value) in categoryLabels" :key="value" :label="label" :value="value" /></el-select></el-form-item></td></tr>
           </tbody></table>
         </section>
-        <section class="density-dialog-section" data-tone="work" aria-label="费用适用说明">
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="费用适用说明">
           <h3 class="density-dialog-section__title">适用说明</h3>
           <table class="density-table density-table--editable"><tbody><tr><td><el-form-item label="说明"><el-input v-model="form.description" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用场景或核算说明" /></el-form-item></td></tr></tbody></table>
         </section>
@@ -466,7 +467,7 @@ onMounted(() => {
       </template>
     </AppDrawer>
 
-    <AppDialog class="admin-density-dialog"
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog"
       v-model="statusOpen"
       :title="`${statusTarget?.status === 'ACTIVE' ? '停用' : '启用'}费用项目${statusTarget?.feeTypeName?.trim() ? ' · ' + statusTarget.feeTypeName.trim() : ''}`"
       :confirm-text="statusTarget?.status === 'ACTIVE' ? '确认停用' : '确认启用'"
@@ -480,7 +481,7 @@ onMounted(() => {
       </p>
     </AppDialog>
 
-    <AppDialog class="admin-density-dialog"
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog"
       v-model="deleteOpen"
       :title="deleteTarget?.feeTypeName?.trim() ? `删除费用项目 · ${deleteTarget.feeTypeName.trim()}` : '删除费用项目'"
       confirm-text="确认删除"
@@ -499,7 +500,7 @@ onMounted(() => {
 .fee-item-editor-table td { width: 50%; }
 .fee-item-name { display: flex; min-width: 0; flex-direction: column; gap: var(--admin-space-1); }
 .fee-item-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.fee-item-name small { color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.fee-item-name small { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 .description-cell { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
 @media (max-width: 720px) {
   .fee-item-editor-table tr { display: grid; }