Add native place cascading selector and generated data

web/src/components/NativePlaceCascader.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { nativePlaceRows } from '../data/nativePlaces.generated'
+
+const model = defineModel<string>({ default: '' })
+
+type Place = {
+  id: number
+  pid: number
+  deep: number
+  name: string
+}
+
+const places = nativePlaceRows.map(([id, pid, deep, name]) => ({ id, pid, deep, name }))
+const placesById = new Map<number, Place>(places.map((place) => [place.id, place]))
+const childrenByParent = new Map<number, Place[]>()
+
+for (const place of places) {
+  const children = childrenByParent.get(place.pid) ?? []
+  children.push(place)
+  childrenByParent.set(place.pid, children)
+}
+for (const children of childrenByParent.values()) {
+  children.sort((left, right) => left.name.localeCompare(right.name, 'zh-CN'))
+}
+
+const selectedIds = ref<number[]>([])
+const syncing = ref(false)
+const levelLabels = ['省份', '城市', '区县', '乡镇']
+
+function optionsFor(level: number) {
+  return computed(() => {
+    if (level === 0) return childrenByParent.get(0) ?? []
+    const parentId = selectedIds.value[level - 1]
+    return parentId ? (childrenByParent.get(parentId) ?? []) : []
+  })
+}
+
+const provinceOptions = optionsFor(0)
+const cityOptions = optionsFor(1)
+const districtOptions = optionsFor(2)
+const townOptions = optionsFor(3)
+
+function pathFor(place: Place) {
+  const path = [place]
+  let parent = placesById.get(place.pid)
+  while (parent) {
+    path.unshift(parent)
+    parent = placesById.get(parent.pid)
+  }
+  return path
+}
+
+function selectedName() {
+  if (selectedIds.value.length !== 4) return ''
+  return selectedIds.value
+    .map((id) => placesById.get(id)?.name)
+    .filter((name): name is string => Boolean(name))
+    .join(' / ')
+}
+
+function syncFromModel(value: string) {
+  const normalized = value.trim()
+  const matched = places.find((place) =>
+    place.deep === 3 && pathFor(place).map((item) => item.name).join(' / ') === normalized,
+  )
+  selectedIds.value = matched ? pathFor(matched).map((place) => place.id) : []
+}
+
+function changeLevel(level: number, id?: number) {
+  selectedIds.value = id ? [...selectedIds.value.slice(0, level), id] : selectedIds.value.slice(0, level)
+  if (!syncing.value) {
+    model.value = selectedName()
+  }
+}
+
+watch(model, (value) => {
+  if (!syncing.value) {
+    syncing.value = true
+    syncFromModel(value)
+    syncing.value = false
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="native-place-cascader">
+    <el-select :model-value="selectedIds[0]" :placeholder="levelLabels[0]" filterable clearable @update:model-value="(value) => changeLevel(0, value)">
+      <el-option v-for="option in provinceOptions" :key="option.id" :label="option.name" :value="option.id" />
+    </el-select>
+    <el-select :model-value="selectedIds[1]" :placeholder="levelLabels[1]" filterable clearable :disabled="!selectedIds[0]" @update:model-value="(value) => changeLevel(1, value)">
+      <el-option v-for="option in cityOptions" :key="option.id" :label="option.name" :value="option.id" />
+    </el-select>
+    <el-select :model-value="selectedIds[2]" :placeholder="levelLabels[2]" filterable clearable :disabled="!selectedIds[1]" @update:model-value="(value) => changeLevel(2, value)">
+      <el-option v-for="option in districtOptions" :key="option.id" :label="option.name" :value="option.id" />
+    </el-select>
+    <el-select :model-value="selectedIds[3]" :placeholder="levelLabels[3]" filterable clearable :disabled="!selectedIds[2]" @update:model-value="(value) => changeLevel(3, value)">
+      <el-option v-for="option in townOptions" :key="option.id" :label="option.name" :value="option.id" />
+    </el-select>
+  </div>
+</template>
+
+<style scoped>
+.native-place-cascader { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
+@media (max-width: 720px) { .native-place-cascader { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+</style>