diff --git a/src/config/style.ts b/src/config/style.ts
index b652f5a..cdf7d93 100644
--- a/src/config/style.ts
+++ b/src/config/style.ts
@@ -5,6 +5,7 @@ export default {
mode: 'light',
layout: 'side',
splitMenu: false,
+ sideMode: 'light',
isFooterAside: false,
isSidebarFixed: true,
isHeaderFixed: true,
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index 4ee196f..37be801 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -238,7 +238,6 @@ const navToHelper = () => {
display: flex;
align-items: normal;
line-height: 0;
- padding-left: var(--td-comp-margin-xl);
}
.header-logo-container {
diff --git a/src/layouts/components/LayoutSideNav.vue b/src/layouts/components/LayoutSideNav.vue
index 112db44..9dc50a2 100644
--- a/src/layouts/components/LayoutSideNav.vue
+++ b/src/layouts/components/LayoutSideNav.vue
@@ -5,7 +5,7 @@
:layout="settingStore.layout"
:is-fixed="settingStore.isSidebarFixed"
:menu="sideMenu"
- :theme="settingStore.displayMode"
+ :theme="settingStore.displaySideMode"
:is-compact="settingStore.isSidebarCompact"
/>
diff --git a/src/layouts/components/SideNav.vue b/src/layouts/components/SideNav.vue
index a8b627f..3025037 100644
--- a/src/layouts/components/SideNav.vue
+++ b/src/layouts/components/SideNav.vue
@@ -3,12 +3,12 @@
-
+
- {{ !collapsed ? 'TDesign Starter' : '' }} {{ pgk.version }}
+ {{ !collapsed ? 'TDesign Starter' : '' }} {{ pgk.version }}
@@ -75,6 +75,10 @@ const defaultExpanded = computed(() => {
return union(expanded, parentPath === '' ? [] : [parentPath]);
});
+const sideMode = computed(() => {
+ const { theme } = props;
+ return theme === 'dark';
+});
const sideNavCls = computed(() => {
const { isCompact } = props;
return [
@@ -84,7 +88,22 @@ const sideNavCls = computed(() => {
},
];
});
-
+const logoCls = computed(() => {
+ return [
+ `${prefix}-side-nav-logo-${collapsed.value ? 't' : 'tdesign'}-logo`,
+ {
+ [`${prefix}-side-nav-dark`]: sideMode.value,
+ },
+ ];
+});
+const versionCls = computed(() => {
+ return [
+ `version-container`,
+ {
+ [`${prefix}-side-nav-dark`]: sideMode.value,
+ },
+ ];
+});
const menuCls = computed(() => {
const { showLogo, isFixed, layout } = props;
return [
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index 0d32f4a..058f4d7 100644
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@@ -52,7 +52,6 @@
-
{{ $t('layout.setting.navigationLayout') }}
@@ -62,15 +61,24 @@
-
+
-
-
+
{{ $t('layout.setting.element.title') }}
+
+
+
+
+
+
{
width: 100%;
justify-content: space-between;
align-items: center;
+
+ &.side-mode-radio {
+ justify-content: end;
+ }
}
.t-radio-group.t-size-m .t-radio-button {
diff --git a/src/locales/lang/en_US/layout.ts b/src/locales/lang/en_US/layout.ts
index 5768171..d833732 100644
--- a/src/locales/lang/en_US/layout.ts
+++ b/src/locales/lang/en_US/layout.ts
@@ -33,6 +33,7 @@ export default {
},
},
navigationLayout: 'Navigation Layout',
+ sideMode: 'Side Menu Mode',
splitMenu: 'Split Menu(Only Mix mode)',
fixedSidebar: 'Fixed Sidebar',
element: {
diff --git a/src/locales/lang/zh_CN/layout.ts b/src/locales/lang/zh_CN/layout.ts
index b648b25..26f0e27 100644
--- a/src/locales/lang/zh_CN/layout.ts
+++ b/src/locales/lang/zh_CN/layout.ts
@@ -33,6 +33,7 @@ export default {
},
},
navigationLayout: '导航布局',
+ sideMode: '侧边栏模式',
splitMenu: '分割菜单(混合模式下有效)',
fixedSidebar: '固定侧边栏',
element: {
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 346d4cb..aa781e8 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -33,18 +33,16 @@ export const useSettingStore = defineStore('setting', {
}
return state.mode as 'dark' | 'light';
},
+ displaySideMode: (state): 'dark' | 'light' => {
+ return state.sideMode as 'dark' | 'light';
+ },
},
actions: {
async changeMode(mode: 'dark' | 'light' | 'auto') {
let theme = mode;
if (mode === 'auto') {
- const media = window.matchMedia('(prefers-color-scheme:dark)');
- if (media.matches) {
- theme = 'dark';
- } else {
- theme = 'light';
- }
+ theme = this.getMediaColor();
}
const isDarkMode = theme === 'dark';
@@ -52,6 +50,19 @@ export const useSettingStore = defineStore('setting', {
this.chartColors = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS;
},
+ async changeSideMode(mode: 'dark' | 'light') {
+ const isDarkMode = mode === 'dark';
+
+ document.documentElement.setAttribute('side-mode', isDarkMode ? 'dark' : '');
+ },
+ getMediaColor() {
+ const media = window.matchMedia('(prefers-color-scheme:dark)');
+
+ if (media.matches) {
+ return 'dark';
+ }
+ return 'light';
+ },
changeBrandTheme(brandTheme: string) {
const mode = this.displayMode;
// 以主题色加显示模式作为键
@@ -79,6 +90,9 @@ export const useSettingStore = defineStore('setting', {
if (key === 'mode') {
this.changeMode(payload[key]);
}
+ if (key === 'sideMode') {
+ this.changeSideMode(payload[key]);
+ }
if (key === 'brandTheme') {
this.changeBrandTheme(payload[key]);
}
diff --git a/src/style/layout.less b/src/style/layout.less
index 3e8f9bd..ae52216 100644
--- a/src/style/layout.less
+++ b/src/style/layout.less
@@ -163,7 +163,7 @@
}
&-logo-tdesign-logo {
- padding: 0 var(--td-comp-paddingLR-xl);
+ margin-right: var(--td-comp-margin-xxxl);
height: var(--td-comp-size-s);
width: 100%;
color: var(--td-text-color-primary);
@@ -176,6 +176,10 @@
}
}
+ &-side-nav-dark {
+ color: var(--td-font-white-1) !important;
+ }
+
&-side-nav-placeholder {
flex: 1 1 232px;
min-width: 232px;