mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-09-20 02:34:24 +08:00
Merge branch 'develop' of github.com:Tencent/tdesign-vue-next-starter into site
This commit is contained in:
Uyarn
commit
cfe9beaa7e
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
### 项目简介
|
||||
|
||||
TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite2`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
|
||||
TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
|
||||
|
||||
<p>
|
||||
<a href="http://tdesign.tencent.com/starter/vue-next/">在线预览</a>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
English | [简体中文](./README-zh_CN.md)
|
||||
### Introduction
|
||||
|
||||
TDesign Vue Next Starter is a TDesign-based developed with `Vue 3`, `Vite 3+`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
|
||||
TDesign Vue Next Starter is a TDesign-based developed with `Vue 3`, `Vite`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
|
||||
|
||||
<p>
|
||||
<a href="http://tdesign.tencent.com/starter/vue-next/">Live Preview</a>
|
||||
|
|
|
|||
75
package.json
75
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@tencent/tdesign-vue-next-starter",
|
||||
"version": "0.7.6",
|
||||
"version": "0.8.0",
|
||||
"scripts": {
|
||||
"dev:mock": "vite --open --mode mock",
|
||||
"dev": "vite --open --mode development",
|
||||
|
|
@ -12,70 +12,69 @@
|
|||
"lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
|
||||
"lint:fix": "eslint --ext .vue,.js,jsx,.ts,.tsx ./ --max-warnings 0 --fix",
|
||||
"stylelint": "stylelint src/**/*.{html,vue,sass,less}",
|
||||
"stylelint:fix": "stylelint --fix src/**/*.{html,vue,vss,sass,less}",
|
||||
"stylelint:fix": "stylelint --fix src/**/*.{html,vue,css,sass,less}",
|
||||
"prepare": "husky install",
|
||||
"site:preview": "npm run build && cp -r dist _site",
|
||||
"test": "echo \"no test specified,work in process\"",
|
||||
"test:coverage": "echo \"no test:coverage specified,work in process\""
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.3.4",
|
||||
"dayjs": "^1.11.7",
|
||||
"axios": "^1.4.0",
|
||||
"dayjs": "^1.11.9",
|
||||
"echarts": "5.1.2",
|
||||
"lodash": "^4.17.21",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.33",
|
||||
"pinia": "^2.1.4",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
"qrcode.vue": "^3.3.4",
|
||||
"qs": "^6.11.1",
|
||||
"qrcode.vue": "^3.4.0",
|
||||
"qs": "^6.11.2",
|
||||
"tdesign-icons-vue-next": "^0.1.11",
|
||||
"tdesign-site-components": "^0.12.9",
|
||||
"tdesign-theme-generator": "^1.0.5",
|
||||
"tdesign-vue-next": "^1.3.4",
|
||||
"tdesign-vue-next": "^1.3.10",
|
||||
"tvision-color": "^1.6.0",
|
||||
"vue": "^3.2.47",
|
||||
"vue": "^3.3.4",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-router": "~4.1.6"
|
||||
"vue-router": "~4.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.3.0",
|
||||
"@commitlint/config-conventional": "^17.3.0",
|
||||
"@types/echarts": "^4.9.16",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@commitlint/cli": "^17.6.6",
|
||||
"@commitlint/config-conventional": "^17.6.6",
|
||||
"@types/echarts": "^4.9.18",
|
||||
"@types/lodash": "^4.14.195",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.1",
|
||||
"@typescript-eslint/parser": "^5.47.1",
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.10",
|
||||
"@vue/compiler-sfc": "^3.2.47",
|
||||
"@vue/eslint-config-typescript": "^11.0.2",
|
||||
"commitizen": "^4.2.4",
|
||||
"@typescript-eslint/eslint-plugin": "^5.61.0",
|
||||
"@typescript-eslint/parser": "^5.61.0",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.1",
|
||||
"@vue/compiler-sfc": "^3.3.4",
|
||||
"@vue/eslint-config-typescript": "^11.0.3",
|
||||
"commitizen": "^4.3.0",
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint": "^8.44.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-simple-import-sort": "^10.0.0",
|
||||
"eslint-plugin-vue": "^9.8.0",
|
||||
"eslint-plugin-vue-scoped-css": "^2.2.0",
|
||||
"husky": "^8.0.2",
|
||||
"eslint-plugin-vue": "^9.15.1",
|
||||
"eslint-plugin-vue-scoped-css": "^2.5.0",
|
||||
"husky": "^8.0.3",
|
||||
"less": "^4.1.3",
|
||||
"lint-staged": "^13.1.0",
|
||||
"lint-staged": "^13.2.3",
|
||||
"mockjs": "^1.1.0",
|
||||
"postcss-html": "^1.5.0",
|
||||
"postcss-less": "^6.0.0",
|
||||
"prettier": "^2.8.1",
|
||||
"stylelint": "~14.9.1",
|
||||
"stylelint-config-prettier": "~9.0.4",
|
||||
"stylelint-less": "1.0.6",
|
||||
"stylelint-order": "~6.0.1",
|
||||
"typescript": "~4.9.5",
|
||||
"vite": "^3.2.5",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"prettier": "^2.8.8",
|
||||
"stylelint": "~15.10.0",
|
||||
"stylelint-config-standard": "^34.0.0",
|
||||
"stylelint-order": "~6.0.3",
|
||||
"typescript": "~5.1.6",
|
||||
"vite": "^4.3.9",
|
||||
"vite-plugin-mock": "^3.0.0",
|
||||
"vite-svg-loader": "^4.0.0",
|
||||
"vue-tsc": "^1.2.0"
|
||||
"vue-tsc": "^1.8.4"
|
||||
},
|
||||
"config": {
|
||||
"commitizen": {
|
||||
|
|
@ -87,7 +86,7 @@
|
|||
"prettier --write",
|
||||
"npm run lint:fix"
|
||||
],
|
||||
"*.{html,vue,vss,sass,less}": [
|
||||
"*.{html,vue,css,sass,less}": [
|
||||
"npm run stylelint:fix"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<router-view v-if="!isRefreshing" v-slot="{ Component }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<transition name="fade">
|
||||
<keep-alive :include="aliveViews">
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
|
|
@ -53,6 +53,7 @@ const isRefreshing = computed(() => {
|
|||
.fade-enter-active {
|
||||
transition: opacity @anim-duration-slow @anim-time-fn-easing;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -206,7 +206,6 @@ watchEffect(() => {
|
|||
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;
|
||||
|
|
@ -252,9 +251,9 @@ watchEffect(() => {
|
|||
.setting-group-title {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin: 32px 0 24px 0;
|
||||
margin: 32px 0 24px;
|
||||
text-align: left;
|
||||
font-family: PingFang SC;
|
||||
font-family: 'PingFang SC', var(--td-font-family);
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
color: var(--td-text-color-primary);
|
||||
|
|
@ -283,6 +282,7 @@ watchEffect(() => {
|
|||
.setting-container {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.t-radio-group.t-size-m {
|
||||
min-height: 32px;
|
||||
width: 100%;
|
||||
|
|
@ -306,6 +306,7 @@ watchEffect(() => {
|
|||
padding: 8px;
|
||||
border-radius: var(--td-radius-default);
|
||||
border: 2px solid var(--td-component-border);
|
||||
|
||||
> .t-radio-button__label {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
</template>
|
||||
<div
|
||||
id="monitorContainer"
|
||||
ref="monitorContainer"
|
||||
class="dashboard-chart-container"
|
||||
:style="{ width: '100%', height: `${resizeTime * 326}px` }"
|
||||
/>
|
||||
|
|
@ -25,7 +24,6 @@
|
|||
<t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card" :bordered="false">
|
||||
<div
|
||||
id="countContainer"
|
||||
ref="countContainer"
|
||||
:style="{ width: `${resizeTime * 326}px`, height: `${resizeTime * 326}px`, margin: '0 auto' }"
|
||||
class="dashboard-chart-container"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -17,12 +17,7 @@
|
|||
@change="onStokeDataChange"
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
id="stokeContainer"
|
||||
ref="stokeContainer"
|
||||
style="width: 100%; height: 351px"
|
||||
class="dashboard-chart-container"
|
||||
></div>
|
||||
<div id="stokeContainer" style="width: 100%; height: 351px" class="dashboard-chart-container"></div>
|
||||
</t-card>
|
||||
</t-col>
|
||||
<t-col :xs="12" :xl="3">
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</span>
|
||||
</template>
|
||||
<template #operation="slotProps">
|
||||
<a class="t-button-link" @click="rehandleClickOp(slotProps)">详情</a>
|
||||
<t-link theme="primary" @click="rehandleClickOp(slotProps)">详情</t-link>
|
||||
</template>
|
||||
</t-table>
|
||||
</t-card>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
|
||||
</template>
|
||||
<template #operation="slotProps">
|
||||
<a class="t-button-link" @click="rehandleClickOp(slotProps)">详情</a>
|
||||
<t-link theme="primary" @click="rehandleClickOp(slotProps)">详情</t-link>
|
||||
</template>
|
||||
</t-table>
|
||||
</t-card>
|
||||
|
|
|
|||
|
|
@ -87,8 +87,10 @@
|
|||
</template>
|
||||
|
||||
<template #op="slotProps">
|
||||
<a :class="prefix + '-link'" @click="listClick()">管理</a>
|
||||
<a :class="prefix + '-link'" @click="deleteClickOp(slotProps)">删除</a>
|
||||
<t-space>
|
||||
<t-link theme="primary" @click="listClick()">管理</t-link>
|
||||
<t-link theme="danger" @click="deleteClickOp(slotProps)">删除</t-link>
|
||||
</t-space>
|
||||
</template>
|
||||
|
||||
<template #op-column>
|
||||
|
|
@ -128,7 +130,6 @@ export default {
|
|||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { getPurchaseList } from '@/api/detail';
|
||||
import { prefix } from '@/config/global';
|
||||
|
||||
import Product from './components/Product.vue';
|
||||
import { BASE_INFO_DATA, PRODUCT_LIST, TABLE_COLUMNS_DATA as columns } from './constants';
|
||||
|
|
@ -188,5 +189,5 @@ const onConfirm = () => {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('./index.less');
|
||||
@import './index.less';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,8 +40,10 @@
|
|||
</span>
|
||||
</template>
|
||||
<template #op="slotProps">
|
||||
<a :class="prefix + '-link'" @click="listClick()">管理</a>
|
||||
<a :class="prefix + '-link'" @click="deleteClickOp(slotProps)">删除</a>
|
||||
<t-space>
|
||||
<t-link theme="primary" @click="listClick()">管理</t-link>
|
||||
<t-link theme="danger" @click="deleteClickOp(slotProps)">删除</t-link>
|
||||
</t-space>
|
||||
</template>
|
||||
<template #op-column>
|
||||
<t-icon name="descending-order" />
|
||||
|
|
@ -84,7 +86,6 @@ import { CanvasRenderer } from 'echarts/renderers';
|
|||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
|
||||
import { getProjectList } from '@/api/detail';
|
||||
import { prefix } from '@/config/global';
|
||||
import { useSettingStore } from '@/store';
|
||||
import { changeChartsTheme } from '@/utils/color';
|
||||
|
||||
|
|
@ -197,7 +198,7 @@ const deleteClickOp = (e: { rowIndex: number }) => {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../base/index.less');
|
||||
@import '../base/index.less';
|
||||
|
||||
.detail-deploy {
|
||||
:deep(.t-card) {
|
||||
|
|
|
|||
|
|
@ -51,8 +51,10 @@
|
|||
</template>
|
||||
|
||||
<template #op="slotProps">
|
||||
<a class="t-button-link" @click="handleClickDetail()">详情</a>
|
||||
<a class="t-button-link" @click="handleClickDelete(slotProps)">删除</a>
|
||||
<t-space>
|
||||
<t-link theme="primary" @click="handleClickDetail()">详情</t-link>
|
||||
<t-link theme="danger" @click="handleClickDelete(slotProps)">删除</t-link>
|
||||
</t-space>
|
||||
</template>
|
||||
</t-table>
|
||||
</t-card>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
class="form-item-content"
|
||||
:options="CONTRACT_STATUS_OPTIONS"
|
||||
placeholder="请选择合同状态"
|
||||
clearable
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
|
|
@ -43,6 +44,7 @@
|
|||
class="form-item-content"
|
||||
:options="CONTRACT_TYPE_OPTIONS"
|
||||
placeholder="请选择合同类型"
|
||||
clearable
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
|
|
@ -90,8 +92,10 @@
|
|||
</p>
|
||||
</template>
|
||||
<template #op="slotProps">
|
||||
<a class="t-button-link" @click="rehandleClickOp(slotProps)">管理</a>
|
||||
<a class="t-button-link" @click="handleClickDelete(slotProps)">删除</a>
|
||||
<t-space>
|
||||
<t-link theme="primary" @click="rehandleClickOp(slotProps)">管理</t-link>
|
||||
<t-link theme="danger" @click="handleClickDelete(slotProps)">删除</t-link>
|
||||
</t-space>
|
||||
</template>
|
||||
</t-table>
|
||||
<t-dialog
|
||||
|
|
@ -120,6 +124,13 @@ import {
|
|||
} from '@/constants';
|
||||
import { useSettingStore } from '@/store';
|
||||
|
||||
interface FormData {
|
||||
name: string;
|
||||
no: string;
|
||||
status?: number;
|
||||
type: string;
|
||||
}
|
||||
|
||||
const store = useSettingStore();
|
||||
|
||||
const COLUMNS: PrimaryTableCol[] = [
|
||||
|
|
@ -168,11 +179,10 @@ const COLUMNS: PrimaryTableCol[] = [
|
|||
const searchForm = {
|
||||
name: '',
|
||||
no: '',
|
||||
status: typeof CONTRACT_STATUS,
|
||||
type: '',
|
||||
};
|
||||
|
||||
const formData = ref({ ...searchForm });
|
||||
const formData = ref<FormData>({ ...searchForm });
|
||||
const rowKey = 'index';
|
||||
const verticalAlign = 'top' as const;
|
||||
const hover = true;
|
||||
|
|
@ -242,6 +252,7 @@ const onReset = (val: unknown) => {
|
|||
};
|
||||
const onSubmit = (val: unknown) => {
|
||||
console.log(val);
|
||||
console.log(formData.value);
|
||||
};
|
||||
const rehandlePageChange = (pageInfo: PageInfo, newDataSource: TableRowData[]) => {
|
||||
console.log('分页变化', pageInfo, newDataSource);
|
||||
|
|
@ -281,6 +292,7 @@ const headerAffixedTop = computed(
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.expand {
|
||||
.t-button__text {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -37,9 +37,13 @@ export const usePermissionStore = defineStore('permission', {
|
|||
}
|
||||
},
|
||||
async restoreRoutes() {
|
||||
this.removeRoutes.forEach((item: RouteRecordRaw) => {
|
||||
router.addRoute(item);
|
||||
// 不需要在此额外调用initRoutes更新侧边导肮内容，在登录后asyncRoutes为空会调用
|
||||
this.asyncRoutes.forEach((item: RouteRecordRaw) => {
|
||||
if (item.name) {
|
||||
router.removeRoute(item.name);
|
||||
}
|
||||
});
|
||||
this.asyncRoutes = [];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@
|
|||
}
|
||||
|
||||
.t-menu--dark .t-menu__operations .t-icon {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
color: rgba(255, 255, 255, 55%);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -81,6 +82,7 @@
|
|||
&-layout {
|
||||
height: calc(100vh - var(--td-comp-size-xxxl));
|
||||
overflow-y: scroll;
|
||||
|
||||
&-tabs-nav {
|
||||
max-width: 100%;
|
||||
position: fixed;
|
||||
|
|
@ -153,6 +155,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// 对部分样式进行重置
|
||||
body {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, var(--td-font-family);
|
||||
font: var(--td-font-body-medium);
|
||||
font-family: -apple-system, BlinkMacSystemFont, var(--td-font-family);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -37,34 +37,3 @@ p {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-button-link,
|
||||
a {
|
||||
color: var(--td-brand-color);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: color @anim-duration-base @anim-time-fn-easing;
|
||||
|
||||
&:hover {
|
||||
color: var(--td-brand-color-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--td-brand-color-active);
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: var(--td-brand-color-active);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.t-button-link {
|
||||
margin-right: var(--td-comp-margin-xxl);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
75
src/types/axios.d.ts
vendored
75
src/types/axios.d.ts
vendored
|
|
@ -1,18 +1,89 @@
|
|||
import { AxiosRequestConfig } from 'axios';
|
||||
import type { AxiosRequestConfig } from 'axios';
|
||||
|
||||
/**
|
||||
* Axios请求配置
|
||||
*/
|
||||
export interface RequestOptions {
|
||||
/**
|
||||
* 接口地址
|
||||
*
|
||||
* 例: http://www.baidu.com/api
|
||||
*/
|
||||
apiUrl?: string;
|
||||
/**
|
||||
* 是否自动添加接口前缀
|
||||
*
|
||||
* 例: http://www.baidu.com/api
|
||||
* urlPrefix: 'api'
|
||||
*/
|
||||
isJoinPrefix?: boolean;
|
||||
/**
|
||||
* 接口前缀
|
||||
*/
|
||||
urlPrefix?: string;
|
||||
/**
|
||||
* POST请求的时候添加参数到Url中
|
||||
*/
|
||||
joinParamsToUrl?: boolean;
|
||||
/**
|
||||
* 格式化提交参数时间
|
||||
*/
|
||||
formatDate?: boolean;
|
||||
/**
|
||||
* 是否需要对响应数据进行处理
|
||||
*/
|
||||
isTransformResponse?: boolean;
|
||||
/**
|
||||
* 是否返回原生响应头
|
||||
*
|
||||
* 例: 需要获取响应头时使用该属性
|
||||
*/
|
||||
isReturnNativeResponse?: boolean;
|
||||
ignoreRepeatRequest?: boolean;
|
||||
/**
|
||||
* 是否忽略请求取消令牌
|
||||
*
|
||||
* 如果启用，则重复请求时不进行处理
|
||||
*
|
||||
* 如果禁用，则重复请求时会取消当前请求
|
||||
*/
|
||||
ignoreCancelToken?: boolean;
|
||||
/**
|
||||
* 自动对请求添加时间戳参数
|
||||
*/
|
||||
joinTime?: boolean;
|
||||
/**
|
||||
* 是否携带Token
|
||||
*/
|
||||
withToken?: boolean;
|
||||
/**
|
||||
* 重试配置
|
||||
*/
|
||||
retry?: {
|
||||
/**
|
||||
* 重试次数
|
||||
*/
|
||||
count: number;
|
||||
/**
|
||||
* 隔多久重试
|
||||
*
|
||||
* 单位: 毫秒
|
||||
*/
|
||||
delay: number;
|
||||
};
|
||||
/**
|
||||
* 接口级节流
|
||||
*
|
||||
* 单位: 毫秒
|
||||
*/
|
||||
throttle?: {
|
||||
delay: number;
|
||||
};
|
||||
/**
|
||||
* 接口级防抖
|
||||
*
|
||||
* 单位: 毫秒
|
||||
*/
|
||||
debounce?: {
|
||||
delay: number;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,15 @@
|
|||
import axios, { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
|
||||
import axios, {
|
||||
AxiosError,
|
||||
AxiosInstance,
|
||||
AxiosRequestConfig,
|
||||
AxiosRequestHeaders,
|
||||
AxiosResponse,
|
||||
InternalAxiosRequestConfig,
|
||||
} from 'axios';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import debounce from 'lodash/debounce';
|
||||
import isFunction from 'lodash/isFunction';
|
||||
import throttle from 'lodash/throttle';
|
||||
import { stringify } from 'qs';
|
||||
|
||||
import { ContentTypeEnum } from '@/constants';
|
||||
|
|
@ -9,12 +18,20 @@ import { AxiosRequestConfigRetry, RequestOptions, Result } from '@/types/axios';
|
|||
import { AxiosCanceler } from './AxiosCancel';
|
||||
import { CreateAxiosOptions } from './AxiosTransform';
|
||||
|
||||
// Axios模块
|
||||
/**
|
||||
* Axios 模块
|
||||
*/
|
||||
export class VAxios {
|
||||
// axios句柄
|
||||
/**
|
||||
* Axios实例句柄
|
||||
* @private
|
||||
*/
|
||||
private instance: AxiosInstance;
|
||||
|
||||
// axios选项
|
||||
/**
|
||||
* Axios配置
|
||||
* @private
|
||||
*/
|
||||
private readonly options: CreateAxiosOptions;
|
||||
|
||||
constructor(options: CreateAxiosOptions) {
|
||||
|
|
@ -23,57 +40,71 @@ export class VAxios {
|
|||
this.setupInterceptors();
|
||||
}
|
||||
|
||||
// 创建axios句柄
|
||||
/**
|
||||
* 创建Axios实例
|
||||
* @param config
|
||||
* @private
|
||||
*/
|
||||
private createAxios(config: CreateAxiosOptions): void {
|
||||
this.instance = axios.create(config);
|
||||
}
|
||||
|
||||
// 获取数据处理
|
||||
/**
|
||||
* 获取数据处理类
|
||||
* @private
|
||||
*/
|
||||
private getTransform() {
|
||||
const { transform } = this.options;
|
||||
return transform;
|
||||
}
|
||||
|
||||
// 获取句柄
|
||||
/**
|
||||
* 获取Axios实例
|
||||
*/
|
||||
getAxios(): AxiosInstance {
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
// 配置 axios
|
||||
/**
|
||||
* 配置Axios
|
||||
* @param config
|
||||
*/
|
||||
configAxios(config: CreateAxiosOptions) {
|
||||
if (!this.instance) {
|
||||
return;
|
||||
}
|
||||
if (!this.instance) return;
|
||||
this.createAxios(config);
|
||||
}
|
||||
|
||||
// 设置通用头信息
|
||||
/**
|
||||
* 设置公共头部信息
|
||||
* @param headers
|
||||
*/
|
||||
setHeader(headers: Record<string, string>): void {
|
||||
if (!this.instance) {
|
||||
return;
|
||||
}
|
||||
if (!this.instance) return;
|
||||
Object.assign(this.instance.defaults.headers, headers);
|
||||
}
|
||||
|
||||
// 设置拦截器
|
||||
/**
|
||||
* 设置拦截器
|
||||
* @private
|
||||
*/
|
||||
private setupInterceptors() {
|
||||
const transform = this.getTransform();
|
||||
if (!transform) {
|
||||
return;
|
||||
}
|
||||
if (!transform) return;
|
||||
|
||||
const { requestInterceptors, requestInterceptorsCatch, responseInterceptors, responseInterceptorsCatch } =
|
||||
transform;
|
||||
const axiosCanceler = new AxiosCanceler();
|
||||
|
||||
// 请求配置处理
|
||||
// 请求拦截器
|
||||
this.instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
|
||||
// 如果忽略取消令牌，则不会取消重复的请求
|
||||
// @ts-ignore
|
||||
const { ignoreRepeatRequest } = config.requestOptions;
|
||||
const ignoreRepeat = ignoreRepeatRequest ?? this.options.requestOptions?.ignoreRepeatRequest;
|
||||
if (!ignoreRepeat) axiosCanceler.addPending(config);
|
||||
const { ignoreCancelToken } = config.requestOptions;
|
||||
const ignoreCancel = ignoreCancelToken ?? this.options.requestOptions?.ignoreCancelToken;
|
||||
if (!ignoreCancel) axiosCanceler.addPending(config);
|
||||
|
||||
if (requestInterceptors && isFunction(requestInterceptors)) {
|
||||
config = requestInterceptors(config, this.options);
|
||||
config = requestInterceptors(config, this.options) as InternalAxiosRequestConfig;
|
||||
}
|
||||
|
||||
return config;
|
||||
|
|
@ -99,9 +130,12 @@ export class VAxios {
|
|||
}
|
||||
}
|
||||
|
||||
// 支持Form Data
|
||||
/**
|
||||
* 支持 FormData 请求格式
|
||||
* @param config
|
||||
*/
|
||||
supportFormData(config: AxiosRequestConfig) {
|
||||
const headers = config.headers || this.options.headers;
|
||||
const headers = config.headers || (this.options.headers as AxiosRequestHeaders);
|
||||
const contentType = headers?.['Content-Type'] || headers?.['content-type'];
|
||||
|
||||
if (
|
||||
|
|
@ -118,6 +152,24 @@ export class VAxios {
|
|||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 支持 params 序列化
|
||||
* @param config
|
||||
*/
|
||||
supportParamsStringify(config: AxiosRequestConfig) {
|
||||
const headers = config.headers || this.options.headers;
|
||||
const contentType = headers?.['Content-Type'] || headers?.['content-type'];
|
||||
|
||||
if (contentType === ContentTypeEnum.FormURLEncoded || !Reflect.has(config, 'params')) {
|
||||
return config;
|
||||
}
|
||||
|
||||
return {
|
||||
...config,
|
||||
paramsSerializer: (params: any) => stringify(params, { arrayFormat: 'brackets' }),
|
||||
};
|
||||
}
|
||||
|
||||
get<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||
return this.request({ ...config, method: 'GET' }, options);
|
||||
}
|
||||
|
|
@ -138,8 +190,62 @@ export class VAxios {
|
|||
return this.request({ ...config, method: 'PATCH' }, options);
|
||||
}
|
||||
|
||||
// 请求
|
||||
async request<T = any>(config: AxiosRequestConfigRetry, options?: RequestOptions): Promise<T> {
|
||||
/**
|
||||
* 上传文件封装
|
||||
* @param key 文件所属的key
|
||||
* @param file 文件
|
||||
* @param config 请求配置
|
||||
* @param options
|
||||
*/
|
||||
upload<T = any>(key: string, file: File, config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||
const params: FormData = config.params ?? new FormData();
|
||||
params.append(key, file);
|
||||
|
||||
return this.request(
|
||||
{
|
||||
...config,
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': ContentTypeEnum.FormData,
|
||||
},
|
||||
params,
|
||||
},
|
||||
options,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 请求封装
|
||||
* @param config
|
||||
* @param options
|
||||
*/
|
||||
request<T = any>(config: AxiosRequestConfigRetry, options?: RequestOptions): Promise<T> {
|
||||
const { requestOptions } = this.options;
|
||||
|
||||
if (requestOptions.throttle !== undefined && requestOptions.debounce !== undefined) {
|
||||
throw new Error('throttle and debounce cannot be set at the same time');
|
||||
}
|
||||
|
||||
if (requestOptions.throttle && requestOptions.throttle.delay !== 0) {
|
||||
return new Promise((resolve) => {
|
||||
throttle(() => resolve(this.synthesisRequest(config, options)), requestOptions.throttle.delay);
|
||||
});
|
||||
}
|
||||
|
||||
if (requestOptions.debounce && requestOptions.debounce.delay !== 0) {
|
||||
return new Promise((resolve) => {
|
||||
debounce(() => resolve(this.synthesisRequest(config, options)), requestOptions.debounce.delay);
|
||||
});
|
||||
}
|
||||
|
||||
return this.synthesisRequest(config, options);
|
||||
}
|
||||
|
||||
/**
|
||||
* 请求方法
|
||||
* @private
|
||||
*/
|
||||
private async synthesisRequest<T = any>(config: AxiosRequestConfigRetry, options?: RequestOptions): Promise<T> {
|
||||
let conf: CreateAxiosOptions = cloneDeep(config);
|
||||
const transform = this.getTransform();
|
||||
|
||||
|
|
@ -154,6 +260,8 @@ export class VAxios {
|
|||
conf.requestOptions = opt;
|
||||
|
||||
conf = this.supportFormData(conf);
|
||||
// 支持params数组参数格式化，因axios默认的toFormData即为brackets方式，无需配置paramsSerializer为qs，有需要可解除注释，参数参考qs文档
|
||||
// conf = this.supportParamsStringify(conf);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
this.instance
|
||||
|
|
|
|||
|
|
@ -5,10 +5,20 @@ import isFunction from 'lodash/isFunction';
|
|||
// 存储请求与取消令牌的键值对列表
|
||||
let pendingMap = new Map<string, Canceler>();
|
||||
|
||||
/**
|
||||
* 获取请求Url
|
||||
* @param config
|
||||
*/
|
||||
export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&');
|
||||
|
||||
/**
|
||||
* @description 请求管理器
|
||||
*/
|
||||
export class AxiosCanceler {
|
||||
// 添加请求到列表
|
||||
/**
|
||||
* 添加请求到列表中
|
||||
* @param config
|
||||
*/
|
||||
addPending(config: AxiosRequestConfig) {
|
||||
this.removePending(config);
|
||||
const url = getPendingUrl(config);
|
||||
|
|
@ -22,7 +32,9 @@ export class AxiosCanceler {
|
|||
});
|
||||
}
|
||||
|
||||
// 清空所有请求
|
||||
/**
|
||||
* 移除现有的所有请求
|
||||
*/
|
||||
removeAllPending() {
|
||||
pendingMap.forEach((cancel) => {
|
||||
if (cancel && isFunction(cancel)) cancel();
|
||||
|
|
@ -30,7 +42,10 @@ export class AxiosCanceler {
|
|||
pendingMap.clear();
|
||||
}
|
||||
|
||||
// 移除某个请求
|
||||
/**
|
||||
* 移除指定请求
|
||||
* @param config
|
||||
*/
|
||||
removePending(config: AxiosRequestConfig) {
|
||||
const url = getPendingUrl(config);
|
||||
|
||||
|
|
@ -43,6 +58,9 @@ export class AxiosCanceler {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
reset() {
|
||||
pendingMap = new Map<string, Canceler>();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,64 @@
|
|||
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
|
||||
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
|
||||
import { AxiosError } from 'axios';
|
||||
|
||||
import type { RequestOptions, Result } from '@/types/axios';
|
||||
|
||||
// 创建Axios选项
|
||||
/**
|
||||
* @description 创建Axios实例配置
|
||||
*/
|
||||
export interface CreateAxiosOptions extends AxiosRequestConfig {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
|
||||
/**
|
||||
* 请求验证方案
|
||||
*
|
||||
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
|
||||
*/
|
||||
authenticationScheme?: string;
|
||||
// 数据处理
|
||||
/**
|
||||
* 请求数据处理
|
||||
*/
|
||||
transform?: AxiosTransform;
|
||||
// 请求选项
|
||||
/**
|
||||
* 请求配置
|
||||
*/
|
||||
requestOptions?: RequestOptions;
|
||||
}
|
||||
|
||||
// Axios 数据处理
|
||||
/**
|
||||
* Axios请求数据处理 抽象类
|
||||
*/
|
||||
export abstract class AxiosTransform {
|
||||
// 请求前Hook
|
||||
/**
|
||||
* 请求前钩子
|
||||
*/
|
||||
beforeRequestHook?: (config: AxiosRequestConfig, options: RequestOptions) => AxiosRequestConfig;
|
||||
|
||||
// 转换前Hook
|
||||
transformRequestHook?: (res: AxiosResponse<Result>, options: RequestOptions) => any;
|
||||
/**
|
||||
* 数据处理前钩子
|
||||
*/
|
||||
transformRequestHook?: <T = any>(res: AxiosResponse<Result>, options: RequestOptions) => T;
|
||||
|
||||
// 请求失败处理
|
||||
requestCatchHook?: (e: Error | AxiosError, options: RequestOptions) => Promise<any>;
|
||||
/**
|
||||
* 请求失败钩子
|
||||
*/
|
||||
requestCatchHook?: <T = any>(e: Error | AxiosError, options: RequestOptions) => Promise<T>;
|
||||
|
||||
// 请求前的拦截器
|
||||
requestInterceptors?: (config: AxiosRequestConfig, options: CreateAxiosOptions) => InternalAxiosRequestConfig;
|
||||
/**
|
||||
* 请求拦截器
|
||||
*/
|
||||
requestInterceptors?: (config: AxiosRequestConfig, options: CreateAxiosOptions) => AxiosRequestConfig;
|
||||
|
||||
// 请求后的拦截器
|
||||
/**
|
||||
* 响应拦截器
|
||||
*/
|
||||
responseInterceptors?: (res: AxiosResponse) => AxiosResponse;
|
||||
|
||||
// 请求前的拦截器错误处理
|
||||
/**
|
||||
* 请求拦截器错误处理
|
||||
*/
|
||||
requestInterceptorsCatch?: (error: AxiosError) => void;
|
||||
|
||||
// 请求后的拦截器错误处理
|
||||
/**
|
||||
* 响应拦截器错误处理
|
||||
*/
|
||||
responseInterceptorsCatch?: (error: AxiosError, instance: AxiosInstance) => void;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// axios配置 可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
|
||||
import type { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
|
||||
import type { AxiosInstance } from 'axios';
|
||||
import isString from 'lodash/isString';
|
||||
import merge from 'lodash/merge';
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ const transform: AxiosTransform = {
|
|||
|
||||
// 如果204无内容直接返回
|
||||
const method = res.config.method?.toLowerCase();
|
||||
if (res.status === 204 || method === 'put' || method === 'patch') {
|
||||
if (res.status === 204 && ['put', 'patch', 'delete'].includes(method)) {
|
||||
return res;
|
||||
}
|
||||
|
||||
|
|
@ -122,7 +122,7 @@ const transform: AxiosTransform = {
|
|||
? `${options.authenticationScheme} ${token}`
|
||||
: token;
|
||||
}
|
||||
return config as InternalAxiosRequestConfig;
|
||||
return config;
|
||||
},
|
||||
|
||||
// 响应拦截器处理
|
||||
|
|
@ -186,8 +186,10 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
|
|||
formatDate: true,
|
||||
// 是否加入时间戳
|
||||
joinTime: true,
|
||||
// 忽略重复请求
|
||||
ignoreRepeatRequest: true,
|
||||
// 是否忽略请求取消令牌
|
||||
// 如果启用，则重复请求时不进行处理
|
||||
// 如果禁用，则重复请求时会取消当前请求
|
||||
ignoreCancelToken: true,
|
||||
// 是否携带token
|
||||
withToken: true,
|
||||
// 重试
|
||||
|
|
|
|||
|
|
@ -1,7 +1,38 @@
|
|||
module.exports = {
|
||||
defaultSeverity: 'error',
|
||||
extends: ['stylelint-config-prettier'],
|
||||
plugins: ['stylelint-less'],
|
||||
extends: ['stylelint-config-standard'],
|
||||
rules: {
|
||||
'no-duplicate-selectors': null,
|
||||
'block-no-empty': null,
|
||||
'selector-class-pattern': null,
|
||||
'declaration-block-no-redundant-longhand-properties': [true, { ignoreShorthands: ['/flex/'] }],
|
||||
'custom-property-pattern': null,
|
||||
'keyframes-name-pattern': null,
|
||||
'no-empty-source': null,
|
||||
'font-family-no-missing-generic-family-keyword': [
|
||||
true,
|
||||
{
|
||||
ignoreFontFamilies: ['PingFangSC-Regular', 'PingFangSC-Medium', 't'],
|
||||
},
|
||||
],
|
||||
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
|
||||
'function-url-quotes': null,
|
||||
'max-line-length': null,
|
||||
'at-rule-empty-line-before': ['always', { ignore: ['after-comment'] }],
|
||||
'declaration-colon-newline-after': null,
|
||||
'no-descending-specificity': null,
|
||||
'selector-type-no-unknown': null,
|
||||
'color-function-notation': 'legacy',
|
||||
'value-keyword-case': null,
|
||||
'property-no-unknown': [true, { checkPrefixed: true }],
|
||||
'import-notation': 'string',
|
||||
'selector-pseudo-class-no-unknown': [
|
||||
true,
|
||||
{
|
||||
ignorePseudoClasses: ['deep'],
|
||||
},
|
||||
],
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['**/*.html', '**/*.vue'],
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
|
|||
vueJsx(),
|
||||
viteMockServe({
|
||||
mockPath: 'mock',
|
||||
localEnabled: true,
|
||||
enable: true,
|
||||
}),
|
||||
svgLoader(),
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user