release: update 3.4.5

src/components/ReIcon/index.ts

@@ -2,12 +2,11 @@ import iconifyIconOffline from "./src/iconifyIconOffline";
 import iconifyIconOnline from "./src/iconifyIconOnline";
 import fontIcon from "./src/iconfont";
 
-export const IconifyIconOffline = iconifyIconOffline;
-export const IconifyIconOnline = iconifyIconOnline;
-export const FontIcon = fontIcon;
+/** 离线图标组件 */
+const IconifyIconOffline = iconifyIconOffline;
+/** 在线图标组件 */
+const IconifyIconOnline = iconifyIconOnline;
+/** iconfont组件 */
+const FontIcon = fontIcon;
 
-export default {
-  IconifyIconOffline,
-  IconifyIconOnline,
-  FontIcon
-};
+export { IconifyIconOffline, IconifyIconOnline, FontIcon };

src/components/ReIcon/src/hooks.ts

@@ -1,14 +1,14 @@
 import { iconType } from "./types";
 import { h, defineComponent, Component } from "vue";
-import { IconifyIconOffline, FontIcon } from "../index";
+import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
 
 /**
  * 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
- * @param icon 必传 string 图标
+ * @param icon 必传 图标
  * @param attrs 可选 iconType 属性
  * @returns Component
  */
-export function useRenderIcon(icon: string, attrs?: iconType): Component {
+export function useRenderIcon(icon: any, attrs?: iconType): Component {
   // iconfont
   const ifReg = /^IF-/;
   // typeof icon === "function" 属于SVG
@@ -30,14 +30,16 @@ export function useRenderIcon(icon: string, attrs?: iconType): Component {
         });
       }
     });
