From 754f7cb87c4f332fba6d289f474b8cff337c07e5 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 27 Mar 2025 11:40:52 +0800
Subject: [PATCH] perf: dialog style

---
 ui/src/styles/element-plus.scss               | 14 +++-
 .../component/DisplaySettingDialog.vue        |  1 +
 .../component/EditAvatarDialog.vue            | 81 +++++++++---------
 .../component/LimitDialog.vue                 |  1 +
 .../component/ImportDocumentDialog.vue        |  5 +-
 .../component/EditAvatarDialog.vue            | 82 +++++++++----------
 6 files changed, 96 insertions(+), 88 deletions(-)

diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 2d078ac86..d1f067b18 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -379,7 +379,19 @@
 
 // radio 一行一个样式
 .radio-block {
-  display: inline-grid;
+  width: 100%;
+  display: inline-flex;
+  .el-radio {
+    align-items: flex-start;
+    height: 100%;
+    width: 100%;
+    margin-top: 8px;
+  }
+  .el-radio__label {
+    width: 100%;
+    margin-top: -8px;
+    line-height: 30px;
+  }
 }
 // radio 一行一个样式 有输入框 上传头像的内容
 .radio-block-avatar {
diff --git a/ui/src/views/application-overview/component/DisplaySettingDialog.vue b/ui/src/views/application-overview/component/DisplaySettingDialog.vue
index a094bc670..21878dda9 100644
--- a/ui/src/views/application-overview/component/DisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/component/DisplaySettingDialog.vue
@@ -4,6 +4,7 @@
     v-model="dialogVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
+    width="550"
   >
     <el-form label-position="top" ref="displayFormRef" :model="form">
       <el-form-item>
diff --git a/ui/src/views/application-overview/component/EditAvatarDialog.vue b/ui/src/views/application-overview/component/EditAvatarDialog.vue
index 9a8cf384c..2aaa75648 100644
--- a/ui/src/views/application-overview/component/EditAvatarDialog.vue
+++ b/ui/src/views/application-overview/component/EditAvatarDialog.vue
@@ -4,52 +4,49 @@
     v-model="dialogVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
+    width="550"
   >
-    <el-radio-group v-model="radioType" class="radio-block-avatar mb-16">
-      <div>
-        <el-radio value="default">
-          <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
+    <el-radio-group v-model="radioType" class="radio-block mb-16">
+      <el-radio value="default">
+        <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
+        <AppAvatar
+          v-if="detail?.name"
+          :name="detail?.name"
+          pinyinColor
+          class="mt-8 mb-8"
+          shape="square"
+          :size="32"
+        />
+      </el-radio>
+      <el-radio value="custom">
+        <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
+        <div class="flex mt-8">
           <AppAvatar
-            v-if="detail?.name"
-            :name="detail?.name"
-            pinyinColor
-            class="mt-8 mb-8"
+            v-if="fileURL"
             shape="square"
             :size="32"
-          />
-        </el-radio>
-      </div>
-      <div class="mt-8">
-        <el-radio value="custom">
-          <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
-          <div class="flex mt-8">
-            <AppAvatar
-              v-if="fileURL"
-              shape="square"
-              :size="32"
-              style="background: none"
-              class="mr-16"
-            >
-              <img :src="fileURL" alt="" />
-            </AppAvatar>
-            <el-upload
-              ref="uploadRef"
-              action="#"
-              :auto-upload="false"
-              :show-file-list="false"
-              accept="image/jpeg, image/png, image/gif"
-              :on-change="onChange"
-            >
-              <el-button icon="Upload" :disabled="radioType !== 'custom'">{{
-                $t('views.applicationOverview.appInfo.EditAvatarDialog.upload')
-              }}</el-button>
-            </el-upload>
-          </div>
-          <div class="el-upload__tip info mt-16">
-            {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
-          </div>
-        </el-radio>
-      </div>
+            style="background: none"
+            class="mr-16"
+          >
+            <img :src="fileURL" alt="" />
+          </AppAvatar>
+          <el-upload
+            ref="uploadRef"
+            action="#"
+            :auto-upload="false"
+            :show-file-list="false"
+            accept="image/jpeg, image/png, image/gif"
+            :on-change="onChange"
+          >
+            <el-button icon="Upload" :disabled="radioType !== 'custom'">{{
+              $t('views.applicationOverview.appInfo.EditAvatarDialog.upload')
+            }}</el-button>
+          </el-upload>
+        </div>
+        <div class="el-upload__tip info mt-8">
+          {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
+        </div>
+      </el-radio>
     </el-radio-group>
     <template #footer>
       <span class="dialog-footer">
diff --git a/ui/src/views/application-overview/component/LimitDialog.vue b/ui/src/views/application-overview/component/LimitDialog.vue
index 2bb3d4238..3f7f5ca55 100644
--- a/ui/src/views/application-overview/component/LimitDialog.vue
+++ b/ui/src/views/application-overview/component/LimitDialog.vue
@@ -4,6 +4,7 @@
     v-model="dialogVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
+    width="650"
   >
     <el-form label-position="top" ref="limitFormRef" :model="form">
       <!-- <el-form-item
diff --git a/ui/src/views/document/component/ImportDocumentDialog.vue b/ui/src/views/document/component/ImportDocumentDialog.vue
index afcb5bd51..b3abfbb98 100644
--- a/ui/src/views/document/component/ImportDocumentDialog.vue
+++ b/ui/src/views/document/component/ImportDocumentDialog.vue
@@ -5,6 +5,7 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :destroy-on-close="true"
+    width="550"
   >
     <el-form
       label-position="top"
@@ -44,9 +45,7 @@
       <el-form-item v-if="!isImport">
         <template #label>
           <div class="flex align-center">
-            <span class="mr-4">{{
-              $t('views.document.form.hit_handling_method.label')
-            }}</span>
+            <span class="mr-4">{{ $t('views.document.form.hit_handling_method.label') }}</span>
             <el-tooltip
               effect="dark"
               :content="$t('views.document.form.hit_handling_method.tooltip')"
diff --git a/ui/src/views/function-lib/component/EditAvatarDialog.vue b/ui/src/views/function-lib/component/EditAvatarDialog.vue
index 725c2d9fd..0b1c57f67 100644
--- a/ui/src/views/function-lib/component/EditAvatarDialog.vue
+++ b/ui/src/views/function-lib/component/EditAvatarDialog.vue
@@ -4,52 +4,50 @@
     v-model="dialogVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
+    width="550"
   >
-    <el-radio-group v-model="radioType" class="radio-block-avatar mb-16">
-      <div>
-        <el-radio value="default">
-          <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
+    <el-radio-group v-model="radioType" class="radio-block mb-16">
+      <el-radio value="default">
+        <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
+        <AppAvatar
+          v-if="detail?.name"
+          :name="detail?.name"
+          pinyinColor
+          class="mt-8 mb-8"
+          shape="square"
+          :size="32"
+        />
+      </el-radio>
+
+      <el-radio value="custom">
+        <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
+        <div class="flex mt-8">
           <AppAvatar
-            v-if="detail?.name"
-            :name="detail?.name"
-            pinyinColor
-            class="mt-8 mb-8"
+            v-if="fileURL"
             shape="square"
             :size="32"
-          />
-        </el-radio>
-      </div>
-      <div class="mt-8">
-        <el-radio value="custom">
-          <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
-          <div class="flex mt-8">
-            <AppAvatar
-              v-if="fileURL"
-              shape="square"
-              :size="32"
-              style="background: none"
-              class="mr-16"
-            >
-              <img :src="fileURL" alt="" />
-            </AppAvatar>
-            <el-upload
-              ref="uploadRef"
-              action="#"
-              :auto-upload="false"
-              :show-file-list="false"
-              accept="image/jpeg, image/png, image/gif"
-              :on-change="onChange"
-            >
-              <el-button icon="Upload" :disabled="radioType !== 'custom'"
-                >{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.upload') }}
-              </el-button>
-            </el-upload>
-          </div>
-          <div class="el-upload__tip info mt-16">
-            {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
-          </div>
-        </el-radio>
-      </div>
+            style="background: none"
+            class="mr-16"
+          >
+            <img :src="fileURL" alt="" />
+          </AppAvatar>
+          <el-upload
+            ref="uploadRef"
+            action="#"
+            :auto-upload="false"
+            :show-file-list="false"
+            accept="image/jpeg, image/png, image/gif"
+            :on-change="onChange"
+          >
+            <el-button icon="Upload" :disabled="radioType !== 'custom'"
+              >{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.upload') }}
+            </el-button>
+          </el-upload>
+        </div>
+        <div class="el-upload__tip info mt-8">
+          {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
+        </div>
+      </el-radio>
     </el-radio-group>
     <template #footer>
       <span class="dialog-footer">