From 854d74bbe5bd63934b0aabbc8dd005320a65cbd0 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 18 Dec 2024 16:57:18 +0800
Subject: [PATCH] fix: modify style bugs

---
 ui/package.json                                |  4 ++--
 ui/src/components/card-box/index.vue           |  3 ++-
 .../dynamics-form/items/JsonInput.vue          |  2 +-
 ui/src/components/markdown/MdEditorMagnify.vue |  2 +-
 ui/src/styles/app.scss                         |  2 +-
 .../component/APIKeyDialog.vue                 |  3 ++-
 .../component/ParamSettingDialog.vue           |  4 ++--
 ui/src/views/dataset/DatasetSetting.vue        |  1 -
 .../dataset/component/CreateDatasetDialog.vue  | 18 +++++++++++-------
 .../component/GenerateRelatedDialog.vue        | 12 +++---------
 .../team/component/CreateMemberDialog.vue      |  2 +-
 11 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 4a5806501..bbf58bcca 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,18 +13,18 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@antv/layout": "^0.3.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@ctrl/tinycolor": "^4.1.0",
     "@logicflow/core": "^1.2.27",
     "@logicflow/extension": "^1.2.27",
-    "@antv/layout": "^0.3.1",
     "@vueuse/core": "^10.9.0",
     "@wecom/jssdk": "^2.1.0",
     "axios": "^0.28.0",
     "codemirror": "^6.0.1",
     "cropperjs": "^1.6.2",
     "echarts": "^5.5.0",
-    "element-plus": "^2.5.6",
+    "element-plus": "^2.9.1",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.9.0",
     "install": "^0.13.0",
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index 26ee4bb54..b753e3160 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -8,7 +8,7 @@
               <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
             </AppAvatar>
           </slot>
-          <div style="width: 90%">
+          <div style="width: 90%;margin-top: -5px;">
             <auto-tooltip :content="title" style="width: 65%; height: 22px">
               {{ title }}
             </auto-tooltip>
