feat: style选择器

2026-02-03 15:46:05 +08:00
parent 5b2307d988
commit 723208da99
3 changed files with 220 additions and 52 deletions
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1,33 +1,40 @@
 export default {
-	Login: {
-
-	},
-	Input: {
-		placeholder: 'Please input',
-		selectPlaceholder: 'Please select',
-		type: 'Type',
-		area: 'Region',
-		style: 'Style',
-		types: {
-			sofa: 'Sofa',
-			desk: 'Desk',
-			chair: 'Chair'
-		},
-		styles: {
-			modern: 'Modern',
-			classic: 'Classic'
-		}
-	},
-	area: {
-		unitedStates: 'United States',
-		singapore: 'Singapore',
-		australia: 'Australia',
-		southKorea: 'South Korea',
-		china: 'China',
-		italy: 'Italy',
-		france: 'France',
-		japan: 'Japan',
-		canada: 'Canada',
-		germany: 'Germany'
-	}
+  Login: {},
+  Input: {
+    placeholder: 'Please input',
+    selectPlaceholder: 'Please select',
+    typePlaceholder: 'Type',
+    areaPlaceholder: 'Region',
+    stylePlaceholder: 'Style',
+    types: {
+      sofa: 'Sofa',
+      desk: 'Desk',
+      chair: 'Chair'
+    },
+    styles: {
+      Coastal: 'Coastal',
+      Verdant: 'Verdant',
+      Traditional: 'Traditional',
+      CenturyChrome: 'Century\nChrome',
+      ModernRevival: 'Modern\nRevival',
+			Tuscan2000s: "Tuscan\n2000's",
+			Bauhaus: 'Bauhaus',
+			Constructivism: 'Constructivism',
+			NordicNoir:'Nordic\nNoir',
+    },
+    chooseStyle: 'Choose Style',
+    confirm: 'Confirm'
+  },
+  area: {
+    unitedStates: 'United States',
+    singapore: 'Singapore',
+    australia: 'Australia',
+    southKorea: 'South Korea',
+    china: 'China',
+    italy: 'Italy',
+    france: 'France',
+    japan: 'Japan',
+    canada: 'Canada',
+    germany: 'Germany'
+  }
 }
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -16,7 +16,9 @@ export default {
 		styles: {
 			modern: '现代',
 			classic: '古典'
-		}
+		},
+		chooseStyle: '选择风格',
+		confirm: '确认'
 	},
 	area: {
 		unitedStates: '美国',
--- a/src/views/home/components/Input.vue
+++ b/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')">
-        <el-option
-          v-for="item in styleOptions"
-          class="input-option"
-          :key="item.value"
-          :label="$t(item.label)"
-          :value="item.value"
+      <div class="fida-style-select-wrapper">
+        <el-select
+          v-model="styleValue"
+          :placeholder="$t('Input.stylePlaceholder')"
+          @focus="openStylePopup"
        />
-      </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[]>([
-  {
-    label: 'Input.styles.modern',
-    value: 'Modern'
-  },
-  {
-    label: 'Input.styles.classic',
-    value: 'Classic'
-  }
-])
+const styleOptions = ref<any[]>(
+  styleKeys.map((key) => ({
+    label: `Input.styles.${key}`,
+    value: key
+  }))
+)
 </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>