feat: upgrade tdesign-vue to 0.43+

2 years ago · 66dc871d72
13 changed files with 139 additions and 164 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "tdesign-vue-starter",
-  "version": "0.2.0",
+  "version": "0.3.0",
  "scripts": {
    "dev:mock": "vite --open --mode mock",
    "dev": "vite --open --mode development",
@ -23,13 +23,12 @@
    "echarts": "~5.1.2",
    "nprogress": "^0.2.0",
    "qrcode.vue": "^1.7.0",
-    "tdesign-icons-vue": "~0.0.8",
-    "tdesign-vue": "~0.41.5",
+    "tdesign-icons-vue": "^0.1.0",
+    "tdesign-vue": "^0.43.0",
    "tvision-color": "~1.4.0",
    "typescript": "^4.2.4",
    "vue": "^2.6.11",
    "vue-clipboard2": "^0.3.1",
-    "vue-color": "^2.8.1",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2",
    "vuex-router-sync": "^5.0.0"
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@ -43,7 +43,13 @@
                @visible-change="onPopupVisibleChange"
                :overlayStyle="{ padding: 0 }"
              >
-                <template #content><color-picker v-model="colors" /></template>
+                <template #content>
+                  <t-color-picker-panel
+                    :on-change="changeColor"
+                    :color-modes="['monochrome']"
+                    format="HEX"
+                    :swatch-colors="[]"
+                /></template>
                <t-radio-button
                  :value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]"
                  class="setting-layout-color-group dynamic-color-btn"
@ -104,7 +110,6 @@
 <script lang="ts">
 import { mapGetters } from 'vuex';
 import { Color } from 'tvision-color';
-import { Sketch } from 'vue-color';
 import { PopupVisibleChangeContext } from 'tdesign-vue';

 import STYLE_CONFIG from '@/config/style';