@@ -85,6 +85,7 @@ function subHoveredEnter() {
   border-radius: 8px;
   .title {
     height: 20px;
+
   }
   .description {
     color: var(--app-text-color-secondary);
diff --git a/ui/src/components/dynamics-form/items/JsonInput.vue b/ui/src/components/dynamics-form/items/JsonInput.vue
index 4a2804b1b..83b585661 100644
--- a/ui/src/components/dynamics-form/items/JsonInput.vue
+++ b/ui/src/components/dynamics-form/items/JsonInput.vue
@@ -20,7 +20,7 @@
       </el-button>
     </div>
     <!-- Codemirror 弹出层 -->
-    <el-dialog v-model="dialogVisible" title="Python 代码" append-to-body>
+    <el-dialog v-model="dialogVisible" title="Python 代码" append-to-body fullscreen>
       <Codemirror
         v-model="cloneContent"
         :extensions="extensions"
diff --git a/ui/src/components/markdown/MdEditorMagnify.vue b/ui/src/components/markdown/MdEditorMagnify.vue
index cfd4d2f88..ec0075fc8 100644
--- a/ui/src/components/markdown/MdEditorMagnify.vue
+++ b/ui/src/components/markdown/MdEditorMagnify.vue
@@ -14,7 +14,7 @@
     </template>
   </MdEditor>
   <!-- 回复内容弹出层 -->
-  <el-dialog v-model="dialogVisible" :title="title" append-to-body>
+  <el-dialog v-model="dialogVisible" :title="title" append-to-body align-center>
     <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"></MdEditor>
     <template #footer>
       <div class="dialog-footer mt-24">
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index bc8bdc71f..e02eb5ada 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -598,7 +598,7 @@ h5 {
 .card__radio {
   width: 100%;
   display: block;
-
+  line-height: 22px;
   .el-radio {
     white-space: break-spaces;
     width: 100%;
diff --git a/ui/src/views/application-overview/component/APIKeyDialog.vue b/ui/src/views/application-overview/component/APIKeyDialog.vue
index 3aa87485d..72832a233 100644
--- a/ui/src/views/application-overview/component/APIKeyDialog.vue
+++ b/ui/src/views/application-overview/component/APIKeyDialog.vue
@@ -5,11 +5,12 @@
     width="800"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
+    align-center
   >
     <el-button type="primary" class="mb-16" @click="createApiKey">
       {{ $t('views.applicationOverview.appInfo.APIKeyDialog.creatApiKey') }}
     </el-button>
-    <el-table :data="apiKey" class="mb-16" :loading="loading">
+    <el-table :data="apiKey" class="mb-16" :loading="loading" height="420">
       <el-table-column prop="secret_key" label="API Key">
         <template #default="{ row }">
           <span class="vertical-middle lighter break-all">
diff --git a/ui/src/views/application/component/ParamSettingDialog.vue b/ui/src/views/application/component/ParamSettingDialog.vue
index 123ddc577..8cc37f0f4 100644
--- a/ui/src/views/application/component/ParamSettingDialog.vue
+++ b/ui/src/views/application/component/ParamSettingDialog.vue
@@ -10,7 +10,7 @@
     :close-on-press-escape="false"
   >
     <div class="dialog-max-height">
-      <el-scrollbar always>
+      <el-scrollbar>
         <div class="p-16">
           <el-form label-position="top" ref="paramFormRef" :model="form">
             <el-form-item
@@ -337,7 +337,7 @@ defineExpose({ open })
     padding: 0 !important;
   }
   .dialog-max-height {
-    height: 550px;
+    height: 560px;
   }
   .custom-slider {
     .el-input-number.is-without-controls .el-input__wrapper {
diff --git a/ui/src/views/dataset/DatasetSetting.vue b/ui/src/views/dataset/DatasetSetting.vue
index 753c3c9ac..3ea844eb0 100644
--- a/ui/src/views/dataset/DatasetSetting.vue
+++ b/ui/src/views/dataset/DatasetSetting.vue
@@ -150,7 +150,6 @@ async function submit() {
         if (cloneModelId.value !== BaseFormRef.value.form.embedding_mode_id) {
           MsgConfirm(`提示`, `修改知识库向量模型后，需要对知识库向量化，是否继续保存？`, {
             confirmButtonText: '向量化',
-            confirmButtonClass: 'primary'
           })
             .then(() => {
               datasetApi.putDataset(id, obj, loading).then((res) => {
diff --git a/ui/src/views/dataset/component/CreateDatasetDialog.vue b/ui/src/views/dataset/component/CreateDatasetDialog.vue
index 96b49cd4e..091e9f784 100644
--- a/ui/src/views/dataset/component/CreateDatasetDialog.vue
+++ b/ui/src/views/dataset/component/CreateDatasetDialog.vue
@@ -24,18 +24,20 @@
                 shadow="never"
                 class="mb-16"
                 :class="datasetForm.type === '0' ? 'active' : ''"
+                @click="datasetForm.type = '0'"
               >
-                <el-radio value="0" size="large">
+                <div class="flex-between">
                   <div class="flex align-center">
                     <AppAvatar class="mr-8 avatar-blue" shape="square" :size="32">
                       <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
                     </AppAvatar>
                     <div>
-                      <p class="mb-4">通用型</p>
+                      <p><el-text>通用型</el-text></p>
                       <el-text type="info">上传本地文件或手动录入</el-text>
                     </div>
                   </div>
-                </el-radio>
+                  <el-radio value="0" size="large" style="width: 16px"></el-radio>
+                </div>
               </el-card>
             </el-col>
             <el-col :span="12">
@@ -43,18 +45,20 @@
                 shadow="never"
                 class="mb-16"
                 :class="datasetForm.type === '1' ? 'active' : ''"
+                @click="datasetForm.type = '1'"
               >
-                <el-radio value="1" size="large">
+                <div class="flex-between">
                   <div class="flex align-center">
                     <AppAvatar class="mr-8 avatar-purple" shape="square" :size="32">
                       <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
                     </AppAvatar>
                     <div>
-                      <p class="mb-4">Web 站点</p>
-                      <el-text type="info">同步Web网站文本数据 </el-text>
+                      <p><el-text>Web 站点</el-text></p>
+                      <el-text type="info">同步Web网站文本数据</el-text>
                     </div>
                   </div>
-                </el-radio>
+                  <el-radio value="1" size="large" style="width: 16px"></el-radio>
+                </div>
               </el-card>
             </el-col>
           </el-row>
diff --git a/ui/src/views/document/component/GenerateRelatedDialog.vue b/ui/src/views/document/component/GenerateRelatedDialog.vue
index 3ef96408d..4a50a446d 100644
--- a/ui/src/views/document/component/GenerateRelatedDialog.vue
+++ b/ui/src/views/document/component/GenerateRelatedDialog.vue
@@ -2,16 +2,10 @@
   <el-dialog
     title="生成问题"
     v-model="dialogVisible"
-    width="600"
-    class="select-dataset-dialog"
+    width="650"
     :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>
-      </div>
-    </template>
     <div class="content-height">
       <el-form
         ref="FormRef"
@@ -20,11 +14,11 @@
         label-position="top"
         require-asterisk-position="right"
       >
-        <div class="update-info flex border-r-4 mb-16 w-full">
+        <div class="update-info flex border-r-4 mb-16 p-8-12">
           <div class="mt-4">
             <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
           </div>
-          <div class="ml-16 lighter">
+          <div class="ml-12 lighter">
             <p>提示词中的 {data} 为分段内容的占位符，执行时替换为分段内容发送给 AI 模型；</p>
             <p>AI 模型根据分段内容生成相关问题，请将生成的问题放至&lt;question&gt;&lt;/question&gt;标签中，系统会自动关联标签中的问题；</p>
             <p>生成效果依赖于所选模型和提示词，用户可自行调整至最佳效果。</p>
diff --git a/ui/src/views/team/component/CreateMemberDialog.vue b/ui/src/views/team/component/CreateMemberDialog.vue
index eb3d8b5ca..9890e6026 100644
--- a/ui/src/views/team/component/CreateMemberDialog.vue
+++ b/ui/src/views/team/component/CreateMemberDialog.vue
@@ -88,7 +88,7 @@ const submitMember = async (formEl: FormInstance | undefined) => {
           dialogVisible.value = false
           loading.value = false
         })
-        .finally(() => {
+        .catch(() => {
           loading.value = false
         })
     }