perf: 优化弹出层

2025-12-26 01:33:05 +00:00 · 2024-09-24 19:01:35 +08:00 · 2024-09-24 19:01:35 +08:00 · d4419d9ed5
parent a9d9e293a7
commit d4419d9ed5
24 changed files with 134 additions and 39 deletions
--- a/ui/src/components/ai-chat/ParagraphSourceDialog.vue
+++ b/ui/src/components/ai-chat/ParagraphSourceDialog.vue
@ -6,6 +6,8 @@
    destroy-on-close
    append-to-body
    align-center
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <div class="mb-8">
      <el-scrollbar>
--- a/ui/src/layout/components/top-bar/avatar/APIKeyDialog.vue
+++ b/ui/src/layout/components/top-bar/avatar/APIKeyDialog.vue
@ -1,5 +1,11 @@
 <template>
-  <el-dialog :title="$t('layout.topbar.avatar.apiKey')" v-model="dialogVisible" width="800">
+  <el-dialog
+    :title="$t('layout.topbar.avatar.apiKey')"
+    v-model="dialogVisible"
+    width="800"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
    <el-card shadow="never" class="layout-bg mb-16">
      <el-text type="info" class="color-secondary">{{
        $t('layout.topbar.avatar.apiServiceAddress')
--- a/ui/src/layout/components/top-bar/avatar/ResetPassword.vue
+++ b/ui/src/layout/components/top-bar/avatar/ResetPassword.vue
@ -1,5 +1,10 @@
 <template>
-  <el-dialog v-model="resetPasswordDialog" :title="$t('layout.topbar.avatar.resetPassword')">
+  <el-dialog
+    v-model="resetPasswordDialog"
+    :title="$t('layout.topbar.avatar.resetPassword')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
    <el-form
      class="reset-password-form mb-24"
      ref="resetPasswordFormRef"
--- a/ui/src/layout/components/top-bar/avatar/SettingAPIKeyDialog.vue
+++ b/ui/src/layout/components/top-bar/avatar/SettingAPIKeyDialog.vue
@ -1,25 +1,33 @@
 <template>
-  <el-dialog :title="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.dialogTitle')" v-model="dialogVisible">
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.dialogTitle')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
    <el-form label-position="top" ref="settingFormRef" :model="form">
-      <el-form-item :label="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.allowCrossDomainLabel')"
-                    @click.prevent>
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.allowCrossDomainLabel')"
+        @click.prevent
+      >
        <el-switch size="small" v-model="form.allow_cross_domain"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-input
-            v-model="form.cross_domain_list"
-            :placeholder="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.crossDomainPlaceholder')"
-            :rows="10"
-            type="textarea"
+          v-model="form.cross_domain_list"
+          :placeholder="
+            $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.crossDomainPlaceholder')
+          "
+          :rows="10"
+          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
-        <el-button
-            @click.prevent="dialogVisible = false">{{
-            $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.cancelButtonText')
-          }}</el-button>
+        <el-button @click.prevent="dialogVisible = false">{{
+          $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.cancelButtonText')
+        }}</el-button>
        <el-button type="primary" @click="submit(settingFormRef)" :loading="loading">
          {{ $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.saveButtonText') }}
        </el-button>
@ -28,16 +36,16 @@
  </el-dialog>
 </template>
 <script setup lang="ts">
-import {ref, watch} from 'vue'
-import {useRoute} from 'vue-router'
-import type {FormInstance} from 'element-plus'
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance } from 'element-plus'
 import overviewApi from '@/api/system-api-key'
-import {MsgSuccess} from '@/utils/message'
-import {t} from '@/locales'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'

 const route = useRoute()
 const {
-  params: {id}
+  params: { id }
 } = route

 const emit = defineEmits(['refresh'])
@ -66,8 +74,8 @@ const open = (data: any) => {
  APIKeyId.value = data.id
  form.value.allow_cross_domain = data.allow_cross_domain
  form.value.cross_domain_list = data.cross_domain_list?.length
-      ? data.cross_domain_list?.join('\n')
-      : ''
+    ? data.cross_domain_list?.join('\n')
+    : ''
  dialogVisible.value = true
 }

@ -78,10 +86,10 @@ const submit = async (formEl: FormInstance | undefined) => {
      const obj = {
        allow_cross_domain: form.value.allow_cross_domain,
        cross_domain_list: form.value.cross_domain_list
-            ? form.value.cross_domain_list.split('\n').filter(function (item: string) {
+          ? form.value.cross_domain_list.split('\n').filter(function (item: string) {
              return item !== ''
            })
-            : []
+          : []
      }
      overviewApi.putAPIKey(APIKeyId.value, obj, loading).then((res) => {
        emit('refresh')
@ -93,6 +101,6 @@ const submit = async (formEl: FormInstance | undefined) => {
  })
 }

-defineExpose({open})
+defineExpose({ open })
 </script>
 <style lang="scss" scope></style>
--- a/ui/src/views/application-overview/component/APIKeyDialog.vue
+++ b/ui/src/views/application-overview/component/APIKeyDialog.vue
@ -1,5 +1,11 @@
 <template>
-  <el-dialog title="API Key" v-model="dialogVisible" width="800">
+  <el-dialog
+    title="API Key"
+    v-model="dialogVisible"
+    width="800"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
    <el-button type="primary" class="mb-16" @click="createApiKey">
      {{ $t('views.applicationOverview.appInfo.APIKeyDialog.creatApiKey') }}
    </el-button>
--- a/ui/src/views/application-overview/component/DisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/component/DisplaySettingDialog.vue
@ -1,5 +1,10 @@
 <template>
-  <el-dialog title="显示设置" v-model="dialogVisible">
+  <el-dialog
+    title="显示设置"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
    <el-form label-position="top" ref="displayFormRef" :model="form">
      <el-form-item>
        <el-space direction="vertical" alignment="start">
--- a/ui/src/views/application-overview/component/EditAvatarDialog.vue
+++ b/ui/src/views/application-overview/component/EditAvatarDialog.vue
@ -2,6 +2,8 @@
  <el-dialog
    :title="$t('views.applicationOverview.appInfo.EditAvatarDialog.title')"
    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <el-radio-group v-model="radioType" class="radio-block mb-16">
      <div>
--- a/ui/src/views/application-overview/component/EmbedDialog.vue
+++ b/ui/src/views/application-overview/component/EmbedDialog.vue
@ -4,6 +4,8 @@
    v-model="dialogVisible"
    width="900"
    class="embed-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <el-row :gutter="12">
      <el-col :span="12">
@ -71,9 +73,8 @@ const source1 = ref('')

 const source2 = ref('')

-const urlParams1 = computed(() => props.apiInputParams ? '?' + props.apiInputParams : '')
-const urlParams2 = computed(() => props.apiInputParams ? '&' + props.apiInputParams : '')
-
+const urlParams1 = computed(() => (props.apiInputParams ? '?' + props.apiInputParams : ''))
+const urlParams2 = computed(() => (props.apiInputParams ? '&' + props.apiInputParams : ''))

 watch(dialogVisible, (bool) => {
  if (!bool) {
@ -103,7 +104,6 @@ src="${window.location.origin}/api/application/embed?protocol=${window.location.
  dialogVisible.value = true
 }

-
 defineExpose({ open })
 </script>
 <style lang="scss" scope>
--- a/ui/src/views/application-overview/component/LimitDialog.vue
+++ b/ui/src/views/application-overview/component/LimitDialog.vue
@ -2,6 +2,8 @@
  <el-dialog
    :title="$t('views.applicationOverview.appInfo.LimitDialog.dialogTitle')"
    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <el-form label-position="top" ref="limitFormRef" :model="form">
      <!-- <el-form-item
--- a/ui/src/views/application-overview/component/SettingAPIKeyDialog.vue
+++ b/ui/src/views/application-overview/component/SettingAPIKeyDialog.vue
@ -1,13 +1,23 @@
 <template>
-  <el-dialog :title="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.dialogTitle')" v-model="dialogVisible">
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.dialogTitle')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
    <el-form label-position="top" ref="settingFormRef" :model="form">
-      <el-form-item :label="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.allowCrossDomainLabel')" @click.prevent>
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.allowCrossDomainLabel')"
+        @click.prevent
+      >
        <el-switch size="small" v-model="form.allow_cross_domain"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="form.cross_domain_list"
-          :placeholder="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.crossDomainPlaceholder')"
+          :placeholder="
+            $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.crossDomainPlaceholder')
+          "
          :rows="10"
          type="textarea"
        />
@ -15,9 +25,11 @@
    </el-form>
    <template #footer>
      <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false">{{$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.cancelButtonText')}}</el-button>
+        <el-button @click.prevent="dialogVisible = false">{{
+          $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.cancelButtonText')
+        }}</el-button>
        <el-button type="primary" @click="submit(settingFormRef)" :loading="loading">
-          {{$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.saveButtonText')}}
+          {{ $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.saveButtonText') }}
        </el-button>
      </span>
    </template>
--- a/ui/src/views/application/component/AIModeParamSettingDialog.vue
+++ b/ui/src/views/application/component/AIModeParamSettingDialog.vue
@ -6,6 +6,8 @@
    v-model="dialogVisible"
    style="width: 550px"
    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <DynamicsForm
      v-model="form_data"
--- a/ui/src/views/application/component/AddDatasetDialog.vue
+++ b/ui/src/views/application/component/AddDatasetDialog.vue
@ -6,6 +6,8 @@
    append-to-body
    class="addDataset-dialog"
    align-center
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <template #header="{ titleId, titleClass }">
      <div class="flex-between mb-8">
--- a/ui/src/views/application/component/CopyApplicationDialog.vue
+++ b/ui/src/views/application/component/CopyApplicationDialog.vue
@ -4,6 +4,8 @@
    v-model="dialogVisible"
    width="650"
    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <el-form
      ref="applicationFormRef"
--- a/ui/src/views/application/component/CreateApplicationDialog.vue
+++ b/ui/src/views/application/component/CreateApplicationDialog.vue
@ -4,6 +4,8 @@
    v-model="dialogVisible"
    width="650"
    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <el-form
      ref="applicationFormRef"
--- a/ui/src/views/application/component/ParamSettingDialog.vue
+++ b/ui/src/views/application/component/ParamSettingDialog.vue
@ -6,6 +6,8 @@
    v-model="dialogVisible"
    style="width: 550px"
    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <div class="dialog-max-height">
      <el-scrollbar always>
--- a/ui/src/views/dataset/component/CreateDatasetDialog.vue
+++ b/ui/src/views/dataset/component/CreateDatasetDialog.vue
@ -1,5 +1,12 @@
 <template>
-  <el-dialog title="创建知识库" v-model="dialogVisible" width="680" append-to-body>
+  <el-dialog
+    title="创建知识库"
+    v-model="dialogVisible"
+    width="680"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
    <!-- 基本信息 -->
    <BaseForm ref="BaseFormRef" v-if="dialogVisible" />
    <el-form
--- a/ui/src/views/dataset/component/EditParagraphDialog.vue
+++ b/ui/src/views/dataset/component/EditParagraphDialog.vue
@ -5,6 +5,8 @@
    width="80%"
    destroy-on-close
    class="paragraph-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <el-row v-if="isConnect">
      <el-col :span="18" class="p-24">
--- a/ui/src/views/document/component/SelectDatasetDialog.vue
+++ b/ui/src/views/document/component/SelectDatasetDialog.vue
@ -1,5 +1,12 @@
 <template>
-  <el-dialog title="选择知识库" v-model="dialogVisible" width="600" class="select-dataset-dialog">
+  <el-dialog
+    title="选择知识库"
+    v-model="dialogVisible"
+    width="600"
+    class="select-dataset-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
    <template #header="{ titleId, titleClass }">
      <div class="my-header flex">
        <h4 :id="titleId" :class="titleClass">选择知识库</h4>
--- a/ui/src/views/log/component/EditMarkDialog.vue
+++ b/ui/src/views/log/component/EditMarkDialog.vue
@ -1,5 +1,12 @@
 <template>
-  <el-dialog title="修改标注" v-model="dialogVisible" width="600" class="edit-mark-dialog">
+  <el-dialog
+    title="修改标注"
+    v-model="dialogVisible"
+    width="600"
+    class="edit-mark-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
    <template #header="{ titleId, titleClass }">
      <div class="flex-between">
        <h4 :id="titleId" :class="titleClass">修改标注</h4>
--- a/ui/src/views/paragraph/component/SelectDocumentDialog.vue
+++ b/ui/src/views/paragraph/component/SelectDocumentDialog.vue
@ -1,5 +1,11 @@
 <template>
-  <el-dialog title="选择知识库/文档" v-model="dialogVisible" width="500">
+  <el-dialog
+    title="选择知识库/文档"
+    v-model="dialogVisible"
+    width="500"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
    <el-form
      ref="formRef"
      :model="form"
--- a/ui/src/views/problem/component/RelateProblemDialog.vue
+++ b/ui/src/views/problem/component/RelateProblemDialog.vue
@ -5,6 +5,8 @@
    width="80%"
    class="paragraph-dialog"
    destroy-on-close
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <el-row v-loading="loading">
      <el-col :span="6">
--- a/ui/src/views/user-manage/component/UserDialog.vue
+++ b/ui/src/views/user-manage/component/UserDialog.vue
@ -7,6 +7,8 @@
      label-position="top"
      require-asterisk-position="right"
      @submit.prevent
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
    >
      <el-form-item :prop="isEdit ? '' : 'username'" label="用户名">
        <el-input
--- a/ui/src/views/user-manage/component/UserPwdDialog.vue
+++ b/ui/src/views/user-manage/component/UserPwdDialog.vue
@ -7,6 +7,8 @@
      label-position="top"
      require-asterisk-position="right"
      @submit.prevent
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
    >
      <el-form-item label="新密码" prop="password">
        <el-input
--- a/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
+++ b/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
@ -6,6 +6,8 @@
    v-model="dialogVisible"
    style="width: 550px"
    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
  >
    <div>
      <el-scrollbar always>