diff --git a/mock/login.ts b/mock/login.ts index 55897d8..34f9f3f 100644 --- a/mock/login.ts +++ b/mock/login.ts @@ -1,42 +1,42 @@ // 根据角色动态生成路由 -import { defineFakeRoute } from "vite-plugin-fake-server/client"; +import { defineFakeRoute } from 'vite-plugin-fake-server/client'; export default defineFakeRoute([ - { - url: "/login", - method: "post", - response: ({ body }) => { - if (body.username === "admin") { - return { - success: true, - data: { - avatar: "https://avatars.githubusercontent.com/u/44761321", - username: "admin", - nickname: "小铭", - // 一个用户可能有多个角色 - roles: ["admin"], - // 按钮级别权限 - permissions: ["*:*:*"], - accessToken: "eyJhbGciOiJIUzUxMiJ9.admin", - refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh", - expires: "2030/10/30 00:00:00" - } - }; - } else { - return { - success: true, - data: { - avatar: "https://avatars.githubusercontent.com/u/52823142", - username: "common", - nickname: "小林", - roles: ["common"], - permissions: ["permission:btn:add", "permission:btn:edit"], - accessToken: "eyJhbGciOiJIUzUxMiJ9.common", - refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh", - expires: "2030/10/30 00:00:00" - } - }; - } - } - } + { + url: '/login', + method: 'post', + response: ({ body }) => { + if (body.username === 'admin') { + return { + success: true, + data: { + avatar: '/user_small.png', + username: 'admin', + nickname: 'Levi', + // 一个用户可能有多个角色 + roles: ['admin'], + // 按钮级别权限 + permissions: ['*:*:*'], + accessToken: 'eyJhbGciOiJIUzUxMiJ9.admin', + refreshToken: 'eyJhbGciOiJIUzUxMiJ9.adminRefresh', + expires: '2030/10/30 00:00:00', + }, + }; + } else { + return { + success: true, + data: { + avatar: 'https://avatars.githubusercontent.com/u/52823142', + username: 'common', + nickname: '小林', + roles: ['common'], + permissions: ['permission:btn:add', 'permission:btn:edit'], + accessToken: 'eyJhbGciOiJIUzUxMiJ9.common', + refreshToken: 'eyJhbGciOiJIUzUxMiJ9.commonRefresh', + expires: '2030/10/30 00:00:00', + }, + }; + } + }, + }, ]); diff --git a/public/favicon.ico b/public/favicon.ico index bef93d4..14b3aa5 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/user.png b/public/user.png new file mode 100644 index 0000000..9ea5817 Binary files /dev/null and b/public/user.png differ diff --git a/public/user_small.png b/public/user_small.png new file mode 100644 index 0000000..14b3aa5 Binary files /dev/null and b/public/user_small.png differ diff --git a/src/assets/user.jpg b/src/assets/user.jpg index a2973ac..14b3aa5 100644 Binary files a/src/assets/user.jpg and b/src/assets/user.jpg differ diff --git a/src/layout/components/lay-notice/index.vue b/src/layout/components/lay-notice/index.vue index 844652a..2557c6b 100644 --- a/src/layout/components/lay-notice/index.vue +++ b/src/layout/components/lay-notice/index.vue @@ -1,96 +1,102 @@ diff --git a/src/layout/hooks/useNav.ts b/src/layout/hooks/useNav.ts index d8a5918..f2238b6 100644 --- a/src/layout/hooks/useNav.ts +++ b/src/layout/hooks/useNav.ts @@ -1,157 +1,152 @@ -import { storeToRefs } from "pinia"; -import { getConfig } from "@/config"; -import { emitter } from "@/utils/mitt"; -import Avatar from "@/assets/user.jpg"; -import { getTopMenu } from "@/router/utils"; -import { useFullscreen } from "@vueuse/core"; -import type { routeMetaType } from "../types"; -import { useRouter, useRoute } from "vue-router"; -import { router, remainingPaths } from "@/router"; -import { computed, type CSSProperties } from "vue"; -import { useAppStoreHook } from "@/store/modules/app"; -import { useUserStoreHook } from "@/store/modules/user"; -import { useGlobal, isAllEmpty } from "@pureadmin/utils"; -import { usePermissionStoreHook } from "@/store/modules/permission"; -import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; -import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; - -const errorInfo = - "The current routing configuration is incorrect, please check the configuration"; +import { storeToRefs } from 'pinia'; +import { getConfig } from '@/config'; +import { emitter } from '@/utils/mitt'; +import Avatar from '@/assets/user.jpg'; +import { getTopMenu } from '@/router/utils'; +import { useFullscreen } from '@vueuse/core'; +import type { routeMetaType } from '../types'; +import { useRouter, useRoute } from 'vue-router'; +import { router, remainingPaths } from '@/router'; +import { computed, type CSSProperties } from 'vue'; +import { useAppStoreHook } from '@/store/modules/app'; +import { useUserStoreHook } from '@/store/modules/user'; +import { useGlobal, isAllEmpty } from '@pureadmin/utils'; +import { usePermissionStoreHook } from '@/store/modules/permission'; +import ExitFullscreen from '@iconify-icons/ri/fullscreen-exit-fill'; +import Fullscreen from '@iconify-icons/ri/fullscreen-fill'; + +const errorInfo = 'The current routing configuration is incorrect, please check the configuration'; export function useNav() { - const route = useRoute(); - const pureApp = useAppStoreHook(); - const routers = useRouter().options.routes; - const { isFullscreen, toggle } = useFullscreen(); - const { wholeMenus } = storeToRefs(usePermissionStoreHook()); - /** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */ - const tooltipEffect = getConfig()?.TooltipEffect ?? "light"; - - const getDivStyle = computed((): CSSProperties => { + const route = useRoute(); + const pureApp = useAppStoreHook(); + const routers = useRouter().options.routes; + const { isFullscreen, toggle } = useFullscreen(); + const { wholeMenus } = storeToRefs(usePermissionStoreHook()); + /** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */ + const tooltipEffect = getConfig()?.TooltipEffect ?? 'light'; + + const getDivStyle = computed((): CSSProperties => { + return { + width: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + overflow: 'hidden', + }; + }); + + /** 头像（如果头像为空则使用 src/assets/user.jpg ） */ + const userAvatar = computed(() => { + return isAllEmpty(useUserStoreHook()?.avatar) ? Avatar : useUserStoreHook()?.avatar; + }); + + /** 昵称（如果昵称为空则显示用户名） */ + const username = computed(() => { + return isAllEmpty(useUserStoreHook()?.nickname) ? useUserStoreHook()?.username : useUserStoreHook()?.nickname; + }); + + const avatarsStyle = computed(() => { + return username.value ? { marginRight: '10px' } : ''; + }); + + const isCollapse = computed(() => { + return !pureApp.getSidebarStatus; + }); + + const device = computed(() => { + return pureApp.getDevice; + }); + + const { $storage, $config } = useGlobal(); + const layout = computed(() => { + return $storage?.layout?.layout; + }); + + const title = computed(() => { + return $config.Title; + }); + + /** 动态title */ + function changeTitle(meta: routeMetaType) { + const Title = getConfig().Title; + if (Title) document.title = `${meta.title} | ${Title}`; + else document.title = meta.title; + } + + /** 退出登录 */ + function logout() { + useUserStoreHook().logOut(); + } + + function backTopMenu() { + router.push(getTopMenu()?.path); + } + + function onPanel() { + emitter.emit('openPanel'); + } + + function toggleSideBar() { + pureApp.toggleSideBar(); + } + + function handleResize(menuRef) { + menuRef?.handleResize(); + } + + function resolvePath(route) { + if (!route.children) return console.error(errorInfo); + const httpReg = /^http(s?):\/\//; + const routeChildPath = route.children[0]?.path; + if (httpReg.test(routeChildPath)) { + return route.path + '/' + routeChildPath; + } else { + return routeChildPath; + } + } + + function menuSelect(indexPath: string) { + if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return; + emitter.emit('changLayoutRoute', indexPath); + } + + /** 判断路径是否参与菜单 */ + function isRemaining(path: string) { + return remainingPaths.includes(path); + } + + /** 获取`logo` */ + function getLogo() { + return new URL('/user_small.png', import.meta.url).href; + } + return { - width: "100%", - display: "flex", - alignItems: "center", - justifyContent: "space-between", - overflow: "hidden" + route, + title, + device, + layout, + logout, + routers, + $storage, + isFullscreen, + Fullscreen, + ExitFullscreen, + toggle, + backTopMenu, + onPanel, + getDivStyle, + changeTitle, + toggleSideBar, + menuSelect, + handleResize, + resolvePath, + getLogo, + isCollapse, + pureApp, + username, + userAvatar, + avatarsStyle, + tooltipEffect, }; - }); - - /** 头像（如果头像为空则使用 src/assets/user.jpg ） */ - const userAvatar = computed(() => { - return isAllEmpty(useUserStoreHook()?.avatar) - ? Avatar - : useUserStoreHook()?.avatar; - }); - - /** 昵称（如果昵称为空则显示用户名） */ - const username = computed(() => { - return isAllEmpty(useUserStoreHook()?.nickname) - ? useUserStoreHook()?.username - : useUserStoreHook()?.nickname; - }); - - const avatarsStyle = computed(() => { - return username.value ? { marginRight: "10px" } : ""; - }); - - const isCollapse = computed(() => { - return !pureApp.getSidebarStatus; - }); - - const device = computed(() => { - return pureApp.getDevice; - }); - - const { $storage, $config } = useGlobal(); - const layout = computed(() => { - return $storage?.layout?.layout; - }); - - const title = computed(() => { - return $config.Title; - }); - - /** 动态title */ - function changeTitle(meta: routeMetaType) { - const Title = getConfig().Title; - if (Title) document.title = `${meta.title} | ${Title}`; - else document.title = meta.title; - } - - /** 退出登录 */ - function logout() { - useUserStoreHook().logOut(); - } - - function backTopMenu() { - router.push(getTopMenu()?.path); - } - - function onPanel() { - emitter.emit("openPanel"); - } - - function toggleSideBar() { - pureApp.toggleSideBar(); - } - - function handleResize(menuRef) { - menuRef?.handleResize(); - } - - function resolvePath(route) { - if (!route.children) return console.error(errorInfo); - const httpReg = /^http(s?):\/\//; - const routeChildPath = route.children[0]?.path; - if (httpReg.test(routeChildPath)) { - return route.path + "/" + routeChildPath; - } else { - return routeChildPath; - } - } - - function menuSelect(indexPath: string) { - if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return; - emitter.emit("changLayoutRoute", indexPath); - } - - /** 判断路径是否参与菜单 */ - function isRemaining(path: string) { - return remainingPaths.includes(path); - } - - /** 获取`logo` */ - function getLogo() { - return new URL("/logo.svg", import.meta.url).href; - } - - return { - route, - title, - device, - layout, - logout, - routers, - $storage, - isFullscreen, - Fullscreen, - ExitFullscreen, - toggle, - backTopMenu, - onPanel, - getDivStyle, - changeTitle, - toggleSideBar, - menuSelect, - handleResize, - resolvePath, - getLogo, - isCollapse, - pureApp, - username, - userAvatar, - avatarsStyle, - tooltipEffect - }; } diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 6a8096e..55a16cb 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -1,25 +1,25 @@