优化

src/modules/iam/pages/PermissionsView.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
+import '../iamDensity.css'
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { Braces, FolderTree, MoreHorizontal, Pencil, Plus, Power, ShieldCheck, Trash2 } from '@lucide/vue'
+import { Braces, FolderTree, MoreHorizontal, Plus, ShieldCheck } from '@lucide/vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
-import AppDrawer from '@/shared/components/AppDrawer.vue'
+import AppDialog from '@/shared/components/AppDialog.vue'
 import FormSection from '@/shared/components/FormSection.vue'
 import ListPageLayout from '@/shared/components/ListPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -203,7 +205,7 @@ async function toggleStatus(row: Permission) {
   if (row.builtIn) return
   const target = row.status === '启用' ? '停用' : '启用'
   try {
-    await ElMessageBox.confirm(`确认${target}权限“${row.name}”吗？`, '权限状态', { confirmButtonText: '确认', cancelButtonText: '取消' })
+    await ElMessageBox.confirm(`确认${target}权限“${row.name}”吗？`, '权限状态', { customClass: 'admin-density-confirm',  confirmButtonText: '确认', cancelButtonText: '取消' })
     rowActionId.value = row.id
     const updated = await changePlatformPermissionStatus(row.id, target === '启用' ? 'ACTIVE' : 'DISABLED')
     Object.assign(row, mapPlatformPermission(updated))
@@ -219,7 +221,7 @@ async function toggleStatus(row: Permission) {
 async function removePermission(row: Permission) {
   if (row.builtIn) return
   try {
-    await ElMessageBox.confirm(`确认删除权限“${row.name}”吗？删除前需确保没有下级资源且未分配给角色。`, '删除权限', { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
+    await ElMessageBox.confirm(`确认删除权限“${row.name}”吗？删除前需确保没有下级资源且未分配给角色。`, '删除权限', { customClass: 'admin-density-confirm',  confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
     rowActionId.value = row.id
     await deletePlatformPermission(row.id)
     await loadPermissions()
@@ -268,7 +270,7 @@ onMounted(loadPermissions)
 </script>
 
 <template>
-  <AdminPage as="div">
+  <AdminPage class="admin-density iam-density" as="div">
     <ListPageLayout aria-label="平台权限资源管理">
       <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="权限筛选" :fields="queryFields" preference-key="permissions-query" @search="applyFilters" /></template>
       <template v-if="loadError" #state>
@@ -282,14 +284,14 @@ onMounted(loadPermissions)
         <template #toolbar-start><div class="permission-tree-tools"><div class="legend-list"><span><i class="is-menu" />目录 / 菜单</span><span><i class="is-action" />操作</span><span><i class="is-api" />接口预留</span><span class="permission-protection-hint">受保护资源不可编辑、停用或删除</span></div><div class="tree-view-actions"><el-button link type="primary" @click="expandAllRows">展开全部</el-button><el-button link @click="collapseActionRows">收起操作权限</el-button></div></div></template>
         <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate(null)"><Plus :size="16" />新增权限</el-button></template>
         <template #actions="{ row }">
-          <div v-if="permissionActionCount(row as Permission) > 0 || (row as Permission).builtIn" class="table-actions">
-            <el-button v-if="canAddChild(row as Permission)" size="small" plain type="primary" @click="openCreate((row as Permission).id)"><Plus :size="15" />添加下级</el-button>
-            <el-button v-if="canEditRow(row as Permission)" size="small" plain type="primary" :disabled="rowActionId === (row as Permission).id" @click="openEdit(row as Permission)"><Pencil :size="15" />编辑</el-button>
-            <el-button v-if="canChangeStatusRow(row as Permission)" size="small" plain :type="(row as Permission).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Permission).id" @click="toggleStatus(row as Permission)"><Power :size="15" />{{ (row as Permission).status === '启用' ? '停用' : '启用' }}</el-button>
-            <el-button v-if="showDeleteDirect(row as Permission)" size="small" plain type="danger" :disabled="rowActionId === (row as Permission).id" @click="removePermission(row as Permission)"><Trash2 :size="15" />删除</el-button>
+          <div v-if="permissionActionCount(row as Permission) > 0 || (row as Permission).builtIn" class="table-actions density-actions">
+            <el-button class="density-action" v-if="canAddChild(row as Permission)" size="small" data-tone="neutral" @click="openCreate((row as Permission).id)">添加下级</el-button>
+            <el-button class="density-action" v-if="canEditRow(row as Permission)" size="small" data-tone="neutral" :disabled="rowActionId === (row as Permission).id" @click="openEdit(row as Permission)">编辑</el-button>
+            <el-button class="density-action" v-if="canChangeStatusRow(row as Permission)" size="small" :data-tone="(row as Permission).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Permission).id" @click="toggleStatus(row as Permission)">{{ (row as Permission).status === '启用' ? '停用' : '启用' }}</el-button>
+            <el-button class="density-action" v-if="showDeleteDirect(row as Permission)" size="small" data-tone="danger" :disabled="rowActionId === (row as Permission).id" @click="removePermission(row as Permission)">删除</el-button>
             <el-dropdown v-if="showDeleteMore(row as Permission)" trigger="click" @command="(command: string) => command === 'delete' && removePermission(row as Permission)">
-              <el-button size="small" plain :aria-label="moreActionsLabel(row as Permission)" :title="moreActionsLabel(row as Permission)"><MoreHorizontal :size="16" /></el-button>
-              <template #dropdown><el-dropdown-menu><el-dropdown-item command="delete" :disabled="rowActionId === (row as Permission).id" class="danger-menu-item"><Trash2 :size="15" />删除</el-dropdown-item></el-dropdown-menu></template>
+              <el-button data-tone="neutral" class="density-action" size="small" :aria-label="moreActionsLabel(row as Permission)" :title="moreActionsLabel(row as Permission)"><MoreHorizontal aria-hidden="true" :size="16" /></el-button>
+              <template #dropdown><el-dropdown-menu><el-dropdown-item command="delete" :disabled="rowActionId === (row as Permission).id" class="danger-menu-item">删除</el-dropdown-item></el-dropdown-menu></template>
             </el-dropdown>
           </div>
           <span v-else class="secondary-text">仅查看</span>
@@ -303,9 +305,9 @@ onMounted(loadPermissions)
       </section>
     </ListPageLayout>
 
-    <AppDrawer v-model="editorOpen" :title="form.id ? '编辑权限资源' : '新增权限资源'" size="600px" class="business-drawer editor-drawer" :modal="false" :confirm-loading="saving" :confirm-text="form.id ? '保存修改' : '保存权限'" :show-confirm="form.id ? canEdit : canCreate" @confirm="savePermission">
-      <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="drawer-form">
-        <FormSection title="资源定义" description="定义权限名称、编码、类型和层级关系。">
+    <AppDialog v-model="editorOpen" :title="form.id ? '编辑权限资源' : '新增权限资源'" width="min(720px, calc(100vw - 28px))" class="permission-editor-dialog admin-density-dialog iam-density" :confirm-loading="saving" :confirm-text="form.id ? '保存修改' : '保存权限'" :show-confirm="form.id ? canEdit : canCreate" @confirm="savePermission">
+      <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="density-form">
+        <FormSection class="density-form-section" title="资源定义" description="定义权限名称、编码、类型和层级关系。">
           <div class="form-grid two-cols">
             <el-form-item label="权限名称" prop="name" required><el-input v-model="form.name" placeholder="用户可理解的中文名称" maxlength="64" /></el-form-item>
             <el-form-item label="权限编码" prop="code" required><el-input v-model="form.code" :disabled="Boolean(form.id)" placeholder="如：platform:customer:list" maxlength="128" /></el-form-item>
@@ -318,17 +320,17 @@ onMounted(loadPermissions)
         </FormSection>
         <div class="form-callout"><Braces :size="18" /><div><strong>权限编码约定</strong><p>使用稳定的“业务域:资源:动作”编码；资源类型与后端 MENU、PAGE、BUTTON、API 契约一致。</p></div></div>
       </el-form>
-    </AppDrawer>
+    </AppDialog>
   </AdminPage>
 </template>
 
 <style scoped>
-.permission-tree-tools { display: flex; align-items: center; gap: 16px; }
+.permission-tree-tools { display: flex; align-items: center; gap: var(--admin-space-6); }
 .permission-protection-hint { color: var(--cc-muted); }
-.tree-view-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
+.tree-view-actions { display: flex; align-items: center; gap: var(--admin-space-1); white-space: nowrap; }
 .tree-view-actions .el-button + .el-button { margin-left: 0; }
 .permission-name > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
-.permission-name small { color: var(--cc-muted); font-size: 11px; line-height: 1.35; }
+.permission-name small { color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.35; }
 :deep(.danger-menu-item:not(.is-disabled)) { color: var(--el-color-danger); }
 
 @media (max-width: 720px) {