github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-02-02 18:08:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: merge branch 'main' of github.com:anncwb/vue-vben-admin into main

Browse Source
This commit is contained in:
vben 2021-10-20 09:19:54 +08:00
commit 8efcba4861
63 changed files with 5304 additions and 4917 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
CHANGELOG.zh_CN.md
View File

@ -1,3 +1,30 @@
### ✨ Features
- **其它**
- `.env`文件中的`VITE_PROXY`配置支持单引号
- 移除 build 过程中的警告
### 🐛 Bug Fixes
- **BasicTable**
- 修复可编辑单元格某些情况下无法提交的问题
- 修复`inset`属性不起作用的问题
- 修复`useTable`与`BasicTable`实例的`reload`方法`await`表现不一致的问题
- 修复`clickToRowSelect`会无视行选择框 disabled 状态的问题
- 修复`BasicTable`在某些情况下，分页会被重置的问题
- 修改 `deleteTableDataRecord` 方法
- **BasicModal**
- 修复点击遮罩、按下`Esc`键都不能关闭`Modal`的问题
- 修复点击关闭按钮、最大化按钮旁边的空白区域也会导致`Modal`关闭的问题
- **BasicTree** 修复节点插槽不起作用的问题
- **CodeEditor** 修复可能会造成的`Build`失败的问题
- **BasicForm** 修复自定义 FormItem 组件的内容宽度可能超出范围的问题
- **ApiTreeSelect** 修复`params`变化未能触发重新请求 api 数据的问题
- **其它**
- 修复多标签在某些情况下关闭页签不会跳转路由的问题
- 修复部分组件可能会造成热更新异常的问题
- 修复直接`import`部分`antdv`子组件时会在 build 过程中报错的问题，如：TabPane、RadioGroup
## 2.7.2(2021-09-14)
### ✨ Features

19
build/script/buildConf.ts
View File

