diff --git a/CHANGELOG.md b/CHANGELOG.md index 76374d13..d25d2273 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,18 @@ # CHANGE LOG +## 4.1.9 + +### Feats + +- 新增 RayQRCode 组件（二维码） + - 基于 awesome-qr 封装，继承其所有特性。并且拓展了 状态、下载、自动更新等属性 + - 自动卸载于释放内存，仅需要关注 text 内容填充 +- 移除 qrcode.vue 依赖 + +### Fixes + +- 修复了一些小细节问题 + ## 4.1.8 ### Feats diff --git a/README.md b/README.md index 9d93aeb9..144c050c 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,16 @@
Ray Template

-

Ray Template

- +
-[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-) +# Ray Template - +一个基于 vite4.x & ts(x) & pinia & vue3.x 的中后台模板 -## 前言 +
-> 该项目模板采用 `vue3.x` `vite4.x` `pinia` `tsx` 进行开发。 -> 使用 `naive ui` 作为组件库。 -> 预设了最佳构建体验的配置与常用搬砖工具。意在提供一个简洁、快速上手的模板。 -> 该模板不支持移动端设备。 - -## 感谢 - -> 感谢 [`yun`](https://me.yka.moe/) 对于本人的支持。 - -## 预览地址 - -- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/) -- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/) - -## 文档地址 - -- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/) -- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/) - -## 更新日志 - -- [日志](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md) - -## 常见问题 - -- [常见问题](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/COMMONPROBLEM.md) - -## 特性 +## ✨ 特性 - **最新技术栈**：使用 Vue3.x/vite4.x 等前端前沿技术开发 - **TypeScript**：应用程序级 JavaScript 的语言 @@ -49,7 +21,21 @@ - **组件**：二次封装了多个常用的组件 - **Axios 请求**：二次封装 axios 库 -## 准备 +## 🪄 预览地址 + +- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/) +- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/) + +## 🦾 文档地址 + +- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/) +- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/) + +## 🔋 更新日志 + +- [更新日志](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md) + +## 🪴 准备 - [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境 - [Vite](https://vitejs.dev/) - 熟悉 vite 特性 @@ -62,16 +48,9 @@ - [Pinia](https://pinia.vuejs.org/zh/introduction.html) - 状态管理器 pinia 使用 - [TSX](https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/README-zh_CN.md) - tsx 基本语法 -## 未来 +## 📦 起步 -> 根据个人时间空余情况，会不定时对该模板进行更新和迭代。希望将该工具的功能不断补全（虽然现在已经是足够日常开发和使用），将该模板打造为一个更加健全的中后台模板。如果你有好的想法和建议，可以直接联系我或者直接提 `issues` 即可。 - -## 提示 - -> 项目默认启用严格模式 `eslint`，但是由于 `vite-plugin-eslint` 插件优先级最高，所以如果出现自动导入类型错误提示，请优先解决其他问题。 -> 建议开启 `vscode` 保存自动修复功能。 - -## 项目安装 +### 获取项目 ```sh # github @@ -81,12 +60,12 @@ git clone https://github.com/XiaoDaiGua-Ray/ray-template.git git clone https://gh.yka.moe/https://github.com/XiaoDaiGua-Ray/ray-template.git ``` -## 拉取依赖 +### 拉取依赖 ```sh -# yarn +# pnpm -yarn +pnpm ``` ```sh @@ -95,12 +74,12 @@ yarn npm install ``` -## 启动项目 +### 启动项目 ```sh -# yarn +# pnpm -yarn dev +pnpm dev ``` ```sh @@ -109,12 +88,12 @@ yarn dev npm run dev ``` -## 项目打包 +### 项目打包 ```sh -# yarn +# pnpm -yarn build +pnpm build ``` ```sh @@ -123,12 +102,12 @@ yarn build npm run build ``` -## 预览项目 +### 预览项目 ```sh -# yarn +# pnpm -yarn preview +pnpm preview ``` ```sh @@ -137,12 +116,12 @@ yarn preview npm run preview ``` -## 体积分析 +### 体积分析 ```sh -# yarn +# pnpm -yarn report +pnpm report ``` ```sh @@ -151,48 +130,24 @@ yarn report npm run report ``` -## 浏览器支持 +## 🪴 项目活动 -> 仅支持现代浏览器，不支持 `IE` +![Alt](https://repobeats.axiom.co/api/embed/fab6071297ab281913a42f07a2779b488cfd62b8.svg 'Repobeats analytics image') + +### 贡献者 + +感谢他们的所做的一切贡献 🐝 ！ + + + + + +## 浏览器支持 | [ Edge](http://godban.github.io/browsers-support-badges/)
IE | [ Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions | -## 最后，希望大家搬砖愉快 +## 📄 证书 -## 贡献者 - - - - - - - - - - -
Cloud
Cloud
🔧
- - - - - - -## Contributors ✨ - -Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): - - - - - - - - - -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! - -## License - -[MIT © Ray-2020](./LICENSE) +[MIT License](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE) © 2022-PRESENT [Ray](https://github.com/XiaoDaiGua-Ray/ray-template) diff --git a/package.json b/package.json index 226ba8b9..68a8f3c1 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ }, "dependencies": { "@vueuse/core": "^9.1.0", + "awesome-qr": "2.1.5-rc.0", "axios": "^1.2.0", "clipboard": "^2.0.11", "crypto-js": "^4.1.1", @@ -37,7 +38,6 @@ "pinia": "^2.1.4", "pinia-plugin-persistedstate": "^3.1.0", "print-js": "^1.6.0", - "qrcode.vue": "^3.3.4", "sass": "^1.54.3", "screenfull": "^6.0.2", "vue": "^3.3.4", diff --git a/postcss.config.cjs b/postcss.config.cjs index b5f63577..be83e78f 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -22,6 +22,8 @@ module.exports = { unitPrecision: 3, /** 指定需要转换成的视窗单位 */ viewportUnit: 'rem', + /** 制定字体转换单位 */ + fontViewportUnit: 'rem', /** 指定不转换为视窗单位的类 */ selectorBlackList: ['.ignore'], /** 小于或等于 1px 不转换为视窗单位 */ diff --git a/src/components/RayQRCode/index.ts b/src/components/RayQRCode/index.ts new file mode 100644 index 00000000..6002f700 --- /dev/null +++ b/src/components/RayQRCode/index.ts @@ -0,0 +1,9 @@ +import RayQRcode from './src/index' + +export default RayQRcode +export type { + QRCodeStatus, + QRCodeLevel, + QRCodeRenderResponse, + QRCodeInst, +} from './src/type' diff --git a/src/components/RayQRCode/src/index.scss b/src/components/RayQRCode/src/index.scss new file mode 100644 index 00000000..e447cce8 --- /dev/null +++ b/src/components/RayQRCode/src/index.scss @@ -0,0 +1,26 @@ +.ray-qrcode { + position: relative; + display: inline-flex; + + & .ray-qrcode__error { + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + background-color: rgba(0, 0, 0, 0.7); + width: 100%; + height: 100%; + @include flexCenter; + flex-direction: column; + gap: 18px 0; + + & .ray-qrcode__error-content { + text-align: center; + font-size: 18px; + font-weight: 500; + color: #ffffff; + } + } +} diff --git a/src/components/RayQRCode/src/index.tsx b/src/components/RayQRCode/src/index.tsx new file mode 100644 index 00000000..e90f62f7 --- /dev/null +++ b/src/components/RayQRCode/src/index.tsx @@ -0,0 +1,140 @@ +/** + * + * @author Ray + * + * @date 2023-08-29 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import './index.scss' + +import { NButton, NSpin } from 'naive-ui' +import RayIcon from '@/components/RayIcon/index' + +import props from './props' +import { AwesomeQR } from 'awesome-qr' +import { isValueType, downloadBase64File } from '@use-utils/hook' +import { call } from '@/utils/vue/index' + +import type { QRCodeRenderResponse } from './type' + +const RayQRcode = defineComponent({ + name: 'RayQRcode', + props, + setup(props, ctx) { + const { expose } = ctx + + const qrcodeURL = ref() + const spinOverrides = { + opacitySpinning: '0.1', + } + + const renderQRCode = () => { + new AwesomeQR({ + ...props, + }) + .draw() + .then((res) => { + const { onSuccess } = props + + if (onSuccess) { + call(onSuccess, res) + } + + qrcodeURL.value = res + }) + .catch((err) => { + const { onError } = props + + if (onError) { + call(onError, err) + } + }) + } + + const errorActionClick = () => { + if (ctx.slots.errorAction) { + return + } + + const { onReload } = props + + if (onReload) { + call(onReload) + } + } + + const downloadQRCode = (fileName?: string) => { + if (qrcodeURL.value && isValueType(qrcodeURL.value, 'String')) { + downloadBase64File(qrcodeURL.value, fileName) + } + } + + watchEffect(() => { + if (props.watchText) { + nextTick().then(() => { + renderQRCode() + }) + } + }) + + expose({ + downloadQRCode, + }) + + onMounted(() => { + renderQRCode() + }) + + return { + qrcodeURL, + spinOverrides, + errorActionClick, + } + }, + render() { + return ( +
+ + + + {this.status === 'error' ? ( +
+
+ {isValueType(this.errorDescription, 'String') + ? this.errorDescription + : () => this.errorDescription} +
+
+ {this.$slots.errorAction ? ( + this.$slots.errorAction() + ) : ( + <> + + {{ + default: () => this.errorActionDescription, + icon: () => ( + + ), + }} + + + )} +
+
+ ) : null} +
+ ) + }, +}) + +export default RayQRcode diff --git a/src/components/RayQRCode/src/props.ts b/src/components/RayQRCode/src/props.ts new file mode 100644 index 00000000..434b3d57 --- /dev/null +++ b/src/components/RayQRCode/src/props.ts @@ -0,0 +1,281 @@ +/** + * + * @author Ray + * + * @date 2023-08-29 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import type { QRCodeStatus, QRCodeLevel } from './type' +import type { PropType, VNode } from 'vue' +import type { MaybeArray } from '@/types/modules/utils' +import type { Options } from 'awesome-qr' + +const props = { + watchText: { + /** + * + * Atuo watch QR code text + * If update text, then re-render QR code + * + * @default true + */ + type: Boolean, + default: true, + }, + status: { + /** + * + * QR code status + * + * @default undefined + */ + type: String as PropType, + }, + errorDescription: { + /** + * + * QR code error description label + * + * @default 二维码已过期 + */ + type: [String, Object] as PropType, + default: '二维码已过期', + }, + errorActionDescription: { + /** + * + * QR code error action description label + * + * @default 重新加载 + */ + type: String, + default: '重新加载', + }, + text: { + /** + * + * Text to be encoded in the QR code + */ + type: String, + required: true, + }, + size: { + /** + * + * Size of the QR code in pixel. + * + * @default 160 + */ + type: Number, + default: 160, + }, + margin: { + /** + * + * Size of margins around the QR code body in pixel. + * + * @default 12 + */ + type: Number, + default: 12, + }, + correctLevel: { + /** + * + * Error correction level of the QR code + * Accepts a value provided by _QRErrorCorrectLevel_ + * + * @default 1 + */ + type: Number as PropType, + default: 1, + validator: (value: unknown) => [0, 1, 2, 3].includes(value as number), + }, + maskPattern: { + /** + * + * Specify the mask pattern to be used in QR code encoding + * Accepts a value provided by _QRMaskPattern_ + */ + type: Number, + }, + version: { + /** + * + * Specify the version to be used in QR code encoding + * Accepts an integer in range [1, 40] + */ + type: Number, + }, + components: { + /** + * + * Options to control components in the QR code. + * + * @default {data:{scale...},...} + */ + type: Object as PropType, + default: () => ({ + data: { + scale: 1, + }, + timing: { + scale: 1, + protectors: false, + }, + alignment: { + scale: 1, + protectors: false, + }, + cornerAlignment: { + scale: 1, + protectors: true, + }, + }), + }, + colorDark: { + /** + * + * Color of the blocks on the QR code + * Accepts a CSS <color> + * + * @default #000000 + */ + type: String, + default: '#000000', + }, + colorLight: { + /** + * + * Color of the blocks on the QR code + * Accepts a CSS <color> + * + * @default #ffffff + */ + type: String, + default: '#ffffff', + }, + autoColor: { + /** + * + * Automatically calculate the _colorLight_ value from the QR code's background + * + * @default true + */ + type: Boolean, + default: true, + }, + backgroundImage: { + /** + * + * Background image to be used in the QR code + * Accepts a `data:` string in web browsers or a Buffer in Node.js + * + * @default undefined + */ + type: String, + }, + backgroundDimming: { + /** + * + * Color of the dimming mask above the background image + * Accepts a CSS <color> + * + * @default rgba(0, 0, 0, 0) + */ + type: String, + default: 'rgba(0, 0, 0, 0)', + }, + gifBackground: { + /** + * + * GIF background image to be used in the QR code + * + * @default undefined + */ + type: ArrayBuffer, + }, + whiteMargin: { + /** + * + * Use a white margin instead of a transparent one which reveals the background of the QR code on margins + * + * @default true + */ + type: Boolean, + default: true, + }, + logoImage: { + /** + * + * Logo image to be displayed at the center of the QR code + * Accepts a `data:` string in web browsers or a Buffer in Node.js + * When set to `undefined` or `null`, the logo is disabled + * + * @default undefined + */ + type: String, + }, + logoScale: { + /** + * + * Ratio of the logo size to the QR code size + * + * @default 0.4 + */ + type: Number, + default: 0.4, + }, + logoMargin: { + /** + * + * Size of margins around the logo image in pixels + * + * @default 6 + */ + type: Number, + default: 6, + }, + logoCornerRadius: { + /** + * Corner radius of the logo image in pixels. + * + * @default 8 + */ + type: Number, + default: 8, + }, + onSuccess: { + /** + * + * When the QR code is successfully generated, this callback is called + */ + type: [Function, Array] as PropType< + MaybeArray<(dataURL: ArrayBuffer | string | undefined) => void> + >, + default: null, + }, + onError: { + /** + * + * When the QR code generation fails, this callback is called + */ + type: [Function, Array] as PropType void>>, + default: null, + }, + onReload: { + /** + * + * When reload button is clicked, this callback is called + * This method will not execute if the errorAction slot is used + */ + type: [Function, Array] as PropType void>>, + default: null, + }, +} + +export default props diff --git a/src/components/RayQRCode/src/type.ts b/src/components/RayQRCode/src/type.ts new file mode 100644 index 00000000..994a0869 --- /dev/null +++ b/src/components/RayQRCode/src/type.ts @@ -0,0 +1,26 @@ +/** + * + * @author Ray + * + * @date 2023-08-29 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +export type QRCodeStatus = 'error' | 'success' | 'loading' + +export type QRCodeLevel = 0 | 1 | 2 | 3 + +export type QRCodeRenderResponse = string | ArrayBuffer | Buffer | undefined + +export type QRCodeInst = { + /** + * + * @param fileName file name + * + * 如果未设置名称，则默认以 时间戳.png 命名 + */ + downloadQRCode: (fileName?: string) => void +} diff --git a/src/router/modules/demo/qrcode.ts b/src/router/modules/demo/qrcode.ts new file mode 100644 index 00000000..27add67f --- /dev/null +++ b/src/router/modules/demo/qrcode.ts @@ -0,0 +1,17 @@ +import { t } from '@/locales/useI18n' +import { LAYOUT } from '@/router/constant/index' + +import type { AppRouteRecordRaw } from '@/router/type' + +const qrcode: AppRouteRecordRaw = { + path: '/qrcode', + name: 'RQRCode', + component: () => import('@/views/demo/qrcode/index'), + meta: { + noLocalTitle: '二维码', + icon: 'other', + order: 3, + }, +} + +export default qrcode diff --git a/src/utils/hook.ts b/src/utils/hook.ts index 1cecf4ef..00d3b11a 100644 --- a/src/utils/hook.ts +++ b/src/utils/hook.ts @@ -33,6 +33,22 @@ export const arrayBufferToBase64Image = (data: ArrayBuffer): string | null => { return base64 } +/** + * + * @param base64 base64 + * @param fileName file name + * + * @remark 下载 base64 文件 + */ +export const downloadBase64File = (base64: string, fileName?: string) => { + const link = document.createElement('a') + + link.href = base64 + link.download = fileName || new Date().getTime() + '.png' + + link.click() +} + /** * * @param value 目标值 diff --git a/src/views/demo/qrcode/index.tsx b/src/views/demo/qrcode/index.tsx new file mode 100644 index 00000000..ce049390 --- /dev/null +++ b/src/views/demo/qrcode/index.tsx @@ -0,0 +1,104 @@ +/** + * + * @author Ray + * + * @date 2023-08-30 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { NSpace, NCard, NButton } from 'naive-ui' +import RayQRcode from '@/components/RayQRCode/index' + +import LOGO from '@/assets/images/ray.svg' + +import type { QRCodeStatus, QRCodeInst } from '@/components/RayQRCode/index' + +const RQRCode = defineComponent({ + name: 'RQRCode', + setup() { + const qrcodeText = ref('ray template yes') + const qrcodeStatus = ref() + const rayQRCodeRef = ref() + + return { + qrcodeText, + qrcodeStatus, + rayQRCodeRef, + } + }, + render() { + return ( + + +

+ 基于 awesome-qr 进行封装，支持 LOGO、gif、backgroundImage 等属性。 +

+

该组件会自动监听文本内容变化，然后重新渲染（watchText）

+

具体使用请参考 props 配置项

+ + + + + + + + + + { + window.$message.error('relod props') + }} + /> + + + + + + + { + this.qrcodeStatus = 'loading' + + setTimeout(() => { + this.qrcodeText = 'text updated: ' + new Date().getTime() + this.qrcodeStatus = void 0 + }, 1000) + }} + > + 更新二维码内容 + + { + this.rayQRCodeRef?.downloadQRCode() + }} + > + 下载二维码 + + + + + 当前二维码内容：{this.qrcodeText} + + + + + ) + }, +}) + +export default RQRCode diff --git a/src/views/login/components/QRCodeSignin/index.tsx b/src/views/login/components/QRCodeSignin/index.tsx index fa5025ab..d4b042c4 100644 --- a/src/views/login/components/QRCodeSignin/index.tsx +++ b/src/views/login/components/QRCodeSignin/index.tsx @@ -11,7 +11,9 @@ import './index.scss' -import QRCode from 'qrcode.vue' +import RayQRcode from '@/components/RayQRCode/index' + +import LOGO from '@/assets/images/ray.svg' /** * @@ -34,7 +36,7 @@ const QRCodeSignin = defineComponent({ render() { return ( ) }, diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index bb2e02f1..0f7192c3 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -2,6 +2,7 @@ /// /// /// +/// declare module '*.vue' { import type { DefineComponent } from 'vue' diff --git a/unplugin/.eslintrc-auto-import.json b/unplugin/.eslintrc-auto-import.json index f2bd02bd..6aeb49b9 100644 --- a/unplugin/.eslintrc-auto-import.json +++ b/unplugin/.eslintrc-auto-import.json @@ -8,6 +8,7 @@ "PropType": true, "Ref": true, "VNode": true, + "WritableComputedRef": true, "acceptHMRUpdate": true, "asyncComputed": true, "autoResetRef": true, @@ -121,10 +122,12 @@ "useArrayFilter": true, "useArrayFind": true, "useArrayFindIndex": true, + "useArrayFindLast": true, "useArrayJoin": true, "useArrayMap": true, "useArrayReduce": true, "useArraySome": true, + "useArrayUnique": true, "useAsyncQueue": true, "useAsyncState": true, "useAttrs": true, @@ -136,6 +139,7 @@ "useBrowserLocation": true, "useCached": true, "useClipboard": true, + "useCloned": true, "useColorMode": true, "useConfirmDialog": true, "useCounter": true, @@ -212,11 +216,14 @@ "useParallax": true, "usePermission": true, "usePointer": true, + "usePointerLock": true, "usePointerSwipe": true, "usePreferredColorScheme": true, + "usePreferredContrast": true, "usePreferredDark": true, "usePreferredLanguages": true, "usePreferredReducedMotion": true, + "usePrevious": true, "useRafFn": true, "useRefHistory": true, "useResizeObserver": true, @@ -230,6 +237,7 @@ "useSessionStorage": true, "useShare": true, "useSlots": true, + "useSorted": true, "useSpeechRecognition": true, "useSpeechSynthesis": true, "useStepper": true, diff --git a/unplugin/auto-imports.d.ts b/unplugin/auto-imports.d.ts index faf7b218..5fecb52b 100644 --- a/unplugin/auto-imports.d.ts +++ b/unplugin/auto-imports.d.ts @@ -118,10 +118,12 @@ declare global { const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter'] const useArrayFind: typeof import('@vueuse/core')['useArrayFind'] const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex'] + const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast'] const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin'] const useArrayMap: typeof import('@vueuse/core')['useArrayMap'] const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce'] const useArraySome: typeof import('@vueuse/core')['useArraySome'] + const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique'] const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue'] const useAsyncState: typeof import('@vueuse/core')['useAsyncState'] const useAttrs: typeof import('vue')['useAttrs'] @@ -133,6 +135,7 @@ declare global { const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation'] const useCached: typeof import('@vueuse/core')['useCached'] const useClipboard: typeof import('@vueuse/core')['useClipboard'] + const useCloned: typeof import('@vueuse/core')['useCloned'] const useColorMode: typeof import('@vueuse/core')['useColorMode'] const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog'] const useCounter: typeof import('@vueuse/core')['useCounter'] @@ -209,11 +212,14 @@ declare global { const useParallax: typeof import('@vueuse/core')['useParallax'] const usePermission: typeof import('@vueuse/core')['usePermission'] const usePointer: typeof import('@vueuse/core')['usePointer'] + const usePointerLock: typeof import('@vueuse/core')['usePointerLock'] const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe'] const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme'] + const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast'] const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark'] const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages'] const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion'] + const usePrevious: typeof import('@vueuse/core')['usePrevious'] const useRafFn: typeof import('@vueuse/core')['useRafFn'] const useRefHistory: typeof import('@vueuse/core')['useRefHistory'] const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver'] @@ -227,6 +233,7 @@ declare global { const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage'] const useShare: typeof import('@vueuse/core')['useShare'] const useSlots: typeof import('vue')['useSlots'] + const useSorted: typeof import('@vueuse/core')['useSorted'] const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition'] const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis'] const useStepper: typeof import('@vueuse/core')['useStepper'] @@ -284,5 +291,5 @@ declare global { // for type re-export declare global { // @ts-ignore - export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue' + export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue' } diff --git a/vite.config.ts b/vite.config.ts index 543a39fa..ccdbd04e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -105,7 +105,7 @@ export default defineConfig(async ({ mode }) => { viteCompression(), viteVueI18nPlugin(), viteSvgLoader({ - defaultImport: 'component', // 默认以 `componetn` 形式导入 `svg` + defaultImport: 'url', // 默认以 `componetn` 形式导入 `svg` }), viteSVGIcon(), viteEslint({