From 0da188adb390c45a762602c9aefb1b28affcfe75 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Wed, 4 Feb 2026 15:08:52 +0800
Subject: [PATCH] feat: setting icon

---
 src/assets/images/setting.png       | Bin 0 -> 1057 bytes
 src/lang/en.ts                      |   6 ++
 src/lang/zh-cn.ts                   |   6 ++
 src/views/home/components/Input.vue | 150 ++++++++++++++++++++++------
 4 files changed, 131 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/images/setting.png

diff --git a/src/assets/images/setting.png b/src/assets/images/setting.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc2f9064c4f819d32c182a408003e2404fbe0d6a
GIT binary patch
literal 1057
zcmV++1m63JP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1GY&-K~#7F-C7H7
z6EP5dN!v69E>k}J0OcrrL|Zrn0u_V`2rj^Rkhn$>TmYoDNt!0?%g$qG9cLS)?8Y$C
z$j<KCezxap2Us4pTzxI$)fw-SBLVGZ{2}A-8J`=oew^{TeY1kZNZ@xf9%MW=9vP1v
z?*?s_P7;f4<N$}52Caz<?e|?IM4SL+oxm=wys&cM>MDo!yn{J(LY>#iq*o|bTC04B
zTp!l0t_f*(URYb-SI2|Dm2uBzKB$p<4xB{hsbOfNSmi_aUc1o?`r>mc{mqvBPzOz#
zFYdr~6uJPz!PWhRV%K7%2~HZc?P1flcN7^@z}oJ2jMQ#S6LmY|FR0(<QgN>#UvZAh
zm41}*XA}~^Z=N_TBdedGj8EV0`2jYND^gv|LEj**#2u8C*qhiR!{__zqS&RzM5ko~
z4^V(tNj>bN3|?iGZZ<0R8f*(?px&8<j%+JvyL3`mAa5+tVV&}QKWLK-2@qxZUB)NK
z#fl>IE#ptfMa_Sk9EEbdiZa+X7A!U`IITy%dYuYDNs-_3_Zj~{ZkOrGPmqg2vhlkB
zJwRE(#*zA7&?XsTVlgXz51rDEwMjypB-dPJf%oxy7}H<c^DdS!0V-%1N|0V-dX@K4
zB;n67y*q5vLcL+hh6m4lfC@=F+;e=2vb!fASQ~G3eEhC&PlLV|&BD6r^8s%rJ&g@4
z!QDWSkN`#e{u4o#)BsJwj(HqL%Qc9_?|k0Ia%hqd+{ySWa&SI@ATY|BkKZ36kKZLi
z{N^zVUqMBV#qW!zwvBbqKV-7ebxeSa#kI<^HV1A(vy>P?UyJ4q%#jbslJqehzw5|D
zX4J>;D`+;yxbme!UjeOhWZUy}+$2f1DQmG%!avg~TC(Sv6sKe4G5eV@>q!T5qA*<c
z-a7XFzo#(2s6C-sBnc?ZHpP!(sG~#HKO*6j(%%ora>bH*f3%+5{lMQGtLz{l;sj`=
zLWjtb&N93oplPOP=~S<hs5CmGuZu~s{NfPBA;CVTo#qjy^NX$r&%@m_o9%gxT$Nw=
zaQ+$M`GxOG`O2o^{3gwo&o5&416*O|7i(AaGua^l|8rr`09EA|Krz8864uECXcd&C
zU)0Eb8}!0T<rhkb+E(W?na-h={h%*}_uGC}?6Ap8K3N;eyp&V<wO8Vo);7H4Tgu7D
zx`B(`55)3|OC%Il2n0j(c@N5x%`fO-L(u-WzaL08zhKG3V*bHHK8Od$Z}E@b53E(Z
bpGm&~LF4K6mYl`U00000NkvXXu0mjfU<&v0

literal 0
HcmV?d00001

diff --git a/src/lang/en.ts b/src/lang/en.ts
index 56d5246..1ef757a 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -23,6 +23,12 @@ export default {
 			NordicNoir:'Nordic\nNoir',
     },
     chooseStyle: 'Choose Style',
+    setting: 'Setting',
+    settingOptions: {
+      creativity: 'Creativity',
+      diversity: 'Diversity',
+      relevance: 'Relevance'
+    },
     confirm: 'Confirm'
   },
   area: {
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index f7b7fe8..eca6c95 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -18,6 +18,12 @@ export default {
 			classic: '古典'
 		},
 		chooseStyle: '选择风格',
+		setting: 'Setting',
+		settingOptions: {
+			creativity: '创意度',
+			diversity: '多样性',
+			relevance: '相关度'
+		},
 		confirm: '确认'
 	},
 	area: {
diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue
index 3e51cfa..b53f794 100644
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -37,7 +37,7 @@
 
         <el-popover
           v-model:visible="stylePopupVisible"
-          placement="bottom-start"
+          placement="top"
           :width="342"
           :show-arrow="false"
           trigger="click"
@@ -46,7 +46,7 @@
           <template #reference>
             <div class="fida-style-select-trigger"></div>
           </template>
-          <div class="fida-style-popover-content">
+          <div class="fida-style-popover-content flex flex-col">
             <div class="fida-style-popover-header">{{ $t('Input.chooseStyle') }}</div>
             <div class="fida-style-popover-grid">
               <div
@@ -59,7 +59,7 @@
                 <span class="fida-option-label">{{ $t(item.label) }}</span>
               </div>
             </div>
-            <div class="fida-style-popover-footer">
+            <div class="fida-style-popover-footer flex flex-center">
               <button class="fida-confirm-btn" @click="confirmStyle">
                 {{ $t('Input.confirm') }}
               </button>
@@ -67,6 +67,30 @@
           </div>
         </el-popover>
       </div>
+      <el-popover
+        v-model:visible="settingPopupVisible"
+        placement="top"
+        :width="342"
+        :show-arrow="false"
+        trigger="click"
+        popper-class="fida-setting-popover"
+      >
+        <template #reference>
+          <img src="@/assets/images/setting.png" class="setting-icon" />
+        </template>
+        <div class="fida-setting-popover-content flex flex-col">
+          <div class="fida-setting-popover-header">{{ $t('Input.setting') }}</div>
+          <div class="fida-setting-slider-list">
+            <div v-for="item in settingOptions" :key="item.label" class="fida-setting-slider-item">
+              <div class="fida-slider-label">{{ $t(item.label) }}</div>
+              <div class="fida-slider-row flex align-center">
+                <el-slider v-model="item.value" :show-tooltip="false" />
+                <span class="fida-slider-value">{{ item.value }}%</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-popover>
     </div>
   </div>
 </template>
@@ -95,6 +119,13 @@ const styleValue = ref<string>('')
 const tempSelectedValue = ref<string>('')
 const stylePopupVisible = ref(false)
 
+const settingPopupVisible = ref(false)
+const settingOptions = ref([
+  { label: 'Input.settingOptions.creativity', value: 50 },
+  { label: 'Input.settingOptions.diversity', value: 75 },
+  { label: 'Input.settingOptions.relevance', value: 60 }
+])
+
 const openStylePopup = () => {
   // 打开弹窗时初始化临时选中值为当前选中值
   tempSelectedValue.value = styleValue.value
@@ -110,6 +141,10 @@ const confirmStyle = () => {
   styleValue.value = tempSelectedValue.value
   stylePopupVisible.value = false
 }
+
+const confirmSetting = () => {
+  settingPopupVisible.value = false
+}
 const typeOptions = ref<any[]>([
   {
     label: 'Input.types.sofa',
@@ -193,6 +228,12 @@ const styleOptions = ref<any[]>(
       width: 100%;
       height: 100%;
       z-index: 1;
+      cursor: pointer;
+    }
+    .setting-icon {
+      width: 2.4rem;
+      height: 2.4rem;
+      cursor: pointer;
     }
   }
 }
@@ -213,7 +254,6 @@ const styleOptions = ref<any[]>(
 </style>
 
 <style lang="less">
-/* 弹窗样式 - 使用 fida- 前缀避免样式污染 */
 .fida-style-select-popover {
   width: 34.2rem !important;
   padding: 0 !important;
@@ -224,8 +264,7 @@ const styleOptions = ref<any[]>(
 }
 
 .fida-style-popover-content {
-  display: flex;
-  flex-direction: column;
+  padding: 2rem 2.4rem 2.4rem;
 }
 
 .fida-style-popover-header {
@@ -233,27 +272,27 @@ const styleOptions = ref<any[]>(
   font-weight: 500;
   font-size: 1.6rem;
   color: #000;
-  padding: 1.8rem 2rem 1.5rem;
-  border-bottom: 0.1rem solid #f0f0f0;
+  margin-bottom: 2rem;
+  // padding: 1.8rem 2rem 1.5rem;
+  // border-bottom: 0.1rem solid #f0f0f0;
 }
 
 .fida-style-popover-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
-  padding: 1.5rem 2rem;
 }
 
 .fida-style-popover-item {
-  height: 9rem;
-  background-color: #f7f7f7;
+  height: 9.1rem;
+  width: 9.1rem;
+  background-color: #a6a6a6;
   border-radius: 0.8rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
-  border: 0.2rem solid transparent;
 }
 
 .fida-style-popover-item:hover {
@@ -262,42 +301,91 @@ const styleOptions = ref<any[]>(
 
 .fida-style-popover-item.is-selected {
   background-color: #e3f2fd;
-  border-color: #2196f3;
+  .fida-option-label {
+    color: #000;
+  }
+  // border-color: #2196f3;
 }
 
 .fida-style-popover-item .fida-option-label {
   font-family: 'GeneralMedium';
   font-weight: 500;
-  font-size: 1.3rem;
-  color: #333;
+  font-size: 1.2rem;
+  color: #fff;
   text-align: center;
   padding: 0.5rem;
 }
 
 .fida-style-popover-footer {
-  padding: 1.5rem 2rem 1.8rem;
-  border-top: 0.1rem solid #f0f0f0;
+  // border-top: 0.1rem solid #f0f0f0;
+  margin-top: 2.4rem;
+  .fida-confirm-btn {
+    margin: 0 auto;
+    width: 15.7rem;
+    height: 3.4rem;
+    line-height: 3.4rem;
+    background-color: #ff7a51;
+    color: #fff;
+    border: none;
+    border-radius: 3.8rem;
+    font-family: 'GeneralMedium';
+    font-weight: 500;
+    font-size: 1.4rem;
+    cursor: pointer;
+  }
 }
 
-.fida-confirm-btn {
-  width: 100%;
-  height: 4.4rem;
-  background-color: #000;
-  color: #fff;
-  border: none;
-  border-radius: 0.8rem;
+.fida-setting-popover {
+  width: 34.2rem !important;
+  padding: 0 !important;
+  border-radius: 0.6rem !important;
+  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
+  background-color: #fff !important;
+  border: none !important;
+}
+
+// .fida-setting-popover-content {
+//   padding: 2rem 2.4rem 2.4rem;
+// }
+
+.fida-setting-popover-header {
   font-family: 'GeneralMedium';
   font-weight: 500;
-  font-size: 1.5rem;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
+  font-size: 1.6rem;
+  color: #000;
+  margin-bottom: 2rem;
 }
 
-.fida-confirm-btn:hover {
-  background-color: #333;
+.fida-setting-slider-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 }
 
-.fida-confirm-btn:active {
-  background-color: #000;
+.fida-setting-slider-item {
+  .fida-slider-label {
+    font-family: 'GeneralMedium';
+    font-weight: 500;
+    font-size: 1.4rem;
+    color: #000;
+    margin-bottom: 0.8rem;
+  }
+  .fida-slider-row {
+    gap: 1rem;
+    .el-slider {
+      flex: 1;
+    }
+    .fida-slider-value {
+      font-family: 'GeneralMedium';
+      font-weight: 500;
+      font-size: 1.4rem;
+      color: #000;
+      min-width: 3.5rem;
+      text-align: right;
+    }
+  }
+  // :deep(.el-slider) {
+
+  // }
 }
 </style>