diff --git a/src/components/AreaCascader/index.vue b/src/components/AreaCascader/index.vue
new file mode 100644
index 0000000..4fdda43
--- /dev/null
+++ b/src/components/AreaCascader/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <n-cascader v-bind="getProps" @update:value="handleUpdate" />
+</template>
+
+<script>
+import { NCascader } from 'naive-ui'
+import { computed } from 'vue'
+export default {
+  name: 'AreaCascader',
+  props: {
+    ...NCascader.props,
+    showCheckbox: {
+      type: Boolean,
+      default: true
+    },
+    field: {
+      type: Array,
+      default: () => {
+        return ['province', 'city', 'distance']
+      }
+    }
+  },
+  emits: ['selectd'],
+  setup(props, { emit }) {
+    const getProps = computed(() => {
+      return {
+        ...props
+      }
+    })
+    function handleUpdate(value, option, pathValues) {
+      const field = props.field
+      const valueField = props.valueField
+      const filedJson = {}
+      field.forEach((item, index) => {
+        filedJson[item] = pathValues?.[index]?.[valueField] || ''
+      })
+      emit('selectd', filedJson)
+    }
+    function clearValue() {
+      handleUpdate(null, null, [])
+    }
+
+    return {
+      getProps,
+      handleUpdate,
+      clearValue
+    }
+  }
+}
+
+</script>
+<style scoped lang='scss'>
+</style>
diff --git a/src/components/Search/index.vue b/src/components/Search/index.vue
index e14aaa0..965342d 100644
--- a/src/components/Search/index.vue
+++ b/src/components/Search/index.vue
@@ -8,6 +8,9 @@
         <n-form-item v-if="['select'].includes(item.type) " :label="item.label">
           <n-select v-model:value="getFormOptions.form[item.key]" v-bind="item.props" />
         </n-form-item>
+        <n-form-item v-if="['cascader'].includes(item.type) " :label="item.label">
+          <AreaCascader :ref="el=>{itemRefs[item.refIndex] = el}" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" @selectd="handleSelect" />
+        </n-form-item>
         <n-form-item v-if="['date'].includes(item.type) " :label="item.label">
           <n-date-picker v-model="getFormOptions.form[item.key]" v-bind="item.props" />
         </n-form-item>
@@ -28,8 +31,10 @@
 <script>
 import { computed, reactive, ref, unref, toRaw } from 'vue'
 import { NForm } from 'naive-ui'
+import AreaCascader from '@/components/AreaCascader/index.vue'
 export default {
   name: 'SearchPage',
+  components: { AreaCascader },
   props: {
     ...NForm.props,
     info: {
@@ -41,6 +46,7 @@ export default {
   setup(props, { emit }) {
     const showItemNum = ref(3)
     const len = ref(props.info.length - 1)
+    const itemRefs = ref([])
     const showButton = ref(!!(showItemNum.value < len.value))
     /* 获取传递的props */
     const data = reactive({
@@ -50,10 +56,18 @@ export default {
     /* 初始化搜索表单信息 */
     function initForm() {
       data.info.forEach((item) => {
-        form.value[item.key] = null
+        if (item.key) form.value[item.key] = ''
+      })
+      itemRefs.value.forEach((item) => {
+        item.clearValue()
       })
     }
-
+    function handleSelect(data) {
+      form.value = {
+        ...form.value,
+        ...data
+      }
+    }
     const getFormOptions = computed(() => {
       return {
         form: unref(form),
@@ -79,6 +93,8 @@ export default {
       getFormOptions,
       handleSearch,
       handleReset,
+      handleSelect,
+      itemRefs,
       showMoreItem
     }
   }
@@ -96,6 +112,9 @@ export default {
   .n-select{
     width: 200px;
   }
+  .n-cascader{
+    width: 200px;
+  }
   transition: all 10s;
 }
 .form__button{