feat: update layout dir component

src/components/color/index.vue

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

src/components/thumbnail/index.vue

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

src/config/color.ts

@@ -1,6 +1,8 @@
 type ColorToken = Record<string, string>;
+type ColorSeries = Record<string, ColorToken>;
 
-const BLUE_GREY_TOKEN: ColorToken = {
+const BACKGROUND_TOKEN: ColorSeries = {
+  BLUE_GREY: {
     '@gray-color-1': '#F1F2F5',
     '@gray-color-2': '#EBEDF1',
     '@gray-color-3': '#E3E6EB',
@@ -15,9 +17,8 @@ const BLUE_GREY_TOKEN: ColorToken = {
     '@gray-color-12': '#232A35',
     '@gray-color-13': '#1C222B',
     '@gray-color-14': '#13161B',
-};
+  },
-
+  NEUTRAL_GREY: {
-const NEUTRAL_GREY_TOKEN: ColorToken = {
     '@gray-color-1': '#F3F3F3',
     '@gray-color-2': '#EEEEEE',
     '@gray-color-3': '#E7E7E7',
@@ -32,8 +33,11 @@ const NEUTRAL_GREY_TOKEN: ColorToken = {
     '@gray-color-12': '#2C2C2C',
     '@gray-color-13': '#242424',
     '@gray-color-14': '#181818',
+  },
 };
-const DEFAULT_TOKEN: ColorToken = {
+
+const COLOR_TOKEN: ColorSeries = {
+  DEFAULT: {
     '@brand-color': '#0052D9',
     '@brand-color-1': '#ECF2FE',
     '@brand-color-2': '#D4E3FC',
@@ -45,9 +49,73 @@ const DEFAULT_TOKEN: ColorToken = {
     '@brand-color-8': '#0052D9',
     '@brand-color-9': '#0034B5',
     '@brand-color-10': '#001F97',
-};
+  },
-
+  CYAN: {
-const PURPLE_TOKEN: ColorToken = {
+    '@brand-color': '#0594FA',
+    '@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',
+  },
+  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',
@@ -59,9 +127,8 @@ const PURPLE_TOKEN: ColorToken = {
     '@brand-color-8': '#6d3bac',
     '@brand-color-9': '#572796',
     '@brand-color-10': '#421381',
-};
+  },
-
+  YELLOW: {
-const YELLOW_TOKEN: ColorToken = {
     '@brand-color': '#ebb105',
     '@brand-color-1': '#fff8b8',
     '@brand-color-2': '#ffe478',
@@ -73,34 +140,26 @@ const YELLOW_TOKEN: ColorToken = {
     '@brand-color-8': '#8c5f00',
     '@brand-color-9': '#754c00',
     '@brand-color-10': '#5e3a00',
+  },
 };
 
-export function getGreyColor(type: string): ColorToken {
+function toUnderline(name: string): string {
-  if (type === 'blueGrey') {
+  return name.replace(/([A-Z])/g, '_$1').toUpperCase();
-    return BLUE_GREY_TOKEN;
-  }
-  if (type === 'neutralGrey') {
-    return NEUTRAL_GREY_TOKEN;
 }
 
-  return {};
+export function getGreyColor(type: string): ColorToken {
+  const name = toUnderline(type);
+  return BACKGROUND_TOKEN[name] || {};
 }
 
 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') {
+export function getColorList(colorArray: [ColorToken]): string[] {
-    return PURPLE_TOKEN;
-  }
-
-  return DEFAULT_TOKEN;
-}
-
-export function getColorList(colorArray: ColorToken[]): string[] {
   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;
 }

src/config/routes.ts

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

src/pages/login/components/Register.vue

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