feat: layout theme (#11)

This commit is contained in:
PY 2021-12-20 12:32:33 +08:00 committed by GitHub
parent 495e7f1fc6
commit 3d686917df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 44 additions and 54 deletions

View File

@ -1,4 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" <path fill-rule="evenodd" clip-rule="evenodd"
d="M2.5 3.75C2.5 3.05965 3.05962 2.5 3.75 2.5H8.125C8.81538 2.5 9.375 3.05965 9.375 3.75V10C9.375 10.6903 8.81538 11.25 8.125 11.25H3.75C3.05962 11.25 2.5 10.6903 2.5 10V3.75ZM3.75 3.75H8.125V10H3.75V3.75Z" d="M2.5 3.75C2.5 3.05965 3.05962 2.5 3.75 2.5H8.125C8.81538 2.5 9.375 3.05965 9.375 3.75V10C9.375 10.6903 8.81538 11.25 8.125 11.25H3.75C3.05962 11.25 2.5 10.6903 2.5 10V3.75ZM3.75 3.75H8.125V10H3.75V3.75Z"
fill="currentcolor" /> fill="currentcolor" />

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -1,4 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 5.625H5V6.875H12.5V5.625Z" fill="currentcolor"/> <path d="M12.5 5.625H5V6.875H12.5V5.625Z" fill="currentcolor"/>
<path d="M5 8.75H12.5V10H5V8.75Z" fill="currentcolor"/> <path d="M5 8.75H12.5V10H5V8.75Z" fill="currentcolor"/>
<path d="M10 11.875H5V13.125H10V11.875Z" fill="currentcolor"/> <path d="M10 11.875H5V13.125H10V11.875Z" fill="currentcolor"/>

Before

Width:  |  Height:  |  Size: 564 B

After

Width:  |  Height:  |  Size: 566 B

View File

@ -1,4 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1485 2.60504L7.96107 8.79252C7.88191 8.87167 7.82547 8.97063 7.79764 9.07905L6.98445 12.2468C6.92951 12.4608 6.99164 12.6879 7.14788 12.8442C7.30411 13.0004 7.53121 13.0625 7.74522 13.0076L10.913 12.1944C11.0214 12.1666 11.1204 12.1101 11.1995 12.031L17.387 5.8435C18.2813 4.94923 18.2813 3.49931 17.387 2.60504C16.4927 1.71076 15.0428 1.71076 14.1485 2.60504ZM8.45793 11.5341L8.96586 9.55549L15.0324 3.48892C15.4386 3.08279 16.097 3.0828 16.5031 3.48892C16.9093 3.89504 16.9093 4.5535 16.5031 4.95962L10.4366 11.0262L8.45793 11.5341Z" fill="currentcolor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.1485 2.60504L7.96107 8.79252C7.88191 8.87167 7.82547 8.97063 7.79764 9.07905L6.98445 12.2468C6.92951 12.4608 6.99164 12.6879 7.14788 12.8442C7.30411 13.0004 7.53121 13.0625 7.74522 13.0076L10.913 12.1944C11.0214 12.1666 11.1204 12.1101 11.1995 12.031L17.387 5.8435C18.2813 4.94923 18.2813 3.49931 17.387 2.60504C16.4927 1.71076 15.0428 1.71076 14.1485 2.60504ZM8.45793 11.5341L8.96586 9.55549L15.0324 3.48892C15.4386 3.08279 16.097 3.0828 16.5031 3.48892C16.9093 3.89504 16.9093 4.5535 16.5031 4.95962L10.4366 11.0262L8.45793 11.5341Z" fill="currentcolor"/>
<path d="M3.75 4.37493H10V3.12493H3.75C3.05964 3.12493 2.5 3.68457 2.5 4.37493V15.6249C2.5 16.3153 3.05964 16.8749 3.75 16.8749H16.25C16.9404 16.8749 17.5 16.3153 17.5 15.6249V9.37493H16.25V15.6249H3.75V4.37493Z" fill="currentcolor"/> <path d="M3.75 4.37493H10V3.12493H3.75C3.05964 3.12493 2.5 3.68457 2.5 4.37493V15.6249C2.5 16.3153 3.05964 16.8749 3.75 16.8749H16.25C16.9404 16.8749 17.5 16.3153 17.5 15.6249V9.37493H16.25V15.6249H3.75V4.37493Z" fill="currentcolor"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 949 B

After

Width:  |  Height:  |  Size: 951 B

View File

@ -1,4 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 5.3125H10V6.5625H5V5.3125Z" fill="currentcolor"/> <path d="M5 5.3125H10V6.5625H5V5.3125Z" fill="currentcolor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 3.75C2.5 3.05965 3.05962 2.5 3.75 2.5H16.25C16.9404 2.5 17.5 3.05965 17.5 3.75V8.125C17.5 8.81535 16.9404 9.375 16.25 9.375H3.75C3.05962 9.375 2.5 8.81535 2.5 8.125V3.75ZM3.75 3.75H16.25V8.125H3.75V3.75Z" fill="currentcolor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 3.75C2.5 3.05965 3.05962 2.5 3.75 2.5H16.25C16.9404 2.5 17.5 3.05965 17.5 3.75V8.125C17.5 8.81535 16.9404 9.375 16.25 9.375H3.75C3.05962 9.375 2.5 8.81535 2.5 8.125V3.75ZM3.75 3.75H16.25V8.125H3.75V3.75Z" fill="currentcolor"/>
<path d="M10 13.4375H5V14.6875H10V13.4375Z" fill="currentcolor"/> <path d="M10 13.4375H5V14.6875H10V13.4375Z" fill="currentcolor"/>

Before

Width:  |  Height:  |  Size: 810 B

After

Width:  |  Height:  |  Size: 812 B

View File

@ -1,3 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10C1.25 5.16751 5.16751 1.25 10 1.25C14.8325 1.25 18.75 5.16751 18.75 10ZM12.5489 9.37547L10.0934 6.91989L10.9772 6.03601L14.4998 9.55853C14.7438 9.80261 14.7438 10.1983 14.4998 10.4424L10.9804 13.9618L10.0965 13.0779L12.5489 10.6255L5.45213 10.6255L5.45214 9.37545L12.5489 9.37547Z" fill="currentcolor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10C1.25 5.16751 5.16751 1.25 10 1.25C14.8325 1.25 18.75 5.16751 18.75 10ZM12.5489 9.37547L10.0934 6.91989L10.9772 6.03601L14.4998 9.55853C14.7438 9.80261 14.7438 10.1983 14.4998 10.4424L10.9804 13.9618L10.0965 13.0779L12.5489 10.6255L5.45213 10.6255L5.45214 9.37545L12.5489 9.37547Z" fill="currentcolor"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 676 B

After

Width:  |  Height:  |  Size: 678 B

View File

@ -82,7 +82,7 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style lang="less" scoped> <style lang="less">
@import '@/style/variables'; @import '@/style/variables';
.card { .card {

View File

@ -272,6 +272,7 @@ export default defineComponent({
width: 166px; width: 166px;
display: flex; display: flex;
margin-left: 24px; margin-left: 24px;
color: @text-color-primary;
.t-logo { .t-logo {
width: 100%; width: 100%;

View File

@ -8,7 +8,7 @@ import TdesignContent from './components/Content.vue';
import { PREFIX } from '@/config/global'; import { PREFIX } from '@/config/global';
import TdesignSetting from './setting.vue'; import TdesignSetting from './setting.vue';
import { ModeType, SettingType, ClassName } from '@/interface'; import { SettingType, ClassName } from '@/interface';
import '@/style/layout.less'; import '@/style/layout.less';
const name = `${PREFIX}-base-layout`; const name = `${PREFIX}-base-layout`;
@ -59,34 +59,19 @@ export default defineComponent({
}, },
sideMenu() { sideMenu() {
const { layout, splitMenu } = this.$store.state.setting; const { layout, splitMenu } = this.$store.state.setting;
const { menuRouters } = this; let { menuRouters } = this;
if (layout === 'mix' && splitMenu) { if (layout === 'mix' && splitMenu) {
let index; menuRouters.forEach((menu) => {
for (index = 0; index < menuRouters.length; index++) { if (this.$route.path.indexOf(menu.path) === 0) {
const item = menuRouters[index]; menuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
if (item.children && item.children.length > 0) {
return item.children.map((menuRouter) => ({ ...menuRouter, path: `${item.path}/${menuRouter.path}` }));
}
} }
});
} }
return menuRouters; return menuRouters;
}, },
}, },
methods: { methods: {
getNavTheme(mode: ModeType, layout: string, type: string): string {
if (mode === 'dark') {
return 'dark';
}
if (type.includes(layout)) {
return 'dark';
}
return this.mode;
},
renderSidebar() { renderSidebar() {
// const theme =
// this.setting.mode === 'dark' ? 'dark' : this.setting.layout === 'mix' ? 'light' : this.setting.theme;
// menu 组件最多支持 3级菜单
const theme = this.getNavTheme(this.setting.mode, this.setting.layout, ['side']);
return ( return (
this.showSidebar && ( this.showSidebar && (
<tdesign-side-nav <tdesign-side-nav
@ -94,19 +79,18 @@ export default defineComponent({
layout={this.setting.layout} layout={this.setting.layout}
isFixed={this.setting.isSidebarFixed} isFixed={this.setting.isSidebarFixed}
menu={this.sideMenu} menu={this.sideMenu}
theme={theme} theme={this.mode}
isCompact={this.setting.isSidebarCompact} isCompact={this.setting.isSidebarCompact}
/> />
) )
); );
}, },
renderHeader() { renderHeader() {
const theme = this.getNavTheme(this.setting.mode, this.setting.layout, ['mix', 'top']);
return ( return (
this.showHeader && ( this.showHeader && (
<tdesign-header <tdesign-header
showLogo={this.showHeaderLogo} showLogo={this.showHeaderLogo}
theme={theme} theme={this.mode}
layout={this.setting.layout} layout={this.setting.layout}
isFixed={this.setting.isHeaderFixed} isFixed={this.setting.isHeaderFixed}
menu={this.headerMenu} menu={this.headerMenu}
@ -119,7 +103,7 @@ export default defineComponent({
const { showBreadcrumb } = this.setting; const { showBreadcrumb } = this.setting;
const { showFooter } = this; const { showFooter } = this;
return ( return (
<t-layout class={[`${PREFIX}-layout`, 'narrow-scrollbar']}> <t-layout class={[`${PREFIX}-layout`]}>
<t-content class={`${PREFIX}-content-layout`}> <t-content class={`${PREFIX}-content-layout`}>
{showBreadcrumb && <tdesign-breadcrumb />} {showBreadcrumb && <tdesign-breadcrumb />}
<TdesignContent /> <TdesignContent />

View File

@ -365,24 +365,27 @@ export default defineComponent({
@import '@/style/variables.less'; @import '@/style/variables.less';
.card-container.main-color { .card-container.main-color {
background: @brand-color !important; background: @brand-color;
color: @text-color-primary !important; color: @text-color-primary;
.card-subtitle {
color: @text-color-anti;
}
.card-describe { .card-describe {
color: @text-color-anti !important; color: @text-color-anti;
} }
.dashboard-item-top span { .dashboard-item-top span {
color: @text-color-anti !important; color: @text-color-anti;
} }
.dashboard-item-block { .dashboard-item-block {
color: @text-color-anti !important; color: @text-color-anti;
opacity: 0.6; opacity: 0.6;
} }
.dashboard-item-bottom { .dashboard-item-bottom {
color: @text-color-anti !important; color: @text-color-anti;
} }
} }
</style> </style>

View File

@ -20,6 +20,23 @@
} }
} }
.t-menu--dark .t-menu__operations .t-icon {
color: rgba(255, 255, 255, .55);
&:hover {
cursor: pointer;
}
}
.t-default-menu.t-menu--dark {
background: var(--td-gray-color-13);
}
.t-default-menu:not(.t-menu--dark) .t-menu__item.t-is-active:not(.t-is-opened) {
background-color: @brand-color-1;
color: @brand-color;
.t-icon {
color: @brand-color;
}
}
.@{prefix} { .@{prefix} {
// 布局元素调整 // 布局元素调整
@ -112,7 +129,7 @@
padding: 0 24px; padding: 0 24px;
height: 32px; height: 32px;
width: 100%; width: 100%;
color: @text-color-anti; color: @text-color-primary;
} }
&-logo-normal { &-logo-normal {
@ -135,15 +152,6 @@
} }
} }
.t-menu--dark .t-menu__operations .t-icon {
color: rgba(255, 255, 255, .55);
&:hover {
cursor: pointer;
}
}
.t-default-menu.t-menu--dark {
background: var(--td-gray-color-13);
}
.logo-container { .logo-container {
cursor: pointer; cursor: pointer;
@ -152,14 +160,8 @@
margin-left: 24px; margin-left: 24px;
} }
.version-container { .version-container {
color: @text-color-anti; color: @text-color-primary;
opacity: 0.4; opacity: 0.4;
} }
.t-default-menu__inner .t-menu-group-title {
color: @text-color-anti;
opacity: 0.3;
};