feat: style选择器

src/lang/en.ts

@@ -1,33 +1,40 @@
 export default {
-	Login: {
+  Login: {},
-
+  Input: {
-	},
+    placeholder: 'Please input',
-	Input: {
+    selectPlaceholder: 'Please select',
-		placeholder: 'Please input',
+    typePlaceholder: 'Type',
-		selectPlaceholder: 'Please select',
+    areaPlaceholder: 'Region',
-		type: 'Type',
+    stylePlaceholder: 'Style',
-		area: 'Region',
+    types: {
-		style: 'Style',
+      sofa: 'Sofa',
-		types: {
+      desk: 'Desk',
-			sofa: 'Sofa',
+      chair: 'Chair'
-			desk: 'Desk',
+    },
-			chair: 'Chair'
+    styles: {
-		},
+      Coastal: 'Coastal',
-		styles: {
+      Verdant: 'Verdant',
-			modern: 'Modern',
+      Traditional: 'Traditional',
-			classic: 'Classic'
+      CenturyChrome: 'Century\nChrome',
-		}
+      ModernRevival: 'Modern\nRevival',
-	},
+			Tuscan2000s: "Tuscan\n2000's",
-	area: {
+			Bauhaus: 'Bauhaus',
-		unitedStates: 'United States',
+			Constructivism: 'Constructivism',
-		singapore: 'Singapore',
+			NordicNoir:'Nordic\nNoir',
-		australia: 'Australia',
+    },
-		southKorea: 'South Korea',
+    chooseStyle: 'Choose Style',
-		china: 'China',
+    confirm: 'Confirm'
-		italy: 'Italy',
+  },
-		france: 'France',
+  area: {
-		japan: 'Japan',
+    unitedStates: 'United States',
-		canada: 'Canada',
+    singapore: 'Singapore',
-		germany: 'Germany'
+    australia: 'Australia',
-	}
+    southKorea: 'South Korea',
+    china: 'China',
+    italy: 'Italy',
+    france: 'France',
+    japan: 'Japan',
+    canada: 'Canada',
+    germany: 'Germany'
+  }
 }

src/lang/zh-cn.ts

