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

feat: update layout dir component

Browse Source
This commit is contained in:
pengYYYYY 2021-11-18 14:20:05 +08:00
parent 001abf0fd0
commit a6312e4d89
5 changed files with 160 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/color/index.vue
View File

@ -29,8 +29,9 @@ export default defineComponent({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.color-container { .color-container {
width: 24px; width: 32px;
height: 24px; height: 32px;
border-radius: 50%;
display: inline-block; display: inline-block;
} }
</style> </style>

5
src/components/thumbnail/index.vue
View File

@ -35,6 +35,7 @@ export default defineComponent({
@import url('@/style/index.less'); @import url('@/style/index.less');
.thumbnail { .thumbnail {
&-container { &-container {
display: inline-block; display: inline-block;
} }
@ -44,8 +45,8 @@ export default defineComponent({
} }
&-layout { &-layout {
width: 120px; width: 88px;
height: 70px; height: 48px;
} }
} }
</style> </style>

237
src/config/color.ts
View File

@ -1,106 +1,165 @@
type ColorToken = Record<string, string>; type ColorToken = Record<string, string>;
type ColorSeries = Record<string, ColorToken>;
const BLUE_GREY_TOKEN: ColorToken = { const BACKGROUND_TOKEN: ColorSeries = {
'@gray-color-1': '#F1F2F5', BLUE_GREY: {
'@gray-color-2': '#EBEDF1', '@gray-color-1': '#F1F2F5',
'@gray-color-3': '#E3E6EB', '@gray-color-2': '#EBEDF1',
'@gray-color-4': '#D6DBE3', '@gray-color-3': '#E3E6EB',
'@gray-color-5': '#BCC4D0', '@gray-color-4': '#D6DBE3',
'@gray-color-6': '#97A3B7', '@gray-color-5': '#BCC4D0',
'@gray-color-7': '#7787A2', '@gray-color-6': '#97A3B7',
'@gray-color-8': '#5F7292', '@gray-color-7': '#7787A2',
'@gray-color-9': '#4B5B76', '@gray-color-8': '#5F7292',
'@gray-color-10': '#3C485C', '@gray-color-9': '#4B5B76',
'@gray-color-11': '#2C3645', '@gray-color-10': '#3C485C',
'@gray-color-12': '#232A35', '@gray-color-11': '#2C3645',
'@gray-color-13': '#1C222B', '@gray-color-12': '#232A35',
'@gray-color-14': '#13161B', '@gray-color-13': '#1C222B',
'@gray-color-14': '#13161B',
},
NEUTRAL_GREY: {
'@gray-color-1': '#F3F3F3',
'@gray-color-2': '#EEEEEE',
'@gray-color-3': '#E7E7E7',
'@gray-color-4': '#DCDCDC',
'@gray-color-5': '#C5C5C5',
'@gray-color-6': '#A6A6A6',
'@gray-color-7': '#8B8B8B',
'@gray-color-8': '#777777',
'@gray-color-9': '#5E5E5E',
'@gray-color-10': '#4B4B4B',
'@gray-color-11': '#383838',
'@gray-color-12': '#2C2C2C',
'@gray-color-13': '#242424',
'@gray-color-14': '#181818',
},
}; };
const NEUTRAL_GREY_TOKEN: ColorToken = { const COLOR_TOKEN: ColorSeries = {
'@gray-color-1': '#F3F3F3', DEFAULT: {
'@gray-color-2': '#EEEEEE', '@brand-color': '#0052D9',
'@gray-color-3': '#E7E7E7', '@brand-color-1': '#ECF2FE',
'@gray-color-4': '#DCDCDC', '@brand-color-2': '#D4E3FC',
'@gray-color-5': '#C5C5C5', '@brand-color-3': '#BBD3FB',
'@gray-color-6': '#A6A6A6', '@brand-color-4': '#96BBF8',
'@gray-color-7': '#8B8B8B', '@brand-color-5': '#699EF5',
'@gray-color-8': '#777777', '@brand-color-6': '#4787F0',
'@gray-color-9': '#5E5E5E', '@brand-color-7': '#266FE8',
'@gray-color-10': '#4B4B4B', '@brand-color-8': '#0052D9',
'@gray-color-11': '#383838', '@brand-color-9': '#0034B5',
'@gray-color-12': '#2C2C2C', '@brand-color-10': '#001F97',
'@gray-color-13': '#242424', },
'@gray-color-14': '#181818', CYAN: {
}; '@brand-color': '#0594FA',
const DEFAULT_TOKEN: ColorToken = { '@brand-color-1': '#ECF2FE',
'@brand-color': '#0052D9', '@brand-color-2': '#D4E3FC',
'@brand-color-1': '#ECF2FE', '@brand-color-3': '#BBD3FB',
'@brand-color-2': '#D4E3FC', '@brand-color-4': '#96BBF8',
'@brand-color-3': '#BBD3FB', '@brand-color-5': '#699EF5',
'@brand-color-4': '#96BBF8', '@brand-color-6': '#4787F0',
'@brand-color-5': '#699EF5', '@brand-color-7': '#266FE8',
'@brand-color-6': '#4787F0', '@brand-color-8': '#0052D9',
'@brand-color-7': '#266FE8', '@brand-color-9': '#0034B5',
'@brand-color-8': '#0052D9', '@brand-color-10': '#001F97',
'@brand-color-9': '#0034B5', },
'@brand-color-10': '#001F97', GREEN: {
'@brand-color': '#00A870',
'@brand-color-1': '#ECF2FE',
'@brand-color-2': '#D4E3FC',
'@brand-color-3': '#BBD3FB',
'@brand-color-4': '#96BBF8',
'@brand-color-5': '#699EF5',
'@brand-color-6': '#4787F0',
'@brand-color-7': '#266FE8',
'@brand-color-8': '#0052D9',
'@brand-color-9': '#0034B5',
'@brand-color-10': '#001F97',
},
ORANGE: {
'@brand-color': '#ED7B2F',
'@brand-color-1': '#ECF2FE',
'@brand-color-2': '#D4E3FC',
'@brand-color-3': '#BBD3FB',
'@brand-color-4': '#96BBF8',
'@brand-color-5': '#699EF5',
'@brand-color-6': '#4787F0',
'@brand-color-7': '#266FE8',
'@brand-color-8': '#0052D9',
'@brand-color-9': '#0034B5',
'@brand-color-10': '#001F97',
},
RED: {
'@brand-color': '#E34D59',
'@brand-color-1': '#ECF2FE',
'@brand-color-2': '#D4E3FC',
'@brand-color-3': '#BBD3FB',
'@brand-color-4': '#96BBF8',
'@brand-color-5': '#699EF5',
'@brand-color-6': '#4787F0',
'@brand-color-7': '#266FE8',
'@brand-color-8': '#0052D9',
'@brand-color-9': '#0034B5',
'@brand-color-10': '#001F97',
},
PINK: {
'@brand-color': '#ED49B4',
'@brand-color-1': '#ECF2FE',
'@brand-color-2': '#D4E3FC',
'@brand-color-3': '#BBD3FB',
'@brand-color-4': '#96BBF8',
'@brand-color-5': '#699EF5',
'@brand-color-6': '#4787F0',
'@brand-color-7': '#266FE8',
'@brand-color-8': '#0052D9',
'@brand-color-9': '#0034B5',
'@brand-color-10': '#001F97',
},
PURPLE: {
'@brand-color': '#834ec2',
'@brand-color-1': '#f3e0ff',
'@brand-color-2': '#e6c4ff',
'@brand-color-3': '#d8abff',
'@brand-color-4': '#c68cff',
'@brand-color-5': '#ae78f0',
'@brand-color-6': '#9963d8',
'@brand-color-7': '#834ec2',
'@brand-color-8': '#6d3bac',
'@brand-color-9': '#572796',
'@brand-color-10': '#421381',
},
YELLOW: {
'@brand-color': '#ebb105',
'@brand-color-1': '#fff8b8',
'@brand-color-2': '#ffe478',
'@brand-color-3': '#fbca25',
'@brand-color-4': '#ebb105',
'@brand-color-5': '#d29c00',
'@brand-color-6': '#ba8700',
'@brand-color-7': '#a37200',
'@brand-color-8': '#8c5f00',
'@brand-color-9': '#754c00',
'@brand-color-10': '#5e3a00',
},
}; };
const PURPLE_TOKEN: ColorToken = { function toUnderline(name: string): string {
'@brand-color': '#834ec2', return name.replace(/([A-Z])/g, '_$1').toUpperCase();
'@brand-color-1': '#f3e0ff', }
'@brand-color-2': '#e6c4ff',
'@brand-color-3': '#d8abff',
'@brand-color-4': '#c68cff',
'@brand-color-5': '#ae78f0',
'@brand-color-6': '#9963d8',
'@brand-color-7': '#834ec2',
'@brand-color-8': '#6d3bac',
'@brand-color-9': '#572796',
'@brand-color-10': '#421381',
};
const YELLOW_TOKEN: ColorToken = {
'@brand-color': '#ebb105',
'@brand-color-1': '#fff8b8',
'@brand-color-2': '#ffe478',
'@brand-color-3': '#fbca25',
'@brand-color-4': '#ebb105',
'@brand-color-5': '#d29c00',
'@brand-color-6': '#ba8700',
'@brand-color-7': '#a37200',
'@brand-color-8': '#8c5f00',
'@brand-color-9': '#754c00',
'@brand-color-10': '#5e3a00',
};
export function getGreyColor(type: string): ColorToken { export function getGreyColor(type: string): ColorToken {
if (type === 'blueGrey') { const name = toUnderline(type);
return BLUE_GREY_TOKEN; return BACKGROUND_TOKEN[name] || {};
}
if (type === 'neutralGrey') {
return NEUTRAL_GREY_TOKEN;
}
return {};
} }
export function getBrandColor(type: string): ColorToken { export function getBrandColor(type: string): ColorToken {
if (type === 'yellow') { const name = toUnderline(type);
return YELLOW_TOKEN; return COLOR_TOKEN[name] || COLOR_TOKEN.DEFAULT;
}
if (type === 'purple') {
return PURPLE_TOKEN;
}
return DEFAULT_TOKEN;
} }
export function getColorList(colorArray: ColorToken[]): string[] { export function getColorList(colorArray: [ColorToken]): string[] {
const pureColorList = []; const pureColorList = [];
colorArray.map(colorToken => Object.keys(colorToken).map(key => pureColorList.push(colorToken[key]))); colorArray.map((colorToken) => Object.keys(colorToken).map((key) => pureColorList.push(colorToken[key])));
return pureColorList; return pureColorList;
} }

12
src/config/routes.ts
View File

@ -3,7 +3,7 @@ export default [
path: '/dashboard', path: '/dashboard',
icon: 'dashboard', icon: 'dashboard',
title: '仪表盘', title: '仪表盘',
component: '../Layouts/td-layout.tsx', component: '../Layouts/index.tsx',
redirect: '/dashboard/base', redirect: '/dashboard/base',
children: [ children: [
{ {
@ -22,7 +22,7 @@ export default [
path: '/list', path: '/list',
icon: 'view-module', icon: 'view-module',
title: '列表页', title: '列表页',
component: '../Layouts/td-layout.tsx', component: '../Layouts/index.tsx',
redirect: '/list/base', redirect: '/list/base',
children: [ children: [
{ {
@ -51,7 +51,7 @@ export default [
path: '/form', path: '/form',
icon: 'queue', icon: 'queue',
title: '表单页', title: '表单页',
component: '../Layouts/td-layout.tsx', component: '../Layouts/index.tsx',
redirect: '/form/base', redirect: '/form/base',
children: [ children: [
{ {
@ -70,7 +70,7 @@ export default [
path: '/detail', path: '/detail',
icon: 'layers', icon: 'layers',
title: '详情页', title: '详情页',
component: '../Layouts/td-layout.tsx', component: '../Layouts/index.tsx',
redirect: '/detail/base', redirect: '/detail/base',
children: [ children: [
{ {
@ -101,7 +101,7 @@ export default [
path: '/result', path: '/result',
icon: 'check-circle', icon: 'check-circle',
title: '结果页', title: '结果页',
component: '../Layouts/td-layout.tsx', component: '../Layouts/index.tsx',
redirect: '/result/success', redirect: '/result/success',
children: [ children: [
{ {
@ -145,7 +145,7 @@ export default [
path: '/user', path: '/user',
icon: 'user-circle', icon: 'user-circle',
title: '个人页', title: '个人页',
component: '../Layouts/td-layout.tsx', component: '../Layouts/index.tsx',
redirect: '/user/index', redirect: '/user/index',
children: [ children: [
{ {

4
src/pages/login/components/Register.vue
View File

@ -207,7 +207,3 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style lang="less" scoped>
@import url('../index.less');
</style>