feat: 将整体logo视觉替换为ai生成的logo

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",
+        url: '/login',
+        method: 'post',
         response: ({ body }) => {
-      if (body.username === "admin") {
+            if (body.username === 'admin') {
                 return {
                     success: true,
                     data: {
-            avatar: "https://avatars.githubusercontent.com/u/44761321",
-            username: "admin",
-            nickname: "小铭",
+                        avatar: '/user_small.png',
+                        username: 'admin',
+                        nickname: 'Levi',
                         // 一个用户可能有多个角色
-            roles: ["admin"],
+                        roles: ['admin'],
                         // 按钮级别权限
-            permissions: ["*:*:*"],
-            accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
-            refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
-            expires: "2030/10/30 00:00:00"
-          }
+                        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"
-          }
+                        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',
+                    },
                 };
             }
-    }
-  }
+        },
+    },
 ]);

src/layout/components/lay-notice/index.vue

@@ -1,32 +1,29 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { noticesData } from "./data";
-import NoticeList from "./components/NoticeList.vue";
-import BellIcon from "@iconify-icons/ep/bell";
+import { ref, computed } from 'vue';
+import { noticesData } from './data';
+import NoticeList from './components/NoticeList.vue';
+import BellIcon from '@iconify-icons/ep/bell';
 
 const noticesNum = ref(0);
-const notices = ref(noticesData);
+const notices = ref([]);
+// const notices = ref(noticesData);
 const activeKey = ref(noticesData[0]?.key);
 
-notices.value.map(v => (noticesNum.value += v.list.length));
+notices.value.map((v) => (noticesNum.value += v.list.length));
 
-const getLabel = computed(
-  () => item =>
-    item.name + (item.list.length > 0 ? `(${item.list.length})` : "")
-);
+const getLabel = computed(() => (item) => item.name + (item.list.length > 0 ? `(${item.list.length})` : ''));
 </script>
 
 <template>
-  <el-dropdown trigger="click" placement="bottom-end">
-    <span
-      :class="[
-        'dropdown-badge',
-        'navbar-bg-hover',
-        'select-none',
-        Number(noticesNum) !== 0 && 'mr-[10px]'
-      ]"
+    <el-dropdown
+        trigger="click"
+        placement="bottom-end"
+    >
+        <span :class="['dropdown-badge', 'navbar-bg-hover', 'select-none', Number(noticesNum) !== 0 && 'mr-[10px]']">
+            <el-badge
+                :value="Number(noticesNum) === 0 ? '' : noticesNum"
+                :max="99"
             >
-      <el-badge :value="Number(noticesNum) === 0 ? '' : noticesNum" :max="99">
                 <span class="header-notice-icon">
                     <IconifyIconOffline :icon="BellIcon" />
                 </span>
