update 优化 调整页面画风 不要过于生硬圆滑

src/assets/styles/element-ui.scss

@@ -192,7 +192,7 @@
 
 // Buttons
 .el-button {
-  border-radius: var(--app-radius-md);
+  border-radius: var(--el-border-radius-base);
   transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
 }
 

src/assets/styles/index.scss

@@ -115,7 +115,7 @@ div:focus {
 }
 
 aside {
-  background: #eef1f6;
+  background: var(--el-fill-color-light);
   padding: 8px 24px;
   margin-bottom: 20px;
   border-radius: var(--app-radius-md);
@@ -131,43 +131,43 @@ aside {
     'Hiragino Sans GB',
     'Microsoft YaHei',
     sans-serif;
-  color: #2c3e50;
+  color: var(--el-text-color-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
   a {
-    color: #337ab7;
+    color: var(--el-color-primary);
     cursor: pointer;
 
     &:hover {
-      color: rgb(32, 160, 255);
+      color: var(--el-color-primary-light-3);
     }
   }
 }
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
-  background: var(--app-surface-bg);
-  border: 1px solid var(--app-surface-border);
-  border-radius: var(--app-radius-base);
-  box-shadow: var(--app-shadow-sm);
+  padding: 16px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
 }
 
 // search面板样式
 .panel,
 .search {
-  margin-bottom: 0.75rem;
+  margin-bottom: 12px;
   border-radius: var(--app-radius-base);
-  border: 1px solid var(--el-border-color-light);
-  padding: 0.75rem;
-  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+  border: 1px solid var(--el-border-color-lighter);
+  padding: 16px;
+  background: var(--app-surface-bg);
+  box-shadow: var(--app-shadow-sm);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
 
   &:hover {
-    box-shadow: var(--app-shadow-sm);
-    border-color: var(--el-border-color);
-    transform: translateY(-1px);
+    box-shadow: var(--app-shadow-md);
+    border-color: var(--el-border-color-light);
   }
 }
 

src/assets/styles/ruoyi.scss

@@ -77,7 +77,7 @@ h6 {
   font-weight: 600;
 }
 .el-dialog:not(.is-fullscreen) {
-  margin-top: 6vh !important;
+  margin-top: 0 !important;
 }
 
 .el-dialog.scrollbar .el-dialog__body {
@@ -125,8 +125,8 @@ h6 {
 /* tree border */
 .tree-border {
   margin-top: 5px;
-  border: 1px solid #e5e6e7;
-  background: #ffffff none;
+  border: 1px solid var(--el-border-color-light);
+  background: var(--el-bg-color);
   border-radius: var(--app-radius-md);
   width: 100%;
 }
@@ -203,12 +203,11 @@ h6 {
   box-shadow: var(--app-shadow-sm);
   border-color: var(--el-border-color-lighter);
   overflow: hidden;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  transition: box-shadow 0.2s ease;
 }
 
 .el-card:hover {
   box-shadow: var(--app-shadow-md);
-  transform: translateY(-1px);
 }
 
 .card-box {

src/assets/styles/variables.module.scss

@@ -27,9 +27,10 @@
   --tags-view-active-border-color: var(--el-color-primary);
 
   // Modern rounded style + soft shadows
-  --app-radius-base: 14px;
-  --app-radius-sm: calc(var(--app-radius-base) - 8px);
-  --app-radius-md: calc(var(--app-radius-base) - 4px);
+  --app-radius-base: 8px;
+  --app-radius-sm: calc(var(--app-radius-base) * 0.6);
+  --app-radius-md: var(--app-radius-base);
+  --app-radius-lg: calc(var(--app-radius-base) * 1.4);
   --app-radius-lg: var(--app-radius-base);
   --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.08);
   --app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
@@ -53,7 +54,7 @@ html.dark {
   --menuHover: #171819;
 
   --subMenuBg: #1d1e1f;
-  --subMenuActiveText: #1d1e1f;
+  --subMenuActiveText: #f4f4f5;
   --subMenuHover: #171819;
   --subMenuTitleHover: #171819;
 

src/layout/components/Navbar.vue

@@ -38,7 +38,7 @@
             <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
               <template #reference>
                 <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">
-                  <div class="right-menu-item hover-effect" style="display: block"><svg-icon icon-class="message" /></div>
+                  <div class="right-menu-item hover-effect"><svg-icon icon-class="message" /></div>
                 </el-badge>
               </template>
               <template #default>
@@ -289,9 +289,7 @@ watch(
   }
 
   .right-menu {
-    //float: right;
     height: 100%;
-    line-height: 50px;
     display: flex;
     align-items: center;
     margin-left: auto;
@@ -300,20 +298,29 @@ watch(
       outline: none;
     }
 
+    // 消息等有包裹层的图标，确保中间层不破坏对齐
+    & > * {
+      display: flex;
+      align-items: center;
+    }
+
     .right-menu-item {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       padding: 0 8px;
-      height: 100%;
+      height: 32px;
       font-size: 18px;
       color: var(--el-text-color-regular);
-      vertical-align: text-bottom;
+      border-radius: var(--app-radius-md);
 
       &.hover-effect {
         cursor: pointer;
-        transition: background 0.3s;
+        transition: background 0.2s ease, color 0.2s ease;
 
         &:hover {
-          background: var(--el-fill-color-lighter);
+          background: var(--el-fill-color-light);
+          color: var(--el-color-primary);
         }
       }
     }
@@ -322,7 +329,7 @@ watch(
       margin-right: 40px;
 
       .avatar-wrapper {
-        margin-top: 5px;
+        margin-top: 0;
         position: relative;
 
         .user-avatar {
@@ -330,7 +337,8 @@ watch(
           width: 40px;
           height: 40px;
           border-radius: var(--app-radius-md);
-          margin-top: 10px;
+          margin-top: 0;
+          display: block;
         }
 
         i {

src/layout/components/Settings/index.vue

@@ -199,7 +199,13 @@ const themeChange = (val: string) => {
 };
 const radiusBaseChange = (val: number) => {
   settingsStore.radiusBase = val;
-  document.documentElement.style.setProperty('--app-radius-base', `${val}px`);
+  const el = document.documentElement;
+  el.style.setProperty('--app-radius-base', `${val}px`);
+  el.style.setProperty('--app-radius-sm', `${Math.round(val * 0.6)}px`);
+  el.style.setProperty('--app-radius-md', `${val}px`);
+  el.style.setProperty('--app-radius-lg', `${Math.round(val * 1.4)}px`);
+  el.style.setProperty('--el-border-radius-base', `${val}px`);
+  el.style.setProperty('--el-border-radius-small', `${Math.round(val * 0.6)}px`);
 };
 const handleTheme = (val: string) => {
   sideTheme.value = val;

src/layout/components/TagsView/index.vue

@@ -243,9 +243,9 @@ onMounted(() => {
   height: 34px;
   width: 100%;
   background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: var(--app-radius-md);
-  box-shadow: var(--app-shadow-sm);
+  border-top: none;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  box-shadow: none;
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -275,12 +275,12 @@ onMounted(() => {
         margin-right: 15px;
       }
       &.active {
-        background-color: #42b983;
+        background-color: var(--tags-view-active-bg);
         color: #fff;
-        border-color: #42b983;
+        border-color: var(--tags-view-active-border-color);
         &::before {
           content: '';
-          background: #fff;
+          background: rgba(255, 255, 255, 0.7);
           display: inline-block;
           width: 8px;
           height: 8px;

src/layout/index.vue

@@ -127,6 +127,7 @@ const setLayout = () => {
   width: calc(100% - #{$base-sidebar-width});
   transition: width 0.28s;
   background: $fixed-header-bg;
+  box-shadow: 0 2px 8px rgba(0, 21, 41, 0.10);
 }
 
 .hideSidebar .fixed-header {

src/settings.ts

@@ -76,6 +76,6 @@ const setting: DefaultSettings = {
   /**
    * 页面圆角大小
    */
-  radiusBase: 10
+  radiusBase: 8
 };
 export default setting;