Fix/layout/UI fix (#11)

* fix: layout ui fix * fix: layout ui fix Co-authored-by: pengYYYYY <pengyue970715@gmail.com>
2024-09-20 02:34:24 +08:00 · 2021-12-02 16:42:30 +08:00 · 2021-12-02 16:42:30 +08:00 · 4e0b787829
commit 4e0b787829
parent a5b177e8e1
29 changed files with 369 additions and 180 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,128 @@
+
+<p style="display:flex; justify-content: center">
+
+[![](https://tdesign.gtimg.com/starter/brand-logo.svg)](http://tdesgin.tencent.com/starter/vue/#/dashboard/base)
+
+</p>
+<p align="center">
+  <a href="https://npmjs.com/package/vite"><img src="https://img.shields.io/npm/v/vite.svg" alt="npm package"></a>
+  <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatility"></a>
+</p>
+
+# TDesign Starter
+
+## 项目简介
+
+TDesign Starter 基于 TDesign UI 组件，旨在提供项目开箱即用的、配置式的并且拥有开发体验和设计感的中后台的项目。
+
+- 设计美观
+  - 基于 TDesign UI 设计规范
+  - 提供 Figma、 Sketch、 Adobe XD、 Axure等多种类型的设计资源
+  - 在开源体系上打造具有自身品牌特色且好用的产品
+<br/>
+- 完备路由
+  - 同时支持配置式路由和自定义路由
+  - 对于配置型路由，提供导航类组件的深度定制（“菜单 Menu”、“面包屑 Breadcrumb”），无需手动处理路由映射关系。
+<br/>
+- 动态布局:
+  - 内置“左右布局”、“上左右布局”、“上下布局”等中后台常用布局，
+  - 页面内容基于 24 栅格布局设计，内置“常规型”和“紧凑型”两种间距模式
+<br/>
+- 极速HRM:
+  - 采用 `Vite` 构建
+  - 开发环境下体验浏览器 esmodule bundless, 达到极速更新，无需等待漫长的 bundle 过程
+<br/>
+- 开发规范:
+  - 统一规范会减少沟通成本，提高开发和维护的体验；
+  - 提交规范采用 `Angular commit 规范`
+  - 同时推荐采用 `vscode` 开发
+<br/>
+
+## 项目脚本
+
+```
+// 安装依赖
+npm install
+
+// 启动项目
+npm run start
+
+// 项目构建 - 体验环境
+npm run build:test
+
+// 项目构建
+npm run build
+
+// 项目预览
+npm run preview
+
+// 项目lint
+npm run lint
+
+// 修复lint
+npm run lint:fix
+
+```
+
+<br/>
+
+## 路由和菜单
+
+菜单（侧边栏和面包屑）由路由配置自动生成，根据路由变化可自动匹配，开发者无需手动处理这些逻辑。
+可在<a href="./src/config/routes.js">src/config/routes.js</a>文件中修改。
+
+菜单和路由的映射如下：
+
+```
+    {
+        path: '/dashboard',
+        icon: 'chart-pie',
+        title: '仪表板',
+        component: '../layouts/default.vue',
+        children: [
+            {
+                title: '概览仪表盘',
+                path: 'base',
+                component: '../pages/demo.vue',
+                children: [            {
+                    title: '概览仪表盘',
+                    path: 'base',
+                    component: '../pages/demo.vue',
+                }]
+            }
+        ]
+    }
+
+```
+
+路由使用 `vue-router`
+
+<br/>
+
+## 布局
+
+网站布局支持“空布局”， “侧边栏导航布局”， “侧边栏布局加头部导航”，“头部导航”四种；布局文件地址在<a href="./src/layouts">src/layouts</a>
+
+更多定制化布局，推荐使用 TDesign UI layout
+
+- ```<t-layout>```
+- ```<t-header>```
+- ```<t-footer>```
+- ```<t-aside>```
+- ```<t-content>```
+
+<br/>
+
+## 提交规范
+
+整齐美观的提交规范，沟通维护更加省力 [Angular Git Commit Guidelines](https://zj-git-guide.readthedocs.io/zh_CN/latest/message/Angular%E6%8F%90%E4%BA%A4%E4%BF%A1%E6%81%AF%E8%A7%84%E8%8C%83/)
+
+<br/>
+
+## 兼容性
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari |
+| --------- | --------- | --------- | --------- |
+| Edge >=16 | Firefox >=60| Chrome >=61| Safari >=11
+
+<br/>
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TDesign Vue Next Starter</title>
+    <title>TDesign Starter</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
    "start": "vite --open --mode development",
    "build:test": "vite build --mode test",
    "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview",
+    "preview": "vite preview",
    "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
    "lint:fix": "eslint --ext .vue,.js,jsx,.ts,.tsx ./ --max-warnings 0 --fix",
    "stylelint": "stylelint src/**/*.{html,vue,sass,less}",
@ -45,19 +45,19 @@
    "husky": "^7.0.4",
    "less": "^4.1.1",
    "mockjs": "^1.1.0",
+    "postcss-less": "^5.0.0",
    "prettier": "^2.4.1",
    "stylelint": "^14.1.0",
-    "stylelint-config-airbnb": "^0.0.0",
+    "stylelint-config-standard": "^24.0.0",
    "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.20.0",
+    "stylelint-scss": "^4.0.0",
    "typescript": "^4.4.3",
    "vite": "^2.4.4",
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-svg-sprite-component": "^1.0.10",
    "vite-svg-loader": "^3.1.0",
    "vue-clipboard3": "^1.0.1",
-    "vue-tsc": "^0.2.2",
-    "vuex-router-sync": "^5.0.0"
+    "vue-tsc": "^0.2.2"
  },
  "config": {
    "commitizen": {
--- a/src/components/card/index.vue
+++ b/src/components/card/index.vue
@ -103,10 +103,6 @@ export default defineComponent({
    }
  }

-  &.main-color {
-    background: @brand-color;
-  }
-
  &-title {
    display: flex;
    justify-content: space-between;
@ -131,11 +127,17 @@ export default defineComponent({
        margin: @spacer 0;
      }
    }
+
+    &-text-small {
+      display: inline-block;
+      width: 100%;
+    }
  }

  &-describe {
    font-size: 14px;
-    color: @bg-color-container;
+    color: @brand-color;
+    color: @text-color-primary;
    line-height: 22px;
  }

--- a/src/components/result/index.vue
+++ b/src/components/result/index.vue
@ -73,7 +73,7 @@ export default defineComponent({
  }

  &-tip {
-    margin: 16px 0 8px;
+    margin: 8px 0 32px;
    font-size: @font-size-base;
    color: @text-color-secondary;
    line-height: 22px;
--- a/src/config/global.ts
+++ b/src/config/global.ts
@ -1,4 +1,4 @@
-export const PREFIX = 'tdesign-pro';
+export const PREFIX = 'tdesign-starter';
 export const THEME = 'light';
 // customize(自定义登录，外网域名，统一重定向到登录页面)
 // export const authenticationMethod = 'smartProxy';
--- a/src/main.ts
+++ b/src/main.ts
@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import TDesign from 'tdesign-vue-next/esm';
+import TDesign from 'tdesign-vue-next';
 import VueClipboard from 'vue3-clipboard';

 import App from './App.vue';
--- a/src/pages/dashboard/base/index.less
+++ b/src/pages/dashboard/base/index.less
@ -1,8 +1,5 @@
@import '@/style/index';

-@media (max-width: @screen-md-max) {
-}
-
 .t-tabs__content {
  padding-top: @spacer-3;
 }
@ -13,9 +10,7 @@
 }

 .card-option {
-  display: flex;
  width: 100%;
-  align-items: center !important;
  justify-content: right !important;

  .dashboard-chart-title-left {
@ -23,7 +18,7 @@
    justify-content: left;
    align-self: left;
    width: 100%;
-    color: rgba(0, 0, 0, .4);
+    color: rgb(0 0 0 / 40%);
    font-size: 15px;
    padding-left: 8px;
  }
@ -38,9 +33,7 @@
  }

  .card-container {
-
    .card-content {
-
      &-label-title {
        color: @text-color-primary;
        padding-bottom: 4px;
@ -66,7 +59,6 @@
  margin-right: 0 !important;
 }

-
 .dashboard-item {
  display: flex;
  flex-direction: column;
@ -99,14 +91,12 @@
  }
 }

-
-
 .dashboard-bottom {
  margin-top: 16px;
  display: flex;
  flex-direction: row;

-  // 左边图表
+  /* 左边图表 */
  .dashboard-bottom-left {
    width: 100%;
    height: 100%;
@ -117,7 +107,7 @@
      width: 100%;
      height: 100%;

-      // 计量统计
+      /* 计量统计 */
      .dashboard-bottom-left-top-count-chart {
        padding: 20px 24px;
        background-color: white;
@ -126,7 +116,8 @@
        min-width: 300px;
        height: 320px;
      }
-      // 动态监测
+
+      /* 动态监测 */
      .dashboard-bottom-left-top-monitor-chart {
        padding: 20px 24px;
        background-color: white;
@ -137,7 +128,7 @@
      }
    }

-    // 出入库概览（）
+    /* 出入库概览（） */
    .dashboard-bottom-left-bottom {
      background-color: white;
      padding: 20px 24px;
@ -151,7 +142,7 @@
    }
  }

-  // 右边列表-实时热度趋势
+  /* 右边列表-实时热度趋势 */
  .dashboard-bottom-right {
    padding: 20px 24px;
    background-color: white;
@ -164,13 +155,12 @@
      padding-top: 16px;

      li {
-
        .dashboard-chart-tend-item-title {
          color: grey !important;
        }

        .dashboard-chart-tend-sep {
-          padding: 0 0 17px 0 !important;
+          padding: 0 0 17px !important;
        }

        .dashboard-chart-tend-item-line {
@ -201,7 +191,7 @@
  }
 }

-// 标题内容
+/* 标题内容 */
 .dashboard-chart-title {
  display: flex;
  flex-direction: row;
@ -211,13 +201,12 @@

  &-describe {
    font-size: 14px !important;
-    color: rgba(0,0,0,.60) !important;
+    color: rgb(0 0 0 / 60%) !important;
    text-align: left;
    line-height: 22px;
  }

  &-container {
-
    .t-date-picker {
      width: 240px;
    }
@ -225,7 +214,7 @@

  span {
    font-size: 16px;
-    color: rgba(0,0,0,.90);
+    color: rgb(0 0 0 / 90%);
    overflow: hidden;
    text-overflow: ellipsis;
  }
@ -233,7 +222,7 @@
  .dashboard-chart-title-search {
    display: flex;
    flex-direction: row;
-    border: 1px solid #DDDDDD;
+    border: 1px solid #ddd;
    border-radius: @border-radius;
    padding: 0;
    align-items: center;
@ -241,7 +230,7 @@
    font-weight: normal;

    input {
-      border: solid 0px #ffffff !important;
+      border: solid 0 #fff !important;
    }
  }

@ -304,11 +293,9 @@
  justify-content: center;
  font-weight: 700;

-
  &__top {
    background: @brand-color;
  }
-
 }

 .row-container {
@ -322,7 +309,7 @@

 .card-container.main-color {
  background: @brand-color;
-  color: white;
+  color: @text-color-primary;

  .card-describe {
    color: white;
@ -333,6 +320,10 @@
  }

  .dashboard-item-block {
-    color: rgba(255,255,255,.55);
+    color: rgb(255 255 255 / 55%);
+  }
+
+  .dashboard-item-bottom {
+    color: white;
  }
 }
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@ -109,6 +109,9 @@
                <trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
              </span>
            </template>
+            <template #operation="slotProps">
+              <a class="link" @click="rehandleClickOp(slotProps)">操作</a>
+            </template>
          </t-table>
        </card>
      </t-col>
@ -312,6 +315,6 @@ export default defineComponent({
  },
 });
 </script>
-<style lang="less" scoped>
+<style lang="less">
@import url('./index.less');
 </style>
--- a/src/pages/login/index.less
+++ b/src/pages/login/index.less
@ -3,7 +3,7 @@
 .login-wrapper {
  width: 100%;
  height: 100%;
-  background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg);
+  background-image: url('https://tdesign.gtimg.com/pro-template/login-bg-img.jpg');
  background-size: cover;
  background-position: 50%;
  position: relative;
@ -18,10 +18,9 @@
 }

 .title-container {
-
  .icon {
    width: 290px;
-    height: 60px;
+    height: 40px;
  }

  .side-title {
@ -35,7 +34,7 @@

    .tip1 {
      font-size: 14px;
-      color: rgba(0,0,0,.60);
+      color: rgb(0 0 0 / 60%);
    }

    .tip2 {
@ -72,7 +71,6 @@
  }

  &.login-phone {
-  
    .bottom-container {
      margin-top: 66px;
    }
@ -113,7 +111,7 @@

    .tip1 {
      font-size: 14px;
-      color: rgba(0,0,0,.60);
+      color: rgb(0 0 0 / 60%);
    }

    .tip2 {
@ -142,7 +140,6 @@
        margin-left: 11px;
      }
    }
-    
  }
 }

@ -158,7 +155,6 @@
    margin-right: 14px;

    &:last-child {
-
      &::after {
        display: none;
      }
@ -177,7 +173,7 @@

 .check-container {
  font-size: 14px;
-  color: rgba(0,0,0,.60);
+  color: rgb(0 0 0 / 60%);

  .tip {
    float: right;
@ -185,19 +181,3 @@
    color: @brand-color-8;
  }
 }
-
-.rex-check {
-  font-family: PingFangSC-Regular;
-  font-size: 14px;
-  color: @text-color-placeholder;
-  line-height: 22px;
-}
-
-.format-correct {
-  color: @text-color-primary;
-    
-  .t-icon {
-    color: @success-color-5;
-  }
-}
-
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@ -2,7 +2,7 @@
  <div class="login-wrapper">
    <div class="login-container">
      <div class="title-container">
-        <img class="icon" src="https://tdesign.gtimg.com/pro-template/logo%402x.png" />
+        <img class="icon" src="https://tdesign.gtimg.com/starter/logo%402x.png" />
        <div class="side-title">
          <p class="tip1">
            {{ type == 'register' ? '没有账号吗?' : '已有账号?' }}
--- a/src/pages/result/403/index.vue
+++ b/src/pages/result/403/index.vue
@ -3,7 +3,9 @@
    page-header="403"
    tip="抱歉，您无权限访问此页面，企业微信联系创建者xiaolaoshi"
    bg-url="https://tdesign.gtimg.com/pro-template/result-page/403.png"
-  />
+  >
+    <t-button @click="() => $router.push('/')">返回首页</t-button>
+  </result>
 </template>

 <script lang="ts">
--- a/src/pages/result/404/index.vue
+++ b/src/pages/result/404/index.vue
@ -3,7 +3,9 @@
    page-header="404"
    tip="抱歉，您访问的页面不存在"
    bg-url="https://tdesign.gtimg.com/pro-template/result-page/404.png"
-  />
+  >
+    <t-button @click="() => $router.push('/')">返回首页</t-button>
+  </result>
 </template>

 <script lang="ts">
--- a/src/pages/result/500/index.vue
+++ b/src/pages/result/500/index.vue
@ -3,7 +3,9 @@
    page-header="500"
    tip="抱歉，服务器出错啦"
    bg-url="https://tdesign.gtimg.com/pro-template/result-page/500.png"
-  />
+  >
+    <t-button @click="() => $router.push('/')">返回首页</t-button>
+  </result>
 </template>

 <script lang="ts">
--- a/src/pages/result/browser-incompatible/index.vue
+++ b/src/pages/result/browser-incompatible/index.vue
@ -3,15 +3,79 @@
    page-header="浏览器不兼容"
    tip="抱歉，您正在使用的浏览器版本过低，无法打开当前网页"
    bg-url="https://tdesign.gtimg.com/pro-template/result-page/browser-incompatible.png"
-  />
+  >
+    <div class="result-slot-container">
+      <t-button class="result-button" @click="() => $router.push('/')">返回首页</t-button>
+      <div class="recommend-container">
+        <div>TDesign Starter 推荐以下主流浏览器</div>
+        <div class="recommend-browser">
+          <div>
+            <thumbnail class="browser-icon" url="https://tdesign.gtimg.com/starter/result-page/chorme.png" />
+            <div>Chrome</div>
+          </div>
+          <div>
+            <thumbnail class="browser-icon" url="https://tdesign.gtimg.com/starter/result-page/qq-browser.png" />
+            <div>QQ Browser</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </result>
 </template>

 <script lang="ts">
 import { defineComponent } from 'vue';
 import Result from '@/components/result/index.vue';
+import Thumbnail from '@/components/thumbnail/index.vue';

 export default defineComponent({
  name: 'ResultBrowserIncompatible',
-  components: { Result },
+  components: { Result, Thumbnail },
 });
 </script>
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.result-slot-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  color: @text-color-secondary;
+}
+
+.recommend-container {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  top: 175px;
+  padding: 24px 48px;
+  width: 640px;
+  background: #ffffff;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+}
+
+.recommend-browser {
+  display: flex;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 70px;
+  }
+
+  > div + div {
+    margin-left: 40px;
+  }
+}
+
+.browser-icon {
+  width: 36.67px;
+  height: 36.67px;
+}
+</style>
--- a/src/pages/result/fail/index.vue
+++ b/src/pages/result/fail/index.vue
@ -1,10 +1,11 @@
 <template>
  <card>
    <div class="result-success">
-      <t-icon class="result-success-icon" name="close-circle-filled" />
+      <t-icon class="result-success-icon" name="error-circle" />
      <div class="result-success-title">项目创建失败</div>
      <div class="result-success-describe">企业微信联系检查创建者权限，或返回修改</div>
      <div>
+        <t-button theme="default" @click="() => $router.push('/form/base')">返回首页</t-button>
        <t-button @click="() => $router.push('/form/base')"> 返回修改 </t-button>
      </div>
    </div>
--- a/src/pages/result/network-error/index.vue
+++ b/src/pages/result/network-error/index.vue
@ -3,7 +3,12 @@
    page-header="网络异常"
    tip="网络异常，请稍后再试"
    bg-url="https://tdesign.gtimg.com/pro-template/result-page/network-error.png"
-  />
+  >
+    <div>
+      <t-button theme="default" @click="() => $router.push('/')">返回首页</t-button>
+      <t-button @click="() => $router.push('/')">重新加载</t-button>
+    </div>
+  </result>
 </template>

 <script lang="ts">
--- a/src/style/index.less
+++ b/src/style/index.less
@ -41,8 +41,6 @@ h4,
 h5,
 h6,
 p {
-  margin-top: 0;
-  margin-bottom: 0;
  margin: 0;
 }
  
--- a/src/style/side-nav.less
+++ b/src/style/side-nav.less
@ -1,9 +1,7 @@
@import './variables.less';
-
@import './font-family.less';

 .@{prefix} {
-
  &-sidebar-layout {
    height: 100%;
  }
@ -21,7 +19,7 @@
    top: 0;
    bottom: 0;
    z-index: 10;
-    transition: all .3s;
+    transition: all 0.3s;
    min-height: 100%;

    &-mix {
@ -46,6 +44,9 @@
      display: flex;
      align-items: center;
      width: 100%;
+      &:hover {
+        cursor: pointer;
+      }
    }

    &-logo-t-logo {
@ -54,39 +55,45 @@
    }

    &-logo-tdesign-logo {
-      width: 112px;
+      height: 32px;
    }

    &-logo-normal {
      font-family: TencentSansKoreanW7;
      color: @brand-color;
      font-size: @font-size-l;
-      transition: all .3s;
+      transition: all 0.3s;
    }
  }

-
  &-sideNav-placeholder {
    flex: 1 1 232px;
    min-width: 232px;
-    transition: all .3s;
+    transition: all 0.3s;

    &-hidden {
      flex: 1 1 72px;
      min-width: 72px;
-      transition: all .3s;
+      transition: all 0.3s;
    }
  }
-
 }

-.t-menu--dark .t-menu__options:not(:empty) .t-icon-menu-unfold {
-  color: rgba(255, 255, 255, .55)
+.t-menu--dark .t-menu__operations .t-icon {
+  color: rgba(255, 255, 255, .55);
+  &:hover {
+    cursor: pointer;
+  }
 }

+
 .logo-container {
  cursor: pointer;
  display: inline-flex;
  height: 64px;
  margin-left: 24px;
 }
+
+.t-default-menu.t-menu--dark {
+  background: #232A35
+}
--- a/src/style/theme/cyan.less
+++ b/src/style/theme/cyan.less
@ -1,13 +1,14 @@
 :root[theme-color='cyan'],
-:root[theme-color='cyan'][theme-mode='dark'] {--td-brand-color: #0594FA;
-  --td-brand-color-1: #D6F7FF;
-  --td-brand-color-2: #B2ECFF;
-  --td-brand-color-3: #85DAFF;
-  --td-brand-color-4: #5CC5FC;
-  --td-brand-color-5: #31ADFB;
-  --td-brand-color-6: #0594FA;
-  --td-brand-color-7: #007EDF;
-  --td-brand-color-8: #0068C0;
-  --td-brand-color-9: #00549E;
-  --td-brand-color-10: #00417D;
+:root[theme-color='cyan'][theme-mode='dark'] {
+  --td-brand-color: #0594fa;
+  --td-brand-color-1: #d6f7ff;
+  --td-brand-color-2: #b2ecff;
+  --td-brand-color-3: #85daff;
+  --td-brand-color-4: #5cc5fc;
+  --td-brand-color-5: #31adfb;
+  --td-brand-color-6: #0594fa;
+  --td-brand-color-7: #007edf;
+  --td-brand-color-8: #0068c0;
+  --td-brand-color-9: #00549e;
+  --td-brand-color-10: #00417d;
 }
--- a/src/style/theme/green.less
+++ b/src/style/theme/green.less
@ -1,13 +1,13 @@
 :root[theme-color='green'],
 :root[theme-color='green'][theme-mode='dark'] {
-  --td-brand-color: #00A870;
-  --td-brand-color-1: #DFF7ED;
-  --td-brand-color-2: #A9E8CD;
-  --td-brand-color-3: #69D5AB;
-  --td-brand-color-4: #30BF8B;
-  --td-brand-color-5: #00A870;
-  --td-brand-color-6: #00935D;
-  --td-brand-color-7: #007E4A;
+  --td-brand-color: #00a870;
+  --td-brand-color-1: #dff7ed;
+  --td-brand-color-2: #a9e8cd;
+  --td-brand-color-3: #69d5ab;
+  --td-brand-color-4: #30bf8b;
+  --td-brand-color-5: #00a870;
+  --td-brand-color-6: #00935d;
+  --td-brand-color-7: #007e4a;
  --td-brand-color-8: #006937;
  --td-brand-color-9: #005426;
  --td-brand-color-10: #004114;
--- a/src/style/theme/orange.less
+++ b/src/style/theme/orange.less
@ -1,14 +1,14 @@
 :root[theme-color='orange'],
 :root[theme-color='orange'][theme-mode='dark'] {
-  --td-brand-color-1: #FFEFDB;
-  --td-brand-color-2: #FFD3A3;
-  --td-brand-color-3: #FFB473;
-  --td-brand-color-4: #FF9247;
-  --td-brand-color-5: #ED7B2F;
-  --td-brand-color-6: #D6621C;
-  --td-brand-color-7: #C24C08;
-  --td-brand-color-8: #A23C00;
-  --td-brand-color-9: #872D00;
-  --td-brand-color-10: #691F00;
-  --td-brand-color: #C24C08;
+  --td-brand-color-1: #ffefdb;
+  --td-brand-color-2: #ffd3a3;
+  --td-brand-color-3: #ffb473;
+  --td-brand-color-4: #ff9247;
+  --td-brand-color-5: #ed7b2f;
+  --td-brand-color-6: #d6621c;
+  --td-brand-color-7: #c24c08;
+  --td-brand-color-8: #a23c00;
+  --td-brand-color-9: #872d00;
+  --td-brand-color-10: #691f00;
+  --td-brand-color: #c24c08;
 }
--- a/src/style/theme/pink.less
+++ b/src/style/theme/pink.less
@ -1,14 +1,14 @@
 :root[theme-color='pink'],
 :root[theme-color='pink'][theme-mode='dark'] {
-  --td-brand-color: #ED49B4;
-  --td-brand-color-1: #FFE9FF;
-  --td-brand-color-2: #FFD1FC;
-  --td-brand-color-3: #FFB2F2;
-  --td-brand-color-4: #FF8FE1;
-  --td-brand-color-5: #FF66CC;
-  --td-brand-color-6: #ED49B4;
-  --td-brand-color-7: #D42C9D;
-  --td-brand-color-8: #BC0088;
-  --td-brand-color-9: #9B006B;
-  --td-brand-color-10: #7B0052;
+  --td-brand-color: #ed49b4;
+  --td-brand-color-1: #ffe9ff;
+  --td-brand-color-2: #ffd1fc;
+  --td-brand-color-3: #ffb2f2;
+  --td-brand-color-4: #ff8fe1;
+  --td-brand-color-5: #f6c;
+  --td-brand-color-6: #ed49b4;
+  --td-brand-color-7: #d42c9d;
+  --td-brand-color-8: #bc0088;
+  --td-brand-color-9: #9b006b;
+  --td-brand-color-10: #7b0052;
 }
--- a/src/style/theme/purple.less
+++ b/src/style/theme/purple.less
@ -1,14 +1,14 @@
 :root[theme-color='purple'],
 :root[theme-color='purple'][theme-mode='dark'] {
-  --td-brand-color: #834EC2;
-  --td-brand-color-1: #F3E0FF;
-  --td-brand-color-2: #E6C4FF;
-  --td-brand-color-3: #D8ABFF;
-  --td-brand-color-4: #C68CFF;
-  --td-brand-color-5: #AE78F0;
-  --td-brand-color-6: #9963D8;
-  --td-brand-color-7: #834EC2;
-  --td-brand-color-8: #6D3BAC;
+  --td-brand-color: #834ec2;
+  --td-brand-color-1: #f3e0ff;
+  --td-brand-color-2: #e6c4ff;
+  --td-brand-color-3: #d8abff;
+  --td-brand-color-4: #c68cff;
+  --td-brand-color-5: #ae78f0;
+  --td-brand-color-6: #9963d8;
+  --td-brand-color-7: #834ec2;
+  --td-brand-color-8: #6d3bac;
  --td-brand-color-9: #572796;
  --td-brand-color-10: #421381;
 }
--- a/src/style/theme/red.less
+++ b/src/style/theme/red.less
@ -1,14 +1,14 @@
 :root[theme-color='red'],
 :root[theme-color='red'][theme-mode='dark'] {
-  --td-brand-color: #E34D59;
-  --td-brand-color-1: #FFE9E9;
-  --td-brand-color-2: #FFCCCE;
-  --td-brand-color-3: #FFACAF;
-  --td-brand-color-4: #FF888C;
-  --td-brand-color-5: #FB646D;
-  --td-brand-color-6: #E34D59;
-  --td-brand-color-7: #C93043;
-  --td-brand-color-8: #B01531;
+  --td-brand-color: #e34d59;
+  --td-brand-color-1: #ffe9e9;
+  --td-brand-color-2: #ffccce;
+  --td-brand-color-3: #ffacaf;
+  --td-brand-color-4: #ff888c;
+  --td-brand-color-5: #fb646d;
+  --td-brand-color-6: #e34d59;
+  --td-brand-color-7: #c93043;
+  --td-brand-color-8: #b01531;
  --td-brand-color-9: #960022;
  --td-brand-color-10: #730021;
 }
--- a/src/style/theme/yellow.less
+++ b/src/style/theme/yellow.less
@ -1,14 +1,14 @@
 :root[theme-color='yellow'],
 :root[theme-color='yellow'][theme-mode='dark'] {
-  --td-brand-color: #EBB105;
-  --td-brand-color-1: #FFF8B8;
-  --td-brand-color-2: #FFE478;
-  --td-brand-color-3: #FBCA25;
-  --td-brand-color-4: #EBB105;
-  --td-brand-color-5: #D29C00;
-  --td-brand-color-6: #BA8700;
-  --td-brand-color-7: #A37200;
-  --td-brand-color-8: #8C5F00;
-  --td-brand-color-9: #754C00;
-  --td-brand-color-10: #5E3A00;
+  --td-brand-color: #ebb105;
+  --td-brand-color-1: #fff8b8;
+  --td-brand-color-2: #ffe478;
+  --td-brand-color-3: #fbca25;
+  --td-brand-color-4: #ebb105;
+  --td-brand-color-5: #d29c00;
+  --td-brand-color-6: #ba8700;
+  --td-brand-color-7: #a37200;
+  --td-brand-color-8: #8c5f00;
+  --td-brand-color-9: #754c00;
+  --td-brand-color-10: #5e3a00;
 }
--- a/src/style/variables.less
+++ b/src/style/variables.less
@ -1,7 +1,7 @@
 /** 公共前缀 */
-@prefix: tdesign-pro;
+@prefix: tdesign-starter;

-// 颜色色板
+/* 颜色色板 */

@brand-color-1: var(--td-brand-color-1);
@brand-color-2: var(--td-brand-color-2);
@ -62,7 +62,7 @@
@gray-color-13: var(--td-gray-color-13);
@gray-color-14: var(--td-gray-color-14);

-// 文字 & 图标 颜色
+/* 文字 & 图标 颜色 */
@font-white-1: var(--td-font-white-1);
@font-white-2: var(--td-font-white-2);
@font-white-3: var(--td-font-white-3);
@ -73,7 +73,7 @@
@font-gray-3: var(--td-font-gray-3);
@font-gray-4: var(--td-font-gray-4);

-// 基础颜色
+/* 基础颜色 */ 
@brand-color: var(--td-brand-color); // 色彩-品牌-可操作
@warning-color: var(--td-warning-color); // 色彩-功能-警告
@error-color: var(--td-error-color); // 色彩-功能-失败
--- a/stylelint.config.js
+++ b/stylelint.config.js
@ -1,11 +1,14 @@
-// style-lint config
 module.exports = {
  defaultSeverity: 'error',
-  extends: ['stylelint-config-airbnb'],
-  plugins: ['stylelint-scss'],
+  extends: ['stylelint-config-standard'],
+  plugin: ['stylelint-less'],
  rules: {
    'max-nesting-depth': 10,
    'string-quotes': 'single',
-    'declaration-property-value-disallowed-list': { '/^border/': ['none'] },
+    'selector-class-pattern': null,
+    'no-descending-specificity': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'font-family-name-quotes': null,
+    'no-invalid-double-slash-comments': null,
  },
 };