From 2b3e6da35fdbca39832960f12105ee84c986ff46 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Thu, 27 Aug 2026 10:39:13 +0800
Subject: [PATCH] =?UTF-8?q?chore(system-resource-page):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=B3=BB=E7=BB=9F=E8=B5=84=E6=BA=90=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84=E6=A8=A1=E6=9D=BF=E4=BB=A3=E7=A0=81=E4=B8=8E=E6=96=87?=
 =?UTF-8?q?=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

格式化页面内所有组件的代码排版，统一换行与缩进提升可读性；移除页面顶部介绍中的「按 RuoYi 风格」文案；调整菜单列表的排序列展示为静态显示排序值
---
 .../src/pages/SystemResourcePage.vue          | 156 +++++++++++++-----
 1 file changed, 114 insertions(+), 42 deletions(-)

diff --git a/WonderQ-Admin-UI-Vue/src/pages/SystemResourcePage.vue b/WonderQ-Admin-UI-Vue/src/pages/SystemResourcePage.vue
index 766ac62..19e44c3 100644
--- a/WonderQ-Admin-UI-Vue/src/pages/SystemResourcePage.vue
+++ b/WonderQ-Admin-UI-Vue/src/pages/SystemResourcePage.vue
@@ -359,39 +359,64 @@ onMounted(loadResource);
 <template>
   <div class="page-stack system-resource-page">
     <div class="page-intro">
-      <div><p class="eyebrow">SYSTEM / RBAC</p><h2>{{ title }}</h2><p>按 RuoYi 风格维护系统{{ resourceLabel }}、权限和数据范围。</p></div>
+      <div>
+        <p class="eyebrow">SYSTEM / RBAC</p>
+        <h2>{{ title }}</h2>
+        <p>维护系统{{ resourceLabel }}、权限和数据范围。</p>
+      </div>
     </div>
 
     <el-card v-if="resource === 'menus'" shadow="never" class="panel-card system-filter-card">
       <el-form inline @submit.prevent="searchResource">
-        <el-form-item label="菜单名称"><el-input v-model="menuQuery.name" clearable placeholder="请输入菜单名称、路径或权限" /></el-form-item>
-        <el-form-item label="菜单类型"><el-select v-model="menuQuery.type" clearable placeholder="全部类型" style="width: 150px"><el-option label="全部类型" value="" /><el-option label="目录" value="directory" /><el-option label="页面" value="page" /><el-option label="按钮" value="button" /></el-select></el-form-item>
-        <el-form-item label="状态"><el-select v-model="menuQuery.status" clearable placeholder="全部状态" style="width: 150px"><el-option label="全部状态" value="" /><el-option label="正常" value="enabled" /><el-option label="停用" value="disabled" /></el-select></el-form-item>
-        <el-form-item><el-button type="primary" @click="searchResource">搜索</el-button><el-button @click="resetMenuQuery">重置</el-button></el-form-item>
+        <el-form-item label="菜单名称"><el-input v-model="menuQuery.name" clearable
+            placeholder="请输入菜单名称、路径或权限" /></el-form-item>
+        <el-form-item label="菜单类型"><el-select v-model="menuQuery.type" clearable placeholder="全部类型"
+            style="width: 150px"><el-option label="全部类型" value="" /><el-option label="目录" value="directory" /><el-option
+              label="页面" value="page" /><el-option label="按钮" value="button" /></el-select></el-form-item>
+        <el-form-item label="状态"><el-select v-model="menuQuery.status" clearable placeholder="全部状态"
+            style="width: 150px"><el-option label="全部状态" value="" /><el-option label="正常" value="enabled" /><el-option
+              label="停用" value="disabled" /></el-select></el-form-item>
+        <el-form-item><el-button type="primary" @click="searchResource">搜索</el-button><el-button
+            @click="resetMenuQuery">重置</el-button></el-form-item>
       </el-form>
     </el-card>
 
     <el-card v-else shadow="never" class="panel-card system-filter-card">
       <el-form inline @submit.prevent="searchResource">
         <template v-if="resource === 'users'">
