style: polish admin layout visuals

- 顶栏改柔和阴影，Logo 区与侧栏连成一体（同宽+右边框）
- 侧栏菜单项圆角、主题色高亮、hover 过渡
- 内容区灰底衬白，footer 加顶边框，多页签激活态配色统一

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/ty-footer.vue

@@ -31,6 +31,7 @@ withDefaults(
   font-size: var(--wm-font-size-xs);
   color: var(--wm-color-text-secondary);
   background: var(--wm-bg-color-base);
+  border-top: 1px solid var(--wm-border-color-light);
 }
 
 .ty-footer.is-fixed {

src/components/ty-header.vue

@@ -155,7 +155,7 @@ function onUserCommand(command: string): void {
   height: var(--ty-header-height, 56px);
   padding: 0 12px 0 0;
   background: var(--wm-bg-color-base);
-  border-bottom: 1px solid var(--wm-border-color-light);
+  box-shadow: 0 1px 4px rgb(0 21 41 / 6%);
   z-index: 100;
 
   &.is-fixed {
@@ -175,6 +175,10 @@ function onUserCommand(command: string): void {
     gap: 8px;
     flex-shrink: 0;
     overflow: hidden;
+    height: var(--ty-header-height, 56px);
+    padding: 0 12px;
+    background: var(--wm-bg-color-base);
+    border-right: 1px solid var(--wm-border-color-light);
 
     &.is-icon {
       justify-content: center;
@@ -183,14 +187,15 @@ function onUserCommand(command: string): void {
   }
 
   &__logo-img {
-    width: 32px;
+    width: 30px;
-    height: 32px;
+    height: 30px;
     flex-shrink: 0;
   }
 
   &__title {
     font-size: var(--wm-font-size-lg);
     font-weight: var(--wm-font-weight-semibold);
+    letter-spacing: 0.5px;
     color: var(--wm-color-text-primary);
     white-space: nowrap;
   }
@@ -199,14 +204,15 @@ function onUserCommand(command: string): void {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
+    width: 34px;
-    height: 32px;
+    height: 34px;
     border: none;
     border-radius: var(--wm-border-radius-base);
     background: transparent;
     font-size: 18px;
     color: var(--wm-color-text-regular);
     cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
 
     &:hover {
       background: var(--wm-bg-color-page);
@@ -216,7 +222,19 @@ function onUserCommand(command: string): void {
 
   &__nav {
     border-bottom: none;
-    margin-left: 8px;
+    margin-left: 4px;
+
+    :deep(.el-menu-item),
+    :deep(.el-sub-menu__title) {
+      height: var(--ty-header-height, 56px);
+      line-height: var(--ty-header-height, 56px);
+      color: var(--wm-color-text-regular);
+    }
+
+    :deep(.el-menu-item.is-active) {
+      color: var(--el-color-primary);
+      border-bottom-color: var(--el-color-primary);
+    }
 
     :deep(.menu-icon) {
       margin-right: 4px;
@@ -231,18 +249,22 @@ function onUserCommand(command: string): void {
   &__right {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
     margin-left: auto;
   }
 
   &__user {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
+    gap: 6px;
     padding: 0 8px;
     font-size: 16px;
     color: var(--wm-color-text-regular);
     cursor: pointer;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
   }
 }
 </style>

src/components/ty-sidebar.vue

@@ -82,6 +82,29 @@ function onSelect(index: string): void {
 
   .el-menu {
     border-right: none;
+    --el-menu-bg-color: transparent;
+    --el-menu-text-color: var(--wm-color-text-regular);
+    --el-menu-hover-bg-color: var(--wm-bg-color-page);
+    --el-menu-active-color: var(--el-color-primary);
+
+    :deep(.el-menu-item),
+    :deep(.el-sub-menu__title) {
+      height: 44px;
+      line-height: 44px;
+      margin: 2px 8px;
+      border-radius: var(--wm-border-radius-base);
+    }
+
+    :deep(.el-menu-item.is-active) {
+      background: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+      font-weight: var(--wm-font-weight-medium);
+    }
+
+    :deep(.el-menu-item:hover),
+    :deep(.el-sub-menu__title:hover) {
+      background: var(--wm-bg-color-page);
+    }
   }
 
   :deep(.menu-icon) {

src/components/ty-tabs.vue

@@ -41,11 +41,20 @@ function onTabRemove(name: string | number): void {
 <style scoped lang="scss">
 .ty-tabs {
   --el-tabs-header-height: 36px;
+  background: var(--wm-bg-color-base);
 
   :deep(.el-tabs__header) {
     margin: 0;
-    padding: 4px 8px 0;
+    padding: 6px 8px 0;
     background: var(--wm-bg-color-base);
   }
+
+  :deep(.el-tabs__nav) {
+    border: none;
+  }
+
+  :deep(.el-tabs__item.is-active) {
+    color: var(--el-color-primary);
+  }
 }
 </style>

src/layouts/default.vue

@@ -259,5 +259,6 @@ watch(
 .app-main {
   flex: 1;
   padding: 16px;
+  background: var(--wm-bg-color-page);
 }
 </style>