Added top-menu example && optimization

app/api/v1/users/users.py

@@ -61,7 +61,7 @@ async def create_user(
             detail="The user with this email already exists in the system.",
         )
     new_user = await user_controller.create(obj_in=user_in)
-    await user_controller.update_roles(new_user, user_in.roles)
+    await user_controller.update_roles(new_user, user_in.role_ids)
     return Success(msg="Created Successfully")
 
 
@@ -71,7 +71,7 @@ async def update_user(
 ):
     user_controller = UserController()
     user = await user_controller.update(obj_in=user_in)
-    await user_controller.update_roles(user, user_in.roles)
+    await user_controller.update_roles(user, user_in.role_ids)
     return Success(msg="Updated Successfully")
 
 

app/controllers/user.py

@@ -46,9 +46,9 @@ class UserController(CRUDBase[User, UserCreate, UserUpdate]):
             raise HTTPException(status_code=400, detail="用户已被禁用")
         return user
 
-    async def update_roles(self, user: User, roles: List[int]) -> None:
+    async def update_roles(self, user: User, role_ids: List[int]) -> None:
         await user.roles.clear()
-        for role_id in roles:
+        for role_id in role_ids:
             role_obj = await role_controller.get(id=role_id)
             await user.roles.add(role_obj)
 

app/core/init_app.py

@@ -80,7 +80,7 @@ async def init_menus():
         parent_menu = await Menu.create(
             menu_type=MenuType.CATALOG,
             name="系统管理",
-            path="system",
+            path="/system",
             order=1,
             parent_id=0,
             icon="carbon:gui-management",
@@ -147,3 +147,26 @@ async def init_menus():
             ),
         ]
         await Menu.bulk_create(children_menu)
+        parent_menu = await Menu.create(
+            menu_type=MenuType.CATALOG,
+            name="一级菜单",
+            path="/",
+            order=2,
+            parent_id=0,
+            icon="mdi-fan-speed-1",
+            is_hidden=False,
+            component="Layout",
+            keepalive=True,
+            redirect="",
+        )
+        await Menu.create(
+            menu_type=MenuType.MENU,
+            name="一级菜单",
+            path="top-menu",
+            order=1,
+            parent_id=parent_menu.id,
+            icon="mdi-fan-speed-1",
+            is_hidden=False,
+            component="/top-menu",
+            keepalive=True,
+        )

app/schemas/users.py

@@ -22,11 +22,11 @@ class UserCreate(BaseModel):
     password: str = Field(example="123456")
     is_active: Optional[bool] = True
     is_superuser: Optional[bool] = False
-    roles: Optional[List[int]] = []
+    role_ids: Optional[List[int]] = []
     dept_id: Optional[int] = Field(0, description="部门ID")
 
     def create_dict(self):
-        return self.model_dump(exclude_unset=True, exclude={"roles"})
+        return self.model_dump(exclude_unset=True, exclude={"role_ids"})
 
 
 class UserUpdate(BaseModel):
@@ -35,7 +35,7 @@ class UserUpdate(BaseModel):
     username: str
     is_active: Optional[bool] = True
     is_superuser: Optional[bool] = False
-    roles: Optional[List[int]] = []
+    role_ids: Optional[List[int]] = []
     dept_id: Optional[int] = 0
 
 

web/src/store/modules/permission/index.js