-          <el-form-item label="用户名称"><el-input v-model="userQuery.keyword" clearable placeholder="请输入用户名称、邮箱" /></el-form-item>
-          <el-form-item label="角色"><el-select v-model="userQuery.roleId" clearable filterable placeholder="全部角色" style="width: 170px"><el-option label="全部角色" value="" /><el-option v-for="role in roles" :key="role.id" :label="role.name" :value="role.id" /></el-select></el-form-item>
-          <el-form-item label="部门"><el-select v-model="userQuery.deptId" clearable filterable placeholder="全部部门" style="width: 170px"><el-option label="全部部门" value="" /><el-option v-for="dept in depts" :key="dept.id" :label="dept.name" :value="dept.id" /></el-select></el-form-item>
-          <el-form-item label="状态"><el-select v-model="userQuery.status" clearable placeholder="全部状态" style="width: 140px"><el-option label="全部状态" value="" /><el-option label="启用" value="enabled" /><el-option label="停用" value="disabled" /></el-select></el-form-item>
+          <el-form-item label="用户名称"><el-input v-model="userQuery.keyword" clearable
+              placeholder="请输入用户名称、邮箱" /></el-form-item>
+          <el-form-item label="角色"><el-select v-model="userQuery.roleId" clearable filterable placeholder="全部角色"
+              style="width: 170px"><el-option label="全部角色" value="" /><el-option v-for="role in roles" :key="role.id"
+                :label="role.name" :value="role.id" /></el-select></el-form-item>
+          <el-form-item label="部门"><el-select v-model="userQuery.deptId" clearable filterable placeholder="全部部门"
+              style="width: 170px"><el-option label="全部部门" value="" /><el-option v-for="dept in depts" :key="dept.id"
+                :label="dept.name" :value="dept.id" /></el-select></el-form-item>
+          <el-form-item label="状态"><el-select v-model="userQuery.status" clearable placeholder="全部状态"
+              style="width: 140px"><el-option label="全部状态" value="" /><el-option label="启用" value="enabled" /><el-option
+                label="停用" value="disabled" /></el-select></el-form-item>
         </template>
         <template v-else-if="resource === 'roles'">
-          <el-form-item label="角色名称"><el-input v-model="roleQuery.keyword" clearable placeholder="请输入角色名称或编码" /></el-form-item>
-          <el-form-item label="状态"><el-select v-model="roleQuery.status" clearable placeholder="全部状态" style="width: 150px"><el-option label="全部状态" value="" /><el-option label="启用" value="enabled" /><el-option label="停用" value="disabled" /></el-select></el-form-item>
+          <el-form-item label="角色名称"><el-input v-model="roleQuery.keyword" clearable
+              placeholder="请输入角色名称或编码" /></el-form-item>
+          <el-form-item label="状态"><el-select v-model="roleQuery.status" clearable placeholder="全部状态"
+              style="width: 150px"><el-option label="全部状态" value="" /><el-option label="启用" value="enabled" /><el-option
+                label="停用" value="disabled" /></el-select></el-form-item>
         </template>
         <template v-else>
-          <el-form-item label="部门名称"><el-input v-model="deptQuery.keyword" clearable placeholder="请输入部门名称" /></el-form-item>
-          <el-form-item label="状态"><el-select v-model="deptQuery.status" clearable placeholder="全部状态" style="width: 150px"><el-option label="全部状态" value="" /><el-option label="启用" value="enabled" /><el-option label="停用" value="disabled" /></el-select></el-form-item>
+          <el-form-item label="部门名称"><el-input v-model="deptQuery.keyword" clearable
+              placeholder="请输入部门名称" /></el-form-item>
+          <el-form-item label="状态"><el-select v-model="deptQuery.status" clearable placeholder="全部状态"
+              style="width: 150px"><el-option label="全部状态" value="" /><el-option label="启用" value="enabled" /><el-option
+                label="停用" value="disabled" /></el-select></el-form-item>
         </template>
-        <el-form-item><el-button type="primary" @click="searchResource">搜索</el-button><el-button @click="resetResourceQuery">重置</el-button></el-form-item>
+        <el-form-item><el-button type="primary" @click="searchResource">搜索</el-button><el-button
+            @click="resetResourceQuery">重置</el-button></el-form-item>
       </el-form>
     </el-card>
 
-    <el-alert v-if="error" :title="error" type="error" show-icon :closable="false"><template #default><el-button link type="primary" @click="loadResource">重试</el-button></template></el-alert>
+    <el-alert v-if="error" :title="error" type="error" show-icon :closable="false"><template #default><el-button link
+          type="primary" @click="loadResource">重试</el-button></template></el-alert>
     <el-card shadow="never" class="panel-card system-list-card">
       <el-skeleton v-if="loading" :rows="6" animated />
       <el-empty v-else-if="!visibleCount" description="暂无数据" />
