image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 18:06:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Uyarn 2023-05-30 11:40:41 +08:00
commit f7fb462479
36 changed files with 519 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
commitlint.config.js
View File

@ -1,2 +1,11 @@
// commit-lint config
module.exports = { extends: ['@commitlint/config-conventional'] };
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'types'],
],
},
};

18
package.json
View File

@ -1,6 +1,6 @@
{
"name": "tdesign-vue-next-starter",
"version": "0.7.5",
"name": "@tencent/tdesign-vue-next-starter",
"version": "0.7.6",
"scripts": {
"dev:mock": "vite --open --mode mock",
"dev": "vite --open --mode development",
@ -28,10 +28,10 @@
"pinia-plugin-persistedstate": "^3.1.0",
"qrcode.vue": "^3.3.4",
"qs": "^6.11.1",
"tdesign-icons-vue-next": "^0.1.8",
"tdesign-theme-generator": "^1.0.4",
"tdesign-vue-next": "^1.3.1",
"tvision-color": "^1.5.0",
"tdesign-icons-vue-next": "^0.1.11",
"tdesign-theme-generator": "^1.0.5",
"tdesign-vue-next": "^1.3.4",
"tvision-color": "^1.6.0",
"vue": "^3.2.47",
"vue-clipboard3": "^2.0.0",
"vue-router": "~4.1.6"
@ -84,12 +84,10 @@
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"prettier --write",
"npm run lint:fix",
"git add ."
"npm run lint:fix"
],
"*.{html,vue,vss,sass,less}": [
"npm run stylelint:fix",
"git add ."
"npm run stylelint:fix"
]
}
}

1
src/config/global.ts
View File

@ -1,2 +1 @@
export const prefix = 'tdesign-starter';
export const TOKEN_NAME = 'tdesign-starter';

14
src/constants/index.ts
View File

