优化

src/modules/iam/pages/PermissionsView.vue

@@ -5,6 +5,12 @@ import { Braces, FolderTree, Pencil, Plus, ShieldCheck, Trash2 } from '@lucide/v
 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 FormSection from '@/shared/components/FormSection.vue'
+import ListPageLayout from '@/shared/components/ListPageLayout.vue'
+import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import PageToolbar from '@/shared/components/PageToolbar.vue'
 import {
   changePlatformPermissionStatus,
   createPlatformPermission,
@@ -230,11 +236,17 @@ onMounted(loadPermissions)
 </script>
 
 <template>
-  <div class="business-page">
-    <el-alert v-if="loadError" type="error" :closable="false" show-icon role="alert"><template #title><div class="api-error-alert-title"><span>{{ loadError.message }}</span><ApiErrorMeta :details="loadError" /></div><el-button link type="danger" @click="loadPermissions">重新加载</el-button></template></el-alert>
-    <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="权限筛选" :fields="queryFields" preference-key="permissions-query" @search="applyFilters" />
+  <AdminPage as="div">
+    <PageToolbar title="权限管理" description="维护平台菜单与按钮权限资源。" />
+    <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>
+        <LoadErrorState title="权限资源暂时无法加载" :message="loadError.message" :loading="loading" @retry="loadPermissions">
+          <template #details><ApiErrorMeta :details="loadError" /></template>
+        </LoadErrorState>
+      </template>
 
-    <section class="surface-panel table-panel">
+      <section class="surface-panel table-panel">
       <DataTable :key="tableRenderKey" v-model:page="page" v-model:page-size="pageSize" :data="pagedTreeRows" :columns="permissionColumns" preference-key="permissions-table" :loading="loading" :total="treeRows.length" row-key="id" :expand-row-keys="expandedRowKeys" :tree-props="{ children: 'children' }" empty-text="没有符合条件的权限资源">
         <template #toolbar-start><div><h2>权限资源树 <span class="secondary-text">共 {{ permissions.length }} 项</span></h2><p>默认展示目录与菜单，展开菜单后查看按钮权限；接口权限将在服务端契约确定后补充。</p></div></template>
         <template #toolbar-actions><div class="permission-tree-heading-actions"><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></div><div class="tree-view-actions"><el-button link type="primary" @click="expandAllRows">展开全部</el-button><el-button link @click="collapseActionRows">收起操作权限</el-button></div></div><el-button v-if="canCreate" type="primary" @click="openCreate(null)"><Plus :size="16" />新增权限</el-button></div></template>
@@ -244,12 +256,12 @@ onMounted(loadPermissions)
         <template #endpoint="{ row }"><div class="endpoint-cell"><span v-if="(row as Permission).method !== '-'">{{ (row as Permission).method }}</span><code>{{ (row as Permission).path || '-' }}</code></div></template>
         <template #status="{ row }"><StatusBadge :status="(row as Permission).status" /></template>
       </DataTable>
-    </section>
+      </section>
+    </ListPageLayout>
 
-    <el-drawer v-model="editorOpen" :title="form.id ? '编辑权限资源' : '新增权限资源'" size="600px" class="business-drawer editor-drawer" :modal="false" :close-on-click-modal="false">
+    <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">
-        <div class="form-section">
-          <h3>资源定义</h3>
+        <FormSection 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>
@@ -258,12 +270,11 @@ onMounted(loadPermissions)
             <el-form-item v-if="form.type === '菜单'" label="路由路径" prop="path" required><el-input v-model="form.path" placeholder="如：/customers" /></el-form-item>
             <el-form-item label="显示排序" prop="sort" required><el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" /></el-form-item>
           </div>
-        </div>
+        </FormSection>
         <div class="form-callout"><Braces :size="18" /><div><strong>权限编码约定</strong><p>使用稳定的“业务域:资源:动作”编码；一期真实资源只创建菜单和按钮，接口鉴权由服务端实现。</p></div></div>
       </el-form>
-      <template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button v-if="form.id ? canEdit : canCreate" type="primary" :loading="saving" @click="savePermission">{{ form.id ? '保存修改' : '保存权限' }}</el-button></div></template>
-    </el-drawer>
-  </div>
+    </AppDrawer>
+  </AdminPage>
 </template>
 
 <style scoped>