@@ -399,54 +424,101 @@ onMounted(loadResource);
         <div class="system-table-heading">
           <div><strong>{{ title }}列表</strong><span>共 {{ visibleCount }} 条记录</span></div>
           <div class="system-action-bar">
-            <el-button v-permission="createPermission" type="primary" plain @click="openCreate()">新增{{ resourceLabel }}</el-button>
-            <el-button v-if="resource === 'menus'" v-permission="'system:menu:sort'" type="warning" plain :loading="saving" @click="saveMenuSort">保存排序</el-button>
-            <el-button v-if="resource === 'menus'" plain @click="toggleMenuTree">{{ menuExpanded ? '折叠' : '展开' }}</el-button>
-            <el-button v-if="resource === 'depts'" plain @click="toggleDeptTree">{{ deptExpanded ? '折叠' : '展开' }}</el-button>
+            <el-button v-permission="createPermission" type="primary" plain @click="openCreate()">新增{{ resourceLabel
+            }}</el-button>
+            <el-button v-if="resource === 'menus'" v-permission="'system:menu:sort'" type="warning" plain
+              :loading="saving" @click="saveMenuSort">保存排序</el-button>
+            <el-button v-if="resource === 'menus'" plain @click="toggleMenuTree">{{ menuExpanded ? '折叠' : '展开'
+            }}</el-button>
+            <el-button v-if="resource === 'depts'" plain @click="toggleDeptTree">{{ deptExpanded ? '折叠' : '展开'
+            }}</el-button>
           </div>
         </div>
 
-        <el-table v-if="resource === 'menus'" :key="menuTableKey" :data="filteredMenuTree" row-key="id" :tree-props="{ children: 'children' }" :default-expand-all="menuExpanded" stripe>
-          <el-table-column label="菜单名称" min-width="220"><template #default="{ row }"><div class="system-menu-name"><LayoutIcon :name="getMenuIconName(row)" :size="16" /><span>{{ row.name }}</span></div></template></el-table-column>
-          <el-table-column label="类型" width="90"><template #default="{ row }"><el-tag :type="menuTypeTag(row.type)" effect="plain">{{ menuTypeLabel(row.type) }}</el-tag></template></el-table-column>
-          <el-table-column label="排序" width="120"><template #default="{ row }"><el-input-number :model-value="row.sortOrder" :min="0" :step="1" controls-position="right" @update:model-value="updateMenuSort(row.id, $event)" /></template></el-table-column>
+        <el-table v-if="resource === 'menus'" :key="menuTableKey" :data="filteredMenuTree" row-key="id"
+          :tree-props="{ children: 'children' }" :default-expand-all="menuExpanded" stripe>
+          <el-table-column label="菜单名称" min-width="220"><template #default="{ row }">
+              <div class="system-menu-name">
+                <LayoutIcon :name="getMenuIconName(row)" :size="16" /><span>{{ row.name }}</span>
+              </div>
+            </template></el-table-column>
+          <el-table-column label="类型" width="90"><template #default="{ row }"><el-tag :type="menuTypeTag(row.type)"
+                effect="plain">{{ menuTypeLabel(row.type) }}</el-tag></template></el-table-column>
+          <el-table-column label="排序" width="120"><template #default="{ row }">{{ row.sortOrder
+          }}</template></el-table-column>
           <el-table-column prop="path" label="路由路径" min-width="150" show-overflow-tooltip />
           <el-table-column prop="permission" label="权限标识" min-width="170" show-overflow-tooltip />
           <el-table-column prop="component" label="组件路径" min-width="150" show-overflow-tooltip />
-          <el-table-column label="状态" width="90"><template #default="{ row }"><el-tag :type="row.isActive ? 'success' : 'info'" effect="plain">{{ row.isActive ? '启用' : '停用' }}</el-tag></template></el-table-column>
-          <el-table-column label="操作" width="230" fixed="right"><template #default="{ row }"><el-button v-permission="updatePermission" link type="primary" @click="openEdit(row)">修改</el-button><el-button v-if="row.type !== 'button'" v-permission="createPermission" link type="primary" @click="openCreate(row.id)">新增</el-button><el-button v-permission="deletePermission" link type="danger" :loading="deletingId === row.id" @click="removeItem(row)">删除</el-button></template></el-table-column>
+          <el-table-column label="状态" width="90"><template #default="{ row }"><el-tag
+                :type="row.isActive ? 'success' : 'info'" effect="plain">{{ row.isActive ? '启用' : '停用'
+                }}</el-tag></template></el-table-column>
+          <el-table-column label="操作" width="230" fixed="right"><template #default="{ row }"><el-button
+                v-permission="updatePermission" link type="primary" @click="openEdit(row)">修改</el-button><el-button
+                v-if="row.type !== 'button'" v-permission="createPermission" link type="primary"
+                @click="openCreate(row.id)">新增</el-button><el-button v-permission="deletePermission" link type="danger"
+                :loading="deletingId === row.id" @click="removeItem(row)">删除</el-button></template></el-table-column>
         </el-table>
 
         <el-table v-else-if="resource === 'users'" :key="resourceTableKey" :data="filteredUsers" stripe>
           <el-table-column prop="name" label="用户名称" min-width="145" />
           <el-table-column prop="email" label="登录邮箱" min-width="215" show-overflow-tooltip />
