From b83f188dbe83575558a02483df16fa3b6c74524c Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Fri, 25 Nov 2022 17:47:11 +0800
Subject: [PATCH] Feat/upgrade style (#365)

* feat: upgrade vars

* feat: replace vars

* feat: remove variables
---
 package.json                              |  2 +-
 src/components/result/index.vue           |  8 ++---
 src/components/thumbnail/index.vue        |  2 +-
 src/config/color.ts                       | 22 ++++++------
 src/layouts/components/Header.vue         |  5 ---
 src/layouts/components/Notice.vue         |  4 +--
 src/layouts/setting.vue                   |  2 +-
 src/pages/dashboard/base/index.ts         |  3 --
 src/pages/detail/base/index.less          | 13 ++++---
 src/pages/detail/secondary/index.less     |  8 ++---
 src/pages/list/components/CommonTable.vue |  2 +-
 src/pages/list/tree/index.vue             |  2 +-
 src/pages/login/components/Header.vue     |  2 --
 src/pages/login/index.less                |  4 +--
 src/pages/user/index.less                 | 10 +++---
 src/style/layout.less                     | 20 +++++------
 src/style/reset.less                      | 11 +++---
 src/style/theme/default.less              | 20 +++++------
 src/style/variables.less                  | 42 +----------------------
 19 files changed, 62 insertions(+), 120 deletions(-)

diff --git a/package.json b/package.json
index 38dbb9f..4c9c9c1 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "qrcode.vue": "^3.2.2",
     "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",
-    "tdesign-vue-next": "^0.24.7",
+    "tdesign-vue-next": "^0.24.9",
     "tvision-color": "^1.3.1",
     "vue": "^3.2.31",
     "vue-clipboard3": "^2.0.0",
diff --git a/src/components/result/index.vue b/src/components/result/index.vue
index 6edb222..91e1da2 100644
--- a/src/components/result/index.vue
+++ b/src/components/result/index.vue
@@ -84,18 +84,16 @@ const dynamicComponent = computed(() => {
 
   &-title {
     font-style: normal;
-    font-weight: 500;
     margin-top: 8px;
     color: var(--td-text-color-primary);
-    font-size: @font-size-xl;
-    line-height: @line-height-xl;
+    font: var(--td-font-title-large);
+    font-weight: 500;
   }
 
   &-tip {
     margin: 8px 0 32px;
-    font-size: @font-size-base;
+    font: var(--td-font-body-medium);
     color: var(--td-text-color-secondary);
-    line-height: @line-height-base;
   }
 }
 </style>
diff --git a/src/components/thumbnail/index.vue b/src/components/thumbnail/index.vue
index e1ed55c..4f902e6 100644
--- a/src/components/thumbnail/index.vue
+++ b/src/components/thumbnail/index.vue
@@ -32,7 +32,7 @@ const className = computed(() => {
   }
 
   &-circle {
-    border-radius: @border-radius-50;
+    border-radius: var(--td-radius-circle);
   }
 
   &-layout {
diff --git a/src/config/color.ts b/src/config/color.ts
index 897c832..a9e2989 100644
--- a/src/config/color.ts
+++ b/src/config/color.ts
@@ -27,17 +27,17 @@ export const defaultDarkColor = [
 
 export const COLOR_TOKEN: TColorSeries = {
   DEFAULT: {
-    '--td-brand-color': '#0052D9',
-    '--td-brand-color-1': '#e0ebff',
-    '--td-brand-color-2': '#c0d8ff',
-    '--td-brand-color-3': '#a1c4ff',
-    '--td-brand-color-4': '#81b1ff',
-    '--td-brand-color-5': '#5f9bff',
-    '--td-brand-color-6': '#3d87ff',
-    '--td-brand-color-7': '#176eff',
-    '--td-brand-color-8': '#0052D9',
-    '--td-brand-color-9': '#0048cd',
-    '--td-brand-color-10': '#0035b5',
+    '--td-brand-color': '#0052d9',
+    '--td-brand-color-1': '#f2f3ff',
+    '--td-brand-color-2': '#d9e1ff',
+    '--td-brand-color-3': '#b5c7ff',
+    '--td-brand-color-4': '#8eabff',
+    '--td-brand-color-5': '#618dff',
+    '--td-brand-color-6': '#366ef4',
+    '--td-brand-color-7': '#0052d9',
+    '--td-brand-color-8': '#003cab',
+    '--td-brand-color-9': '#002a7c',
+    '--td-brand-color-10': '#001a57',
   },
 
   CYAN: {
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index 2803570..0addb72 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -156,10 +156,6 @@ const navToHelper = () => {
 </script>
 <style lang="less" scoped>
 .@{starter-prefix}-header {
-  &-layout {
-    height: 64px;
-  }
-
   &-menu-fixed {
     position: fixed;
     top: 0;
@@ -180,7 +176,6 @@ const navToHelper = () => {
   &-logo-container {
     cursor: pointer;
     display: inline-flex;
-    height: 64px;
   }
 }
 .header-menu {
diff --git a/src/layouts/components/Notice.vue b/src/layouts/components/Notice.vue
index ea8e4f3..a2c3cf5 100644
--- a/src/layouts/components/Notice.vue
+++ b/src/layouts/components/Notice.vue
@@ -136,7 +136,7 @@ const goDetail = () => {
     overflow: hidden;
     width: 100%;
     padding: 16px 24px;
-    border-radius: @border-radius;
+    border-radius: var(--td-radius-default);
     font-size: 14px;
     color: var(--td-text-color-primary);
     line-height: 22px;
@@ -147,7 +147,7 @@ const goDetail = () => {
       background: var(--td-bg-color-container-hover);
 
       .msg-content {
-        color: var(--td-brand-color-8);
+        color: var(--td-brand-color);
       }
 
       .t-list-item__action {
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index 568c866..6591ab4 100644
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@@ -315,7 +315,7 @@ watchEffect(() => {
       display: inline-flex;
       max-height: 78px;
       padding: 8px;
-      border-radius: @border-radius;
+      border-radius: var(--td-radius-default);
       border: 2px solid #e3e6eb;
       > .t-radio-button__label {
         display: inline-flex;
diff --git a/src/pages/dashboard/base/index.ts b/src/pages/dashboard/base/index.ts
index c724502..5433a9a 100644
--- a/src/pages/dashboard/base/index.ts
+++ b/src/pages/dashboard/base/index.ts
@@ -92,17 +92,14 @@ export function constructInitDataset({
   placeholderColor,
   borderColor,
 }: { dateTime: Array<string> } & TChartColor) {
-  // const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
   const divideNum = 10;
   const timeArray = [];
   const inArray = [];
   const outArray = [];
   for (let i = 0; i < divideNum; i++) {
-    // const [timeArray, inArray, outArray] = dataset;
     if (dateTime.length > 0) {
       const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
       const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
-      // console.log('dateAbsTime..', dateAbsTime, enhandTime);
       timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
     } else {
       timeArray.push(
diff --git a/src/pages/detail/base/index.less b/src/pages/detail/base/index.less
index 2d6e94e..3c302f4 100644
--- a/src/pages/detail/base/index.less
+++ b/src/pages/detail/base/index.less
@@ -23,11 +23,10 @@
 
     h1 {
       width: 200px;
-      font-weight: normal;
-      font-size: @font-size-base;
+      font: var(--td-font-body-medium);
       color: var(--td-text-color-secondary);
+      font-weight: normal;
       text-align: left;
-      line-height: 22px;
 
       @media (max-width: @screen-sm-max) {
         width: 100px;
@@ -49,7 +48,7 @@
       display: inline-block;
       width: 8px;
       height: 8px;
-      border-radius: @border-radius-50;
+      border-radius: var(--td-radius-circle);
       background: var(--td-success-color-5);
     }
 
@@ -74,7 +73,7 @@
 
     h1 {
       width: 84px;
-      font-family: PingFangSC-Regular;
+      font-family: var(--td-font-family);
       font-size: 14px;
       color: var(--td-text-color-secondary);
       text-align: left;
@@ -89,7 +88,7 @@
       display: inline-block;
       width: 8px;
       height: 8px;
-      border-radius: @border-radius-50;
+      border-radius: var(--td-radius-circle);
       background: var(--td-success-color-5);
     }
 
@@ -98,7 +97,7 @@
     }
 
     .blue {
-      color: var(--td-brand-color-8);
+      color: var(--td-brand-color);
     }
   }
 }
diff --git a/src/pages/detail/secondary/index.less b/src/pages/detail/secondary/index.less
index 32342a5..9d8a4c7 100644
--- a/src/pages/detail/secondary/index.less
+++ b/src/pages/detail/secondary/index.less
@@ -1,7 +1,7 @@
 .secondary-notification {
   background-color: var(--td-bg-color-container);
-  border-radius: @border-radius;
-  padding: @spacer-3 @spacer-4;
+  border-radius: var(--td-radius-default);
+  padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
 
   .t-tabs__content {
     padding-top: 0;
@@ -34,7 +34,7 @@
     }
 
     .t-tag.t-size-s {
-      margin-right: @spacer-1;
+      margin-right: var(--td-comp-margin-s);
       margin-left: 0;
     }
   }
@@ -51,7 +51,7 @@
   }
 
   .unread {
-    color: var(--td-brand-color-8);
+    color: var(--td-brand-color);
   }
 
   .msg-action {
diff --git a/src/pages/list/components/CommonTable.vue b/src/pages/list/components/CommonTable.vue
index cfad8dd..5f01056 100644
--- a/src/pages/list/components/CommonTable.vue
+++ b/src/pages/list/components/CommonTable.vue
@@ -274,7 +274,7 @@ const getContainer = () => {
 .list-common-table {
   background-color: var(--td-bg-color-container);
   padding: 30px 32px;
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
 
   .table-container {
     margin-top: 30px;
diff --git a/src/pages/list/tree/index.vue b/src/pages/list/tree/index.vue
index 6139031..970aed8 100644
--- a/src/pages/list/tree/index.vue
+++ b/src/pages/list/tree/index.vue
@@ -45,7 +45,7 @@ const onInput = () => {
 <style lang="less" scoped>
 .table-tree-container {
   background-color: var(--td-bg-color-container);
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
 
   .t-tree {
     margin-top: 24px;
diff --git a/src/pages/login/components/Header.vue b/src/pages/login/components/Header.vue
index 8200cd0..c94750d 100644
--- a/src/pages/login/components/Header.vue
+++ b/src/pages/login/components/Header.vue
@@ -37,7 +37,6 @@ const navToHelper = () => {
 
 <style lang="less" scoped>
 .login-header {
-  height: 64px;
   padding: 0 24px;
   display: flex;
   justify-content: space-between;
@@ -47,7 +46,6 @@ const navToHelper = () => {
 
   .logo {
     width: 188px;
-    height: 64px;
   }
 
   .operations-container {
diff --git a/src/pages/login/index.less b/src/pages/login/index.less
index e0c1c3a..81f5f9c 100644
--- a/src/pages/login/index.less
+++ b/src/pages/login/index.less
@@ -152,7 +152,7 @@
 
   .tip {
     font-size: 14px;
-    color: var(--td-brand-color-8);
+    color: var(--td-brand-color);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -182,7 +182,7 @@
   .tip {
     float: right;
     font-size: 14px;
-    color: var(--td-brand-color-8);
+    color: var(--td-brand-color);
   }
 }
 
diff --git a/src/pages/user/index.less b/src/pages/user/index.less
index a9478de..3be9ed5 100644
--- a/src/pages/user/index.less
+++ b/src/pages/user/index.less
@@ -10,7 +10,7 @@
   background: var(--td-bg-color-container);
   color: var(--td-text-color-primary);
   text-align: left;
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -35,7 +35,7 @@
   .contract {
     width: 340px;
     height: 88px;
-    border-radius: @border-radius;
+    border-radius: var(--td-radius-default);
     margin: 8px 0;
 
     &-title {
@@ -66,7 +66,7 @@
 .user-intro {
   padding: 32px 24px;
   background: var(--td-brand-color);
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
   color: var(--td-text-color-primary);
 
   .name {
@@ -107,7 +107,7 @@
 
 .product-container {
   margin-top: 16px;
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
 
   .content {
     width: 100%;
@@ -122,7 +122,7 @@
 .content-container {
   margin-top: 16px;
   background: var(--td-bg-color-container);
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
 }
 
 .user-team {
diff --git a/src/style/layout.less b/src/style/layout.less
index fccd3ce..8b9c28f 100644
--- a/src/style/layout.less
+++ b/src/style/layout.less
@@ -6,12 +6,8 @@
   width: fit-content;
 }
 
-.t-layout__header {
-  height: auto;
-}
-
 .t-button + .t-button {
-  margin-left: @spacer;
+  margin-left: var(--td-comp-margin-s);
 }
 
 .t-jumper {
@@ -30,7 +26,7 @@
 .left-operation-container,
 .operation-container {
   .t-button + .t-button {
-    margin-left: @spacer;
+    margin-left: var(--td-comp-margin-s);
   }
 }
 
@@ -80,7 +76,7 @@
   }
 
   &-content-layout {
-    padding: @spacer-3;
+    padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
   }
 
   &-layout {
@@ -93,7 +89,7 @@
       z-index: 100;
     }
     &-tabs-nav + .@{starter-prefix}-content-layout {
-      padding-top: @spacer-3;
+      padding-top: var(--td-comp-paddingTB-xxl);
     }
 
     &::-webkit-scrollbar {
@@ -111,7 +107,7 @@
 
   &-footer-layout {
     padding: 0;
-    margin-bottom: @spacer-3;
+    margin-bottom: var(--td-comp-margin-xxl);
   }
 
   // slideBar
@@ -136,10 +132,10 @@
     min-height: 100%;
 
     &-mix {
-      top: 64px;
+      top: var(--td-comp-size-xxxl);
 
       &-fixed {
-        top: 64px;
+        top: var(--td-comp-size-xxxl);
         z-index: 0;
       }
     }
@@ -177,7 +173,7 @@
 
     &-logo-normal {
       color: var(--td-brand-color);
-      font-size: @font-size-l;
+      font: var(--td-font-body-large);
       transition: all 0.3s;
     }
   }
diff --git a/src/style/reset.less b/src/style/reset.less
index 5566f9d..6bf61c3 100644
--- a/src/style/reset.less
+++ b/src/style/reset.less
@@ -1,16 +1,15 @@
 // 对部分样式进行重置
 body {
   color: var(--td-text-color-secondary);
-  font-family: -apple-system, BlinkMacSystemFont, @font-family;
-  font-size: @font-size-base;
-  line-height: 1.5;
+  font-family: -apple-system, BlinkMacSystemFont, var(--td-font-family);
+  font: var(--td-font-body-medium);
   -webkit-font-smoothing: antialiased;
   padding: 0;
   margin: 0;
 }
 
 pre {
-  font-family: @font-family;
+  font-family: var(--td-font-family);
 }
 
 ul,
@@ -63,9 +62,9 @@ a {
 }
 
 .t-button-link {
-  margin-right: @spacer-3;
+  margin-right: var(--td-comp-margin-xxl);
 
   &:last-child {
     margin-right: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/style/theme/default.less b/src/style/theme/default.less
index 4c3b518..62b18d5 100644
--- a/src/style/theme/default.less
+++ b/src/style/theme/default.less
@@ -1,15 +1,15 @@
 :root,
 :root[theme-mode='light'] {
-  --td-brand-color-1: #e0ebff;
-  --td-brand-color-2: #c0d8ff;
-  --td-brand-color-3: #a1c4ff;
-  --td-brand-color-4: #81b1ff;
-  --td-brand-color-5: #5f9bff;
-  --td-brand-color-6: #3d87ff;
-  --td-brand-color-7: #176eff;
-  --td-brand-color-8: #0052d9;
-  --td-brand-color-9: #0048cd;
-  --td-brand-color-10: #0035b5;
+  --td-brand-color-1: #f2f3ff;
+  --td-brand-color-2: #d9e1ff;
+  --td-brand-color-3: #b5c7ff;
+  --td-brand-color-4: #8eabff;
+  --td-brand-color-5: #618dff;
+  --td-brand-color-6: #366ef4;
+  --td-brand-color-7: #0052d9;
+  --td-brand-color-8: #003cab;
+  --td-brand-color-9: #002a7c;
+  --td-brand-color-10: #001a57;
 }
 
 :root[theme-mode='dark'] {
diff --git a/src/style/variables.less b/src/style/variables.less
index 769b669..d0889f3 100644
--- a/src/style/variables.less
+++ b/src/style/variables.less
@@ -1,47 +1,7 @@
 /** 公共前缀 */
 @starter-prefix: tdesign-starter;
 
-// 组件库本身只有色彩相关的css token 扩展其他css token使用 待组件库扩充其他token后再做替换 这里使用less vars 避免两种css token让使用者混淆
-// tdesign 只保持一套token即可
-
-// Spacer
-@spacer: 8px;
-@spacer-s: calc(@spacer * 0.5); // 间距-4
-@spacer-l: calc(@spacer * 1.5); // 间距-12
-@spacer-1: @spacer; // 间距-8
-@spacer-2: calc(@spacer * 2); // 间距-16
-@spacer-3: calc(@spacer * 3); // 间距-24
-@spacer-4: calc(@spacer * 4); // 间距-32
-@spacer-5: calc(@spacer * 5); // 间距-大-40
-@spacer-6: calc(@spacer * 6); // 间距-大-48
-@spacer-7: calc(@spacer * 7); // 间距-大-48
-@spacer-8: calc(@spacer * 8); // 间距-大-48
-@spacer-9: calc(@spacer * 9); // 间距-大-48
-@spacer-10: calc(@spacer * 10); // 间距-大-80
-
-// Font
-@font-size: 10px;
-@font-size-s: calc(@font-size * 1.2); // 字号-五级字号
-@font-size-base: calc(@font-size * 1.4); // 字号-四级字号
-@font-size-l: calc(@font-size * 1.6); // 字号-三级字号
-@font-size-xl: calc(@font-size * 2); // 字号-二级字号
-@font-size-xxl: calc(@font-size * 3.6); // 字号-一级字号
-
-// Line Height
-@line-height: 1.5; // 行高-常规
-@line-height-s: 20px; // 行高-对应五级文字
-@line-height-base: 22px; // 行高-对应四级文字
-@line-height-l: 24px; // 行高-对应三级文字
-@line-height-xl: 28px; // 行高-对应二级文字
-@line-height-xxl: 44px; //行高-对应一级文字
-
-@font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
-@font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
-
-// Border Radius
-@border-radius: 3px; // 圆角-全局
-@border-radius-50: 50%; // 圆角-全圆角
-
+// 颜色、尺寸、阴影、圆角、字体 variables 请参考 https://tdesign.tencent.com/starter/docs/vue/design-token
 // 响应式断点
 @screen-sm: 768px;
 @screen-md: 992px;