@ -127,7 +132,7 @@ const MODE_OPTIONS = [

 export default {
  name: 'DefaultLayoutSetting',
-  components: { Thumbnail, ColorContainer, 'color-picker': Sketch },
+  components: { Thumbnail, ColorContainer },
  data() {
    return {
      colors: {
@ -167,29 +172,9 @@ export default {
      },
      deep: true,
    },
-    colors: {
-      handler(newColor) {
-        const { hex } = newColor;
-        const { setting } = this.$store.state;
-
-        // hex 主题色
-        const newPalette = Color.getPaletteByGradation({
-          colors: [hex],
-          step: 10,
-        })[0];
-        const { mode } = this.$store.state.setting;
-        const colorMap = generateColorMap(hex, newPalette, mode);
-
-        this.$store.commit('setting/addColor', { [hex]: colorMap });
-
-        insertThemeStylesheet(hex, colorMap, mode);
-
-        this.$store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
-      },
-    },
  },
  mounted() {
-    document.querySelector('.dynamic-color-btn').addEventListener('click', () => {
+    document.querySelector('.dynamic-color-btn')?.addEventListener('click', () => {
      this.isColoPickerDisplay = true;
    });
  },
@ -236,6 +221,23 @@ export default {
        this.$message.success('复制成功');
      });
    },
+    changeColor(hex: string) {
+      const { setting } = this.$store.state;
+
+      // hex 主题色
+      const newPalette = Color.getPaletteByGradation({
+        colors: [hex],
+        step: 10,
+      })[0];
+      const { mode } = this.$store.state.setting;
+      const colorMap = generateColorMap(hex, newPalette, mode);
+
+      this.$store.commit('setting/addColor', { [hex]: colorMap });
+
+      insertThemeStylesheet(hex, colorMap, mode);
+
+      this.$store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
+    },
  },
 };
 </script>
@ -273,8 +275,6 @@ export default {

 .setting-layout-color-group {
  display: inline-flex;
-  width: 36px;
-  height: 36px;
  justify-content: center;
  align-items: center;
  border-radius: 50% !important;
@ -357,10 +357,7 @@ export default {
      padding: 8px;
      border-radius: @border-radius;
      border: 2px solid @component-border;
-
-      // &:last-child {
-      //   border-right: 2px solid transparent;
-      // }
+      height: auto;

      > .t-radio-button__label {
        display: inline-flex;
--- a/src/main.jsx
+++ b/src/main.jsx
@ -7,9 +7,9 @@ import axiosInstance from '@/utils/request';
 import App from './App.vue';
 import router from './router';
 import zhConfig from 'tdesign-vue/es/locale/zh_CN';
-
 // import enConfig from 'tdesign-vue/es/locale/en_US'; // 英文多语言配置

+import 'tdesign-vue/es/style/index.css';
 import '@/style/index.less';

 import './permission';
@ -38,7 +38,6 @@ sync(store, router);
 new Vue({
  router,
  store,
-  // eslint-disable-next-line no-unused-vars
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  render: (h) => (
    <div>
--- a/src/pages/dashboard/base/components/middle-chart.vue
+++ b/src/pages/dashboard/base/components/middle-chart.vue
@ -4,11 +4,10 @@
      <t-card title="统计数据" subtitle="(万元)" class="dashboard-chart-card">
        <template #actions>
          <div class="dashboard-chart-title-container">
-            <t-date-picker
+            <t-date-range-picker
              class="card-date-picker-container"
              theme="primary"
              mode="date"
-              :range="true"
              :default-value="LAST_7_DAYS"
              @change="onCurrencyChange"
            />
--- a/src/pages/dashboard/base/components/overview.vue
+++ b/src/pages/dashboard/base/components/overview.vue
@ -9,11 +9,10 @@
          :class="{ 'dashboard-overview-card': true, 'overview-panel': true }"
        >
          <template #actions>
-            <t-date-picker
+            <t-date-range-picker
              class="card-date-picker-container"
              theme="primary"
              mode="date"
-              range
              :default-value="LAST_7_DAYS"
              @change="onStokeDataChange"
            />
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@ -20,12 +20,11 @@
      <t-col :xs="12" :xl="9">
        <t-card :class="{ 'dashboard-detail-card': true }" title="采购商品申请趋势" subtitle="(件)">
          <template #actions>
-            <t-date-picker
+            <t-date-range-picker
              style="width: 240px"
              :default-value="LAST_7_DAYS"
              theme="primary"
              mode="date"
-              range
              @change="onMaterialChange"
            />
          </template>
@ -43,15 +42,14 @@
    </t-row>
    <t-card :class="{ 'dashboard-detail-card': true }" title="采购商品满意度分布" class="row-margin">
      <template #actions>
-        <t-date-picker
+        <t-date-range-picker
          style="display: inline-block; margin-right: 8px; width: 240px"
          :defaultValue="LAST_7_DAYS"
          theme="primary"
          mode="date"
-          range
          @change="onSatisfyChange"
        >
-        </t-date-picker>
+        </t-date-range-picker>
        <t-button>导出数据</t-button>
      </template>
      <div id="scatterContainer" style="width: 100%; height: 374px"></div>
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@ -35,12 +35,11 @@
          <t-tab-panel value="second" label="内容列表">
            <t-card :bordered="false" title="主页访问数据" subtitle="（次）">
              <template #options>
-                <t-date-picker
+                <t-date-rang-picker
                  class="card-date-picker-container"
                  :default-value="LAST_7_DAYS"
                  theme="primary"
                  mode="date"
-                  range
                  @change="onLineChange"
                />
              </template>
--- a/src/style/index.less
+++ b/src/style/index.less
@ -1,87 +1,4 @@
@import './variables.less';
-
@import './font-family.less';
-
@import './theme/index.less';
-
-body {
-  color: @text-color-secondary;
-  font-family: -apple-system, BlinkMacSystemFont, @font-family;
-  font-size: @font-size-base;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  padding: 0;
-}
-
-pre {
-  font-family: @font-family;
-}
-
-ul,
-dl,
-li,
-dd,
-dt {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-figure,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  margin: 0;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-.t-button-link {
-  color: @brand-color;
-  text-decoration: none;
-  margin-right: @spacer-3;
-  cursor: pointer;
-  transition: color @anim-duration-base @anim-time-fn-easing;
-
-  &:hover {
-    color: @brand-color-hover;
-  }
-
-  &:active {
-    color: @brand-color-active;
-  }
-
-  &--active {
-    color: @brand-color-active;
-  }
-
-  &:focus {
-    text-decoration: none;
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-}
-
-.t-button + .t-button {
-  margin-left: @spacer;
-}
-
-.container-base-margin-top {
-  margin-top: 16px;
-}
-
-.card-date-picker-container {
-  width: 240px;
-}
+@import './reset.less';
--- a/src/style/layout.less
+++ b/src/style/layout.less
@ -7,10 +7,6 @@
  width: fit-content;
 }

-.t-button + .t-button {
-  margin-left: @spacer;
-}
-
 .t-layout.t-layout--with-sider {
  > .t-layout {
    flex: 1;
@ -82,6 +78,18 @@
    &-tabs-nav + .@{prefix}-content-layout {
      padding-top: @spacer-3;
    }
+
+    &::-webkit-scrollbar {
+      width: 8px;
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 6px;
+      border: 2px solid transparent;
+      background-clip: content-box;
+      background-color: var(--td-scrollbar-color);
+    }
  }

  &-footer-layout {
--- a/src/style/reset.less
+++ b/src/style/reset.less
@ -0,0 +1,79 @@
+body {
+  color: @text-color-secondary;
+  font-family: -apple-system, BlinkMacSystemFont, @font-family;
+  font-size: @font-size-base;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  padding: 0;
+  margin: 0;
+}
+
+pre {
+  font-family: @font-family;
+}
+
+ul,
+dl,
+li,
+dd,
+dt {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.t-button-link,
+a {
+  color: @brand-color;
+  text-decoration: none;
+  margin-right: @spacer-3;
+  cursor: pointer;
+  transition: color @anim-duration-base @anim-time-fn-easing;
+
+  &:hover {
+    color: @brand-color-hover;
+  }
+
+  &:active {
+    color: @brand-color-active;
+  }
+
+  &--active {
+    color: @brand-color-active;
+  }
+
+  &:focus {
+    text-decoration: none;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.container-base-margin-top {
+  margin-top: 16px;
+}
+
+.card-date-picker-container {
+  width: 240px;
+}
--- a/src/style/variables.less
+++ b/src/style/variables.less
@ -163,10 +163,6 @@
@shadow-inset-left: var(--td-shadow-inset-left);
@shadow-inset: @shadow-inset-top, @shadow-inset-right, @shadow-inset-bottom, @shadow-inset-left;

-// 融合阴影
-@shadow-2-inset: @shadow-2, @shadow-inset;
-@shadow-3-inset: @shadow-3, @shadow-inset;
-
 // Spacer
@spacer: 8px;
@spacer-s: @spacer * 0.5; // 间距-4
@ -205,16 +201,6 @@
@border-radius: 3px; // 圆角-全局
@border-radius-50: 50%; // 圆角-全圆角

-// 表单相关
-@form-height: 30px;
-@form-text-color: @text-color-primary;
-@form-bg-color: @bg-color-container;
-@form-border-color: @border-level-2-color;
-
-// 图标尺寸
-@icon-default: 16px;
-@icon-l: 24px;
-
 // 滚动条颜色
@scrollbar-color: var(--td-scrollbar-color);

@ -240,12 +226,3 @@
@anim-duration-base: 0.2s;
@anim-duration-moderate: 0.24s;
@anim-duration-slow: 0.28s;
-
-// 统一管理各组件层级关系
-@z-index-affix: 500;
-@z-index-drawer: 1500;
-@z-index-dialog: 2500;
-@z-index-loading: 3500;
-@z-index-message: 5000;
-@z-index-Popup: 5500;
-@z-index-Notification: 6000;
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@ -1,6 +1,12 @@
 // 获取常用时间
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';

-export const LAST_7_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(7, 'day'), dayjs().subtract(1, 'day')];
+export const LAST_7_DAYS = [
+  dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
+];

-export const LAST_30_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(30, 'day'), dayjs().subtract(1, 'day')];
+export const LAST_30_DAYS = [
+  dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
+];
--- a/vite.config.js
+++ b/vite.config.js
@ -22,9 +22,7 @@ export default ({ mode }) => {
    css: {
      preprocessorOptions: {
        less: {
-          modifyVars: {
-            // 如需自定义组件其他 token, 在此处配置
-          },
+          modifyVars: {},
        },
      },
    },