-          <el-table-column label="角色" min-width="150" show-overflow-tooltip><template #default="{ row }">{{ userRoleLabel(row) }}</template></el-table-column>
-          <el-table-column label="部门" min-width="150" show-overflow-tooltip><template #default="{ row }">{{ userDeptLabel(row) }}</template></el-table-column>
-          <el-table-column label="状态" width="90"><template #default="{ row }"><el-tag :type="row.isActive ? 'success' : 'info'" effect="plain">{{ row.isActive ? "启用" : "停用" }}</el-tag></template></el-table-column>
-          <el-table-column label="更新时间" min-width="165"><template #default="{ row }">{{ formatDate(row.updatedAt) }}</template></el-table-column>
-          <el-table-column label="操作" fixed="right" width="220"><template #default="{ row }"><el-button v-permission="updatePermission" link type="primary" @click="openEdit(row)">编辑</el-button><el-button v-permission="updatePermission" link type="primary" @click="resetPassword(row)">重置密码</el-button><el-button v-permission="deletePermission" link type="danger" :loading="deletingId === row.id" @click="removeItem(row)">删除</el-button></template></el-table-column>
+          <el-table-column label="角色" min-width="150" show-overflow-tooltip><template #default="{ row }">{{
+            userRoleLabel(row) }}</template></el-table-column>
+          <el-table-column label="部门" min-width="150" show-overflow-tooltip><template #default="{ row }">{{
+            userDeptLabel(row) }}</template></el-table-column>
+          <el-table-column label="状态" width="90"><template #default="{ row }"><el-tag
+                :type="row.isActive ? 'success' : 'info'" effect="plain">{{ row.isActive ? "启用" : "停用"
+                }}</el-tag></template></el-table-column>
+          <el-table-column label="更新时间" min-width="165"><template #default="{ row }">{{ formatDate(row.updatedAt)
+          }}</template></el-table-column>
+          <el-table-column label="操作" fixed="right" width="220"><template #default="{ row }"><el-button
+                v-permission="updatePermission" link type="primary" @click="openEdit(row)">编辑</el-button><el-button
+                v-permission="updatePermission" link type="primary"
+                @click="resetPassword(row)">重置密码</el-button><el-button v-permission="deletePermission" link
+                type="danger" :loading="deletingId === row.id"
+                @click="removeItem(row)">删除</el-button></template></el-table-column>
         </el-table>
 
         <el-table v-else-if="resource === 'roles'" :key="resourceTableKey" :data="filteredRoles" stripe>
           <el-table-column prop="name" label="角色名称" min-width="150" />
           <el-table-column prop="code" label="角色编码" min-width="170" />
