chore(ma-city-select): 优化省市区选择组件

web/src/components/ma-city-select/index.vue

@@ -7,26 +7,42 @@
  - @Author X.Mo<[email protected]>
  - @Link   https://gitee.com/xmo/mineadmin-vue
 -->
+<i18n lang="yaml">
+en:
+  province: Please select province/city/area
+  city: Please select city/area
+  area: Please select area
+zh_CN:
+  province: 请选择省/直辖市/自治区
+  city: 请选择地级市/市辖区
+  area: 请选择区县
+zh_TW:
+  province: 請選擇省/直轄市/自治區
+  city: 請選擇地級市/市轄區
+  area: 請選擇區縣
+</i18n>
 <script setup lang="ts">
 import jsonData from './lib/cn.json'
 import type { Area, ModelType } from './type.ts'
+import { useLocalTrans } from '@/hooks/useLocalTrans.ts'
 
-defineOptions({ name: 'MaProvinceCitySelect' })
+defineOptions({ name: 'MaCitySelect' })
 
 const { mode = 'name', showLevel = 3 } = defineProps<{
   mode: 'name' | 'code'
   showLevel: 1 | 2 | 3
 }>()
 
-const model = defineModel<ModelType>()
+const t = useLocalTrans()
+const model = defineModel<ModelType>({ province: undefined, city: undefined, area: undefined})
 const province = ref<Area>([])
 const city = ref<Area>([])
 const area = ref<Area>([])
 
 function provinceChange(val, clear = true) {
   if (clear) {
-    model.value.city = ''
-    model.value.area = ''
+    model.value.city = undefined
+    model.value.area = undefined
     city.value = []
     area.value = []
   }
@@ -35,7 +51,7 @@ function provinceChange(val, clear = true) {
 
 function cityChange(val, clear = true) {
   if (clear) {
-    model.value.area = ''
+    model.value.area = undefined
     area.value = []
   }
   area.value = city.value.find((item: Area) => mode === 'name' ? item.name === val : item.code === val)?.children ?? []
@@ -55,18 +71,18 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="grid grid-cols-3 gap-x-2" v-bind="$attrs">
+  <div class="grid grid-cols-3 gap-x-2 w-full" v-bind="$attrs">
     <el-select
       v-model="model.province"
       class="w-full"
-      placeholder="请选择省/直辖市/自治区"
+      :placeholder="t('province')"
       clearable
       @change="provinceChange"
       @clear="
         () => {
-          model.province = ''
-          model.city = ''
-          model.area = ''
+          model.province = undefined
+          model.city = undefined
+          model.area = undefined
         }
       "
     >
@@ -76,13 +92,13 @@ onMounted(() => {
       v-if="showLevel >= 2"
       v-model="model.city"
       class="w-full"
-      placeholder="请选择地级市/市辖区"
+      :placeholder="t('city')"
       clearable
       @change="cityChange"
       @clear="
         () => {
-          model.city = ''
-          model.area = ''
+          model.city = undefined
+          model.area = undefined
         }
       "
     >
@@ -92,11 +108,11 @@ onMounted(() => {
       v-if="showLevel >= 3"
       v-model="model.area"
       class="w-full"
-      placeholder="请选择区县"
+      :placeholder="t('area')"
       clearable
       @clear="
         () => {
-          model.area = ''
+          model.area = undefined
         }
       "
     >

web/types/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     MaAuth: typeof import('./../src/components/ma-auth/index.vue')['default']
+    MaCitySelect: typeof import('./../src/components/ma-city-select/index.vue')['default']
     MaDialog: typeof import('./../src/components/ma-dialog/index.vue')['default']
     MaDictCheckbox: typeof import('./../src/components/ma-dict-picker/ma-dict-checkbox.vue')['default']
     MaDictRadio: typeof import('./../src/components/ma-dict-picker/ma-dict-radio.vue')['default']