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

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

easyflow-ui-admin/app/src/views/system/sysJob/SysJobList.vue

@@ -24,6 +24,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 { router } from '#/router';
@@ -149,13 +150,14 @@ function toLogPage(row: any) {
 <template>
   <div class="flex h-full flex-col gap-6 p-6">
     <SysJobModal ref="saveDialog" @reload="reset" />
-    <HeaderSearch
-      :buttons="headerButtons"
-      @search="handleSearch"
-      @button-click="showDialog({})"
-    />
-
-    <div class="bg-background border-border flex-1 rounded-lg border p-5">
+    <ListPageShell>
+      <template #filters>
+        <HeaderSearch
+          :buttons="headerButtons"
+          @search="handleSearch"
+          @button-click="showDialog({})"
+        />
+      </template>
       <PageData
         ref="pageDataRef"
         page-url="/api/v1/sysJob/page"
@@ -271,7 +273,7 @@ function toLogPage(row: any) {
           </ElTable>
         </template>
       </PageData>
-    </div>
+    </ListPageShell>
   </div>
 </template>
 

easyflow-ui-admin/app/src/views/system/sysJob/SysJobModal.vue

@@ -3,15 +3,9 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, ref } from 'vue';
 
-import {
-  ElAlert,
-  ElButton,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-} from 'element-plus';
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
+import { ElAlert, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus';
 
 import { api } from '#/api/request';
 import CronPicker from '#/components/cron/CronPicker.vue';
@@ -139,20 +133,24 @@ const str = '"param"';
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
+    :closable="!btnLoading"
     :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"
+    @confirm="save"
   >
     <ElForm
       v-loading="paramsLoading"
-      label-width="120px"
       ref="saveForm"
       :model="entity"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem prop="jobName" :label="$t('sysJob.jobName')">
         <ElInput v-model.trim="entity.jobName" />
@@ -225,20 +223,7 @@ const str = '"param"';
         <ElInput v-model.trim="entity.remark" />
       </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>