diff --git a/src/components/ty-footer.vue b/src/components/ty-footer.vue index e3a8650..2387963 100644 --- a/src/components/ty-footer.vue +++ b/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 { diff --git a/src/components/ty-header.vue b/src/components/ty-header.vue index 96b4e88..fa1a30f 100644 --- a/src/components/ty-header.vue +++ b/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; - height: 32px; + width: 30px; + 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; - height: 32px; + width: 34px; + 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); + } } } diff --git a/src/components/ty-sidebar.vue b/src/components/ty-sidebar.vue index 9fa0012..1b2649c 100644 --- a/src/components/ty-sidebar.vue +++ b/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) { diff --git a/src/components/ty-tabs.vue b/src/components/ty-tabs.vue index 566628a..fab66b0 100644 --- a/src/components/ty-tabs.vue +++ b/src/components/ty-tabs.vue @@ -41,11 +41,20 @@ function onTabRemove(name: string | number): void { diff --git a/src/layouts/default.vue b/src/layouts/default.vue index 5be9252..49372aa 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -259,5 +259,6 @@ watch( .app-main { flex: 1; padding: 16px; + background: var(--wm-bg-color-page); } diff --git a/stats.html b/stats.html index 7eea8d6..ab9b280 100644 --- a/stats.html +++ b/stats.html @@ -4930,7 +4930,7 @@ var drawChart = (function (exports) {