Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front

src/assets/css/style.css

@@ -1,12 +1,9 @@
 body,
 html,
-div,
+p,
 ul,
-li,
-h1,
-h2,
-h3,
-p {
+ol,
+li {
   margin: 0;
   padding: 0;
 }

src/lang/en.ts

@@ -1,5 +1,40 @@
 export default {
-	Login: {
-
-	},
+  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'
+  }
 }

src/lang/zh-cn.ts

@@ -0,0 +1,35 @@
+export default {
+	Login: {
+
+	},
+	Input: {
+		placeholder: '请输入',
+		selectPlaceholder: '请选择',
+		type: '类型',
+		area: '地区',
+		style: '风格',
+		types: {
+			sofa: '沙发',
+			desk: '书桌',
+			chair: '椅子'
+		},
+		styles: {
+			modern: '现代',
+			classic: '古典'
+		},
+		chooseStyle: '选择风格',
+		confirm: '确认'
+	},
+	area: {
+		unitedStates: '美国',
+		singapore: '新加坡',
+		australia: '澳大利亚',
+		southKorea: '韩国',
+		china: '中国',
+		italy: '意大利',
+		france: '法国',
+		japan: '日本',
+		canada: '加拿大',
+		germany: '德国'
+	}
+}

src/main.ts

@@ -3,6 +3,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './stores/index'
+import 'normalize.css'
 import './assets/css/style.css'
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import "virtual:svg-icons-register";
@@ -14,7 +15,6 @@ import flexible from "./utils/flexible.js";
 import "./router/router-config"  // 路由守卫，做动态路由的地方
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import 'normalize.css'
 
 const app = createApp(App)
 app.use(router)

src/utils/area.ts

@@ -0,0 +1,42 @@
+export const areaList = [
+  {
+    label: 'area.unitedStates',
+    value: 'United States'
+  },
+  {
+    label: 'area.singapore',
+    value: 'Singapore'
+  },
+  {
+    label: 'area.australia',
+    value: 'Australia'
+  },
+  {
+    label: 'area.southKorea',
+    value: 'South Korea'
+  },
+  {
+    label: 'area.china',
+    value: 'China'
+  },
+  {
+    label: 'area.italy',
+    value: 'Italy'
+  },
+  {
+    label: 'area.france',
+    value: 'France'
+  },
+  {
+    label: 'area.japan',
+    value: 'Japan'
+  },
+  {
+    label: 'area.canada',
+    value: 'Canada'
+  },
+  {
+    label: 'area.germany',
+    value: 'Germany'
+  }
+]

src/views/home/components/Input.vue

@@ -1,42 +1,136 @@
 <template>
   <div class="assist-input-wrapper flex flex-col">
-    <textarea class="input" type="text" v-model="inputValue" placeholder="Please input" />
+    <textarea
+      class="input"
+      type="text"
+      v-model="inputValue"
+      :placeholder="$t('Input.placeholder')"
+    />
     <div class="operate flex align-center">
       <div class="attach flex flex-center">
         <img src="@/assets/icons/attach.svg" alt="" />
       </div>
-      <el-select v-model="typeValue" placeholder="Please select">
+      <el-select v-model="typeValue" :placeholder="$t('Input.typePlaceholder')">
         <el-option
           v-for="item in typeOptions"
-          class="type-option"
+          class="input-option"
           :key="item.value"
-          :label="item.label"
+          :label="$t(item.label)"
           :value="item.value"
         />
       </el-select>
+      <el-select v-model="areaValue" :placeholder="$t('Input.areaPlaceholder')">
+        <el-option
+          v-for="item in areaOptions"
+          class="input-option"
+          :key="item.value"
+          :label="$t(item.label)"
+          :value="item.value"
+        />
+      </el-select>
+      <div class="fida-style-select-wrapper">
+        <el-select
+          v-model="styleValue"
+          :placeholder="$t('Input.stylePlaceholder')"
+          @focus="openStylePopup"
+        />
+
+        <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>
 
 <script setup lang="ts">
 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: 'Sofa',
+    label: 'Input.types.sofa',
     value: 'Sofa'
   },
   {
-    label: 'Desk',
+    label: 'Input.types.desk',
     value: 'Desk'
   },
   {
-    label: 'Chair',
+    label: 'Input.types.chair',
     value: 'Chair'
   }
 ])
+const areaOptions = ref<any[]>(areaList)
+const styleOptions = ref<any[]>(
+  styleKeys.map((key) => ({
+    label: `Input.styles.${key}`,
+    value: key
+  }))
+)
 </script>
 
 <style lang="less" scoped>
@@ -76,11 +170,134 @@ const typeOptions = ref<any[]>([
         height: 100%;
         box-shadow: none;
         border: 0.1rem solid rgba(0, 0, 0, 0.1);
-        .type-option{
-          padding: 0 1rem;
+        font-family: 'GeneralMedium';
+        font-weight: 500;
+        font-size: 1.4rem;
+        .el-select__placeholder {
+          color: #000;
+        }
+        .el-select__icon {
+          color: #000;
         }
       }
     }
+    .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 {
+  // padding: 0 1rem;
+  margin: 0 0.6rem;
+  padding: 0 0.8rem 0 1rem;
+  color: #0d0d0d;
+  font-weight: 510;
+  font-size: 1.3rem;
+  height: 3rem;
+  line-height: 3rem;
+  &.el-select-dropdown__item.is-hovering {
+    background-color: rgba(13, 13, 13, 0.02);
+    // border-radius: 0.6rem;
   }
 }
 </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>