feat: save

packages/frontend/src/views/menu/index.vue

@@ -11,7 +11,7 @@
       <template v-for="(item) of topMenu" :key="item.id">
         <n-card class="min-h-220 min-w-200 w-30%" :title="item.title">
           <div class="ml-20 flex-col">
-            xxx
+            {{ item.children.length }}
           </div>
           <template #header-extra>
             <n-dropdown

packages/frontend/src/views/menu/list.vue

@@ -1,7 +1,7 @@
 <template>
   <CommonPage back :title="detail.title ">
     <template #action>
-      <NButton type="primary">
+      <NButton type="primary" @click="handleAdd()">
         <i class="i-material-symbols:add mr-4 text-18" />
         新增子菜单
       </NButton>
@@ -22,21 +22,60 @@
         />
       </MeQueryItem>
     </MeCrud>
+
+    <MeModal ref="modalRef" width="520px">
+      <n-form ref="modalFormRef" label-placement="left" label-align="left" :label-width="80" :model="modalForm">
+        <n-form-item
+          label="名称" path="title" :rule="{
+            required: true,
+            message: '请输入名称',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.title" />
+        </n-form-item>
+
+        <n-form-item label="备注" path="remark">
+          <n-input v-model:value="modalForm.remark" />
+        </n-form-item>
+        <n-form-item label="是否显示" path="isPublish">
+          <NSwitch v-model:value="modalForm.isPublish">
+            <template #checked>
+              启用
+            </template>
+            <template #unchecked>
+              停用
+            </template>
+          </NSwitch>
+        </n-form-item>
+        <n-form-item label="状态" path="enable">
+          <NSwitch v-model:value="modalForm.enable">
+            <template #checked>
+              启用
+            </template>
+            <template #unchecked>
+              停用
+            </template>
+          </NSwitch>
+        </n-form-item>
+      </n-form>
+    </MeModal>
   </CommonPage>
 </template>
 
 <script setup>
-import { MeCrud, MeQueryItem } from '@/components'
+import { MeCrud, MeModal, MeQueryItem } from '@/components'
 import { useCrud } from '@/composables'
+import { useUserStore } from '@/store/index.js'
 import { formatDateTime } from '@/utils'
 import { NButton, NSwitch } from 'naive-ui'
 import { useRoute, useRouter } from 'vue-router'
-
 import api from './api.js'
 
 const $table = ref(null)
 
 const router = useRouter()
+const { userId } = useUserStore()
 const route = useRoute()
 const detail = ref({
   title: '',
@@ -46,9 +85,9 @@ const detail = ref({
 const queryItems = ref({
   parentId: route.params.id,
 })
-const { handleDelete, handleEdit }
+const { modalRef, modalFormRef, modalAction, modalForm, handleAdd, handleDelete, handleEdit }
   = useCrud({
-    name: '文章',
+    name: '子菜单',
     doCreate: api.create,
     doDelete: api.delete,
     doUpdate: api.update,
@@ -147,7 +186,12 @@ async function handleEnable(row) {
     row.enableLoading = false
   }
 }
-
+watchEffect(() => {
+  if (userId) {
+    modalForm.value.userId = userId
+    modalForm.value.parentId = detail.value.id
+  }
+})
 onMounted(() => {
   $table.value?.handleSearch()
   getMenuDetail()