init

.env.localhost

 VITE_PUBLIC_PATH = '/'
 
 # 是否启用MOCK
-VITE_APP_USE_MOCK = false
+VITE_APP_USE_MOCK = true
 
 # proxy
 VITE_PROXY = [["/api-local","http://127.0.0.1:8002/api"],["/api-mock","http://127.0.0.1:8003"]]

mock/system/router.js

     path: '/system',
     component: 'Layout',
     redirect: '/system/menu',
+    pid: 0,
     title: 'System',
     meta: {
       title: '系统管理'

src/components/Search/index.vue

         <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">
+        <n-form-item v-if="['area'].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">
     const len = ref(props.info.length - 1)
     const itemRefs = ref([])
     const showButton = ref(!!(showItemNum.value < len.value))
-    /* 获取传递的props */
-    const data = reactive({
-      info: toRaw(props.info)
-    })
     const form = ref({})
     /* 初始化搜索表单信息 */
     function initForm() {
-      data.info.forEach((item) => {
-        if (item.key) form.value[item.key] = ''
+      Object.keys(form.value).forEach((key) => {
+        form.value[key] = null
       })
       itemRefs.value.forEach((item) => {
         item.clearValue()

src/layout/components/Menu/index.vue

 <template>
   <n-menu
     :mode="menuMode"
-    :accordion="true"
     :value="(currentRoute.title && currentRoute.meta.activeMenu) || currentRoute.title"
     :options="getMenuOptions"
     @update:value="handleMenuSelect"
 }
 
 function generateOptions(routes, basePath) {
+  // console.log('routes', routes)
   const options = []
   routes.forEach((route) => {
     if (route.title && !route.isHidden) {

src/store/modules/permission.js

     tmp.name = tmp.title
     tmp.meta = {
       ...tmp.meta,
-      title: tmp.title
+      title: tmp.meta.title || tmp.title
     }
     res.push(tmp)
   })

src/views/system/menu/index.vue

 <template>
   <div>
     <n-card>
-      <headSearch :info="info" @search="handleSearch" />
-      <data-table
+      <headSearch :info="info" />
+      <!-- <data-table
         ref="tableRef"
         :columns="columns"
         :pagination="false"
         <template #tableTitle>
           <n-button type="primary" @click="handleModal"> 添加菜单 </n-button>
         </template>
-      </data-table>
+      </data-table> -->
     </n-card>
   </div>
 

src/views/system/menu/info.js

 const data = [
   {
     label: '菜单名称',
-    key: 'title',
+    type: 'area',
+    key: 'name',
+    refIndex: 0,
     props: {
-      placeholder: '请输入菜单名称'
+      placeholder: '请输入菜单名称',
+      options: [{ label: 1, value: 1, children: [{ label: '1-1', value: '1-1' }] }]
     }
   }
 ]