feat: v4.1.9补充qrcode组件

CHANGELOG.md

@@ -5,9 +5,11 @@
 ### Feats
 
 - 新增 RayQRCode 组件（二维码）
-  - 基于 awesome-qr 封装，继承其所有特性。并且拓展了 状态、下载、自动更新等属性
+  - 基于 awesome-qr 封装，继承其所有特性。并且拓展 状态、下载、自动更新等属性
   - 自动卸载于释放内存，仅需要关注 text 内容填充
 - 移除 qrcode.vue 依赖
+- 更新 vue-hooks-plus 版本至 v1.8.2
+- 移除 office 功能集成
 
 ### Fixes
 

COMMONPROBLEM.md

@@ -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) 方法，首选该方法作为国际化语言切换方法。

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

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<string | ArrayBuffer | null> => {
+  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()
     })
 

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: {
     /**
      *

src/layout/components/MenuTag/index.tsx

@@ -388,7 +388,7 @@ const MenuTag = defineComponent({
         if (tags?.length) {
           const [menuTag] = tags
 
-          nextTick(() => {
+          nextTick().then(() => {
             menuTag.scrollIntoView?.()
           })
         }

src/office/index.ts

@@ -1,27 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-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
-}

src/router/modules/demo/office.ts

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

src/views/demo/office/index.tsx

@@ -1,21 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-22
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { RouterView } from 'vue-router'
-
-const Office = defineComponent({
-  name: 'ROffice',
-  render() {
-    return <RouterView />
-  },
-})
-
-export default Office

src/views/demo/office/views/document/index.tsx

@@ -1,47 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-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 <div> </div>
-  },
-})
-
-export default Document

src/views/demo/office/views/presentation/index.tsx

@@ -1,24 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-22
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import type { PropType } from 'vue'
-
-const Presentation = defineComponent({
-  name: 'RPresentation',
-  setup() {
-    return {}
-  },
-  render() {
-    return <div></div>
-  },
-})
-
-export default Presentation

src/views/demo/office/views/spreadsheet/index.tsx

@@ -1,24 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-22
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import type { PropType } from 'vue'
-
-const Spreadsheet = defineComponent({
-  name: 'RSpreadsheet',
-  setup() {
-    return {}
-  },
-  render() {
-    return <div></div>
-  },
-})
-
-export default Spreadsheet

src/views/demo/qrcode/index.tsx

@@ -43,6 +43,12 @@ const RQRCode = defineComponent({
           <NSpace>
             <RayQRcode text="ray template yes" />
             <RayQRcode text="ray template yes" logoImage={LOGO} />
+            <RayQRcode
+              text="ray template yes"
+              gifBackgroundURL="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
+              dotScale={0.5}
+              colorDark="#64d9d6"
+            />
           </NSpace>
         </NCard>
         <NCard title="状态二维码">

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: [