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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-vue-next-starter",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",
@@ -27,11 +27,11 @@
     "qrcode.vue": "^3.2.2",
     "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",
-    "tdesign-vue-next": "0.18.1",
+    "tdesign-vue-next": "0.19.0",
     "tvision-color": "^1.3.1",
     "vue": "^3.2.31",
     "vue-clipboard3": "^2.0.0",
-    "vue-router": "~4.0.11"
+    "vue-router": "~4.1.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",

src/layouts/components/Content.vue

@@ -2,7 +2,7 @@
   <router-view v-if="!isRefreshing" v-slot="{ Component }">
     <transition name="fade" mode="out-in">
       <keep-alive :include="aliveViews">
-        <component :is="Component" />
+        <component :is="Component" :key="activeRouteFullPath" />
       </keep-alive>
     </transition>
   </router-view>
@@ -10,8 +10,14 @@
 
 <script setup lang="ts">
 import { computed, ComputedRef } from 'vue';
+import { useRouter } from 'vue-router';
 import { useTabsRouterStore } from '@/store';
 
+const activeRouteFullPath = computed(() => {
+  const router = useRouter();
+  return router.currentRoute.value.fullPath;
+});
+
 const aliveViews = computed(() => {
   const tabsRouterStore = useTabsRouterStore();
   const { tabRouters } = tabsRouterStore;

src/layouts/components/SideNav.tsx

@@ -1,12 +1,13 @@
 import { defineComponent, PropType, computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
+import union from 'lodash/union';
 import { prefix } from '@/config/global';
 import pgk from '../../../package.json';
 import MenuContent from './MenuContent';
 import AssetLogo from '@/assets/assets-t-logo.svg?component';
 import AssetLogoFull from '@/assets/assets-logo-full.svg?component';
 import { useSettingStore } from '@/store';
-import { getActive } from '@/router';
+import { getActive, getRoutesExpanded } from '@/router';
 
 const MIN_POINT = 992 - 1;
 
@@ -18,7 +19,8 @@ const useComputed = (props) => {
   const defaultExpanded = computed(() => {
     const path = getActive();
     const parentPath = path.substring(0, path.lastIndexOf('/'));
-    return parentPath === '' ? [] : [parentPath];
+    const expanded = getRoutesExpanded();
+    return union(expanded, parentPath === '' ? [] : [parentPath]);
   });
 
   const sideNavCls = computed(() => {

src/pages/dashboard/base/components/MiddleChart.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
+import { onMounted, watch, ref, onUnmounted, nextTick, computed, onDeactivated } from 'vue';
 
 import * as echarts from 'echarts/core';
 import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
@@ -127,16 +127,37 @@ onUnmounted(() => {
   window.removeEventListener('resize', updateContainer);
 });
 
+onDeactivated(() => {
+  storeModeWatch();
+  storeBrandThemeWatch();
+  storeSidebarCompactWatch();
+});
+
 const currentMonth = ref(getThisMonth());
 
-watch(
+const storeBrandThemeWatch = watch(
   () => store.brandTheme,
   () => {
     changeChartsTheme([monitorChart, countChart]);
   },
 );
 
-watch(
+const storeSidebarCompactWatch = watch(
+  () => store.isSidebarCompact,
+  () => {
+    if (store.isSidebarCompact) {
+      nextTick(() => {
+        updateContainer();
+      });
+    } else {
+      setTimeout(() => {
+        updateContainer();
+      }, 180);
+    }
+  },
+);
+
+const storeModeWatch = watch(
   () => store.mode,
   () => {
     [monitorChart, countChart].forEach((item) => {

src/pages/dashboard/detail/index.vue

@@ -65,7 +65,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
+import { nextTick, onMounted, onUnmounted, watch, computed, onDeactivated } from 'vue';
 
 import * as echarts from 'echarts/core';
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
@@ -133,14 +133,19 @@ onUnmounted(() => {
   window.removeEventListener('resize', updateContainer);
 });
 
-watch(
+onDeactivated(() => {
+  storeModeWatch();
+  storeBrandThemeWatch();
+});
+
+const storeModeWatch = watch(
   () => store.mode,
   () => {
     renderCharts();
   },
 );
 
-watch(
+const storeBrandThemeWatch = watch(
   () => store.brandTheme,
   () => {
     changeChartsTheme([lineChart, scatterChart]);

src/pages/login/components/Login.vue

@@ -50,9 +50,17 @@
 
     <!-- 手机号登陆 -->
     <template v-else>
+      <t-form-item name="phone">
+        <t-input v-model="formData.phone" size="large" placeholder="请输入手机号码">
+          <template #prefix-icon>
+            <t-icon name="mobile" />
+          </template>
+        </t-input>
+      </t-form-item>
+
       <t-form-item class="verification-code" name="verifyCode">
         <t-input v-model="formData.verifyCode" size="large" placeholder="请输入验证码" />
-        <t-button variant="outline" :disabled="countDown > 0" @click="handleCounter">
+        <t-button variant="outline" :disabled="countDown > 0" @click="sendCode">
           {{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
         </t-button>
       </t-form-item>
@@ -74,7 +82,7 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import QrcodeVue from 'qrcode.vue';
-import { MessagePlugin } from 'tdesign-vue-next';
+import { FormInstanceFunctions, MessagePlugin } from 'tdesign-vue-next';
 import { useCounter } from '@/hooks';
 import { useUserStore } from '@/store';
 
@@ -97,6 +105,7 @@ const FORM_RULES = {
 
 const type = ref('password');
 
+const form = ref<FormInstanceFunctions>();
 const formData = ref({ ...INITIAL_DATA });
 const showPsw = ref(false);
 
@@ -108,6 +117,17 @@ const switchType = (val: string) => {
 
 const router = useRouter();
 
+/**
+ * 发送验证码
+ */
+const sendCode = () => {
+  form.value.validate({ fields: ['phone'] }).then((e) => {
+    if (e === true) {
+      handleCounter();
+    }
+  });
+};
+
 const onSubmit = async ({ validateResult }) => {
   if (validateResult === true) {
     try {

src/router/index.ts

@@ -1,4 +1,5 @@
 import { useRoute, createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import uniq from 'lodash/uniq';
 
 // 自动导入modules文件夹下所有ts文件
 const modules = import.meta.globEager('./modules/**/*.ts');
@@ -27,7 +28,6 @@ const defaultRouterList: Array<RouteRecordRaw> = [
   {
     path: '/',
     redirect: '/dashboard/base',
-    component: () => import('@/layouts/blank.vue'),
   },
   {
     path: '/:w+',
@@ -38,6 +38,25 @@ const defaultRouterList: Array<RouteRecordRaw> = [
 
 export const allRoutes = [...defaultRouterList, ...asyncRouterList];
 
+export const getRoutesExpanded = () => {
+  const expandedRoutes = [];
+
+  allRoutes.forEach((item) => {
+    if (item.meta && item.meta.expanded) {
+      expandedRoutes.push(item.path);
+    }
+    if (item.children && item.children.length > 0) {
+      item.children
+        .filter((child) => child.meta && child.meta.expanded)
+        .forEach((child: RouteRecordRaw) => {
+          expandedRoutes.push(item.path);
+          expandedRoutes.push(`${item.path}/${child.path}`);
+        });
+    }
+  });
+  return uniq(expandedRoutes);
+};
+
 export const getActive = (maxLevel = 3): string => {
   const route = useRoute();
   if (!route.path) {