Merge pull request #708 from Tencent/develop

Tencent · Apr 2, 2024 · ce285fa · ce285fa
2 parents 8d8d126 + 5637f54
commit ce285fa
Show file tree

Hide file tree

Showing 32 changed files with 225 additions and 275 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   // 一行最多 120 字符..
   printWidth: 120,
   // 使用 2 个空格缩进

diff --git a/commitlint.config.js b/commitlint.config.js
@@ -1,5 +1,5 @@
 // commit-lint config
-module.exports = {
+export default {
   extends: ['@commitlint/config-conventional'],
   rules: {
     'type-enum': [

diff --git a/package.json b/package.json
@@ -1,12 +1,14 @@
 {
   "name": "@tencent/tdesign-vue-next-starter",
-  "version": "0.9.0",
+  "version": "0.10.0",
+  "type": "module",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",
     "dev:linux": "vite --mode development",
     "build:test": "vite build --mode test",
     "build": "vue-tsc --noEmit && vite build --mode release",
+    "build:type": "vue-tsc --noEmit",
     "build:site": "vue-tsc --noEmit && vite build --mode site",
     "preview": "vite preview",
     "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
@@ -19,61 +21,61 @@
     "test:coverage": "echo \"no test:coverage specified,work in process\""
   },
   "dependencies": {
-    "@vueuse/core": "^10.6.1",
-    "axios": "^1.6.2",
+    "@vueuse/core": "^10.7.2",
+    "axios": "^1.6.7",
     "dayjs": "^1.11.10",
-    "echarts": "5.1.2",
+    "echarts": "5.4.3",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
     "qrcode.vue": "^3.4.1",
     "qs": "^6.11.2",
     "tdesign-icons-vue-next": "^0.2.2",
-    "tdesign-vue-next": "^1.6.8",
+    "tdesign-vue-next": "^1.9.3",
     "tvision-color": "^1.6.0",
-    "vue": "~3.3.8",
-    "vue-i18n": "^9.6.5",
-    "vue-router": "~4.2.4"
+    "vue": "~3.4.21",
+    "vue-i18n": "^9.9.1",
+    "vue-router": "~4.3.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.1",
-    "@commitlint/config-conventional": "^18.4.0",
+    "@commitlint/cli": "^18.6.0",
+    "@commitlint/config-conventional": "^18.6.0",
     "@types/echarts": "^4.9.21",
     "@types/lodash": "^4.14.201",
     "@types/nprogress": "^0.2.3",
-    "@types/qs": "^6.9.10",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "@vitejs/plugin-vue": "^4.4.1",
+    "@types/qs": "^6.9.11",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vue/compiler-sfc": "^3.3.8",
+    "@vue/compiler-sfc": "~3.3.8",
     "@vue/eslint-config-typescript": "^12.0.0",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.53.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-vue": "^9.18.1",
-    "eslint-plugin-vue-scoped-css": "^2.5.1",
-    "husky": "^8.0.3",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-vue": "^9.21.1",
+    "eslint-plugin-vue-scoped-css": "^2.7.2",
+    "husky": "^9.0.10",
     "less": "^4.2.0",
-    "lint-staged": "^15.1.0",
+    "lint-staged": "^15.2.2",
     "mockjs": "^1.1.0",
-    "postcss-html": "^1.5.0",
+    "postcss-html": "^1.6.0",
     "postcss-less": "^6.0.0",
-    "prettier": "^3.1.0",
-    "stylelint": "~15.11.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-order": "~6.0.3",
-    "typescript": "~5.3.2",
-    "vite": "^4.5.0",
-    "vite-plugin-mock": "^3.0.0",
-    "vite-svg-loader": "^4.0.0",
-    "vue-tsc": "^1.8.22"
+    "prettier": "^3.2.5",
+    "stylelint": "~16.2.1",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-order": "~6.0.4",
+    "typescript": "~5.4.3",
+    "vite": "^5.1.0",
+    "vite-plugin-mock": "^3.0.1",
+    "vite-svg-loader": "^5.1.0",
+    "vue-tsc": "^1.8.27"
   },
   "config": {
     "commitizen": {
@@ -90,6 +92,6 @@
     ]
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   }
-}
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <t-config-provider :global-config="getComponentsLocale">
-    <router-view :key="locale" :class="[mode]"
-  /></t-config-provider>
+    <router-view :key="locale" :class="[mode]" />
+  </t-config-provider>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';

diff --git a/src/config/style.ts b/src/config/style.ts
@@ -5,6 +5,7 @@ export default {
   mode: 'light',
   layout: 'side',
   splitMenu: false,
+  sideMode: 'light',
   isFooterAside: false,
   isSidebarFixed: true,
   isHeaderFixed: true,

diff --git a/src/hooks/event/useWindowSizeFn.ts b/src/hooks/event/useWindowSizeFn.ts
diff --git a/src/layouts/components/Content.vue b/src/layouts/components/Content.vue
@@ -1,6 +1,6 @@
 <template>
   <router-view v-if="!isRefreshing" v-slot="{ Component }">
-    <transition name="fade">
+    <transition name="fade" mode="out-in">
       <keep-alive :include="aliveViews">
         <component :is="Component" />
       </keep-alive>
@@ -54,7 +54,7 @@ const isRefreshing = computed(() => {
   transition: opacity @anim-duration-slow @anim-time-fn-easing;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }

diff --git a/src/layouts/components/FrameContent.vue b/src/layouts/components/FrameContent.vue
@@ -6,17 +6,19 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { useWindowSize } from '@vueuse/core';
 import debounce from 'lodash/debounce';
 import { computed, CSSProperties, ref, unref, watch } from 'vue';
 
 import { prefix } from '@/config/global';
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn';
 import { useSettingStore } from '@/store';
 
 defineProps({
   frameSrc: String,
 });
 
+const { width, height } = useWindowSize();
+
 const loading = ref(true);
 const heightRef = ref(window.innerHeight);
 const frameRef = ref<HTMLFrameElement>();
@@ -69,8 +71,8 @@ function hideLoading() {
   calcHeight();
 }
 
-useWindowSizeFn(calcHeight, { immediate: true });
-
+// 如果窗口大小发生变化
+watch([width, height], debounce(calcHeight, 250));
 watch(
   [() => settingStore.showFooter, () => settingStore.isUseTabsRouter, () => settingStore.showBreadcrumb],
   debounce(calcHeight, 250),

diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
@@ -38,9 +38,13 @@
               <translate-icon />
             </t-button>
             <t-dropdown-menu>
-              <t-dropdown-item v-for="(lang, index) in langList" :key="index" :value="lang.value" @click="changeLang">{{
-                lang.content
-              }}</t-dropdown-item></t-dropdown-menu
+              <t-dropdown-item
+                v-for="(lang, index) in langList"
+                :key="index"
+                :value="lang.value"
+                @click="(options) => changeLang(options.value as string)"
+                >{{ lang.content }}</t-dropdown-item
+              ></t-dropdown-menu
             >
           </t-dropdown>
           <t-dropdown :min-column-width="120" trigger="click">
@@ -85,7 +89,7 @@ import { langList } from '@/locales/index';
 import { useLocale } from '@/locales/useLocale';
 import { getActive } from '@/router';
 import { useSettingStore, useUserStore } from '@/store';
-import type { MenuRoute } from '@/types/interface';
+import type { MenuRoute, ModeType } from '@/types/interface';
 
 import MenuContent from './MenuContent.vue';
 import Notice from './Notice.vue';
@@ -147,11 +151,11 @@ const menuCls = computed(() => {
     },
   ];
 });
-const menuTheme = computed(() => props.theme as 'light' | 'dark');
+const menuTheme = computed(() => props.theme as ModeType);
 
 // 切换语言
 const { changeLocale } = useLocale();
-const changeLang = ({ value: lang }: { value: string }) => {
+const changeLang = (lang: string) => {
   changeLocale(lang);
 };
 
@@ -238,7 +242,6 @@ const navToHelper = () => {
   display: flex;
   align-items: normal;
   line-height: 0;
-  padding-left: var(--td-comp-margin-xl);
 }
 
 .header-logo-container {

diff --git a/src/layouts/components/LayoutContent.vue b/src/layouts/components/LayoutContent.vue
@@ -7,7 +7,7 @@
       :class="`${prefix}-layout-tabs-nav`"
       :value="$route.path"
       :style="{ position: 'sticky', top: 0, width: '100%' }"
-      @change="handleChangeCurrentTab"
+      @change="(value) => handleChangeCurrentTab(value as string)"
       @remove="handleRemove"
       @drag-sort="handleDragend"
     >

diff --git a/src/layouts/components/LayoutSideNav.vue b/src/layouts/components/LayoutSideNav.vue
@@ -5,7 +5,7 @@
     :layout="settingStore.layout"
     :is-fixed="settingStore.isSidebarFixed"
     :menu="sideMenu"
-    :theme="settingStore.displayMode"
+    :theme="settingStore.displaySideMode"
     :is-compact="settingStore.isSidebarCompact"
   />
 </template>

diff --git a/src/layouts/components/SideNav.vue b/src/layouts/components/SideNav.vue
@@ -3,12 +3,12 @@
     <t-menu :class="menuCls" :theme="theme" :value="active" :collapsed="collapsed" :default-expanded="defaultExpanded">
       <template #logo>
         <span v-if="showLogo" :class="`${prefix}-side-nav-logo-wrapper`" @click="goHome">
-          <component :is="getLogo()" :class="`${prefix}-side-nav-logo-${collapsed ? 't' : 'tdesign'}-logo`" />
+          <component :is="getLogo()" :class="logoCls" />
         </span>
       </template>
       <menu-content :nav-data="menu" />
       <template #operations>
-        <span class="version-container"> {{ !collapsed ? 'TDesign Starter' : '' }} {{ pgk.version }} </span>
+        <span :class="versionCls"> {{ !collapsed ? 'TDesign Starter' : '' }} {{ pgk.version }} </span>
       </template>
     </t-menu>
     <div :class="`${prefix}-side-nav-placeholder${collapsed ? '-hidden' : ''}`"></div>
@@ -26,7 +26,7 @@ import AssetLogo from '@/assets/assets-t-logo.svg?component';
 import { prefix } from '@/config/global';
 import { getActive, getRoutesExpanded } from '@/router';
 import { useSettingStore } from '@/store';
-import type { MenuRoute } from '@/types/interface';
+import type { MenuRoute, ModeType } from '@/types/interface';
 
 import pgk from '../../../package.json';
 import MenuContent from './MenuContent.vue';
@@ -55,7 +55,7 @@ const props = defineProps({
     default: '64px',
   },
   theme: {
-    type: String as PropType<'light' | 'dark'>,
+    type: String as PropType<ModeType>,
     default: 'light',
   },
   isCompact: {
@@ -75,6 +75,10 @@ const defaultExpanded = computed(() => {
   return union(expanded, parentPath === '' ? [] : [parentPath]);
 });
 
+const sideMode = computed(() => {
+  const { theme } = props;
+  return theme === 'dark';
+});
 const sideNavCls = computed(() => {
   const { isCompact } = props;
   return [
@@ -84,7 +88,22 @@ const sideNavCls = computed(() => {
     },
   ];
 });
-
+const logoCls = computed(() => {
+  return [
+    `${prefix}-side-nav-logo-${collapsed.value ? 't' : 'tdesign'}-logo`,
+    {
+      [`${prefix}-side-nav-dark`]: sideMode.value,
+    },
+  ];
+});
+const versionCls = computed(() => {
+  return [
+    `version-container`,
+    {
+      [`${prefix}-side-nav-dark`]: sideMode.value,
+    },
+  ];
+});
 const menuCls = computed(() => {
   const { showLogo, isFixed, layout } = props;
   return [