diff --git a/package.json b/package.json
index eb9ce4d..9688f0f 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "canvas": "^3.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.479.0",
     "motion": "^12.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 90b094a..6bd0f56 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -1281,6 +1284,12 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -3625,6 +3634,18 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cmdk@1.1.1(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.0.10)(react@19.0.0)
+      '@radix-ui/react-dialog': 1.1.6(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.0.10)(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
diff --git a/src/app/globals.css b/src/app/globals.css
index 559df2b..78aac68 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,7 +11,7 @@
   --primary-text: oklch(1 0 0);
   --primary-weak: oklch(0.5 0 0);
 
-  --secondary: oklch(0.95 0 0);
+  --secondary: oklch(0.965 0 0);
   --secondary-text: oklch(0.25 0 0);
 
   --accent: oklch(0.769 0.188 70.08);
@@ -26,13 +26,14 @@
   --fail: oklch(0.65 0.16 25);
   --fail-text: oklch(1 0 0);
 
-  --card: oklch(0.975 0 0);
-  --card-foreground: oklch(0.25 0 0);
+  --card: oklch(0.985 0 0);
+  --card-text: oklch(0.25 0 0);
+
+  --muted: oklch(0.965 0 0);
+  --muted-text: oklch(0.25 0 0);
 
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.25 0 0);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
   --border: oklch(0.928 0.006 264.531);
   --input: oklch(0.928 0.006 264.531);
   --ring: oklch(0.882 0.059 254.128);
@@ -76,11 +77,11 @@
   --color-fail-foreground: var(--fail-text);
 
   --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
+  --color-card-foreground: var(--card-text);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
   --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
+  --color-muted-foreground: var(--muted-text);
   --color-destructive: var(--fail);
   --color-border: var(--border);
   --color-input: var(--input);