@@ -16,7 +16,9 @@ export default {
 		styles: {
 			modern: '现代',
 			classic: '古典'
-		}
+		},
+		chooseStyle: '选择风格',
+		confirm: '确认'
 	},
 	area: {
 		unitedStates: '美国',

src/views/home/components/Input.vue

@@ -10,7 +10,7 @@
       <div class="attach flex flex-center">
         <img src="@/assets/icons/attach.svg" alt="" />
       </div>
-      <el-select v-model="typeValue" :placeholder="$t('Input.selectPlaceholder')">
+      <el-select v-model="typeValue" :placeholder="$t('Input.typePlaceholder')">
         <el-option
           v-for="item in typeOptions"
           class="input-option"
@@ -19,7 +19,7 @@
           :value="item.value"
         />
       </el-select>
-      <el-select v-model="areaValue" :placeholder="$t('Input.selectPlaceholder')">
+      <el-select v-model="areaValue" :placeholder="$t('Input.areaPlaceholder')">
         <el-option
           v-for="item in areaOptions"
           class="input-option"
@@ -28,15 +28,45 @@
           :value="item.value"
         />
       </el-select>
-      <el-select v-model="styleValue" :placeholder="$t('Input.selectPlaceholder')">
+      <div class="fida-style-select-wrapper">
-        <el-option
+        <el-select
-          v-for="item in styleOptions"
+          v-model="styleValue"
-          class="input-option"
+          :placeholder="$t('Input.stylePlaceholder')"
-          :key="item.value"
+          @focus="openStylePopup"
-          :label="$t(item.label)"
-          :value="item.value"
         />
-      </el-select>
+
+        <el-popover
+          v-model:visible="stylePopupVisible"
+          placement="bottom-start"
+          :width="342"
+          :show-arrow="false"
+          trigger="click"
+          popper-class="fida-style-select-popover"
+        >
+          <template #reference>
+            <div class="fida-style-select-trigger"></div>
+          </template>
+          <div class="fida-style-popover-content">
+            <div class="fida-style-popover-header">{{ $t('Input.chooseStyle') }}</div>
+            <div class="fida-style-popover-grid">
+              <div
+                v-for="item in styleOptions"
+                :key="item.value"
+                class="fida-style-popover-item"
+                :class="{ 'is-selected': tempSelectedValue === item.value }"
+                @click="selectStyle(item.value)"
+              >
+                <span class="fida-option-label">{{ $t(item.label) }}</span>
+              </div>
+            </div>
+            <div class="fida-style-popover-footer">
+              <button class="fida-confirm-btn" @click="confirmStyle">
+                {{ $t('Input.confirm') }}
+              </button>
+            </div>
+          </div>
+        </el-popover>
+      </div>
     </div>
   </div>
 </template>
@@ -45,11 +75,41 @@
 import { computed, ref } from 'vue'
 import { areaList } from '@/utils/area'
 
+const styleKeys: string[] = [
+  'Coastal',
+  'Verdant',
+  'Traditional',
+  'CenturyChrome',
+  'ModernRevival',
+  'Tuscan2000s',
+  'Bauhaus',
+  'Constructivism',
+  'NordicNoir'
+]
+
 const inputValue = ref<string>('')
 
 const typeValue = ref<string>('')
 const areaValue = ref<string>('')
 const styleValue = ref<string>('')
+const tempSelectedValue = ref<string>('')
+const stylePopupVisible = ref(false)
+
+const openStylePopup = () => {
+  // 打开弹窗时初始化临时选中值为当前选中值
+  tempSelectedValue.value = styleValue.value
+  stylePopupVisible.value = true
+}
+
+const selectStyle = (value: string) => {
+  tempSelectedValue.value = value
+}
+
+const confirmStyle = () => {
+  // 点击确认后才真正赋值
+  styleValue.value = tempSelectedValue.value
+  stylePopupVisible.value = false
+}
 const typeOptions = ref<any[]>([
   {
     label: 'Input.types.sofa',
@@ -65,16 +125,12 @@ const typeOptions = ref<any[]>([
   }
 ])
 const areaOptions = ref<any[]>(areaList)
-const styleOptions = ref<any[]>([
+const styleOptions = ref<any[]>(
-  {
+  styleKeys.map((key) => ({
-    label: 'Input.styles.modern',
+    label: `Input.styles.${key}`,
-    value: 'Modern'
+    value: key
-  },
+  }))
-  {
+)
-    label: 'Input.styles.classic',
-    value: 'Classic'
-  }
-])
 </script>
 
 <style lang="less" scoped>
@@ -125,6 +181,19 @@ const styleOptions = ref<any[]>([
         }
       }
     }
+    .fida-style-select-wrapper {
+      position: relative;
+      width: 13.9rem;
+      height: 4rem;
+    }
+    .fida-style-select-trigger {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
   }
 }
 .input-option {
@@ -142,3 +211,93 @@ const styleOptions = ref<any[]>([
   }
 }
 </style>
+
+<style lang="less">
+/* 弹窗样式 - 使用 fida- 前缀避免样式污染 */
+.fida-style-select-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-style-popover-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.fida-style-popover-header {
+  font-family: 'GeneralMedium';
+  font-weight: 500;
+  font-size: 1.6rem;
+  color: #000;
+  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;
+  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 {
+  background-color: #e8e8e8;
+}
+
+.fida-style-popover-item.is-selected {
+  background-color: #e3f2fd;
+  border-color: #2196f3;
+}
+
+.fida-style-popover-item .fida-option-label {
+  font-family: 'GeneralMedium';
+  font-weight: 500;
+  font-size: 1.3rem;
+  color: #333;
+  text-align: center;
+  padding: 0.5rem;
+}
+
+.fida-style-popover-footer {
+  padding: 1.5rem 2rem 1.8rem;
+  border-top: 0.1rem solid #f0f0f0;
+}
+
+.fida-confirm-btn {
+  width: 100%;
+  height: 4.4rem;
+  background-color: #000;
+  color: #fff;
+  border: none;
+  border-radius: 0.8rem;
+  font-family: 'GeneralMedium';
+  font-weight: 500;
+  font-size: 1.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.fida-confirm-btn:hover {
+  background-color: #333;
+}
+
+.fida-confirm-btn:active {
+  background-color: #000;
+}
+</style>