-  } else if (typeof icon === "function") {
+  } else if (typeof icon === "function" || typeof icon?.render === "function") {
     // svg
     return icon;
   } else {
     return defineComponent({
       name: "Icon",
       render() {
-        return h(IconifyIconOffline, {
+        const IconifyIcon =
+          attrs && attrs["online"] ? IconifyIconOnline : IconifyIconOffline;
+        return h(IconifyIcon, {
           icon: icon,
           ...attrs
         });

src/components/ReIcon/src/iconfont.ts

@@ -2,7 +2,7 @@ import { h, defineComponent } from "vue";
 
 // 封装iconfont组件，默认`font-class`引用模式，支持`unicode`引用、`font-class`引用、`symbol`引用 （https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.20&helptype=code）
 export default defineComponent({
-  name: "fontIcon",
+  name: "FontIcon",
   props: {
     icon: {
       type: String,

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -28,22 +28,26 @@ import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
 import InformationLine from "@iconify-icons/ri/information-line";
 import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
 import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
-import Bookmark from "@iconify-icons/ri/bookmark-2-line";
+import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
 import User from "@iconify-icons/ri/user-3-fill";
 import Lock from "@iconify-icons/ri/lock-fill";
+import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
+import MenuFold from "@iconify-icons/ri/menu-fold-fill";
 addIcon("arrow-right-s-line", ArrowRightSLine);
 addIcon("arrow-left-s-line", ArrowLeftSLine);
 addIcon("logout-circle-r-line", LogoutCircleRLine);
 addIcon("information-line", InformationLine);
 addIcon("arrow-up-line", ArrowUpLine);
 addIcon("arrow-down-line", ArrowDownLine);
-addIcon("bookmark", Bookmark);
+addIcon("bookmark-2-line", Bookmark2Line);
 addIcon("user", User);
 addIcon("lock", Lock);
+addIcon("menu-unfold", MenuUnfold);
+addIcon("menu-fold", MenuFold);
 
 // Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
-  name: "IconifyIcon",
+  name: "IconifyIconOffline",
   components: { IconifyIcon },
   props: {
     icon: {
@@ -57,6 +61,9 @@ export default defineComponent({
       IconifyIcon,
       {
         icon: `${this.icon}`,
+        style: attrs?.style
+          ? Object.assign(attrs.style, { outline: "none" })
+          : { outline: "none" },
         ...attrs
       },
       {

src/components/ReIcon/src/iconifyIconOnline.ts

@@ -1,9 +1,9 @@
 import { h, defineComponent } from "vue";
 import { Icon as IconifyIcon } from "@iconify/vue";
 
-// Iconify Icon在Vue里在线使用（用于外网环境） https://docs.iconify.design/icon-components/vue/offline.html
+// Iconify Icon在Vue里在线使用（用于外网环境）
 export default defineComponent({
-  name: "IconifyIcon",
+  name: "IconifyIconOnline",
   components: { IconifyIcon },
   props: {
     icon: {
@@ -17,6 +17,9 @@ export default defineComponent({
       IconifyIcon,
       {
         icon: `${this.icon}`,
+        style: attrs?.style
+          ? Object.assign(attrs.style, { outline: "none" })
+          : { outline: "none" },
         ...attrs
       },
       {

src/components/ReIcon/src/types.ts

@@ -11,7 +11,9 @@ export interface iconType {
   horizontalAlign?: boolean;
   verticalAlign?: boolean;
   align?: string;
+  online?: boolean;
   onLoad?: Function;
+  includes?: Function;
 
   //  all icon
   style?: object;

src/components/ReImageVerify/index.ts

@@ -1,12 +1,7 @@
-import { App } from "vue";
 import reImageVerify from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
 
-export const ReImageVerify = Object.assign(reImageVerify, {
-  install(app: App) {
-    app.component(reImageVerify.name, reImageVerify);
-  }
-});
+/** 图形验证码组件 */
+export const ReImageVerify = withInstall(reImageVerify);
 
-export default {
-  ReImageVerify
-};
+export default ReImageVerify;

src/components/ReImageVerify/src/index.vue

@@ -1,13 +1,11 @@
-<script lang="ts">
-export default {
-  name: "ReImageVerify"
-};
-</script>
-
 <script setup lang="ts">
 import { watch } from "vue";
 import { useImageVerify } from "./hooks";
 
+defineOptions({
+  name: "ReImageVerify"
+});
+
 interface Props {
   code?: string;
 }

src/components/ReQrcode/index.ts

@@ -1,10 +1,7 @@
-import { App } from "vue";
 import reQrcode from "./src/index";
+import { withInstall } from "@pureadmin/utils";
 
-export const ReQrcode = Object.assign(reQrcode, {
-  install(app: App) {
-    app.component(reQrcode.name, reQrcode);
-  }
-});
+/** 二维码组件 */
+export const ReQrcode = withInstall(reQrcode);
 
 export default ReQrcode;

src/components/ReQrcode/src/index.tsx

@@ -8,8 +8,8 @@ import {
   defineComponent
 } from "vue";
 import "./index.scss";
-import { isString } from "/@/utils/is";
 import { cloneDeep } from "lodash-unified";
+import { isString } from "@pureadmin/utils";
 import { propTypes } from "/@/utils/propTypes";
 import { IconifyIconOffline } from "../../ReIcon";
 import QRCode, { QRCodeRenderersOptions } from "qrcode";
@@ -78,7 +78,7 @@ export default defineComponent({
         const _width: number = await getOriginWidth(unref(renderText), options);
         options.scale =
           props.width === 0 ? undefined : (props.width / _width) * 4;
-        const canvasRef: HTMLCanvasElement = await toCanvas(
+        const canvasRef: any = await toCanvas(
           unref(wrapRef) as HTMLCanvasElement,
           unref(renderText),
           options
@@ -246,7 +246,7 @@ export default defineComponent({
             >
               <div class="absolute top-[50%] left-[50%] font-bold">
                 <IconifyIconOffline
-                  class="cursor-pointer outline-none"
+                  class="cursor-pointer"
                   icon="refresh-right"
                   width="30"
                   color="var(--el-color-primary)"