diff --git a/package.json b/package.json
index e1ac1af..dd7e7a8 100644
--- a/package.json
+++ b/package.json
@@ -18,30 +18,30 @@
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
     "@vueup/vue-quill": "1.2.0",
-    "@vueuse/core": "10.11.0",
-    "axios": "0.28.1",
+    "@vueuse/core": "13.3.0",
+    "axios": "1.9.0",
     "clipboard": "2.0.11",
-    "echarts": "5.5.1",
-    "element-plus": "2.7.6",
+    "echarts": "5.6.0",
+    "element-plus": "2.9.11",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
-    "pinia": "2.1.7",
-    "splitpanes": "3.1.5",
-    "vue": "3.4.31",
+    "pinia": "3.0.2",
+    "splitpanes": "4.0.4",
+    "vue": "3.5.16",
     "vue-cropper": "1.1.1",
-    "vue-router": "4.4.0",
+    "vue-router": "4.5.1",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "5.0.5",
-    "sass": "1.77.5",
-    "unplugin-auto-import": "0.17.6",
+    "@vitejs/plugin-vue": "5.2.4",
+    "sass-embedded": "1.89.1",
+    "unplugin-auto-import": "0.18.6",
     "unplugin-vue-setup-extend-plus": "1.0.1",
-    "vite": "5.3.2",
+    "vite": "6.3.5",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons": "2.0.1"
   },
diff --git a/src/assets/styles/btn.scss b/src/assets/styles/btn.scss
index 46a41f3..bc30304 100644
--- a/src/assets/styles/btn.scss
+++ b/src/assets/styles/btn.scss
@@ -1,4 +1,4 @@
-@import './variables.module.scss';
+@use './variables.module.scss' as *;
 
 @mixin colorBtn($color) {
   background: $color;
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 59a3b20..a859a75 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -1,10 +1,9 @@
-@import './variables.module.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
-@import './ruoyi.scss';
+@use './mixin.scss';
+@use './transition.scss';
+@use './element-ui.scss';
+@use './sidebar.scss';
+@use './btn.scss';
+@use './ruoyi.scss';
 
 body {
   height: 100%;
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index d35e656..5764296 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -1,9 +1,11 @@
+@use './variables.module.scss' as vars;
+
 #app {
 
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
-    margin-left: $base-sidebar-width;
+    margin-left: vars.$base-sidebar-width;
     position: relative;
   }
 
@@ -13,7 +15,7 @@
 
   .sidebar-container {
     transition: width 0.28s;
-    width: $base-sidebar-width !important;
+    width: vars.$base-sidebar-width !important;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -87,12 +89,12 @@
     }
 
     & .theme-dark .is-active > .el-sub-menu__title {
-      color: $base-menu-color-active !important;
+      color: vars.$base-menu-color-active !important;
     }
 
     & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
-      min-width: $base-sidebar-width !important;
+      min-width: vars.$base-sidebar-width !important;
 
       &:hover {
         background-color: rgba(0, 0, 0, 0.06) !important;
@@ -101,10 +103,10 @@
 
     & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
-      background-color: $base-sub-menu-background;
+      background-color: vars.$base-sub-menu-background;
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        background-color: vars.$base-sub-menu-hover !important;
       }
     }
   }
@@ -167,7 +169,7 @@
   }
 
   .el-menu--collapse .el-menu .el-sub-menu {
-    min-width: $base-sidebar-width !important;
+    min-width: vars.$base-sidebar-width !important;
   }
 
   // mobile responsive
@@ -178,14 +180,14 @@
 
     .sidebar-container {
       transition: transform .28s;
-      width: $base-sidebar-width !important;
+      width: vars.$base-sidebar-width !important;
     }
 
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
-        transform: translate3d(-$base-sidebar-width, 0, 0);
+        transform: translate3d(-(vars.$base-sidebar-width), 0, 0);
       }
     }
   }
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 90146ae..42d372d 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -47,8 +47,6 @@ const getLogoTextColor = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/variables.module.scss';
-
 .sidebarLogoFade-enter-active {
   transition: opacity 1.5s;
 }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index e36a9e4..9bdf656 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -64,11 +64,11 @@ function setLayout() {
 </script>
 
 <style lang="scss" scoped>
-  @import "@/assets/styles/mixin.scss";
-  @import "@/assets/styles/variables.module.scss";
+@use "@/assets/styles/mixin.scss" as mix;
+@use "@/assets/styles/variables.module.scss" as vars;
 
 .app-wrapper {
-  @include clearfix;
+  @include mix.clearfix;
   position: relative;
   height: 100%;
   width: 100%;
@@ -94,7 +94,7 @@ function setLayout() {
   top: 0;
   right: 0;
   z-index: 9;
-  width: calc(100% - #{$base-sidebar-width});
+  width: calc(100% - #{vars.$base-sidebar-width});
   transition: width 0.28s;
 }