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

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

easyflow-ui-admin/app/src/views/datacenter/BatchImportModal.vue

@@ -3,15 +3,10 @@ import type { UploadFile } from 'element-plus';
 
 import { onMounted, ref } from 'vue';
 
+import { EasyFlowPanelModal } from '@easyflow/common-ui';
 import { downloadFileFromBlob } from '@easyflow/utils';
 
-import {
-  ElButton,
-  ElDialog,
-  ElMessage,
-  ElMessageBox,
-  ElUpload,
-} from 'element-plus';
+import { ElButton, ElMessage, ElMessageBox, ElUpload } from 'element-plus';
 
 import { api } from '#/api/request';
 import uploadIcon from '#/assets/datacenter/upload.png';
@@ -99,12 +94,13 @@ function handleUpload() {
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowPanelModal
+    v-model:open="dialogVisible"
+    :closable="!btnLoading"
     :title="props.title"
     :before-close="closeDialog"
-    :close-on-click-modal="false"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
   >
     <ElUpload
       :file-list="fileList"
@@ -148,7 +144,7 @@ function handleUpload() {
         </ElButton>
       </div>
     </template>
-  </ElDialog>
+  </EasyFlowPanelModal>
 </template>
 
 <style scoped>

easyflow-ui-admin/app/src/views/datacenter/DatacenterTableList.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 { router } from '#/router';
@@ -95,13 +96,14 @@ function toDetailPage(row: any) {
 <template>
   <div class="flex h-full flex-col gap-6 p-6">
     <DatacenterTableModal 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/datacenterTable/page"
@@ -168,7 +170,7 @@ function toDetailPage(row: any) {
           </ElTable>
         </template>
       </PageData>
-    </div>
+    </ListPageShell>
   </div>
 </template>
 

easyflow-ui-admin/app/src/views/datacenter/DatacenterTableModal.vue

@@ -3,10 +3,11 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, ref, watch } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
 import { Plus } from '@element-plus/icons-vue';
 import {
   ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElIcon,
@@ -184,20 +185,24 @@ function getYesOrNo() {
 </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"
     width="800px"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    @confirm="save"
   >
     <ElForm
-      label-width="100px"
       ref="saveForm"
       :model="entity"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem prop="tableName" :label="$t('datacenterTable.tableName')">
         <ElInput :disabled="!isAdd" v-model.trim="entity.tableName" />
@@ -205,7 +210,7 @@ function getYesOrNo() {
       <ElFormItem prop="tableDesc" :label="$t('datacenterTable.tableDesc')">
         <ElInput v-model.trim="entity.tableDesc" />
       </ElFormItem>
-      <ElFormItem prop="fields" label-width="0">
+      <ElFormItem prop="fields" :label="$t('datacenterTable.fields')">
         <div v-loading="loadFields" class="w-full">
           <ElTable :data="fieldsData">
             <ElTableColumn :label="$t('datacenterTable.fieldName')">
@@ -261,20 +266,7 @@ function getYesOrNo() {
         </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>

easyflow-ui-admin/app/src/views/datacenter/RecordModal.vue

@@ -3,10 +3,10 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
 import {
-  ElButton,
   ElDatePicker,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElInput,
@@ -80,20 +80,24 @@ function closeDialog() {
 </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"
     width="800px"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    @confirm="save"
   >
     <ElForm
-      label-width="100px"
       ref="saveForm"
       :model="entity"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem
         v-for="item in props.formItems"
@@ -135,20 +139,7 @@ function closeDialog() {
         />
       </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>