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

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

easyflow-ui-admin/app/src/views/ai/resource/ChooseResource.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
-import { ElButton, ElDialog } from 'element-plus';
+import { EasyFlowPanelModal } from '@easyflow/common-ui';
+
+import { ElButton } from 'element-plus';
 
 import PageData from '#/components/page/PageData.vue';
 import { $t } from '#/locales';
@@ -40,14 +42,11 @@ watch(
 
 <template>
   <div>
-    <ElDialog
-      v-model="dialogVisible"
-      draggable
+    <EasyFlowPanelModal
+      v-model:open="dialogVisible"
       :title="$t('aiResource.choose')"
       :before-close="closeDialog"
-      :close-on-click-modal="false"
       width="80%"
-      destroy-on-close
     >
       <PageData
         ref="pageDataRef"
@@ -67,7 +66,7 @@ watch(
           {{ $t('button.confirm') }}
         </ElButton>
       </template>
-    </ElDialog>
+    </EasyFlowPanelModal>
     <ElButton @click="openDialog()">
       {{ $t('button.choose') }}
     </ElButton>

easyflow-ui-admin/app/src/views/ai/resource/PreviewModal.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import { ElDialog, ElImage } from 'element-plus';
+import { EasyFlowPanelModal } from '@easyflow/common-ui';
+
+import { ElImage } from 'element-plus';
 
 defineExpose({
   openDialog,
@@ -18,13 +20,12 @@ function closeDialog() {
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowPanelModal
+    v-model:open="dialogVisible"
     :title="$t('message.preview')"
     :before-close="closeDialog"
-    :close-on-click-modal="false"
-    destroy-on-close
+    width="md"
+    :show-footer="false"
   >
     <div class="flex justify-center">
       <ElImage
@@ -41,7 +42,7 @@ function closeDialog() {
         {{ $t('message.notAudio') }}
       </audio>
     </div>
-  </ElDialog>
+  </EasyFlowPanelModal>
 </template>
 
 <style scoped></style>

easyflow-ui-admin/app/src/views/ai/resource/ResourceList.vue

@@ -3,6 +3,7 @@ import type { FormInstance } from 'element-plus';
 
 import { computed, onMounted, ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 import { formatBytes } from '@easyflow/utils';
 
 import {
@@ -15,7 +16,6 @@ import {
 import {
   ElAvatar,
   ElButton,
-  ElDialog,
   ElDropdown,
   ElDropdownItem,
   ElDropdownMenu,
@@ -418,16 +418,21 @@ const getSideList = async () => {
         </PageData>
       </div>
     </div>
-    <ElDialog
-      v-model="sideDialogVisible"
+    <EasyFlowFormModal
+      v-model:open="sideDialogVisible"
+      :closable="!sideSaveLoading"
       :title="sideFormData.id ? `${$t('button.edit')}` : `${$t('button.add')}`"
-      :close-on-click-modal="false"
+      :confirm-loading="sideSaveLoading"
+      :confirm-text="$t('button.confirm')"
+      :submitting="sideSaveLoading"
+      @confirm="handleSideSubmit"
     >
       <ElForm
         ref="sideFormRef"
         :model="sideFormData"
         :rules="sideFormRules"
-        label-width="120px"
+        label-position="top"
+        class="easyflow-modal-form easyflow-modal-form--compact"
       >
         <!-- 动态生成表单项 -->
         <ElFormItem
@@ -449,19 +454,6 @@ const getSideList = async () => {
           />
         </ElFormItem>
       </ElForm>
-
-      <template #footer>
-        <ElButton @click="sideDialogVisible = false">
-          {{ $t('button.cancel') }}
-        </ElButton>
-        <ElButton
-          type="primary"
-          @click="handleSideSubmit"
-          :loading="sideSaveLoading"
-        >
-          {{ $t('button.confirm') }}
-        </ElButton>
-      </template>
-    </ElDialog>
+    </EasyFlowFormModal>
   </div>
 </template>

easyflow-ui-admin/app/src/views/ai/resource/ResourceModal.vue

@@ -3,16 +3,10 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 import { getResourceType } from '@easyflow/utils';
 
-import {
-  ElButton,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-} from 'element-plus';
+import { ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus';
 
 import { api } from '#/api/request';
 import DictSelect from '#/components/dict/DictSelect.vue';
@@ -116,19 +110,23 @@ function uploadSuccess(res: 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="md"
+    @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="resourceUrl" :label="$t('aiResource.resourceUrl')">
         <Upload @before-upload="beforeUpload" @success="uploadSuccess" />
@@ -149,20 +147,7 @@ function uploadSuccess(res: any) {
         />
       </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>