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

- 收敛管理端公共 Modal 链路，新增表单弹窗与普通内容弹窗包装\n- 迁移 Bot、知识库、插件、工作流、资源、MCP、数据中枢与系统管理页面级弹窗\n- 统一内容区工具栏、列表容器、导航与顶部按钮的视觉密度和交互节奏
2026-03-06 19:58:26 +08:00
parent 76c2954a70
commit b191d1aaed
99 changed files with 3148 additions and 1623 deletions
--- a/easyflow-ui-admin/app/src/views/ai/plugin/AddPluginModal.vue
+++ b/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>
--- a/easyflow-ui-admin/app/src/views/ai/plugin/AiPluginToolModal.vue
+++ b/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>
--- a/easyflow-ui-admin/app/src/views/ai/plugin/CategoryPluginModal.vue
+++ b/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>
--- a/easyflow-ui-admin/app/src/views/ai/plugin/Plugin.vue
+++ b/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>

--- a/easyflow-ui-admin/app/src/views/ai/plugin/PluginRunTestModal.vue
+++ b/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>