From f986933d4246955a1c36e63b558e4fe46f6b45cd Mon Sep 17 00:00:00 2001
From: yanfeiyong <2060201549@qq.com>
Date: Fri, 16 May 2025 15:12:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E6=B1=89=E5=A0=A1=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=EF=BC=8C=E5=AE=8C=E5=96=84=E9=A1=B6=E9=83=A8=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Navbar.vue        | 149 ++++++++++++------------
 src/layout/components/Sidebar/index.vue |  69 ++++++-----
 src/layout/index.vue                    |  18 +--
 src/store/modules/app.js                |  89 +++++++-------
 src/store/modules/user.js               | 145 ++++++++++++-----------
 5 files changed, 247 insertions(+), 223 deletions(-)

diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index cab43c5..bc32dc4 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,116 +1,113 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
-    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
+    <!-- <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
+    <breadcrumb
+      v-if="!settingsStore.topNav"
+      id="breadcrumb-container"
+      class="breadcrumb-container"
+    />
+    <top-nav
+      v-if="settingsStore.topNav"
+      id="topmenu-container"
+      class="topmenu-container"
+    />
 
     <div class="right-menu">
-      <template v-if="appStore.device !== 'mobile'">
-        <header-search id="header-search" class="right-menu-item" />
-
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
-        <el-tooltip content="主题模式" effect="dark" placement="bottom">
-          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
-            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
-            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
-          </div>
-        </el-tooltip>
-
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
-      </template>
-
-      <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
+      <el-dropdown
+        @command="handleCommand"
+        class="avatar-container right-menu-item hover-effect"
+        trigger="hover"
+      >
         <div class="avatar-wrapper">
-          <img :src="userStore.avatar" class="user-avatar" />
+          <img
+            :src="userStore.avatar"
+            class="user-avatar"
+          />
           <span class="user-nickname"> {{ userStore.nickName }} </span>
+          <!-- <span > {{ userStore.nickName }} </span> -->
+          <ArrowDown
+            class="user-arrowdown"
+            style="width: 1em; height: 1em; margin-left: 8px"
+          />
         </div>
         <template #dropdown>
           <el-dropdown-menu>
-            <router-link to="/user/profile">
+            <!-- <router-link to="/user/profile">
               <el-dropdown-item>个人中心</el-dropdown-item>
-            </router-link>
-            <el-dropdown-item divided command="logout">
+            </router-link> -->
+            <el-dropdown-item command="logout">
               <span>退出登录</span>
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
+      <!-- <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
         <svg-icon icon-class="more-up" />
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script setup>
-import { ElMessageBox } from 'element-plus'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import HeaderSearch from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
-import useAppStore from '@/store/modules/app'
-import useUserStore from '@/store/modules/user'
-import useSettingsStore from '@/store/modules/settings'
-
-const appStore = useAppStore()
-const userStore = useUserStore()
-const settingsStore = useSettingsStore()
+import { ElMessageBox } from "element-plus";
+import Breadcrumb from "@/components/Breadcrumb";
+import TopNav from "@/components/TopNav";
+import Hamburger from "@/components/Hamburger";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import HeaderSearch from "@/components/HeaderSearch";
+import RuoYiGit from "@/components/RuoYi/Git";
+import RuoYiDoc from "@/components/RuoYi/Doc";
+import useAppStore from "@/store/modules/app";
+import useUserStore from "@/store/modules/user";
+import useSettingsStore from "@/store/modules/settings";
+
+const appStore = useAppStore();
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
 
 function toggleSideBar() {
-  appStore.toggleSideBar()
+  appStore.toggleSideBar();
 }
 
 function handleCommand(command) {
   switch (command) {
     case "setLayout":
-      setLayout()
-      break
+      setLayout();
+      break;
     case "logout":
-      logout()
-      break
+      logout();
+      break;
     default:
-      break
+      break;
   }
 }
 
 function logout() {
-  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    userStore.logOut().then(() => {
-      location.href = '/index'
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
     })
-  }).catch(() => { })
+    .catch(() => {});
 }
 