@@ -8,7 +8,7 @@ import api from '@/api'
 function buildRoutes(routes = []) {
   return routes.map((e) => ({
     name: e.name,
-    path: e.component !== 'Layout' ? '/' : '/' + e.path, // 处理目录是一级菜单的情况
+    path: e.path, // 处理目录是一级菜单的情况
     component: shallowRef(Layout), // ? 不使用 shallowRef 控制台会有 warning
     isHidden: e.is_hidden,
     redirect: e.redirect,

web/src/views/system/menu/index.vue

@@ -135,9 +135,9 @@ const columns = [
                 handleAdd()
               },
             },
-            { default: () => '子菜单', icon: renderIcon('material-symbols:add', { size: 16 }) },
+            { default: () => '子菜单', icon: renderIcon('material-symbols:add', { size: 16 }) }
           ),
-          [[vPermission, 'post/api/v1/menu/create']],
+          [[vPermission, 'post/api/v1/menu/create']]
         ),
         withDirectives(
           h(
@@ -154,9 +154,9 @@ const columns = [
             {
               default: () => '编辑',
               icon: renderIcon('material-symbols:edit-outline', { size: 16 }),
-            },
+            }
           ),
-          [[vPermission, 'post/api/v1/menu/update']],
+          [[vPermission, 'post/api/v1/menu/update']]
         ),
         h(
           NPopconfirm,
@@ -177,12 +177,12 @@ const columns = [
                   {
                     default: () => '删除',
                     icon: renderIcon('material-symbols:delete-outline', { size: 16 }),
-                  },
+                  }
                 ),
-                [[vPermission, 'delete/api/v1/menu/delete']],
+                [[vPermission, 'delete/api/v1/menu/delete']]
               ),
             default: () => h('div', {}, '确定删除该菜单吗?'),
-          },
+          }
         ),
       ]
     },

web/src/views/system/user/index.vue

@@ -66,21 +66,6 @@ onMounted(() => {
 })
 
 const columns = [
-  {
-    title: '头像',
-    key: 'avatar',
-    width: 50,
-    align: 'center',
-    render(row) {
-      return h(NImage, {
-        height: 50,
-        imgProps: { style: { 'border-radius': '3px' } },
-        src: row.avatar,
-        'fallback-src': 'http://dummyimage.com/400x400', // 加载失败
-        'show-toolbar-tooltip': true,
-      })
-    },
-  },
   {
     title: '名称',
     key: 'username',
@@ -180,10 +165,10 @@ const columns = [
               type: 'primary',
               style: 'margin-right: 8px;',
               onClick: () => {
-                // roles => role_ids
                 handleEdit(row)
                 modalForm.value.dept_id = row.dept?.id
-                modalForm.value.roles = row.roles.map((e) => (e = e.id))
+                modalForm.value.role_ids = row.roles.map((e) => (e = e.id))
+                delete modalForm.value.dept
               },
             },
             {
@@ -238,7 +223,7 @@ async function handleUpdateDisable(row) {
   row.roles.forEach((e) => {
     role_ids.push(e.id)
   })
-  row.roles = role_ids
+  row.role_ids = role_ids
   row.dept_id = row.dept?.id
   try {
     await api.updateUser(row)
@@ -252,12 +237,20 @@ async function handleUpdateDisable(row) {
   }
 }
 
+let lastClickedNodeId = null
+
 const nodeProps = ({ option }) => {
   return {
     onClick() {
-      api.getUserList({ dept_id: option.id }).then((res) => {
+      if (lastClickedNodeId === option.id) {
-        $table.value.tableData = res.data
+        $table.value?.handleSearch()
-      })
+        lastClickedNodeId = null
+      } else {
+        api.getUserList({ dept_id: option.id }).then((res) => {
+          $table.value.tableData = res.data
+          lastClickedNodeId = option.id
+        })
+      }
     },
   }
 }
@@ -325,8 +318,14 @@ const validateAddUser = {
 
 <template>
   <NLayout has-sider wh-full>
-    <NLayoutSider bordered content-style="padding: 24px;">
+    <NLayoutSider
-      <h1>部门管理</h1>
+      bordered
+      content-style="padding: 24px;"
+      :collapsed-width="0"
+      :width="240"
+      show-trigger="arrow-circle"
+    >
+      <h1>部门列表</h1>
       <br />
       <NTree
         block-line
@@ -413,8 +412,8 @@ const validateAddUser = {
                 placeholder="请确认密码"
               />
             </NFormItem>
-            <NFormItem label="角色" path="roles">
+            <NFormItem label="角色" path="role_ids">
-              <NCheckboxGroup v-model:value="modalForm.roles">
+              <NCheckboxGroup v-model:value="modalForm.role_ids">
                 <NSpace item-style="display: flex;">
                   <NCheckbox
                     v-for="item in roleOption"

web/src/views/top-menu/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <AppPage>
+    <h1>一级菜单</h1>
+  </AppPage>
+</template>