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

This commit is contained in:
Uyarn 2022-08-08 19:13:23 +08:00
commit 94dae4d62c
7 changed files with 88 additions and 15 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,4 +1,5 @@
import { useRoute, createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; import { useRoute, createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import uniq from 'lodash/uniq';
// 自动导入modules文件夹下所有ts文件 // 自动导入modules文件夹下所有ts文件
const modules = import.meta.globEager('./modules/**/*.ts'); const modules = import.meta.globEager('./modules/**/*.ts');
@ -27,7 +28,6 @@ const defaultRouterList: Array<RouteRecordRaw> = [
{ {
path: '/', path: '/',
redirect: '/dashboard/base', redirect: '/dashboard/base',
component: () => import('@/layouts/blank.vue'),
}, },
{ {
path: '/:w+', path: '/:w+',
@ -38,6 +38,25 @@ const defaultRouterList: Array<RouteRecordRaw> = [
export const allRoutes = [...defaultRouterList, ...asyncRouterList]; 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 => { export const getActive = (maxLevel = 3): string => {
const route = useRoute(); const route = useRoute();
if (!route.path) { if (!route.path) {