@ -34,12 +34,14 @@ export const CONTRACT_PAYMENT_TYPES = {
RECEIPT: 1,
};
// 通知的优先级对应的TAG类型
export const NOTIFICATION_TYPES = {
low: 'primary',
middle: 'warning',
high: 'danger',
};
// 标签类型
type TagTheme = 'default' | 'success' | 'primary' | 'warning' | 'danger';
// 通知的优先级对应的标签类型
export const NOTIFICATION_TYPES: Map<string, TagTheme> = new Map([
['low', 'primary'],
['middle', 'warning'],
['high', 'danger'],
]);
// 通用请求头
export enum ContentTypeEnum {

2
src/hooks/index.ts
View File

@ -39,7 +39,7 @@ export const useChart = (domId: string): Ref<echarts.ECharts> => {
* @returns
*/
export const useCounter = (duration = 60): [Ref<number>, () => void] => {
let intervalTimer;
let intervalTimer: ReturnType<typeof setInterval>;
onUnmounted(() => {
clearInterval(intervalTimer);
});

2
src/layouts/components/Header.vue
View File

@ -130,7 +130,7 @@ const changeCollapsed = () => {
});
};
const handleNav = (url) => {
const handleNav = (url: string) => {
router.push(url);
};

15
src/layouts/components/LayoutContent.vue
View File

@ -24,7 +24,7 @@
:min-column-width="128"
:popup-props="{
overlayClassName: 'route-tabs-dropdown',
onVisibleChange: (visible, ctx) => handleTabMenuClick(visible, ctx, routeItem.path),
onVisibleChange: (visible: boolean, ctx: PopupVisibleChangeContext) => handleTabMenuClick(visible, ctx, routeItem.path),
visible: activeTabPath === routeItem.path,
}"
>
@ -70,12 +70,13 @@
</template>
<script setup lang="ts">
import type { PopupVisibleChangeContext } from 'tdesign-vue-next';
import { computed, nextTick, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { prefix } from '@/config/global';
import { useSettingStore, useTabsRouterStore } from '@/store';
import type { TRouterInfo } from '@/types/interface';
import type { TRouterInfo, TTabRemoveOptions } from '@/types/interface';
import LBreadcrumb from './Breadcrumb.vue';
import LContent from './Content.vue';
@ -95,12 +96,12 @@ const handleChangeCurrentTab = (path: string) => {
router.push({ path, query: route.query });
};
const handleRemove = ({ value: path, index }) => {
const handleRemove = (options: TTabRemoveOptions) => {
const { tabRouters } = tabsRouterStore;
const nextRouter = tabRouters[index + 1] || tabRouters[index - 1];
const nextRouter = tabRouters[options.index + 1] || tabRouters[options.index - 1];
tabsRouterStore.subtractCurrentTabRouter({ path, routeIdx: index });
if (path === route.path) router.push({ path: nextRouter.path, query: nextRouter.query });
tabsRouterStore.subtractCurrentTabRouter({ path: options.value as string, routeIdx: options.index });
if ((options.value as string) === route.path) router.push({ path: nextRouter.path, query: nextRouter.query });
};
const handleRefresh = (route: TRouterInfo, routeIdx: number) => {
@ -147,7 +148,7 @@ const handleOperationEffect = (type: 'other' | 'ahead' | 'behind', routeIndex: n
activeTabPath.value = null;
};
const handleTabMenuClick = (visible: boolean, ctx, path: string) => {
const handleTabMenuClick = (visible: boolean, ctx: PopupVisibleChangeContext, path: string) => {
if (ctx.trigger === 'document') activeTabPath.value = null;
if (visible) activeTabPath.value = path;
};

3
src/layouts/components/LayoutSideNav.vue
View File

@ -16,6 +16,7 @@ import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { usePermissionStore, useSettingStore } from '@/store';
import type { MenuRoute } from '@/types/interface';
import LSideNav from './SideNav.vue';
@ -26,7 +27,7 @@ const { routers: menuRouters } = storeToRefs(permissionStore);
const sideMenu = computed(() => {
const { layout, splitMenu } = settingStore;
let newMenuRouters = menuRouters.value;
let newMenuRouters = menuRouters.value as Array<MenuRoute>;
if (layout === 'mix' && splitMenu) {
newMenuRouters.forEach((menu) => {
if (route.path.indexOf(menu.path) === 0) {

346
src/layouts/setting.vue Normal file
View File

@ -0,0 +1,346 @@
<template>
<t-drawer
v-model:visible="showSettingPanel"
size="408px"
:footer="false"
header="页面配置"
:close-btn="true"
class="setting-drawer-container"
@close-btn-click="handleCloseDrawer"
>
<div class="setting-container">
<t-form ref="form" :data="formData" label-align="left">
<div class="setting-group-title">主题模式</div>
<t-radio-group v-model="formData.mode">
<div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer">
<div>
<t-radio-button :key="index" :value="item.type"
><component :is="getModeIcon(item.type)"
/></t-radio-button>
<p :style="{ textAlign: 'center', marginTop: '8px' }">{{ item.text }}</p>
</div>
</div>
</t-radio-group>
<div class="setting-group-title">主题色</div>
<t-radio-group v-model="formData.brandTheme">
<div v-for="(item, index) in DEFAULT_COLOR_OPTIONS" :key="index" class="setting-layout-drawer">
<t-radio-button :key="index" :value="item" class="setting-layout-color-group">
<color-container :value="item" />
</t-radio-button>
</div>
<div class="setting-layout-drawer">
<t-popup
destroy-on-close
expand-animation
placement="bottom-right"
trigger="click"
:visible="isColoPickerDisplay"
:overlay-style="{ padding: 0 }"
@visible-change="onPopupVisibleChange"
>
<template #content>
<t-color-picker-panel
:on-change="changeColor"
:color-modes="['monochrome']"
format="HEX"
:swatch-colors="[]"
/>
</template>
<t-radio-button :value="dynamicColor" class="setting-layout-color-group dynamic-color-btn">
<color-container :value="dynamicColor" />
</t-radio-button>
</t-popup>
</div>
</t-radio-group>
<div class="setting-group-title">导航布局</div>
<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)" />
</t-radio-button>
</div>
</t-radio-group>
<t-form-item v-show="formData.layout === 'mix'" label="分割菜单（混合模式下有效）" name="splitMenu">
<t-switch v-model="formData.splitMenu" />
</t-form-item>
<t-form-item v-show="formData.layout === 'mix'" label="固定 Sidebar" name="isSidebarFixed">
<t-switch v-model="formData.isSidebarFixed" />
</t-form-item>
<div class="setting-group-title">元素开关</div>
<t-form-item v-show="formData.layout === 'side'" label="显示 Header" name="showHeader">
<t-switch v-model="formData.showHeader" />
</t-form-item>
<t-form-item label="显示 Breadcrumbs" name="showBreadcrumb">
<t-switch v-model="formData.showBreadcrumb" />
</t-form-item>
<t-form-item label="显示 Footer" name="showFooter">
<t-switch v-model="formData.showFooter" />
</t-form-item>
<t-form-item label="使用 多标签Tab页" name="isUseTabsRouter">
<t-switch v-model="formData.isUseTabsRouter"></t-switch>
</t-form-item>
</t-form>
<div class="setting-info">
<p>请复制后手动修改配置文件: /src/config/style.ts</p>
<t-button theme="primary" variant="text" @click="handleCopy"> 复制配置项 </t-button>
</div>
</div>
</t-drawer>
</template>
<script setup lang="ts">
import type { PopupVisibleChangeContext } from 'tdesign-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { computed, onMounted, ref, watchEffect } from 'vue';
import useClipboard from 'vue-clipboard3';
import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
import SettingLightIcon from '@/assets/assets-setting-light.svg';
import ColorContainer from '@/components/color/index.vue';
import Thumbnail from '@/components/thumbnail/index.vue';
import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
import STYLE_CONFIG from '@/config/style';
import { useSettingStore } from '@/store';
const settingStore = useSettingStore();
const LAYOUT_OPTION = ['side', 'top', 'mix'];
const MODE_OPTIONS = [
{ type: 'light', text: '明亮' },
{ type: 'dark', text: '暗黑' },
{ type: 'auto', text: '跟随系统' },
];
const initStyleConfig = () => {
const styleConfig = STYLE_CONFIG;
for (const key in styleConfig) {
if (Object.prototype.hasOwnProperty.call(styleConfig, key)) {
(styleConfig[key as keyof typeof STYLE_CONFIG] as any) = settingStore[key as keyof typeof STYLE_CONFIG];
}
}
return styleConfig;
};
const dynamicColor = computed(() => {
const isDynamic = DEFAULT_COLOR_OPTIONS.indexOf(formData.value.brandTheme) === -1;
return isDynamic ? formData.value.brandTheme : '';
});
const formData = ref({ ...initStyleConfig() });
const isColoPickerDisplay = ref(false);
const showSettingPanel = computed({
get() {
return settingStore.showSettingPanel;
},
set(newVal: boolean) {
settingStore.updateConfig({
showSettingPanel: newVal,
});
},
});
const changeColor = (hex: string) => {
formData.value.brandTheme = hex;
};
onMounted(() => {
document.querySelector('.dynamic-color-btn').addEventListener('click', () => {
isColoPickerDisplay.value = true;
});
});
const onPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
if (!visible && context.trigger === 'document') {
isColoPickerDisplay.value = visible;
}
};
const handleCopy = () => {
const text = JSON.stringify(formData.value, null, 4);
const { toClipboard } = useClipboard();
toClipboard(text)
.then(() => {
MessagePlugin.closeAll();
MessagePlugin.success('复制成功');
})
.catch(() => {
MessagePlugin.closeAll();
MessagePlugin.error('复制失败');
});
};
const getModeIcon = (mode: string) => {
if (mode === 'light') {
return SettingLightIcon;
}
if (mode === 'dark') {
return SettingDarkIcon;
}
return SettingAutoIcon;
};
const handleCloseDrawer = () => {
settingStore.updateConfig({
showSettingPanel: false,
});
};
const getThumbnailUrl = (name: string): string => {
return `https://tdesign.gtimg.com/tdesign-pro/setting/${name}.png`;
};
watchEffect(() => {
if (formData.value.brandTheme) settingStore.updateConfig(formData.value);
});
</script>
<!-- teleport导致drawer 内 scoped样式问题无法生效 先规避下 -->
<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
<style lang="less">
.tdesign-setting {
z-index: 100;
position: fixed;
bottom: 200px;
right: 0;
transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), visibility 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
height: 40px;
width: 40px;
border-radius: 20px 0 0 20px;
transition: all 0.3s;
.t-icon {
margin-left: 8px;
}
.tdesign-setting-text {
font-size: 12px;
display: none;
}
&:hover {
width: 96px;
.tdesign-setting-text {
display: inline-block;
}
}
}
.setting-layout-color-group {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50% !important;
padding: 6px !important;
border: 2px solid transparent !important;
> .t-radio-button__label {
display: inline-flex;
}
}
.tdesign-setting-close {
position: fixed;
bottom: 200px;
right: 300px;
}
.setting-group-title {
font-size: 14px;
line-height: 22px;
margin: 32px 0 24px 0;
text-align: left;
font-family: PingFang SC;
font-style: normal;
font-weight: 500;
color: var(--td-text-color-primary);
}
.setting-link {
cursor: pointer;
color: var(--td-brand-color);
margin-bottom: 8px;
}
.setting-info {
position: absolute;
padding: 24px;
bottom: 0;
left: 0;
line-height: 20px;
font-size: 12px;
text-align: center;
color: var(--td-text-color-placeholder);
width: 100%;
background: var(--td-bg-color-container);
}
.setting-drawer-container {
.setting-container {
padding-bottom: 100px;
}
.t-radio-group.t-size-m {
min-height: 32px;
width: 100%;
justify-content: space-between;
align-items: center;
}
.t-radio-group.t-size-m .t-radio-button {
height: auto;
}
.setting-layout-drawer {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 16px;
.t-radio-button {
display: inline-flex;
max-height: 78px;
padding: 8px;
border-radius: var(--td-radius-default);
border: 2px solid var(--td-component-border);
> .t-radio-button__label {
display: inline-flex;
}
}
.t-is-checked {
border: 2px solid var(--td-brand-color) !important;
}
.t-form__controls-content {
justify-content: end;
}
}
.t-form__controls-content {
justify-content: end;
}
}
.setting-route-theme {
.t-form__label {
min-width: 310px !important;
color: var(--td-text-color-secondary);
}
}
.setting-color-theme {
.setting-layout-drawer {
.t-radio-button {
height: 32px;
}
&:last-child {
margin-right: 0;
}
}
}
</style>

3
src/pages/dashboard/base/index.ts
View File

@ -1,4 +1,5 @@
import dayjs from 'dayjs';
import { EChartsOption } from 'echarts';
import { TChartColor } from '@/config/color';
import { getRandomArray } from '@/utils/charts';
@ -307,7 +308,7 @@ export function getPieChartDataSet({
textColor,
placeholderColor,
containerColor,
}: { radius?: number } & Record<string, string>) {
}: { radius?: number } & Record<string, string>): EChartsOption {
return {
color: getChartListColor(),
tooltip: {

8
src/pages/detail/advanced/constants.ts
View File

@ -83,14 +83,14 @@ export const TABLE_COLUMNS_DATA = [
ellipsis: true,
colKey: 'index',
title: '申请号',
sorter: (a, b) => a.index.substr(3) - b.index.substr(3),
sorter: (a: any, b: any) => a.index.substr(3) - b.index.substr(3),
},
{
width: 200,
ellipsis: true,
colKey: 'pdName',
title: '产品名称',
sorter: (a, b) => a.pdName.length - b.pdName.length,
sorter: (a: any, b: any) => a.pdName.length - b.pdName.length,
},
{
width: 200,
@ -103,7 +103,7 @@ export const TABLE_COLUMNS_DATA = [
ellipsis: true,
colKey: 'purchaseNum',
title: '采购数量',
sorter: (a, b) => a.purchaseNum - b.purchaseNum,
sorter: (a: any, b: any) => a.purchaseNum - b.purchaseNum,
},
{
width: 160,
@ -116,7 +116,7 @@ export const TABLE_COLUMNS_DATA = [
ellipsis: true,
colKey: 'updateTime',
title: '创建时间',
sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
sorter: (a: any, b: any) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
},
{
align: 'left' as const,

6
src/pages/detail/advanced/index.vue
View File

@ -170,16 +170,16 @@ onMounted(() => {
});
const visible = ref(false);
const sortChange = (val) => {
const sortChange = (val: unknown) => {
console.log(val);
};
const rehandleChange = (changeParams, triggerAndData) => {
const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
console.log('统一Change', changeParams, triggerAndData);
};
const listClick = () => {
visible.value = true;
};
const deleteClickOp = (columns) => {
const deleteClickOp = (columns: { rowIndex: number }) => {
data.value.splice(columns.rowIndex, 1);
};
const onConfirm = () => {

4
src/pages/detail/deploy/constants.ts
View File

@ -87,7 +87,7 @@ export const TABLE_COLUMNS = [
ellipsis: true,
colKey: 'name',
title: '项目名称',
sorter: (a, b) => a.name.substr(10) - b.name.substr(10),
sorter: (a: any, b: any) => a.name.substr(10) - b.name.substr(10),
},
{
width: '280',
@ -101,7 +101,7 @@ export const TABLE_COLUMNS = [
ellipsis: true,
colKey: 'updateTime',
title: '创建时间',
sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
sorter: (a: any, b: any) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
},
{
align: 'left' as const,

9
src/pages/detail/deploy/index.vue
View File

@ -147,8 +147,6 @@ onMounted(() => {
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
});
const intervalTimer = null;
/// / chartSize update
const updateContainer = () => {
monitorChart.resize({
@ -163,7 +161,6 @@ const updateContainer = () => {
onUnmounted(() => {
window.removeEventListener('resize', updateContainer);
clearInterval(intervalTimer);
});
const onAlertChange = () => {
@ -182,10 +179,10 @@ watch(
},
);
const sortChange = (val) => {
const sortChange = (val: unknown) => {
console.log(val);
};
const rehandleChange = (changeParams, triggerAndData) => {
const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
console.log('统一Change', changeParams, triggerAndData);
};
const listClick = () => {
@ -194,7 +191,7 @@ const listClick = () => {
const onConfirm = () => {
visible.value = false;
};
const deleteClickOp = (e) => {
const deleteClickOp = (e: { rowIndex: number }) => {
data.value.splice(e.rowIndex, 1);
};
</script>

2
src/pages/detail/secondary/index.vue
View File

@ -6,7 +6,7 @@
<t-list v-if="msgDataList.length > 0" class="secondary-msg-list" :split="true">
<t-list-item v-for="(item, index) in msgDataList" :key="index">
<p :class="['content', { unread: item.status }]" @click="setReadStatus(item)">
<t-tag size="medium" :theme="NOTIFICATION_TYPES[item.quality]" variant="light">
<t-tag size="medium" :theme="NOTIFICATION_TYPES.get(item.quality)" variant="light">
{{ item.type }}
</t-tag>
{{ item.content }}

4
src/pages/form/base/constants.ts
View File

@ -1,4 +1,4 @@
import { FormRule } from 'tdesign-vue-next';
import type { FormRule, UploadFile } from 'tdesign-vue-next';
export const FORM_RULES: Record<string, FormRule[]> = {
name: [{ required: true, message: '请输入合同名称', type: 'error' }],
@ -23,7 +23,7 @@ export const INITIAL_DATA = {
payment: '1',
amount: 0,
comment: '',
files: [],
files: [] as Array<UploadFile>,
};
export const TYPE_OPTIONS = [

13
src/pages/form/base/index.vue
View File

@ -164,6 +164,7 @@ export default {
</script>
<script setup lang="ts">
import type { SubmitContext, UploadFailContext, UploadFile } from 'tdesign-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref } from 'vue';
@ -174,12 +175,12 @@ const formData = ref({ ...INITIAL_DATA });
const onReset = () => {
MessagePlugin.warning('取消新建');
};
const onSubmit = ({ validateResult }) => {
if (validateResult === true) {
const onSubmit = (ctx: SubmitContext) => {
if (ctx.validateResult === true) {
MessagePlugin.success('新建成功');
}
};
const beforeUpload = (file) => {
const beforeUpload = (file: UploadFile) => {
if (!/\.(pdf)$/.test(file.name)) {
MessagePlugin.warning('请上传pdf文件');
return false;
@ -190,11 +191,11 @@ const beforeUpload = (file) => {
}
return true;
};
const handleFail = ({ file }) => {
MessagePlugin.error(`文件 ${file.name} 上传失败`);
const handleFail = (options: UploadFailContext) => {
MessagePlugin.error(`文件 ${options.file.name} 上传失败`);
};
// 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
const formatResponse = (res) => {
const formatResponse = (res: any) => {
return { ...res, error: '上传失败，请重试', url: res.url };
};
</script>

10
src/pages/form/step/index.vue
View File

@ -29,7 +29,7 @@
:data="formData1"
:rules="FORM_RULES"
label-align="right"
@submit="(result) => onSubmit(result, 1)"
@submit="(result: SubmitContext) => onSubmit(result, 1)"
>
<t-form-item label="合同名称" name="name">
<t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable>
@ -59,7 +59,7 @@
:rules="FORM_RULES"
label-align="left"
@reset="onReset(0)"
@submit="(result) => onSubmit(result, 2)"
@submit="(result: SubmitContext) => onSubmit(result, 2)"
>
<t-form-item label="发票抬头" name="title">
<t-input v-model="formData2.title" :style="{ width: '480px' }" placeholder="请输入发票抬头" />
@ -96,7 +96,7 @@
:rules="FORM_RULES"
label-align="left"
@reset="onReset(1)"
@submit="(result) => onSubmit(result, 6)"
@submit="(result: SubmitContext) => onSubmit(result, 6)"
>
<t-form-item label="收货人" name="consignee">
<t-input v-model="formData3.consignee" :style="{ width: '480px' }" placeholder="请输入收货人" />
@ -147,7 +147,7 @@ export default {
</script>
<script setup lang="ts">
import { Data, SubmitContext } from 'tdesign-vue-next';
import { SubmitContext } from 'tdesign-vue-next';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
@ -179,7 +179,7 @@ const amount = computed(() => {
return '--';
});
const onSubmit = (result: SubmitContext<Data>, val: number) => {
const onSubmit = (result: SubmitContext, val: number) => {
if (result.validateResult === true) {
activeForm.value = val;
}

4
src/pages/list/base/index.vue
View File

@ -160,10 +160,10 @@ const rowKey = 'index';
const rehandleSelectChange = (val: number[]) => {
selectedRowKeys.value = val;
};
const rehandlePageChange = (curr, pageInfo) => {
const rehandlePageChange = (curr: unknown, pageInfo: unknown) => {
console.log('分页变化', curr, pageInfo);
};
const rehandleChange = (changeParams, triggerAndData) => {
const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
console.log('统一Change', changeParams, triggerAndData);
};
const handleClickDetail = () => {

28
src/pages/list/card/index.vue
View File

@ -73,15 +73,26 @@ import { MessagePlugin } from 'tdesign-vue-next';
import { computed, onMounted, ref } from 'vue';
import { getCardList } from '@/api/list';
import type { CardProductType } from '@/components/product-card/index.vue';
import ProductCard from '@/components/product-card/index.vue';
import DialogForm from './components/DialogForm.vue';
const INITIAL_DATA = {
interface FormData {
name: string;
status: string;
description: string;
type: number;
mark: string;
amount: number;
[key: string]: unknown;
}
const INITIAL_DATA: FormData = {
name: '',
status: '',
description: '',
type: '',
type: 0,
mark: '',
amount: 0,
};
@ -127,7 +138,7 @@ const onPageSizeChange = (size: number) => {
const onCurrentChange = (current: number) => {
pagination.value.current = current;
};
const handleDeleteItem = (product) => {
const handleDeleteItem = (product: CardProductType) => {
confirmVisible.value = true;
deleteProduct.value = product;
};
@ -141,9 +152,16 @@ const onCancel = () => {
deleteProduct.value = undefined;
formData.value = { ...INITIAL_DATA };
};
const handleManageProduct = (product) => {
const handleManageProduct = (product: CardProductType) => {
formDialogVisible.value = true;
formData.value = { ...product, status: product?.isSetup ? '1' : '0' };
formData.value = {
name: product.name,
status: product?.isSetup ? '1' : '0',
description: product.description,
type: product.type,
mark: '',
amount: 0,
};
};
</script>

20
src/pages/list/components/CommonTable.vue
View File

@ -122,7 +122,7 @@ import { useSettingStore } from '@/store';
const store = useSettingStore();
const COLUMNS: PrimaryTableCol<TableRowData>[] = [
const COLUMNS: PrimaryTableCol[] = [
{
title: '合同名称',
fixed: 'left',
@ -167,8 +167,8 @@ const COLUMNS: PrimaryTableCol<TableRowData>[] = [
const searchForm = {
name: '',
no: undefined,
status: undefined,
no: '',
status: typeof CONTRACT_STATUS,
type: '',
};
@ -233,24 +233,24 @@ onMounted(() => {
fetchData();
});
const handleClickDelete = ({ row }) => {
deleteIdx.value = row.rowIndex;
const handleClickDelete = (slot: { row: { rowIndex: number } }) => {
deleteIdx.value = slot.row.rowIndex;
confirmVisible.value = true;
};
const onReset = (val) => {
const onReset = (val: unknown) => {
console.log(val);
};
const onSubmit = (val) => {
const onSubmit = (val: unknown) => {
console.log(val);
};
const rehandlePageChange = (pageInfo: PageInfo, newDataSource: TableRowData[]) => {
console.log('分页变化', pageInfo, newDataSource);
};
const rehandleChange = (changeParams, triggerAndData) => {
const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
console.log('统一Change', changeParams, triggerAndData);
};
const rehandleClickOp = ({ text, row }) => {
console.log(text, row);
const rehandleClickOp = (ctx: unknown) => {
console.log(ctx);
};
const headerAffixedTop = computed(

6
src/pages/list/tree/index.vue
View File

@ -24,6 +24,7 @@ export default {
<script setup lang="ts">
import { SearchIcon } from 'tdesign-icons-vue-next';
import type { TreeNodeModel } from 'tdesign-vue-next';
import { ref } from 'vue';
import CommonTable from '../components/CommonTable.vue';
@ -35,9 +36,8 @@ const filterText = ref();
const expanded = ['0', '0-0', '0-1', '0-2', '0-3', '0-4'];
const onInput = () => {
filterByText.value = (node) => {
const rs = node.label.indexOf(filterText.value) >= 0;
return rs;
filterByText.value = (node: TreeNodeModel) => {
return node.label.indexOf(filterText.value) >= 0;
};
};
</script>

6
src/pages/login/components/Login.vue
View File

@ -80,7 +80,7 @@
<script setup lang="ts">
import QrcodeVue from 'qrcode.vue';
import type { FormInstanceFunctions, FormRule } from 'tdesign-vue-next';
import type { FormInstanceFunctions, FormRule, SubmitContext } from 'tdesign-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
@ -131,8 +131,8 @@ const sendCode = () => {
});
};
const onSubmit = async ({ validateResult }) => {
if (validateResult === true) {
const onSubmit = async (ctx: SubmitContext) => {
if (ctx.validateResult === true) {
try {
await userStore.login(formData.value);

9
src/pages/login/components/Register.vue
View File

@ -71,7 +71,8 @@
</template>
<script setup lang="ts">
import { FormRule, MessagePlugin } from 'tdesign-vue-next';
import type { FormRule, SubmitContext } from 'tdesign-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref } from 'vue';
import { useCounter } from '@/hooks';
@ -105,8 +106,8 @@ const [countDown, handleCounter] = useCounter();
const emit = defineEmits(['registerSuccess']);
const onSubmit = ({ validateResult }) => {
if (validateResult === true) {
const onSubmit = (ctx: SubmitContext) => {
if (ctx.validateResult === true) {
if (!formData.value.checked) {
MessagePlugin.error('请同意TDesign服务协议和TDesign 隐私声明');
return;
@ -116,7 +117,7 @@ const onSubmit = ({ validateResult }) => {
}
};
const switchType = (val) => {
const switchType = (val: string) => {
form.value.reset();
type.value = val;
};

8
src/pages/user/constants.ts
View File

@ -1,4 +1,10 @@
export const USER_INFO_LIST = [
export interface UserInfoListType {
title: string;
content: string;
span?: number;
}
export const USER_INFO_LIST: Array<UserInfoListType> = [
{
title: '手机',
content: '+86 13923734567',

14
src/pages/user/index.vue
View File

@ -16,7 +16,7 @@
</t-button>
</template>
<t-row class="content" justify="space-between">
<t-col v-for="(item, index) in USER_INFO_LIST" :key="index" class="contract" :span="item.span || 3">
<t-col v-for="(item, index) in USER_INFO_LIST" :key="index" class="contract" :span="item.span ?? 3">
<div class="contract-title">
{{ item.title }}
</div>
@ -98,6 +98,7 @@ import { LineChart } from 'echarts/charts';
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import type { DateRangeValue } from 'tdesign-vue-next';
import { computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
import ProductAIcon from '@/assets/assets-product-1.svg';
@ -118,8 +119,13 @@ let lineChart: echarts.ECharts;
const store = useSettingStore();
const chartColors = computed(() => store.chartColors);
const onLineChange = (value) => {
lineChart.setOption(getFolderLineDataSet(value));
const onLineChange = (value: DateRangeValue) => {
lineChart.setOption(
getFolderLineDataSet({
dateTime: value as string[],
...chartColors.value,
}),
);
};
const initChart = () => {
@ -154,7 +160,7 @@ onUnmounted(() => {
window.removeEventListener('resize', updateContainer);
});
const getIcon = (type) => {
const getIcon = (type: string) => {
switch (type) {
case 'a':
return ProductAIcon;

9
src/permission.ts
View File

@ -4,9 +4,8 @@ import NProgress from 'nprogress'; // progress bar
import { MessagePlugin } from 'tdesign-vue-next';
import { RouteRecordRaw } from 'vue-router';
import { TOKEN_NAME } from '@/config/global';
import router from '@/router';
import { getPermissionStore, getUserStore } from '@/store';
import { getPermissionStore, useUserStore } from '@/store';
import { PAGE_NOT_FOUND_ROUTE } from '@/utils/route/constant';
NProgress.configure({ showSpinner: false });
@ -17,9 +16,9 @@ router.beforeEach(async (to, from, next) => {
const permissionStore = getPermissionStore();
const { whiteListRouters } = permissionStore;
const userStore = getUserStore();
const userStore = useUserStore();
if (userStore[TOKEN_NAME]) {
if (userStore.token) {
if (to.path === '/login') {
next();
return;
@ -73,7 +72,7 @@ router.beforeEach(async (to, from, next) => {
router.afterEach((to) => {
if (to.path === '/login') {
const userStore = getUserStore();
const userStore = useUserStore();
const permissionStore = getPermissionStore();
userStore.logout();

2
src/router/index.ts
View File

@ -40,7 +40,7 @@ export function mapModuleRouterList(modules: Record<string, unknown>): Array<Rou
}
export const getRoutesExpanded = () => {
const expandedRoutes = [];
const expandedRoutes: Array<string> = [];
fixedRouterList.forEach((item) => {
if (item.meta && item.meta.expanded) {

8
src/store/modules/permission-fe.ts
View File

@ -8,10 +8,10 @@ import router, { allRoutes } from '@/router';
import { store } from '@/store';
function filterPermissionsRouters(routes: Array<RouteRecordRaw>, roles: Array<unknown>) {
const res = [];
const removeRoutes = [];
const res: Array<RouteRecordRaw> = [];
const removeRoutes: Array<RouteRecordRaw> = [];
routes.forEach((route) => {
const children = [];
const children: Array<RouteRecordRaw> = [];
route.children?.forEach((childRouter) => {
const roleCode = childRouter.meta?.roleCode || childRouter.name;
if (roles.indexOf(roleCode) !== -1) {
@ -38,7 +38,7 @@ export const usePermissionStore = defineStore('permission', {
async initRoutes(roles: Array<unknown>) {
let accessedRouters = [];
let removeRoutes = [];
let removeRoutes: Array<RouteRecordRaw> = [];
// special token
if (roles.includes('all')) {
accessedRouters = allRoutes;

5
src/store/modules/setting.ts
View File

@ -15,6 +15,7 @@ const state = {
};
export type TState = typeof state;
export type TStateKey = keyof typeof state;
export const useSettingStore = defineStore('setting', {
state: () => state,
@ -74,8 +75,8 @@ export const useSettingStore = defineStore('setting', {
},
updateConfig(payload: Partial<TState>) {
for (const key in payload) {
if (payload[key] !== undefined) {
this[key] = payload[key];
if (payload[key as TStateKey] !== undefined) {
this[key] = payload[key as TStateKey];
}
if (key === 'mode') {
this.changeMode(payload[key]);

9
src/store/modules/tabs-router.ts
View File

@ -36,7 +36,8 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
},
// 处理新增
appendTabRouterList(newRoute: TRouterInfo) {
const needAlive = !ignoreCacheRoutes.includes(newRoute.name as string);
// 不要将判断条件newRoute.meta.keepAlive !== false修改为newRoute.meta.keepAlive，starter默认开启保活，所以meta.keepAlive未定义时也需要进行保活，只有显式说明false才禁用保活。
const needAlive = !ignoreCacheRoutes.includes(newRoute.name as string) && newRoute.meta?.keepAlive !== false;
if (!this.tabRouters.find((route: TRouterInfo) => route.path === newRoute.path)) {
// eslint-disable-next-line no-param-reassign
this.tabRouterList = this.tabRouterList.concat({ ...newRoute, isAlive: needAlive });
@ -50,7 +51,7 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
// 处理关闭右侧
subtractTabRouterBehind(newRoute: TRouterInfo) {
const { routeIdx } = newRoute;
const homeIdx: number = this.tabRouters.findIndex((route) => route.isHome);
const homeIdx: number = this.tabRouters.findIndex((route: TRouterInfo) => route.isHome);
let tabRouterList: Array<TRouterInfo> = this.tabRouterList.slice(0, routeIdx + 1);
if (routeIdx < homeIdx) {
tabRouterList = tabRouterList.concat(homeRoute);
@ -60,7 +61,7 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
// 处理关闭左侧
subtractTabRouterAhead(newRoute: TRouterInfo) {
const { routeIdx } = newRoute;
const homeIdx: number = this.tabRouters.findIndex((route) => route.isHome);
const homeIdx: number = this.tabRouters.findIndex((route: TRouterInfo) => route.isHome);
let tabRouterList: Array<TRouterInfo> = this.tabRouterList.slice(routeIdx);
if (routeIdx > homeIdx) {
tabRouterList = homeRoute.concat(tabRouterList);
@ -70,7 +71,7 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
// 处理关闭其他
subtractTabRouterOther(newRoute: TRouterInfo) {
const { routeIdx } = newRoute;
const homeIdx: number = this.tabRouters.findIndex((route) => route.isHome);
const homeIdx: number = this.tabRouters.findIndex((route: TRouterInfo) => route.isHome);
this.tabRouterList = routeIdx === homeIdx ? homeRoute : homeRoute.concat([this.tabRouterList?.[routeIdx]]);
},
removeTabRouterList() {

26
src/store/modules/user.ts
View File

@ -1,16 +1,16 @@
import { defineStore } from 'pinia';
import { TOKEN_NAME } from '@/config/global';
import { store, usePermissionStore } from '@/store';
import { usePermissionStore } from '@/store';
import type { UserInfo } from '@/types/interface';
const InitUserInfo = {
const InitUserInfo: UserInfo = {
name: '', // 用户名，用于展示在页面右上角头像处
roles: [], // 前端权限模型使用 如果使用请配置modules/permission-fe.ts使用
};
export const useUserStore = defineStore('user', {
state: () => ({
[TOKEN_NAME]: 'main_token', // 默认token不走权限
token: 'main_token', // 默认token不走权限
userInfo: { ...InitUserInfo },
}),
getters: {
@ -49,7 +49,7 @@ export const useUserStore = defineStore('user', {
const res = await mockLogin(userInfo);
if (res.code === 200) {
this.setToken(res.data);
this.token = res.data;
} else {
throw res;
}
@ -67,20 +67,14 @@ export const useUserStore = defineStore('user', {
roles: ['UserIndex', 'DashboardBase', 'login'], // 前端权限模型使用 如果使用请配置modules/permission-fe.ts使用
};
};
const res = await mockRemoteUserInfo(this[TOKEN_NAME]);
const res = await mockRemoteUserInfo(this.token);
this.userInfo = res;
},
async logout() {
this.removeToken();
this.token = '';
this.userInfo = { ...InitUserInfo };
},
async removeToken() {
this.setToken('');
},
async setToken(token: string) {
this[TOKEN_NAME] = token;
},
},
persist: {
afterRestore: () => {
@ -88,10 +82,6 @@ export const useUserStore = defineStore('user', {
permissionStore.initRoutes();
},
key: 'user',
paths: [TOKEN_NAME],
paths: ['token'],
},
});
export function getUserStore() {
return useUserStore(store);
}

12
src/types/interface.d.ts vendored
View File

@ -1,3 +1,4 @@
import type { TabValue } from 'tdesign-vue-next';
import { LocationQueryRaw, RouteRecordName } from 'vue-router';
import STYLE_CONFIG from '@/config/style';
@ -26,6 +27,11 @@ export type CommonObjType = {
[key: string]: string | number;
};
export interface UserInfo {
name: string;
roles: string[];
}
export interface NotificationItem {
id: string;
content: string;
@ -51,3 +57,9 @@ export interface TTabRouterType {
isRefreshing: boolean;
tabRouterList: Array<TRouterInfo>;
}
export interface TTabRemoveOptions {
value: TabValue;
index: number;
e: MouseEvent;
}

7
src/utils/request/index.ts
View File

@ -3,9 +3,8 @@ import type { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
import isString from 'lodash/isString';
import merge from 'lodash/merge';
import { TOKEN_NAME } from '@/config/global';
import { ContentTypeEnum } from '@/constants';
import { getUserStore } from '@/store';
import { useUserStore } from '@/store';
import { VAxios } from './Axios';
import type { AxiosTransform, CreateAxiosOptions } from './AxiosTransform';
@ -114,8 +113,8 @@ const transform: AxiosTransform = {
// 请求拦截器处理
requestInterceptors: (config, options) => {
// 请求之前处理config
const userStore = getUserStore();
const token = userStore[TOKEN_NAME];
const userStore = useUserStore();
const { token } = userStore;
if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
// jwt token

2
src/utils/request/utils.ts
View File

@ -44,7 +44,7 @@ export function formatRequestDate(params: Recordable) {
}
// 将对象转为Url参数
export function setObjToUrlParams(baseUrl: string, obj: object): string {
export function setObjToUrlParams(baseUrl: string, obj: { [index: string]: any }): string {
let parameters = '';
for (const key in obj) {
parameters += `${key}=${encodeURIComponent(obj[key])}&`;

3
tsconfig.json
View File

@ -15,7 +15,8 @@
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"noImplicitAny": true
},
"include": [
"**/*.ts",