feat: i18n键

src/lang/en.ts

@@ -2,4 +2,32 @@ 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'
+	}
 }

src/lang/zh-cn.ts

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

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,16 +1,39 @@
 <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.selectPlaceholder')">
         <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.selectPlaceholder')">
+        <el-option
+          v-for="item in areaOptions"
+          class="input-option"
+          :key="item.value"
+          :label="$t(item.label)"
+          :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"
         />
       </el-select>
@@ -20,23 +43,38 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { areaList } from '@/utils/area'
+
 const inputValue = ref<string>('')
 
 const typeValue = ref<string>('')
+const areaValue = ref<string>('')
+const styleValue = ref<string>('')
 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[]>([
+  {
+    label: 'Input.styles.modern',
+    value: 'Modern'
+  },
+  {
+    label: 'Input.styles.classic',
+    value: 'Classic'
+  }
+])
 </script>
 
 <style lang="less" scoped>
@@ -76,11 +114,31 @@ const typeOptions = ref<any[]>([
         height: 100%;
         box-shadow: none;
         border: 0.1rem solid rgba(0, 0, 0, 0.1);
-        .type-option{
+        font-family: 'GeneralMedium';
-          padding: 0 1rem;
+        font-weight: 500;
+        font-size: 1.4rem;
+        .el-select__placeholder {
+          color: #000;
+        }
+        .el-select__icon {
+          color: #000;
         }
       }
     }
   }
 }
+.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>