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/model/AddModelModal.vue
+++ b/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>
--- a/easyflow-ui-admin/app/src/views/ai/model/AddModelProviderModal.vue
+++ b/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>
--- a/easyflow-ui-admin/app/src/views/ai/model/ManageModelModal.vue
+++ b/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>
--- a/easyflow-ui-admin/app/src/views/ai/model/ModelVerifyConfig.vue
+++ b/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>