样式等问题优化

package.json

@@ -42,6 +42,8 @@
         "vuedraggable": "4.1.0"
     },
     "devDependencies": {
+        "@vicons/ionicons5": "^0.13.0",
+        "@vicons/utils": "^0.1.4",
         "@vitejs/plugin-vue": "5.2.4",
         "less": "^4.5.1",
         "mockjs": "^1.1.0",

src/assets/styles/sidebar.scss

@@ -24,8 +24,9 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    -webkit-box-shadow: 2px 0 8px rgba(0, 168, 98, 0.15);
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+    box-shadow: 2px 0 8px rgba(0, 168, 98, 0.15);
+    background: linear-gradient(180deg, #1a3a2e 0%, #153028 100%);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -80,11 +81,13 @@
       display: inline-block !important;
     }
 
-    // menu hover
+    // menu hover - 国家电网风格
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(0, 168, 98, 0.15) !important;
+        color: #00A862 !important;
+        transition: all 0.3s ease;
       }
     }
 
@@ -97,7 +100,9 @@
       min-width: vars.$base-sidebar-width !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(0, 168, 98, 0.15) !important;
+        color: #00A862 !important;
+        transition: all 0.3s ease;
       }
     }
 
@@ -212,8 +217,10 @@
   .nest-menu .el-sub-menu>.el-sub-menu__title,
   .el-menu-item {
     &:hover {
-      // you can use $sub-menuHover
+      // 国家电网风格悬停效果
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      background-color: rgba(0, 168, 98, 0.15) !important;
+      color: #00A862 !important;
+      transition: all 0.3s ease;
     }
   }
 

src/assets/styles/variables.module.scss

@@ -1,39 +1,39 @@
-// base color
+// base color - 国家电网主题色
-$blue: #324157;
+$blue: #1a4d7a;
-$light-blue: #333c46;
+$light-blue: #2d6ba3;
 $red: #C03639;
 $pink: #E65D6E;
-$green: #30B08F;
+$green: #00A862; // 国家电网主绿色
-$tiffany: #4AB7BD;
+$tiffany: #00B86C; // 国家电网辅助绿色
 $yellow: #FEC171;
-$panGreen: #30B08F;
+$panGreen: #00C97A; // 国家电网亮绿色
 
-// 默认主题变量
+// 默认主题变量 - 国家电网深色侧边栏
-$menuText: #bfcbd9;
+$menuText: #e8f5e9;
-$menuActiveText: #409eff;
+$menuActiveText: #00A862; // 国家电网主绿色
-$menuBg: #304156;
+$menuBg: #1a3a2e; // 深绿色背景
-$menuHover: #263445;
+$menuHover: #2d5a4a; // 悬停时的深绿色
 
-// 浅色主题theme-light
+// 浅色主题theme-light - 国家电网浅色侧边栏
 $menuLightBg: #ffffff;
-$menuLightHover: #f0f1f5;
+$menuLightHover: #e8f5e9; // 浅绿色悬停
 $menuLightText: #303133;
-$menuLightActiveText: #409EFF;
+$menuLightActiveText: #00A862; // 国家电网主绿色
 
 // 基础变量
 $base-sidebar-width: 200px;
 $sideBarWidth: 200px;
 
-// 菜单暗色变量
+// 菜单暗色变量 - 国家电网风格
-$base-menu-color: #bfcbd9;
+$base-menu-color: #e8f5e9;
-$base-menu-color-active: #f4f4f5;
+$base-menu-color-active: #00A862; // 国家电网主绿色
-$base-menu-background: #304156;
+$base-menu-background: #1a3a2e; // 深绿色背景
-$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-background: #153028; // 更深绿色子菜单背景
-$base-sub-menu-hover: #001528;
+$base-sub-menu-hover: #2d5a4a; // 悬停时的深绿色
 
-// 组件变量
+// 组件变量 - 国家电网主题色
-$--color-primary: #409EFF;
+$--color-primary: #00A862; // 国家电网主绿色
-$--color-success: #67C23A;
+$--color-success: #00B86C; // 国家电网辅助绿色
 $--color-warning: #E6A23C;
 $--color-danger: #F56C6C;
 $--color-info: #909399;
@@ -65,16 +65,23 @@ $--color-info: #909399;
   colorInfo: $--color-info;
 }
 
