refactor: 升级框架
This commit is contained in:
caiyuchao
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/design",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/icons",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -68,6 +68,7 @@ export {
|
||||
Sun,
|
||||
SunMoon,
|
||||
SwatchBook,
|
||||
Trash2,
|
||||
Upload,
|
||||
UserRoundPen,
|
||||
X,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/shared",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -40,6 +40,44 @@ export async function downloadFileFromUrl({
|
||||
openWindow(source, { target });
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载图片（允许跨域）
|
||||
* @param url - 图片 URL
|
||||
* @param canvasWidth - 画布宽度
|
||||
* @param canvasHeight - 画布高度
|
||||
* @param drawWithImageSize - 将图片绘制在画布上时带上图片的宽高值, 默认是要带上的
|
||||
* @returns
|
||||
*/
|
||||
export function downloadImageByCanvas({
|
||||
url,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
drawWithImageSize = true,
|
||||
}: {
|
||||
canvasHeight?: number;
|
||||
canvasWidth?: number;
|
||||
drawWithImageSize?: boolean;
|
||||
url: string;
|
||||
}) {
|
||||
const image = new Image();
|
||||
// image.setAttribute('crossOrigin', 'anonymous')
|
||||
image.src = url;
|
||||
image.addEventListener('load', () => {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = canvasWidth || image.width;
|
||||
canvas.height = canvasHeight || image.height;
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
ctx?.clearRect(0, 0, canvas.width, canvas.height);
|
||||
if (drawWithImageSize) {
|
||||
ctx.drawImage(image, 0, 0, image.width, image.height);
|
||||
} else {
|
||||
ctx.drawImage(image, 0, 0);
|
||||
}
|
||||
const url = canvas.toDataURL('image/png');
|
||||
downloadFileFromImageUrl({ source: url, fileName: 'image.png' });
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 通过 Base64 下载文件
|
||||
*/
|
||||
@@ -140,6 +178,63 @@ export function urlToBase64(url: string, mineType?: string): Promise<string> {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 Base64 字符串转换为文件对象
|
||||
* @param base64 - Base64 字符串
|
||||
* @param fileName - 文件名
|
||||
* @returns File 对象
|
||||
*/
|
||||
export function base64ToFile(base64: string, fileName: string): File {
|
||||
// 输入验证
|
||||
if (!base64 || typeof base64 !== 'string') {
|
||||
throw new Error('base64 参数必须是非空字符串');
|
||||
}
|
||||
|
||||
// 将 base64 按照逗号进行分割，将前缀与后续内容分隔开
|
||||
const data = base64.split(',');
|
||||
if (data.length !== 2 || !data[0] || !data[1]) {
|
||||
throw new Error('无效的 base64 格式');
|
||||
}
|
||||
|
||||
// 利用正则表达式从前缀中获取类型信息（image/png、image/jpeg、image/webp等）
|
||||
const typeMatch = data[0].match(/:(.*?);/);
|
||||
if (!typeMatch || !typeMatch[1]) {
|
||||
throw new Error('无法解析 base64 类型信息');
|
||||
}
|
||||
const type = typeMatch[1];
|
||||
|
||||
// 从类型信息中获取具体的文件格式后缀（png、jpeg、webp）
|
||||
const typeParts = type.split('/');
|
||||
if (typeParts.length !== 2 || !typeParts[1]) {
|
||||
throw new Error('无效的 MIME 类型格式');
|
||||
}
|
||||
const suffix = typeParts[1];
|
||||
|
||||
try {
|
||||
// 使用 atob() 对 base64 数据进行解码，结果是一个文件数据流以字符串的格式输出
|
||||
const bstr = window.atob(data[1]);
|
||||
|
||||
// 获取解码结果字符串的长度
|
||||
const n = bstr.length;
|
||||
// 根据解码结果字符串的长度创建一个等长的整型数字数组
|
||||
const u8arr = new Uint8Array(n);
|
||||
|
||||
// 优化的 Uint8Array 填充逻辑
|
||||
for (let i = 0; i < n; i++) {
|
||||
// 使用 charCodeAt() 获取字符对应的字节值（Base64 解码后的字符串是字节级别的）
|
||||
// eslint-disable-next-line unicorn/prefer-code-point
|
||||
u8arr[i] = bstr.charCodeAt(i);
|
||||
}
|
||||
|
||||
// 返回 File 文件对象
|
||||
return new File([u8arr], `${fileName}.${suffix}`, { type });
|
||||
} catch (error) {
|
||||
throw new Error(
|
||||
`Base64 解码失败: ${error instanceof Error ? error.message : '未知错误'}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用下载触发函数
|
||||
* @param href - 文件下载的 URL
|
||||
|
||||
@@ -3,6 +3,7 @@ export * from './date';
|
||||
export * from './diff';
|
||||
export * from './dom';
|
||||
export * from './download';
|
||||
export * from './formatNumber';
|
||||
export * from './inference';
|
||||
export * from './letter';
|
||||
export * from './merge';
|
||||
@@ -13,6 +14,7 @@ export * from './to';
|
||||
export * from './tree';
|
||||
export * from './unique';
|
||||
export * from './update-css-variables';
|
||||
export * from './upload';
|
||||
export * from './util';
|
||||
export * from './uuid'; // add by 芋艿：从 vben2.0 复制
|
||||
export * from './window';
|
||||
|
||||
@@ -1,43 +1,299 @@
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
/** 时间段选择器拓展 */
|
||||
export function rangePickerExtend() {
|
||||
return {
|
||||
// 显示格式
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
placeholder: ['开始时间', '结束时间'],
|
||||
ranges: {
|
||||
今天: [dayjs().startOf('day'), dayjs().endOf('day')],
|
||||
最近7天: [
|
||||
dayjs().subtract(7, 'day').startOf('day'),
|
||||
dayjs().endOf('day'),
|
||||
],
|
||||
最近30天: [
|
||||
dayjs().subtract(30, 'day').startOf('day'),
|
||||
dayjs().endOf('day'),
|
||||
],
|
||||
昨天: [
|
||||
dayjs().subtract(1, 'day').startOf('day'),
|
||||
dayjs().subtract(1, 'day').endOf('day'),
|
||||
],
|
||||
本周: [dayjs().startOf('week'), dayjs().endOf('day')],
|
||||
本月: [dayjs().startOf('month'), dayjs().endOf('day')],
|
||||
},
|
||||
showTime: {
|
||||
defaultValue: [
|
||||
dayjs('00:00:00', 'HH:mm:ss'),
|
||||
dayjs('23:59:59', 'HH:mm:ss'),
|
||||
],
|
||||
format: 'HH:mm:ss',
|
||||
},
|
||||
transformDateFunc: (dates: any) => {
|
||||
if (dates && dates.length === 2) {
|
||||
// 格式化为后台支持的时间格式
|
||||
return [dates.createTime[0], dates.createTime[1]].join(',');
|
||||
import { formatDate } from './date';
|
||||
|
||||
/**
|
||||
* @param {Date | number | string} time 需要转换的时间
|
||||
* @param {string} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
|
||||
*/
|
||||
export function formatTime(time: Date | number | string, fmt: string) {
|
||||
if (time) {
|
||||
const date = new Date(time);
|
||||
const o = {
|
||||
'M+': date.getMonth() + 1,
|
||||
'd+': date.getDate(),
|
||||
'H+': date.getHours(),
|
||||
'm+': date.getMinutes(),
|
||||
's+': date.getSeconds(),
|
||||
'q+': Math.floor((date.getMonth() + 3) / 3),
|
||||
S: date.getMilliseconds(),
|
||||
};
|
||||
const yearMatch = fmt.match(/y+/);
|
||||
if (yearMatch) {
|
||||
fmt = fmt.replace(
|
||||
yearMatch[0],
|
||||
`${date.getFullYear()}`.slice(4 - yearMatch[0].length),
|
||||
);
|
||||
}
|
||||
for (const k in o) {
|
||||
const match = fmt.match(new RegExp(`(${k})`));
|
||||
if (match) {
|
||||
fmt = fmt.replace(
|
||||
match[0],
|
||||
match[0].length === 1
|
||||
? (o[k as keyof typeof o] as any)
|
||||
: `00${o[k as keyof typeof o]}`.slice(
|
||||
`${o[k as keyof typeof o]}`.length,
|
||||
),
|
||||
);
|
||||
}
|
||||
return {};
|
||||
},
|
||||
// 如果需要10位时间戳（秒级）可以使用 valueFormat: 'X'
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
};
|
||||
}
|
||||
return fmt;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期是第几周
|
||||
* @param dateTime 当前传入的日期值
|
||||
* @returns 返回第几周数字值
|
||||
*/
|
||||
export function getWeek(dateTime: Date): number {
|
||||
const temptTime = new Date(dateTime);
|
||||
// 周几
|
||||
const weekday = temptTime.getDay() || 7;
|
||||
// 周1+5天=周六
|
||||
temptTime.setDate(temptTime.getDate() - weekday + 1 + 5);
|
||||
let firstDay = new Date(temptTime.getFullYear(), 0, 1);
|
||||
const dayOfWeek = firstDay.getDay();
|
||||
let spendDay = 1;
|
||||
if (dayOfWeek !== 0) spendDay = 7 - dayOfWeek + 1;
|
||||
firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
|
||||
const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86_400_000);
|
||||
return Math.ceil(d / 7);
|
||||
}
|
||||
|
||||
/**
|
||||
* 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
|
||||
* @param param 当前时间，new Date() 格式或者字符串时间格式
|
||||
* @param format 需要转换的时间格式字符串
|
||||
* @description param 10秒： 10 * 1000
|
||||
* @description param 1分： 60 * 1000
|
||||
* @description param 1小时： 60 * 60 * 1000
|
||||
* @description param 24小时：60 * 60 * 24 * 1000
|
||||
* @description param 3天： 60 * 60* 24 * 1000 * 3
|
||||
* @returns 返回拼接后的时间字符串
|
||||
*/
|
||||
export function formatPast(
|
||||
param: Date | string,
|
||||
format = 'YYYY-MM-DD HH:mm:ss',
|
||||
): string {
|
||||
// 传入格式处理、存储转换值
|
||||
let s: number, t: any;
|
||||
// 获取js 时间戳
|
||||
let time: number = Date.now();
|
||||
// 是否是对象
|
||||
typeof param === 'string' || typeof param === 'object'
|
||||
? (t = new Date(param).getTime())
|
||||
: (t = param);
|
||||
// 当前时间戳 - 传入时间戳
|
||||
time = Number.parseInt(`${time - t}`);
|
||||
if (time < 10_000) {
|
||||
// 10秒内
|
||||
return '刚刚';
|
||||
} else if (time < 60_000 && time >= 10_000) {
|
||||
// 超过10秒少于1分钟内
|
||||
s = Math.floor(time / 1000);
|
||||
return `${s}秒前`;
|
||||
} else if (time < 3_600_000 && time >= 60_000) {
|
||||
// 超过1分钟少于1小时
|
||||
s = Math.floor(time / 60_000);
|
||||
return `${s}分钟前`;
|
||||
} else if (time < 86_400_000 && time >= 3_600_000) {
|
||||
// 超过1小时少于24小时
|
||||
s = Math.floor(time / 3_600_000);
|
||||
return `${s}小时前`;
|
||||
} else if (time < 259_200_000 && time >= 86_400_000) {
|
||||
// 超过1天少于3天内
|
||||
s = Math.floor(time / 86_400_000);
|
||||
return `${s}天前`;
|
||||
} else {
|
||||
// 超过3天
|
||||
const date =
|
||||
typeof param === 'string' || typeof param === 'object'
|
||||
? new Date(param)
|
||||
: param;
|
||||
return formatDate(date, format) as string;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 时间问候语
|
||||
* @param param 当前时间，new Date() 格式
|
||||
* @description param 调用 `formatAxis(new Date())` 输出 `上午好`
|
||||
* @returns 返回拼接后的时间字符串
|
||||
*/
|
||||
export function formatAxis(param: Date): string {
|
||||
const hour: number = new Date(param).getHours();
|
||||
if (hour < 6) return '凌晨好';
|
||||
else if (hour < 9) return '早上好';
|
||||
else if (hour < 12) return '上午好';
|
||||
else if (hour < 14) return '中午好';
|
||||
else if (hour < 17) return '下午好';
|
||||
else if (hour < 19) return '傍晚好';
|
||||
else if (hour < 22) return '晚上好';
|
||||
else return '夜里好';
|
||||
}
|
||||
|
||||
/**
|
||||
* 将毫秒，转换成时间字符串。例如说，xx 分钟
|
||||
*
|
||||
* @param ms 毫秒
|
||||
* @returns {string} 字符串
|
||||
*/
|
||||
export function formatPast2(ms: number): string {
|
||||
const day = Math.floor(ms / (24 * 60 * 60 * 1000));
|
||||
const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24);
|
||||
const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60);
|
||||
const second = Math.floor(
|
||||
ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60,
|
||||
);
|
||||
if (day > 0) {
|
||||
return `${day} 天${hour} 小时 ${minute} 分钟`;
|
||||
}
|
||||
if (hour > 0) {
|
||||
return `${hour} 小时 ${minute} 分钟`;
|
||||
}
|
||||
if (minute > 0) {
|
||||
return `${minute} 分钟`;
|
||||
}
|
||||
return second > 0 ? `${second} 秒` : `${0} 秒`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置起始日期，时间为00:00:00
|
||||
* @param param 传入日期
|
||||
* @returns 带时间00:00:00的日期
|
||||
*/
|
||||
export function beginOfDay(param: Date): Date {
|
||||
return new Date(
|
||||
param.getFullYear(),
|
||||
param.getMonth(),
|
||||
param.getDate(),
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置结束日期，时间为23:59:59
|
||||
* @param param 传入日期
|
||||
* @returns 带时间23:59:59的日期
|
||||
*/
|
||||
export function endOfDay(param: Date): Date {
|
||||
return new Date(
|
||||
param.getFullYear(),
|
||||
param.getMonth(),
|
||||
param.getDate(),
|
||||
23,
|
||||
59,
|
||||
59,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算两个日期间隔天数
|
||||
* @param param1 日期1
|
||||
* @param param2 日期2
|
||||
*/
|
||||
export function betweenDay(param1: Date, param2: Date): number {
|
||||
param1 = convertDate(param1);
|
||||
param2 = convertDate(param2);
|
||||
// 计算差值
|
||||
return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000));
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期计算
|
||||
* @param param1 日期
|
||||
* @param param2 添加的时间
|
||||
*/
|
||||
export function addTime(param1: Date, param2: number): Date {
|
||||
param1 = convertDate(param1);
|
||||
return new Date(param1.getTime() + param2);
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期转换
|
||||
* @param param 日期
|
||||
*/
|
||||
export function convertDate(param: Date | string): Date {
|
||||
if (typeof param === 'string') {
|
||||
return new Date(param);
|
||||
}
|
||||
return param;
|
||||
}
|
||||
|
||||
/**
|
||||
* 指定的两个日期, 是否为同一天
|
||||
* @param a 日期 A
|
||||
* @param b 日期 B
|
||||
*/
|
||||
export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
|
||||
if (!a || !b) return false;
|
||||
|
||||
const aa = dayjs(a);
|
||||
const bb = dayjs(b);
|
||||
return (
|
||||
aa.year() === bb.year() &&
|
||||
aa.month() === bb.month() &&
|
||||
aa.day() === bb.day()
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取一天的开始时间、截止时间
|
||||
* @param date 日期
|
||||
* @param days 天数
|
||||
*/
|
||||
export function getDayRange(
|
||||
date: dayjs.ConfigType,
|
||||
days: number,
|
||||
): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const day = dayjs(date).add(days, 'd');
|
||||
return getDateRange(day, day);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近7天的开始时间、截止时间
|
||||
*/
|
||||
export function getLast7Days(): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const lastWeekDay = dayjs().subtract(7, 'd');
|
||||
const yesterday = dayjs().subtract(1, 'd');
|
||||
return getDateRange(lastWeekDay, yesterday);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近30天的开始时间、截止时间
|
||||
*/
|
||||
export function getLast30Days(): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const lastMonthDay = dayjs().subtract(30, 'd');
|
||||
const yesterday = dayjs().subtract(1, 'd');
|
||||
return getDateRange(lastMonthDay, yesterday);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近1年的开始时间、截止时间
|
||||
*/
|
||||
export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const lastYearDay = dayjs().subtract(1, 'y');
|
||||
const yesterday = dayjs().subtract(1, 'd');
|
||||
return getDateRange(lastYearDay, yesterday);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定日期的开始时间、截止时间
|
||||
* @param beginDate 开始日期
|
||||
* @param endDate 截止日期
|
||||
*/
|
||||
export function getDateRange(
|
||||
beginDate: dayjs.ConfigType,
|
||||
endDate: dayjs.ConfigType,
|
||||
): [string, string] {
|
||||
return [
|
||||
dayjs(beginDate).startOf('d').format('YYYY-MM-DD HH:mm:ss'),
|
||||
dayjs(endDate).endOf('d').format('YYYY-MM-DD HH:mm:ss'),
|
||||
];
|
||||
}
|
||||
|
||||
@@ -164,4 +164,48 @@ function handleTree(
|
||||
return tree;
|
||||
}
|
||||
|
||||
export { filterTree, handleTree, mapTree, traverseTreeValues };
|
||||
/**
|
||||
* 获取节点的完整结构
|
||||
* @param tree 树数据
|
||||
* @param nodeId 节点 id
|
||||
*/
|
||||
function treeToString(tree: any[], nodeId: number | string) {
|
||||
if (tree === undefined || !Array.isArray(tree) || tree.length === 0) {
|
||||
console.warn('tree must be an array');
|
||||
return '';
|
||||
}
|
||||
// 校验是否是一级节点
|
||||
const node = tree.find((item) => item.id === nodeId);
|
||||
if (node !== undefined) {
|
||||
return node.name;
|
||||
}
|
||||
let str = '';
|
||||
|
||||
function performAThoroughValidation(arr: any[]) {
|
||||
if (arr === undefined || !Array.isArray(arr) || arr.length === 0) {
|
||||
return false;
|
||||
}
|
||||
for (const item of arr) {
|
||||
if (item.id === nodeId) {
|
||||
str += ` / ${item.name}`;
|
||||
return true;
|
||||
} else if (item.children !== undefined && item.children.length > 0) {
|
||||
str += ` / ${item.name}`;
|
||||
if (performAThoroughValidation(item.children)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const item of tree) {
|
||||
str = `${item.name}`;
|
||||
if (performAThoroughValidation(item.children)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
export { filterTree, handleTree, mapTree, traverseTreeValues, treeToString };
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/typings",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
3
packages/@core/base/typings/src/app.d.ts
vendored
3
packages/@core/base/typings/src/app.d.ts
vendored
@@ -60,8 +60,9 @@ type BreadcrumbStyleType = 'background' | 'normal';
|
||||
* 权限模式
|
||||
* backend 后端权限模式
|
||||
* frontend 前端权限模式
|
||||
* mixed 混合权限模式
|
||||
*/
|
||||
type AccessModeType = 'backend' | 'frontend';
|
||||
type AccessModeType = 'backend' | 'frontend' | 'mixed';
|
||||
|
||||
/**
|
||||
* 导航风格
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
import type { RouteLocationNormalized } from 'vue-router';
|
||||
|
||||
export type TabDefinition = RouteLocationNormalized;
|
||||
export interface TabDefinition extends RouteLocationNormalized {
|
||||
/**
|
||||
* 标签页的key
|
||||
*/
|
||||
key?: string;
|
||||
}
|
||||
|
||||
@@ -43,6 +43,10 @@ interface RouteMeta {
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| string;
|
||||
/**
|
||||
* 路由的完整路径作为key（默认true）
|
||||
*/
|
||||
fullPathKey?: boolean;
|
||||
/**
|
||||
* 当前路由的子级在菜单中不展现
|
||||
* @default false
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/composables",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -10,6 +10,12 @@ exports[`defaultPreferences immutability test > should not modify the config obj
|
||||
"colorWeakMode": false,
|
||||
"compact": false,
|
||||
"contentCompact": "wide",
|
||||
"contentCompactWidth": 1200,
|
||||
"contentPadding": 0,
|
||||
"contentPaddingBottom": 0,
|
||||
"contentPaddingLeft": 0,
|
||||
"contentPaddingRight": 0,
|
||||
"contentPaddingTop": 0,
|
||||
"defaultAvatar": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp",
|
||||
"defaultHomePath": "/analytics",
|
||||
"dynamicTitle": true,
|
||||
@@ -23,6 +29,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
|
||||
"name": "Vben Admin",
|
||||
"preferencesButtonPosition": "auto",
|
||||
"watermark": false,
|
||||
"zIndex": 200,
|
||||
},
|
||||
"breadcrumb": {
|
||||
"enable": true,
|
||||
@@ -43,15 +50,18 @@ exports[`defaultPreferences immutability test > should not modify the config obj
|
||||
"footer": {
|
||||
"enable": false,
|
||||
"fixed": false,
|
||||
"height": 32,
|
||||
},
|
||||
"header": {
|
||||
"enable": true,
|
||||
"height": 50,
|
||||
"hidden": false,
|
||||
"menuAlign": "start",
|
||||
"mode": "fixed",
|
||||
},
|
||||
"logo": {
|
||||
"enable": true,
|
||||
"fit": "contain",
|
||||
"source": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp",
|
||||
},
|
||||
"navigation": {
|
||||
@@ -68,14 +78,17 @@ exports[`defaultPreferences immutability test > should not modify the config obj
|
||||
},
|
||||
"sidebar": {
|
||||
"autoActivateChild": false,
|
||||
"collapseWidth": 60,
|
||||
"collapsed": false,
|
||||
"collapsedButton": true,
|
||||
"collapsedShowTitle": false,
|
||||
"enable": true,
|
||||
"expandOnHover": true,
|
||||
"extraCollapse": false,
|
||||
"extraCollapsedWidth": 60,
|
||||
"fixedButton": true,
|
||||
"hidden": false,
|
||||
"mixedWidth": 80,
|
||||
"width": 224,
|
||||
},
|
||||
"tabbar": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/preferences",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -9,6 +9,12 @@ const defaultPreferences: Preferences = {
|
||||
colorWeakMode: false,
|
||||
compact: false,
|
||||
contentCompact: 'wide',
|
||||
contentCompactWidth: 1200,
|
||||
contentPadding: 0,
|
||||
contentPaddingBottom: 0,
|
||||
contentPaddingLeft: 0,
|
||||
contentPaddingRight: 0,
|
||||
contentPaddingTop: 0,
|
||||
defaultAvatar:
|
||||
'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
|
||||
defaultHomePath: '/analytics',
|
||||
@@ -23,6 +29,7 @@ const defaultPreferences: Preferences = {
|
||||
name: 'Vben Admin',
|
||||
preferencesButtonPosition: 'auto',
|
||||
watermark: false,
|
||||
zIndex: 200,
|
||||
},
|
||||
breadcrumb: {
|
||||
enable: true,
|
||||
@@ -43,15 +50,19 @@ const defaultPreferences: Preferences = {
|
||||
footer: {
|
||||
enable: false,
|
||||
fixed: false,
|
||||
height: 32,
|
||||
},
|
||||
header: {
|
||||
enable: true,
|
||||
height: 50,
|
||||
hidden: false,
|
||||
menuAlign: 'start',
|
||||
mode: 'fixed',
|
||||
},
|
||||
|
||||
logo: {
|
||||
enable: true,
|
||||
fit: 'contain',
|
||||
source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
|
||||
},
|
||||
navigation: {
|
||||
@@ -71,11 +82,14 @@ const defaultPreferences: Preferences = {
|
||||
collapsed: false,
|
||||
collapsedButton: true,
|
||||
collapsedShowTitle: false,
|
||||
collapseWidth: 60,
|
||||
enable: true,
|
||||
expandOnHover: true,
|
||||
extraCollapse: false,
|
||||
extraCollapsedWidth: 60,
|
||||
fixedButton: true,
|
||||
hidden: false,
|
||||
mixedWidth: 80,
|
||||
width: 224,
|
||||
},
|
||||
tabbar: {
|
||||
|
||||
@@ -33,6 +33,18 @@ interface AppPreferences {
|
||||
compact: boolean;
|
||||
/** 是否开启内容紧凑模式 */
|
||||
contentCompact: ContentCompactType;
|
||||
/** 内容紧凑宽度 */
|
||||
contentCompactWidth: number;
|
||||
/** 内容内边距 */
|
||||
contentPadding: number;
|
||||
/** 内容底部内边距 */
|
||||
contentPaddingBottom: number;
|
||||
/** 内容左侧内边距 */
|
||||
contentPaddingLeft: number;
|
||||
/** 内容右侧内边距 */
|
||||
contentPaddingRight: number;
|
||||
/** 内容顶部内边距 */
|
||||
contentPaddingTop: number;
|
||||
// /** 应用默认头像 */
|
||||
defaultAvatar: string;
|
||||
/** 默认首页地址 */
|
||||
@@ -63,6 +75,8 @@ interface AppPreferences {
|
||||
* @zh_CN 是否开启水印
|
||||
*/
|
||||
watermark: boolean;
|
||||
/** z-index */
|
||||
zIndex: number;
|
||||
}
|
||||
|
||||
interface BreadcrumbPreferences {
|
||||
@@ -100,11 +114,15 @@ interface FooterPreferences {
|
||||
enable: boolean;
|
||||
/** 底栏是否固定 */
|
||||
fixed: boolean;
|
||||
/** 底栏高度 */
|
||||
height: number;
|
||||
}
|
||||
|
||||
interface HeaderPreferences {
|
||||
/** 顶栏是否启用 */
|
||||
enable: boolean;
|
||||
/** 顶栏高度 */
|
||||
height: number;
|
||||
/** 顶栏是否隐藏,css-隐藏 */
|
||||
hidden: boolean;
|
||||
/** 顶栏菜单位置 */
|
||||
@@ -116,6 +134,8 @@ interface HeaderPreferences {
|
||||
interface LogoPreferences {
|
||||
/** logo是否可见 */
|
||||
enable: boolean;
|
||||
/** logo图片适应方式 */
|
||||
fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
|
||||
/** logo地址 */
|
||||
source: string;
|
||||
}
|
||||
@@ -138,16 +158,22 @@ interface SidebarPreferences {
|
||||
collapsedButton: boolean;
|
||||
/** 侧边栏折叠时，是否显示title */
|
||||
collapsedShowTitle: boolean;
|
||||
/** 侧边栏折叠宽度 */
|
||||
collapseWidth: number;
|
||||
/** 侧边栏是否可见 */
|
||||
enable: boolean;
|
||||
/** 菜单自动展开状态 */
|
||||
expandOnHover: boolean;
|
||||
/** 侧边栏扩展区域是否折叠 */
|
||||
extraCollapse: boolean;
|
||||
/** 侧边栏扩展区域折叠宽度 */
|
||||
extraCollapsedWidth: number;
|
||||
/** 侧边栏固定按钮是否可见 */
|
||||
fixedButton: boolean;
|
||||
/** 侧边栏是否隐藏 - css */
|
||||
hidden: boolean;
|
||||
/** 混合侧边栏宽度 */
|
||||
mixedWidth: number;
|
||||
/** 侧边栏宽度 */
|
||||
width: number;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/form-ui",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -11,7 +11,7 @@ import type { Recordable } from '@vben-core/typings';
|
||||
|
||||
import type { FormActions, FormSchema, VbenFormProps } from './types';
|
||||
|
||||
import { toRaw } from 'vue';
|
||||
import { isRef, toRaw } from 'vue';
|
||||
|
||||
import { Store } from '@vben-core/shared/store';
|
||||
import {
|
||||
@@ -100,9 +100,26 @@ export class FormApi {
|
||||
getFieldComponentRef<T = ComponentPublicInstance>(
|
||||
fieldName: string,
|
||||
): T | undefined {
|
||||
return this.componentRefMap.has(fieldName)
|
||||
? (this.componentRefMap.get(fieldName) as T)
|
||||
let target = this.componentRefMap.has(fieldName)
|
||||
? (this.componentRefMap.get(fieldName) as ComponentPublicInstance)
|
||||
: undefined;
|
||||
if (
|
||||
target &&
|
||||
target.$.type.name === 'AsyncComponentWrapper' &&
|
||||
target.$.subTree.ref
|
||||
) {
|
||||
if (Array.isArray(target.$.subTree.ref)) {
|
||||
if (
|
||||
target.$.subTree.ref.length > 0 &&
|
||||
isRef(target.$.subTree.ref[0]?.r)
|
||||
) {
|
||||
target = target.$.subTree.ref[0]?.r.value as ComponentPublicInstance;
|
||||
}
|
||||
} else if (isRef(target.$.subTree.ref.r)) {
|
||||
target = target.$.subTree.ref.r.value as ComponentPublicInstance;
|
||||
}
|
||||
}
|
||||
return target as T;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -247,7 +264,7 @@ export class FormApi {
|
||||
|
||||
/**
|
||||
* 设置表单提交按钮的加载状态：用于非 Modal 中使用 Form 时，需要 Form 自己控制 loading 状态
|
||||
* @author 千通源码
|
||||
* @author 芋道源码
|
||||
* @param loading 是否加载中
|
||||
*/
|
||||
setLoading(loading: boolean) {
|
||||
|
||||
@@ -10,7 +10,7 @@ import { createContext } from '@vben-core/shadcn-ui';
|
||||
import { isString, mergeWithArrayOverride, set } from '@vben-core/shared/utils';
|
||||
|
||||
import { useForm } from 'vee-validate';
|
||||
import { object } from 'zod';
|
||||
import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod';
|
||||
import { getDefaultsForSchema } from 'zod-defaults';
|
||||
|
||||
type ExtendFormProps = VbenFormProps & { formApi: ExtendedFormApi };
|
||||
@@ -52,7 +52,12 @@ export function useFormInitial(
|
||||
if (Reflect.has(item, 'defaultValue')) {
|
||||
set(initialValues, item.fieldName, item.defaultValue);
|
||||
} else if (item.rules && !isString(item.rules)) {
|
||||
// 检查规则是否适合提取默认值
|
||||
const customDefaultValue = getCustomDefaultValue(item.rules);
|
||||
zodObject[item.fieldName] = item.rules;
|
||||
if (customDefaultValue !== undefined) {
|
||||
initialValues[item.fieldName] = customDefaultValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -64,6 +69,38 @@ export function useFormInitial(
|
||||
}
|
||||
return mergeWithArrayOverride(initialValues, zodDefaults);
|
||||
}
|
||||
// 自定义默认值提取逻辑
|
||||
function getCustomDefaultValue(rule: any): any {
|
||||
if (rule instanceof ZodString) {
|
||||
return ''; // 默认为空字符串
|
||||
} else if (rule instanceof ZodNumber) {
|
||||
return null; // 默认为 null（避免显示 0）
|
||||
} else if (rule instanceof ZodObject) {
|
||||
// 递归提取嵌套对象的默认值
|
||||
const defaultValues: Record<string, any> = {};
|
||||
for (const [key, valueSchema] of Object.entries(rule.shape)) {
|
||||
defaultValues[key] = getCustomDefaultValue(valueSchema);
|
||||
}
|
||||
return defaultValues;
|
||||
} else if (rule instanceof ZodIntersection) {
|
||||
// 对于交集类型，从schema 提取默认值
|
||||
const leftDefaultValue = getCustomDefaultValue(rule._def.left);
|
||||
const rightDefaultValue = getCustomDefaultValue(rule._def.right);
|
||||
|
||||
// 如果左右两边都能提取默认值，合并它们
|
||||
if (
|
||||
typeof leftDefaultValue === 'object' &&
|
||||
typeof rightDefaultValue === 'object'
|
||||
) {
|
||||
return { ...leftDefaultValue, ...rightDefaultValue };
|
||||
}
|
||||
|
||||
// 否则优先使用左边的默认值
|
||||
return leftDefaultValue ?? rightDefaultValue;
|
||||
} else {
|
||||
return undefined; // 其他类型不提供默认值
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
delegatedSlots,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/layout-ui",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/menu-ui",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -34,7 +34,6 @@ const props = withDefaults(defineProps<AlertProps>(), {
|
||||
bordered: true,
|
||||
buttonAlign: 'end',
|
||||
centered: true,
|
||||
containerClass: 'w-[520px]',
|
||||
});
|
||||
const emits = defineEmits(['closed', 'confirm', 'opened']);
|
||||
const open = defineModel<boolean>('open', { default: false });
|
||||
@@ -148,7 +147,7 @@ async function handleOpenChange(val: boolean) {
|
||||
:class="
|
||||
cn(
|
||||
containerClass,
|
||||
'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:rounded-[var(--radius)] md:w-[520px] md:max-w-[80%]',
|
||||
'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-[var(--radius)]',
|
||||
{
|
||||
'border-border border': bordered,
|
||||
'shadow-3xl': !bordered,
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DrawerProps, ExtendedDrawerApi } from './drawer';
|
||||
|
||||
import { computed, provide, ref, unref, useId, watch } from 'vue';
|
||||
import {
|
||||
computed,
|
||||
onDeactivated,
|
||||
provide,
|
||||
ref,
|
||||
unref,
|
||||
useId,
|
||||
watch,
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
useIsMobile,
|
||||
@@ -94,6 +102,16 @@ const {
|
||||
// },
|
||||
// );
|
||||
|
||||
/**
|
||||
* 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
|
||||
*/
|
||||
onDeactivated(() => {
|
||||
// 如果弹窗没有被挂载到内容区域，则关闭弹窗
|
||||
if (!appendToMain.value) {
|
||||
props.drawerApi?.close();
|
||||
}
|
||||
});
|
||||
|
||||
function interactOutside(e: Event) {
|
||||
if (!closeOnClickModal.value || submitting.value) {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
h,
|
||||
inject,
|
||||
nextTick,
|
||||
onDeactivated,
|
||||
provide,
|
||||
reactive,
|
||||
ref,
|
||||
@@ -72,13 +71,6 @@ export function useVbenDrawer<
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
|
||||
*/
|
||||
onDeactivated(() => {
|
||||
(extendedApi as ExtendedDrawerApi)?.close?.();
|
||||
});
|
||||
|
||||
return [Drawer, extendedApi as ExtendedDrawerApi] as const;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ExtendedModalApi, ModalProps } from './modal';
|
||||
|
||||
import { computed, nextTick, provide, ref, unref, useId, watch } from 'vue';
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onDeactivated,
|
||||
provide,
|
||||
ref,
|
||||
unref,
|
||||
useId,
|
||||
watch,
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
useIsMobile,
|
||||
@@ -135,6 +144,16 @@ watch(
|
||||
// },
|
||||
// );
|
||||
|
||||
/**
|
||||
* 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
|
||||
*/
|
||||
onDeactivated(() => {
|
||||
// 如果弹窗没有被挂载到内容区域，则关闭弹窗
|
||||
if (!appendToMain.value) {
|
||||
props.modalApi?.close();
|
||||
}
|
||||
});
|
||||
|
||||
function handleFullscreen() {
|
||||
props.modalApi?.setState((prev) => {
|
||||
// if (prev.fullscreen) {
|
||||
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
h,
|
||||
inject,
|
||||
nextTick,
|
||||
onDeactivated,
|
||||
provide,
|
||||
reactive,
|
||||
ref,
|
||||
@@ -71,13 +70,6 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
|
||||
*/
|
||||
onDeactivated(() => {
|
||||
(extendedApi as ExtendedModalApi)?.close?.();
|
||||
});
|
||||
|
||||
return [Modal, extendedApi as ExtendedModalApi] as const;
|
||||
}
|
||||
|
||||
@@ -94,8 +86,9 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
|
||||
injectData.options?.onOpenChange?.(isOpen);
|
||||
};
|
||||
|
||||
const onClosed = mergedOptions.onClosed;
|
||||
mergedOptions.onClosed = () => {
|
||||
options.onClosed?.();
|
||||
onClosed?.();
|
||||
if (mergedOptions.destroyOnClose) {
|
||||
injectData.reCreateModal?.();
|
||||
}
|
||||
@@ -129,6 +122,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
|
||||
},
|
||||
);
|
||||
injectData.extendApi?.(extendedApi);
|
||||
|
||||
return [Modal, extendedApi] as const;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/shadcn-ui",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"#main": "./dist/index.mjs",
|
||||
"#module": "./dist/index.mjs",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
|
||||
@@ -5,6 +5,8 @@ import type {
|
||||
AvatarRootProps,
|
||||
} from 'radix-vue';
|
||||
|
||||
import type { CSSProperties } from 'vue';
|
||||
|
||||
import type { ClassType } from '@vben-core/typings';
|
||||
|
||||
import { computed } from 'vue';
|
||||
@@ -16,6 +18,7 @@ interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
|
||||
class?: ClassType;
|
||||
dot?: boolean;
|
||||
dotClass?: ClassType;
|
||||
fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
|
||||
size?: number;
|
||||
}
|
||||
|
||||
@@ -28,6 +31,15 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
as: 'button',
|
||||
dot: false,
|
||||
dotClass: 'bg-green-500',
|
||||
fit: 'cover',
|
||||
});
|
||||
|
||||
const imageStyle = computed<CSSProperties>(() => {
|
||||
const { fit } = props;
|
||||
if (fit) {
|
||||
return { objectFit: fit };
|
||||
}
|
||||
return {};
|
||||
});
|
||||
|
||||
const text = computed(() => {
|
||||
@@ -51,7 +63,7 @@ const rootStyle = computed(() => {
|
||||
class="relative flex flex-shrink-0 items-center"
|
||||
>
|
||||
<Avatar :class="props.class" class="size-full">
|
||||
<AvatarImage :alt="alt" :src="src" />
|
||||
<AvatarImage :alt="alt" :src="src" :style="imageStyle" />
|
||||
<AvatarFallback>{{ text }}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span
|
||||
|
||||
@@ -29,14 +29,25 @@ export type ValueType = boolean | number | string;
|
||||
|
||||
export interface VbenButtonGroupProps
|
||||
extends Pick<VbenButtonProps, 'disabled'> {
|
||||
/** 单选模式下允许清除选中 */
|
||||
allowClear?: boolean;
|
||||
/** 值改变前的回调 */
|
||||
beforeChange?: (
|
||||
value: ValueType,
|
||||
isChecked: boolean,
|
||||
) => boolean | PromiseLike<boolean | undefined> | undefined;
|
||||
/** 按钮样式 */
|
||||
btnClass?: any;
|
||||
/** 按钮间隔距离 */
|
||||
gap?: number;
|
||||
/** 多选模式下限制最多选择的数量。0表示不限制 */
|
||||
maxCount?: number;
|
||||
/** 是否允许多选 */
|
||||
multiple?: boolean;
|
||||
options?: { label: CustomRenderType; value: ValueType }[];
|
||||
/** 选项 */
|
||||
options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
|
||||
/** 显示图标 */
|
||||
showIcon?: boolean;
|
||||
/** 尺寸 */
|
||||
size?: 'large' | 'middle' | 'small';
|
||||
}
|
||||
|
||||
@@ -19,6 +19,8 @@ const props = withDefaults(defineProps<VbenButtonGroupProps>(), {
|
||||
multiple: false,
|
||||
showIcon: true,
|
||||
size: 'middle',
|
||||
allowClear: false,
|
||||
maxCount: 0,
|
||||
});
|
||||
const emit = defineEmits(['btnClick']);
|
||||
const btnDefaultProps = computed(() => {
|
||||
@@ -82,12 +84,22 @@ async function onBtnClick(value: ValueType) {
|
||||
if (innerValue.value.includes(value)) {
|
||||
innerValue.value = innerValue.value.filter((item) => item !== value);
|
||||
} else {
|
||||
if (props.maxCount > 0 && innerValue.value.length >= props.maxCount) {
|
||||
innerValue.value = innerValue.value.slice(0, props.maxCount - 1);
|
||||
}
|
||||
innerValue.value.push(value);
|
||||
}
|
||||
modelValue.value = innerValue.value;
|
||||
} else {
|
||||
innerValue.value = [value];
|
||||
modelValue.value = value;
|
||||
if (props.allowClear && innerValue.value.includes(value)) {
|
||||
innerValue.value = [];
|
||||
modelValue.value = undefined;
|
||||
emit('btnClick', undefined);
|
||||
return;
|
||||
} else {
|
||||
innerValue.value = [value];
|
||||
modelValue.value = value;
|
||||
}
|
||||
}
|
||||
emit('btnClick', value);
|
||||
}
|
||||
@@ -110,16 +122,23 @@ async function onBtnClick(value: ValueType) {
|
||||
v-bind="btnDefaultProps"
|
||||
:variant="innerValue.includes(btn.value) ? 'default' : 'outline'"
|
||||
@click="onBtnClick(btn.value)"
|
||||
type="button"
|
||||
>
|
||||
<div class="icon-wrapper" v-if="props.showIcon">
|
||||
<LoaderCircle
|
||||
class="animate-spin"
|
||||
v-if="loadingValues.includes(btn.value)"
|
||||
/>
|
||||
<CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
|
||||
<Circle v-else />
|
||||
<slot
|
||||
name="icon"
|
||||
:loading="loadingValues.includes(btn.value)"
|
||||
:checked="innerValue.includes(btn.value)"
|
||||
>
|
||||
<LoaderCircle
|
||||
class="animate-spin"
|
||||
v-if="loadingValues.includes(btn.value)"
|
||||
/>
|
||||
<CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
|
||||
<Circle v-else />
|
||||
</slot>
|
||||
</div>
|
||||
<slot name="option" :label="btn.label" :value="btn.value">
|
||||
<slot name="option" :label="btn.label" :value="btn.value" :data="btn">
|
||||
<VbenRenderContent :content="btn.label" />
|
||||
</slot>
|
||||
</Button>
|
||||
@@ -127,6 +146,9 @@ async function onBtnClick(value: ValueType) {
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.vben-check-button-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:deep(.size-large) button {
|
||||
.icon-wrapper {
|
||||
margin-right: 0.3rem;
|
||||
@@ -159,5 +181,16 @@ async function onBtnClick(value: ValueType) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-gap > :deep(button):nth-of-type(1) {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
&.no-gap {
|
||||
:deep(button + button) {
|
||||
margin-right: -1px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,6 +6,10 @@ interface Props {
|
||||
* @zh_CN 是否收起文本
|
||||
*/
|
||||
collapsed?: boolean;
|
||||
/**
|
||||
* @zh_CN Logo 图片适应方式
|
||||
*/
|
||||
fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
|
||||
/**
|
||||
* @zh_CN Logo 跳转地址
|
||||
*/
|
||||
@@ -38,6 +42,7 @@ withDefaults(defineProps<Props>(), {
|
||||
logoSize: 32,
|
||||
src: '',
|
||||
theme: 'light',
|
||||
fit: 'cover',
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -53,6 +58,7 @@ withDefaults(defineProps<Props>(), {
|
||||
:alt="text"
|
||||
:src="src"
|
||||
:size="logoSize"
|
||||
:fit="fit"
|
||||
class="relative rounded-none bg-transparent"
|
||||
/>
|
||||
<template v-if="!collapsed">
|
||||
|
||||
@@ -80,7 +80,7 @@ defineExpose({
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'z-popup bg-background w-full p-6 shadow-lg outline-none sm:rounded-xl',
|
||||
'z-popup bg-background p-6 shadow-lg outline-none sm:rounded-xl',
|
||||
'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
|
||||
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
|
||||
{
|
||||
|
||||
@@ -224,15 +224,20 @@ defineExpose({
|
||||
:class="
|
||||
cn('cursor-pointer', getNodeClass?.(item), {
|
||||
'data-[selected]:bg-accent': !multiple,
|
||||
'cursor-not-allowed': disabled,
|
||||
})
|
||||
"
|
||||
v-bind="
|
||||
Object.assign(item.bind, {
|
||||
onfocus: disabled ? 'this.blur()' : undefined,
|
||||
})
|
||||
"
|
||||
v-bind="item.bind"
|
||||
@select="
|
||||
(event) => {
|
||||
if (event.detail.originalEvent.type === 'click') {
|
||||
event.preventDefault();
|
||||
}
|
||||
onSelect(item, event.detail.isSelected);
|
||||
!disabled && onSelect(item, event.detail.isSelected);
|
||||
}
|
||||
"
|
||||
@toggle="
|
||||
@@ -240,7 +245,7 @@ defineExpose({
|
||||
if (event.detail.originalEvent.type === 'click') {
|
||||
event.preventDefault();
|
||||
}
|
||||
onToggle(item);
|
||||
!disabled && onToggle(item);
|
||||
}
|
||||
"
|
||||
class="tree-node focus:ring-grass8 my-0.5 flex items-center rounded px-2 py-1 outline-none focus:ring-2"
|
||||
@@ -262,10 +267,11 @@ defineExpose({
|
||||
<Checkbox
|
||||
v-if="multiple"
|
||||
:checked="isSelected"
|
||||
:disabled="disabled"
|
||||
:indeterminate="isIndeterminate"
|
||||
@click="
|
||||
() => {
|
||||
handleSelect();
|
||||
!disabled && handleSelect();
|
||||
// onSelect(item, !isSelected);
|
||||
}
|
||||
"
|
||||
@@ -276,7 +282,7 @@ defineExpose({
|
||||
(_event) => {
|
||||
// $event.stopPropagation();
|
||||
// $event.preventDefault();
|
||||
handleSelect();
|
||||
!disabled && handleSelect();
|
||||
// onSelect(item, !isSelected);
|
||||
}
|
||||
"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben-core/tabs-ui",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -40,14 +40,14 @@ const style = computed(() => {
|
||||
|
||||
const tabsView = computed(() => {
|
||||
return props.tabs.map((tab) => {
|
||||
const { fullPath, meta, name, path } = tab || {};
|
||||
const { fullPath, meta, name, path, key } = tab || {};
|
||||
const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
|
||||
return {
|
||||
affixTab: !!affixTab,
|
||||
closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
|
||||
fullPath,
|
||||
icon: icon as string,
|
||||
key: fullPath || path,
|
||||
key,
|
||||
meta,
|
||||
name,
|
||||
path,
|
||||
|
||||
@@ -47,14 +47,14 @@ const typeWithClass = computed(() => {
|
||||
|
||||
const tabsView = computed(() => {
|
||||
return props.tabs.map((tab) => {
|
||||
const { fullPath, meta, name, path } = tab || {};
|
||||
const { fullPath, meta, name, path, key } = tab || {};
|
||||
const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
|
||||
return {
|
||||
affixTab: !!affixTab,
|
||||
closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
|
||||
fullPath,
|
||||
icon: icon as string,
|
||||
key: fullPath || path,
|
||||
key,
|
||||
meta,
|
||||
name,
|
||||
path,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/constants",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/access",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -96,6 +96,15 @@ async function generateRoutes(
|
||||
);
|
||||
break;
|
||||
}
|
||||
case 'mixed': {
|
||||
const [frontend_resultRoutes, backend_resultRoutes] = await Promise.all([
|
||||
generateRoutesByFrontend(routes, roles || [], forbiddenComponent),
|
||||
generateRoutesByBackend(options),
|
||||
]);
|
||||
|
||||
resultRoutes = [...frontend_resultRoutes, ...backend_resultRoutes];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/common-ui",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -3,11 +3,11 @@ import type { Component } from 'vue';
|
||||
|
||||
import type { AnyPromiseFunction } from '@vben/types';
|
||||
|
||||
import { computed, ref, unref, useAttrs, watch } from 'vue';
|
||||
import { computed, nextTick, ref, unref, useAttrs, watch } from 'vue';
|
||||
|
||||
import { LoaderCircle } from '@vben/icons';
|
||||
|
||||
import { get, isEqual, isFunction } from '@vben-core/shared/utils';
|
||||
import { cloneDeep, get, isEqual, isFunction } from '@vben-core/shared/utils';
|
||||
|
||||
import { objectOmit } from '@vueuse/core';
|
||||
|
||||
@@ -104,6 +104,8 @@ const refOptions = ref<OptionsItem[]>([]);
|
||||
const loading = ref(false);
|
||||
// 首次是否加载过了
|
||||
const isFirstLoaded = ref(false);
|
||||
// 标记是否有待处理的请求
|
||||
const hasPendingRequest = ref(false);
|
||||
|
||||
const getOptions = computed(() => {
|
||||
const { labelField, valueField, childrenField, numberToString } = props;
|
||||
@@ -146,18 +148,26 @@ const bindProps = computed(() => {
|
||||
});
|
||||
|
||||
async function fetchApi() {
|
||||
let { api, beforeFetch, afterFetch, params, resultField } = props;
|
||||
const { api, beforeFetch, afterFetch, resultField } = props;
|
||||
|
||||
if (!api || !isFunction(api) || loading.value) {
|
||||
if (!api || !isFunction(api)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果正在加载，标记有待处理的请求并返回
|
||||
if (loading.value) {
|
||||
hasPendingRequest.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
refOptions.value = [];
|
||||
try {
|
||||
loading.value = true;
|
||||
let finalParams = unref(mergedParams);
|
||||
if (beforeFetch && isFunction(beforeFetch)) {
|
||||
params = (await beforeFetch(params)) || params;
|
||||
finalParams = (await beforeFetch(cloneDeep(finalParams))) || finalParams;
|
||||
}
|
||||
let res = await api(params);
|
||||
let res = await api(finalParams);
|
||||
if (afterFetch && isFunction(afterFetch)) {
|
||||
res = (await afterFetch(res)) || res;
|
||||
}
|
||||
@@ -177,6 +187,13 @@ async function fetchApi() {
|
||||
isFirstLoaded.value = false;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
// 如果有待处理的请求，立即触发新的请求
|
||||
if (hasPendingRequest.value) {
|
||||
hasPendingRequest.value = false;
|
||||
// 使用 nextTick 确保状态更新完成后再触发新请求
|
||||
await nextTick();
|
||||
fetchApi();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -190,7 +207,7 @@ async function handleFetchForVisible(visible: boolean) {
|
||||
}
|
||||
}
|
||||
|
||||
const params = computed(() => {
|
||||
const mergedParams = computed(() => {
|
||||
return {
|
||||
...props.params,
|
||||
...unref(innerParams),
|
||||
@@ -198,7 +215,7 @@ const params = computed(() => {
|
||||
});
|
||||
|
||||
watch(
|
||||
params,
|
||||
mergedParams,
|
||||
(value, oldValue) => {
|
||||
if (isEqual(value, oldValue)) {
|
||||
return;
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { CSSProperties } from 'vue';
|
||||
|
||||
import { computed, ref, watchEffect } from 'vue';
|
||||
import {
|
||||
computed,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
onUpdated,
|
||||
ref,
|
||||
watchEffect,
|
||||
} from 'vue';
|
||||
|
||||
import { VbenTooltip } from '@vben-core/shadcn-ui';
|
||||
|
||||
@@ -33,6 +40,16 @@ interface Props {
|
||||
* @default true
|
||||
*/
|
||||
tooltip?: boolean;
|
||||
/**
|
||||
* 是否只在文本被截断时显示提示框
|
||||
* @default false
|
||||
*/
|
||||
tooltipWhenEllipsis?: boolean;
|
||||
/**
|
||||
* 文本截断检测的像素差异阈值，越大则判断越严格
|
||||
* @default 3
|
||||
*/
|
||||
ellipsisThreshold?: number;
|
||||
/**
|
||||
* 提示框背景颜色，优先级高于 overlayStyle
|
||||
*/
|
||||
@@ -62,12 +79,15 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
maxWidth: '100%',
|
||||
placement: 'top',
|
||||
tooltip: true,
|
||||
tooltipWhenEllipsis: false,
|
||||
ellipsisThreshold: 3,
|
||||
tooltipBackgroundColor: '',
|
||||
tooltipColor: '',
|
||||
tooltipFontSize: 14,
|
||||
tooltipMaxWidth: undefined,
|
||||
tooltipOverlayStyle: () => ({ textAlign: 'justify' }),
|
||||
});
|
||||
|
||||
const emit = defineEmits<{ expandChange: [boolean] }>();
|
||||
|
||||
const textMaxWidth = computed(() => {
|
||||
@@ -79,9 +99,67 @@ const textMaxWidth = computed(() => {
|
||||
const ellipsis = ref();
|
||||
const isExpand = ref(false);
|
||||
const defaultTooltipMaxWidth = ref();
|
||||
const isEllipsis = ref(false);
|
||||
|
||||
const { width: eleWidth } = useElementSize(ellipsis);
|
||||
|
||||
// 检测文本是否被截断
|
||||
const checkEllipsis = () => {
|
||||
if (!ellipsis.value || !props.tooltipWhenEllipsis) return;
|
||||
|
||||
const element = ellipsis.value;
|
||||
|
||||
const originalText = element.textContent || '';
|
||||
const originalTrimmed = originalText.trim();
|
||||
|
||||
// 对于空文本直接返回 false
|
||||
if (!originalTrimmed) {
|
||||
isEllipsis.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const widthDiff = element.scrollWidth - element.clientWidth;
|
||||
const heightDiff = element.scrollHeight - element.clientHeight;
|
||||
|
||||
// 使用足够大的差异阈值确保只有真正被截断的文本才会显示 tooltip
|
||||
isEllipsis.value =
|
||||
props.line === 1
|
||||
? widthDiff > props.ellipsisThreshold
|
||||
: heightDiff > props.ellipsisThreshold;
|
||||
};
|
||||
|
||||
// 使用 ResizeObserver 监听尺寸变化
|
||||
let resizeObserver: null | ResizeObserver = null;
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof ResizeObserver !== 'undefined' && props.tooltipWhenEllipsis) {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
checkEllipsis();
|
||||
});
|
||||
|
||||
if (ellipsis.value) {
|
||||
resizeObserver.observe(ellipsis.value);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始检测
|
||||
checkEllipsis();
|
||||
});
|
||||
|
||||
// 使用onUpdated钩子检测内容变化
|
||||
onUpdated(() => {
|
||||
if (props.tooltipWhenEllipsis) {
|
||||
checkEllipsis();
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (resizeObserver) {
|
||||
resizeObserver.disconnect();
|
||||
resizeObserver = null;
|
||||
}
|
||||
});
|
||||
|
||||
watchEffect(
|
||||
() => {
|
||||
if (props.tooltip && eleWidth.value) {
|
||||
@@ -91,9 +169,13 @@ watchEffect(
|
||||
},
|
||||
{ flush: 'post' },
|
||||
);
|
||||
|
||||
function onExpand() {
|
||||
isExpand.value = !isExpand.value;
|
||||
emit('expandChange', isExpand.value);
|
||||
if (props.tooltipWhenEllipsis) {
|
||||
checkEllipsis();
|
||||
}
|
||||
}
|
||||
|
||||
function handleExpand() {
|
||||
@@ -110,7 +192,9 @@ function handleExpand() {
|
||||
color: tooltipColor,
|
||||
backgroundColor: tooltipBackgroundColor,
|
||||
}"
|
||||
:disabled="!props.tooltip || isExpand"
|
||||
:disabled="
|
||||
!props.tooltip || isExpand || (props.tooltipWhenEllipsis && !isEllipsis)
|
||||
"
|
||||
:side="placement"
|
||||
>
|
||||
<slot name="tooltip">
|
||||
|
||||
@@ -2,6 +2,7 @@ export * from './api-component';
|
||||
export * from './captcha';
|
||||
export * from './col-page';
|
||||
export * from './count-to';
|
||||
export * from './doc-alert';
|
||||
export * from './ellipsis-text';
|
||||
export * from './icon-picker';
|
||||
export * from './json-viewer';
|
||||
|
||||
@@ -63,7 +63,7 @@ onMounted(() => {
|
||||
ref="docRef"
|
||||
:class="
|
||||
cn(
|
||||
'bg-card border-border relative flex items-end rounded-md border-b p-4',
|
||||
'bg-card border-border relative mx-4 flex items-start rounded-md border-b',
|
||||
)
|
||||
"
|
||||
>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
export { default as AuthenticationAuthTitle } from './auth-title.vue';
|
||||
export { default as AuthenticationCodeLogin } from './code-login.vue';
|
||||
export { default as DocLink } from './doc-link.vue';
|
||||
export { default as AuthenticationForgetPassword } from './forget-password.vue';
|
||||
export { default as AuthenticationLoginExpiredModal } from './login-expired-modal.vue';
|
||||
export { default as AuthenticationLogin } from './login.vue';
|
||||
|
||||
@@ -14,6 +14,7 @@ import { useVbenForm } from '@vben-core/form-ui';
|
||||
import { VbenButton, VbenCheckbox } from '@vben-core/shadcn-ui';
|
||||
|
||||
import Title from './auth-title.vue';
|
||||
import DocLink from './doc-link.vue';
|
||||
import ThirdPartyLogin from './third-party-login.vue';
|
||||
|
||||
interface Props extends AuthenticationProps {
|
||||
@@ -195,5 +196,8 @@ defineExpose({
|
||||
</span>
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<!-- 萌新必读 -->
|
||||
<DocLink />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/hooks",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -193,67 +193,107 @@ export function useElementPlusDesignTokens() {
|
||||
|
||||
'--el-border-radius-base': getCssVariableValue('--radius', false),
|
||||
'--el-color-danger': getCssVariableValue('--destructive-500'),
|
||||
'--el-color-danger-dark-2': getCssVariableValue('--destructive'),
|
||||
'--el-color-danger-light-3': getCssVariableValue('--destructive-400'),
|
||||
'--el-color-danger-light-5': getCssVariableValue('--destructive-300'),
|
||||
'--el-color-danger-light-7': getCssVariableValue('--destructive-200'),
|
||||
'--el-color-danger-dark-2': isDark.value
|
||||
? getCssVariableValue('--destructive-400')
|
||||
: getCssVariableValue('--destructive-600'),
|
||||
'--el-color-danger-light-3': isDark.value
|
||||
? getCssVariableValue('--destructive-600')
|
||||
: getCssVariableValue('--destructive-400'),
|
||||
'--el-color-danger-light-5': isDark.value
|
||||
? getCssVariableValue('--destructive-700')
|
||||
: getCssVariableValue('--destructive-300'),
|
||||
'--el-color-danger-light-7': isDark.value
|
||||
? getCssVariableValue('--destructive-800')
|
||||
: getCssVariableValue('--destructive-200'),
|
||||
'--el-color-danger-light-8': isDark.value
|
||||
? border
|
||||
? getCssVariableValue('--destructive-900')
|
||||
: getCssVariableValue('--destructive-100'),
|
||||
'--el-color-danger-light-9': isDark.value
|
||||
? accent
|
||||
? getCssVariableValue('--destructive-950')
|
||||
: getCssVariableValue('--destructive-50'),
|
||||
|
||||
'--el-color-error': getCssVariableValue('--destructive-500'),
|
||||
'--el-color-error-dark-2': getCssVariableValue('--destructive'),
|
||||
'--el-color-error-light-3': getCssVariableValue('--destructive-400'),
|
||||
'--el-color-error-light-5': getCssVariableValue('--destructive-300'),
|
||||
'--el-color-error-light-7': getCssVariableValue('--destructive-200'),
|
||||
'--el-color-error-dark-2': isDark.value
|
||||
? getCssVariableValue('--destructive-400')
|
||||
: getCssVariableValue('--destructive-600'),
|
||||
'--el-color-error-light-3': isDark.value
|
||||
? getCssVariableValue('--destructive-600')
|
||||
: getCssVariableValue('--destructive-400'),
|
||||
'--el-color-error-light-5': isDark.value
|
||||
? getCssVariableValue('--destructive-700')
|
||||
: getCssVariableValue('--destructive-300'),
|
||||
'--el-color-error-light-7': isDark.value
|
||||
? getCssVariableValue('--destructive-800')
|
||||
: getCssVariableValue('--destructive-200'),
|
||||
'--el-color-error-light-8': isDark.value
|
||||
? border
|
||||
? getCssVariableValue('--destructive-900')
|
||||
: getCssVariableValue('--destructive-100'),
|
||||
'--el-color-error-light-9': isDark.value
|
||||
? accent
|
||||
? getCssVariableValue('--destructive-950')
|
||||
: getCssVariableValue('--destructive-50'),
|
||||
|
||||
'--el-color-info-light-5': border,
|
||||
'--el-color-info-light-8': border,
|
||||
'--el-color-info-light-9': getCssVariableValue('--info'), // getCssVariableValue('--secondary'),
|
||||
|
||||
'--el-color-primary': getCssVariableValue('--primary-500'),
|
||||
'--el-color-primary-dark-2': getCssVariableValue('--primary'),
|
||||
'--el-color-primary-light-3': getCssVariableValue('--primary-400'),
|
||||
'--el-color-primary-light-5': getCssVariableValue('--primary-300'),
|
||||
'--el-color-primary-dark-2': isDark.value
|
||||
? getCssVariableValue('--primary-400')
|
||||
: getCssVariableValue('--primary-600'),
|
||||
'--el-color-primary-light-3': isDark.value
|
||||
? getCssVariableValue('--primary-600')
|
||||
: getCssVariableValue('--primary-400'),
|
||||
'--el-color-primary-light-5': isDark.value
|
||||
? getCssVariableValue('--primary-700')
|
||||
: getCssVariableValue('--primary-300'),
|
||||
'--el-color-primary-light-7': isDark.value
|
||||
? border
|
||||
? getCssVariableValue('--primary-800')
|
||||
: getCssVariableValue('--primary-200'),
|
||||
'--el-color-primary-light-8': isDark.value
|
||||
? border
|
||||
? getCssVariableValue('--primary-900')
|
||||
: getCssVariableValue('--primary-100'),
|
||||
'--el-color-primary-light-9': isDark.value
|
||||
? accent
|
||||
? getCssVariableValue('--primary-950')
|
||||
: getCssVariableValue('--primary-50'),
|
||||
|
||||
'--el-color-success': getCssVariableValue('--success-500'),
|
||||
'--el-color-success-dark-2': getCssVariableValue('--success'),
|
||||
'--el-color-success-light-3': getCssVariableValue('--success-400'),
|
||||
'--el-color-success-light-5': getCssVariableValue('--success-300'),
|
||||
'--el-color-success-light-7': getCssVariableValue('--success-200'),
|
||||
'--el-color-success-dark-2': isDark.value
|
||||
? getCssVariableValue('--success-400')
|
||||
: getCssVariableValue('--success-600'),
|
||||
'--el-color-success-light-3': isDark.value
|
||||
? getCssVariableValue('--success-600')
|
||||
: getCssVariableValue('--success-400'),
|
||||
'--el-color-success-light-5': isDark.value
|
||||
? getCssVariableValue('--success-700')
|
||||
: getCssVariableValue('--success-300'),
|
||||
'--el-color-success-light-7': isDark.value
|
||||
? getCssVariableValue('--success-800')
|
||||
: getCssVariableValue('--success-200'),
|
||||
'--el-color-success-light-8': isDark.value
|
||||
? border
|
||||
? getCssVariableValue('--success-900')
|
||||
: getCssVariableValue('--success-100'),
|
||||
'--el-color-success-light-9': isDark.value
|
||||
? accent
|
||||
? getCssVariableValue('--success-950')
|
||||
: getCssVariableValue('--success-50'),
|
||||
|
||||
'--el-color-warning': getCssVariableValue('--warning-500'),
|
||||
'--el-color-warning-dark-2': getCssVariableValue('--warning'),
|
||||
'--el-color-warning-light-3': getCssVariableValue('--warning-400'),
|
||||
'--el-color-warning-light-5': getCssVariableValue('--warning-300'),
|
||||
'--el-color-warning-light-7': getCssVariableValue('--warning-200'),
|
||||
'--el-color-warning-dark-2': isDark.value
|
||||
? getCssVariableValue('--warning-400')
|
||||
: getCssVariableValue('--warning-600'),
|
||||
'--el-color-warning-light-3': isDark.value
|
||||
? getCssVariableValue('--warning-600')
|
||||
: getCssVariableValue('--warning-400'),
|
||||
'--el-color-warning-light-5': isDark.value
|
||||
? getCssVariableValue('--warning-700')
|
||||
: getCssVariableValue('--warning-300'),
|
||||
'--el-color-warning-light-7': isDark.value
|
||||
? getCssVariableValue('--warning-800')
|
||||
: getCssVariableValue('--warning-200'),
|
||||
'--el-color-warning-light-8': isDark.value
|
||||
? border
|
||||
? getCssVariableValue('--warning-900')
|
||||
: getCssVariableValue('--warning-100'),
|
||||
'--el-color-warning-light-9': isDark.value
|
||||
? accent
|
||||
? getCssVariableValue('--warning-950')
|
||||
: getCssVariableValue('--warning-50'),
|
||||
|
||||
'--el-fill-color': getCssVariableValue('--accent'),
|
||||
|
||||
@@ -8,19 +8,40 @@ import { isFunction } from '@vben/utils';
|
||||
|
||||
import { useElementHover } from '@vueuse/core';
|
||||
|
||||
interface HoverDelayOptions {
|
||||
/** 鼠标进入延迟时间 */
|
||||
enterDelay?: (() => number) | number;
|
||||
/** 鼠标离开延迟时间 */
|
||||
leaveDelay?: (() => number) | number;
|
||||
}
|
||||
|
||||
const DEFAULT_LEAVE_DELAY = 500; // 鼠标离开延迟时间，默认为 500ms
|
||||
const DEFAULT_ENTER_DELAY = 0; // 鼠标进入延迟时间，默认为 0（立即响应）
|
||||
|
||||
/**
|
||||
* 监测鼠标是否在元素内部，如果在元素内部则返回 true，否则返回 false
|
||||
* @param refElement 所有需要检测的元素。如果提供了一个数组，那么鼠标在任何一个元素内部都会返回 true
|
||||
* @param delay 延迟更新状态的时间
|
||||
* @param delay 延迟更新状态的时间，可以是数字或包含进入/离开延迟的配置对象
|
||||
* @returns 返回一个数组，第一个元素是一个 ref，表示鼠标是否在元素内部，第二个元素是一个控制器，可以通过 enable 和 disable 方法来控制监听器的启用和禁用
|
||||
*/
|
||||
export function useHoverToggle(
|
||||
refElement: Arrayable<MaybeElementRef>,
|
||||
delay: (() => number) | number = 500,
|
||||
delay: (() => number) | HoverDelayOptions | number = DEFAULT_LEAVE_DELAY,
|
||||
) {
|
||||
// 兼容旧版本API
|
||||
const normalizedOptions: HoverDelayOptions =
|
||||
typeof delay === 'number' || isFunction(delay)
|
||||
? { enterDelay: DEFAULT_ENTER_DELAY, leaveDelay: delay }
|
||||
: {
|
||||
enterDelay: DEFAULT_ENTER_DELAY,
|
||||
leaveDelay: DEFAULT_LEAVE_DELAY,
|
||||
...delay,
|
||||
};
|
||||
|
||||
const isHovers: Array<Ref<boolean>> = [];
|
||||
const value = ref(false);
|
||||
const timer = ref<ReturnType<typeof setTimeout> | undefined>();
|
||||
const enterTimer = ref<ReturnType<typeof setTimeout> | undefined>();
|
||||
const leaveTimer = ref<ReturnType<typeof setTimeout> | undefined>();
|
||||
const refs = Array.isArray(refElement) ? refElement : [refElement];
|
||||
refs.forEach((refEle) => {
|
||||
const eleRef = computed(() => {
|
||||
@@ -32,15 +53,47 @@ export function useHoverToggle(
|
||||
});
|
||||
const isOutsideAll = computed(() => isHovers.every((v) => !v.value));
|
||||
|
||||
function clearTimers() {
|
||||
if (enterTimer.value) {
|
||||
clearTimeout(enterTimer.value);
|
||||
enterTimer.value = undefined;
|
||||
}
|
||||
if (leaveTimer.value) {
|
||||
clearTimeout(leaveTimer.value);
|
||||
leaveTimer.value = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function setValueDelay(val: boolean) {
|
||||
timer.value && clearTimeout(timer.value);
|
||||
timer.value = setTimeout(
|
||||
() => {
|
||||
value.value = val;
|
||||
timer.value = undefined;
|
||||
},
|
||||
isFunction(delay) ? delay() : delay,
|
||||
);
|
||||
clearTimers();
|
||||
|
||||
if (val) {
|
||||
// 鼠标进入
|
||||
const enterDelay = normalizedOptions.enterDelay ?? DEFAULT_ENTER_DELAY;
|
||||
const delayTime = isFunction(enterDelay) ? enterDelay() : enterDelay;
|
||||
|
||||
if (delayTime <= 0) {
|
||||
value.value = true;
|
||||
} else {
|
||||
enterTimer.value = setTimeout(() => {
|
||||
value.value = true;
|
||||
enterTimer.value = undefined;
|
||||
}, delayTime);
|
||||
}
|
||||
} else {
|
||||
// 鼠标离开
|
||||
const leaveDelay = normalizedOptions.leaveDelay ?? DEFAULT_LEAVE_DELAY;
|
||||
const delayTime = isFunction(leaveDelay) ? leaveDelay() : leaveDelay;
|
||||
|
||||
if (delayTime <= 0) {
|
||||
value.value = false;
|
||||
} else {
|
||||
leaveTimer.value = setTimeout(() => {
|
||||
value.value = false;
|
||||
leaveTimer.value = undefined;
|
||||
}, delayTime);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const watcher = watch(
|
||||
@@ -61,7 +114,7 @@ export function useHoverToggle(
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
timer.value && clearTimeout(timer.value);
|
||||
clearTimers();
|
||||
});
|
||||
|
||||
return [value, controller] as [typeof value, typeof controller];
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import type { ComputedRef } from 'vue';
|
||||
import type { RouteLocationNormalized } from 'vue-router';
|
||||
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
@@ -53,7 +54,24 @@ export function useTabs() {
|
||||
await tabbarStore.closeTabByKey(key, router);
|
||||
}
|
||||
|
||||
async function setTabTitle(title: string) {
|
||||
/**
|
||||
* 设置当前标签页的标题
|
||||
*
|
||||
* @description 支持设置静态标题字符串或动态计算标题
|
||||
* @description 动态标题会在每次渲染时重新计算,适用于多语言或状态相关的标题
|
||||
*
|
||||
* @param title - 标题内容
|
||||
* - 静态标题: 直接传入字符串
|
||||
* - 动态标题: 传入 ComputedRef
|
||||
*
|
||||
* @example
|
||||
* // 静态标题
|
||||
* setTabTitle('标签页')
|
||||
*
|
||||
* // 动态标题(多语言)
|
||||
* setTabTitle(computed(() => t('page.title')))
|
||||
*/
|
||||
async function setTabTitle(title: ComputedRef<string> | string) {
|
||||
tabbarStore.setUpdateTime();
|
||||
await tabbarStore.setTabTitle(route, title);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/layouts",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -38,7 +38,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[isDark]"
|
||||
:class="[isDark ? 'dark' : '']"
|
||||
class="flex min-h-full flex-1 select-none overflow-x-hidden"
|
||||
>
|
||||
<template v-if="toolbar">
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export { default as AuthPageLayout } from './authentication.vue';
|
||||
export * from './types';
|
||||
|
||||
@@ -9,7 +9,7 @@ import { computed } from 'vue';
|
||||
import { RouterView } from 'vue-router';
|
||||
|
||||
import { preferences, usePreferences } from '@vben/preferences';
|
||||
import { storeToRefs, useTabbarStore } from '@vben/stores';
|
||||
import { getTabKey, storeToRefs, useTabbarStore } from '@vben/stores';
|
||||
|
||||
import { IFrameRouterView } from '../../iframe';
|
||||
|
||||
@@ -115,13 +115,13 @@ function transformComponent(
|
||||
:is="transformComponent(Component, route)"
|
||||
v-if="renderRouteView"
|
||||
v-show="!route.meta.iframeSrc"
|
||||
:key="route.fullPath"
|
||||
:key="getTabKey(route)"
|
||||
/>
|
||||
</KeepAlive>
|
||||
<component
|
||||
:is="Component"
|
||||
v-else-if="renderRouteView"
|
||||
:key="route.fullPath"
|
||||
:key="getTabKey(route)"
|
||||
/>
|
||||
</Transition>
|
||||
<template v-else>
|
||||
@@ -134,13 +134,13 @@ function transformComponent(
|
||||
:is="transformComponent(Component, route)"
|
||||
v-if="renderRouteView"
|
||||
v-show="!route.meta.iframeSrc"
|
||||
:key="route.fullPath"
|
||||
:key="getTabKey(route)"
|
||||
/>
|
||||
</KeepAlive>
|
||||
<component
|
||||
:is="Component"
|
||||
v-else-if="renderRouteView"
|
||||
:key="route.fullPath"
|
||||
:key="getTabKey(route)"
|
||||
/>
|
||||
</template>
|
||||
</RouterView>
|
||||
|
||||
@@ -180,8 +180,16 @@ const headerSlots = computed(() => {
|
||||
<VbenAdminLayout
|
||||
v-model:sidebar-extra-visible="sidebarExtraVisible"
|
||||
:content-compact="preferences.app.contentCompact"
|
||||
:content-compact-width="preferences.app.contentCompactWidth"
|
||||
:content-padding="preferences.app.contentPadding"
|
||||
:content-padding-bottom="preferences.app.contentPaddingBottom"
|
||||
:content-padding-left="preferences.app.contentPaddingLeft"
|
||||
:content-padding-right="preferences.app.contentPaddingRight"
|
||||
:content-padding-top="preferences.app.contentPaddingTop"
|
||||
:footer-enable="preferences.footer.enable"
|
||||
:footer-fixed="preferences.footer.fixed"
|
||||
:footer-height="preferences.footer.height"
|
||||
:header-height="preferences.header.height"
|
||||
:header-hidden="preferences.header.hidden"
|
||||
:header-mode="preferences.header.mode"
|
||||
:header-theme="headerTheme"
|
||||
@@ -196,11 +204,15 @@ const headerSlots = computed(() => {
|
||||
:sidebar-fixed-button="preferences.sidebar.fixedButton"
|
||||
:sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
|
||||
:sidebar-extra-collapse="preferences.sidebar.extraCollapse"
|
||||
:sidebar-extra-collapsed-width="preferences.sidebar.extraCollapsedWidth"
|
||||
:sidebar-hidden="preferences.sidebar.hidden"
|
||||
:sidebar-mixed-width="preferences.sidebar.mixedWidth"
|
||||
:sidebar-theme="sidebarTheme"
|
||||
:sidebar-width="preferences.sidebar.width"
|
||||
:side-collapse-width="preferences.sidebar.collapseWidth"
|
||||
:tabbar-enable="preferences.tabbar.enable"
|
||||
:tabbar-height="preferences.tabbar.height"
|
||||
:z-index="preferences.app.zIndex"
|
||||
@side-mouse-leave="handleSideMouseLeave"
|
||||
@toggle-sidebar="toggleSidebar"
|
||||
@update:sidebar-collapse="
|
||||
@@ -222,6 +234,7 @@ const headerSlots = computed(() => {
|
||||
<template #logo>
|
||||
<VbenLogo
|
||||
v-if="preferences.logo.enable"
|
||||
:fit="preferences.logo.fit"
|
||||
:class="logoClass"
|
||||
:collapsed="logoCollapsed"
|
||||
:src="preferences.logo.source"
|
||||
@@ -312,6 +325,7 @@ const headerSlots = computed(() => {
|
||||
<template #side-extra-title>
|
||||
<VbenLogo
|
||||
v-if="preferences.logo.enable"
|
||||
:fit="preferences.logo.fit"
|
||||
:text="preferences.app.name"
|
||||
:theme="theme"
|
||||
>
|
||||
|
||||
@@ -140,7 +140,10 @@ function useMixedMenu() {
|
||||
watch(
|
||||
() => route.path,
|
||||
(path) => {
|
||||
const currentPath = (route?.meta?.activePath as string) ?? path;
|
||||
const currentPath = route?.meta?.activePath ?? route?.meta?.link ?? path;
|
||||
if (willOpenedByWindow(currentPath)) {
|
||||
return;
|
||||
}
|
||||
calcSideMenus(currentPath);
|
||||
if (rootMenuPath.value)
|
||||
defaultSubMap.set(rootMenuPath.value, currentPath);
|
||||
|
||||
@@ -30,7 +30,7 @@ const {
|
||||
} = useTabbar();
|
||||
|
||||
const menus = computed(() => {
|
||||
const tab = tabbarStore.getTabByPath(currentActive.value);
|
||||
const tab = tabbarStore.getTabByKey(currentActive.value);
|
||||
const menus = createContextMenus(tab);
|
||||
return menus.map((item) => {
|
||||
return {
|
||||
|
||||
@@ -22,7 +22,7 @@ import {
|
||||
X,
|
||||
} from '@vben/icons';
|
||||
import { $t, useI18n } from '@vben/locales';
|
||||
import { useAccessStore, useTabbarStore } from '@vben/stores';
|
||||
import { getTabKey, useAccessStore, useTabbarStore } from '@vben/stores';
|
||||
import { filterTree } from '@vben/utils';
|
||||
|
||||
export function useTabbar() {
|
||||
@@ -44,8 +44,11 @@ export function useTabbar() {
|
||||
toggleTabPin,
|
||||
} = useTabs();
|
||||
|
||||
/**
|
||||
* 当前路径对应的tab的key
|
||||
*/
|
||||
const currentActive = computed(() => {
|
||||
return route.fullPath;
|
||||
return getTabKey(route);
|
||||
});
|
||||
|
||||
const { locale } = useI18n();
|
||||
@@ -73,7 +76,8 @@ export function useTabbar() {
|
||||
|
||||
// 点击tab,跳转路由
|
||||
const handleClick = (key: string) => {
|
||||
router.push(key);
|
||||
const { fullPath, path } = tabbarStore.getTabByKey(key);
|
||||
router.push(fullPath || path);
|
||||
};
|
||||
|
||||
// 关闭tab
|
||||
@@ -100,7 +104,7 @@ export function useTabbar() {
|
||||
);
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
const meta = route.matched?.[route.matched.length - 1]?.meta;
|
||||
tabbarStore.addTab({
|
||||
|
||||
@@ -6,7 +6,7 @@ import { $t } from '@vben/locales';
|
||||
import { useVbenModal } from '@vben-core/popup-ui';
|
||||
|
||||
interface Props {
|
||||
// 轮训时间，分钟
|
||||
// 轮询时间，分钟
|
||||
checkUpdatesInterval?: number;
|
||||
// 检查更新的地址
|
||||
checkUpdateUrl?: string;
|
||||
@@ -46,6 +46,7 @@ async function getVersionTag() {
|
||||
const response = await fetch(props.checkUpdateUrl, {
|
||||
cache: 'no-cache',
|
||||
method: 'HEAD',
|
||||
redirect: 'manual',
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
@@ -2,10 +2,12 @@ export { default as Breadcrumb } from './breadcrumb.vue';
|
||||
export * from './check-updates';
|
||||
export { default as AuthenticationColorToggle } from './color-toggle.vue';
|
||||
export * from './global-search';
|
||||
export * from './help';
|
||||
export { default as LanguageToggle } from './language-toggle.vue';
|
||||
export { default as AuthenticationLayoutToggle } from './layout-toggle.vue';
|
||||
export * from './lock-screen';
|
||||
export * from './notification';
|
||||
export * from './preferences';
|
||||
export * from './tenant-dropdown';
|
||||
export * from './theme-toggle';
|
||||
export * from './user-dropdown';
|
||||
|
||||
@@ -46,7 +46,11 @@ interface Props {
|
||||
/**
|
||||
* 菜单数组
|
||||
*/
|
||||
menus?: Array<{ handler: AnyFunction; icon?: Component; text: string }>;
|
||||
menus?: Array<{
|
||||
handler: AnyFunction;
|
||||
icon?: Component | Function | string;
|
||||
text: string;
|
||||
}>;
|
||||
|
||||
/**
|
||||
* 标签文本
|
||||
|
||||
@@ -25,6 +25,10 @@
|
||||
"./motion": {
|
||||
"types": "./src/motion/index.ts",
|
||||
"default": "./src/motion/index.ts"
|
||||
},
|
||||
"./markmap": {
|
||||
"types": "./src/markmap/index.ts",
|
||||
"default": "./src/markmap/index.ts"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -40,8 +44,16 @@
|
||||
"@vueuse/core": "catalog:",
|
||||
"@vueuse/motion": "catalog:",
|
||||
"echarts": "catalog:",
|
||||
"markdown-it": "catalog:",
|
||||
"markmap-common": "catalog:",
|
||||
"markmap-lib": "catalog:",
|
||||
"markmap-toolbar": "catalog:",
|
||||
"markmap-view": "catalog:",
|
||||
"vue": "catalog:",
|
||||
"vxe-pc-ui": "catalog:",
|
||||
"vxe-table": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/markdown-it": "catalog:"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,13 +3,16 @@ import type {
|
||||
BarSeriesOption,
|
||||
GaugeSeriesOption,
|
||||
LineSeriesOption,
|
||||
MapSeriesOption,
|
||||
} from 'echarts/charts';
|
||||
import type {
|
||||
DatasetComponentOption,
|
||||
GeoComponentOption,
|
||||
GridComponentOption,
|
||||
// 组件类型的定义后缀都为 ComponentOption
|
||||
TitleComponentOption,
|
||||
TooltipComponentOption,
|
||||
VisualMapComponentOption,
|
||||
} from 'echarts/components';
|
||||
import type { ComposeOption } from 'echarts/core';
|
||||
|
||||
@@ -17,12 +20,14 @@ import {
|
||||
BarChart,
|
||||
GaugeChart,
|
||||
LineChart,
|
||||
MapChart,
|
||||
PieChart,
|
||||
RadarChart,
|
||||
} from 'echarts/charts';
|
||||
import {
|
||||
// 数据集组件
|
||||
DatasetComponent,
|
||||
GeoComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
TitleComponent,
|
||||
@@ -30,6 +35,7 @@ import {
|
||||
TooltipComponent,
|
||||
// 内置数据转换器组件 (filter, sort)
|
||||
TransformComponent,
|
||||
VisualMapComponent,
|
||||
} from 'echarts/components';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { LabelLayout, UniversalTransition } from 'echarts/features';
|
||||
@@ -40,10 +46,13 @@ export type ECOption = ComposeOption<
|
||||
| BarSeriesOption
|
||||
| DatasetComponentOption
|
||||
| GaugeSeriesOption
|
||||
| GeoComponentOption
|
||||
| GridComponentOption
|
||||
| LineSeriesOption
|
||||
| MapSeriesOption
|
||||
| TitleComponentOption
|
||||
| TooltipComponentOption
|
||||
| VisualMapComponentOption
|
||||
>;
|
||||
|
||||
// 注册必须的组件
|
||||
@@ -63,6 +72,9 @@ echarts.use([
|
||||
CanvasRenderer,
|
||||
LegendComponent,
|
||||
ToolboxComponent,
|
||||
VisualMapComponent,
|
||||
MapChart,
|
||||
GeoComponent,
|
||||
]);
|
||||
|
||||
export default echarts;
|
||||
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
} from '@vueuse/core';
|
||||
|
||||
import echarts from './echarts';
|
||||
import chinaMap from './map/china.json';
|
||||
|
||||
type EchartsUIType = typeof EchartsUI | undefined;
|
||||
|
||||
@@ -32,6 +33,18 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
|
||||
const { height, width } = useWindowSize();
|
||||
const resizeHandler: () => void = useDebounceFn(resize, 200);
|
||||
|
||||
echarts.registerMap('china', {
|
||||
geoJSON: chinaMap as any,
|
||||
specialAreas: {
|
||||
china: {
|
||||
left: 500,
|
||||
top: 500,
|
||||
width: 1000,
|
||||
height: 1000,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const getOptions = computed((): EChartsOption => {
|
||||
if (!isDark.value) {
|
||||
return {};
|
||||
|
||||
@@ -26,14 +26,14 @@ function getDefaultState(): VxeGridProps {
|
||||
};
|
||||
}
|
||||
|
||||
export class VxeGridApi {
|
||||
export class VxeGridApi<T extends Record<string, any> = any> {
|
||||
public formApi = {} as ExtendedFormApi;
|
||||
|
||||
// private prevState: null | VxeGridProps = null;
|
||||
public grid = {} as VxeGridInstance;
|
||||
public state: null | VxeGridProps = null;
|
||||
public grid = {} as VxeGridInstance<T>;
|
||||
public state: null | VxeGridProps<T> = null;
|
||||
|
||||
public store: Store<VxeGridProps>;
|
||||
public store: Store<VxeGridProps<T>>;
|
||||
|
||||
private isMounted = false;
|
||||
|
||||
@@ -99,8 +99,8 @@ export class VxeGridApi {
|
||||
|
||||
setState(
|
||||
stateOrFn:
|
||||
| ((prev: VxeGridProps) => Partial<VxeGridProps>)
|
||||
| Partial<VxeGridProps>,
|
||||
| ((prev: VxeGridProps<T>) => Partial<VxeGridProps<T>>)
|
||||
| Partial<VxeGridProps<T>>,
|
||||
) {
|
||||
if (isFunction(stateOrFn)) {
|
||||
this.store.setState((prev) => {
|
||||
|
||||
@@ -6,6 +6,7 @@ export { default as VbenVxeGrid } from './use-vxe-grid.vue';
|
||||
export type {
|
||||
VxeGridListeners,
|
||||
VxeGridProps,
|
||||
VxeGridPropTypes,
|
||||
VxeTableInstance,
|
||||
VxeToolbarInstance,
|
||||
} from 'vxe-table';
|
||||
|
||||
@@ -9,7 +9,7 @@ import type { Ref } from 'vue';
|
||||
|
||||
import type { ClassType, DeepPartial } from '@vben/types';
|
||||
|
||||
import type { VbenFormProps } from '@vben-core/form-ui';
|
||||
import type { BaseFormComponentType, VbenFormProps } from '@vben-core/form-ui';
|
||||
|
||||
import type { VxeGridApi } from './api';
|
||||
|
||||
@@ -35,7 +35,11 @@ export interface SeparatorOptions {
|
||||
show?: boolean;
|
||||
backgroundColor?: string;
|
||||
}
|
||||
export interface VxeGridProps {
|
||||
|
||||
export interface VxeGridProps<
|
||||
T extends Record<string, any> = any,
|
||||
D extends BaseFormComponentType = BaseFormComponentType,
|
||||
> {
|
||||
/**
|
||||
* 标题
|
||||
*/
|
||||
@@ -55,15 +59,15 @@ export interface VxeGridProps {
|
||||
/**
|
||||
* vxe-grid 配置
|
||||
*/
|
||||
gridOptions?: DeepPartial<VxeTableGridOptions>;
|
||||
gridOptions?: DeepPartial<VxeTableGridOptions<T>>;
|
||||
/**
|
||||
* vxe-grid 事件
|
||||
*/
|
||||
gridEvents?: DeepPartial<VxeGridListeners>;
|
||||
gridEvents?: DeepPartial<VxeGridListeners<T>>;
|
||||
/**
|
||||
* 表单配置
|
||||
*/
|
||||
formOptions?: VbenFormProps;
|
||||
formOptions?: VbenFormProps<D>;
|
||||
/**
|
||||
* 显示搜索表单
|
||||
*/
|
||||
@@ -74,9 +78,12 @@ export interface VxeGridProps {
|
||||
separator?: boolean | SeparatorOptions;
|
||||
}
|
||||
|
||||
export type ExtendedVxeGridApi = VxeGridApi & {
|
||||
useStore: <T = NoInfer<VxeGridProps>>(
|
||||
selector?: (state: NoInfer<VxeGridProps>) => T,
|
||||
export type ExtendedVxeGridApi<
|
||||
D extends Record<string, any> = any,
|
||||
F extends BaseFormComponentType = BaseFormComponentType,
|
||||
> = VxeGridApi<D> & {
|
||||
useStore: <T = NoInfer<VxeGridProps<D, F>>>(
|
||||
selector?: (state: NoInfer<VxeGridProps<any, any>>) => T,
|
||||
) => Readonly<Ref<T>>;
|
||||
};
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import type { BaseFormComponentType } from '@vben-core/form-ui';
|
||||
|
||||
import type { ExtendedVxeGridApi, VxeGridProps } from './types';
|
||||
|
||||
import { defineComponent, h, onBeforeUnmount } from 'vue';
|
||||
@@ -7,16 +9,19 @@ import { useStore } from '@vben-core/shared/store';
|
||||
import { VxeGridApi } from './api';
|
||||
import VxeGrid from './use-vxe-grid.vue';
|
||||
|
||||
export function useVbenVxeGrid(options: VxeGridProps) {
|
||||
export function useVbenVxeGrid<
|
||||
T extends Record<string, any> = any,
|
||||
D extends BaseFormComponentType = BaseFormComponentType,
|
||||
>(options: VxeGridProps<T, D>) {
|
||||
// const IS_REACTIVE = isReactive(options);
|
||||
const api = new VxeGridApi(options);
|
||||
const extendedApi: ExtendedVxeGridApi = api as ExtendedVxeGridApi;
|
||||
const extendedApi: ExtendedVxeGridApi<T, D> = api as ExtendedVxeGridApi<T, D>;
|
||||
extendedApi.useStore = (selector) => {
|
||||
return useStore(api.store, selector);
|
||||
};
|
||||
|
||||
const Grid = defineComponent(
|
||||
(props: VxeGridProps, { attrs, slots }) => {
|
||||
(props: VxeGridProps<T>, { attrs, slots }) => {
|
||||
onBeforeUnmount(() => {
|
||||
api.unmount();
|
||||
});
|
||||
|
||||
@@ -59,6 +59,7 @@ const FORM_SLOT_PREFIX = 'form-';
|
||||
|
||||
const TOOLBAR_ACTIONS = 'toolbar-actions';
|
||||
const TOOLBAR_TOOLS = 'toolbar-tools';
|
||||
const TABLE_TITLE = 'table-title';
|
||||
|
||||
const gridRef = useTemplateRef<VxeGridInstance>('gridRef');
|
||||
|
||||
@@ -129,7 +130,7 @@ const [Form, formApi] = useTableForm({
|
||||
});
|
||||
|
||||
const showTableTitle = computed(() => {
|
||||
return !!slots.tableTitle?.() || tableTitle.value;
|
||||
return !!slots[TABLE_TITLE]?.() || tableTitle.value;
|
||||
});
|
||||
|
||||
const showToolbar = computed(() => {
|
||||
@@ -277,6 +278,15 @@ const delegatedFormSlots = computed(() => {
|
||||
return resultSlots.map((key) => key.replace(FORM_SLOT_PREFIX, ''));
|
||||
});
|
||||
|
||||
const showDefaultEmpty = computed(() => {
|
||||
// 检查是否有原生的 VXE Table 空状态配置
|
||||
const hasEmptyText = options.value.emptyText !== undefined;
|
||||
const hasEmptyRender = options.value.emptyRender !== undefined;
|
||||
|
||||
// 如果有原生配置，就不显示默认的空状态
|
||||
return !hasEmptyText && !hasEmptyRender;
|
||||
});
|
||||
|
||||
async function init() {
|
||||
await nextTick();
|
||||
const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
|
||||
@@ -458,7 +468,7 @@ onUnmounted(() => {
|
||||
</slot>
|
||||
</template>
|
||||
<!-- 统一控状态 -->
|
||||
<template #empty>
|
||||
<template v-if="showDefaultEmpty" #empty>
|
||||
<slot name="empty">
|
||||
<EmptyIcon class="mx-auto" />
|
||||
<div class="mt-2">{{ $t('common.noData') }}</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/request",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
@@ -20,6 +20,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/fetch-event-source": "catalog:",
|
||||
"@vben/locales": "workspace:*",
|
||||
"@vben/utils": "workspace:*",
|
||||
"axios": "catalog:",
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
export * from './request-client';
|
||||
export * from '@microsoft/fetch-event-source';
|
||||
export * from 'axios';
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import type { RequestClient } from '../request-client';
|
||||
import type { RequestClientConfig } from '../types';
|
||||
|
||||
import { isUndefined } from '@vben/utils';
|
||||
|
||||
class FileUploader {
|
||||
private client: RequestClient;
|
||||
|
||||
@@ -18,10 +20,10 @@ class FileUploader {
|
||||
Object.entries(data).forEach(([key, value]) => {
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((item, index) => {
|
||||
formData.append(`${key}[${index}]`, item);
|
||||
!isUndefined(item) && formData.append(`${key}[${index}]`, item);
|
||||
});
|
||||
} else {
|
||||
formData.append(key, value);
|
||||
!isUndefined(value) && formData.append(key, value);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/icons",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -12,7 +12,29 @@ const SvgBellIcon = createIconifyIcon('svg:bell');
|
||||
const SvgCakeIcon = createIconifyIcon('svg:cake');
|
||||
const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
|
||||
|
||||
/** AI */
|
||||
const SvgGptIcon = createIconifyIcon('svg:gpt');
|
||||
|
||||
/** 支付 */
|
||||
const SvgAlipayPcIcon = createIconifyIcon('svg:alipay-pc');
|
||||
const SvgAlipayWapIcon = createIconifyIcon('svg:alipay-wap');
|
||||
const SvgAlipayAppIcon = createIconifyIcon('svg:alipay-app');
|
||||
const SvgAlipayQrIcon = createIconifyIcon('svg:alipay-qr');
|
||||
const SvgAlipayBarIcon = createIconifyIcon('svg:alipay-bar');
|
||||
const SvgWxPubIcon = createIconifyIcon('svg:wx-pub');
|
||||
const SvgWxLiteIcon = createIconifyIcon('svg:wx-lite');
|
||||
const SvgWxAppIcon = createIconifyIcon('svg:wx-app');
|
||||
const SvgWxNativeIcon = createIconifyIcon('svg:wx-native');
|
||||
const SvgWxBarIcon = createIconifyIcon('svg:wx-bar');
|
||||
const SvgWalletIcon = createIconifyIcon('svg:wallet');
|
||||
const SvgMockIcon = createIconifyIcon('svg:mock');
|
||||
|
||||
export {
|
||||
SvgAlipayAppIcon,
|
||||
SvgAlipayBarIcon,
|
||||
SvgAlipayPcIcon,
|
||||
SvgAlipayQrIcon,
|
||||
SvgAlipayWapIcon,
|
||||
SvgAntdvLogoIcon,
|
||||
SvgAvatar1Icon,
|
||||
SvgAvatar2Icon,
|
||||
@@ -22,4 +44,12 @@ export {
|
||||
SvgCakeIcon,
|
||||
SvgCardIcon,
|
||||
SvgDownloadIcon,
|
||||
SvgGptIcon,
|
||||
SvgMockIcon,
|
||||
SvgWalletIcon,
|
||||
SvgWxAppIcon,
|
||||
SvgWxBarIcon,
|
||||
SvgWxLiteIcon,
|
||||
SvgWxNativeIcon,
|
||||
SvgWxPubIcon,
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/locales",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"welcomeBack": "Welcome Back",
|
||||
"pageTitle": "License Admin System",
|
||||
"pageDesc": "Efficient, versatile frontend template",
|
||||
"pageTitle": "",
|
||||
"pageDesc": "",
|
||||
"loginSuccess": "Login Successful",
|
||||
"loginSuccessDesc": "Welcome Back",
|
||||
"loginSubtitle": "Enter your account details to manage your projects",
|
||||
|
||||
@@ -16,7 +16,9 @@
|
||||
"disabled": "Disabled",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"deleteBatch": "Delete Batch",
|
||||
"create": "Create",
|
||||
"detail": "Detail",
|
||||
"yes": "Yes",
|
||||
"no": "No",
|
||||
"showSearchPanel": "Show search panel",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"edit": "Modify {0}",
|
||||
"create": "Create {0}",
|
||||
"delete": "Delete {0}",
|
||||
"deleteBatch": "Delete Batch",
|
||||
"detail": "Detail {0}",
|
||||
"view": "View {0}",
|
||||
"import": "Import",
|
||||
@@ -26,12 +27,15 @@
|
||||
"deleteConfirm": "Are you sure to delete {0}?",
|
||||
"deleting": "Deleting {0} ...",
|
||||
"deleteSuccess": "{0} deleted successfully",
|
||||
"deleteFailed": "{0} deleted failed",
|
||||
"operationSuccess": "Operation succeeded",
|
||||
"operationFailed": "Operation failed",
|
||||
"importSuccess": "Import succeeded",
|
||||
"importFail": "Import failed",
|
||||
"downloadTemplateFail": "Download template failed",
|
||||
"updating": "Updating {0}..."
|
||||
"updating": "Updating {0}...",
|
||||
"updateSuccess": "Update {0} successfully",
|
||||
"updateFailed": "Update {0} failed"
|
||||
},
|
||||
"placeholder": {
|
||||
"input": "Please enter",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"welcomeBack": "欢迎回来",
|
||||
"pageTitle": "License管理系统",
|
||||
"pageDesc": "工程化、高性能、跨组件库的前端模版",
|
||||
"pageTitle": "",
|
||||
"pageDesc": "",
|
||||
"loginSuccess": "登录成功",
|
||||
"loginSuccessDesc": "欢迎回来",
|
||||
"loginSubtitle": "请输入您的帐户信息以开始管理您的项目",
|
||||
|
||||
@@ -16,7 +16,9 @@
|
||||
"disabled": "已禁用",
|
||||
"edit": "修改",
|
||||
"delete": "删除",
|
||||
"deleteBatch": "批量删除",
|
||||
"create": "新增",
|
||||
"detail": "详情",
|
||||
"yes": "是",
|
||||
"no": "否",
|
||||
"showSearchPanel": "显示搜索面板",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"edit": "修改{0}",
|
||||
"create": "新增{0}",
|
||||
"delete": "删除{0}",
|
||||
"deleteBatch": "批量删除",
|
||||
"detail": "详情{0}",
|
||||
"view": "查看{0}",
|
||||
"import": "导入",
|
||||
@@ -26,12 +27,15 @@
|
||||
"deleteConfirm": "确定删除 {0} 吗？",
|
||||
"deleting": "正在删除 {0} ...",
|
||||
"deleteSuccess": "{0} 删除成功",
|
||||
"deleteFailed": "{0} 删除失败",
|
||||
"operationSuccess": "操作成功",
|
||||
"operationFailed": "操作失败",
|
||||
"importSuccess": "导入成功",
|
||||
"importFail": "导入失败",
|
||||
"downloadTemplateFail": "下载模板失败",
|
||||
"updating": "正在更新 {0}..."
|
||||
"updating": "正在更新 {0}...",
|
||||
"updateSuccess": "更新 {0} 成功",
|
||||
"updateFailed": "更新 {0} 失败"
|
||||
},
|
||||
"placeholder": {
|
||||
"input": "请输入",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/preferences",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/stores",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -22,12 +22,13 @@ describe('useAccessStore', () => {
|
||||
const tab: any = {
|
||||
fullPath: '/home',
|
||||
meta: {},
|
||||
key: '/home',
|
||||
name: 'Home',
|
||||
path: '/home',
|
||||
};
|
||||
store.addTab(tab);
|
||||
const addNewTab = store.addTab(tab);
|
||||
expect(store.tabs.length).toBe(1);
|
||||
expect(store.tabs[0]).toEqual(tab);
|
||||
expect(store.tabs[0]).toEqual(addNewTab);
|
||||
});
|
||||
|
||||
it('adds a new tab if it does not exist', () => {
|
||||
@@ -38,20 +39,22 @@ describe('useAccessStore', () => {
|
||||
name: 'New',
|
||||
path: '/new',
|
||||
};
|
||||
store.addTab(newTab);
|
||||
expect(store.tabs).toContainEqual(newTab);
|
||||
const addNewTab = store.addTab(newTab);
|
||||
expect(store.tabs).toContainEqual(addNewTab);
|
||||
});
|
||||
|
||||
it('updates an existing tab instead of adding a new one', () => {
|
||||
const store = useTabbarStore();
|
||||
const initialTab: any = {
|
||||
fullPath: '/existing',
|
||||
meta: {},
|
||||
meta: {
|
||||
fullPathKey: false,
|
||||
},
|
||||
name: 'Existing',
|
||||
path: '/existing',
|
||||
query: {},
|
||||
};
|
||||
store.tabs.push(initialTab);
|
||||
store.addTab(initialTab);
|
||||
const updatedTab = { ...initialTab, query: { id: '1' } };
|
||||
store.addTab(updatedTab);
|
||||
expect(store.tabs.length).toBe(1);
|
||||
@@ -60,9 +63,12 @@ describe('useAccessStore', () => {
|
||||
|
||||
it('closes all tabs', async () => {
|
||||
const store = useTabbarStore();
|
||||
store.tabs = [
|
||||
{ fullPath: '/home', meta: {}, name: 'Home', path: '/home' },
|
||||
] as any;
|
||||
store.addTab({
|
||||
fullPath: '/home',
|
||||
meta: {},
|
||||
name: 'Home',
|
||||
path: '/home',
|
||||
} as any);
|
||||
router.replace = vi.fn();
|
||||
|
||||
await store.closeAllTabs(router);
|
||||
@@ -157,7 +163,7 @@ describe('useAccessStore', () => {
|
||||
path: '/contact',
|
||||
} as any);
|
||||
|
||||
await store._bulkCloseByPaths(['/home', '/contact']);
|
||||
await store._bulkCloseByKeys(['/home', '/contact']);
|
||||
|
||||
expect(store.tabs).toHaveLength(1);
|
||||
expect(store.tabs[0]?.name).toBe('About');
|
||||
@@ -183,9 +189,8 @@ describe('useAccessStore', () => {
|
||||
name: 'Contact',
|
||||
path: '/contact',
|
||||
};
|
||||
store.addTab(targetTab);
|
||||
|
||||
await store.closeLeftTabs(targetTab);
|
||||
const addTargetTab = store.addTab(targetTab);
|
||||
await store.closeLeftTabs(addTargetTab);
|
||||
|
||||
expect(store.tabs).toHaveLength(1);
|
||||
expect(store.tabs[0]?.name).toBe('Contact');
|
||||
@@ -205,7 +210,7 @@ describe('useAccessStore', () => {
|
||||
name: 'About',
|
||||
path: '/about',
|
||||
};
|
||||
store.addTab(targetTab);
|
||||
const addTargetTab = store.addTab(targetTab);
|
||||
store.addTab({
|
||||
fullPath: '/contact',
|
||||
meta: {},
|
||||
@@ -213,7 +218,7 @@ describe('useAccessStore', () => {
|
||||
path: '/contact',
|
||||
} as any);
|
||||
|
||||
await store.closeOtherTabs(targetTab);
|
||||
await store.closeOtherTabs(addTargetTab);
|
||||
|
||||
expect(store.tabs).toHaveLength(1);
|
||||
expect(store.tabs[0]?.name).toBe('About');
|
||||
@@ -227,7 +232,7 @@ describe('useAccessStore', () => {
|
||||
name: 'Home',
|
||||
path: '/home',
|
||||
};
|
||||
store.addTab(targetTab);
|
||||
const addTargetTab = store.addTab(targetTab);
|
||||
store.addTab({
|
||||
fullPath: '/about',
|
||||
meta: {},
|
||||
@@ -241,7 +246,7 @@ describe('useAccessStore', () => {
|
||||
path: '/contact',
|
||||
} as any);
|
||||
|
||||
await store.closeRightTabs(targetTab);
|
||||
await store.closeRightTabs(addTargetTab);
|
||||
|
||||
expect(store.tabs).toHaveLength(1);
|
||||
expect(store.tabs[0]?.name).toBe('Home');
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
import type { Router, RouteRecordNormalized } from 'vue-router';
|
||||
import type { ComputedRef } from 'vue';
|
||||
import type {
|
||||
RouteLocationNormalized,
|
||||
Router,
|
||||
RouteRecordNormalized,
|
||||
} from 'vue-router';
|
||||
|
||||
import type { TabDefinition } from '@vben-core/typings';
|
||||
|
||||
@@ -52,23 +57,23 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
/**
|
||||
* Close tabs in bulk
|
||||
*/
|
||||
async _bulkCloseByPaths(paths: string[]) {
|
||||
this.tabs = this.tabs.filter((item) => {
|
||||
return !paths.includes(getTabPath(item));
|
||||
});
|
||||
async _bulkCloseByKeys(keys: string[]) {
|
||||
const keySet = new Set(keys);
|
||||
this.tabs = this.tabs.filter(
|
||||
(item) => !keySet.has(getTabKeyFromTab(item)),
|
||||
);
|
||||
|
||||
this.updateCacheTabs();
|
||||
await this.updateCacheTabs();
|
||||
},
|
||||
/**
|
||||
* @zh_CN 关闭标签页
|
||||
* @param tab
|
||||
*/
|
||||
_close(tab: TabDefinition) {
|
||||
const { fullPath } = tab;
|
||||
if (isAffixTab(tab)) {
|
||||
return;
|
||||
}
|
||||
const index = this.tabs.findIndex((item) => item.fullPath === fullPath);
|
||||
const index = this.tabs.findIndex((item) => equalTab(item, tab));
|
||||
index !== -1 && this.tabs.splice(index, 1);
|
||||
},
|
||||
/**
|
||||
@@ -101,14 +106,17 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
* @zh_CN 添加标签页
|
||||
* @param routeTab
|
||||
*/
|
||||
addTab(routeTab: TabDefinition) {
|
||||
const tab = cloneTab(routeTab);
|
||||
addTab(routeTab: TabDefinition): TabDefinition {
|
||||
let tab = cloneTab(routeTab);
|
||||
if (!tab.key) {
|
||||
tab.key = getTabKey(routeTab);
|
||||
}
|
||||
if (!isTabShown(tab)) {
|
||||
return;
|
||||
return tab;
|
||||
}
|
||||
|
||||
const tabIndex = this.tabs.findIndex((tab) => {
|
||||
return getTabPath(tab) === getTabPath(routeTab);
|
||||
const tabIndex = this.tabs.findIndex((item) => {
|
||||
return equalTab(item, tab);
|
||||
});
|
||||
|
||||
if (tabIndex === -1) {
|
||||
@@ -154,10 +162,11 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
mergedTab.meta.newTabTitle = curMeta.newTabTitle;
|
||||
}
|
||||
}
|
||||
|
||||
tab = mergedTab;
|
||||
this.tabs.splice(tabIndex, 1, mergedTab);
|
||||
}
|
||||
this.updateCacheTabs();
|
||||
return tab;
|
||||
},
|
||||
/**
|
||||
* @zh_CN 关闭所有标签页
|
||||
@@ -173,65 +182,63 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
* @param tab
|
||||
*/
|
||||
async closeLeftTabs(tab: TabDefinition) {
|
||||
const index = this.tabs.findIndex(
|
||||
(item) => getTabPath(item) === getTabPath(tab),
|
||||
);
|
||||
const index = this.tabs.findIndex((item) => equalTab(item, tab));
|
||||
|
||||
if (index < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const leftTabs = this.tabs.slice(0, index);
|
||||
const paths: string[] = [];
|
||||
const keys: string[] = [];
|
||||
|
||||
for (const item of leftTabs) {
|
||||
if (!isAffixTab(item)) {
|
||||
paths.push(getTabPath(item));
|
||||
keys.push(item.key as string);
|
||||
}
|
||||
}
|
||||
await this._bulkCloseByPaths(paths);
|
||||
await this._bulkCloseByKeys(keys);
|
||||
},
|
||||
/**
|
||||
* @zh_CN 关闭其他标签页
|
||||
* @param tab
|
||||
*/
|
||||
async closeOtherTabs(tab: TabDefinition) {
|
||||
const closePaths = this.tabs.map((item) => getTabPath(item));
|
||||
const closeKeys = this.tabs.map((item) => getTabKeyFromTab(item));
|
||||
|
||||
const paths: string[] = [];
|
||||
const keys: string[] = [];
|
||||
|
||||
for (const path of closePaths) {
|
||||
if (path !== tab.fullPath) {
|
||||
const closeTab = this.tabs.find((item) => getTabPath(item) === path);
|
||||
for (const key of closeKeys) {
|
||||
if (key !== getTabKeyFromTab(tab)) {
|
||||
const closeTab = this.tabs.find(
|
||||
(item) => getTabKeyFromTab(item) === key,
|
||||
);
|
||||
if (!closeTab) {
|
||||
continue;
|
||||
}
|
||||
if (!isAffixTab(closeTab)) {
|
||||
paths.push(getTabPath(closeTab));
|
||||
keys.push(closeTab.key as string);
|
||||
}
|
||||
}
|
||||
}
|
||||
await this._bulkCloseByPaths(paths);
|
||||
await this._bulkCloseByKeys(keys);
|
||||
},
|
||||
/**
|
||||
* @zh_CN 关闭右侧标签页
|
||||
* @param tab
|
||||
*/
|
||||
async closeRightTabs(tab: TabDefinition) {
|
||||
const index = this.tabs.findIndex(
|
||||
(item) => getTabPath(item) === getTabPath(tab),
|
||||
);
|
||||
const index = this.tabs.findIndex((item) => equalTab(item, tab));
|
||||
|
||||
if (index !== -1 && index < this.tabs.length - 1) {
|
||||
const rightTabs = this.tabs.slice(index + 1);
|
||||
|
||||
const paths: string[] = [];
|
||||
const keys: string[] = [];
|
||||
for (const item of rightTabs) {
|
||||
if (!isAffixTab(item)) {
|
||||
paths.push(getTabPath(item));
|
||||
keys.push(item.key as string);
|
||||
}
|
||||
}
|
||||
await this._bulkCloseByPaths(paths);
|
||||
await this._bulkCloseByKeys(keys);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -242,15 +249,14 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
*/
|
||||
async closeTab(tab: TabDefinition, router: Router) {
|
||||
const { currentRoute } = router;
|
||||
|
||||
// 关闭不是激活选项卡
|
||||
if (getTabPath(currentRoute.value) !== getTabPath(tab)) {
|
||||
if (getTabKey(currentRoute.value) !== getTabKeyFromTab(tab)) {
|
||||
this._close(tab);
|
||||
this.updateCacheTabs();
|
||||
return;
|
||||
}
|
||||
const index = this.getTabs.findIndex(
|
||||
(item) => getTabPath(item) === getTabPath(currentRoute.value),
|
||||
(item) => getTabKeyFromTab(item) === getTabKey(currentRoute.value),
|
||||
);
|
||||
|
||||
const before = this.getTabs[index - 1];
|
||||
@@ -277,7 +283,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
async closeTabByKey(key: string, router: Router) {
|
||||
const originKey = decodeURIComponent(key);
|
||||
const index = this.tabs.findIndex(
|
||||
(item) => getTabPath(item) === originKey,
|
||||
(item) => getTabKeyFromTab(item) === originKey,
|
||||
);
|
||||
if (index === -1) {
|
||||
return;
|
||||
@@ -290,12 +296,12 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据路径获取标签页
|
||||
* @param path
|
||||
* 根据tab的key获取tab
|
||||
* @param key
|
||||
*/
|
||||
getTabByPath(path: string) {
|
||||
getTabByKey(key: string) {
|
||||
return this.getTabs.find(
|
||||
(item) => getTabPath(item) === path,
|
||||
(item) => getTabKeyFromTab(item) === key,
|
||||
) as TabDefinition;
|
||||
},
|
||||
/**
|
||||
@@ -311,22 +317,19 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
* @param tab
|
||||
*/
|
||||
async pinTab(tab: TabDefinition) {
|
||||
const index = this.tabs.findIndex(
|
||||
(item) => getTabPath(item) === getTabPath(tab),
|
||||
);
|
||||
if (index !== -1) {
|
||||
const oldTab = this.tabs[index];
|
||||
tab.meta.affixTab = true;
|
||||
tab.meta.title = oldTab?.meta?.title as string;
|
||||
// this.addTab(tab);
|
||||
this.tabs.splice(index, 1, tab);
|
||||
const index = this.tabs.findIndex((item) => equalTab(item, tab));
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
const oldTab = this.tabs[index];
|
||||
tab.meta.affixTab = true;
|
||||
tab.meta.title = oldTab?.meta?.title as string;
|
||||
// this.addTab(tab);
|
||||
this.tabs.splice(index, 1, tab);
|
||||
// 过滤固定tabs，后面更改affixTabOrder的值的话可能会有问题，目前行464排序affixTabs没有设置值
|
||||
const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
|
||||
// 获得固定tabs的index
|
||||
const newIndex = affixTabs.findIndex(
|
||||
(item) => getTabPath(item) === getTabPath(tab),
|
||||
);
|
||||
const newIndex = affixTabs.findIndex((item) => equalTab(item, tab));
|
||||
// 交换位置重新排序
|
||||
await this.sortTabs(index, newIndex);
|
||||
},
|
||||
@@ -371,9 +374,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
if (tab?.meta?.newTabTitle) {
|
||||
return;
|
||||
}
|
||||
const findTab = this.tabs.find(
|
||||
(item) => getTabPath(item) === getTabPath(tab),
|
||||
);
|
||||
const findTab = this.tabs.find((item) => equalTab(item, tab));
|
||||
if (findTab) {
|
||||
findTab.meta.newTabTitle = undefined;
|
||||
await this.updateCacheTabs();
|
||||
@@ -401,13 +402,24 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
|
||||
/**
|
||||
* @zh_CN 设置标签页标题
|
||||
* @param tab
|
||||
* @param title
|
||||
*
|
||||
* @zh_CN 支持设置静态标题字符串或计算属性作为动态标题
|
||||
* @zh_CN 当标题为计算属性时,标题会随计算属性值变化而自动更新
|
||||
* @zh_CN 适用于需要根据状态或多语言动态更新标题的场景
|
||||
*
|
||||
* @param {TabDefinition} tab - 标签页对象
|
||||
* @param {ComputedRef<string> | string} title - 标题内容,支持静态字符串或计算属性
|
||||
*
|
||||
* @example
|
||||
* // 设置静态标题
|
||||
* setTabTitle(tab, '新标签页');
|
||||
*
|
||||
* @example
|
||||
* // 设置动态标题
|
||||
* setTabTitle(tab, computed(() => t('common.dashboard')));
|
||||
*/
|
||||
async setTabTitle(tab: TabDefinition, title: string) {
|
||||
const findTab = this.tabs.find(
|
||||
(item) => getTabPath(item) === getTabPath(tab),
|
||||
);
|
||||
async setTabTitle(tab: TabDefinition, title: ComputedRef<string> | string) {
|
||||
const findTab = this.tabs.find((item) => equalTab(item, tab));
|
||||
|
||||
if (findTab) {
|
||||
findTab.meta.newTabTitle = title;
|
||||
@@ -448,17 +460,15 @@ export const useTabbarStore = defineStore('core-tabbar', {
|
||||
* @param tab
|
||||
*/
|
||||
async unpinTab(tab: TabDefinition) {
|
||||
const index = this.tabs.findIndex(
|
||||
(item) => getTabPath(item) === getTabPath(tab),
|
||||
);
|
||||
|
||||
if (index !== -1) {
|
||||
const oldTab = this.tabs[index];
|
||||
tab.meta.affixTab = false;
|
||||
tab.meta.title = oldTab?.meta?.title as string;
|
||||
// this.addTab(tab);
|
||||
this.tabs.splice(index, 1, tab);
|
||||
const index = this.tabs.findIndex((item) => equalTab(item, tab));
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
const oldTab = this.tabs[index];
|
||||
tab.meta.affixTab = false;
|
||||
tab.meta.title = oldTab?.meta?.title as string;
|
||||
// this.addTab(tab);
|
||||
this.tabs.splice(index, 1, tab);
|
||||
// 过滤固定tabs，后面更改affixTabOrder的值的话可能会有问题，目前行464排序affixTabs没有设置值
|
||||
const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
|
||||
// 获得固定tabs的index,使用固定tabs的下一个位置也就是活动tabs的第一个位置
|
||||
@@ -591,11 +601,49 @@ function isTabShown(tab: TabDefinition) {
|
||||
}
|
||||
|
||||
/**
|
||||
* @zh_CN 获取标签页路径
|
||||
* 从route获取tab页的key
|
||||
* @param tab
|
||||
*/
|
||||
function getTabPath(tab: RouteRecordNormalized | TabDefinition) {
|
||||
return decodeURIComponent((tab as TabDefinition).fullPath || tab.path);
|
||||
function getTabKey(tab: RouteLocationNormalized | RouteRecordNormalized) {
|
||||
const {
|
||||
fullPath,
|
||||
path,
|
||||
meta: { fullPathKey } = {},
|
||||
query = {},
|
||||
} = tab as RouteLocationNormalized;
|
||||
// pageKey可能是数组（查询参数重复时可能出现）
|
||||
const pageKey = Array.isArray(query.pageKey)
|
||||
? query.pageKey[0]
|
||||
: query.pageKey;
|
||||
let rawKey;
|
||||
if (pageKey) {
|
||||
rawKey = pageKey;
|
||||
} else {
|
||||
rawKey = fullPathKey === false ? path : (fullPath ?? path);
|
||||
}
|
||||
try {
|
||||
return decodeURIComponent(rawKey);
|
||||
} catch {
|
||||
return rawKey;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 从tab获取tab页的key
|
||||
* 如果tab没有key,那么就从route获取key
|
||||
* @param tab
|
||||
*/
|
||||
function getTabKeyFromTab(tab: TabDefinition): string {
|
||||
return tab.key ?? getTabKey(tab);
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较两个tab是否相等
|
||||
* @param a
|
||||
* @param b
|
||||
*/
|
||||
function equalTab(a: TabDefinition, b: TabDefinition) {
|
||||
return getTabKeyFromTab(a) === getTabKeyFromTab(b);
|
||||
}
|
||||
|
||||
function routeToTab(route: RouteRecordNormalized) {
|
||||
@@ -603,5 +651,8 @@ function routeToTab(route: RouteRecordNormalized) {
|
||||
meta: route.meta,
|
||||
name: route.name,
|
||||
path: route.path,
|
||||
key: getTabKey(route),
|
||||
} as TabDefinition;
|
||||
}
|
||||
|
||||
export { getTabKey };
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/styles",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/types",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/utils",
|
||||
"version": "5.5.6",
|
||||
"version": "5.5.7",
|
||||
"homepage": "https://github.com/vbenjs/vue-vben-admin",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
|
||||
@@ -8,3 +8,32 @@ export function getPopupContainer(node?: HTMLElement): HTMLElement {
|
||||
node?.closest('form') ?? (node?.parentNode as HTMLElement) ?? document.body
|
||||
);
|
||||
}
|
||||
|
||||
// TODO @xingyu：这个需要 pr 给 vben 官方么？体感上，这个是全局性的哈；
|
||||
/**
|
||||
* VxeTable专用弹窗层
|
||||
* 解决问题: https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IB1DM3
|
||||
* 单表格用法跟上面getPopupContainer一样
|
||||
* 一个页面(body下)有多个表格元素 必须先指定ID & ID参数传入该函数
|
||||
* <BasicTable id="xxx" />
|
||||
* getVxePopupContainer="(node) => getVxePopupContainer(node, 'xxx')"
|
||||
* @param _node 触发的元素
|
||||
* @param id 表格唯一id 当页面(该窗口)有>=两个表格 必须提供ID
|
||||
* @returns 挂载节点
|
||||
*/
|
||||
export function getVxePopupContainer(
|
||||
_node?: HTMLElement,
|
||||
id?: string,
|
||||
): HTMLElement {
|
||||
let selector = 'div.vxe-table--body-wrapper.body--wrapper';
|
||||
if (id) {
|
||||
selector = `div#${id} ${selector}`;
|
||||
}
|
||||
// 挂载到vxe-table的滚动区域
|
||||
const vxeTableContainerNode = document.querySelector(selector);
|
||||
if (!vxeTableContainerNode) {
|
||||
console.warn('无法找到vxe-table元素, 将会挂载到body.');
|
||||
return document.body;
|
||||
}
|
||||
return vxeTableContainerNode as HTMLElement;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user