@@ -46,11 +43,20 @@ const getLabel = computed(
                         :image-size="60"
                     />
                     <span v-else>
-            <template v-for="item in notices" :key="item.key">
-              <el-tab-pane :label="getLabel(item)" :name="`${item.key}`">
+                        <template
+                            v-for="item in notices"
+                            :key="item.key"
+                        >
+                            <el-tab-pane
+                                :label="getLabel(item)"
+                                :name="`${item.key}`"
+                            >
                                 <el-scrollbar max-height="330px">
                                     <div class="noticeList-container">
-                    <NoticeList :list="item.list" :emptyText="item.emptyText" />
+                                        <NoticeList
+                                            :list="item.list"
+                                            :emptyText="item.emptyText"
+                                        />
                                     </div>
                                 </el-scrollbar>
                             </el-tab-pane>

src/layout/hooks/useNav.ts

@@ -1,22 +1,21 @@
-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();
@@ -25,34 +24,30 @@ export function useNav() {
     const { isFullscreen, toggle } = useFullscreen();
     const { wholeMenus } = storeToRefs(usePermissionStoreHook());
     /** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */
-  const tooltipEffect = getConfig()?.TooltipEffect ?? "light";
+    const tooltipEffect = getConfig()?.TooltipEffect ?? 'light';
 
     const getDivStyle = computed((): CSSProperties => {
         return {
-      width: "100%",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      overflow: "hidden"
+            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;
+        return isAllEmpty(useUserStoreHook()?.avatar) ? Avatar : useUserStoreHook()?.avatar;
     });
 
     /** 昵称（如果昵称为空则显示用户名） */
     const username = computed(() => {
-    return isAllEmpty(useUserStoreHook()?.nickname)
-      ? useUserStoreHook()?.username
-      : useUserStoreHook()?.nickname;
+        return isAllEmpty(useUserStoreHook()?.nickname) ? useUserStoreHook()?.username : useUserStoreHook()?.nickname;
     });
 
     const avatarsStyle = computed(() => {
-    return username.value ? { marginRight: "10px" } : "";
+        return username.value ? { marginRight: '10px' } : '';
     });
 
     const isCollapse = computed(() => {
@@ -89,7 +84,7 @@ export function useNav() {
     }
 
     function onPanel() {
-    emitter.emit("openPanel");
+        emitter.emit('openPanel');
     }
 
     function toggleSideBar() {
@@ -105,7 +100,7 @@ export function useNav() {
         const httpReg = /^http(s?):\/\//;
         const routeChildPath = route.children[0]?.path;
         if (httpReg.test(routeChildPath)) {
-      return route.path + "/" + routeChildPath;
+            return route.path + '/' + routeChildPath;
         } else {
             return routeChildPath;
         }
@@ -113,7 +108,7 @@ export function useNav() {
 
     function menuSelect(indexPath: string) {
         if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return;
-    emitter.emit("changLayoutRoute", indexPath);
+        emitter.emit('changLayoutRoute', indexPath);
     }
 
     /** 判断路径是否参与菜单 */
@@ -123,7 +118,7 @@ export function useNav() {
 
     /** 获取`logo` */
     function getLogo() {
-    return new URL("/logo.svg", import.meta.url).href;
+        return new URL('/user_small.png', import.meta.url).href;
     }
 
     return {
@@ -152,6 +147,6 @@ export function useNav() {
         username,
         userAvatar,
         avatarsStyle,
-    tooltipEffect
+        tooltipEffect,
     };
 }

src/views/login/index.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import Motion from "./utils/motion";
-import { useRouter } from "vue-router";
-import { message } from "@/utils/message";
-import { loginRules } from "./utils/rule";
-import { useNav } from "@/layout/hooks/useNav";
-import type { FormInstance } from "element-plus";
-import { useLayout } from "@/layout/hooks/useLayout";
-import { useUserStoreHook } from "@/store/modules/user";
-import { initRouter, getTopMenu } from "@/router/utils";
-import { bg, avatar, illustration } from "./utils/static";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
-import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import Motion from './utils/motion';
+import { useRouter } from 'vue-router';
+import { message } from '@/utils/message';
+import { loginRules } from './utils/rule';
+import { useNav } from '@/layout/hooks/useNav';
+import type { FormInstance } from 'element-plus';
+import { useLayout } from '@/layout/hooks/useLayout';
+import { useUserStoreHook } from '@/store/modules/user';
+import { initRouter, getTopMenu } from '@/router/utils';
+import { bg, avatar, illustration } from './utils/static';
+import { useRenderIcon } from '@/components/ReIcon/src/hooks';
+import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from 'vue';
+import { useDataThemeChange } from '@/layout/hooks/useDataThemeChange';
 
-import dayIcon from "@/assets/svg/day.svg?component";
-import darkIcon from "@/assets/svg/dark.svg?component";
-import Lock from "@iconify-icons/ri/lock-fill";
-import User from "@iconify-icons/ri/user-3-fill";
+import dayIcon from '@/assets/svg/day.svg?component';
+import darkIcon from '@/assets/svg/dark.svg?component';
+import Lock from '@iconify-icons/ri/lock-fill';
+import User from '@iconify-icons/ri/user-3-fill';
 
 defineOptions({
-  name: "Login"
+    name: 'Login',
 });
 const router = useRouter();
 const loading = ref(false);
@@ -33,8 +33,8 @@ dataThemeChange(overallStyle.value);
 const { title } = useNav();
 
 const ruleForm = reactive({
-  username: "admin",
-  password: "admin123"
+    username: 'admin',
+    password: 'admin123',
 });
 
 const onLogin = async (formEl: FormInstance | undefined) => {
@@ -43,17 +43,17 @@ const onLogin = async (formEl: FormInstance | undefined) => {
         if (valid) {
             loading.value = true;
             useUserStoreHook()
-        .loginByUsername({ username: ruleForm.username, password: "admin123" })
-        .then(res => {
+                .loginByUsername({ username: ruleForm.username, password: 'admin123' })
+                .then((res) => {
                     if (res.success) {
                         // 获取后端路由
                         return initRouter().then(() => {
                             router.push(getTopMenu(true).path).then(() => {
-                message("登录成功", { type: "success" });
+                                message('登录成功', { type: 'success' });
                             });
                         });
                     } else {
-            message("登录失败", { type: "error" });
+                        message('登录失败', { type: 'error' });
                     }
                 })
                 .finally(() => (loading.value = false));
@@ -63,23 +63,26 @@ const onLogin = async (formEl: FormInstance | undefined) => {
 
 /** 使用公共函数，避免`removeEventListener`失效 */
 function onkeypress({ code }: KeyboardEvent) {
-  if (["Enter", "NumpadEnter"].includes(code)) {
+    if (['Enter', 'NumpadEnter'].includes(code)) {
         onLogin(ruleFormRef.value);
     }
 }
 
 onMounted(() => {
-  window.document.addEventListener("keypress", onkeypress);
+    window.document.addEventListener('keypress', onkeypress);
 });
 
 onBeforeUnmount(() => {
-  window.document.removeEventListener("keypress", onkeypress);
+    window.document.removeEventListener('keypress', onkeypress);
 });
 </script>
 
 <template>
     <div class="select-none">
-    <img :src="bg" class="wave" />
+        <img
+            :src="bg"
+            class="wave"
+        />
         <div class="flex-c absolute right-5 top-3">
             <!-- 主题 -->
             <el-switch
@@ -96,7 +99,7 @@ onBeforeUnmount(() => {
             </div>
             <div class="login-box">
                 <div class="login-form">
-          <avatar class="avatar" />
+                    <!-- <avatar class="avatar" /> -->
                     <Motion>
                         <h2 class="outline-none">{{ title }}</h2>
                     </Motion>
@@ -113,8 +116,8 @@ onBeforeUnmount(() => {
                                     {
                                         required: true,
                                         message: '请输入账号',
-                    trigger: 'blur'
-                  }
+                                        trigger: 'blur',
+                                    },
                                 ]"
                                 prop="username"
                             >
@@ -158,7 +161,7 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-@import url("@/style/login.css");
+@import url('@/style/login.css');
 </style>
 
 <style lang="scss" scoped>