Merge branch 'develop' of github.com:Tencent/tdesign-vue-next-starter into main

.eslintrc

@@ -2,6 +2,7 @@
   "extends": [
     "plugin:@typescript-eslint/recommended",
     "eslint-config-airbnb-base",
+    "@vue/typescript/recommended",
     "plugin:vue/vue3-recommended",
     "plugin:vue-scoped-css/base",
     "plugin:prettier/recommended"

.vscode/settings.json

@@ -20,5 +20,6 @@
   "[javascript]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  }
+  },
+  "cSpell.words": ["tdesign", "tvision", "echarts", "nprogress", "commitlint", "stylelint", "pinia", "qrcode"]
 }

README.md

@@ -17,7 +17,7 @@
 
 ### 项目简介
 
-TDesign Vue Next Starter 是一个基于 TDesign。使用 `Vue3`、`Vite2`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
+TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite2`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
 
 <p>
   <a href="http://tdesign.tencent.com/starter/vue-next/">在线预览</a>

package.json

@@ -27,15 +27,15 @@
     "qrcode.vue": "^3.2.2",
     "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",
-    "tdesign-vue-next": "0.18.0",
+    "tdesign-vue-next": "0.18.1",
     "tvision-color": "^1.3.1",
     "vue": "^3.2.31",
     "vue-clipboard3": "^2.0.0",
     "vue-router": "~4.0.11"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.2.1",
+    "@commitlint/cli": "^17.0.3",
-    "@commitlint/config-conventional": "^16.2.1",
+    "@commitlint/config-conventional": "^17.0.3",
     "@types/echarts": "^4.9.10",
     "@types/lodash": "^4.14.182",
     "@types/qs": "^6.9.7",
@@ -45,6 +45,7 @@
     "@vitejs/plugin-vue": "^2.3.1",
     "@vitejs/plugin-vue-jsx": "^1.1.7",
     "@vue/compiler-sfc": "^3.0.5",
+    "@vue/eslint-config-typescript": "^11.0.0",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.32.0",
@@ -52,7 +53,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.16.0",
+    "eslint-plugin-vue": "^9.2.0",
     "eslint-plugin-vue-scoped-css": "^2.2.0",
     "husky": "^7.0.4",
     "less": "^4.1.1",

src/layouts/components/Header.vue

@@ -3,7 +3,7 @@
     <t-head-menu :class="menuCls" :theme="theme" expand-type="popup" :value="active">
       <template #logo>
         <span v-if="showLogo" class="header-logo-container" @click="handleNav('/dashboard/base')">
-          <LogoFull class="t-logo" />
+          <logo-full class="t-logo" />
         </span>
         <div v-else class="header-operate-left">
           <t-button theme="default" shape="square" variant="text" @click="changeCollapsed">
@@ -12,7 +12,7 @@
           <search :layout="layout" />
         </div>
       </template>
-      <MenuContent v-show="layout !== 'side'" class="header-menu" :nav-data="menu" />
+      <menu-content v-show="layout !== 'side'" class="header-menu" :nav-data="menu" />
       <template #operations>
         <div class="operations-container">
           <!-- 搜索框 -->

src/layouts/components/SideNav.tsx

@@ -3,8 +3,8 @@ import { useRouter } from 'vue-router';
 import { prefix } from '@/config/global';
 import pgk from '../../../package.json';
 import MenuContent from './MenuContent';
-import tLogo from '@/assets/assets-t-logo.svg?component';
+import AssetLogo from '@/assets/assets-t-logo.svg?component';
-import tLogoFull from '@/assets/assets-logo-full.svg?component';
+import AssetLogoFull from '@/assets/assets-logo-full.svg?component';
 import { useSettingStore } from '@/store';
 import { getActive } from '@/router';
 
@@ -61,8 +61,9 @@ const useComputed = (props) => {
 export default defineComponent({
   name: 'SideNav',
   components: {
-    tLogoFull,
+    AssetLogoFull,
-    tLogo,
+    AssetLogo,
+    MenuContent,
   },
   props: {
     menu: {
@@ -144,9 +145,9 @@ export default defineComponent({
               this.showLogo && (
                 <span class={`${prefix}-side-nav-logo-wrapper`} onClick={this.goHome}>
                   {this.collapsed ? (
-                    <tLogo class={`${prefix}-side-nav-logo-t-logo`} />
+                    <asset-logo class={`${prefix}-side-nav-logo-t-logo`} />
                   ) : (
-                    <t-logo-full class={`${prefix}-side-nav-logo-tdesign-logo`} />
+                    <asset-logo-full class={`${prefix}-side-nav-logo-tdesign-logo`} />
                   )}
                 </span>
               ),
@@ -157,7 +158,7 @@ export default defineComponent({
             ),
           }}
         >
-          <MenuContent navData={this.menu} />
+          <menu-content navData={this.menu} />
         </t-menu>
         <div class={`${prefix}-side-nav-placeholder${this.collapsed ? '-hidden' : ''}`}></div>
       </div>

src/layouts/setting.vue

@@ -54,7 +54,7 @@
                 :value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]"
                 class="setting-layout-color-group dynamic-color-btn"
               >
-                <ColorContainer :value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]" />
+                <color-container :value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]" />
               </t-radio-button>
             </t-popup>
           </div>
@@ -64,7 +64,7 @@
         <t-radio-group v-model="formData.layout">
           <div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer">
             <t-radio-button :key="index" :value="item">
-              <Thumbnail :src="getThumbnailUrl(item)" />
+              <thumbnail :src="getThumbnailUrl(item)" />
             </t-radio-button>
           </div>
         </t-radio-group>

src/pages/dashboard/base/index.vue

@@ -7,7 +7,7 @@
     <!-- 列表排名 -->
     <rank-list class="row-container" />
     <!-- 出入库概览 -->
-    <over-view class="row-container" />
+    <output-overview class="row-container" />
   </div>
 </template>
 
@@ -18,10 +18,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import TopPanel from './components/top-panel.vue';
+import TopPanel from './components/TopPanel.vue';
-import MiddleChart from './components/middle-chart.vue';
+import MiddleChart from './components/MiddleChart.vue';
-import RankList from './components/rank-list.vue';
+import RankList from './components/RankList.vue';
-import OverView from './components/overview.vue';
+import OutputOverview from './components/OutputOverview.vue';
 </script>
 
 <style scoped>

src/style/reset.less

@@ -42,7 +42,6 @@ p {
 a {
   color: var(--td-brand-color);
   text-decoration: none;
-  margin-right: @spacer-3;
   cursor: pointer;
   transition: color @anim-duration-base @anim-time-fn-easing;
 
@@ -61,6 +60,10 @@ a {
   &:focus {
     text-decoration: none;
   }
+}
+
+.t-button-link {
+  margin-right: @spacer-3;
 
   &:last-child {
     margin-right: 0;