feat: 统一管理端弹窗与内容区交互样式

- 收敛管理端公共 Modal 链路，新增表单弹窗与普通内容弹窗包装\n- 迁移 Bot、知识库、插件、工作流、资源、MCP、数据中枢与系统管理页面级弹窗\n- 统一内容区工具栏、列表容器、导航与顶部按钮的视觉密度和交互节奏

easyflow-ui-admin/app/src/views/system/sysRole/SysRoleList.vue

@@ -17,6 +17,7 @@ import {
 
 import { api } from '#/api/request';
 import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
+import ListPageShell from '#/components/page/ListPageShell.vue';
 import PageData from '#/components/page/PageData.vue';
 import { $t } from '#/locales';
 import { useDictStore } from '#/store';
@@ -89,13 +90,14 @@ function remove(row: any) {
 <template>
   <div class="flex h-full flex-col gap-6 p-6">
     <SysRoleModal ref="saveDialog" @reload="reset" />
-    <HeaderSearch
-      :buttons="headerButtons"
-      @search="handleSearch"
-      @button-click="showDialog({ menuCheckStrictly: true })"
-    />
-
-    <div class="bg-background border-border flex-1 rounded-lg border p-5">
+    <ListPageShell>
+      <template #filters>
+        <HeaderSearch
+          :buttons="headerButtons"
+          @search="handleSearch"
+          @button-click="showDialog({ menuCheckStrictly: true })"
+        />
+      </template>
       <PageData
         ref="pageDataRef"
         page-url="/api/v1/sysRole/page"
@@ -160,7 +162,7 @@ function remove(row: any) {
           </ElTable>
         </template>
       </PageData>
-    </div>
+    </ListPageShell>
   </div>
 </template>
 

easyflow-ui-admin/app/src/views/system/sysRole/SysRoleModal.vue

@@ -3,15 +3,9 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, ref } from 'vue';
 
-import {
-  ElButton,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-  ElSwitch,
-} from 'element-plus';
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
+import { ElForm, ElFormItem, ElInput, ElMessage, ElSwitch } from 'element-plus';
 
 import { api } from '#/api/request';
 import DictSelect from '#/components/dict/DictSelect.vue';
@@ -95,19 +89,23 @@ function getDeptIds(roleId: any) {
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
     :title="isAdd ? $t('button.add') : $t('button.edit')"
     :before-close="closeDialog"
-    :close-on-click-modal="false"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    width="xl"
+    @confirm="save"
   >
     <ElForm
-      label-width="120px"
       ref="saveForm"
       :model="entity"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem prop="roleName" :label="$t('sysRole.roleName')">
         <ElInput v-model.trim="entity.roleName" />
@@ -157,20 +155,7 @@ function getDeptIds(roleId: any) {
         </div>
       </ElFormItem>
     </ElForm>
-    <template #footer>
-      <ElButton @click="closeDialog">
-        {{ $t('button.cancel') }}
-      </ElButton>
-      <ElButton
-        type="primary"
-        @click="save"
-        :loading="btnLoading"
-        :disabled="btnLoading"
-      >
-        {{ $t('button.save') }}
-      </ElButton>
-    </template>
-  </ElDialog>
+  </EasyFlowFormModal>
 </template>
 
 <style scoped></style>