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) {