feat: upgrade tdesign version (#158)

* feat: upgrade tdesign vue

* chore: rename component

* chore: 0.4.0

Author: uyarn

.vscode/settings.json

@@ -2,5 +2,6 @@
   "eslint.validate": ["javascript", "javascriptvue", "typescript", "typescriptreact"],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "cSpell.words": ["tdesign", "tvision", "echarts", "nprogress", "commitlint", "stylelint", "vuex", "qrcode"]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-vue-starter",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",
@@ -24,7 +24,7 @@
     "nprogress": "^0.2.0",
     "qrcode.vue": "^1.7.0",
     "tdesign-icons-vue": "^0.1.0",
-    "tdesign-vue": "^0.43.0",
+    "tdesign-vue": "^0.45.0",
     "tvision-color": "~1.4.0",
     "typescript": "^4.2.4",
     "vue": "~2.6.11",

src/layouts/components/LayoutContent.vue

@@ -53,11 +53,11 @@
       </t-tab-panel>
     </t-tabs>
     <t-content :class="`${prefix}-content-layout`">
-      <l-breadcrumb v-if="setting.showBreadcrumb" />
-      <l-content />
+      <layout-breadcrumb v-if="setting.showBreadcrumb" />
+      <common-content />
     </t-content>
     <t-footer v-if="showFooter" :class="`${prefix}-footer-layout`">
-      <l-footer />
+      <layout-footer />
     </t-footer>
   </t-layout>
 </template>
@@ -67,19 +67,19 @@ import Vue from 'vue';
 import { mapGetters } from 'vuex';
 import { RefreshIcon, ArrowLeftIcon, ArrowRightIcon, HomeIcon, CloseCircleIcon } from 'tdesign-icons-vue';
 
-import LContent from './Content.vue';
-import LBreadcrumb from './Breadcrumb.vue';
-import LFooter from './Footer.vue';
+import CommonContent from './Content.vue';
+import LayoutBreadcrumb from './Breadcrumb.vue';
+import LayoutFooter from './Footer.vue';
 
 import { prefix } from '@/config/global';
 import { SettingType } from '@/interface';
 
 export default Vue.extend({
   name: 'LayoutContent',
   components: {
-    LContent,
-    LFooter,
-    LBreadcrumb,
+    CommonContent,
+    LayoutFooter,
+    LayoutBreadcrumb,
     RefreshIcon,
     ArrowLeftIcon,
     ArrowRightIcon,

src/layouts/components/LayoutHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <l-header
+  <common-header
     v-if="showHeader"
     :showLogo="showHeaderLogo"
     :theme="mode"
@@ -14,14 +14,14 @@
 <script lang="ts">
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
-import LHeader from './Header.vue';
+import CommonHeader from './Header.vue';
 
 import { SettingType } from '@/interface';
 
 export default Vue.extend({
   name: 'LayoutHeader',
   components: {
-    LHeader,
+    CommonHeader,
   },
   computed: {
     ...mapGetters({

src/layouts/components/LayoutSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <l-side-nav
+  <side-nav
     v-if="showSidebar"
     :showLogo="showSidebarLogo"
     :layout="setting.layout"
@@ -14,14 +14,14 @@
 <script lang="ts">
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
-import LSideNav from './SideNav.vue';
+import SideNav from './SideNav.vue';
 
 import { SettingType } from '@/interface';
 
 export default Vue.extend({
   name: 'LayoutSidebar',
   components: {
-    LSideNav,
+    SideNav,
   },
   computed: {
     ...mapGetters({

src/pages/dashboard/detail/index.vue

@@ -21,7 +21,7 @@
         <t-card :class="{ 'dashboard-detail-card': true }" title="采购商品申请趋势" subtitle="(件)">
           <template #actions>
             <t-date-range-picker
-              style="width: 240px"
+              style="width: 250px"
               :default-value="LAST_7_DAYS"
               theme="primary"
               mode="date"
@@ -43,7 +43,7 @@
     <t-card :class="{ 'dashboard-detail-card': true }" title="采购商品满意度分布" class="row-margin">
       <template #actions>
         <t-date-range-picker
-          style="display: inline-block; margin-right: 8px; width: 240px"
+          style="display: inline-block; margin-right: 8px; width: 250px"
           :defaultValue="LAST_7_DAYS"
           theme="primary"
           mode="date"

src/style/reset.less

@@ -75,5 +75,5 @@ a {
 }
 
 .card-date-picker-container {
-  width: 240px;
+  width: 250px;
 }