优化

src/modules/master-data/express-companies/pages/ExpressCompaniesView.test.ts

@@ -73,15 +73,13 @@ enableAutoUnmount(afterEach)
 afterAll(() => vi.unstubAllGlobals())
 
 describe('ExpressCompaniesView query and table migration', () => {
-  it('renders edit and status as colored outlined buttons with prototype icons', () => {
-    expect(expressCompaniesSource).toContain('size="small"\n              plain\n              type="primary"')
-    expect(expressCompaniesSource).toContain('size="small"\n              plain\n              :disabled="loading"\n              :type=')
-    expect(expressCompaniesSource).toContain('<Pencil :size="15" />编辑')
-    expect(expressCompaniesSource).toContain('<Power :size="15" />')
-    expect(expressCompaniesSource).not.toContain("access.can('platform:express:edit')\"\n              link")
-    expect(expressCompaniesSource).not.toContain("access.can('platform:express:status')\"\n              link")
+  it('renders edit and status as shared outlined text buttons', () => {
+    const actions = expressCompaniesSource.slice(expressCompaniesSource.indexOf('<template #actions='), expressCompaniesSource.indexOf('</template>', expressCompaniesSource.indexOf('<template #actions=')))
+    expect(actions.match(/class="density-action"/g)).toHaveLength(2)
+    expect(actions).toContain('>编辑</el-button>')
+    expect(actions).toContain(' :data-tone=')
+    expect(actions).not.toMatch(/<(?:el-dropdown|Pencil|Power|Eye|Trash2|Download|CircleX)\b/)
   })
-
   it('keeps operation first and exposes the prototype business columns separately', () => {
     const actionsIndex = expressCompaniesSource.indexOf("{ key: 'actions', label: '操作'")
     const nameIndex = expressCompaniesSource.indexOf("{ key: 'company', label: '公司名称'")

src/modules/master-data/express-companies/pages/ExpressCompaniesView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { ExternalLink, FileUp, Pencil, Plus, Power, Save, Truck } from '@lucide/vue'
+import { ExternalLink, FileUp, Plus, Save, Truck } from '@lucide/vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import BatchImportDialog from '@/shared/components/BatchImportDialog.vue'
@@ -250,7 +251,7 @@ async function toggleStatus(row: PlatformExpressCompanyResource) {
     await ElMessageBox.confirm(
       `确定${action}“${row.companyName}”吗？${nextStatus === 'INACTIVE' ? '停用后不会再作为可用快递公司。' : ''}`,
       `${action}快递公司`,
-      { type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
+      { customClass: 'admin-density-confirm', type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
     )
   } catch {
     return
@@ -280,7 +281,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage>
+  <AdminPage class="admin-density">
     <div class="business-page express-company-page">
       <ListPageLayout ariaLabel="快递公司列表">
         <template #toolbar>
@@ -311,25 +312,25 @@ onMounted(() => {
       >
         <template #toolbar-actions><div class="table-actions"><el-button v-if="access.can('platform:express:import')" :disabled="loading" @click="openImport"><FileUp :size="16" />批量导入</el-button><el-button v-if="access.can('platform:express:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增快递公司</el-button></div></template>
         <template #actions="{ row }">
-          <div v-if="access.can('platform:express:edit') || access.can('platform:express:status')" class="table-actions">
-            <el-button
+          <div v-if="access.can('platform:express:edit') || access.can('platform:express:status')" class="table-actions density-actions">
+            <el-button data-tone="neutral" class="density-action"
               v-if="access.can('platform:express:edit')"
               size="small"
-              plain
-              type="primary"
+
+
               :disabled="loading"
               :loading="editLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
               @click="openEdit(row as PlatformExpressCompanyResource)"
-            ><Pencil :size="15" />编辑</el-button>
-            <el-button
+            >编辑</el-button>
+            <el-button class="density-action"
               v-if="access.can('platform:express:status')"
               size="small"
-              plain
+
               :disabled="loading"
-              :type="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'danger' : 'success'"
+              :data-tone="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'danger' : 'success'"
               :loading="statusLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
               @click="toggleStatus(row as PlatformExpressCompanyResource)"
-            ><Power :size="15" />{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
+            >{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
           </div>
           <span v-else class="muted-value">仅查看</span>
         </template>
@@ -349,7 +350,7 @@ onMounted(() => {
     </section>
       </ListPageLayout>
 
-    <BatchImportDialog
+    <BatchImportDialog class="admin-density-dialog"
       v-model="importOpen"
       title="批量导入快递公司"
       entity-label="快递公司"
@@ -361,18 +362,16 @@ onMounted(() => {
       @success="loadExpressCompanies"
     />
 
-    <el-drawer v-model="editorOpen" :title="editorTitle" size="580px" class="business-drawer editor-drawer" :close-on-click-modal="false">
-      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="saving">
-        <FormSection title="基础信息">
-          <h3>公司标识</h3>
+    <el-drawer v-model="editorOpen" :title="editorTitle" size="580px" class="editor-drawer admin-density admin-density-drawer" :close-on-click-modal="false">
+      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="density-form" :disabled="saving">
+        <FormSection class="density-form-section" title="基础信息">
           <div class="form-grid two-cols">
             <el-form-item label="快递公司编码" prop="companyCode" required><el-input v-model.trim="form.companyCode" maxlength="50" placeholder="例如 SF" /></el-form-item>
             <el-form-item label="快递公司名称" prop="companyName" required><el-input v-model.trim="form.companyName" maxlength="128" placeholder="例如 顺丰速运" /></el-form-item>
           </div>
           <el-form-item label="状态" prop="status" required><el-radio-group v-model="form.status"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item>
         </FormSection>
-        <FormSection title="服务配置">
-          <h3>服务与查询</h3>
+        <FormSection class="density-form-section" title="服务配置">
           <div class="form-grid two-cols">
             <el-form-item label="客服电话"><el-input v-model.trim="form.servicePhone" maxlength="32" placeholder="例如 95338" /></el-form-item>
             <el-form-item label="官方网站" prop="website"><el-input v-model.trim="form.website" maxlength="255" placeholder="https://www.example.com" /></el-form-item>
@@ -380,7 +379,7 @@ onMounted(() => {
           <el-form-item label="轨迹查询地址模板"><el-input v-model.trim="form.trackingUrlTemplate" maxlength="500" placeholder="https://example.com/track/{trackingNo}" /></el-form-item>
           <p class="form-help">可使用 <code>{trackingNo}</code> 作为快递单号占位符；一期不包含轨迹订阅和自动回传。</p>
         </FormSection>
-        <FormSection title="备注"><el-form-item label="内部说明"><el-input v-model.trim="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用范围、服务限制或其他说明" /></el-form-item></FormSection>
+        <FormSection class="density-form-section" title="备注"><el-form-item label="内部说明"><el-input v-model.trim="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用范围、服务限制或其他说明" /></el-form-item></FormSection>
       </el-form>
       <template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveExpressCompany"><Save :size="16" />保存快递公司</el-button></div></template>
     </el-drawer>
@@ -389,19 +388,19 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.express-company-page { gap: 16px; }
-.state-alert p { margin: 6px 0 0; line-height: 1.55; }
-.state-alert .el-button { margin-top: 10px; }
-.express-company-cell { display: flex; min-width: 0; align-items: center; gap: 10px; }
-.express-company-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--cc-border); border-radius: 7px; background: #f8fafc; color: var(--cc-primary); }
+.express-company-page { gap: var(--admin-space-6); }
+.state-alert p { margin: var(--admin-space-2) 0 0; line-height: 1.55; }
+.state-alert .el-button { margin-top: var(--admin-space-4); }
+.express-company-cell { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-4); }
+.express-company-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: #f8fafc; color: var(--cc-primary); }
 .express-company-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
 .express-company-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.external-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-primary); font-size: 12px; text-decoration: none; }
+.external-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-primary); font-size: var(--admin-font-caption); text-decoration: none; }
 .external-link:hover { text-decoration: underline; }
-.tracking-template { display: block; max-width: 100%; color: #475467; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
+.tracking-template { display: block; max-width: 100%; color: #475467; font-family: "Cascadia Code", Consolas, monospace; font-size: var(--admin-font-caption); overflow-wrap: anywhere; }
 .remark-cell { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
 .form-help code { color: #475467; font-family: "Cascadia Code", Consolas, monospace; }
-.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--admin-space-3); }
 .panel-actions .el-button { margin-left: 0; }
 @media (max-width: 720px) {
   .panel-actions, .panel-actions .el-button { width: 100%; }