From 550eb57d4ccf00ab088cd10f1aac7beeba6bdf36 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 20 Aug 2025 15:35:17 +0800
Subject: [PATCH] fix: Style optimization

---
 frontend/src/assets/img/Default-avatar.svg    | 15 +++
 frontend/src/components/layout/Person.vue     | 22 ++---
 frontend/src/style.less                       |  4 +
 .../src/views/system/appearance/Person.vue    |  2 +-
 frontend/src/views/system/embedded/SetUi.vue  | 26 +++---
 frontend/src/views/system/embedded/index.vue  |  2 +-
 frontend/src/views/system/workspace/index.vue | 91 +++++++++++--------
 7 files changed, 92 insertions(+), 70 deletions(-)
 create mode 100644 frontend/src/assets/img/Default-avatar.svg

diff --git a/frontend/src/assets/img/Default-avatar.svg b/frontend/src/assets/img/Default-avatar.svg
new file mode 100644
index 00000000..50a7c89f
--- /dev/null
+++ b/frontend/src/assets/img/Default-avatar.svg
@@ -0,0 +1,15 @@
+<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" class="icon-primary"/>
+<path d="M23.3333 20.5556H16.6667C13.5984 20.5556 10 22.7017 10 26.5556V29.5556C10 30.1079 10.4975 30.5556 11.1111 30.5556H28.8889C29.5025 30.5556 30 30.1079 30 29.5556V26.5556C30 22.6984 26.4016 20.5556 23.3333 20.5556Z" fill="url(#paint0_linear_4698_1064)"/>
+<path d="M14.4444 13.8889C14.4444 16.9572 16.9318 19.4445 20 19.4445C23.0682 19.4445 25.5556 16.9572 25.5556 13.8889C25.5556 10.8207 23.0682 8.33337 20 8.33337C16.9318 8.33337 14.4444 10.8207 14.4444 13.8889Z" fill="url(#paint1_linear_4698_1064)"/>
+<defs>
+<linearGradient id="paint0_linear_4698_1064" x1="20" y1="8.33337" x2="20" y2="31.1112" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4698_1064" x1="20" y1="8.33337" x2="20" y2="31.1112" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/src/components/layout/Person.vue b/frontend/src/components/layout/Person.vue
index 5add5819..1e67d707 100644
--- a/frontend/src/components/layout/Person.vue
+++ b/frontend/src/components/layout/Person.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
-import Default_avatar from '@/assets/workspace/default_avatar.png'
-import Default_avatar_blue from '@/assets/blue/Default-avatar_blue.png'
+import Default_avatar_custom from '@/assets/img/Default-avatar.svg'
 import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
 import icon_info_outlined_1 from '@/assets/svg/icon_info_outlined_1.svg'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