diff --git a/src/components/composites/extract/_assets/cities.json b/src/components/composites/extract/_assets/cities.json
new file mode 100644
index 0000000..1b68220
--- /dev/null
+++ b/src/components/composites/extract/_assets/cities.json
@@ -0,0 +1,1670 @@
+{
+  "options": [
+    {
+      "value": "上海市",
+      "label": "上海市",
+      "children": [
+        {
+          "value": "上海市",
+          "label": "上海市"
+        }
+      ]
+    },
+    {
+      "value": "云南省",
+      "label": "云南省",
+      "children": [
+        {
+          "value": "临沧市",
+          "label": "临沧市"
+        },
+        {
+          "value": "丽江市",
+          "label": "丽江市"
+        },
+        {
+          "value": "保山市",
+          "label": "保山市"
+        },
+        {
+          "value": "大理白族自治州",
+          "label": "大理白族自治州"
+        },
+        {
+          "value": "德宏傣族景颇族自治州",
+          "label": "德宏傣族景颇族自治州"
+        },
+        {
+          "value": "怒江傈僳族自治州",
+          "label": "怒江傈僳族自治州"
+        },
+        {
+          "value": "文山壮族苗族自治州",
+          "label": "文山壮族苗族自治州"
+        },
+        {
+          "value": "昆明市",
+          "label": "昆明市"
+        },
+        {
+          "value": "昭通市",
+          "label": "昭通市"
+        },
+        {
+          "value": "普洱市",
+          "label": "普洱市"
+        },
+        {
+          "value": "曲靖市",
+          "label": "曲靖市"
+        },
+        {
+          "value": "楚雄彝族自治州",
+          "label": "楚雄彝族自治州"
+        },
+        {
+          "value": "玉溪市",
+          "label": "玉溪市"
+        },
+        {
+          "value": "红河哈尼族彝族自治州",
+          "label": "红河哈尼族彝族自治州"
+        },
+        {
+          "value": "西双版纳傣族自治州",
+          "label": "西双版纳傣族自治州"
+        },
+        {
+          "value": "迪庆藏族自治州",
+          "label": "迪庆藏族自治州"
+        }
+      ]
+    },
+    {
+      "value": "内蒙古自治区",
+      "label": "内蒙古自治区",
+      "children": [
+        {
+          "value": "乌兰察布市",
+          "label": "乌兰察布市"
+        },
+        {
+          "value": "乌海市",
+          "label": "乌海市"
+        },
+        {
+          "value": "兴安盟",
+          "label": "兴安盟"
+        },
+        {
+          "value": "包头市",
+          "label": "包头市"
+        },
+        {
+          "value": "呼伦贝尔市",
+          "label": "呼伦贝尔市"
+        },
+        {
+          "value": "呼和浩特市",
+          "label": "呼和浩特市"
+        },
+        {
+          "value": "巴彦淖尔市",
+          "label": "巴彦淖尔市"
+        },
+        {
+          "value": "赤峰市",
+          "label": "赤峰市"
+        },
+        {
+          "value": "通辽市",
+          "label": "通辽市"
+        },
+        {
+          "value": "鄂尔多斯市",
+          "label": "鄂尔多斯市"
+        },
+        {
+          "value": "锡林郭勒盟",
+          "label": "锡林郭勒盟"
+        },
+        {
+          "value": "阿拉善盟",
+          "label": "阿拉善盟"
+        }
+      ]
+    },
+    {
+      "value": "北京市",
+      "label": "北京市",
+      "children": [
+        {
+          "value": "北京市",
+          "label": "北京市"
+        }
+      ]
+    },
+    {
+      "value": "吉林省",
+      "label": "吉林省",
+      "children": [
+        {
+          "value": "吉林市",
+          "label": "吉林市"
+        },
+        {
+          "value": "四平市",
+          "label": "四平市"
+        },
+        {
+          "value": "延边朝鲜族自治州",
+          "label": "延边朝鲜族自治州"
+        },
+        {
+          "value": "松原市",
+          "label": "松原市"
+        },
+        {
+          "value": "白城市",
+          "label": "白城市"
+        },
+        {
+          "value": "白山市",
+          "label": "白山市"
+        },
+        {
+          "value": "辽源市",
+          "label": "辽源市"
+        },
+        {
+          "value": "通化市",
+          "label": "通化市"
+        },
+        {
+          "value": "长春市",
+          "label": "长春市"
+        }
+      ]
+    },
+    {
+      "value": "四川省",
+      "label": "四川省",
+      "children": [
+        {
+          "value": "乐山市",
+          "label": "乐山市"
+        },
+        {
+          "value": "内江市",
+          "label": "内江市"
+        },
+        {
+          "value": "凉山市",
+          "label": "凉山市"
+        },
+        {
+          "value": "凉山彝族自治州",
+          "label": "凉山彝族自治州"
+        },
+        {
+          "value": "南充市",
+          "label": "南充市"
+        },
+        {
+          "value": "太原市",
+          "label": "太原市"
+        },
+        {
+          "value": "宜宾市",
+          "label": "宜宾市"
+        },
+        {
+          "value": "巴中市",
+          "label": "巴中市"
+        },
+        {
+          "value": "广元市",
+          "label": "广元市"
+        },
+        {
+          "value": "广安市",
+          "label": "广安市"
+        },
+        {
+          "value": "德阳市",
+          "label": "德阳市"
+        },
+        {
+          "value": "成都市",
+          "label": "成都市"
+        },
+        {
+          "value": "攀枝花市",
+          "label": "攀枝花市"
+        },
+        {
+          "value": "泸州市",
+          "label": "泸州市"
+        },
+        {
+          "value": "甘孜藏族自治州",
+          "label": "甘孜藏族自治州"
+        },
+        {
+          "value": "眉山市",
+          "label": "眉山市"
+        },
+        {
+          "value": "绵阳市",
+          "label": "绵阳市"
+        },
+        {
+          "value": "自贡市",
+          "label": "自贡市"
+        },
+        {
+          "value": "资阳市",
+          "label": "资阳市"
+        },
+        {
+          "value": "达州市",
+          "label": "达州市"
+        },
+        {
+          "value": "遂宁市",
+          "label": "遂宁市"
+        },
+        {
+          "value": "阿坝藏族羌族自治州",
+          "label": "阿坝藏族羌族自治州"
+        },
+        {
+          "value": "雅安市",
+          "label": "雅安市"
+        }
+      ]
+    },
+    {
+      "value": "天津市",
+      "label": "天津市",
+      "children": [
+        {
+          "value": "天津市",
+          "label": "天津市"
+        }
+      ]
+    },
+    {
+      "value": "宁夏回族自治区",
+      "label": "宁夏回族自治区",
+      "children": [
+        {
+          "value": "中卫市",
+          "label": "中卫市"
+        },
+        {
+          "value": "吴忠市",
+          "label": "吴忠市"
+        },
+        {
+          "value": "固原市",
+          "label": "固原市"
+        },
+        {
+          "value": "石嘴山市",
+          "label": "石嘴山市"
+        },
+        {
+          "value": "银川市",
+          "label": "银川市"
+        }
+      ]
+    },
+    {
+      "value": "安徽省",
+      "label": "安徽省",
+      "children": [
+        {
+          "value": "亳州市",
+          "label": "亳州市"
+        },
+        {
+          "value": "六安市",
+          "label": "六安市"
+        },
+        {
+          "value": "合肥市",
+          "label": "合肥市"
+        },
+        {
+          "value": "安庆市",
+          "label": "安庆市"
+        },
+        {
+          "value": "宣城市",
+          "label": "宣城市"
+        },
+        {
+          "value": "宿州市",
+          "label": "宿州市"
+        },
+        {
+          "value": "池州市",
+          "label": "池州市"
+        },
+        {
+          "value": "淮北市",
+          "label": "淮北市"
+        },
+        {
+          "value": "淮南市",
+          "label": "淮南市"
+        },
+        {
+          "value": "滁州市",
+          "label": "滁州市"
+        },
+        {
+          "value": "芜湖市",
+          "label": "芜湖市"
+        },
+        {
+          "value": "蚌埠市",
+          "label": "蚌埠市"
+        },
+        {
+          "value": "铜陵市",
+          "label": "铜陵市"
+        },
+        {
+          "value": "阜阳市",
+          "label": "阜阳市"
+        },
+        {
+          "value": "马鞍山市",
+          "label": "马鞍山市"
+        },
+        {
+          "value": "黄山市",
+          "label": "黄山市"
+        }
+      ]
+    },
+    {
+      "value": "山东省",
+      "label": "山东省",
+      "children": [
+        {
+          "value": "东营市",
+          "label": "东营市"
+        },
+        {
+          "value": "临沂市",
+          "label": "临沂市"
+        },
+        {
+          "value": "威海市",
+          "label": "威海市"
+        },
+        {
+          "value": "德州市",
+          "label": "德州市"
+        },
+        {
+          "value": "日照市",
+          "label": "日照市"
+        },
+        {
+          "value": "枣庄市",
+          "label": "枣庄市"
+        },
+        {
+          "value": "泰安市",
+          "label": "泰安市"
+        },
+        {
+          "value": "济南市",
+          "label": "济南市"
+        },
+        {
+          "value": "济宁市",
+          "label": "济宁市"
+        },
+        {
+          "value": "淄博市",
+          "label": "淄博市"
+        },
+        {
+          "value": "滨州市",
+          "label": "滨州市"
+        },
+        {
+          "value": "潍坊市",
+          "label": "潍坊市"
+        },
+        {
+          "value": "烟台市",
+          "label": "烟台市"
+        },
+        {
+          "value": "聊城市",
+          "label": "聊城市"
+        },
+        {
+          "value": "菏泽市",
+          "label": "菏泽市"
+        },
+        {
+          "value": "青岛市",
+          "label": "青岛市"
+        }
+      ]
+    },
+    {
+      "value": "山西省",
+      "label": "山西省",
+      "children": [
+        {
+          "value": "临汾市",
+          "label": "临汾市"
+        },
+        {
+          "value": "吕梁市",
+          "label": "吕梁市"
+        },
+        {
+          "value": "大同市",
+          "label": "大同市"
+        },
+        {
+          "value": "太原市",
+          "label": "太原市"
+        },
+        {
+          "value": "忻州市",
+          "label": "忻州市"
+        },
+        {
+          "value": "晋中市",
+          "label": "晋中市"
+        },
+        {
+          "value": "晋城市",
+          "label": "晋城市"
+        },
+        {
+          "value": "朔州市",
+          "label": "朔州市"
+        },
+        {
+          "value": "运城市",
+          "label": "运城市"
+        },
+        {
+          "value": "长治市",
+          "label": "长治市"
+        },
+        {
+          "value": "阳泉市",
+          "label": "阳泉市"
+        }
+      ]
+    },
+    {
+      "value": "广东省",
+      "label": "广东省",
+      "children": [
+        {
+          "value": "东莞市",
+          "label": "东莞市"
+        },
+        {
+          "value": "中山市",
+          "label": "中山市"
+        },
+        {
+          "value": "云浮市",
+          "label": "云浮市"
+        },
+        {
+          "value": "佛山市",
+          "label": "佛山市"
+        },
+        {
+          "value": "广州市",
+          "label": "广州市"
+        },
+        {
+          "value": "惠州市",
+          "label": "惠州市"
+        },
+        {
+          "value": "揭阳市",
+          "label": "揭阳市"
+        },
+        {
+          "value": "梅州市",
+          "label": "梅州市"
+        },
+        {
+          "value": "汕头市",
+          "label": "汕头市"
+        },
+        {
+          "value": "汕尾市",
+          "label": "汕尾市"
+        },
+        {
+          "value": "江门市",
+          "label": "江门市"
+        },
+        {
+          "value": "河源市",
+          "label": "河源市"
+        },
+        {
+          "value": "深圳市",
+          "label": "深圳市"
+        },
+        {
+          "value": "清远市",
+          "label": "清远市"
+        },
+        {
+          "value": "湛江市",
+          "label": "湛江市"
+        },
+        {
+          "value": "潮州市",
+          "label": "潮州市"
+        },
+        {
+          "value": "珠海市",
+          "label": "珠海市"
+        },
+        {
+          "value": "肇庆市",
+          "label": "肇庆市"
+        },
+        {
+          "value": "茂名市",
+          "label": "茂名市"
+        },
+        {
+          "value": "阳江市",
+          "label": "阳江市"
+        },
+        {
+          "value": "韶关市",
+          "label": "韶关市"
+        }
+      ]
+    },
+    {
+      "value": "广西壮族自治区",
+      "label": "广西壮族自治区",
+      "children": [
+        {
+          "value": "北海市",
+          "label": "北海市"
+        },
+        {
+          "value": "南宁市",
+          "label": "南宁市"
+        },
+        {
+          "value": "崇左市",
+          "label": "崇左市"
+        },
+        {
+          "value": "来宾市",
+          "label": "来宾市"
+        },
+        {
+          "value": "柳州市",
+          "label": "柳州市"
+        },
+        {
+          "value": "桂林市",
+          "label": "桂林市"
+        },
+        {
+          "value": "梧州市",
+          "label": "梧州市"
+        },
+        {
+          "value": "河池市",
+          "label": "河池市"
+        },
+        {
+          "value": "玉林市",
+          "label": "玉林市"
+        },
+        {
+          "value": "百色市",
+          "label": "百色市"
+        },
+        {
+          "value": "贵港市",
+          "label": "贵港市"
+        },
+        {
+          "value": "贺州市",
+          "label": "贺州市"
+        },
+        {
+          "value": "钦州市",
+          "label": "钦州市"
+        },
+        {
+          "value": "防城港市",
+          "label": "防城港市"
+        }
+      ]
+    },
+    {
+      "value": "新疆维吾尔自治区",
+      "label": "新疆维吾尔自治区",
+      "children": [
+        {
+          "value": "乌鲁木齐市",
+          "label": "乌鲁木齐市"
+        },
+        {
+          "value": "五家渠市",
+          "label": "五家渠市"
+        },
+        {
+          "value": "伊犁哈萨克自治州",
+          "label": "伊犁哈萨克自治州"
+        },
+        {
+          "value": "克孜勒苏柯尔克孜自治州",
+          "label": "克孜勒苏柯尔克孜自治州"
+        },
+        {
+          "value": "克拉玛依市",
+          "label": "克拉玛依市"
+        },
+        {
+          "value": "北屯市",
+          "label": "北屯市"
+        },
+        {
+          "value": "博尔塔拉蒙古自治州",
+          "label": "博尔塔拉蒙古自治州"
+        },
+        {
+          "value": "双河市",
+          "label": "双河市"
+        },
+        {
+          "value": "可克达拉市",
+          "label": "可克达拉市"
+        },
+        {
+          "value": "吐鲁番市",
+          "label": "吐鲁番市"
+        },
+        {
+          "value": "和田地区",
+          "label": "和田地区"
+        },
+        {
+          "value": "哈密市",
+          "label": "哈密市"
+        },
+        {
+          "value": "喀什地区",
+          "label": "喀什地区"
+        },
+        {
+          "value": "图木舒克市",
+          "label": "图木舒克市"
+        },
+        {
+          "value": "塔城地区",
+          "label": "塔城地区"
+        },
+        {
+          "value": "巴音郭楞蒙古自治州",
+          "label": "巴音郭楞蒙古自治州"
+        },
+        {
+          "value": "昌吉回族自治州",
+          "label": "昌吉回族自治州"
+        },
+        {
+          "value": "石河子市",
+          "label": "石河子市"
+        },
+        {
+          "value": "胡杨河市",
+          "label": "胡杨河市"
+        },
+        {
+          "value": "铁门关市",
+          "label": "铁门关市"
+        },
+        {
+          "value": "阿克苏地区",
+          "label": "阿克苏地区"
+        },
+        {
+          "value": "阿勒泰地区",
+          "label": "阿勒泰地区"
+        },
+        {
+          "value": "阿拉尔市",
+          "label": "阿拉尔市"
+        }
+      ]
+    },
+    {
+      "value": "江苏省",
+      "label": "江苏省",
+      "children": [
+        {
+          "value": "南京市",
+          "label": "南京市"
+        },
+        {
+          "value": "南通市",
+          "label": "南通市"
+        },
+        {
+          "value": "宿迁市",
+          "label": "宿迁市"
+        },
+        {
+          "value": "常州市",
+          "label": "常州市"
+        },
+        {
+          "value": "徐州市",
+          "label": "徐州市"
+        },
+        {
+          "value": "扬州市",
+          "label": "扬州市"
+        },
+        {
+          "value": "无锡市",
+          "label": "无锡市"
+        },
+        {
+          "value": "泰州市",
+          "label": "泰州市"
+        },
+        {
+          "value": "淮安市",
+          "label": "淮安市"
+        },
+        {
+          "value": "盐城市",
+          "label": "盐城市"
+        },
+        {
+          "value": "苏州市",
+          "label": "苏州市"
+        },
+        {
+          "value": "连云港市",
+          "label": "连云港市"
+        },
+        {
+          "value": "镇江市",
+          "label": "镇江市"
+        }
+      ]
+    },
+    {
+      "value": "江西省",
+      "label": "江西省",
+      "children": [
+        {
+          "value": "上饶市",
+          "label": "上饶市"
+        },
+        {
+          "value": "九江市",
+          "label": "九江市"
+        },
+        {
+          "value": "南昌市",
+          "label": "南昌市"
+        },
+        {
+          "value": "吉安市",
+          "label": "吉安市"
+        },
+        {
+          "value": "宜春市",
+          "label": "宜春市"
+        },
+        {
+          "value": "抚州市",
+          "label": "抚州市"
+        },
+        {
+          "value": "新余市",
+          "label": "新余市"
+        },
+        {
+          "value": "景德镇市",
+          "label": "景德镇市"
+        },
+        {
+          "value": "萍乡市",
+          "label": "萍乡市"
+        },
+        {
+          "value": "赣州市",
+          "label": "赣州市"
+        },
+        {
+          "value": "鹰潭市",
+          "label": "鹰潭市"
+        }
+      ]
+    },
+    {
+      "value": "河北省",
+      "label": "河北省",
+      "children": [
+        {
+          "value": "保定市",
+          "label": "保定市"
+        },
+        {
+          "value": "唐山市",
+          "label": "唐山市"
+        },
+        {
+          "value": "廊坊市",
+          "label": "廊坊市"
+        },
+        {
+          "value": "张家口市",
+          "label": "张家口市"
+        },
+        {
+          "value": "承德市",
+          "label": "承德市"
+        },
+        {
+          "value": "沧州市",
+          "label": "沧州市"
+        },
+        {
+          "value": "石家庄市",
+          "label": "石家庄市"
+        },
+        {
+          "value": "秦皇岛市",
+          "label": "秦皇岛市"
+        },
+        {
+          "value": "衡水市",
+          "label": "衡水市"
+        },
+        {
+          "value": "邢台市",
+          "label": "邢台市"
+        },
+        {
+          "value": "邯郸市",
+          "label": "邯郸市"
+        }
+      ]
+    },
+    {
+      "value": "河南省",
+      "label": "河南省",
+      "children": [
+        {
+          "value": "三门峡市",
+          "label": "三门峡市"
+        },
+        {
+          "value": "信阳市",
+          "label": "信阳市"
+        },
+        {
+          "value": "南阳市",
+          "label": "南阳市"
+        },
+        {
+          "value": "周口市",
+          "label": "周口市"
+        },
+        {
+          "value": "商丘市",
+          "label": "商丘市"
+        },
+        {
+          "value": "安阳市",
+          "label": "安阳市"
+        },
+        {
+          "value": "平顶山市",
+          "label": "平顶山市"
+        },
+        {
+          "value": "开封市",
+          "label": "开封市"
+        },
+        {
+          "value": "新乡市",
+          "label": "新乡市"
+        },
+        {
+          "value": "洛阳市",
+          "label": "洛阳市"
+        },
+        {
+          "value": "济源市",
+          "label": "济源市"
+        },
+        {
+          "value": "漯河市",
+          "label": "漯河市"
+        },
+        {
+          "value": "濮阳市",
+          "label": "濮阳市"
+        },
+        {
+          "value": "焦作市",
+          "label": "焦作市"
+        },
+        {
+          "value": "许昌市",
+          "label": "许昌市"
+        },
+        {
+          "value": "郑州市",
+          "label": "郑州市"
+        },
+        {
+          "value": "驻马店市",
+          "label": "驻马店市"
+        },
+        {
+          "value": "鹤壁市",
+          "label": "鹤壁市"
+        }
+      ]
+    },
+    {
+      "value": "浙江省",
+      "label": "浙江省",
+      "children": [
+        {
+          "value": "丽水市",
+          "label": "丽水市"
+        },
+        {
+          "value": "台州市",
+          "label": "台州市"
+        },
+        {
+          "value": "嘉兴市",
+          "label": "嘉兴市"
+        },
+        {
+          "value": "宁波市",
+          "label": "宁波市"
+        },
+        {
+          "value": "杭州市",
+          "label": "杭州市"
+        },
+        {
+          "value": "温州市",
+          "label": "温州市"
+        },
+        {
+          "value": "湖州市",
+          "label": "湖州市"
+        },
+        {
+          "value": "绍兴市",
+          "label": "绍兴市"
+        },
+        {
+          "value": "舟山市",
+          "label": "舟山市"
+        },
+        {
+          "value": "衢州市",
+          "label": "衢州市"
+        },
+        {
+          "value": "金华市",
+          "label": "金华市"
+        }
+      ]
+    },
+    {
+      "value": "海南省",
+      "label": "海南省",
+      "children": [
+        {
+          "value": "万宁市",
+          "label": "万宁市"
+        },
+        {
+          "value": "三亚市",
+          "label": "三亚市"
+        },
+        {
+          "value": "东方市",
+          "label": "东方市"
+        },
+        {
+          "value": "临高县",
+          "label": "临高县"
+        },
+        {
+          "value": "乐东市",
+          "label": "乐东市"
+        },
+        {
+          "value": "乐东黎族自治县",
+          "label": "乐东黎族自治县"
+        },
+        {
+          "value": "五指山市",
+          "label": "五指山市"
+        },
+        {
+          "value": "保亭黎族苗族自治县",
+          "label": "保亭黎族苗族自治县"
+        },
+        {
+          "value": "儋州市",
+          "label": "儋州市"
+        },
+        {
+          "value": "定安县",
+          "label": "定安县"
+        },
+        {
+          "value": "屯昌县",
+          "label": "屯昌县"
+        },
+        {
+          "value": "文昌市",
+          "label": "文昌市"
+        },
+        {
+          "value": "昌江黎族自治县",
+          "label": "昌江黎族自治县"
+        },
+        {
+          "value": "海口市",
+          "label": "海口市"
+        },
+        {
+          "value": "澄迈县",
+          "label": "澄迈县"
+        },
+        {
+          "value": "澄迈市",
+          "label": "澄迈市"
+        },
+        {
+          "value": "琼中黎族苗族自治县",
+          "label": "琼中黎族苗族自治县"
+        },
+        {
+          "value": "琼海市",
+          "label": "琼海市"
+        },
+        {
+          "value": "白沙黎族自治县",
+          "label": "白沙黎族自治县"
+        },
+        {
+          "value": "陵水黎族自治县",
+          "label": "陵水黎族自治县"
+        }
+      ]
+    },
+    {
+      "value": "湖北省",
+      "label": "湖北省",
+      "children": [
+        {
+          "value": "仙桃市",
+          "label": "仙桃市"
+        },
+        {
+          "value": "十堰市",
+          "label": "十堰市"
+        },
+        {
+          "value": "咸宁市",
+          "label": "咸宁市"
+        },
+        {
+          "value": "天门市",
+          "label": "天门市"
+        },
+        {
+          "value": "孝感市",
+          "label": "孝感市"
+        },
+        {
+          "value": "宜昌市",
+          "label": "宜昌市"
+        },
+        {
+          "value": "恩施土家族苗族自治州",
+          "label": "恩施土家族苗族自治州"
+        },
+        {
+          "value": "武汉市",
+          "label": "武汉市"
+        },
+        {
+          "value": "潜江市",
+          "label": "潜江市"
+        },
+        {
+          "value": "神农架林区",
+          "label": "神农架林区"
+        },
+        {
+          "value": "荆州市",
+          "label": "荆州市"
+        },
+        {
+          "value": "荆门市",
+          "label": "荆门市"
+        },
+        {
+          "value": "襄阳市",
+          "label": "襄阳市"
+        },
+        {
+          "value": "鄂州市",
+          "label": "鄂州市"
+        },
+        {
+          "value": "随州市",
+          "label": "随州市"
+        },
+        {
+          "value": "黄冈市",
+          "label": "黄冈市"
+        },
+        {
+          "value": "黄石市",
+          "label": "黄石市"
+        }
+      ]
+    },
+    {
+      "value": "湖南省",
+      "label": "湖南省",
+      "children": [
+        {
+          "value": "娄底市",
+          "label": "娄底市"
+        },
+        {
+          "value": "岳阳市",
+          "label": "岳阳市"
+        },
+        {
+          "value": "常德市",
+          "label": "常德市"
+        },
+        {
+          "value": "张家界市",
+          "label": "张家界市"
+        },
+        {
+          "value": "怀化市",
+          "label": "怀化市"
+        },
+        {
+          "value": "株洲市",
+          "label": "株洲市"
+        },
+        {
+          "value": "永州市",
+          "label": "永州市"
+        },
+        {
+          "value": "湘潭市",
+          "label": "湘潭市"
+        },
+        {
+          "value": "湘西土家族苗族自治州",
+          "label": "湘西土家族苗族自治州"
+        },
+        {
+          "value": "益阳市",
+          "label": "益阳市"
+        },
+        {
+          "value": "衡阳市",
+          "label": "衡阳市"
+        },
+        {
+          "value": "邵阳市",
+          "label": "邵阳市"
+        },
+        {
+          "value": "郴州市",
+          "label": "郴州市"
+        },
+        {
+          "value": "长沙市",
+          "label": "长沙市"
+        }
+      ]
+    },
+    {
+      "value": "甘肃省",
+      "label": "甘肃省",
+      "children": [
+        {
+          "value": "临夏回族自治州",
+          "label": "临夏回族自治州"
+        },
+        {
+          "value": "临夏市",
+          "label": "临夏市"
+        },
+        {
+          "value": "兰州市",
+          "label": "兰州市"
+        },
+        {
+          "value": "嘉峪关市",
+          "label": "嘉峪关市"
+        },
+        {
+          "value": "天水市",
+          "label": "天水市"
+        },
+        {
+          "value": "定西市",
+          "label": "定西市"
+        },
+        {
+          "value": "平凉市",
+          "label": "平凉市"
+        },
+        {
+          "value": "庆阳市",
+          "label": "庆阳市"
+        },
+        {
+          "value": "张掖市",
+          "label": "张掖市"
+        },
+        {
+          "value": "武威市",
+          "label": "武威市"
+        },
+        {
+          "value": "甘南藏族自治州",
+          "label": "甘南藏族自治州"
+        },
+        {
+          "value": "白银市",
+          "label": "白银市"
+        },
+        {
+          "value": "酒泉市",
+          "label": "酒泉市"
+        },
+        {
+          "value": "金昌市",
+          "label": "金昌市"
+        },
+        {
+          "value": "陇南市",
+          "label": "陇南市"
+        }
+      ]
+    },
+    {
+      "value": "福建省",
+      "label": "福建省",
+      "children": [
+        {
+          "value": "三明市",
+          "label": "三明市"
+        },
+        {
+          "value": "南平市",
+          "label": "南平市"
+        },
+        {
+          "value": "厦门市",
+          "label": "厦门市"
+        },
+        {
+          "value": "宁德市",
+          "label": "宁德市"
+        },
+        {
+          "value": "泉州市",
+          "label": "泉州市"
+        },
+        {
+          "value": "漳州市",
+          "label": "漳州市"
+        },
+        {
+          "value": "福州市",
+          "label": "福州市"
+        },
+        {
+          "value": "莆田市",
+          "label": "莆田市"
+        },
+        {
+          "value": "龙岩市",
+          "label": "龙岩市"
+        }
+      ]
+    },
+    {
+      "value": "西藏自治区",
+      "label": "西藏自治区",
+      "children": [
+        {
+          "value": "山南市",
+          "label": "山南市"
+        },
+        {
+          "value": "拉萨市",
+          "label": "拉萨市"
+        },
+        {
+          "value": "日喀则市",
+          "label": "日喀则市"
+        },
+        {
+          "value": "昌都市",
+          "label": "昌都市"
+        },
+        {
+          "value": "林芝市",
+          "label": "林芝市"
+        },
+        {
+          "value": "那曲市",
+          "label": "那曲市"
+        },
+        {
+          "value": "阿里地区",
+          "label": "阿里地区"
+        }
+      ]
+    },
+    {
+      "value": "贵州省",
+      "label": "贵州省",
+      "children": [
+        {
+          "value": "六盘水市",
+          "label": "六盘水市"
+        },
+        {
+          "value": "安顺市",
+          "label": "安顺市"
+        },
+        {
+          "value": "毕节市",
+          "label": "毕节市"
+        },
+        {
+          "value": "贵阳市",
+          "label": "贵阳市"
+        },
+        {
+          "value": "遵义市",
+          "label": "遵义市"
+        },
+        {
+          "value": "铜仁市",
+          "label": "铜仁市"
+        },
+        {
+          "value": "黔东南苗族侗族自治州",
+          "label": "黔东南苗族侗族自治州"
+        },
+        {
+          "value": "黔南布依族苗族自治州",
+          "label": "黔南布依族苗族自治州"
+        },
+        {
+          "value": "黔西南布依族苗族自治州",
+          "label": "黔西南布依族苗族自治州"
+        }
+      ]
+    },
+    {
+      "value": "辽宁省",
+      "label": "辽宁省",
+      "children": [
+        {
+          "value": "丹东市",
+          "label": "丹东市"
+        },
+        {
+          "value": "大连市",
+          "label": "大连市"
+        },
+        {
+          "value": "抚顺市",
+          "label": "抚顺市"
+        },
+        {
+          "value": "朝阳市",
+          "label": "朝阳市"
+        },
+        {
+          "value": "本溪市",
+          "label": "本溪市"
+        },
+        {
+          "value": "沈阳市",
+          "label": "沈阳市"
+        },
+        {
+          "value": "盘锦市",
+          "label": "盘锦市"
+        },
+        {
+          "value": "营口市",
+          "label": "营口市"
+        },
+        {
+          "value": "葫芦岛市",
+          "label": "葫芦岛市"
+        },
+        {
+          "value": "辽阳市",
+          "label": "辽阳市"
+        },
+        {
+          "value": "铁岭市",
+          "label": "铁岭市"
+        },
+        {
+          "value": "锦州市",
+          "label": "锦州市"
+        },
+        {
+          "value": "阜新市",
+          "label": "阜新市"
+        },
+        {
+          "value": "鞍山市",
+          "label": "鞍山市"
+        }
+      ]
+    },
+    {
+      "value": "重庆市",
+      "label": "重庆市",
+      "children": [
+        {
+          "value": "重庆市",
+          "label": "重庆市"
+        }
+      ]
+    },
+    {
+      "value": "陕西省",
+      "label": "陕西省",
+      "children": [
+        {
+          "value": "咸阳市",
+          "label": "咸阳市"
+        },
+        {
+          "value": "商洛市",
+          "label": "商洛市"
+        },
+        {
+          "value": "安康市",
+          "label": "安康市"
+        },
+        {
+          "value": "宝鸡市",
+          "label": "宝鸡市"
+        },
+        {
+          "value": "延安市",
+          "label": "延安市"
+        },
+        {
+          "value": "榆林市",
+          "label": "榆林市"
+        },
+        {
+          "value": "汉中市",
+          "label": "汉中市"
+        },
+        {
+          "value": "渭南市",
+          "label": "渭南市"
+        },
+        {
+          "value": "西安市",
+          "label": "西安市"
+        },
+        {
+          "value": "铜川市",
+          "label": "铜川市"
+        }
+      ]
+    },
+    {
+      "value": "青海省",
+      "label": "青海省",
+      "children": [
+        {
+          "value": "果洛藏族自治州",
+          "label": "果洛藏族自治州"
+        },
+        {
+          "value": "海东市",
+          "label": "海东市"
+        },
+        {
+          "value": "海北藏族自治州",
+          "label": "海北藏族自治州"
+        },
+        {
+          "value": "海南藏族自治州",
+          "label": "海南藏族自治州"
+        },
+        {
+          "value": "海西蒙古族藏族自治州",
+          "label": "海西蒙古族藏族自治州"
+        },
+        {
+          "value": "玉树藏族自治州",
+          "label": "玉树藏族自治州"
+        },
+        {
+          "value": "西宁市",
+          "label": "西宁市"
+        },
+        {
+          "value": "黄南藏族自治州",
+          "label": "黄南藏族自治州"
+        }
+      ]
+    },
+    {
+      "value": "黑龙江省",
+      "label": "黑龙江省",
+      "children": [
+        {
+          "value": "七台河市",
+          "label": "七台河市"
+        },
+        {
+          "value": "伊春市",
+          "label": "伊春市"
+        },
+        {
+          "value": "佳木斯市",
+          "label": "佳木斯市"
+        },
+        {
+          "value": "双鸭山市",
+          "label": "双鸭山市"
+        },
+        {
+          "value": "哈尔滨市",
+          "label": "哈尔滨市"
+        },
+        {
+          "value": "大兴安岭地区",
+          "label": "大兴安岭地区"
+        },
+        {
+          "value": "大庆市",
+          "label": "大庆市"
+        },
+        {
+          "value": "牡丹江市",
+          "label": "牡丹江市"
+        },
+        {
+          "value": "绥化市",
+          "label": "绥化市"
+        },
+        {
+          "value": "鸡西市",
+          "label": "鸡西市"
+        },
+        {
+          "value": "鹤岗市",
+          "label": "鹤岗市"
+        },
+        {
+          "value": "黑河市",
+          "label": "黑河市"
+        },
+        {
+          "value": "齐齐哈尔市",
+          "label": "齐齐哈尔市"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/components/composites/extract/index.tsx b/src/components/composites/extract/index.tsx
index b3f055e..693ab40 100644
--- a/src/components/composites/extract/index.tsx
+++ b/src/components/composites/extract/index.tsx
@@ -14,10 +14,10 @@ import {useStatus} from '@/lib/states'
 import {allResource} from '@/actions/resource'
 import {Resource, name} from '@/lib/models'
 import {format, intlFormatDistance} from 'date-fns'
-import {usePathname} from 'next/navigation'
 import {toast} from 'sonner'
 import {merge} from '@/lib/utils'
-
+import {Combobox} from '@/components/ui/combobox'
+import cities from './_assets/cities.json'
 
 type ExtractProps = {
   className?: string
@@ -34,7 +34,7 @@ export default function Extract(props: ExtractProps) {
     regionType: z.enum(['unlimited', 'specific']).default('unlimited'),
     isp: z.enum(['all', '1', '2', '3'], {required_error: '请选择运营商'}),
     proto: z.enum(['all', '1', '2', '3'], {required_error: '请选择协议'}),
-    authType: z.enum([ '1', '2'], {required_error: '请选择认证方式'}),
+    authType: z.enum(['1', '2'], {required_error: '请选择认证方式'}),
     distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
     format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
     separator: z.string({required_error: '请选择分隔符'}),
@@ -78,8 +78,10 @@ export default function Extract(props: ExtractProps) {
     if (resource) sp.set('i', String(resource))
     if (authType) sp.set('t', authType)
     if (proto != 'all') sp.set('x', proto)
+
     if (prov) sp.set('a', prov)
     if (city) sp.set('b', city)
+
     if (isp != 'all') sp.set('s', isp)
     sp.set('d', distinct)
     sp.set('rt', formatType)
@@ -88,7 +90,7 @@ export default function Extract(props: ExtractProps) {
     sp.set('n', String(count))
 
     return `/proxies?${sp.toString()}`
-  }, [resource, prov, city, isp, proto, distinct, formatType, separator, breaker, count])
+  }, [resource, authType, proto, isp, distinct, formatType, separator, breaker, count, prov, city])
 
   const onSubmit = (values: z.infer<typeof schema>) => {
     console.log(values)
@@ -112,8 +114,17 @@ export default function Extract(props: ExtractProps) {
 
   useEffect(() => {
     getResources().then()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  // ======================
+  // form 中间变量
+  // ======================
+
+  // ======================
+  // render
+  // ======================
+
   return (
     <Form
       form={form}
@@ -166,7 +177,7 @@ export default function Extract(props: ExtractProps) {
                     </div>
                   ) : resources.map((resource, i) => (<>
                     <SelectItem
-                      key={`${resource.id}`} value={String(resource.id)} className={`p-3`}>
+                      key={`${resource.id}-${i}`} value={String(resource.id)} className={`p-3`}>
                       <div className={`flex flex-col gap-2 w-72`}>
                         {resource.type === 1 && resource.pss.type === 1 && (<>
                           <div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm`}>
@@ -204,7 +215,13 @@ export default function Extract(props: ExtractProps) {
           <FormField name="regionType" label={`地区筛选`}>
             {({id, field}) => (
               <RadioGroup
-                onValueChange={field.onChange}
+                onValueChange={(e) => {
+                  field.onChange(e)
+                  if (e === 'unlimited') {
+                    form.setValue('prov', '')
+                    form.setValue('city', '')
+                  }
+                }}
                 defaultValue={field.value}
                 className="flex gap-4"
               >
@@ -221,51 +238,16 @@ export default function Extract(props: ExtractProps) {
           </FormField>
 
           {regionType === 'specific' && (
-            <div className="flex gap-4">
-              <FormField name="prov" label="">
-                {({field}) => (
-                  <Select
-                    value={field.value}
-                    onValueChange={field.onChange}
-                  >
-                    <SelectTrigger className="w-40">
-                      <SelectValue placeholder="选择省份"/>
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="bj">北京</SelectItem>
-                      <SelectItem value="sh">上海</SelectItem>
-                      <SelectItem value="gd">广东</SelectItem>
-                      {/* 更多省份... */}
-                    </SelectContent>
-                  </Select>
-                )}
-              </FormField>
-
-              <FormField name="city" label="">
-                {({field}) => (
-                  <Select
-                    value={field.value}
-                    onValueChange={field.onChange}
-                    disabled={!form.watch('prov')}
-                  >
-                    <SelectTrigger className="w-40">
-                      <SelectValue placeholder="选择城市"/>
-                    </SelectTrigger>
-                    <SelectContent>
-                      {form.watch('prov') === 'bj' && <SelectItem value="bj01">北京市</SelectItem>}
-                      {form.watch('prov') === 'sh' && <SelectItem value="sh01">上海市</SelectItem>}
-                      {form.watch('prov') === 'gd' && (
-                        <>
-                          <SelectItem value="gz">广州</SelectItem>
-                          <SelectItem value="sz">深圳</SelectItem>
-                        </>
-                      )}
-                      {/* 更多城市... */}
-                    </SelectContent>
-                  </Select>
-                )}
-              </FormField>
-            </div>
+            <Combobox
+              className={`w-84`}
+              placeholder={`请选择地区`}
+              options={cities.options}
+              value={[prov || '', city || '']}
+              onChange={value => {
+                form.setValue('prov', value[0])
+                form.setValue('city', value[1])
+              }}
+            />
           )}
         </div>
 
@@ -463,7 +445,7 @@ export default function Extract(props: ExtractProps) {
         `border-t`,
       )}>
         {/* 展示链接地址 */}
-        <div className={`bg-card text-card-foreground p-4 rounded-md`}>
+        <div className={`bg-card text-card-foreground p-4 rounded-md break-all`}>
           {params}
         </div>
 
@@ -472,6 +454,7 @@ export default function Extract(props: ExtractProps) {
           <Button
             type="submit"
             onClick={async () => {
+              if (!form.formState.isValid) return
               const url = new URL(window.location.href).origin
               await navigator.clipboard.writeText(`${url}${params}`)
               toast.success('链接已复制到剪贴板')
@@ -483,7 +466,9 @@ export default function Extract(props: ExtractProps) {
           <Button
             type="submit"
             onClick={async () => {
+              if (!form.formState.isValid) return
               window.open(params, '_blank')
+
             }}
           >
             <ExternalLinkIcon/>
diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
new file mode 100644
index 0000000..3ba4ddd
--- /dev/null
+++ b/src/components/ui/combobox.tsx
@@ -0,0 +1,193 @@
+'use client'
+
+import * as React from 'react'
+import {CheckIcon, ChevronsUpDown} from 'lucide-react'
+
+import {merge} from '@/lib/utils'
+import {Button} from '@/components/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import {ReactNode, useRef, useState} from 'react'
+import {Input} from '@/components/ui/input'
+
+type ComboboxItem = {
+  value: string
+  label: ReactNode
+  alias?: string[]
+  children?: ComboboxItem[]
+  labelBuild?: (item: ComboboxItem) => string
+}
+
+type ComboboxProps = {
+  className?: string
+  placeholder?: string
+  options: ComboboxItem[]
+  value?: string[]
+  onChange?: (value: string[]) => void
+  children?: React.ReactNode
+}
+
+export function Combobox(props: ComboboxProps) {
+  const [open, setOpen] = useState(false)
+
+  const getLabel = (item: ComboboxItem) => {
+    return typeof item.label === 'object' || typeof item.label === 'function'
+      ? item.labelBuild?.(item)
+      : `${item?.label}`
+  }
+
+  let items: ComboboxItem[] | undefined = props.options
+  const label: string[] = []
+  const values: string[] = []
+  props.value?.forEach(value => {
+    if (items) {
+      const curr = items.find(item => item.value === value)
+      if (curr) {
+        items = curr.children
+        values.push(curr.value)
+        label.push(getLabel(curr) || '-')
+      }
+    }
+  })
+
+  const [wait, setWait] = useState(false)
+  const [filter, setFilter] = useState<string>('')
+  const [filtered, setFiltered] = useState<ComboboxItem[]>([])
+
+  const onFilter = async () => {
+    if (wait) return
+    const cond = filter.trim()
+    console.log('onFilter', cond)
+    setWait(true)
+    if (cond.length > 0) {
+      setFiltered(mapFilter(JSON.parse(JSON.stringify(props.options)), cond))
+    }
+    else {
+      setFiltered(props.options)
+    }
+    console.log('onFilter end')
+    setWait(false)
+  }
+
+  const mapFilter = (items: ComboboxItem[], cond: string): ComboboxItem[] => {
+    const nItems: ComboboxItem[] = []
+    items.forEach(item => {
+      const label = getLabel(item)
+      const match = label?.includes(cond)
+
+      if (item.children?.length) {
+        item.children = mapFilter(item.children, cond)
+      }
+
+      if (match || item.children?.length) {
+        nItems.push(item)
+      }
+    })
+    return nItems
+  }
+
+  return (
+    <Popover open={open} onOpenChange={(status) => {
+      setOpen(status)
+      if (status) {
+        setFiltered(props.options)
+        setFilter('')
+      }
+    }}>
+      <PopoverTrigger asChild>
+        <Button
+          theme="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={merge(
+            `flex justify-between`,
+            props.className,
+          )}
+        >
+          {label.length
+            ? <span className={`text-sm`}>{label.join('/')}</span>
+            : <span className={`text-sm text-weak`}>{props.placeholder}</span>
+          }
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50"/>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={`p-0 rounded-lg h-[var(--radix-popover-content-available-height)] flex flex-col overflow-hidden`}
+        align={`start`}
+        collisionPadding={6}
+      >
+        <div className={`p-2 flex gap-2 flex-none`}>
+          <Input
+            className={`h-9 placeholder:text-weak placeholder:text-sm`}
+            placeholder={`搜索地区`}
+            value={filter}
+            onChange={(event) => setFilter(event.target.value)}
+          />
+          <Button className={`h-9`} onClick={onFilter} disabled={wait}>
+            搜索
+          </Button>
+        </div>
+        <div className={`flex-auto overflow-auto p-2 pt-0`}>
+          <OptionList options={filtered} value={values} onChange={value => {
+            console.log(value.map(item => item.value))
+            props.onChange?.(value.map(item => item.value))
+            setOpen(false)
+          }}/>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function OptionList(props: {
+  options: ComboboxItem[]
+  value: string[]
+  onChange: (value: ComboboxItem[]) => void
+  path?: ComboboxItem[]
+  depth?: number
+}) {
+  const depth = props.depth || 0
+  const parent = props.path || []
+  const indent = depth * 16
+
+  return (
+    <ul style={{
+      marginLeft: `${indent}px`,
+    }}>
+      {props.options.map((item, i) => {
+        const path = [...parent, item]
+        const pathValue = path.map((item) => item.value)
+        const equal = pathValue.join(`.`) === props.value?.join('.')
+        return (
+          <li key={i}>
+            <OptionItem key={`${i}`} item={item} active={equal} onChange={() => props.onChange?.(path)}/>
+            {item.children?.length &&
+              <OptionList depth={depth + 1} options={item.children} value={props.value} path={path} onChange={props.onChange}/>
+            }
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+function OptionItem(props: {
+  key: string
+  item: ComboboxItem
+  active: boolean
+  onChange?: () => void
+}) {
+  return (
+    <div className={merge(
+      `transition-colors, duration-100 ease-in-out`,
+      `px-4 py-2 text-muted-foreground rounded-md`,
+      `flex justify-between items-center`,
+      `hover:bg-muted hover:text-foreground`,
+    )} onClick={props.onChange}>
+      {props.item.label}
+    </div>
+  )
+}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 0000000..4b1fd0e
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { merge } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={merge(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={merge(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={merge(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={merge(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={merge("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={merge(
+        "data-[selected=true]:bg-muted data-[selected=true]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={merge(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}