This commit is contained in:
dap
2024-11-11 14:09:47 +08:00
48 changed files with 314 additions and 55 deletions

View File

@@ -1,6 +1,6 @@
{
"name": "@vben-core/design",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben-core/icons",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben-core/shared",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -0,0 +1,160 @@
import { openWindow } from './window';
interface DownloadOptions<T = string> {
fileName?: string;
source: T;
target?: string;
}
const DEFAULT_FILENAME = 'downloaded_file';
/**
* 通过 URL 下载文件,支持跨域
* @throws {Error} - 当下载失败时抛出错误
*/
export async function downloadFileFromUrl({
fileName,
source,
target = '_blank',
}: DownloadOptions): Promise<void> {
if (!source || typeof source !== 'string') {
throw new Error('Invalid URL.');
}
const isChrome = window.navigator.userAgent.toLowerCase().includes('chrome');
const isSafari = window.navigator.userAgent.toLowerCase().includes('safari');
if (/iP/.test(window.navigator.userAgent)) {
console.error('Your browser does not support download!');
return;
}
if (isChrome || isSafari) {
triggerDownload(source, resolveFileName(source, fileName));
}
if (!source.includes('?')) {
source += '?download';
}
openWindow(source, { target });
}
/**
* 通过 Base64 下载文件
*/
export function downloadFileFromBase64({ fileName, source }: DownloadOptions) {
if (!source || typeof source !== 'string') {
throw new Error('Invalid Base64 data.');
}
const resolvedFileName = fileName || DEFAULT_FILENAME;
triggerDownload(source, resolvedFileName);
}
/**
* 通过图片 URL 下载图片文件
*/
export async function downloadFileFromImageUrl({
fileName,
source,
}: DownloadOptions) {
const base64 = await urlToBase64(source);
downloadFileFromBase64({ fileName, source: base64 });
}
/**
* 通过 Blob 下载文件
* @param blob - 文件的 Blob 对象
* @param fileName - 可选,下载的文件名称
*/
export function downloadFileFromBlob({
fileName = DEFAULT_FILENAME,
source,
}: DownloadOptions<Blob>): void {
if (!(source instanceof Blob)) {
throw new TypeError('Invalid Blob data.');
}
const url = URL.createObjectURL(source);
triggerDownload(url, fileName);
}
/**
* 下载文件,支持 Blob、字符串和其他 BlobPart 类型
* @param data - 文件的 BlobPart 数据
* @param fileName - 下载的文件名称
*/
export function downloadFileFromBlobPart({
fileName = DEFAULT_FILENAME,
source,
}: DownloadOptions<BlobPart>): void {
// 如果 data 不是 Blob则转换为 Blob
const blob =
source instanceof Blob
? source
: new Blob([source], { type: 'application/octet-stream' });
// 创建对象 URL 并触发下载
const url = URL.createObjectURL(blob);
triggerDownload(url, fileName);
}
/**
* img url to base64
* @param url
*/
export function urlToBase64(url: string, mineType?: string): Promise<string> {
return new Promise((resolve, reject) => {
let canvas = document.createElement('CANVAS') as HTMLCanvasElement | null;
const ctx = canvas?.getContext('2d');
const img = new Image();
img.crossOrigin = '';
img.addEventListener('load', () => {
if (!canvas || !ctx) {
return reject(new Error('Failed to create canvas.'));
}
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL(mineType || 'image/png');
canvas = null;
resolve(dataURL);
});
img.src = url;
});
}
/**
* 通用下载触发函数
* @param href - 文件下载的 URL
* @param fileName - 下载文件的名称,如果未提供则自动识别
* @param revokeDelay - 清理 URL 的延迟时间 (毫秒)
*/
export function triggerDownload(
href: string,
fileName: string | undefined,
revokeDelay: number = 100,
): void {
const defaultFileName = 'downloaded_file';
const finalFileName = fileName || defaultFileName;
const link = document.createElement('a');
link.href = href;
link.download = finalFileName;
link.style.display = 'none';
if (link.download === undefined) {
link.setAttribute('target', '_blank');
}
document.body.append(link);
link.click();
link.remove();
// 清理临时 URL 以释放内存
setTimeout(() => URL.revokeObjectURL(href), revokeDelay);
}
function resolveFileName(url: string, fileName?: string): string {
return fileName || url.slice(url.lastIndexOf('/') + 1) || DEFAULT_FILENAME;
}

View File

@@ -2,6 +2,7 @@ export * from './cn';
export * from './date';
export * from './diff';
export * from './dom';
export * from './download';
export * from './inference';
export * from './letter';
export * from './merge';

View File

@@ -1,6 +1,6 @@
{
"name": "@vben-core/typings",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben-core/composables",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben-core/preferences",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben-core/layout-ui",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben-core/menu-ui",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben-core/shadcn-ui",
"version": "5.4.5",
"version": "5.4.6",
"#main": "./dist/index.mjs",
"#module": "./dist/index.mjs",
"homepage": "https://github.com/vbenjs/vue-vben-admin",

View File

@@ -10,15 +10,18 @@ defineOptions({
inheritAttrs: false,
});
const props = withDefaults(defineProps<PinInputProps>(), {
btnLoading: false,
codeLength: 6,
handleSendCode: async () => {},
maxTime: 60,
});
const {
codeLength = 6,
createText = async () => {},
disabled = false,
handleSendCode = async () => {},
loading = false,
maxTime = 60,
} = defineProps<PinInputProps>();
const emit = defineEmits<{
complete: [];
sendError: [error: any];
}>();
const timer = ref<ReturnType<typeof setTimeout>>();
@@ -30,11 +33,11 @@ const countdown = ref(0);
const btnText = computed(() => {
const countdownValue = countdown.value;
return props.createText?.(countdownValue);
return createText?.(countdownValue);
});
const btnLoading = computed(() => {
return props.loading || countdown.value > 0;
return loading || countdown.value > 0;
});
watch(
@@ -50,10 +53,16 @@ function handleComplete(e: string[]) {
}
async function handleSend(e: Event) {
e?.preventDefault();
await props.handleSendCode();
countdown.value = props.maxTime;
startCountdown();
try {
e?.preventDefault();
await handleSendCode();
countdown.value = maxTime;
startCountdown();
} catch (error) {
console.error('Failed to send code:', error);
// Consider emitting an error event or showing a notification
emit('sendError', error);
}
}
function startCountdown() {
@@ -77,6 +86,7 @@ const id = useId();
<PinInput
:id="id"
v-model="inputValue"
:disabled="disabled"
class="flex w-full justify-between"
otp
placeholder="○"
@@ -92,6 +102,7 @@ const id = useId();
/>
</PinInputGroup>
<VbenButton
:disabled="disabled"
:loading="btnLoading"
class="flex-grow"
size="lg"

View File

@@ -8,6 +8,10 @@ interface PinInputProps {
* 发送验证码按钮文本
*/
createText?: (countdown: number) => string;
/**
* 是否禁用
*/
disabled?: boolean;
/**
* 自定义验证码发送逻辑
* @returns

View File

@@ -1,6 +1,6 @@
{
"name": "@vben-core/tabs-ui",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/constants",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/access",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/common-ui",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/hooks",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/layouts",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {
@@ -37,7 +37,6 @@
"@vben/types": "workspace:*",
"@vben/utils": "workspace:*",
"@vueuse/core": "catalog:",
"default-passive-events": "catalog:",
"vue": "catalog:",
"vue-router": "catalog:"
}

View File

@@ -29,8 +29,6 @@ import {
} from './menu';
import { LayoutTabbar } from './tabbar';
import 'default-passive-events';
defineOptions({ name: 'BasicLayout' });
const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/plugins",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/request",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/icons",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/locales",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/preferences",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/stores",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/styles",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/types",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {

View File

@@ -1,6 +1,6 @@
{
"name": "@vben/utils",
"version": "5.4.5",
"version": "5.4.6",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {