Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

apps/web-ele/package.json

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

apps/web-naive/package.json

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

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.4.5",
+  "version": "5.4.6",
   "private": true,
   "scripts": {
     "build": "vitepress build",

internal/lint-configs/commitlint-config/package.json

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

internal/lint-configs/stylelint-config/package.json

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

internal/node-utils/package.json

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

internal/tailwind-config/package.json

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

internal/tsconfig/package.json

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

internal/vite-config/package.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-monorepo",
-  "version": "5.4.5",
+  "version": "5.4.6",
   "private": true,
   "keywords": [
     "monorepo",

packages/@core/base/design/package.json

@@ -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": {

packages/@core/base/icons/package.json

@@ -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": {

packages/@core/base/shared/package.json

@@ -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": {

packages/@core/base/shared/src/utils/download.ts

@@ -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;
+}

packages/@core/base/shared/src/utils/index.ts

@@ -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';

packages/@core/base/typings/package.json

@@ -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": {

packages/@core/composables/package.json

@@ -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": {

packages/@core/preferences/package.json

@@ -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": {

packages/@core/ui-kit/layout-ui/package.json

@@ -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": {

packages/@core/ui-kit/menu-ui/package.json

@@ -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": {

packages/@core/ui-kit/shadcn-ui/package.json

@@ -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",

packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue

@@ -10,15 +10,18 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<PinInputProps>(), {
+const {
-  btnLoading: false,
+  codeLength = 6,
-  codeLength: 6,
+  createText = async () => {},
-  handleSendCode: async () => {},
+  disabled = false,
-  maxTime: 60,
+  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();
+  try {
-  await props.handleSendCode();
+    e?.preventDefault();
-  countdown.value = props.maxTime;
+    await handleSendCode();
-  startCountdown();
+    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"

packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts

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

packages/@core/ui-kit/tabs-ui/package.json

@@ -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": {

packages/constants/package.json

@@ -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": {

packages/effects/access/package.json

@@ -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": {

packages/effects/common-ui/package.json

@@ -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": {

packages/effects/hooks/package.json

@@ -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": {

packages/effects/layouts/package.json

@@ -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:"
   }

packages/effects/layouts/src/basic/layout.vue

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

packages/effects/plugins/package.json

@@ -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": {

packages/effects/request/package.json

@@ -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": {

packages/icons/package.json

@@ -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": {

packages/locales/package.json

@@ -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": {

packages/preferences/package.json

@@ -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": {

packages/stores/package.json

@@ -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": {

packages/styles/package.json

@@ -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": {

packages/types/package.json

@@ -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": {

packages/utils/package.json

@@ -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": {

playground/package.json

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

playground/src/locales/langs/en-US/demos.json

@@ -49,7 +49,8 @@
     "fullScreen": "FullScreen",
     "clipboard": "Clipboard",
     "menuWithQuery": "Menu With Query",
-    "openInNewWindow": "Open in New Window"
+    "openInNewWindow": "Open in New Window",
+    "fileDownload": "File Download"
   },
   "breadcrumb": {
     "navigation": "Breadcrumb Navigation",

playground/src/locales/langs/zh-CN/demos.json

@@ -49,7 +49,8 @@
     "fullScreen": "全屏",
     "clipboard": "剪贴板",
     "menuWithQuery": "带参菜单",
-    "openInNewWindow": "新窗口打开"
+    "openInNewWindow": "新窗口打开",
+    "fileDownload": "文件下载"
   },
   "breadcrumb": {
     "navigation": "面包屑导航",

playground/src/router/routes/modules/demos.ts

@@ -177,6 +177,16 @@ const routes: RouteRecordRaw[] = [
               title: $t('demos.features.fullScreen'),
             },
           },
+          {
+            name: 'FileDownloadDemo',
+            path: '/demos/features/file-download',
+            component: () =>
+              import('#/views/demos/features/file-download/index.vue'),
+            meta: {
+              icon: 'lucide:hard-drive-download',
+              title: $t('demos.features.fileDownload'),
+            },
+          },
           {
             name: 'ClipboardDemo',
             path: '/demos/features/clipboard',

playground/src/views/demos/features/file-download/index.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+import {
+  downloadFileFromBase64,
+  downloadFileFromBlobPart,
+  downloadFileFromImageUrl,
+  downloadFileFromUrl,
+} from '@vben/utils';
+
+import { Button, Card } from 'ant-design-vue';
+
+import imageBase64 from './base64';
+</script>
+
+<template>
+  <Page title="文件下载示例">
+    <Card title="根据文件地址下载文件">
+      <Button
+        type="primary"
+        @click="
+          downloadFileFromUrl({
+            source:
+              'https://codeload.github.com/vbenjs/vue-vben-admin-doc/zip/main',
+            target: '_self',
+          })
+        "
+      >
+        Download File
+      </Button>
+    </Card>
+
+    <Card class="my-5" title="根据地址下载图片">
+      <Button
+        type="primary"
+        @click="
+          downloadFileFromImageUrl({
+            source:
+              'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+            fileName: 'vben-logo.png',
+          })
+        "
+      >
+        Download File
+      </Button>
+    </Card>
+
+    <Card class="my-5" title="base64流下载">
+      <Button
+        type="primary"
+        @click="
+          downloadFileFromBase64({
+            source: imageBase64,
+            fileName: 'image.png',
+          })
+        "
+      >
+        Download Image
+      </Button>
+    </Card>
+    <Card class="my-5" title="文本下载">
+      <Button
+        type="primary"
+        @click="
+          downloadFileFromBlobPart({
+            source: 'text content',
+            fileName: 'test.txt',
+          })
+        "
+      >
+        Download TxT
+      </Button>
+    </Card>
+  </Page>
+</template>

pnpm-workspace.yaml

@@ -79,7 +79,6 @@ catalog:
   cz-git: ^1.11.0
   czg: ^1.11.0
   dayjs: ^1.11.13
-  default-passive-events: ^2.0.0
   defu: ^6.1.4
   depcheck: ^1.4.7
   dotenv: ^16.4.5

scripts/turbo-run/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/turbo-run",
-  "version": "5.4.5",
+  "version": "5.4.6",
   "private": true,
   "license": "MIT",
   "type": "module",

scripts/vsh/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/vsh",
-  "version": "5.4.5",
+  "version": "5.4.6",
   "private": true,
   "license": "MIT",
   "type": "module",