-          <el-table-column label="数据范围" min-width="145"><template #default="{ row }">{{ dataScopeLabel(row.dataScope) }}</template></el-table-column>
-          <el-table-column label="菜单权限" width="100"><template #default="{ row }">{{ row.menuIds.length }} 项</template></el-table-column>
-          <el-table-column label="状态" width="90"><template #default="{ row }"><el-tag :type="row.isActive ? 'success' : 'info'" effect="plain">{{ row.isActive ? "启用" : "停用" }}</el-tag></template></el-table-column>
-          <el-table-column label="更新时间" min-width="165"><template #default="{ row }">{{ formatDate(row.updatedAt) }}</template></el-table-column>
-          <el-table-column label="操作" fixed="right" width="150"><template #default="{ row }"><el-button v-permission="updatePermission" link type="primary" @click="openEdit(row)">编辑</el-button><el-button v-permission="deletePermission" link type="danger" :loading="deletingId === row.id" @click="removeItem(row)">删除</el-button></template></el-table-column>
+          <el-table-column label="数据范围" min-width="145"><template #default="{ row }">{{ dataScopeLabel(row.dataScope)
+          }}</template></el-table-column>
+          <el-table-column label="菜单权限" width="100"><template #default="{ row }">{{ row.menuIds.length }}
+              项</template></el-table-column>
+          <el-table-column label="状态" width="90"><template #default="{ row }"><el-tag
+                :type="row.isActive ? 'success' : 'info'" effect="plain">{{ row.isActive ? "启用" : "停用"
+                }}</el-tag></template></el-table-column>
+          <el-table-column label="更新时间" min-width="165"><template #default="{ row }">{{ formatDate(row.updatedAt)
+          }}</template></el-table-column>
+          <el-table-column label="操作" fixed="right" width="150"><template #default="{ row }"><el-button
+                v-permission="updatePermission" link type="primary" @click="openEdit(row)">编辑</el-button><el-button
+                v-permission="deletePermission" link type="danger" :loading="deletingId === row.id"
+                @click="removeItem(row)">删除</el-button></template></el-table-column>
         </el-table>
 
-        <el-table v-else :key="resourceTableKey" :data="filteredDeptTree" row-key="id" :tree-props="{ children: 'children' }" :default-expand-all="deptExpanded" stripe>
-          <el-table-column label="部门名称" min-width="220"><template #default="{ row }"><span class="system-tree-label">{{ row.name }}</span></template></el-table-column>
-          <el-table-column label="父级部门" min-width="160"><template #default="{ row }">{{ parentDeptLabel(row.parentId) }}</template></el-table-column>
+        <el-table v-else :key="resourceTableKey" :data="filteredDeptTree" row-key="id"
+          :tree-props="{ children: 'children' }" :default-expand-all="deptExpanded" stripe>
+          <el-table-column label="部门名称" min-width="220"><template #default="{ row }"><span class="system-tree-label">{{
+            row.name }}</span></template></el-table-column>
+          <el-table-column label="父级部门" min-width="160"><template #default="{ row }">{{ parentDeptLabel(row.parentId)
+          }}</template></el-table-column>
           <el-table-column prop="sortOrder" label="排序" width="100" />
-          <el-table-column label="状态" width="90"><template #default="{ row }"><el-tag :type="row.isActive ? 'success' : 'info'" effect="plain">{{ row.isActive ? "启用" : "停用" }}</el-tag></template></el-table-column>
-          <el-table-column label="更新时间" min-width="165"><template #default="{ row }">{{ formatDate(row.updatedAt) }}</template></el-table-column>
-          <el-table-column label="操作" fixed="right" width="220"><template #default="{ row }"><el-button v-permission="createPermission" link type="primary" @click="openCreate(row.id)">新增下级</el-button><el-button v-permission="updatePermission" link type="primary" @click="openEdit(row)">编辑</el-button><el-button v-permission="deletePermission" link type="danger" :loading="deletingId === row.id" @click="removeItem(row)">删除</el-button></template></el-table-column>
+          <el-table-column label="状态" width="90"><template #default="{ row }"><el-tag
+                :type="row.isActive ? 'success' : 'info'" effect="plain">{{ row.isActive ? "启用" : "停用"
+                }}</el-tag></template></el-table-column>
+          <el-table-column label="更新时间" min-width="165"><template #default="{ row }">{{ formatDate(row.updatedAt)
+          }}</template></el-table-column>
+          <el-table-column label="操作" fixed="right" width="220"><template #default="{ row }"><el-button
+                v-permission="createPermission" link type="primary"
+                @click="openCreate(row.id)">新增下级</el-button><el-button v-permission="updatePermission" link
+                type="primary" @click="openEdit(row)">编辑</el-button><el-button v-permission="deletePermission" link
+                type="danger" :loading="deletingId === row.id"
+                @click="removeItem(row)">删除</el-button></template></el-table-column>
         </el-table>
       </template>
     </el-card>
-    <SystemResourceEditor v-model="editorOpen" :resource="resource" :mode="editorMode" :item="editorItem" :initial-parent-id="initialParentId" :roles="roles" :menus="menus" :depts="depts" @save="save" />
+    <SystemResourceEditor v-model="editorOpen" :resource="resource" :mode="editorMode" :item="editorItem"
+      :initial-parent-id="initialParentId" :roles="roles" :menus="menus" :depts="depts" @save="save" />
   </div>
 </template>