feat:修改layout

src/api/roleApi.ts

@@ -5,7 +5,11 @@ interface UserListQuery{
     page:number
     pageSize:number
 }
-export function getUserList(data:UserListQuery){
+interface UserListReturn{
+    totalCount:number,
+    users:UserRaw[]
+}
+export function getUserList(data:UserListQuery):Promise<UserListReturn>{
     return http({
         url:"/api/v1/AdminRoleControllers/SearchUserFromRole",
         method:'POST',

src/views/layout/components/LayoutHeader.vue

@@ -6,7 +6,7 @@
                 <n-avatar src="@/assets/images/luolan_avatar.jpg" round :size="45"
                     fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
                 </n-avatar>
-                <p class="username">白盐浊泉</p>
+                <p class="username">{{ userStore.userInfo.userName }}</p>
                 <n-dropdown :options="options" @select="handleSelect">
                     <n-icon :size="16" color="#000" style="cursor: pointer;">
                         <CaretDownOutline />
@@ -19,8 +19,7 @@
 
 <script setup lang='ts'>
 import { removeToken } from '@/utils/auth';
-
+import { useUserStore } from '@/store/user';
-
 import {
     Pencil as EditIcon,
     LogOutOutline as LogoutIcon,
@@ -29,6 +28,7 @@ import {
 } from '@vicons/ionicons5';
 import { NIcon } from 'naive-ui';
 
+const userStore = useUserStore();
 const router = useRouter();
 function renderIcon(icon: Component) {
     return () => {

src/views/layout/components/LayoutNav.vue

@@ -22,6 +22,7 @@ import { storeToRefs } from 'pinia';
 import { RouterLink } from 'vue-router';
 const appStore = useAppStore();
 const activeKey = ref('default');
+const router = useRouter();
 const { menuApp } = storeToRefs(appStore);
 import SvgIcon from '@/components/SvgIcon.vue';
 const expandIcon = () => {
@@ -30,7 +31,12 @@ const expandIcon = () => {
 
 function renderIcon(iconClass: string) {
     return () => h(SvgIcon, { iconClass, width: '16', height: '16' })
-}
+};
+watch(() => router.currentRoute.value, (newName) => {
+    if (newName) {
+        activeKey.value = newName.fullPath as string;
+    }
+},{ immediate: true });
 // 后面改成动态的
 const menuOptions: MenuOption[] = [
     {
@@ -44,12 +50,12 @@ const menuOptions: MenuOption[] = [
                 },
                 { default: () => '概览' }
             ),
-        key: 'default',
+        key: '/layout',
         icon: renderIcon('mainproject')
     },
     {
         label: '角色管理',
-        key: 'role',
+        key: '/role',
         icon: renderIcon('mainproject'),
         children: [
             {
@@ -62,14 +68,14 @@ const menuOptions: MenuOption[] = [
                     },
                     { default: () => '权限分配' }
                 ),
-                key: 'role-auth',
+                key: '/layout/role',
                 icon: renderIcon('mainproject')
             }
         ]
     },
     {
         label: '系统配置',
-        key: 'system',
+        key: '/system',
         icon: renderIcon('mainproject'),
         children: [
             {
@@ -82,7 +88,7 @@ const menuOptions: MenuOption[] = [
                     },
                     { default: () => '菜单管理' }
                 ),
-                key: 'system-menu',
+                key: '/layout/menu',
                 icon: renderIcon('mainproject')
             },
             {
@@ -95,7 +101,7 @@ const menuOptions: MenuOption[] = [
                     },
                     { default: () => '字典配置' }
                 ),
-                key: 'system-dict',
+                key: '/layout/dict',
                 icon: renderIcon('mainproject')
             },
             {
@@ -108,7 +114,7 @@ const menuOptions: MenuOption[] = [
                     },
                     { default: () => '全局参数' }
                 ),
-                key: 'system-globalSys',
+                key: '/layout/globalSys',
                 icon: renderIcon('mainproject')
             }
         ]

src/views/role/pages/Auth.vue

@@ -17,8 +17,12 @@
       <n-data-table v-if="height" :columns="columns" :data="data" :max-height="`${height}px`"
         :min-height="`${height}px`" />
       <div class="table-main__pagination">
-        <n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :page-count="data.length"
+        <n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :item-count="data.length"
-          show-size-picker :page-sizes="[10, 20, 30, 40]" />
+          show-size-picker :page-sizes="[10, 20, 30, 40]">
+          <template #prefix="{ itemCount, startIndex }">
+            共 {{ itemCount }} 项
+          </template>
+        </n-pagination>
       </div>
     </main>
   </div>
@@ -31,48 +35,64 @@ import { DataTableColumns, NButton, useMessage } from 'naive-ui';
 
 const message = useMessage();
 const tableMainRef = ref<HTMLElement | null>(null);
-const roleName = ref('admin');
+const roleName = ref('');
+const total = ref(0);
 const pagination = reactive<PageController>({
   pageSize: 10,
   page: 1,
 });
+const data = ref([]);
+const height = ref(null);
 
-// 列接口数据
-interface RowData {
-  name: string
-  sex: 'female' | 'male' | 'unknown',
-  address: string
-}
 // 类似render - 函数式组件渲染
 function createColumns({
   sendMail
 }: {
-  sendMail: (rowData: RowData) => void
+  sendMail: (rowData: UserRaw) => void
-}): DataTableColumns<RowData> {
+}): DataTableColumns<UserRaw> {
   return [
     {
       title: '用户名',
-      key: 'name'
+      key: 'userName'
     },
     {
       title: '性别',
-      key: 'sex'
+      key: 'sex',
+      render(row: UserRaw) {
+        return h('span', {}, {
+          default: () => `${row.sex || '未知'}`
+        })
+      }
     },
     {
-      title: 'Address',
+      title: '职位',
-      key: 'address'
+      key: 'jobCode',
+      render(row: UserRaw) {
+        return h('span', {}, {
+          default: () => `${row.jobCode || '无职位'}`
+        })
+      }
     },
     {
-      title: 'Action',
+      title: '菜单权限',
+      key: 'menuName',
+      render(row: UserRaw) {
+        return h('span', {}, {
+          default: () => `${row.menuName || '无权限'}`
+        })
+      }
+    },
+    {
+      title: '操作',
       key: 'actions',
-      render(row) {
+      render(row: UserRaw) {
         return h(
           NButton,
           {
             size: 'small',
             onClick: () => sendMail(row)
           },
-          { default: () => 'Send Email' }
+          { default: () => '点击用户' }
         )
       }
     }
@@ -81,23 +101,19 @@ function createColumns({
 // 生成表格列
 const columns = createColumns({
   sendMail(rowData) {
-    message.error(`我点击了${rowData.name}`);
+    message.error(`我点击了${rowData.userName}`);
   }
 })
-const height = ref(null);
+
-const data = Array.from({ length: 10 }).map((_, index) => ({
+
-  key: index,
-  name: `Edward King ${index}`,
-  sex: 'female',
-  address: `London, Park Lane no. ${index}`
-}));
 const init = async () => {
   try {
-    const result = await getUserList({
+    const { users, totalCount } = await getUserList({
       ...pagination,
       roleName: roleName.value
     });
-    console.log(result, 'result');
+    total.value = totalCount;
+    data.value = users;
   } catch (error) {
     message.error(error.message);
   }

src/vite-env.d.ts

@@ -9,7 +9,33 @@ declare module "@/store/*";
 declare module "@/utils/*";
 declare module "@/router/*";
 
-interface PageController{
+interface PageController {
-   page:number
+  page: number;
-   pageSize:number
+  pageSize: number;
+}
+// 用户信息 - 后端返回
+interface UserRaw {
+  accessFailedCount: number;
+  birthday?: string;
+  concurrencyStamp: string;
+  config?:string;
+  description?:string;
+  email:string;
+  emailConfirmed: boolean;
+  id: string;
+  jobCode?:string;
+  jobName?:string;
+  lockoutEnabled: boolean;
+  lockoutEnd?:string;
+  menuCode?:string;
+  menuName?:string;
+  normalizedEmail: string;
+  normalizedUserName: string;
+  passwordHash: string;
+  phoneNumber?:string;
+  phoneNumberConfirmed: boolean;
+  securityStamp:string;
+  sex?:string;
+  twoFactorEnabled: boolean;
+  userName: string;
 }