From 689813f1a066810249838e5a1865aed1f09dd40a Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Mon, 4 Sep 2023 15:01:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20v4.1.9=E8=A1=A5=E5=85=85qrcode=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 +- COMMONPROBLEM.md | 21 -------- package.json | 2 +- src/components/RayQRCode/src/index.tsx | 52 ++++++++++++++++++- src/components/RayQRCode/src/props.ts | 20 +++++++ src/layout/components/MenuTag/index.tsx | 2 +- src/office/index.ts | 27 ---------- src/router/modules/demo/office.ts | 43 --------------- src/views/demo/office/index.tsx | 21 -------- .../demo/office/views/document/index.tsx | 47 ----------------- .../demo/office/views/presentation/index.tsx | 24 --------- .../demo/office/views/spreadsheet/index.tsx | 24 --------- src/views/demo/qrcode/index.tsx | 6 +++ vite.config.ts | 1 + 14 files changed, 82 insertions(+), 212 deletions(-) delete mode 100644 COMMONPROBLEM.md delete mode 100644 src/office/index.ts delete mode 100644 src/router/modules/demo/office.ts delete mode 100644 src/views/demo/office/index.tsx delete mode 100644 src/views/demo/office/views/document/index.tsx delete mode 100644 src/views/demo/office/views/presentation/index.tsx delete mode 100644 src/views/demo/office/views/spreadsheet/index.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index d25d2273..e60912c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,9 +5,11 @@ ### Feats - 新增 RayQRCode 组件（二维码） - - 基于 awesome-qr 封装，继承其所有特性。并且拓展了 状态、下载、自动更新等属性 + - 基于 awesome-qr 封装，继承其所有特性。并且拓展 状态、下载、自动更新等属性 - 自动卸载于释放内存，仅需要关注 text 内容填充 - 移除 qrcode.vue 依赖 +- 更新 vue-hooks-plus 版本至 v1.8.2 +- 移除 office 功能集成 ### Fixes diff --git a/COMMONPROBLEM.md b/COMMONPROBLEM.md deleted file mode 100644 index fa14ec84..00000000 --- a/COMMONPROBLEM.md +++ /dev/null @@ -1,21 +0,0 @@ -## 常见问题 - -### 路由 - -#### 缓存失效 - -> 如果出现缓存配置不生效的情况可以按照如下方法进行排查 - -- 查看 APP_KEEP_ALIVE setupKeepAlive 属性是否配置为 true -- 查看每个组件的 `name` 是否唯一，[`KeepAlive`](https://cn.vuejs.org/guide/built-ins/keep-alive.html) 组件重度依赖组件 `name` 作为唯一标识。详情可以查看官方文档 -- 查看该页面的路由配置是否正确，比如：`path` 是否按照模板约定方式进行配置 - -#### 自动导入失败 - -> 模板采用自动导入路由模块方式。如果发现路由导入有误、或者导入报错，请查看文件命名是否有误。 - -### 国际化 - -#### 国际化切换错误、警告 - -> 模板二次封装 [`useI18n`](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/src/locales/useI18n.ts) 方法，首选该方法作为国际化语言切换方法。 diff --git a/package.json b/package.json index 121cddaf..20f7cd91 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "sass": "^1.54.3", "screenfull": "^6.0.2", "vue": "^3.3.4", - "vue-hooks-plus": "1.8.1", + "vue-hooks-plus": "1.8.2", "vue-i18n": "^9.2.2", "vue-router": "^4.2.4", "vuedraggable": "^4.1.0", diff --git a/src/components/RayQRCode/src/index.tsx b/src/components/RayQRCode/src/index.tsx index e90f62f7..a7a33832 100644 --- a/src/components/RayQRCode/src/index.tsx +++ b/src/components/RayQRCode/src/index.tsx @@ -21,6 +21,35 @@ import { call } from '@/utils/vue/index' import type { QRCodeRenderResponse } from './type' +const readGIFAsArrayBuffer = ( + url: string, +): Promise => { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest() + + xhr.responseType = 'blob' + + xhr.onload = () => { + const reader = new FileReader() + + reader.onloadend = () => { + resolve(reader.result) + } + reader.onerror = (e) => { + reject(e) + } + reader.onabort = (e) => { + reject(e) + } + + reader.readAsArrayBuffer(xhr.response) + } + + xhr.open('GET', url) + xhr.send() + }) +} + const RayQRcode = defineComponent({ name: 'RayQRcode', props, @@ -31,10 +60,28 @@ const RayQRcode = defineComponent({ const spinOverrides = { opacitySpinning: '0.1', } + let gifBuffer: string | ArrayBuffer | null + + const getGIFImageByURL = async () => { + const { gifBackgroundURL } = props + + if (!gifBackgroundURL) { + return + } + + try { + gifBuffer = await readGIFAsArrayBuffer(gifBackgroundURL) + } catch (e) { + console.error(e) + } + } const renderQRCode = () => { + const { gifBackgroundURL, gifBackground, ...ops } = props + new AwesomeQR({ - ...props, + ...ops, + gifBackground: (gifBuffer as ArrayBuffer) ?? undefined, }) .draw() .then((res) => { @@ -85,7 +132,8 @@ const RayQRcode = defineComponent({ downloadQRCode, }) - onMounted(() => { + onMounted(async () => { + await getGIFImageByURL() renderQRCode() }) diff --git a/src/components/RayQRCode/src/props.ts b/src/components/RayQRCode/src/props.ts index 434b3d57..84fc7741 100644 --- a/src/components/RayQRCode/src/props.ts +++ b/src/components/RayQRCode/src/props.ts @@ -190,6 +190,15 @@ const props = { type: String, default: 'rgba(0, 0, 0, 0)', }, + gifBackgroundURL: { + /** + * + * GIF background image to be used in the QR code + * + * @default undefined + */ + type: String, + }, gifBackground: { /** * @@ -249,6 +258,17 @@ const props = { type: Number, default: 8, }, + dotScale: { + /** + * + * Ratio of the real size to the full size of the blocks. + * This can be helpful when you want to make more parts of the background visible. + * + * @default 1 + */ + type: Number, + default: 1, + }, onSuccess: { /** * diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index a62d9526..b052d724 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/src/layout/components/MenuTag/index.tsx @@ -388,7 +388,7 @@ const MenuTag = defineComponent({ if (tags?.length) { const [menuTag] = tags - nextTick(() => { + nextTick().then(() => { menuTag.scrollIntoView?.() }) } diff --git a/src/office/index.ts b/src/office/index.ts deleted file mode 100644 index 2ddf5541..00000000 --- a/src/office/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-03-22 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -/** - * - * onlyoffice - * - * 该功能暂未实现, 后续应该会补上 - * 由于该方法需要后端进行相关配合, 因为目前还在考虑是否接上私有 onlyoffice 服务器, 所以该功能暂未实现 - * 望多多理解, 理解万岁 - */ - -import { getAppEnvironment } from '@use-utils/hook' -import request from '@/axios/instance' - -export const getOfficeDocumentApi = async (uuid: string) => { - const { VITE_APP_OFFICE_PROXY_URL } = getAppEnvironment() - const { get } = request -} diff --git a/src/router/modules/demo/office.ts b/src/router/modules/demo/office.ts deleted file mode 100644 index cec96641..00000000 --- a/src/router/modules/demo/office.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { t } from '@/locales/useI18n' -import { LAYOUT } from '@/router/constant/index' - -import type { AppRouteRecordRaw } from '@/router/type' - -const office: AppRouteRecordRaw = { - path: '/office', - name: 'ROffice', - component: () => import('@/views/demo/office/index'), - meta: { - i18nKey: t('menu.Office'), - icon: 'office', - hidden: true, - }, - children: [ - { - path: 'document', - name: 'Document', - component: () => import('@/views/demo/office/views/document/index'), - meta: { - i18nKey: 'Office_Document', - }, - }, - { - path: 'presentation', - name: 'Presentation', - component: () => import('@/views/demo/office/views/presentation/index'), - meta: { - i18nKey: 'Office_Presentation', - }, - }, - { - path: 'spreadsheet', - name: 'Spreadsheet', - component: () => import('@/views/demo/office/views/spreadsheet/index'), - meta: { - i18nKey: 'Office_Spreadsheet', - }, - }, - ], -} - -export default office diff --git a/src/views/demo/office/index.tsx b/src/views/demo/office/index.tsx deleted file mode 100644 index c7df6024..00000000 --- a/src/views/demo/office/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-03-22 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import { RouterView } from 'vue-router' - -const Office = defineComponent({ - name: 'ROffice', - render() { - return - }, -}) - -export default Office diff --git a/src/views/demo/office/views/document/index.tsx b/src/views/demo/office/views/document/index.tsx deleted file mode 100644 index f2907266..00000000 --- a/src/views/demo/office/views/document/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-03-22 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import { uuid } from '@/utils/hook' - -import type { PropType } from 'vue' - -const Document = defineComponent({ - name: 'RDocument', - setup() { - const editorUUID = uuid(16) - const state = reactive({}) - const config = { - document: { - fileType: 'docx', - key: editorUUID, - title: 'Example Document Title.docx', - url: 'https://example.com/url-to-example-document.docx', - }, - documentType: 'word', - authorization: 'a2122252', - token: 'a2122252', - Authorization: 'a2122252', - editorConfig: { - lang: 'zh-cn', - }, - } - - return { - ...toRefs(state), - editorUUID, - } - }, - render() { - return
- }, -}) - -export default Document diff --git a/src/views/demo/office/views/presentation/index.tsx b/src/views/demo/office/views/presentation/index.tsx deleted file mode 100644 index 797a39dd..00000000 --- a/src/views/demo/office/views/presentation/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-03-22 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import type { PropType } from 'vue' - -const Presentation = defineComponent({ - name: 'RPresentation', - setup() { - return {} - }, - render() { - return
- }, -}) - -export default Presentation diff --git a/src/views/demo/office/views/spreadsheet/index.tsx b/src/views/demo/office/views/spreadsheet/index.tsx deleted file mode 100644 index 14bf9951..00000000 --- a/src/views/demo/office/views/spreadsheet/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-03-22 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import type { PropType } from 'vue' - -const Spreadsheet = defineComponent({ - name: 'RSpreadsheet', - setup() { - return {} - }, - render() { - return
- }, -}) - -export default Spreadsheet diff --git a/src/views/demo/qrcode/index.tsx b/src/views/demo/qrcode/index.tsx index ce049390..b91d296f 100644 --- a/src/views/demo/qrcode/index.tsx +++ b/src/views/demo/qrcode/index.tsx @@ -43,6 +43,12 @@ const RQRCode = defineComponent({ + diff --git a/vite.config.ts b/vite.config.ts index ccdbd04e..02c8cad3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -115,6 +115,7 @@ export default defineConfig(async ({ mode }) => { fix: true, exclude: ['dist/**', '**/node_modules/**', 'vite-env.d.ts', '*.md'], include: ['src/**/*.{vue,js,jsx,ts,tsx}'], + cache: true, }), vitePluginImp({ libList: [