image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 02:26:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: layout theme (#11)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/assets-slide-dashboard.svg
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="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" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

2
src/assets/assets-slide-detail.svg
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="M5 8.75H12.5V10H5V8.75Z" fill="currentcolor"/>
<path d="M10 11.875H5V13.125H10V11.875Z" fill="currentcolor"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 564 B

After

Width:  |  Height:  |  Size: 566 B

2
src/assets/assets-slide-form.svg
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 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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 949 B

After

Width:  |  Height:  |  Size: 951 B

2
src/assets/assets-slide-list.svg
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 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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 810 B

After

Width:  |  Height:  |  Size: 812 B

2
src/assets/assets-slide-logout.svg
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"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 676 B

After

Width:  |  Height:  |  Size: 678 B

2
src/components/card/index.vue
View File

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

1
src/layouts/components/Header.vue
View File

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

34
src/layouts/index.tsx
View File

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

15
src/pages/dashboard/base/index.vue
View File

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

36
src/style/layout.less
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} {
// 布局元素调整
@ -112,7 +129,7 @@
padding: 0 24px;
height: 32px;
width: 100%;
color: @text-color-anti;
color: @text-color-primary;
}
&-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 {
cursor: pointer;
@ -152,14 +160,8 @@
margin-left: 24px;
}
.version-container {
color: @text-color-anti;
color: @text-color-primary;
opacity: 0.4;
}
.t-default-menu__inner .t-menu-group-title {
color: @text-color-anti;
opacity: 0.3;
};