@ -5,18 +5,19 @@ import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant';
import fs, { writeFileSync } from 'fs-extra';
import chalk from 'chalk';
import { getRootPath, getEnvConfig } from '../utils';
import { getEnvConfig, getRootPath } from '../utils';
import { getConfigFileName } from '../getConfigFileName';
import pkg from '../../package.json';
function createConfig(
{
configName,
config,
configFileName = GLOB_CONFIG_FILE_NAME,
}: { configName: string; config: any; configFileName?: string } = { configName: '', config: {} },
) {
interface CreateConfigParams {
configName: string;
config: any;
configFileName?: string;
}
function createConfig(params: CreateConfigParams) {
const { configName, config, configFileName } = params;
try {
const windowConf = `window.${configName}`;
// Ensure that the variable will not be modified
@ -40,5 +41,5 @@ function createConfig(
export function runBuildConfig() {
const config = getEnvConfig();
const configFileName = getConfigFileName(config);
createConfig({ config, configName: configFileName });
createConfig({ config, configName: configFileName, configFileName: GLOB_CONFIG_FILE_NAME });
}

4
build/utils.ts
View File

@ -28,9 +28,9 @@ export function wrapperEnv(envConf: Recordable): ViteEnv {
if (envName === 'VITE_PORT') {
realName = Number(realName);
}
if (envName === 'VITE_PROXY') {
if (envName === 'VITE_PROXY' && realName) {
try {
realName = JSON.parse(realName);
realName = JSON.parse(realName.replace(/'/g, '"'));
} catch (error) {
realName = '';
}

47
build/vite/plugin/styleImport.ts
View File

@ -14,7 +14,52 @@ export function configStyleImportPlugin(isBuild: boolean) {
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/index`;
// 这里是“子组件”列表，无需额外引入样式文件
const ignoreList = [
'typography-text',
'typography-title',
'typography-paragraph',
'typography-link',
'anchor-link',
'sub-menu',
'menu-item',
'menu-item-group',
'dropdown-button',
'breadcrumb-item',
'breadcrumb-separator',
'input-password',
'input-search',
'input-group',
'form-item',
'radio-group',
'checkbox-group',
'layout-sider',
'layout-content',
'layout-footer',
'layout-header',
'step',
'select-option',
'select-opt-group',
'card-grid',
'card-meta',
'collapse-panel',
'descriptions-item',
'list-item',
'list-item-meta',
'table-column',
'table-column-group',
'tab-pane',
'tab-content',
'timeline-item',
'tree-node',
'skeleton-input',
'skeleton-avatar',
'skeleton-title',
'skeleton-paragraph',
'skeleton-image',
'skeleton-button',
];
return ignoreList.includes(name) ? '' : `ant-design-vue/es/${name}/style/index`;
},
},
],

2
build/vite/proxy.ts
View File

@ -7,7 +7,7 @@ type ProxyItem = [string, string];
type ProxyList = ProxyItem[];
type ProxyTargetList = Record<string, ProxyOptions & { rewrite: (path: string) => string }>;
type ProxyTargetList = Record<string, ProxyOptions>;
const httpsRE = /^https:\/\//;

9
mock/demo/account.ts
View File

@ -1,5 +1,6 @@
import { MockMethod } from 'vite-plugin-mock';
import { resultSuccess, resultError } from '../_util';
import { ResultEnum } from '../../src/enums/httpEnum';
const userInfo = {
name: 'Vben',
@ -59,4 +60,12 @@ export default [
return resultError();
},
},
{
url: '/basic-api/user/tokenExpired',
method: 'post',
statusCode: 200,
response: () => {
return resultError('Token Expired!', { code: ResultEnum.TIMEOUT as number });
},
},
] as MockMethod[];

8
mock/demo/select-demo.ts
View File

@ -1,11 +1,11 @@
import { MockMethod } from 'vite-plugin-mock';
import { resultSuccess } from '../_util';
const demoList = (keyword) => {
const demoList = (keyword, count = 20) => {
const result = {
list: [] as any[],
};
for (let index = 0; index < 20; index++) {
for (let index = 0; index < count; index++) {
result.list.push({
name: `${keyword ?? ''}选项${index}`,
id: `${index}`,
@ -20,9 +20,9 @@ export default [
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { keyword } = query;
const { keyword, count } = query;
console.log(keyword);
return resultSuccess(demoList(keyword));
return resultSuccess(demoList(keyword, count));
},
},
] as MockMethod[];

2
mock/demo/table-demo.ts
View File

@ -12,7 +12,7 @@ function getRandomPics(count = 10): string[] {
const demoList = (() => {
const result: any[] = [];
for (let index = 0; index < 60; index++) {
for (let index = 0; index < 200; index++) {
result.push({
id: `${index}`,
beginTime: '@datetime',

102
package.json
View File

@ -35,98 +35,100 @@
},
"dependencies": {
"@iconify/iconify": "^2.0.4",
"@vueuse/core": "^6.3.3",
"@vueuse/core": "^6.6.2",
"@zxcvbn-ts/core": "^1.0.0-beta.0",
"ant-design-vue": "2.2.7",
"axios": "^0.21.4",
"ant-design-vue": "2.2.8",
"axios": "^0.23.0",
"crypto-js": "^4.1.1",
"echarts": "^5.2.0",
"echarts": "^5.2.1",
"lodash-es": "^4.17.21",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"path-to-regexp": "^6.2.0",
"pinia": "2.0.0-rc.9",
"pinia": "2.0.0-rc.14",
"print-js": "^1.6.0",
"qrcode": "^1.4.4",
"resize-observer-polyfill": "^1.5.1",
"sortablejs": "^1.14.0",
"vue": "3.2.11",
"vue-i18n": "9.1.7",
"vue-router": "^4.0.11",
"vue-types": "^4.1.0"
"vue": "^3.2.20",
"vue-i18n": "^9.1.9",
"vue-json-pretty": "^2.0.4",
"vue-router": "^4.0.12",
"vue-types": "^4.1.1"
},
"devDependencies": {
"@commitlint/cli": "^13.1.0",
"@commitlint/config-conventional": "^13.1.0",
"@iconify/json": "^1.1.401",
"@commitlint/cli": "^13.2.1",
"@commitlint/config-conventional": "^13.2.0",
"@iconify/json": "^1.1.416",
"@purge-icons/generated": "^0.7.0",
"@types/codemirror": "^5.60.2",
"@types/codemirror": "^5.60.5",
"@types/crypto-js": "^4.0.2",
"@types/fs-extra": "^9.0.12",
"@types/inquirer": "^8.1.1",
"@types/fs-extra": "^9.0.13",
"@types/inquirer": "^8.1.3",
"@types/intro.js": "^3.0.2",
"@types/jest": "^27.0.1",
"@types/jest": "^27.0.2",
"@types/lodash-es": "^4.17.5",
"@types/mockjs": "^1.0.4",
"@types/node": "^16.9.1",
"@types/node": "^16.11.1",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.1",
"@types/qs": "^6.9.7",
"@types/showdown": "^1.9.4",
"@types/sortablejs": "^1.10.7",
"@typescript-eslint/eslint-plugin": "^4.31.0",
"@typescript-eslint/parser": "^4.31.0",
"@vitejs/plugin-legacy": "^1.5.3",
"@vitejs/plugin-vue": "^1.6.2",
"@vitejs/plugin-vue-jsx": "^1.1.8",
"@vue/compiler-sfc": "3.2.11",
"@vue/test-utils": "^2.0.0-rc.14",
"autoprefixer": "^10.3.4",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"@vitejs/plugin-legacy": "^1.6.2",
"@vitejs/plugin-vue": "^1.9.3",
"@vitejs/plugin-vue-jsx": "^1.2.0",
"@vue/compiler-sfc": "3.2.20",
"@vue/test-utils": "^2.0.0-rc.16",
"autoprefixer": "^10.3.7",
"commitizen": "^4.2.4",
"conventional-changelog-cli": "^2.1.1",
"cross-env": "^7.0.3",
"dotenv": "^10.0.0",
"eslint": "^7.32.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-define-config": "^1.0.9",
"eslint-plugin-jest": "^24.4.0",
"eslint-define-config": "^1.1.1",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^7.17.0",
"esno": "^0.9.1",
"eslint-plugin-vue": "^7.19.1",
"esno": "^0.10.1",
"fs-extra": "^10.0.0",
"http-server": "^13.0.1",
"http-server": "^14.0.0",
"husky": "^7.0.2",
"inquirer": "^8.1.2",
"inquirer": "^8.2.0",
"is-ci": "^3.0.0",
"jest": "^27.2.0",
"less": "^4.1.1",
"lint-staged": "^11.1.2",
"jest": "^27.3.1",
"less": "^4.1.2",
"lint-staged": "^11.2.3",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.6",
"prettier": "^2.4.0",
"postcss": "^8.3.9",
"prettier": "^2.4.1",
"pretty-quick": "^3.1.1",
"rimraf": "^3.0.2",
"rollup-plugin-visualizer": "5.5.2",
"rollup-plugin-visualizer": "^5.5.2",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^22.0.0",
"stylelint-order": "^4.1.0",
"ts-jest": "^27.0.5",
"ts-node": "^10.2.1",
"typescript": "4.4.3",
"vite": "2.5.7",
"ts-jest": "^27.0.7",
"ts-node": "^10.3.0",
"typescript": "^4.4.4",
"vite": "^2.6.10",
"vite-plugin-compression": "^0.3.5",
"vite-plugin-html": "^2.1.0",
"vite-plugin-imagemin": "^0.4.5",
"vite-plugin-html": "^2.1.1",
"vite-plugin-imagemin": "^0.4.6",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-purge-icons": "^0.7.0",
"vite-plugin-pwa": "^0.11.2",
"vite-plugin-pwa": "^0.11.3",
"vite-plugin-style-import": "^1.2.1",
"vite-plugin-svg-icons": "^1.0.4",
"vite-plugin-svg-icons": "^1.0.5",
"vite-plugin-theme": "^0.8.1",
"vite-plugin-vue-setup-extend": "^0.1.0",
"vite-plugin-windicss": "^1.4.2",
"vue-eslint-parser": "^7.11.0",
"vue-tsc": "^0.3.0"
"vite-plugin-windicss": "^1.4.12",
"vue-eslint-parser": "^8.0.0",
"vue-tsc": "^0.28.7"
},
"resolutions": {
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",

1
src/components/Application/src/AppLogo.vue
View File

@ -87,6 +87,7 @@
font-size: 16px;
font-weight: 700;
transition: all 0.5s;
line-height: normal;
}
}
</style>

2
src/components/CodeEditor/index.ts
View File

@ -4,3 +4,5 @@ import jsonPreview from './src/json-preview/JsonPreview.vue';
export const CodeEditor = withInstall(codeEditor);
export const JsonPreview = withInstall(jsonPreview);
export * from './src/typing';

18
src/components/CodeEditor/src/CodeEditor.vue
View File

@ -8,22 +8,22 @@
/>
</div>
</template>
<script lang="ts">
export const MODE = {
JSON: 'application/json',
html: 'htmlmixed',
js: 'javascript',
};
</script>
<script lang="ts" setup>
import { computed } from 'vue';
import CodeMirrorEditor from './codemirror/CodeMirror.vue';
import { isString } from '/@/utils/is';
import { MODE } from './typing';
const props = defineProps({
value: { type: [Object, String] as PropType<Record<string, any> | string> },
mode: { type: String, default: MODE.JSON },
mode: {
type: String as PropType<MODE>,
default: MODE.JSON,
validator(value: any) {
// 这个值必须匹配下列字符串中的一个
return Object.values(MODE).includes(value);
},
},
readonly: { type: Boolean },
autoFormat: { type: Boolean, default: true },
});

10
src/components/CodeEditor/src/codemirror/CodeMirror.vue
View File

@ -8,6 +8,7 @@
import { useAppStore } from '/@/store/modules/app';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
import CodeMirror from 'codemirror';
import { MODE } from './../typing';
// css
import './codemirror.css';
import 'codemirror/theme/idea.css';
@ -18,7 +19,14 @@
import 'codemirror/mode/htmlmixed/htmlmixed';
const props = defineProps({
mode: { type: String, default: 'application/json' },
mode: {
type: String as PropType<MODE>,
default: MODE.JSON,
validator(value: any) {
// 这个值必须匹配下列字符串中的一个
return Object.values(MODE).includes(value);
},
},
value: { type: String, default: '' },
readonly: { type: Boolean, default: false },
});

5
src/components/CodeEditor/src/typing.ts Normal file
View File

@ -0,0 +1,5 @@
export enum MODE {
JSON = 'application/json',
HTML = 'htmlmixed',
JS = 'javascript',
}

123
src/components/Dropdown/src/Dropdown.vue
View File

@ -1,17 +1,17 @@
<template>
<Dropdown :trigger="trigger" v-bind="$attrs">
<a-dropdown :trigger="trigger" v-bind="$attrs">
<span>
<slot></slot>
</span>
<template #overlay>
<Menu :selectedKeys="selectedKeys">
<a-menu :selectedKeys="selectedKeys">
<template v-for="item in dropMenuList" :key="`${item.event}`">
<MenuItem
<a-menu-item
v-bind="getAttr(item.event)"
@click="handleClickMenu(item)"
:disabled="item.disabled"
>
<Popconfirm
<a-popconfirm
v-if="popconfirm && item.popConfirm"
v-bind="getPopConfirmAttrs(item.popConfirm)"
>
@ -22,86 +22,75 @@
<Icon :icon="item.icon" v-if="item.icon" />
<span class="ml-1">{{ item.text }}</span>
</div>
</Popconfirm>
</a-popconfirm>
<template v-else>
<Icon :icon="item.icon" v-if="item.icon" />
<span class="ml-1">{{ item.text }}</span>
</template>
</MenuItem>
<MenuDivider v-if="item.divider" :key="`d-${item.event}`" />
</a-menu-item>
<a-menu-divider v-if="item.divider" :key="`d-${item.event}`" />
</template>
</Menu>
</a-menu>
</template>
</Dropdown>
</a-dropdown>
</template>
<script lang="ts">
<script lang="ts" setup>
import { computed, PropType } from 'vue';
import type { DropMenu } from './typing';
import { defineComponent } from 'vue';
import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { omit } from 'lodash-es';
import { isFunction } from '/@/utils/is';
export default defineComponent({
name: 'BasicDropdown',
components: {
Dropdown,
Menu,
MenuItem: Menu.Item,
MenuDivider: Menu.Divider,
Icon,
Popconfirm,
},
props: {
popconfirm: Boolean,
/**
* the trigger mode which executes the drop-down action
* @default ['hover']
* @type string[]
*/
trigger: {
type: [Array] as PropType<('contextmenu' | 'click' | 'hover')[]>,
default: () => {
return ['contextmenu'];
},
},
dropMenuList: {
type: Array as PropType<(DropMenu & Recordable)[]>,
default: () => [],
},
selectedKeys: {
type: Array as PropType<string[]>,
default: () => [],
const ADropdown = Dropdown;
const AMenu = Menu;
const AMenuItem = Menu.Item;
const AMenuDivider = Menu.Divider;
const APopconfirm = Popconfirm;
const props = defineProps({
popconfirm: Boolean,
/**
* the trigger mode which executes the drop-down action
* @default ['hover']
* @type string[]
*/
trigger: {
type: [Array] as PropType<('contextmenu' | 'click' | 'hover')[]>,
default: () => {
return ['contextmenu'];
},
},
emits: ['menuEvent'],
setup(props, { emit }) {
function handleClickMenu(item: DropMenu) {
const { event } = item;
const menu = props.dropMenuList.find((item) => `${item.event}` === `${event}`);
emit('menuEvent', menu);
item.onClick?.();
}
const getPopConfirmAttrs = computed(() => {
return (attrs) => {
const originAttrs = omit(attrs, ['confirm', 'cancel', 'icon']);
if (!attrs.onConfirm && attrs.confirm && isFunction(attrs.confirm))
originAttrs['onConfirm'] = attrs.confirm;
if (!attrs.onCancel && attrs.cancel && isFunction(attrs.cancel))
originAttrs['onCancel'] = attrs.cancel;
return originAttrs;
};
});
return {
handleClickMenu,
getPopConfirmAttrs,
getAttr: (key: string | number) => ({ key }),
};
dropMenuList: {
type: Array as PropType<(DropMenu & Recordable)[]>,
default: () => [],
},
selectedKeys: {
type: Array as PropType<string[]>,
default: () => [],
},
});
const emit = defineEmits(['menuEvent']);
function handleClickMenu(item: DropMenu) {
const { event } = item;
const menu = props.dropMenuList.find((item) => `${item.event}` === `${event}`);
emit('menuEvent', menu);
item.onClick?.();
}
const getPopConfirmAttrs = computed(() => {
return (attrs) => {
const originAttrs = omit(attrs, ['confirm', 'cancel', 'icon']);
if (!attrs.onConfirm && attrs.confirm && isFunction(attrs.confirm))
originAttrs['onConfirm'] = attrs.confirm;
if (!attrs.onCancel && attrs.cancel && isFunction(attrs.cancel))
originAttrs['onCancel'] = attrs.cancel;
return originAttrs;
};
});
const getAttr = (key: string | number) => ({ key });
</script>

37
src/components/Excel/src/ImportExcel.vue
View File

@ -15,12 +15,25 @@
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import XLSX from 'xlsx';
import { dateUtil } from '/@/utils/dateUtil';
import type { ExcelData } from './typing';
export default defineComponent({
name: 'ImportExcel',
props: {
// 日期时间格式。如果不提供或者提供空值，将返回原始Date对象
dateFormat: {
type: String,
},
// 时区调整。实验性功能，仅为了解决读取日期时间值有偏差的问题。目前仅提供了+08:00时区的偏差修正值
// https://github.com/SheetJS/sheetjs/issues/1470#issuecomment-501108554
timeZone: {
type: Number,
default: 8,
},
},
emits: ['success', 'error'],
setup(_, { emit }) {
setup(props, { emit }) {
const inputRef = ref<HTMLInputElement | null>(null);
const loadingRef = ref<Boolean>(false);
@ -51,10 +64,28 @@
*/
function getExcelData(workbook: XLSX.WorkBook) {
const excelData: ExcelData[] = [];
const { dateFormat, timeZone } = props;
for (const sheetName of workbook.SheetNames) {
const worksheet = workbook.Sheets[sheetName];
const header: string[] = getHeaderRow(worksheet);
const results = XLSX.utils.sheet_to_json(worksheet);
let results = XLSX.utils.sheet_to_json(worksheet, {
raw: true,
dateNF: dateFormat, //Not worked
}) as object[];
results = results.map((row: object) => {
for (let field in row) {
if (row[field] instanceof Date) {
if (timeZone === 8) {
row[field].setSeconds(row[field].getSeconds() + 43);
}
if (dateFormat) {
row[field] = dateUtil(row[field]).format(dateFormat);
}
}
}
return row;
});
excelData.push({
header,
results,
@ -76,7 +107,7 @@
reader.onload = async (e) => {
try {
const data = e.target && e.target.result;
const workbook = XLSX.read(data, { type: 'array' });
const workbook = XLSX.read(data, { type: 'array', cellDates: true });
// console.log(workbook);
/* DO SOMETHING WITH workbook HERE */
const excelData = getExcelData(workbook);

1
src/components/Form/index.ts
View File

@ -9,5 +9,6 @@ export { useForm } from './src/hooks/useForm';
export { default as ApiSelect } from './src/components/ApiSelect.vue';
export { default as RadioButtonGroup } from './src/components/RadioButtonGroup.vue';
export { default as ApiTreeSelect } from './src/components/ApiTreeSelect.vue';
export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
export { BasicForm };

2
src/components/Form/src/componentMap.ts
View File

@ -21,6 +21,7 @@ import {
Divider,
} from 'ant-design-vue';
import ApiRadioGroup from './components/ApiRadioGroup.vue';
import RadioButtonGroup from './components/RadioButtonGroup.vue';
import ApiSelect from './components/ApiSelect.vue';
import ApiTreeSelect from './components/ApiTreeSelect.vue';
@ -43,6 +44,7 @@ componentMap.set('Select', Select);
componentMap.set('ApiSelect', ApiSelect);
componentMap.set('TreeSelect', TreeSelect);
componentMap.set('ApiTreeSelect', ApiTreeSelect);
componentMap.set('ApiRadioGroup', ApiRadioGroup);
componentMap.set('Switch', Switch);
componentMap.set('RadioButtonGroup', RadioButtonGroup);
componentMap.set('RadioGroup', Radio.Group);

130
src/components/Form/src/components/ApiRadioGroup.vue Normal file
View File

@ -0,0 +1,130 @@
<!--
* @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
-->
<template>
<RadioGroup v-bind="attrs" v-model:value="state" button-style="solid" @change="handleChange">
<template v-for="item in getOptions" :key="`${item.value}`">
<RadioButton v-if="props.isBtn" :value="item.value" :disabled="item.disabled">
{{ item.label }}
</RadioButton>
<Radio v-else :value="item.value" :disabled="item.disabled">
{{ item.label }}
</Radio>
</template>
</RadioGroup>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, watchEffect, computed, unref, watch } from 'vue';
import { Radio } from 'ant-design-vue';
import { isFunction } from '/@/utils/is';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { propTypes } from '/@/utils/propTypes';
import { get, omit } from 'lodash-es';
import { useI18n } from '/@/hooks/web/useI18n';
type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
export default defineComponent({
name: 'ApiRadioGroup',
components: {
RadioGroup: Radio.Group,
RadioButton: Radio.Button,
Radio,
},
props: {
api: {
type: Function as PropType<(arg?: Recordable | string) => Promise<OptionsItem[]>>,
default: null,
},
params: {
type: [Object, String] as PropType<Recordable | string>,
default: () => ({}),
},
value: {
type: [String, Number, Boolean] as PropType<string | number | boolean>,
},
isBtn: {
type: [Boolean] as PropType<boolean>,
default: false,
},
numberToString: propTypes.bool,
resultField: propTypes.string.def(''),
labelField: propTypes.string.def('label'),
valueField: propTypes.string.def('value'),
immediate: propTypes.bool.def(true),
},
emits: ['options-change', 'change'],
setup(props, { emit }) {
const options = ref<OptionsItem[]>([]);
const loading = ref(false);
const isFirstLoad = ref(true);
const emitData = ref<any[]>([]);
const attrs = useAttrs();
const { t } = useI18n();
// Embedded in the form, just use the hook binding to perform form verification
const [state] = useRuleFormItem(props);
// Processing options value
const getOptions = computed(() => {
const { labelField, valueField, numberToString } = props;
return unref(options).reduce((prev, next: Recordable) => {
if (next) {
const value = next[valueField];
prev.push({
label: next[labelField],
value: numberToString ? `${value}` : value,
...omit(next, [labelField, valueField]),
});
}
return prev;
}, [] as OptionsItem[]);
});
watchEffect(() => {
props.immediate && fetch();
});
watch(
() => props.params,
() => {
!unref(isFirstLoad) && fetch();
},
{ deep: true },
);
async function fetch() {
const api = props.api;
if (!api || !isFunction(api)) return;
options.value = [];
try {
loading.value = true;
const res = await api(props.params);
if (Array.isArray(res)) {
options.value = res;
emitChange();
return;
}
if (props.resultField) {
options.value = get(res, props.resultField) || [];
}
emitChange();
} catch (error) {
console.warn(error);
} finally {
loading.value = false;
}
}
function emitChange() {
emit('options-change', unref(getOptions));
}
function handleChange(_, ...args) {
emitData.value = args;
}
return { state, getOptions, attrs, loading, t, handleChange, props };
},
});
</script>

2
src/components/Form/src/components/ApiSelect.vue
View File

@ -77,9 +77,9 @@
if (next) {
const value = next[valueField];
prev.push({
...omit(next, [labelField, valueField]),
label: next[labelField],
value: numberToString ? `${value}` : value,
...omit(next, [labelField, valueField]),
});
}
return prev;

2
src/components/Form/src/components/ApiTreeSelect.vue
View File

@ -44,7 +44,7 @@
watch(
() => props.params,
() => {
isFirstLoaded.value && fetch();
!unref(isFirstLoaded) && fetch();
},
{ deep: true },
);

2
src/components/Form/src/components/FormItem.vue
View File

@ -340,7 +340,7 @@
wrapperCol={wrapperCol}
>
<div style="display:flex">
<div style="flex:1">{getContent()}</div>
<div style="flex:1;">{getContent()}</div>
{showSuffix && <span class="suffix">{getSuffix}</span>}
</div>
</Form.Item>

2
src/components/Form/src/types/form.ts
View File

@ -129,7 +129,7 @@ export interface FormSchema {
// Variable name bound to v-model Default value
valueField?: string;
// Label name
label: string;
label: string | VNode;
// Auxiliary text
subLabel?: string;
// Help text on the right side of the text

1
src/components/Form/src/types/index.ts
View File

@ -92,6 +92,7 @@ export type ComponentType =
| 'ApiSelect'
| 'TreeSelect'
| 'ApiTreeSelect'
| 'ApiRadioGroup'
| 'RadioButtonGroup'
| 'RadioGroup'
| 'Checkbox'

166
src/components/Icon/src/IconPicker.vue
View File

@ -7,7 +7,7 @@
v-model:value="currentSelect"
>
<template #addonAfter>
<Popover
<a-popover
placement="bottomLeft"
trigger="click"
v-model="visible"
@ -17,7 +17,7 @@
<div class="flex justify-between">
<a-input
:placeholder="t('component.icon.search')"
@change="handleSearchChange"
@change="debounceHandleSearchChange"
allowClear
/>
</div>
@ -53,7 +53,7 @@
</ul>
</ScrollContainer>
<div class="flex py-2 items-center justify-center" v-if="getTotal >= pageSize">
<Pagination
<a-pagination
showLessItems
size="small"
:pageSize="pageSize"
@ -63,7 +63,7 @@
</div>
</div>
<template v-else
><div class="p-5"><Empty /></div>
><div class="p-5"><a-empty /></div>
</template>
</template>
@ -71,16 +71,14 @@
<SvgIcon :name="currentSelect" />
</span>
<Icon :icon="currentSelect || 'ion:apps-outline'" class="cursor-pointer px-2 py-1" v-else />
</Popover>
</a-popover>
</template>
</a-input>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect, watch, unref } from 'vue';
<script lang="ts" setup>
import { ref, watchEffect, watch, unref } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { ScrollContainer } from '/@/components/Container';
import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
import Icon from './Icon.vue';
import SvgIcon from './SvgIcon.vue';
@ -94,6 +92,12 @@
import { useMessage } from '/@/hooks/web/useMessage';
import svgIcons from 'virtual:svg-icons-names';
// 没有使用别名引入，是因为WebStorm当前版本还不能正确识别，会报unused警告
const AInput = Input;
const APopover = Popover;
const APagination = Pagination;
const AEmpty = Empty;
function getIcons() {
const data = iconsData as any;
const prefix: string = data?.prefix ?? '';
@ -110,88 +114,70 @@
return svgIcons.map((icon) => icon.replace('icon-', ''));
}
export default defineComponent({
name: 'IconPicker',
components: { [Input.name]: Input, Icon, Popover, ScrollContainer, Pagination, Empty, SvgIcon },
inheritAttrs: false,
props: {
value: propTypes.string,
width: propTypes.string.def('100%'),
pageSize: propTypes.number.def(140),
copy: propTypes.bool.def(false),
mode: propTypes.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify']).def('iconify'),
},
emits: ['change', 'update:value'],
setup(props, { emit }) {
const isSvgMode = props.mode === 'svg';
const icons = isSvgMode ? getSvgIcons() : getIcons();
const currentSelect = ref('');
const visible = ref(false);
const currentList = ref(icons);
const { t } = useI18n();
const { prefixCls } = useDesign('icon-picker');
const debounceHandleSearchChange = useDebounceFn(handleSearchChange, 100);
const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value);
const { createMessage } = useMessage();
const { getPaginationList, getTotal, setCurrentPage } = usePagination(
currentList,
props.pageSize,
);
watchEffect(() => {
currentSelect.value = props.value;
});
watch(
() => currentSelect.value,
(v) => {
emit('update:value', v);
return emit('change', v);
},
);
function handlePageChange(page: number) {
setCurrentPage(page);
}
function handleClick(icon: string) {
currentSelect.value = icon;
if (props.copy) {
clipboardRef.value = icon;
if (unref(isSuccessRef)) {
createMessage.success(t('component.icon.copy'));
}
}
}
function handleSearchChange(e: ChangeEvent) {
const value = e.target.value;
if (!value) {
setCurrentPage(1);
currentList.value = icons;
return;
}
currentList.value = icons.filter((item) => item.includes(value));
}
return {
t,
prefixCls,
visible,
isSvgMode,
getTotal,
getPaginationList,
handlePageChange,
handleClick,
currentSelect,
handleSearchChange: debounceHandleSearchChange,
};
},
const props = defineProps({
value: propTypes.string,
width: propTypes.string.def('100%'),
pageSize: propTypes.number.def(140),
copy: propTypes.bool.def(false),
mode: propTypes.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify']).def('iconify'),
});
const emit = defineEmits(['change', 'update:value']);
const isSvgMode = props.mode === 'svg';
const icons = isSvgMode ? getSvgIcons() : getIcons();
const currentSelect = ref('');
const visible = ref(false);
const currentList = ref(icons);
const { t } = useI18n();
const { prefixCls } = useDesign('icon-picker');
const debounceHandleSearchChange = useDebounceFn(handleSearchChange, 100);
const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value);
const { createMessage } = useMessage();
const { getPaginationList, getTotal, setCurrentPage } = usePagination(
currentList,
props.pageSize,
);
watchEffect(() => {
currentSelect.value = props.value;
});
watch(
() => currentSelect.value,
(v) => {
emit('update:value', v);
return emit('change', v);
},
);
function handlePageChange(page: number) {
setCurrentPage(page);
}
function handleClick(icon: string) {
currentSelect.value = icon;
if (props.copy) {
clipboardRef.value = icon;
if (unref(isSuccessRef)) {
createMessage.success(t('component.icon.copy'));
}
}
}
function handleSearchChange(e: ChangeEvent) {
const value = e.target.value;
if (!value) {
setCurrentPage(1);
currentList.value = icons;
return;
}
currentList.value = icons.filter((item) => item.includes(value));
}
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-icon-picker';

16
src/components/Loading/src/Loading.vue
View File

@ -1,5 +1,10 @@
<template>
<section class="full-loading" :class="{ absolute }" v-show="loading">
<section
class="full-loading"
:class="{ absolute, [theme]: !!theme }"
:style="[background ? `background-color: ${background}` : '']"
v-show="loading"
>
<Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
</section>
</template>
@ -35,6 +40,9 @@
background: {
type: String as PropType<string>,
},
theme: {
type: String as PropType<'dark' | 'light'>,
},
},
});
</script>
@ -60,8 +68,12 @@
}
html[data-theme='dark'] {
.full-loading {
.full-loading:not(.light) {
background-color: @modal-mask-bg;
}
}
.full-loading.dark {
background-color: @modal-mask-bg;
}
</style>

4
src/components/Menu/src/BasicMenu.vue
View File

@ -134,7 +134,9 @@
isClickGo.value = false;
return;
}
const path = (route || unref(currentRoute)).path;
const path =
(route || unref(currentRoute)).meta?.currentActiveMenu ||
(route || unref(currentRoute)).path;
setOpenKeys(path);
if (unref(currentActiveMenu)) return;
if (props.isHorizontal && unref(getSplit)) {

7
src/components/Modal/src/BasicModal.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal v-bind="getBindValue">
<Modal v-bind="getBindValue" @cancel="handleCancel">
<template #closeIcon v-if="!$slots.closeIcon">
<ModalClose
:canFullscreen="getProps.canFullscreen"
@ -72,6 +72,7 @@
import { basicProps } from './props';
import { useFullScreen } from './hooks/useModalFullScreen';
import { omit } from 'lodash-es';
import { useDesign } from '/@/hooks/web/useDesign';
export default defineComponent({
name: 'BasicModal',
@ -83,6 +84,7 @@
const visibleRef = ref(false);
const propsRef = ref<Partial<ModalProps> | null>(null);
const modalWrapperRef = ref<any>(null);
const { prefixCls } = useDesign('basic-modal');
// modal Bottom and top height
const extHeightRef = ref(0);
@ -175,7 +177,8 @@
// 取消事件
async function handleCancel(e: Event) {
e?.stopPropagation();
// 过滤自定义关闭按钮的空白区域
if ((e.target as HTMLElement)?.classList?.contains(prefixCls + '-close--custom')) return;
if (props.closeFunc && isFunction(props.closeFunc)) {
const isClose: boolean = await props.closeFunc();
visibleRef.value = !isClose;

1
src/components/Modal/src/components/Modal.tsx
View File

@ -9,6 +9,7 @@ export default defineComponent({
name: 'Modal',
inheritAttrs: false,
props: basicProps,
emits: ['cancel'],
setup(props, { slots }) {
const { visible, draggable, destroyOnClose } = toRefs(props);
const attrs = useAttrs();

2
src/components/Modal/src/components/ModalClose.vue
View File

@ -97,7 +97,7 @@
}
}
& span:nth-child(2) {
& span:last-child {
&:hover {
color: @error-color;
}

1
src/components/Modal/src/components/ModalHeader.vue
View File

@ -17,5 +17,6 @@
},
title: { type: String },
},
emits: ['dblclick'],
});
</script>

13
src/components/Table/src/BasicTable.vue
View File

@ -222,7 +222,6 @@
const getBindValues = computed(() => {
const dataSource = unref(getDataSourceRef);
let propsData: Recordable = {
size: 'middle',
// ...(dataSource.length === 0 ? { getPopupContainer: () => document.body } : {}),
...attrs,
customRow,
@ -365,12 +364,6 @@
}
}
&--inset {
.ant-table-wrapper {
padding: 0;
}
}
.ant-tag {
margin-right: 0;
}
@ -431,5 +424,11 @@
padding: 12px 8px;
}
}
&--inset {
.ant-table-wrapper {
padding: 0;
}
}
}
</style>

2
src/components/Table/src/components/editable/EditableCell.vue
View File

@ -246,7 +246,7 @@
if (!record) return false;
const { key, dataIndex } = column;
const value = unref(currentValueRef);
if (!key || !dataIndex) return;
if (!key && !dataIndex) return;
const dataKey = (dataIndex || key) as string;

12
src/components/Table/src/const.ts
View File

@ -2,7 +2,14 @@ import componentSetting from '/@/settings/componentSetting';
const { table } = componentSetting;
const { pageSizeOptions, defaultPageSize, fetchSetting, defaultSortFn, defaultFilterFn } = table;
const {
pageSizeOptions,
defaultPageSize,
fetchSetting,
defaultSize,
defaultSortFn,
defaultFilterFn,
} = table;
export const ROW_KEY = 'key';
@ -15,6 +22,9 @@ export const PAGE_SIZE = defaultPageSize;
// Common interface field settings
export const FETCH_SETTING = fetchSetting;
// Default Size
export const DEFAULT_SIZE = defaultSize;
// Configure general sort function
export const DEFAULT_SORT_FN = defaultSortFn;

8
src/components/Table/src/hooks/useCustomRow.ts
View File

@ -46,6 +46,14 @@ export function useCustomRow(
const isCheckbox = rowSelection.type === 'checkbox';
if (isCheckbox) {
// 找到tr
const tr: HTMLElement = (e as MouseEvent)
.composedPath?.()
.find((dom: HTMLElement) => dom.tagName === 'TR') as HTMLElement;
if (!tr) return;
// 找到Checkbox，检查是否为disabled
const checkBox = tr.querySelector('input[type=checkbox]');
if (!checkBox || checkBox.hasAttribute('disabled')) return;
if (!keys.includes(key)) {
setSelectedRowKeys([...keys, key]);
return;

56
src/components/Table/src/hooks/useDataSource.ts
View File

@ -160,21 +160,39 @@ export function useDataSource(
}
}
function deleteTableDataRecord(record: Recordable | Recordable[]): Recordable | undefined {
function deleteTableDataRecord(rowKey: string | number | string[] | number[]) {
if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
const records = !Array.isArray(record) ? [record] : record;
const recordIndex = records
.map((item) => dataSourceRef.value.findIndex((s) => s.key === item.key)) // 取序号
.filter((item) => item !== undefined)
.sort((a, b) => b - a); // 从大到小排序
for (const index of recordIndex) {
unref(dataSourceRef).splice(index, 1);
unref(propsRef).dataSource?.splice(index, 1);
const rowKeyName = unref(getRowKey);
if (!rowKeyName) return;
const rowKeys = !Array.isArray(rowKey) ? [rowKey] : rowKey;
for (const key of rowKeys) {
let index: number | undefined = dataSourceRef.value.findIndex((row) => {
let targetKeyName: string;
if (typeof rowKeyName === 'function') {
targetKeyName = rowKeyName(row);
} else {
targetKeyName = rowKeyName as string;
}
return row[targetKeyName] === key;
});
if (index >= 0) {
dataSourceRef.value.splice(index, 1);
}
index = unref(propsRef).dataSource?.findIndex((row) => {
let targetKeyName: string;
if (typeof rowKeyName === 'function') {
targetKeyName = rowKeyName(row);
} else {
targetKeyName = rowKeyName as string;
}
return row[targetKeyName] === key;
});
if (typeof index !== 'undefined' && index !== -1)
unref(propsRef).dataSource?.splice(index, 1);
}
setPagination({
total: unref(propsRef).dataSource?.length,
});
return unref(propsRef).dataSource;
}
function insertTableDataRecord(record: Recordable, index: number): Recordable | undefined {
@ -223,8 +241,16 @@ export function useDataSource(
}
async function fetch(opt?: FetchParams) {
const { api, searchInfo, fetchSetting, beforeFetch, afterFetch, useSearchForm, pagination } =
unref(propsRef);
const {
api,
searchInfo,
defSort,
fetchSetting,
beforeFetch,
afterFetch,
useSearchForm,
pagination,
} = unref(propsRef);
if (!api || !isFunction(api)) return;
try {
setLoading(true);
@ -251,6 +277,7 @@ export function useDataSource(
...(useSearchForm ? getFieldsValue() : {}),
...searchInfo,
...(opt?.searchInfo ?? {}),
...defSort,
...sortInfo,
...filterInfo,
...(opt?.sortInfo ?? {}),
@ -275,7 +302,7 @@ export function useDataSource(
setPagination({
current: currentTotalPage,
});
fetch(opt);
return await fetch(opt);
}
}
@ -295,6 +322,7 @@ export function useDataSource(
items: unref(resultItems),
total: resultTotal,
});
return resultItems;
} catch (error) {
emit('fetch-error', error);
dataSourceRef.value = [];
@ -319,7 +347,7 @@ export function useDataSource(
}
async function reload(opt?: FetchParams) {
await fetch(opt);
return await fetch(opt);
}
onMounted(() => {

22
src/components/Table/src/hooks/usePagination.tsx
View File

@ -1,6 +1,6 @@
import type { PaginationProps } from '../types/pagination';
import type { BasicTableProps } from '../types/table';
import { computed, unref, ref, ComputedRef, watchEffect } from 'vue';
import { computed, unref, ref, ComputedRef, watch } from 'vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { isBoolean } from '/@/utils/is';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const';
@ -27,15 +27,17 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) {
const configRef = ref<PaginationProps>({});
const show = ref(true);
watchEffect(() => {
const { pagination } = unref(refProps);
if (!isBoolean(pagination) && pagination) {
configRef.value = {
...unref(configRef),
...(pagination ?? {}),
};
}
});
watch(
() => unref(refProps).pagination,
(pagination) => {
if (!isBoolean(pagination) && pagination) {
configRef.value = {
...unref(configRef),
...(pagination ?? {}),
};
}
},
);
const getPaginationInfo = computed((): PaginationProps | boolean => {
const { pagination } = unref(refProps);

6
src/components/Table/src/hooks/useTable.ts
View File

@ -68,7 +68,7 @@ export function useTable(tableProps?: Props): [
getForm: () => FormActionType;
} = {
reload: async (opt?: FetchParams) => {
getTableInstance().reload(opt);
return await getTableInstance().reload(opt);
},
setProps: (props: Partial<BasicTableProps>) => {
getTableInstance().setProps(props);
@ -122,8 +122,8 @@ export function useTable(tableProps?: Props): [
updateTableData: (index: number, key: string, value: any) => {
return getTableInstance().updateTableData(index, key, value);
},
deleteTableDataRecord: (record: Recordable | Recordable[]) => {
return getTableInstance().deleteTableDataRecord(record);
deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => {
return getTableInstance().deleteTableDataRecord(rowKey);
},
insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => {
return getTableInstance().insertTableDataRecord(record, index);

12
src/components/Table/src/props.ts
View File

@ -7,9 +7,10 @@ import type {
SorterResult,
TableCustomRecord,
TableRowSelection,
SizeType,
} from './types/table';
import type { FormProps } from '/@/components/Form';
import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING } from './const';
import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING, DEFAULT_SIZE } from './const';
import { propTypes } from '/@/utils/propTypes';
export const basicProps = {
@ -69,6 +70,11 @@ export const basicProps = {
type: Object as PropType<Recordable>,
default: null,
},
// 默认的排序参数
defSort: {
type: Object as PropType<Recordable>,
default: null,
},
// 使用搜索表单
useSearchForm: propTypes.bool,
// 表单配置
@ -136,4 +142,8 @@ export const basicProps = {
}) => Promise<any>
>,
},
size: {
type: String as PropType<SizeType>,
default: DEFAULT_SIZE,
},
};

4
src/components/Table/src/types/table.ts
View File

@ -95,7 +95,7 @@ export interface TableActionType {
setPagination: (info: Partial<PaginationProps>) => void;
setTableData: <T = Recordable>(values: T[]) => void;
updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void;
deleteTableDataRecord: (record: Recordable | Recordable[]) => Recordable | void;
deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => void;
insertTableDataRecord: (record: Recordable, index?: number) => Recordable | void;
findTableDataRecord: (rowKey: string | number) => Recordable | void;
getColumns: (opt?: GetColumnsParams) => BasicColumn[];
@ -176,6 +176,8 @@ export interface BasicTableProps<T = any> {
emptyDataIsShowTable?: boolean;
// 额外的请求参数
searchInfo?: Recordable;
// 默认的排序参数
defSort?: Recordable;
// 使用搜索表单
useSearchForm?: boolean;
// 表单配置

4
src/components/Tree/src/Tree.vue
View File

@ -422,8 +422,8 @@
class={`${prefixCls}-title pl-2`}
onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
>
{slots?.title ? (
getSlot(slots, 'title', item)
{item.slots?.title ? (
getSlot(slots, item.slots?.title, item)
) : (
<>
{icon && <TreeIcon icon={icon} />}

6
src/components/Upload/src/UploadModal.vue
View File

@ -187,8 +187,12 @@
item.status = UploadResultStatus.UPLOADING;
const { data } = await props.api?.(
{
...(props.uploadParams || {}),
data: {
...(props.uploadParams || {}),
},
file: item.file,
name: props.name,
filename: props.filename,
},
function onUploadProgress(progressEvent: ProgressEvent) {
const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;

8
src/components/Upload/src/props.ts
View File

@ -34,6 +34,14 @@ export const basicProps = {
default: null,
required: true,
},
name: {
type: String as PropType<string>,
default: 'file',
},
filename: {
type: String as PropType<string>,
default: null,
},
};
export const uploadContainerProps = {

9
src/hooks/component/useFormItem.ts
View File

@ -1,4 +1,4 @@
import type { UnwrapRef, Ref } from 'vue';
import type { UnwrapRef, Ref, WritableComputedRef, DeepReadonly } from 'vue';
import {
reactive,
readonly,
@ -12,6 +12,13 @@ import {
import { isEqual } from 'lodash-es';
export function useRuleFormItem<T extends Recordable, K extends keyof T, V = UnwrapRef<T[K]>>(
props: T,
key?: K,
changeEvent?,
emitData?: Ref<any[]>,
): [WritableComputedRef<V>, (val: V) => void, DeepReadonly<V>];
export function useRuleFormItem<T extends Recordable>(
props: T,
key: keyof T = 'value',

4
src/hooks/web/useTitle.ts
View File

@ -3,6 +3,7 @@ import { useI18n } from '/@/hooks/web/useI18n';
import { useTitle as usePageTitle } from '@vueuse/core';
import { useGlobSetting } from '/@/hooks/setting';
import { useRouter } from 'vue-router';
import { useLocaleStore } from '/@/store/modules/locale';
import { REDIRECT_NAME } from '/@/router/constant';
@ -13,11 +14,12 @@ export function useTitle() {
const { title } = useGlobSetting();
const { t } = useI18n();
const { currentRoute } = useRouter();
const localeStore = useLocaleStore();
const pageTitle = usePageTitle();
watch(
() => currentRoute.value.path,
[() => currentRoute.value.path, () => localeStore.getLocale],
() => {
const route = unref(currentRoute);

6
src/layouts/default/header/components/Breadcrumb.vue
View File

@ -101,12 +101,12 @@
if (!meta) {
return !!name;
}
const { title, hideBreadcrumb, hideMenu } = meta;
if (!title || hideBreadcrumb || hideMenu) {
const { title, hideBreadcrumb } = meta;
if (!title || hideBreadcrumb) {
return false;
}
return true;
}).filter((item) => !item.meta?.hideBreadcrumb || !item.meta?.hideMenu);
}).filter((item) => !item.meta?.hideBreadcrumb);
}
function handleClick(route: RouteLocationMatched, paths: string[], e: Event) {

13
src/layouts/default/tabs/useTabDropdown.ts
View File

@ -34,18 +34,21 @@ export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: Comp
const { meta } = unref(getTargetTab);
const { path } = unref(currentRoute);
// Refresh button
const curItem = state.current;
const isCurItem = curItem ? curItem.path === path : false;
// Refresh button
const index = state.currentIndex;
const refreshDisabled = curItem ? curItem.path !== path : true;
const refreshDisabled = !isCurItem;
// Close left
const closeLeftDisabled = index === 0;
const closeLeftDisabled = index === 0 || !isCurItem;
const disabled = tabStore.getTabList.length === 1;
// Close right
const closeRightDisabled =
index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0;
!isCurItem || (index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0);
const dropMenuList: DropMenu[] = [
{
icon: 'ion:reload-sharp',
@ -78,7 +81,7 @@ export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: Comp
icon: 'dashicons:align-center',
event: MenuEventEnum.CLOSE_OTHER,
text: t('layout.multipleTab.closeOther'),
disabled: disabled,
disabled: disabled || !isCurItem,
},
{
icon: 'clarity:minus-line',

1
src/locales/lang/en/layout.ts
View File

@ -84,6 +84,7 @@ export default {
breadcrumb: 'Breadcrumbs',
breadcrumbIcon: 'Breadcrumbs Icon',
tabs: 'Tabs',
tabDetail: 'Tab Detail',
tabsQuickBtn: 'Tabs quick button',
tabsRedoBtn: 'Tabs redo button',
tabsFoldBtn: 'Tabs flod button',

1
src/locales/lang/en/routes/demo.ts
View File

@ -67,6 +67,7 @@ export default {
feat: 'Page Function',
icon: 'Icon',
tabs: 'Tabs',
tabDetail: 'Tab Detail',
sessionTimeout: 'Session Timeout',
print: 'Print',
contextMenu: 'Context Menu',

1
src/locales/lang/zh-CN/layout.ts
View File

@ -84,6 +84,7 @@ export default {
breadcrumb: '面包屑',
breadcrumbIcon: '面包屑图标',
tabs: '标签页',
tabDetail: '标签详情页',
tabsQuickBtn: '标签页快捷按钮',
tabsRedoBtn: '标签页刷新按钮',
tabsFoldBtn: '标签页折叠按钮',

1
src/locales/lang/zh-CN/routes/demo.ts
View File

@ -67,6 +67,7 @@ export default {
icon: '图标',
sessionTimeout: '登录过期',
tabs: '标签页操作',
tabDetail: '标签详情页',
print: '打印',
contextMenu: '右键菜单',
download: '文件下载',

2
src/router/constant.ts
View File

@ -4,7 +4,7 @@ export const PARENT_LAYOUT_NAME = 'ParentLayout';
export const PAGE_NOT_FOUND_NAME = 'PageNotFound';
export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue');
export const EXCEPTION_COMPONENT = () => import('/@/views/sys/exception/Exception.vue');
/**
* @description: default layout

8
src/router/guard/stateGuard.ts
View File

@ -8,12 +8,12 @@ import { removeTabChangeListener } from '/@/logics/mitt/routeChange';
export function createStateGuard(router: Router) {
router.afterEach((to) => {
const tabStore = useMultipleTabStore();
const userStore = useUserStore();
const appStore = useAppStore();
const permissionStore = usePermissionStore();
// Just enter the login page and clear the authentication information
if (to.path === PageEnum.BASE_LOGIN) {
const tabStore = useMultipleTabStore();
const userStore = useUserStore();
const appStore = useAppStore();
const permissionStore = usePermissionStore();
appStore.resetAllState();
permissionStore.resetState();
tabStore.resetState();

22
src/router/helper/routeHelper.ts
View File

@ -1,7 +1,7 @@
import type { AppRouteModule, AppRouteRecordRaw } from '/@/router/types';
import type { Router, RouteRecordNormalized } from 'vue-router';
import { getParentLayout, LAYOUT } from '/@/router/constant';
import { getParentLayout, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant';
import { cloneDeep, omit } from 'lodash-es';
import { warn } from '/@/utils/log';
import { createRouter, createWebHashHistory } from 'vue-router';
@ -27,7 +27,7 @@ function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
const { component, name } = item;
const { children } = item;
if (component) {
const layoutFound = LayoutMap.get(component as string);
const layoutFound = LayoutMap.get(component.toUpperCase());
if (layoutFound) {
item.component = layoutFound;
} else {
@ -46,20 +46,24 @@ function dynamicImport(
) {
const keys = Object.keys(dynamicViewsModules);
const matchKeys = keys.filter((key) => {
let k = key.replace('../../views', '');
const lastIndex = k.lastIndexOf('.');
k = k.substring(0, lastIndex);
return k === component;
const k = key.replace('../../views', '');
const startFlag = component.startsWith('/');
const endFlag = component.endsWith('.vue') || component.endsWith('.tsx');
const startIndex = startFlag ? 0 : 1;
const lastIndex = endFlag ? k.length : k.lastIndexOf('.');
return k.substring(startIndex, lastIndex) === component;
});
if (matchKeys?.length === 1) {
const matchKey = matchKeys[0];
return dynamicViewsModules[matchKey];
}
if (matchKeys?.length > 1) {
} else if (matchKeys?.length > 1) {
warn(
'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure',
);
return;
} else {
warn('在src/views/下找不到`' + component + '.vue` 或 `' + component + '.tsx`, 请自行创建!');
return EXCEPTION_COMPONENT;
}
}
@ -80,6 +84,8 @@ export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModul
meta.affix = false;
route.meta = meta;
}
} else {
warn('请正确配置路由：' + route?.name + '的component属性');
}
route.children && asyncImportRoute(route.children);
});

18
src/settings/componentSetting.ts
View File

@ -21,15 +21,21 @@ export default {
pageSizeOptions: ['10', '50', '80', '100'],
// Default display quantity on one page
defaultPageSize: 10,
// Default Size
defaultSize: 'middle',
// Custom general sort function
defaultSortFn: (sortInfo: SorterResult) => {
const { field, order } = sortInfo;
return {
// The sort field passed to the backend you
field,
// Sorting method passed to the background asc/desc
order,
};
if (field && order) {
return {
// The sort field passed to the backend you
field,
// Sorting method passed to the background asc/desc
order,
};
} else {
return {};
}
},
// Custom general filter function
defaultFilterFn: (data: Partial<Recordable<string[]>>) => {

63
src/store/modules/multipleTab.ts
View File

@ -26,6 +26,15 @@ function handleGotoPage(router: Router) {
go(unref(router.currentRoute).path, true);
}
const getToTarget = (tabItem: RouteLocationNormalized) => {
const { params, path, query } = tabItem;
return {
params: params || {},
path,
query: query || {},
};
};
const cacheTab = projectSetting.multiTabsSetting.cache;
export const useMultipleTabStore = defineStore({
@ -110,7 +119,7 @@ export const useMultipleTabStore = defineStore({
},
async addTab(route: RouteLocationNormalized) {
const { path, name, fullPath, params, query } = getRawRoute(route);
const { path, name, fullPath, params, query, meta } = getRawRoute(route);
// 404 The page does not need to add a tab
if (
path === PageEnum.ERROR_PAGE ||
@ -140,6 +149,22 @@ export const useMultipleTabStore = defineStore({
this.tabList.splice(updateIndex, 1, curTab);
} else {
// Add tab
// 获取动态路由打开数，超过 0 即代表需要控制打开数
const dynamicLevel = meta?.dynamicLevel ?? -1;
if (dynamicLevel > 0) {
// 如果动态路由层级大于 0 了，那么就要限制该路由的打开数限制了
// 首先获取到真实的路由，使用配置方式减少计算开销.
// const realName: string = path.match(/(\S*)\//)![1];
const realPath = meta?.realPath ?? '';
// 获取到已经打开的动态路由数, 判断是否大于某一个值
if (
this.tabList.filter((e) => e.meta?.realPath ?? '' === realPath).length >= dynamicLevel
) {
// 关闭第一个
const index = this.tabList.findIndex((item) => item.meta.realPath === realPath);
index !== -1 && this.tabList.splice(index, 1);
}
}
this.tabList.push(route);
}
this.updateCacheTab();
@ -147,15 +172,6 @@ export const useMultipleTabStore = defineStore({
},
async closeTab(tab: RouteLocationNormalized, router: Router) {
const getToTarget = (tabItem: RouteLocationNormalized) => {
const { params, path, query } = tabItem;
return {
params: params || {},
path,
query: query || {},
};
};
const close = (route: RouteLocationNormalized) => {
const { fullPath, meta: { affix } = {} } = route;
if (affix) {
@ -196,13 +212,36 @@ export const useMultipleTabStore = defineStore({
toTarget = getToTarget(page);
}
close(currentRoute.value);
replace(toTarget);
await replace(toTarget);
},
// Close according to key
async closeTabByKey(key: string, router: Router) {
const index = this.tabList.findIndex((item) => (item.fullPath || item.path) === key);
index !== -1 && this.closeTab(this.tabList[index], router);
if (index !== -1) {
await this.closeTab(this.tabList[index], router);
const { currentRoute, replace } = router;
// 检查当前路由是否存在于tabList中
const isActivated = this.tabList.findIndex((item) => {
return item.fullPath === currentRoute.value.fullPath;
});
// 如果当前路由不存在于TabList中，尝试切换到其它路由
if (isActivated === -1) {
let pageIndex;
if (index > 0) {
pageIndex = index - 1;
} else if (index < this.tabList.length - 1) {
pageIndex = index + 1;
} else {
pageIndex = -1;
}
if (pageIndex >= 0) {
const page = this.tabList[index - 1];
const toTarget = getToTarget(page);
await replace(toTarget);
}
}
}
},
// Sort the tabs

22
src/utils/http/axios/Axios.ts
View File

@ -1,11 +1,11 @@
import type { AxiosRequestConfig, AxiosInstance, AxiosResponse, AxiosError } from 'axios';
import type { RequestOptions, Result, UploadFileParams } from '../../../../types/axios';
import type { RequestOptions, Result, UploadFileParams } from '/#/axios';
import type { CreateAxiosOptions } from './axiosTransform';
import axios from 'axios';
import qs from 'qs';
import { AxiosCanceler } from './axiosCancel';
import { isFunction } from '/@/utils/is';
import { cloneDeep, omit } from 'lodash-es';
import { cloneDeep } from 'lodash-es';
import { ContentTypeEnum } from '/@/enums/httpEnum';
import { RequestEnum } from '/@/enums/httpEnum';
@ -121,11 +121,17 @@ export class VAxios {
*/
uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
const formData = new window.FormData();
const customFilename = params.name || 'file';
if (params.filename) {
formData.append(customFilename, params.file, params.filename);
} else {
formData.append(customFilename, params.file);
}
if (params.data) {
Object.keys(params.data).forEach((key) => {
if (!params.data) return;
const value = params.data[key];
const value = params.data![key];
if (Array.isArray(value)) {
value.forEach((item) => {
formData.append(`${key}[]`, item);
@ -133,15 +139,9 @@ export class VAxios {
return;
}
formData.append(key, params.data[key]);
formData.append(key, params.data![key]);
});
}
formData.append(params.name || 'file', params.file, params.filename);
const customParams = omit(params, 'file', 'filename', 'file');
Object.keys(customParams).forEach((key) => {
formData.append(key, customParams[key]);
});
return this.axiosInstance.request<T>({
...config,

8
src/utils/http/axios/index.ts
View File

@ -15,6 +15,7 @@ import { setObjToUrlParams, deepMerge } from '/@/utils';
import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
import { useI18n } from '/@/hooks/web/useI18n';
import { joinTimestamp, formatRequestDate } from './helper';
import { useUserStoreWithOut } from '/@/store/modules/user';
const globSetting = useGlobSetting();
const urlPrefix = globSetting.urlPrefix;
@ -61,6 +62,9 @@ const transform: AxiosTransform = {
switch (code) {
case ResultEnum.TIMEOUT:
timeoutMsg = t('sys.api.timeoutMessage');
const userStore = useUserStoreWithOut();
userStore.setToken(undefined);
userStore.logout(true);
break;
default:
if (message) {
@ -136,7 +140,7 @@ const transform: AxiosTransform = {
const token = getToken();
if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
// jwt token
config.headers.Authorization = options.authenticationScheme
(config as Recordable).headers.Authorization = options.authenticationScheme
? `${options.authenticationScheme} ${token}`
: token;
}
@ -180,7 +184,7 @@ const transform: AxiosTransform = {
return Promise.reject(error);
}
} catch (error) {
throw new Error(error);
throw new Error(error as unknown as string);
}
checkStatus(error?.response?.status, msg, errorMessageMode);

16
src/views/sys/login/LoginForm.vue
View File

@ -82,7 +82,7 @@
</Form>
</template>
<script lang="ts" setup>
import { reactive, ref, toRaw, unref, computed } from 'vue';
import { reactive, ref, unref, computed } from 'vue';
import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
import {
@ -134,13 +134,11 @@
if (!data) return;
try {
loading.value = true;
const userInfo = await userStore.login(
toRaw({
password: data.password,
username: data.account,
mode: 'none', //不要默认的错误提示
}),
);
const userInfo = await userStore.login({
password: data.password,
username: data.account,
mode: 'none', //不要默认的错误提示
});
if (userInfo) {
notification.success({
message: t('sys.login.loginSuccessTitle'),
@ -151,7 +149,7 @@
} catch (error) {
createErrorModal({
title: t('sys.api.errorTip'),
content: error.message || t('sys.api.networkExceptionMsg'),
content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
});
} finally {

14
tests/server/package.json
View File

@ -11,7 +11,7 @@
},
"dependencies": {
"fs-extra": "^10.0.0",
"koa": "^2.13.1",
"koa": "^2.13.4",
"koa-body": "^4.2.0",
"koa-bodyparser": "^4.3.0",
"koa-route": "^3.2.0",
@ -24,13 +24,13 @@
"@types/koa": "^2.13.4",
"@types/koa-bodyparser": "^5.0.2",
"@types/koa-router": "^7.4.4",
"@types/node": "^16.9.1",
"nodemon": "^2.0.12",
"pm2": "^5.1.1",
"@types/node": "^16.11.1",
"nodemon": "^2.0.14",
"pm2": "^5.1.2",
"rimraf": "^3.0.2",
"ts-node": "^10.2.1",
"ts-node": "^10.3.0",
"tsconfig-paths": "^3.11.0",
"tsup": "^4.14.0",
"typescript": "^4.4.3"
"tsup": "^5.4.2",
"typescript": "^4.4.4"
}
}

4
types/vue-router.d.ts vendored
View File

@ -5,6 +5,10 @@ declare module 'vue-router' {
orderNo?: number;
// title
title: string;
// dynamic router level.
dynamicLevel?: number;
// dynamic router real route path (For performance).
realPath?: string;
// Whether to ignore permissions
ignoreAuth?: boolean;
// role info

2
windi.config.ts
View File

@ -1,4 +1,3 @@
import colors from 'windicss/colors';
import { defineConfig } from 'vite-plugin-windicss';
import { primaryColor } from './build/config/themeConfig';
@ -11,7 +10,6 @@ export default defineConfig({
'-1': '-1',
},
colors: {
...colors,
primary: primaryColor,
},
screens: {

9098
yarn.lock
View File

File diff suppressed because it is too large Load Diff