-// CSS变量定义
+// CSS变量定义 - 国家电网主题
 :root {
   /* 亮色模式变量 */
   --sidebar-bg: #{$menuBg};
   --sidebar-text: #{$menuText};
   --menu-hover: #{$menuHover};
+  --menu-active-text: #{$menuActiveText};
   
   --navbar-bg: #ffffff;
   --navbar-text: #303133;
   
+  /* 国家电网主题色 */
+  --sgcc-primary: #00A862;
+  --sgcc-primary-light: #00B86C;
+  --sgcc-primary-dark: #008050;
+  --sgcc-gradient: linear-gradient(135deg, #00A862 0%, #00B86C 100%);
+  
   /* splitpanes default-theme 变量 */
   --splitpanes-default-bg: #ffffff;
 

src/layout/components/Navbar.vue

@@ -1,60 +1,155 @@
 <template>
-  <div class="navbar">
+    <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+        <hamburger
-    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
+            id="hamburger-container"
-    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-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">
+        <div class="right-menu">
-      <template v-if="appStore.device !== 'mobile'">
+            <template v-if="appStore.device !== 'mobile'">
-        <header-search id="header-search" class="right-menu-item" />
+                <div class="icon-container">
+                    <el-input
+                        style="width: 130px"
+                        placeholder="搜索"
+                        class="search-input"
+                        @keydown.ctrl.k="handleSearch"
+                    >
+                        <template #prefix>
+                            <el-icon class="el-input__icon"><search /></el-icon>
+                        </template>
+                        <template #suffix>
+                            <span class="search-input-suffix-text"> Ctrl K </span>
+                        </template>
+                    </el-input>
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
+                    <Icon size="18">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
+                        <Moon />
-        </el-tooltip>
+                    </Icon>
+                    <Icon size="18">
+                        <ScanOutline />
+                    </Icon>
+                    <Icon size="18">
+                        <SunnyOutline />
+                    </Icon>
+                    <Icon size="18">
+                        <NotificationsOutline />
+                    </Icon>
+                </div>
 
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
+                <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />
-          <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">
+                <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
+                    <size-select id="size-select" class="right-menu-item hover-effect" />
-            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
+                </el-tooltip> -->
-            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
+            </template>
-          </div>
-        </el-tooltip>
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+            <el-dropdown
-          <size-select id="size-select" class="right-menu-item hover-effect" />
+                @command="handleCommand"
-        </el-tooltip>
+                class="avatar-container right-menu-item hover-effect"
-      </template>
+                placement="bottom-end"
+                trigger="click"
+            >
+                <div class="avatar-wrapper">
+                    <img :src="userStore.avatar" class="user-avatar" />
+                    <span class="user-nickname"> {{ userStore.nickName }} </span>
+                    <Icon size="18">
+                        <ChevronDown />
+                    </Icon>
+                </div>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <!-- <router-link to="/user/profile">
+                            <el-dropdown-item>个人中心</el-dropdown-item>
+                        </router-link>
+                        <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
+                            <span>布局设置</span>
+                        </el-dropdown-item>
+                        <el-dropdown-item divided command="logout">
+                            <span>退出登录</span>
+                        </el-dropdown-item> -->
 
-      <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
+                        <!-- <el-dropdown-item> </el-dropdown-item> -->
-        <div class="avatar-wrapper">
+
-          <img :src="userStore.avatar" class="user-avatar" />
+                        <div class="user-info">
-          <span class="user-nickname"> {{ userStore.nickName }} </span>
+                            <img :src="userStore.avatar" class="user-avatar" />
+                            <div class="user-info-text">
+                                <div>
+                                    <span>李思思</span>
+                                    <el-tag type="success">管理员</el-tag>
+                                </div>
+
+                                <div>Admin_@soho.com</div>
+                            </div>
+                        </div>
+
+                        <div class="user-info-item">
+                            <div class="user-info-item-text">
+                                <div style="display: flex; align-items: center; gap: 6px">
+                                    <Icon size="18"> <PersonOutline /> </Icon>
+                                    <span> 个人中心 </span>
+                                </div>
+
+                                <Icon size="18">
+                                    <ChevronForward />
+                                </Icon>
+                            </div>
+                            <div class="user-info-item-text">
+                                <div style="display: flex; align-items: center; gap: 6px">
+                                    <Icon size="18"> <LockClosedOutline /> </Icon>
+                                    <span> 修改密码 </span>
+                                </div>
+
+                                <Icon size="18">
+                                    <ChevronForward />
+                                </Icon>
+                            </div>
+                        </div>
+
+                        <div class="logout-item">
+                            <div class="logout-item-text" @click="logout">
+                                <Icon size="18"> <ExitOutline /> </Icon>
+                                <span> 退出登录 </span>
+                            </div>
+                        </div>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
         </div>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <router-link to="/user/profile">
-              <el-dropdown-item>个人中心</el-dropdown-item>
-            </router-link>
-            <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
-                <span>布局设置</span>
-              </el-dropdown-item>
-            <el-dropdown-item divided command="logout">
-              <span>退出登录</span>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
     </div>
-  </div>
 </template>
 
 <script setup>
 import { ElMessageBox } from 'element-plus'
+import {
+    Moon,
+    ScanOutline,
+    SunnyOutline,
+    NotificationsOutline,
+    ChevronDown,
+    PersonOutline,
+    LockClosedOutline,
+    ChevronForward,
+    ExitOutline,
+} from '@vicons/ionicons5'
+import { Icon } from '@vicons/utils'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
@@ -72,154 +167,284 @@ const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 
 function toggleSideBar() {
-  appStore.toggleSideBar()
+    appStore.toggleSideBar()
 }
 
 function handleCommand(command) {
-  switch (command) {
+    switch (command) {
-    case "setLayout":
+        case 'setLayout':
-      setLayout()
+            setLayout()
-      break
+            break
-    case "logout":
+        case 'logout':
-      logout()
+            logout()
-      break
+            break
-    default:
+        default:
-      break
+            break
-  }
+    }
 }
 
 function logout() {
-  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-    confirmButtonText: '确定',
+        confirmButtonText: '确定',
-    cancelButtonText: '取消',
+        cancelButtonText: '取消',
-    type: 'warning'
+        type: 'warning',
-  }).then(() => {
-    userStore.logOut().then(() => {
-      location.href = '/index'
     })
-  }).catch(() => { })
+        .then(() => {
+            userStore.logOut().then(() => {
+                location.href = '/index'
+            })
+        })
+        .catch(() => {})
 }
 
 const emits = defineEmits(['setLayout'])
 function setLayout() {
-  emits('setLayout')
+    emits('setLayout')
 }
 
 function toggleTheme() {
-  settingsStore.toggleTheme()
+    settingsStore.toggleTheme()
+}
+
+const handleSearch = () => {
+    console.log('handleSearch')
 }
 </script>
 
 <style lang='scss' scoped>
 .navbar {
-  height: 50px;
+    height: 50px;
-  overflow: hidden;
+    overflow: hidden;
-  position: relative;
+    position: relative;
-  background: var(--navbar-bg);
+    background: var(--navbar-bg);
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    box-shadow: 0 2px 8px rgba(0, 168, 98, 0.1);
 
-  .hamburger-container {
+    .hamburger-container {
-    line-height: 46px;
+        line-height: 46px;
-    height: 100%;
+        height: 100%;
-    float: left;
+        float: left;
-    cursor: pointer;
-    transition: background 0.3s;
-    -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-  }
-
-  .topmenu-container {
-    position: absolute;
-    left: 50px;
-  }
-
-  .errLog-container {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
-    display: flex;
-
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
-
-      &.hover-effect {
         cursor: pointer;
         transition: background 0.3s;
+        -webkit-tap-highlight-color: transparent;
 
         &:hover {
-          background: rgba(0, 0, 0, 0.025);
+            background: rgba(0, 0, 0, 0.025);
         }
-      }
+    }
 
-      &.theme-switch-wrapper {
+    .breadcrumb-container {
+        float: left;
+    }
+
+    .topmenu-container {
+        position: absolute;
+        left: 50px;
+    }
+
+    .errLog-container {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .right-menu {
+        float: right;
+        height: 100%;
+        line-height: 50px;
         display: flex;
         align-items: center;
 
-        svg {
+        .icon-container {
-          transition: transform 0.3s;
+            padding-right: 18px;
-          
+            display: flex;
-          &:hover {
+            align-items: center;
-            transform: scale(1.15);
+            justify-content: center;
-          }
+            gap: 18px;
+            border-right: 1px solid #e0e0e0;
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        .right-menu-item {
+            display: inline-block;
+            padding: 0 8px;
+            height: 100%;
+            font-size: 18px;
+            color: #5a5e66;
+
+            vertical-align: text-bottom;
+
+            &.hover-effect {
+                cursor: pointer;
+                transition: background 0.3s;
+
+                &:hover {
+                    background: rgba(0, 0, 0, 0.025);
+                }
+            }
+
+            &.theme-switch-wrapper {
+                display: flex;
+                align-items: center;
+
+                svg {
+                    transition: transform 0.3s;
+
+                    &:hover {
+                        transform: scale(1.15);
+                    }
+                }
+            }
+        }
+
+        .avatar-container {
+            margin-right: 0px;
+            padding: 0 14px;
+            padding-left: 18px;
+            flex: 1;
+            display: flex;
+            align-items: center;
+
+            .avatar-wrapper {
+                display: flex;
+                align-items: center;
+                border-radius: 6px;
+                padding: 4px;
+                .user-avatar {
+                    cursor: pointer;
+                    width: 30px;
+                    height: 30px;
+                    margin-right: 8px;
+                    border-radius: 50%;
+                }
+
+                .user-nickname {
+                    padding: 0 4px;
+                    font-size: 14px;
+                    font-weight: bold;
+                }
+
+                i {
+                    cursor: pointer;
+                    position: absolute;
+                    right: -20px;
+                    top: 25px;
+                    font-size: 12px;
+                }
+            }
+
+            .avatar-wrapper:hover {
+                background-color: rgba(0, 168, 98, 0.1);
+                transition: all 0.3s ease;
+            }
+        }
+    }
+}
+
+.user-info {
+    padding: 14px 16px 14px 6px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif;
+    border-bottom: 1px dashed #f0f0f0;
+
+    .user-info-text {
+        margin-left: 6px;
+        letter-spacing: 1px;
+
+        div:first-child {
+            margin-bottom: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
         }
-      }
     }
 
-    .avatar-container {
+    .user-avatar {
-      margin-right: 0px;
+        width: 36px;
-      padding-right: 0px;
+        height: 36px;
-
+        margin-right: 8px;
-      .avatar-wrapper {
+        border-radius: 4px;
-        margin-top: 10px;
-        right: 8px;
-        position: relative;
-
-        .user-avatar {
-          cursor: pointer;
-          width: 30px;
-          height: 30px;
-          margin-right: 8px;
-          border-radius: 50%;
-        }
-
-        .user-nickname{
-          position: relative;
-          left: 0px;
-          bottom: 10px;
-          font-size: 14px;
-          font-weight: bold;
-        }
-
-        i {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
-        }
-      }
     }
-  }
+
+    .user-info-text div:last-child {
+        color: #909599;
+    }
+}
+
+.user-info-item {
+    padding: 4px 0 14px 0;
+    border-bottom: 1px dashed #f0f0f0;
+
+    .user-info-item-text {
+        padding: 12px 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        transition: all 0.6s ease;
+    }
+    .user-info-item-text:hover {
+        background-color: #f3f3f5;
+        border-radius: 4px;
+    }
+}
+
+.logout-item {
+    padding: 12px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .logout-item-text {
+        padding: 6px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        background-color: #f4f5f5;
+        border-radius: 4px;
+        color: #767c82;
+        border-radius: 4px;
+        letter-spacing: 1px;
+        transition: all 0.6s ease;
+
+        &:hover {
+            background-color: #eceded;
+        }
+    }
+}
+
+.icon-container :deep(.el-input) {
+    --el-input-bg-color: #efeff5;
+    --el-input-border: transparent;
+    --el-input-border-radius: 6px;
+    --el-input-hover-border: transparent;
+    --el-input-focus-border: transparent;
+    --el-input-transparent-border: transparent;
+    --el-input-border-color: transparent;
+    --el-input-hover-border-color: transparent;
+    --el-input-focus-border-color: transparent;
+}
+
+.search-input-suffix-text {
+    background-color: #fff;
+    height: 25px;
+    line-height: 25px;
+    padding: 0 4px;
+    border-radius: 6px;
+}
+
+.xicon {
+    cursor: pointer;
+}
+
+.xicon:hover {
+    color: #00a862;
+    background-color: rgba(0, 168, 98, 0.1);
+    transform: scale(1.2);
+    transition: all 0.3s ease;
 }
 </style>

src/layout/components/Sidebar/index.vue

@@ -83,16 +83,29 @@ const activeMenu = computed(() => {
     
     .el-menu-item, .el-sub-menu__title {
       &:hover {
-        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
+        background-color: rgba(0, 168, 98, 0.15) !important;
+        color: #00A862 !important;
+        transition: all 0.3s ease;
       }
     }
 
     .el-menu-item {
       color: v-bind(getMenuTextColor);
+      position: relative;
       
       &.is-active {
-        color: var(--menu-active-text, #409eff);
+        color: #00A862 !important;
-        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
+        background-color: rgba(0, 168, 98, 0.2) !important;
+        
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 3px;
+          background: linear-gradient(180deg, #00A862 0%, #00B86C 100%);
+        }
       }
     }
 

src/main.js

@@ -83,11 +83,27 @@ app.component('svg-icon', SvgIcon)
 
 directive(app)
 
-// 使用element-plus 并且设置全局的大小
+// 使用element-plus 并且设置全局的大小和主题色
 app.use(ElementPlus, {
     locale: locale,
     // 支持 large、default、small
     size: Cookies.get('size') || 'default',
 })
 
+// 设置 Element Plus 主题色为国家电网绿色（默认主题）
+const style = document.createElement('style')
+style.id = 'sgcc-theme-style'
+style.textContent = `
+  :root {
+    --el-color-primary: #00A862;
+    --el-color-primary-light-3: #33B97E;
+    --el-color-primary-light-5: #66CA9A;
+    --el-color-primary-light-7: #99DBB6;
+    --el-color-primary-light-8: #B3E6CC;
+    --el-color-primary-light-9: #CCF0DD;
+    --el-color-primary-dark-2: #008650;
+  }
+`
+document.head.appendChild(style)
+
 app.mount('#app')

src/store/modules/settings.js

@@ -14,7 +14,7 @@ const useSettingsStore = defineStore(
   {
     state: () => ({
       title: '',
-      theme: storageSetting.theme || '#409EFF',
+      theme: storageSetting.theme || '#00A862', // 国家电网主绿色
       sideTheme: storageSetting.sideTheme || sideTheme,
       showSettings: showSettings,
       topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

src/views/login.vue

@@ -1,73 +1,113 @@
 <template>
-  <div class="login">
+    <div class="login-container">
-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+        <!-- 动态背景 -->
-      <h3 class="title">{{ title }}</h3>
+        <div class="login-background">
-      <el-form-item prop="username">
+            <div class="bg-animation">
-        <el-input
+                <div class="particle" v-for="i in 50" :key="i" :style="getParticleStyle(i)"></div>
-          v-model="loginForm.username"
+            </div>
-          type="text"
+            <div class="gradient-overlay"></div>
-          size="large"
-          auto-complete="off"
-          placeholder="账号"
-        >
-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          size="large"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          size="large"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
         </div>
-      </el-form-item>
+
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+        <!-- 登录表单卡片 -->
-      <el-form-item style="width:100%;">
+        <div class="login-card">
-        <el-button
+            <div class="card-header">
-          :loading="loading"
+                <div class="logo-container">
-          size="large"
+                    <div class="logo-circle">
-          type="primary"
+                        <div class="logo-inner"></div>
-          style="width:100%;"
+                    </div>
-          @click.prevent="handleLogin"
+                </div>
-        >
+                <h2 class="login-title">{{ title }}</h2>
-          <span v-if="!loading">登 录</span>
+                <p class="login-subtitle">欢迎登录系统</p>
-          <span v-else>登 录 中...</span>
+            </div>
-        </el-button>
+
-        <div style="float: right;" v-if="register">
+            <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+                <el-form-item prop="username">
+                    <el-input
+                        v-model="loginForm.username"
+                        type="text"
+                        size="large"
+                        auto-complete="off"
+                        placeholder="请输入账号"
+                        class="login-input"
+                    >
+                        <template #prefix>
+                            <svg-icon icon-class="user" class="el-input__icon input-icon" />
+                        </template>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item prop="password">
+                    <el-input
+                        v-model="loginForm.password"
+                        type="password"
+                        size="large"
+                        auto-complete="off"
+                        placeholder="请输入密码"
+                        class="login-input"
+                        @keyup.enter="handleLogin"
+                    >
+                        <template #prefix>
+                            <svg-icon icon-class="password" class="el-input__icon input-icon" />
+                        </template>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item prop="code" v-if="captchaEnabled">
+                    <div class="captcha-container">
+                        <el-input
+                            v-model="loginForm.code"
+                            size="large"
+                            auto-complete="off"
+                            placeholder="验证码"
+                            class="captcha-input"
+                            @keyup.enter="handleLogin"
+                        >
+                            <template #prefix>
+                                <svg-icon
+                                    icon-class="validCode"
+                                    class="el-input__icon input-icon"
+                                />
+                            </template>
+                        </el-input>
+                        <div class="login-code">
+                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
+                        </div>
+                    </div>
+                </el-form-item>
+
+                <div class="form-options">
+                    <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
+                </div>
+
+                <el-form-item style="width: 100%; margin-top: 30px">
+                    <el-button
+                        :loading="loading"
+                        size="large"
+                        type="primary"
+                        class="login-button"
+                        @click.prevent="handleLogin"
+                    >
+                        <span v-if="!loading">登 录</span>
+                        <span v-else>登 录 中...</span>
+                    </el-button>
+                    <div class="register-link" v-if="register">
+                        <router-link class="link-type" :to="'/register'">立即注册</router-link>
+                    </div>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <!-- 底部版权 -->
+        <div class="el-login-footer">
+            <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
         </div>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
     </div>
-  </div>
 </template>
 
 <script setup>
-import { getCodeImg } from "@/api/login"
+import { getCodeImg } from '@/api/login'
-import Cookies from "js-cookie"
+import Cookies from 'js-cookie'
-import { encrypt, decrypt } from "@/utils/jsencrypt"
+import { encrypt, decrypt } from '@/utils/jsencrypt'
 import useUserStore from '@/store/modules/user'
 
 const title = import.meta.env.VITE_APP_TITLE
@@ -77,20 +117,20 @@ const router = useRouter()
 const { proxy } = getCurrentInstance()
 
 const loginForm = ref({
-  username: "admin",
+    username: 'admin',
-  password: "admin123",
+    password: 'admin123',
-  rememberMe: false,
+    rememberMe: false,
-  code: "",
+    code: '',
-  uuid: ""
+    uuid: '',
 })
 
 const loginRules = {
-  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+    username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
-  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
+    password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
-  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+    code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
 }
 
-const codeUrl = ref("")
+const codeUrl = ref('')
 const loading = ref(false)
 // 验证码开关
 const captchaEnabled = ref(true)
@@ -98,132 +138,463 @@ const captchaEnabled = ref(true)
 const register = ref(false)
 const redirect = ref(undefined)
 
-watch(route, (newRoute) => {
+watch(
-    redirect.value = newRoute.query && newRoute.query.redirect
+    route,
-}, { immediate: true })
+    (newRoute) => {
+        redirect.value = newRoute.query && newRoute.query.redirect
+    },
+    { immediate: true },
+)
 
 function handleLogin() {
-  proxy.$refs.loginRef.validate(valid => {
+    proxy.$refs.loginRef.validate((valid) => {
-    if (valid) {
+        if (valid) {
-      loading.value = true
+            loading.value = true
-      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
+            // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
-      if (loginForm.value.rememberMe) {
+            if (loginForm.value.rememberMe) {
-        Cookies.set("username", loginForm.value.username, { expires: 30 })
+                Cookies.set('username', loginForm.value.username, { expires: 30 })
-        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 })
+                Cookies.set('password', encrypt(loginForm.value.password), { expires: 30 })
-        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 })
+                Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 })
-      } else {
+            } else {
-        // 否则移除
+                // 否则移除
-        Cookies.remove("username")
+                Cookies.remove('username')
-        Cookies.remove("password")
+                Cookies.remove('password')
-        Cookies.remove("rememberMe")
+                Cookies.remove('rememberMe')
-      }
+            }
-      // 调用action的登录方法
+            // 调用action的登录方法
-      userStore.login(loginForm.value).then(() => {
+            userStore
-        const query = route.query
+                .login(loginForm.value)
-        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
+                .then(() => {
-          if (cur !== "redirect") {
+                    const query = route.query
-            acc[cur] = query[cur]
+                    const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
-          }
+                        if (cur !== 'redirect') {
-          return acc
+                            acc[cur] = query[cur]
-        }, {})
+                        }
-        router.push({ path: redirect.value || "/", query: otherQueryParams })
+                        return acc
-      }).catch(() => {
+                    }, {})
-        loading.value = false
+                    router.push({ path: redirect.value || '/', query: otherQueryParams })
-        // 重新获取验证码
+                })
-        if (captchaEnabled.value) {
+                .catch(() => {
-          getCode()
+                    loading.value = false
+                    // 重新获取验证码
+                    if (captchaEnabled.value) {
+                        getCode()
+                    }
+                })
         }
-      })
+    })
-    }
-  })
 }
 
 function getCode() {
-  getCodeImg().then(res => {
+    getCodeImg().then((res) => {
-    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
+        captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
-    if (captchaEnabled.value) {
+        if (captchaEnabled.value) {
-      codeUrl.value = "data:image/gif;base64," + res.img
+            codeUrl.value = 'data:image/gif;base64,' + res.img
-      loginForm.value.uuid = res.uuid
+            loginForm.value.uuid = res.uuid
-    }
+        }
-  })
+    })
 }
 
 function getCookie() {
-  const username = Cookies.get("username")
+    const username = Cookies.get('username')
-  const password = Cookies.get("password")
+    const password = Cookies.get('password')
-  const rememberMe = Cookies.get("rememberMe")
+    const rememberMe = Cookies.get('rememberMe')
-  loginForm.value = {
+    loginForm.value = {
-    username: username === undefined ? loginForm.value.username : username,
+        username: username === undefined ? loginForm.value.username : username,
-    password: password === undefined ? loginForm.value.password : decrypt(password),
+        password: password === undefined ? loginForm.value.password : decrypt(password),
-    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
-  }
+    }
 }
 
 getCode()
 getCookie()
+
+// 生成粒子样式
+function getParticleStyle(index) {
+    const size = Math.random() * 4 + 2
+    const left = Math.random() * 100
+    const animationDuration = Math.random() * 20 + 10
+    const animationDelay = Math.random() * 5
+    return {
+        width: `${size}px`,
+        height: `${size}px`,
+        left: `${left}%`,
+        animationDuration: `${animationDuration}s`,
+        animationDelay: `${animationDelay}s`,
+    }
+}
 </script>
 
 <style lang='scss' scoped>
-.login {
+.login-container {
-  display: flex;
+    position: relative;
-  justify-content: center;
+    width: 100%;
-  align-items: center;
+    height: 100vh;
-  height: 100%;
+    display: flex;
-  background-image: url("../assets/images/login-background.jpg");
+    justify-content: center;
-  background-size: cover;
+    align-items: center;
-}
+    overflow: hidden;
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
 }
 
-.login-form {
+// 动态背景
-  border-radius: 6px;
+.login-background {
-  background: #ffffff;
+    position: absolute;
-  width: 400px;
+    top: 0;
-  padding: 25px 25px 5px 25px;
+    left: 0;
-  z-index: 1;
+    width: 100%;
-  .el-input {
+    height: 100%;
-    height: 40px;
+    background: linear-gradient(
-    input {
+        135deg,
-      height: 40px;
+        #0a2e1f 0%,
+        #1a3a2e 25%,
+        #0f1f1a 50%,
+        #1a3a2e 75%,
+        #0a2e1f 100%
+    );
+    background-size: 400% 400%;
+    animation: gradientShift 15s ease infinite;
+    z-index: 0;
+}
+
+@keyframes gradientShift {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
     }
-  }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 0px;
-  }
 }
-.login-tip {
+
-  font-size: 13px;
+// 粒子动画
-  text-align: center;
+.bg-animation {
-  color: #bfbfbf;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 }
-.login-code {
+
-  width: 33%;
+.particle {
-  height: 40px;
+    position: absolute;
-  float: right;
+    background: rgba(0, 168, 98, 0.3);
-  img {
+    border-radius: 50%;
-    cursor: pointer;
+    animation: float linear infinite;
-    vertical-align: middle;
+    box-shadow: 0 0 10px rgba(0, 168, 98, 0.5);
-  }
 }
+
+@keyframes float {
+    0% {
+        transform: translateY(100vh) rotate(0deg);
+        opacity: 0;
+    }
+    10% {
+        opacity: 1;
+    }
+    90% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(-100vh) rotate(360deg);
+        opacity: 0;
+    }
+}
+
+.gradient-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 30% 50%, rgba(0, 168, 98, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 70% 80%, rgba(0, 184, 108, 0.1) 0%, transparent 50%);
+    animation: pulse 8s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+// 登录卡片
+.login-card {
+    position: relative;
+    width: 440px;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 50px 40px;
+    box-shadow: 0 20px 60px rgba(0, 168, 98, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+    z-index: 1;
+    animation: cardFadeIn 0.8s ease-out;
+    transition: transform 0.3s ease;
+
+    &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 25px 70px rgba(0, 168, 98, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
+    }
+}
+
+@keyframes cardFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+// 卡片头部
+.card-header {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.logo-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.logo-circle {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #00a862 0%, #00b86c 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    animation: logoRotate 3s linear infinite;
+    box-shadow: 0 0 30px rgba(0, 168, 98, 0.5);
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #00a862 0%, #00b86c 100%);
+        animation: ripple 2s ease-out infinite;
+    }
+}
+
+@keyframes logoRotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes ripple {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1.5);
+        opacity: 0;
+    }
+}
+
+.logo-inner {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: #fff;
+    position: relative;
+    z-index: 1;
+}
+
+.login-title {
+    margin: 20px 0 10px 0;
+    font-size: 28px;
+    font-weight: 600;
+    background: linear-gradient(135deg, #00a862 0%, #00b86c 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: 1px;
+}
+
+.login-subtitle {
+    margin: 0;
+    color: #666;
+    font-size: 14px;
+    font-weight: 400;
+}
+
+// 表单样式
+.login-form {
+    .login-input {
+        :deep(.el-input__wrapper) {
+            height: 40px;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            transition: all 0.3s ease;
+            padding: 0 12px;
+
+            &:hover {
+                box-shadow: 0 4px 12px rgba(0, 168, 98, 0.2);
+            }
+
+            &.is-focus {
+                box-shadow: 0 4px 12px rgba(0, 168, 98, 0.3);
+            }
+        }
+
+        :deep(.el-input__inner) {
+            height: 38px;
+            line-height: 38px;
+        }
+    }
+
+    .input-icon {
+        color: #00a862;
+        font-size: 18px;
+    }
+}
+
+.captcha-container {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    .captcha-input {
+        flex: 1;
+
+        :deep(.el-input__wrapper) {
+            height: 40px;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            transition: all 0.3s ease;
+            padding: 0 12px;
+
+            &:hover {
+                box-shadow: 0 4px 12px rgba(0, 168, 98, 0.2);
+            }
+
+            &.is-focus {
+                box-shadow: 0 4px 12px rgba(0, 168, 98, 0.3);
+            }
+        }
+
+        :deep(.el-input__inner) {
+            height: 38px;
+            line-height: 38px;
+        }
+    }
+
+    .login-code {
+        width: 120px;
+        height: 40px;
+        border-radius: 10px;
+        overflow: hidden;
+        cursor: pointer;
+        transition: transform 0.3s ease;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+        &:hover {
+            transform: scale(1.05);
+        }
+
+        .login-code-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+}
+
+.form-options {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    :deep(.el-checkbox) {
+        .el-checkbox__label {
+            color: #666;
+            font-size: 14px;
+        }
+    }
+}
+
+.login-button {
+    width: 100%;
+    height: 50px;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 10px;
+    background: linear-gradient(135deg, #00a862 0%, #00b86c 100%);
+    border: none;
+    box-shadow: 0 4px 15px rgba(0, 168, 98, 0.4);
+    transition: all 0.3s ease;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(0, 168, 98, 0.5);
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
+}
+
+.register-link {
+    text-align: center;
+    margin-top: 20px;
+
+    .link-type {
+        color: #00a862;
+        text-decoration: none;
+        font-size: 14px;
+        transition: color 0.3s ease;
+
+        &:hover {
+            color: #00b86c;
+            text-decoration: underline;
+        }
+    }
+}
+
+// 底部版权
 .el-login-footer {
-  height: 40px;
+    position: fixed;
-  line-height: 40px;
+    bottom: 0;
-  position: fixed;
+    left: 0;
-  bottom: 0;
+    width: 100%;
-  width: 100%;
+    height: 50px;
-  text-align: center;
+    line-height: 50px;
-  color: #fff;
+    text-align: center;
-  font-family: Arial;
+    color: rgba(255, 255, 255, 0.8);
-  font-size: 12px;
+    font-size: 12px;
-  letter-spacing: 1px;
+    letter-spacing: 1px;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(10px);
 }
-.login-code-img {
+
-  height: 40px;
+// 响应式设计
-  padding-left: 12px;
+@media (max-width: 768px) {
+    .login-card {
+        width: 90%;
+        padding: 40px 30px;
+    }
+
+    .login-title {
+        font-size: 24px;
+    }
 }
 </style>

src/views/showComponents/showTable/index.vue

@@ -36,9 +36,9 @@
                     >
                         <!-- 工具栏插槽 -->
                         <template #toolbar>
-                            <ComButton type="primary" icon="Plus" @click="handleAdd"
+                            <ComButton type="primary" icon="Plus" @click="handleAdd">
-                                >新增</ComButton
+                                新增
-                            >
+                            </ComButton>
                             <ComButton
                                 type="danger"
                                 icon="Delete"