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

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

easyflow-ui-admin/app/src/views/ai/bots/index.vue

@@ -8,12 +8,11 @@ import type { ActionButton } from '#/components/page/CardList.vue';
 import { computed, markRaw, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
 import { Delete, Edit, Plus, Setting } from '@element-plus/icons-vue';
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElInput,
@@ -299,16 +298,21 @@ const getSideList = async () => {
     <!-- 创建&编辑Bot弹窗 -->
     <Modal ref="modalRef" @success="pageDataRef.setQuery({})" />
 
-    <ElDialog
-      v-model="dialogVisible"
+    <EasyFlowFormModal
+      v-model:open="dialogVisible"
+      :closable="!saveLoading"
       :title="formData.id ? `${$t('button.edit')}` : `${$t('button.add')}`"
-      :close-on-click-modal="false"
+      :confirm-loading="saveLoading"
+      :confirm-text="$t('button.confirm')"
+      :submitting="saveLoading"
+      @confirm="handleSubmit"
     >
       <ElForm
         ref="formRef"
         :model="formData"
         :rules="formRules"
-        label-width="120px"
+        label-position="top"
+        class="easyflow-modal-form easyflow-modal-form--compact"
       >
         <!-- 动态生成表单项 -->
         <ElFormItem
@@ -330,15 +334,6 @@ const getSideList = async () => {
           />
         </ElFormItem>
       </ElForm>
-
-      <template #footer>
-        <ElButton @click="dialogVisible = false">
-          {{ $t('button.cancel') }}
-        </ElButton>
-        <ElButton type="primary" @click="handleSubmit" :loading="saveLoading">
-          {{ $t('button.confirm') }}
-        </ElButton>
-      </template>
-    </ElDialog>
+    </EasyFlowFormModal>
   </div>
 </template>

easyflow-ui-admin/app/src/views/ai/bots/modal.vue

@@ -3,18 +3,12 @@ import type { BotInfo } from '@easyflow/types';
 
 import type { SaveBotParams, UpdateBotParams } from '#/api/ai/bot';
 
-import { ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
-import {
-  ElButton,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-} from 'element-plus';
+import { ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus';
 import { tryit } from 'radash';
 
 import { saveBot, updateBotApi } from '#/api/ai/bot';
@@ -23,98 +17,334 @@ import UploadAvatar from '#/components/upload/UploadAvatar.vue';
 
 const emit = defineEmits(['success']);
 
-const initialFormData = {
-  icon: '',
-  title: '',
+const createInitialFormData = (): SaveBotParams => ({
   alias: '',
-  description: '',
   categoryId: '',
+  description: '',
+  icon: '',
   status: 1,
-};
+  title: '',
+});
+
 const dialogVisible = ref(false);
 const dialogType = ref<'create' | 'edit'>('create');
 const formRef = ref<InstanceType<typeof ElForm>>();
-const formData = ref<SaveBotParams | UpdateBotParams>(initialFormData);
-const rules = {
-  title: [{ required: true, message: $t('message.required'), trigger: 'blur' }],
-  alias: [{ required: true, message: $t('message.required'), trigger: 'blur' }],
-};
+const formData = ref<SaveBotParams | UpdateBotParams>(createInitialFormData());
 const loading = ref(false);
 
-const handleSubmit = async () => {
+const rules = {
+  alias: [{ required: true, message: $t('message.required'), trigger: 'blur' }],
+  title: [{ required: true, message: $t('message.required'), trigger: 'blur' }],
+};
+
+const dialogTitle = computed(() => {
+  return `${$t(`button.${dialogType.value}`)}${$t('bot.chatAssistant')}`;
+});
+
+const dialogDescription = computed(() => {
+  return dialogType.value === 'create'
+    ? $t('bot.modal.createDescription')
+    : $t('bot.modal.editDescription');
+});
+
+async function handleSubmit() {
+  const valid = await formRef.value?.validate().catch(() => false);
+  if (!valid) {
+    return;
+  }
+
   loading.value = true;
 
   const [err, res] = await tryit(
     dialogType.value === 'create' ? saveBot : updateBotApi,
-  )(formData.value as any);
+  )(formData.value as SaveBotParams & UpdateBotParams);
 
   if (!err && res.errorCode === 0) {
     emit('success');
-    ElMessage.success($t('message.saveOkMessage'));
+    ElMessage.success(res.message || $t('message.saveOkMessage'));
     dialogVisible.value = false;
+    loading.value = false;
+    return;
   }
+
+  ElMessage.error(res?.message || $t('message.saveFail'));
   loading.value = false;
-};
+}
+
+async function open(type: 'create' | 'edit', bot?: BotInfo) {
+  formData.value = bot
+    ? {
+        ...createInitialFormData(),
+        alias: bot.alias,
+        categoryId: bot.categoryId,
+        description: bot.description,
+        icon: bot.icon,
+        id: bot.id,
+        status: bot.status,
+        title: bot.title,
+      }
+    : createInitialFormData();
+  dialogType.value = type;
+  dialogVisible.value = true;
+
+  await nextTick();
+  formRef.value?.clearValidate();
+}
 
 defineExpose({
-  open(type: typeof dialogType.value, bot?: BotInfo) {
-    formData.value = bot
-      ? {
-          id: bot.id,
-          icon: bot.icon,
-          title: bot.title,
-          alias: bot.alias,
-          description: bot.description,
-          categoryId: bot.categoryId,
-          status: bot.status,
-        }
-      : initialFormData;
-    dialogType.value = type;
-    dialogVisible.value = true;
-  },
+  open,
 });
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="`${$t(`button.${dialogType}`)}${$t('bot.chatAssistant')}`"
-    draggable
-    align-center
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
+    :confirm-loading="loading"
+    :confirm-text="$t('button.save')"
+    :description="dialogDescription"
+    :submitting="loading"
+    :title="dialogTitle"
+    width="lg"
+    @confirm="handleSubmit"
   >
-    <ElForm ref="formRef" :model="formData" :rules="rules" label-width="150px">
-      <ElFormItem :label="$t('common.avatar')" prop="icon">
-        <UploadAvatar v-model="formData.icon" />
-      </ElFormItem>
-      <ElFormItem prop="categoryId" :label="$t('aiWorkflow.categoryId')">
-        <DictSelect v-model="formData.categoryId" dict-code="aiBotCategory" />
-      </ElFormItem>
-      <ElFormItem :label="$t('aiWorkflow.title')" prop="title">
-        <ElInput v-model="formData.title" />
-      </ElFormItem>
-      <ElFormItem :label="$t('plugin.alias')" prop="alias">
-        <ElInput v-model="formData.alias" />
-      </ElFormItem>
-      <ElFormItem :label="$t('plugin.description')" prop="description">
-        <ElInput type="textarea" :rows="3" v-model="formData.description" />
-      </ElFormItem>
-      <ElFormItem prop="status" :label="$t('aiWorkflow.status')">
-        <DictSelect v-model="formData.status" dict-code="showOrNot" />
-      </ElFormItem>
-    </ElForm>
+    <ElForm
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      class="bot-modal-form"
+      label-position="top"
+      status-icon
+    >
+      <section class="bot-modal-section">
+        <header class="bot-modal-section__header">
+          <div>
+            <h4 class="bot-modal-section__title">
+              {{ $t('bot.modal.sectionAppearanceTitle') }}
+            </h4>
+            <p class="bot-modal-section__description">
+              {{ $t('bot.modal.sectionAppearanceDescription') }}
+            </p>
+          </div>
+        </header>
 
-    <template #footer>
-      <ElButton @click="dialogVisible = false">
-        {{ $t('button.cancel') }}
-      </ElButton>
-      <ElButton
-        type="primary"
-        :loading="loading"
-        :disabled="loading"
-        @click="handleSubmit"
-      >
-        {{ $t('button.save') }}
-      </ElButton>
-    </template>
-  </ElDialog>
+        <div class="bot-modal-appearance-grid">
+          <ElFormItem
+            class="bot-modal-avatar-field"
+            :label="$t('common.avatar')"
+            prop="icon"
+          >
+            <UploadAvatar
+              v-model="formData.icon"
+              :size="88"
+              theme="soft-panel"
+            />
+          </ElFormItem>
+
+          <div class="bot-modal-appearance-fields">
+            <ElFormItem :label="$t('aiWorkflow.title')" prop="title">
+              <ElInput v-model="formData.title" />
+            </ElFormItem>
+
+            <ElFormItem :label="$t('aiWorkflow.categoryId')" prop="categoryId">
+              <DictSelect
+                v-model="formData.categoryId"
+                dict-code="aiBotCategory"
+              />
+            </ElFormItem>
+
+            <ElFormItem
+              class="bot-modal-grid__full"
+              :label="$t('plugin.alias')"
+              prop="alias"
+            >
+              <ElInput v-model="formData.alias" />
+              <div class="bot-modal-field-tip">
+                {{ $t('bot.modal.aliasHint') }}
+              </div>
+            </ElFormItem>
+          </div>
+        </div>
+      </section>
+
+      <section class="bot-modal-section bot-modal-section--compact">
+        <header class="bot-modal-section__header">
+          <div>
+            <h4 class="bot-modal-section__title">
+              {{ $t('bot.modal.sectionPublishTitle') }}
+            </h4>
+            <p class="bot-modal-section__description">
+              {{ $t('bot.modal.sectionPublishDescription') }}
+            </p>
+          </div>
+        </header>
+
+        <div class="bot-modal-publish-grid">
+          <ElFormItem :label="$t('plugin.description')" prop="description">
+            <ElInput v-model="formData.description" :rows="3" type="textarea" />
+            <div class="bot-modal-field-tip">
+              {{ $t('bot.modal.descriptionHint') }}
+            </div>
+          </ElFormItem>
+
+          <ElFormItem
+            class="bot-modal-publish-field"
+            :label="$t('aiWorkflow.status')"
+            prop="status"
+          >
+            <DictSelect v-model="formData.status" dict-code="showOrNot" />
+            <div class="bot-modal-field-tip">
+              {{ $t('bot.modal.statusHint') }}
+            </div>
+          </ElFormItem>
+        </div>
+      </section>
+    </ElForm>
+  </EasyFlowFormModal>
 </template>
+
+<style scoped>
+.bot-modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.bot-modal-section {
+  border-radius: 14px;
+  border: 1px solid hsl(var(--modal-divider));
+  background: hsl(var(--modal-content-surface-strong));
+  box-shadow: none;
+  padding: 14px;
+}
+
+.bot-modal-section--compact {
+  padding-bottom: 12px;
+}
+
+.bot-modal-section__header {
+  margin-bottom: 10px;
+}
+
+.bot-modal-section__title {
+  margin: 0;
+  color: hsl(var(--text-strong));
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.bot-modal-section__description {
+  margin: 3px 0 0;
+  color: hsl(var(--text-muted));
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.bot-modal-appearance-grid {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr);
+  gap: 14px 16px;
+  align-items: start;
+}
+
+.bot-modal-appearance-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px 16px;
+}
+
+.bot-modal-grid__full {
+  grid-column: 1 / -1;
+}
+
+.bot-modal-publish-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
+  gap: 14px 16px;
+  align-items: start;
+}
+
+.bot-modal-publish-field {
+  margin-bottom: 0;
+}
+
+.bot-modal-avatar-field {
+  align-items: flex-start;
+  margin-bottom: 0;
+}
+
+.bot-modal-avatar-field :deep(.el-form-item__content) {
+  display: block;
+}
+
+.bot-modal-field-tip {
+  margin-top: 4px;
+  color: hsl(var(--text-muted));
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.bot-modal-form :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.bot-modal-form :deep(.el-form-item__label) {
+  padding-bottom: 6px;
+  color: hsl(var(--text-strong));
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.bot-modal-form :deep(.el-input__wrapper),
+.bot-modal-form :deep(.el-select__wrapper),
+.bot-modal-form :deep(.el-textarea__inner) {
+  border-radius: 12px;
+  background: hsl(var(--input-background));
+  box-shadow: inset 0 0 0 1px hsl(var(--input) / 0.92);
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.bot-modal-form :deep(.el-input__wrapper),
+.bot-modal-form :deep(.el-select__wrapper) {
+  min-height: 42px;
+}
+
+.bot-modal-form :deep(.el-input__wrapper:hover),
+.bot-modal-form :deep(.el-select__wrapper:hover),
+.bot-modal-form :deep(.el-textarea__inner:hover) {
+  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18);
+}
+
+.bot-modal-form :deep(.el-input__wrapper.is-focus),
+.bot-modal-form :deep(.el-select__wrapper.is-focused),
+.bot-modal-form :deep(.el-textarea__inner:focus) {
+  box-shadow:
+    inset 0 0 0 1px hsl(var(--primary) / 0.72),
+    0 0 0 4px hsl(var(--primary) / 0.12);
+}
+
+.bot-modal-form :deep(.el-textarea__inner) {
+  min-height: 88px;
+  padding: 10px 12px;
+}
+
+.bot-modal-form :deep(.el-form-item.is-error .el-input__wrapper),
+.bot-modal-form :deep(.el-form-item.is-error .el-select__wrapper),
+.bot-modal-form :deep(.el-form-item.is-error .el-textarea__inner) {
+  box-shadow:
+    inset 0 0 0 1px hsl(var(--destructive) / 0.8),
+    0 0 0 4px hsl(var(--destructive) / 0.08);
+}
+
+@media (max-width: 768px) {
+  .bot-modal-appearance-grid,
+  .bot-modal-appearance-fields,
+  .bot-modal-publish-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

easyflow-ui-admin/app/src/views/ai/bots/pages/setting/PromptChoreChatModal.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import { EasyFlowPanelModal } from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
-import { ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';
+import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus';
 
 import { sseClient } from '#/api/request';
 
@@ -58,14 +59,21 @@ defineExpose({
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
+  <EasyFlowPanelModal
+    v-model:open="dialogVisible"
     :title="$t('bot.aiOptimizedPrompts')"
-    draggable
-    align-center
     width="550px"
+    :centered="true"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
   >
-    <ElForm ref="formRef" :model="formData" :rules="rules">
+    <ElForm
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
+    >
       <ElFormItem prop="prompt">
         <ElInput type="textarea" :rows="20" v-model="formData.prompt" />
       </ElFormItem>
@@ -87,5 +95,5 @@ defineExpose({
         {{ loading ? $t('button.optimizing') : $t('button.regenerate') }}
       </ElButton>
     </template>
-  </ElDialog>
+  </EasyFlowPanelModal>
 </template>

easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
 import { Delete, MoreFilled } from '@element-plus/icons-vue';
 import {
   ElButton,
-  ElDialog,
   ElDropdown,
   ElDropdownItem,
   ElDropdownMenu,
@@ -129,30 +129,27 @@ const form = ref({
         </ElTable>
       </template>
     </PageData>
-    <ElDialog v-model="dialogVisible" :title="$t('button.edit')" width="50%">
+    <EasyFlowFormModal
+      v-model:open="dialogVisible"
+      :closable="!btnLoading"
+      :title="$t('button.edit')"
+      width="50%"
+      :confirm-loading="btnLoading"
+      :confirm-text="$t('button.save')"
+      :submitting="btnLoading"
+      @confirm="save"
+    >
       <ElForm
         ref="basicFormRef"
-        style="width: 100%; margin-top: 20px"
         :model="form"
+        label-position="top"
+        class="easyflow-modal-form easyflow-modal-form--compact"
       >
         <ElFormItem>
           <ElInput v-model="form.content" :rows="20" type="textarea" />
         </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>
   </div>
 </template>
 

easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue

@@ -1,8 +1,16 @@
 <script setup lang="ts">
-import type {FormInstance} from 'element-plus';
+import type { FormInstance } from 'element-plus';
+
+import type { ActionButton } from '#/components/page/CardList.vue';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+import { $t } from '@easyflow/locales';
+
+import { Delete, Edit, Notebook, Plus, Search } from '@element-plus/icons-vue';
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElInput,
@@ -10,21 +18,12 @@ import {
   ElMessage,
   ElMessageBox,
 } from 'element-plus';
+import { tryit } from 'radash';
 
-import type {ActionButton} from '#/components/page/CardList.vue';
-import CardPage from '#/components/page/CardList.vue';
-
-import {computed, onMounted, ref} from 'vue';
-import {useRouter} from 'vue-router';
-
-import {$t} from '@easyflow/locales';
-
-import {Delete, Edit, Notebook, Plus, Search} from '@element-plus/icons-vue';
-import {tryit} from 'radash';
-
-import {api} from '#/api/request';
+import { api } from '#/api/request';
 import defaultIcon from '#/assets/ai/knowledge/book.svg';
 import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
+import CardPage from '#/components/page/CardList.vue';
 import PageData from '#/components/page/PageData.vue';
 import PageSide from '#/components/page/PageSide.vue';
 import DocumentCollectionModal from '#/views/ai/documentCollection/DocumentCollectionModal.vue';
@@ -321,16 +320,21 @@ function changeCategory(category: any) {
         </PageData>
       </div>
     </div>
-    <ElDialog
-      v-model="dialogVisible"
+    <EasyFlowFormModal
+      v-model:open="dialogVisible"
+      :closable="!saveLoading"
       :title="formData.id ? `${$t('button.edit')}` : `${$t('button.add')}`"
-      :close-on-click-modal="false"
+      :confirm-loading="saveLoading"
+      :confirm-text="$t('button.confirm')"
+      :submitting="saveLoading"
+      @confirm="handleSubmit"
     >
       <ElForm
         ref="formRef"
         :model="formData"
         :rules="formRules"
-        label-width="120px"
+        label-position="top"
+        class="easyflow-modal-form easyflow-modal-form--compact"
       >
         <!-- 动态生成表单项 -->
         <ElFormItem
@@ -352,16 +356,7 @@ function changeCategory(category: any) {
           />
         </ElFormItem>
       </ElForm>
-
-      <template #footer>
-        <ElButton @click="dialogVisible = false">
-          {{ $t('button.cancel') }}
-        </ElButton>
-        <ElButton type="primary" @click="handleSubmit" :loading="saveLoading">
-          {{ $t('button.confirm') }}
-        </ElButton>
-      </template>
-    </ElDialog>
+    </EasyFlowFormModal>
 
     <!--    新增知识库模态框-->
     <DocumentCollectionModal ref="aiKnowledgeModalRef" @reload="handleSearch" />

easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollectionModal.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import type {FormInstance} from 'element-plus';
+import type { FormInstance } from 'element-plus';
+
+import { onMounted, ref } from 'vue';
+
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
+import { InfoFilled } from '@element-plus/icons-vue';
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElIcon,
@@ -14,14 +18,10 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import {onMounted, ref} from 'vue';
-
-import {InfoFilled} from '@element-plus/icons-vue';
-
-import {api} from '#/api/request';
+import { api } from '#/api/request';
 import DictSelect from '#/components/dict/DictSelect.vue';
 import UploadAvatar from '#/components/upload/UploadAvatar.vue';
-import {$t} from '#/locales';
+import { $t } from '#/locales';
 
 const emit = defineEmits(['reload']);
 const embeddingLlmList = ref<any>([]);
@@ -93,7 +93,7 @@ const defaultEntity = {
 const normalizeEntity = (raw: any = {}) => {
   const options = {
     canUpdateEmbeddingModel: true,
-    ...(raw.options || {}),
+    ...raw.options,
   };
   if (options.rerankEnable === undefined || options.rerankEnable === null) {
     options.rerankEnable = !!raw.rerankModelId;
@@ -203,20 +203,24 @@ defineExpose({
 </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"
-    align-center
+    :centered="true"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    width="xl"
+    @confirm="save"
   >
     <ElForm
-      label-width="150px"
       ref="saveForm"
       :model="entity"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem
         prop="icon"
@@ -413,20 +417,7 @@ defineExpose({
         <ElSwitch v-model="entity.searchEngineEnable" />
       </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/ai/documentCollection/FaqCategoryDialog.vue

@@ -1,16 +1,10 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
-import {
-  ElButton,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElTreeSelect,
-} from 'element-plus';
+import { ElForm, ElFormItem, ElInput, ElTreeSelect } from 'element-plus';
 
 const props = defineProps({
   modelValue: {
@@ -97,14 +91,22 @@ const handleSubmit = () => {
 </script>
 
 <template>
-  <ElDialog
-    :model-value="modelValue"
+  <EasyFlowFormModal
+    :open="modelValue"
     :title="title"
     width="520px"
-    :close-on-click-modal="false"
-    @close="closeDialog"
+    :confirm-text="$t('button.save')"
+    @update:open="emit('update:modelValue', $event)"
+    @cancel="closeDialog"
+    @confirm="handleSubmit"
   >
-    <ElForm ref="formRef" :model="form" :rules="rules" label-position="top">
+    <ElForm
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
+    >
       <ElFormItem
         :label="$t('documentCollection.faq.categoryName')"
         prop="categoryName"
@@ -130,12 +132,5 @@ const handleSubmit = () => {
         />
       </ElFormItem>
     </ElForm>
-
-    <template #footer>
-      <ElButton @click="closeDialog">{{ $t('button.cancel') }}</ElButton>
-      <ElButton type="primary" @click="handleSubmit">
-        {{ $t('button.save') }}
-      </ElButton>
-    </template>
-  </ElDialog>
+  </EasyFlowFormModal>
 </template>

easyflow-ui-admin/app/src/views/ai/documentCollection/FaqEditDialog.vue

@@ -3,13 +3,12 @@ import type { IDomEditor } from '@wangeditor/editor';
 
 import { nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
 import DOMPurify from 'dompurify';
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElInput,
@@ -189,15 +188,20 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <ElDialog
+  <EasyFlowFormModal
     class="faq-edit-dialog"
-    :model-value="modelValue"
+    :open="modelValue"
     :title="form.id ? $t('button.edit') : $t('button.add')"
     width="min(920px, 92vw)"
-    :close-on-click-modal="false"
-    @close="closeDialog"
+    :confirm-text="$t('button.save')"
+    @update:open="emit('update:modelValue', $event)"
+    @cancel="closeDialog"
+    @confirm="handleSubmit"
   >
-    <ElForm class="faq-form" label-position="top">
+    <ElForm
+      class="faq-form easyflow-modal-form easyflow-modal-form--compact"
+      label-position="top"
+    >
       <ElFormItem :label="$t('documentCollection.faq.category')">
         <ElTreeSelect
           v-model="form.categoryId"
@@ -233,17 +237,7 @@ onBeforeUnmount(() => {
         </div>
       </ElFormItem>
     </ElForm>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton class="footer-btn" @click="closeDialog">
-          {{ $t('button.cancel') }}
-        </ElButton>
-        <ElButton class="footer-btn" type="primary" @click="handleSubmit">
-          {{ $t('button.save') }}
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
+  </EasyFlowFormModal>
 </template>
 
 <style scoped>

easyflow-ui-admin/app/src/views/ai/documentCollection/FaqImportDialog.vue

@@ -3,8 +3,10 @@ import type { UploadFile } from 'element-plus';
 
 import { computed, ref, watch } from 'vue';
 
+import { EasyFlowPanelModal } from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 import { downloadFileFromBlob } from '@easyflow/utils';
+
 import {
   CircleCloseFilled,
   Document,
@@ -16,7 +18,6 @@ import {
 } from '@element-plus/icons-vue';
 import {
   ElButton,
-  ElDialog,
   ElIcon,
   ElMessage,
   ElTable,
@@ -128,12 +129,15 @@ const handleImport = async () => {
 </script>
 
 <template>
-  <ElDialog
+  <EasyFlowPanelModal
     :model-value="modelValue"
     width="min(980px, 92vw)"
     :title="$t('documentCollection.faq.import.title')"
     :close-on-click-modal="true"
-    @close="closeDialog"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @update:model-value="emit('update:modelValue', $event)"
+    @cancel="closeDialog"
   >
     <div class="faq-import-dialog">
       <ElUpload
@@ -148,12 +152,18 @@ const handleImport = async () => {
         :show-file-list="false"
         class="faq-upload-area"
       >
-        <div class="upload-box flex flex-col items-center justify-center p-8 text-center">
-          <ElIcon class="text-4xl text-gray-400 mb-4"><UploadFilled /></ElIcon>
-          <div class="upload-title text-[15px] font-semibold text-[var(--el-text-color-primary)] mb-2">
+        <div
+          class="upload-box flex flex-col items-center justify-center p-8 text-center"
+        >
+          <ElIcon class="mb-4 text-4xl text-gray-400"><UploadFilled /></ElIcon>
+          <div
+            class="upload-title mb-2 text-[15px] font-semibold text-[var(--el-text-color-primary)]"
+          >
             {{ $t('documentCollection.faq.import.uploadTitle') }}
           </div>
-          <div class="upload-desc text-[13px] text-[var(--el-text-color-secondary)]">
+          <div
+            class="upload-desc text-[13px] text-[var(--el-text-color-secondary)]"
+          >
             {{ $t('documentCollection.faq.import.uploadDesc') }}
           </div>
         </div>
@@ -183,7 +193,10 @@ const handleImport = async () => {
             >
               <WarningFilled />
             </ElIcon>
-            <ElIcon v-else class="result-state-icon text-[var(--el-color-success)]">
+            <ElIcon
+              v-else
+              class="result-state-icon text-[var(--el-color-success)]"
+            >
               <SuccessFilled />
             </ElIcon>
             <span class="result-title-text">
@@ -193,15 +206,23 @@ const handleImport = async () => {
         </div>
         <div class="result-stats">
           <div class="stat-item">
-            <div class="stat-label">{{ $t('documentCollection.faq.import.totalCount') }}</div>
+            <div class="stat-label">
+              {{ $t('documentCollection.faq.import.totalCount') }}
+            </div>
             <div class="stat-value">{{ importResult.totalCount || 0 }}</div>
           </div>
           <div class="stat-item">
-            <div class="stat-label">{{ $t('documentCollection.faq.import.successCount') }}</div>
-            <div class="stat-value success-text">{{ importResult.successCount || 0 }}</div>
+            <div class="stat-label">
+              {{ $t('documentCollection.faq.import.successCount') }}
+            </div>
+            <div class="stat-value success-text">
+              {{ importResult.successCount || 0 }}
+            </div>
           </div>
           <div class="stat-item">
-            <div class="stat-label">{{ $t('documentCollection.faq.import.errorCount') }}</div>
+            <div class="stat-label">
+              {{ $t('documentCollection.faq.import.errorCount') }}
+            </div>
             <div class="stat-value" :class="hasErrors ? 'danger-text' : ''">
               {{ importResult.errorCount || 0 }}
             </div>
@@ -263,7 +284,7 @@ const handleImport = async () => {
         </ElButton>
       </div>
     </template>
-  </ElDialog>
+  </EasyFlowPanelModal>
 </template>
 
 <style scoped>

easyflow-ui-admin/app/src/views/ai/mcp/Mcp.vue

@@ -19,6 +19,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';
 
@@ -107,12 +108,14 @@ const refreshLoadingMap = ref<Record<number | string, boolean>>({});
 <template>
   <div class="flex h-full flex-col gap-6 p-6">
     <McpModal ref="saveDialog" @reload="reset" />
-    <HeaderSearch
-      :buttons="headerButtons"
-      @search="handleSearch"
-      @button-click="handleHeaderButtonClick"
-    />
-    <div class="bg-background border-border flex-1 rounded-lg border p-5">
+    <ListPageShell>
+      <template #filters>
+        <HeaderSearch
+          :buttons="headerButtons"
+          @search="handleSearch"
+          @button-click="handleHeaderButtonClick"
+        />
+      </template>
       <PageData ref="pageDataRef" page-url="/api/v1/mcp/page" :page-size="10">
         <template #default="{ pageList }">
           <ElTable :data="pageList" border>
@@ -198,7 +201,7 @@ const refreshLoadingMap = ref<Record<number | string, boolean>>({});
           </ElTable>
         </template>
       </PageData>
-    </div>
+    </ListPageShell>
   </div>
 </template>
 

easyflow-ui-admin/app/src/views/ai/mcp/McpModal.vue

@@ -3,9 +3,9 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, ref } from 'vue';
 
+import { EasyFlowPanelModal } from '@easyflow/common-ui';
+
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElInput,
@@ -149,21 +149,25 @@ const activeName = ref('config');
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowPanelModal
+    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"
   >
     <ElTabs v-model="activeName" class="demo-tabs">
       <ElTabPane :label="$t('mcp.modal.config')" name="config">
         <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="title" :label="$t('mcp.title')">
             <ElInput v-model.trim="entity.title" />
@@ -176,7 +180,8 @@ const activeName = ref('config');
               type="textarea"
               :rows="15"
               v-model.trim="entity.configJson"
-              :placeholder="$t('mcp.example') + jsonPlaceholder" />
+              :placeholder="$t('mcp.example') + jsonPlaceholder"
+            />
           </ElFormItem>
           <ElFormItem prop="status" :label="$t('mcp.status')">
             <ElSwitch v-model="entity.status" />
@@ -249,20 +254,7 @@ const activeName = ref('config');
         </ElTabPane>
       </div>
     </ElTabs>
-    <template #footer>
-      <ElButton @click="closeDialog">
-        {{ $t('button.cancel') }}
-      </ElButton>
-      <ElButton
-        type="primary"
-        @click="save"
-        :loading="btnLoading"
-        :disabled="btnLoading"
-      >
-        {{ $t('button.save') }}
-      </ElButton>
-    </template>
-  </ElDialog>
+  </EasyFlowPanelModal>
 </template>
 
 <style scoped>

easyflow-ui-admin/app/src/views/ai/model/AddModelModal.vue

@@ -3,15 +3,9 @@ import type { ModelAbilityItem } from '#/views/ai/model/modelUtils/model-ability
 
 import { reactive, ref, watch } from 'vue';
 
-import {
-  ElButton,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-  ElTag,
-} from 'element-plus';
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
+import { ElForm, ElFormItem, ElInput, ElMessage, ElTag } from 'element-plus';
 
 import { api } from '#/api/request';
 import { $t } from '#/locales';
@@ -274,21 +268,25 @@ const showMoreFields = ref(false);
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
+    :centered="true"
+    :closable="!btnLoading"
     :title="isAdd ? $t('button.add') : $t('button.edit')"
     :before-close="closeDialog"
-    :close-on-click-modal="false"
-    align-center
     width="482"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    @confirm="save"
   >
     <ElForm
-      label-width="100px"
       ref="formDataRef"
       :model="formData"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem prop="title" :label="$t('llm.title')">
         <ElInput v-model.trim="formData.title" />
@@ -340,20 +338,7 @@ const showMoreFields = ref(false);
         <ElInput v-model.trim="formData.requestPath" />
       </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>

easyflow-ui-admin/app/src/views/ai/model/AddModelProviderModal.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElInput,
@@ -111,21 +111,25 @@ const handleChangeProvider = (val: string) => {
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
+    :centered="true"
+    :closable="!btnLoading"
     :title="isAdd ? $t('button.add') : $t('button.edit')"
     :before-close="closeDialog"
-    :close-on-click-modal="false"
-    align-center
     width="482"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    @confirm="save"
   >
     <ElForm
-      label-width="100px"
       ref="formDataRef"
       :model="formData"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem
         prop="icon"
@@ -138,7 +142,10 @@ const handleChangeProvider = (val: string) => {
         <ElInput v-model.trim="formData.providerName" />
       </ElFormItem>
       <ElFormItem prop="provider" :label="$t('llmProvider.apiType')">
-        <ElSelect v-model="formData.providerType" @change="handleChangeProvider">
+        <ElSelect
+          v-model="formData.providerType"
+          @change="handleChangeProvider"
+        >
           <ElOption
             v-for="item in providerOptions"
             :key="item.value"
@@ -163,20 +170,7 @@ const handleChangeProvider = (val: string) => {
         <ElInput v-model.trim="formData.embedPath" />
       </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>

easyflow-ui-admin/app/src/views/ai/model/ManageModelModal.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { nextTick, reactive, ref } from 'vue';
 
+import { EasyFlowPanelModal } from '@easyflow/common-ui';
+
 import {
   CirclePlus,
   Loading,
@@ -10,7 +12,6 @@ import {
 import {
   ElCollapse,
   ElCollapseItem,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElIcon,
@@ -215,14 +216,13 @@ const handleRefresh = () => {
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowPanelModal
+    v-model:open="dialogVisible"
+    :centered="true"
     :title="`${providerInfo?.providerName}${$t('llmProvider.model')}`"
     :before-close="closeDialog"
-    :close-on-click-modal="false"
-    align-center
     width="762"
+    :show-footer="false"
   >
     <div class="manage-llm-container">
       <div class="form-container">
@@ -311,7 +311,7 @@ const handleRefresh = () => {
         </ElTabs>
       </div>
     </div>
-  </ElDialog>
+  </EasyFlowPanelModal>
 </template>
 
 <style scoped>

easyflow-ui-admin/app/src/views/ai/model/ModelVerifyConfig.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElMessage,
@@ -65,9 +65,6 @@ const save = async () => {
     });
 };
 const btnLoading = ref(false);
-const closeDialog = () => {
-  dialogVisible.value = false;
-};
 const getModelInfo = (id: string) => {
   options.value.forEach((item: any) => {
     if (item.id === id) {
@@ -78,15 +75,25 @@ const getModelInfo = (id: string) => {
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
+    :centered="true"
+    :closable="!btnLoading"
     :title="$t('llm.verifyLlmTitle')"
-    :close-on-click-modal="false"
-    align-center
     width="482"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.confirm')"
+    :submitting="btnLoading"
+    @confirm="save"
   >
-    <ElForm ref="formDataRef" :model="formData" status-icon :rules="rules">
+    <ElForm
+      ref="formDataRef"
+      :model="formData"
+      status-icon
+      :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
+    >
       <ElFormItem prop="llmId" :label="$t('llm.modelToBeTested')">
         <ElSelect v-model="formData.llmId" @change="getModelInfo">
           <ElOption
@@ -105,20 +112,7 @@ const getModelInfo = (id: string) => {
         {{ vectorDimension }}
       </ElFormItem>
     </ElForm>
-    <template #footer>
-      <ElButton @click="closeDialog">
-        {{ $t('button.cancel') }}
-      </ElButton>
-      <ElButton
-        type="primary"
-        @click="save"
-        :loading="btnLoading"
-        :disabled="btnLoading"
-      >
-        {{ $t('button.confirm') }}
-      </ElButton>
-    </template>
-  </ElDialog>
+  </EasyFlowFormModal>
 </template>
 
 <style scoped>

easyflow-ui-admin/app/src/views/ai/plugin/AddPluginModal.vue

@@ -3,10 +3,10 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
 import { Plus, Remove } from '@element-plus/icons-vue';
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElIcon,
@@ -156,20 +156,24 @@ function removeHeader(index: number) {
 </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"
     align-center
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    width="lg"
+    @confirm="save"
   >
     <ElForm
-      label-width="150px"
       ref="saveForm"
       :model="entity"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem
         prop="icon"
@@ -251,20 +255,7 @@ function removeHeader(index: number) {
         <ElInput v-model.trim="entity.tokenValue" />
       </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>

easyflow-ui-admin/app/src/views/ai/plugin/AiPluginToolModal.vue

@@ -3,14 +3,9 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, reactive, ref } from 'vue';
 
-import {
-  ElButton,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-} from 'element-plus';
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
+import { ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus';
 
 import { api } from '#/api/request';
 import { $t } from '#/locales';
@@ -150,21 +145,24 @@ defineExpose({
 </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="600px"
-    @closed="closeDialog"
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    @confirm="save"
   >
     <ElForm
       ref="saveForm"
       :model="entity"
       :rules="rules"
-      label-width="80px"
       status-icon
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem :label="$t('pluginItem.name')" prop="name">
         <ElInput v-model.trim="entity.name" />
@@ -176,21 +174,7 @@ defineExpose({
         <ElInput v-model.trim="entity.description" type="textarea" :rows="4" />
       </ElFormItem>
     </ElForm>
-
-    <template #footer>
-      <ElButton @click="closeDialog" :disabled="btnLoading">
-        {{ $t('button.cancel') }}
-      </ElButton>
-      <ElButton
-        type="primary"
-        :loading="btnLoading"
-        :disabled="btnLoading"
-        @click="save"
-      >
-        {{ $t('button.save') }}
-      </ElButton>
-    </template>
-  </ElDialog>
+  </EasyFlowFormModal>
 </template>
 
 <style scoped></style>

easyflow-ui-admin/app/src/views/ai/plugin/CategoryPluginModal.vue

@@ -3,9 +3,9 @@ import type { FormInstance } from 'element-plus';
 
 import { onMounted, ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElMessage,
@@ -87,16 +87,25 @@ function closeDialog() {
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
+    :centered="true"
+    :closable="!btnLoading"
     width="500px"
     :title="$t('plugin.placeholder.categorize')"
     :before-close="closeDialog"
-    :close-on-click-modal="false"
-    align-center
+    :confirm-loading="btnLoading"
+    :confirm-text="$t('button.save')"
+    :submitting="btnLoading"
+    @confirm="save"
   >
-    <ElForm ref="saveForm" :model="entity" status-icon>
+    <ElForm
+      ref="saveForm"
+      :model="entity"
+      status-icon
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
+    >
       <ElFormItem prop="authType" :label="$t('plugin.category')">
         <ElSelect
           v-model="entity.categoryIds"
@@ -114,20 +123,7 @@ function closeDialog() {
         </ElSelect>
       </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/ai/plugin/Plugin.vue

@@ -4,12 +4,11 @@ import type { ActionButton } from '#/components/page/CardList.vue';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
 import { Delete, Edit, Plus } from '@element-plus/icons-vue';
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElInput,
@@ -276,27 +275,24 @@ const handleClickCategory = (item: PluginCategory) => {
     </div>
     <AddPluginModal ref="aiPluginModalRef" @reload="handleSearch" />
     <CategoryPluginModal ref="categoryCategoryModal" @reload="handleSearch" />
-    <ElDialog
+    <EasyFlowFormModal
       :title="isEdit ? `${$t('button.edit')}` : `${$t('button.add')}`"
-      v-model="dialogVisible"
+      v-model:open="dialogVisible"
+      :confirm-text="$t('button.confirm')"
       width="500px"
-      :close-on-click-modal="false"
+      @confirm="handleSubmit"
     >
-      <ElForm :model="formData" status-icon>
+      <ElForm
+        :model="formData"
+        status-icon
+        label-position="top"
+        class="easyflow-modal-form easyflow-modal-form--compact"
+      >
         <ElFormItem>
           <ElInput v-model.trim="formData.name" />
         </ElFormItem>
       </ElForm>
-
-      <template #footer>
-        <ElButton @click="dialogVisible = false">
-          {{ $t('button.cancel') }}
-        </ElButton>
-        <ElButton type="primary" @click="handleSubmit">
-          {{ $t('button.confirm') }}
-        </ElButton>
-      </template>
-    </ElDialog>
+    </EasyFlowFormModal>
   </div>
 </template>
 

easyflow-ui-admin/app/src/views/ai/plugin/PluginRunTestModal.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
+import { EasyFlowPanelModal } from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 import { preferences } from '@easyflow/preferences';
 
 import { VideoPlay } from '@element-plus/icons-vue';
-import { ElButton, ElDialog, ElMenu, ElMenuItem } from 'element-plus';
+import { ElButton, ElMenu, ElMenuItem } from 'element-plus';
 import { JsonViewer } from 'vue3-json-viewer';
 
 import { api } from '#/api/request';
@@ -77,14 +78,13 @@ function handleSubmitRun() {
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
-    :close-on-click-modal="false"
+  <EasyFlowPanelModal
+    v-model:open="dialogVisible"
     width="80%"
     align-center
     class="run-test-dialog"
     :title="$t('pluginItem.pluginToolEdit.trialRun')"
+    :before-close="() => (dialogVisible = false)"
   >
     <div class="run-test-container">
       <div class="run-test-params">
@@ -147,7 +147,7 @@ function handleSubmitRun() {
         {{ $t('pluginItem.pluginToolEdit.run') }}
       </ElButton>
     </template>
-  </ElDialog>
+  </EasyFlowPanelModal>
 </template>
 
 <style scoped>

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>

easyflow-ui-admin/app/src/views/ai/workflow/WorkflowList.vue

@@ -5,6 +5,8 @@ import type { ActionButton } from '#/components/page/CardList.vue';
 
 import { computed, markRaw, onMounted, ref } from 'vue';
 
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
 import {
   CopyDocument,
   Delete,
@@ -16,8 +18,6 @@ import {
   VideoPlay,
 } from '@element-plus/icons-vue';
 import {
-  ElButton,
-  ElDialog,
   ElForm,
   ElFormItem,
   ElInput,
@@ -404,16 +404,21 @@ function handleHeaderButtonClick(data: any) {
       </div>
     </div>
 
-    <ElDialog
-      v-model="dialogVisible"
+    <EasyFlowFormModal
+      v-model:open="dialogVisible"
+      :closable="!saveLoading"
       :title="formData.id ? `${$t('button.edit')}` : `${$t('button.add')}`"
-      :close-on-click-modal="false"
+      :confirm-loading="saveLoading"
+      :confirm-text="$t('button.confirm')"
+      :submitting="saveLoading"
+      @confirm="handleSubmit"
     >
       <ElForm
         ref="formRef"
         :model="formData"
         :rules="formRules"
-        label-width="120px"
+        label-position="top"
+        class="easyflow-modal-form easyflow-modal-form--compact"
       >
         <!-- 动态生成表单项 -->
         <ElFormItem
@@ -435,16 +440,7 @@ function handleHeaderButtonClick(data: any) {
           />
         </ElFormItem>
       </ElForm>
-
-      <template #footer>
-        <ElButton @click="dialogVisible = false">
-          {{ $t('button.cancel') }}
-        </ElButton>
-        <ElButton type="primary" @click="handleSubmit" :loading="saveLoading">
-          {{ $t('button.confirm') }}
-        </ElButton>
-      </template>
-    </ElDialog>
+    </EasyFlowFormModal>
   </div>
 </template>
 

easyflow-ui-admin/app/src/views/ai/workflow/WorkflowModal.vue

@@ -3,15 +3,9 @@ import type { FormInstance, UploadInstance, UploadProps } from 'element-plus';
 
 import { computed, onMounted, ref } from 'vue';
 
-import {
-  ElButton,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-  ElUpload,
-} from 'element-plus';
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
+import { ElForm, ElFormItem, ElInput, ElMessage, ElUpload } from 'element-plus';
 
 import { api } from '#/api/request';
 import DictSelect from '#/components/dict/DictSelect.vue';
@@ -148,9 +142,8 @@ function closeDialog() {
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    draggable
+  <EasyFlowFormModal
+    v-model:open="dialogVisible"
     :title="
       isImport
         ? $t('button.import')
@@ -159,14 +152,19 @@ function closeDialog() {
           : $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="isImport ? { ...entity, jsonFile: jsonFileModel } : entity"
       status-icon
       :rules="rules"
+      label-position="top"
+      class="easyflow-modal-form easyflow-modal-form--compact"
     >
       <ElFormItem v-if="isImport" prop="jsonFile" label="JSON文件" required>
         <ElUpload
@@ -212,20 +210,7 @@ function closeDialog() {
         <DictSelect v-model="entity.status" dict-code="showOrNot" />
       </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>