@@ -90,23 +89,18 @@ const logout = () => {
   <el-popover trigger="click" popper-class="system-person" :placement="collapse ? 'right' : 'top'">
     <template #reference>
       <button class="person" :title="name" :class="collapse && 'collapse'">
-        <img
-          class="default-avatar"
-          :src="appearanceStore.isBlue ? Default_avatar_blue : Default_avatar"
-          width="32px"
-          height="32px"
-        />
+        <el-icon size="32">
+          <Default_avatar_custom></Default_avatar_custom>
+        </el-icon>
         <span v-if="!collapse" class="name ellipsis">{{ name }}</span>
       </button></template
     >
     <div class="popover">
       <div class="popover-content">
         <div class="info">
-          <img
-            :src="appearanceStore.isBlue ? Default_avatar_blue : Default_avatar"
-            width="40px"
-            height="40px"
-          />
+          <el-icon class="avatar-custom" size="40">
+            <Default_avatar_custom></Default_avatar_custom>
+          </el-icon>
           <div :title="name" class="top ellipsis">{{ name }}</div>
           <div :title="account" class="bottom ellipsis">{{ account }}</div>
         </div>
@@ -278,7 +272,7 @@ const logout = () => {
       padding: 8px;
       margin-bottom: 4px;
 
-      img {
+      .avatar-custom {
         float: left;
         margin: 3px 8px 0 7px;
       }
diff --git a/frontend/src/style.less b/frontend/src/style.less
index a1db0c73..f63d4874 100644
--- a/frontend/src/style.less
+++ b/frontend/src/style.less
@@ -351,3 +351,7 @@ strong {
 .icon-primary_60.icon-primary_60 {
   color: var(--ed-color-primary-60);
 }
+
+.ed-checkbox {
+  --ed-checkbox-font-weight: 400 !important;
+}
diff --git a/frontend/src/views/system/appearance/Person.vue b/frontend/src/views/system/appearance/Person.vue
index 0354eb5b..4becc7fe 100644
--- a/frontend/src/views/system/appearance/Person.vue
+++ b/frontend/src/views/system/appearance/Person.vue
@@ -41,7 +41,7 @@ const account = computed(() => userStore.getAccount)
             <div :title="account" class="bottom ellipsis">{{ account }}</div>
           </div>
           <div class="popover-item">
-            <el-icon size="16">
+            <el-icon style="color: #646a73" size="16">
               <icon_admin_outlined></icon_admin_outlined>
             </el-icon>
             <div class="datasource-name">{{ $t('common.system_manage') }}</div>
diff --git a/frontend/src/views/system/embedded/SetUi.vue b/frontend/src/views/system/embedded/SetUi.vue
index c3f1f837..a3b11b52 100644
--- a/frontend/src/views/system/embedded/SetUi.vue
+++ b/frontend/src/views/system/embedded/SetUi.vue
@@ -5,10 +5,8 @@ import { type UploadUserFile, ElMessage } from 'element-plus-secondary'
 import { useI18n } from 'vue-i18n'
 import { request } from '@/utils/request'
 import { setCurrentColor } from '@/utils/utils'
-import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import { cloneDeep } from 'lodash-es'
 
-const appearanceStore = useAppearanceStoreWithOut()
 const { t } = useI18n()
 const currentId = ref()
 interface SqlBotForm {
@@ -86,7 +84,7 @@ const init = () => {
   floatIcon.value = rawData.float_icon
 
   for (const key in sqlBotForm) {
-    if (Object.prototype.hasOwnProperty.call(sqlBotForm, key)) {
+    if (Object.prototype.hasOwnProperty.call(sqlBotForm, key) && rawData[key]) {
       sqlBotForm[key] = rawData[key]
     }
   }
@@ -100,7 +98,8 @@ const giveUp = () => {
   resetSqlBotForm(false)
   init()
 }
-const showSaveButton = ref(true)
+
+const emits = defineEmits(['refresh'])
 const saveHandler = () => {
   const param = buildParam()
   const url = '/system/assistant/ui'
@@ -113,12 +112,8 @@ const saveHandler = () => {
     .then((res) => {
       if (!res) {
         ElMessage.success(t('system.setting_successfully'))
-        appearanceStore.setLoaded(false)
-        appearanceStore.setAppearance()
-        showSaveButton.value = false
-        nextTick(() => {
-          showSaveButton.value = true
-        })
+        dialogVisible.value = false
+        emits('refresh')
       }
     })
 }
@@ -159,6 +154,10 @@ const resetSqlBotForm = (reset2Default?: boolean) => {
   if (reset2Default) {
     logo.value = ''
     floatIcon.value = ''
+    nextTick(() => {
+      setPageCustomColor(sqlBotForm.theme)
+      setPageHeaderFontColor(sqlBotForm.header_font_color)
+    })
   }
 }
 
@@ -203,13 +202,10 @@ const clearFiles = (array?: string[]) => {
 
 const open = (row: any) => {
   console.log(JSON.parse(row.configuration))
-  // rawData = JSON.parse(row.configuration)
-  // init()
+  rawData = JSON.parse(row.configuration)
   currentId.value = row.id
   dialogVisible.value = true
-  nextTick(() => {
-    setPageCustomColor('#1CBA90')
-  })
+  init()
 }
 defineExpose({
   open,
diff --git a/frontend/src/views/system/embedded/index.vue b/frontend/src/views/system/embedded/index.vue
index 02c14089..20b6c3b2 100644
--- a/frontend/src/views/system/embedded/index.vue
+++ b/frontend/src/views/system/embedded/index.vue
@@ -941,7 +941,7 @@ const saveHandler = () => {
       </div>
     </template>
   </el-drawer>
-  <SetUi ref="setUiRef"></SetUi>
+  <SetUi ref="setUiRef" @refresh="handleSearch"></SetUi>
 </template>
 
 <style lang="less" scoped>
diff --git a/frontend/src/views/system/workspace/index.vue b/frontend/src/views/system/workspace/index.vue
index c7b7610b..0778c99b 100644
--- a/frontend/src/views/system/workspace/index.vue
+++ b/frontend/src/views/system/workspace/index.vue
@@ -316,46 +316,54 @@ const handleCurrentChange = (val: number) => {
       </el-input>
 
       <div class="list-content">
-        <div
-          v-for="ele in tableListWithSearch"
-          :key="ele.name"
-          class="model"
-          :class="currentTable.name === ele.name && 'isActive'"
-          :title="ele.name"
-          @click="clickTable(ele)"
-        >
-          <el-icon size="16">
-            <icon_form_outlined></icon_form_outlined>
-          </el-icon>
-          <span class="name">{{ ele.name }}</span>
-
-          <el-popover
-            trigger="click"
-            :teleported="false"
-            popper-class="popover-card"
-            placement="bottom"
+        <el-scrollbar>
+          <div
+            v-for="ele in tableListWithSearch"
+            :key="ele.name"
+            class="model"
+            :class="currentTable.name === ele.name && 'isActive'"
+            :title="ele.name"
+            @click="clickTable(ele)"
           >
-            <template #reference>
-              <el-icon class="more" size="16" style="margin-left: auto; color: #646a73" @click.stop>
-                <icon_more_outlined></icon_more_outlined>
-              </el-icon>
-            </template>
-            <div class="content">
-              <div class="item" @click.stop="addWorkspace(ele)">
-                <el-icon size="16">
-                  <rename></rename>
+            <el-icon size="16">
+              <icon_form_outlined></icon_form_outlined>
+            </el-icon>
+            <span class="name">{{ ele.name }}</span>
+
+            <el-popover
+              trigger="click"
+              :teleported="false"
+              popper-class="popover-card"
+              placement="bottom"
+            >
+              <template #reference>
+                <el-icon
+                  class="more"
+                  size="16"
+                  style="margin-left: auto; color: #646a73"
+                  @click.stop
+                >
+                  <icon_more_outlined></icon_more_outlined>
                 </el-icon>
-                {{ $t('dashboard.rename') }}
+              </template>
+              <div class="content">
+                <div class="item" @click.stop="addWorkspace(ele)">
+                  <el-icon size="16">
+                    <rename></rename>
+                  </el-icon>
+                  {{ $t('dashboard.rename') }}
+                </div>
+                <div class="item" @click.stop="delWorkspace(ele)">
+                  <el-icon size="16">
+                    <delIcon></delIcon>
+                  </el-icon>
+                  {{ $t('dashboard.delete') }}
+                </div>
               </div>
-              <div class="item" @click.stop="delWorkspace(ele)">
-                <el-icon size="16">
-                  <delIcon></delIcon>
-                </el-icon>
-                {{ $t('dashboard.delete') }}
-              </div>
-            </div>
-          </el-popover>
-        </div>
+            </el-popover>
+          </div>
+        </el-scrollbar>
+
         <div v-if="!!keyword && !tableListWithSearch.length" class="no-result">
           {{ $t('workspace.relevant_content_found') }}
         </div>
@@ -576,6 +584,7 @@ const handleCurrentChange = (val: number) => {
     padding: 8px 16px;
     height: 100%;
     border-right: 1px solid #1f232926;
+    position: relative;
     .select-table_top {
       height: 40px;
       display: flex;
@@ -616,7 +625,11 @@ const handleCurrentChange = (val: number) => {
 
     .list-content {
       height: calc(100% - 100px);
-      overflow-y: auto;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding-left: 16px;
 
       .more {
         display: none;
@@ -655,7 +668,7 @@ const handleCurrentChange = (val: number) => {
         color: #646a73;
       }
       .model {
-        width: 100%;
+        width: calc(100% - 16px);
         height: 40px;
         display: flex;
         align-items: center;