-const emits = defineEmits(['setLayout'])
+const emits = defineEmits(["setLayout"]);
 function setLayout() {
-  emits('setLayout')
+  emits("setLayout");
 }
 
 function toggleTheme() {
-  settingsStore.toggleTheme()
+  settingsStore.toggleTheme();
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .navbar {
   height: 50px;
   overflow: hidden;
@@ -146,7 +143,8 @@ function toggleTheme() {
   }
 
   .right-menu {
-    float: right;
+    // float: right;
+    margin-left: 93%;
     height: 100%;
     line-height: 50px;
     display: flex;
@@ -178,7 +176,7 @@ function toggleTheme() {
 
         svg {
           transition: transform 0.3s;
-          
+
           &:hover {
             transform: scale(1.15);
           }
@@ -201,8 +199,15 @@ function toggleTheme() {
           height: 30px;
           border-radius: 50%;
         }
+        .user-arrowdown {
+          position: relative;
+          left: 5px;
+          bottom: 8px;
+          font-size: 14px;
+          font-weight: bold;
+        }
 
-        .user-nickname{
+        .user-nickname {
           position: relative;
           left: 5px;
           bottom: 10px;
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 92add79..2f2e017 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
+  <div
+    :class="{ 'has-logo': showLogo }"
+    class="sidebar-container"
+  >
     <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
     <div class="sever-TITLE">太仓市网络和数据资产采集管理系统</div>
     <el-scrollbar wrap-class="scrollbar-wrapper">
@@ -26,53 +29,58 @@
 </template>
 
 <script setup>
-import Logo from './Logo'
-import SidebarItem from './SidebarItem'
-import variables from '@/assets/styles/variables.module.scss'
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import Logo from "./Logo";
+import SidebarItem from "./SidebarItem";
+import variables from "@/assets/styles/variables.module.scss";
+import useAppStore from "@/store/modules/app";
+import useSettingsStore from "@/store/modules/settings";
+import usePermissionStore from "@/store/modules/permission";
 
-const route = useRoute()
-const appStore = useAppStore()
-const settingsStore = useSettingsStore()
-const permissionStore = usePermissionStore()
+const route = useRoute();
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
 
-const sidebarRouters = computed(() => permissionStore.sidebarRouters)
-const showLogo = computed(() => settingsStore.sidebarLogo)
-const sideTheme = computed(() => settingsStore.sideTheme)
-const theme = computed(() => settingsStore.theme)
-const isCollapse = computed(() => !appStore.sidebar.opened)
+const sidebarRouters = computed(() => permissionStore.sidebarRouters);
+const showLogo = computed(() => settingsStore.sidebarLogo);
+const sideTheme = computed(() => settingsStore.sideTheme);
+const theme = computed(() => settingsStore.theme);
+const isCollapse = computed(() => false);
 
 // 获取菜单背景色
 const getMenuBackground = computed(() => {
   if (settingsStore.isDark) {
-    return 'var(--sidebar-bg)'
+    return "var(--sidebar-bg)";
   }
-  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
-})
+  return sideTheme.value === "theme-dark"
+    ? variables.menuBg
+    : variables.menuLightBg;
+});
 
 // 获取菜单文字颜色
 const getMenuTextColor = computed(() => {
   if (settingsStore.isDark) {
-    return 'var(--sidebar-text)'
+    return "var(--sidebar-text)";
   }
-  return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
-})
+  return sideTheme.value === "theme-dark"
+    ? variables.menuText
+    : variables.menuLightText;
+});
 
 const activeMenu = computed(() => {
-  const { meta, path } = route
+  const { meta, path } = route;
   if (meta.activeMenu) {
-    return meta.activeMenu
+    return meta.activeMenu;
   }
-  return path
-})
+  return path;
+});
 </script>
 
 <style lang="scss" scoped>
 .sidebar-container {
   background-color: v-bind(getMenuBackground);
-  
+  transition: none !important; // 禁用动画
+
   .scrollbar-wrapper {
     background-color: v-bind(getMenuBackground);
   }
@@ -81,8 +89,9 @@ const activeMenu = computed(() => {
     border: none;
     height: 100%;
     width: 100% !important;
-    
-    .el-menu-item, .el-sub-menu__title {
+
+    .el-menu-item,
+    .el-sub-menu__title {
       &:hover {
         background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
       }
@@ -90,7 +99,7 @@ const activeMenu = computed(() => {
 
     .el-menu-item {
       color: v-bind(getMenuTextColor);
-      
+
       &.is-active {
         color: var(--menu-active-text, #409eff);
         background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 90ca519..ea2c404 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -39,18 +39,18 @@ const { width, height } = useWindowSize()
 const WIDTH = 992 // refer to Bootstrap's responsive design
 
 watch(() => device.value, () => {
-  if (device.value === 'mobile' && sidebar.value.opened) {
-    useAppStore().closeSideBar({ withoutAnimation: false })
-  }
+  // if (device.value === 'mobile' && sidebar.value.opened) {
+  //   useAppStore().closeSideBar({ withoutAnimation: false })
+  // }
 })
 
 watchEffect(() => {
-  if (width.value - 1 < WIDTH) {
-    useAppStore().toggleDevice('mobile')
-    useAppStore().closeSideBar({ withoutAnimation: true })
-  } else {
-    useAppStore().toggleDevice('desktop')
-  }
+  // if (width.value - 1 < WIDTH) {
+  //   useAppStore().toggleDevice('mobile')
+  //   useAppStore().closeSideBar({ withoutAnimation: true })
+  // } else {
+  //   useAppStore().toggleDevice('desktop')
+  // }
 })
 
 function handleClickOutside() {
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 9a92dd1..1d84b4c 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -1,46 +1,47 @@
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
-const useAppStore = defineStore(
-  'app',
-  {
-    state: () => ({
-      sidebar: {
-        opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
-        withoutAnimation: false,
-        hide: false
-      },
-      device: 'desktop',
-      size: Cookies.get('size') || 'default'
-    }),
-    actions: {
-      toggleSideBar(withoutAnimation) {
-        if (this.sidebar.hide) {
-          return false
-        }
-        this.sidebar.opened = !this.sidebar.opened
-        this.sidebar.withoutAnimation = withoutAnimation
-        if (this.sidebar.opened) {
-          Cookies.set('sidebarStatus', 1)
-        } else {
-          Cookies.set('sidebarStatus', 0)
-        }
-      },
-      closeSideBar({ withoutAnimation }) {
-        Cookies.set('sidebarStatus', 0)
-        this.sidebar.opened = false
-        this.sidebar.withoutAnimation = withoutAnimation
-      },
-      toggleDevice(device) {
-        this.device = device
-      },
-      setSize(size) {
-        this.size = size
-        Cookies.set('size', size)
-      },
-      toggleSideBarHide(status) {
-        this.sidebar.hide = status
-      }
-    }
-  })
+const useAppStore = defineStore("app", {
+  state: () => ({
+    sidebar: {
+      opened: true,
+      withoutAnimation: false,
+      hide: false,
+    },
+    device: "desktop",
+    size: Cookies.get("size") || "default",
+  }),
+  actions: {
+    toggleSideBar(withoutAnimation) {
+      this.sidebar.opened = true
+      return
+      // if (this.sidebar.hide) {
+      //   return false;
+      // }
+      // this.sidebar.opened = !this.sidebar.opened;
+      // this.sidebar.withoutAnimation = withoutAnimation;
+      // if (this.sidebar.opened) {
+      //   Cookies.set("sidebarStatus", 1);
+      // } else {
+      //   Cookies.set("sidebarStatus", 0);
+      // }
+    },
+    closeSideBar({ withoutAnimation }) {
+      Cookies.set("sidebarStatus", 0);
+      this.sidebar.opened = false;
+      this.sidebar.withoutAnimation = withoutAnimation;
+    },
+    toggleDevice(device) {
+      this.device = device;
+    },
+    setSize(size) {
+      this.size = size;
+      Cookies.set("size", size);
+    },
+    toggleSideBarHide(status) {
+      // this.sidebar.hide = status;
+      this.sidebar.hide = false
+    },
+  },
+});
 
-export default useAppStore
+export default useAppStore;
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 2c6398f..82cd4ed 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,77 +1,86 @@
-import { login, logout, getInfo } from '@/api/login'
-import { getToken, setToken, removeToken } from '@/utils/auth'
-import { isHttp, isEmpty } from "@/utils/validate"
-import defAva from '@/assets/images/profile.jpg'
+import { login, logout, getInfo } from "@/api/login";
+import { getToken, setToken, removeToken } from "@/utils/auth";
+import { isHttp, isEmpty } from "@/utils/validate";
+import defAva from "@/assets/images/profile.jpg";
+import defaultAvatar from "@/assets/images/touxiang.png";
 
-const useUserStore = defineStore(
-  'user',
-  {
-    state: () => ({
-      token: getToken(),
-      id: '',
-      name: '',
-      nickName: '',
-      avatar: '',
-      roles: [],
-      permissions: []
-    }),
-    actions: {
-      // 登录
-      login(userInfo) {
-        const username = userInfo.username.trim()
-        const password = userInfo.password
-        const code = userInfo.code
-        const uuid = userInfo.uuid
-        return new Promise((resolve, reject) => {
-          login(username, password, code, uuid).then(res => {
-            setToken(res.token)
-            this.token = res.token
-            resolve()
-          }).catch(error => {
-            reject(error)
+const useUserStore = defineStore("user", {
+  state: () => ({
+    token: getToken(),
+    id: "",
+    name: "",
+    nickName: "",
+    avatar: "",
+    roles: [],
+    permissions: [],
+  }),
+  actions: {
+    // 登录
+    login(userInfo) {
+      const username = userInfo.username.trim();
+      const password = userInfo.password;
+      const code = userInfo.code;
+      const uuid = userInfo.uuid;
+      return new Promise((resolve, reject) => {
+        login(username, password, code, uuid)
+          .then((res) => {
+            setToken(res.token);
+            this.token = res.token;
+            resolve();
           })
-        })
-      },
-      // 获取用户信息
-      getInfo() {
-        return new Promise((resolve, reject) => {
-          getInfo().then(res => {
-            const user = res.user
-            let avatar = user.avatar || ""
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    // 获取用户信息
+    getInfo() {
+      return new Promise((resolve, reject) => {
+        getInfo()
+          .then((res) => {
+            const user = res.user;
+            let avatar = user.avatar || "";
+
             if (!isHttp(avatar)) {
-              avatar = (isEmpty(avatar)) ? defAva : import.meta.env.VITE_APP_BASE_API + avatar
+              avatar = isEmpty(avatar)
+                ? defaultAvatar
+                : import.meta.env.VITE_APP_BASE_API + avatar;
             }
-            if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-              this.roles = res.roles
-              this.permissions = res.permissions
+            if (res.roles && res.roles.length > 0) {
+              // 验证返回的roles是否是一个非空数组
+              this.roles = res.roles;
+              this.permissions = res.permissions;
             } else {
-              this.roles = ['ROLE_DEFAULT']
+              this.roles = ["ROLE_DEFAULT"];
             }
-            this.id = user.userId
-            this.name = user.userName
-            this.nickName = user.nickName
-            this.avatar = avatar
-            resolve(res)
-          }).catch(error => {
-            reject(error)
+            this.id = user.userId;
+            this.name = user.userName;
+            this.nickName = user.nickName;
+            this.avatar = avatar;
+            resolve(res);
           })
-        })
-      },
-      // 退出系统
-      logOut() {
-        return new Promise((resolve, reject) => {
-          logout(this.token).then(() => {
-            this.token = ''
-            this.roles = []
-            this.permissions = []
-            removeToken()
-            resolve()
-          }).catch(error => {
-            reject(error)
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    // 退出系统
+    logOut() {
+      return new Promise((resolve, reject) => {
+        logout(this.token)
+          .then(() => {
+            this.token = "";
+            this.roles = [];
+            this.permissions = [];
+            removeToken();
+            resolve();
           })
-        })
-      }
-    }
-  })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+  },
+});
 
-export default useUserStore
+export default useUserStore;