feat: setting icon

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: {

src/lang/zh-cn.ts

@@ -18,6 +18,12 @@ export default {
 			classic: '古典'
 		},
 		chooseStyle: '选择风格',
+		setting: 'Setting',
+		settingOptions: {
+			creativity: '创意度',
+			diversity: '多样性',
+			relevance: '相关度'
+		},
 		confirm: '确认'
 	},
 	area: {

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;
+  padding: 2rem 2.4rem 2.4rem;
-  flex-direction: column;
 }
 
 .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;
+  margin-bottom: 2rem;
-  border-bottom: 0.1rem solid #f0f0f0;
+  // 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;
+  height: 9.1rem;
-  background-color: #f7f7f7;
+  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;
+  font-size: 1.2rem;
-  color: #333;
+  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 {
+.fida-setting-popover {
-  width: 100%;
+  width: 34.2rem !important;
-  height: 4.4rem;
+  padding: 0 !important;
-  background-color: #000;
+  border-radius: 0.6rem !important;
-  color: #fff;
+  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
-  border: none;
+  background-color: #fff !important;
-  border-radius: 0.8rem;
+  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;
+  font-size: 1.6rem;
-  cursor: pointer;
+  color: #000;
-  transition: background-color 0.2s ease;
+  margin-bottom: 2rem;
 }
 
-.fida-confirm-btn:hover {
+.fida-setting-slider-list {
-  background-color: #333;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 }
 
-.fida-confirm-btn:active {
+.fida-setting-slider-item {
-  background-color: #000;
+  .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>