@skyfox2000/webui 1.0.13 → 1.2.0

package/src/utils/icon-loader.ts

@@ -0,0 +1,412 @@
+import { defineComponent, h, Ref, ref, toRaw, watch } from 'vue';
+import message from 'vue-m-message';
+
+type IconCacheData = {
+   /// 存储到window里面的key
+   windowKey: string;
+   /// 是否单色
+   monoColor: boolean;
+   /// 实际的Icon脚本字符串
+   scriptContent: string;
+   /// 超时时间
+   expireTime: number;
+};
+
+export type IconFontOptions = {
+   /**
+    * 加载的图标集地址
+    */
+   iconUrl: string;
+   /**
+    * 是否单色图标集，会替换清空所有fill参数
+    */
+   monoColor?: boolean;
+   /**
+    * 图标名称
+    */
+   icon?: string;
+   /**
+    * 图标集
+    */
+   icons?: string[];
+};
+
+const ICON_CACHE_TIME = 7 * 24 * 60 * 60 * 1000; /// 7天
+const loadingPromises: Map<string, Promise<void>> = new Map(); // 用于存储加载中的 Promise
+const loadedIcons: Set<string> = new Set(); // 用于缓存已加载的图标
+const ToolIcons: Ref<Record<string, any>> = ref({}); // 图标库
+
+export const ICONS_LIB = ToolIcons;
+
+/**
+ *
+ * @param options 参数配置
+ *  - iconUrl 加载的图标集地址
+ *  - monoColor: 是否单色图标
+ * @returns
+ */
+export const createFromIconfont = (options: IconFontOptions) => {
+   if (!options.iconUrl) return circleLoading;
+   const isLoaded = ref(true); // 添加状态管理，表示图标库是否加载完成
+   const Icon = ref('');
+   let existIcon = true;
+   if (options.icons?.length) {
+      // 检查图标库是否存在
+      existIcon = options.icons.every((icon: string) => ToolIcons.value[icon] !== undefined);
+   }
+
+   // 如果图标不存在，则加载图标库
+   if ((options.icon && !ToolIcons.value[options.icon]) || !existIcon) {
+      loadIconfont(options, isLoaded).then(() => {
+         parseCacheIcons(options.iconUrl, options.monoColor || false);
+         isLoaded.value = true; // 设置加载完成状态
+      });
+   }
+
+   return defineComponent({
+      props: {
+         icon: {
+            type: String,
+         },
+         icons: {
+            type: Array<string>,
+         },
+         iconIndex: {
+            type: Number,
+         },
+         clickable: {
+            type: Boolean,
+         },
+         angle: {
+            type: Number,
+         },
+         flip: {
+            type: Boolean,
+         },
+         class: {
+            type: [String, Array<string>],
+            default: '',
+         },
+      },
+      emits: ['update:iconIndex'],
+      setup(props, { emit }) {
+         const curIcon = ref<string | undefined>(props.icon);
+         const curIndex = ref(0);
+         const handleClick = () => {
+            if (props.icons) curIndex.value++; // 自增 curIndex
+         };
+
+         watch(
+            () => props.iconIndex,
+            (newIndex) => {
+               if (newIndex !== undefined) {
+                  curIndex.value = newIndex;
+               }
+            },
+            { immediate: true },
+         );
+
+         watch(
+            () => curIndex.value,
+            (newIndex) => {
+               if (props.icons) {
+                  if (newIndex >= props.icons.length) {
+                     curIndex.value = 0; // 超过长度则重置为 0
+                  }
+                  curIcon.value = props.icons[curIndex.value];
+                  updateIcon(Icon, curIcon, curIcon.value);
+                  emit('update:iconIndex', curIndex.value);
+               }
+            },
+            { immediate: true },
+         );
+
+         watch(
+            () => ToolIcons.value,
+            () => {
+               updateIcon(Icon, curIcon, curIcon.value);
+            },
+            { deep: true },
+         );
+
+         watch(
+            () => props.icon,
+            (newIcon) => {
+               updateIcon(Icon, curIcon, newIcon);
+            },
+         );
+         updateIcon(Icon, curIcon, curIcon.value);
+
+         return { isLoaded, Icon, handleClick }; // 返回状态以供模板使用
+      },
+      render() {
+         if (!isLoaded.value) {
+            return circleLoading;
+         }
+
+         let existingClass = this.class;
+         let classString = '';
+
+         if (Array.isArray(existingClass)) {
+            classString = existingClass.join(' ');
+         } else if (typeof existingClass === 'string') {
+            classString = existingClass;
+         }
+
+         let finalClasses = [classString];
+
+         if (!/\bw-/.test(classString) && !/$w-/.test(classString)) {
+            finalClasses.push('w-4');
+         }
+
+         if (!/\bh-/.test(classString) && !/$h-/.test(classString)) {
+            finalClasses.push('h-4');
+         }
+
+         // 根据传入的 icon 渲染对应的组件
+         return Icon.value
+            ? h(toRaw(Icon.value), {
+                 onClick: this.$props.clickable ? this.handleClick : undefined,
+                 class: `${finalClasses.join(' ')}`,
+                 style: {
+                    fill: 'currentColor',
+                    cursor: this.$props.clickable ? 'pointer' : 'default',
+                    transform: getIconTransform(this.angle, this.flip),
+                 },
+              })
+            : h('div', { class: 'w-[14px] h-[14px]' }); // 占位符
+      },
+   });
+};
+
+/**
+ * 远程加载图标集
+ * @param url 远程图标库地址
+ */
+const loadIconfont = (options: IconFontOptions, isLoaded: Ref<Boolean>): Promise<void> => {
+   let url = options.iconUrl;
+   if (!url) {
+      console.error('图标库地址不能为空');
+      return Promise.resolve();
+   }
+   if (loadingPromises.has(url)) {
+      return Promise.resolve(); // 如果正在加载中，返回该 URL 对应的 Promise
+   }
+
+   const cacheData = getIconCache(url);
+
+   // 如果有未过期且内容相同的缓存
+   if (cacheData) {
+      return new Promise<void>(async (resolve) => {
+         loadScript(cacheData.scriptContent);
+         return resolve();
+      });
+   }
+
+   /// 需要远程加载
+   isLoaded.value = false;
+
+   // 创建一个新的 Promise 并存储在 Map 中
+   const loadingPromise = new Promise<void>(async (resolve) => {
+      await loadAndCacheScript(url, options.monoColor || false);
+      resolve();
+      loadingPromises.delete(url);
+   });
+
+   loadingPromises.set(url, loadingPromise);
+
+   return loadingPromise;
+};
+
+const loadAndCacheScript = async (url: string, monoColor: boolean) => {
+   try {
+      const response = await fetch(url);
+      if (!response.ok) {
+         message.error('网络异常，无法加载图标库！');
+         return;
+      }
+      let scriptContent = await response.text();
+
+      /// 是否单色
+      scriptContent = monoColor ? scriptContent.replace(/fill=\"[^\"]*\"/gi, '') : scriptContent;
+
+      let reg = /^window\.(\w+)\s*=/;
+      const matches = scriptContent.match(reg);
+      if (matches && matches.length > 1) {
+         let windowKey = matches[1];
+         storeIconCache(url, windowKey, monoColor, scriptContent);
+      }
+
+      loadScript(scriptContent);
+      return;
+   } catch (error) {
+      console.error('网络异常，无法加载图标库:', error);
+      return null;
+   }
+};
+
+const loadScript = (scriptContent: string) => {
+   const script = document.createElement('script');
+   script.textContent = scriptContent;
+   document.head.appendChild(script);
+};
+
+/**
+ * 存储图标缓存到 localStorage
+ * @param key 缓存键
+ * @param svgString SVG 字符串
+ */
+const storeIconCache = (key: string, windowKey: string, monoColor: boolean, scriptContent: string): void => {
+   let cacheKey = `icon_cache:${key}`;
+   const cache = {
+      windowKey,
+      monoColor,
+      scriptContent,
+      expireTime: Date.now() + ICON_CACHE_TIME, // 缓存时间：7天
+   };
+   localStorage.setItem(cacheKey, JSON.stringify(cache));
+};
+
+/**
+ * 从 localStorage 读取图标缓存
+ * @param key 缓存键
+ * @returns 缓存内容
+ */
+const getIconCache = (key: string): IconCacheData | null => {
+   let cacheKey = `icon_cache:${key}`;
+   const cache = localStorage.getItem(cacheKey);
+   if (!cache) return null;
+
+   let parsedCache: IconCacheData;
+   try {
+      parsedCache = JSON.parse(cache);
+   } catch (error) {
+      console.error('解析缓存失败:', error);
+      return null;
+   }
+
+   // 检查缓存是否过期
+   if (parsedCache.expireTime < Date.now()) {
+      localStorage.removeItem(key);
+      return null;
+   }
+
+   return parsedCache;
+};
+
+/**
+ * 检查图标库是否过期
+ */
+export const checkIconsExpired = () => {
+   const currentTime = Date.now();
+   for (const key in localStorage) {
+      if (key.startsWith('icon_cache:')) {
+         const cache = localStorage.getItem(key);
+         if (cache) {
+            const parsedCache: IconCacheData = JSON.parse(cache);
+            if (parsedCache.expireTime < currentTime) {
+               localStorage.removeItem(key);
+            }
+         }
+      }
+   }
+};
+
+const updateIcon = (Icon: Ref<string>, curIcon: Ref<string | undefined>, newIcon?: string) => {
+   setTimeout(() => {
+      curIcon.value = newIcon;
+      if (curIcon.value) {
+         Icon.value = ToolIcons.value[curIcon.value];
+      }
+   }, 1);
+};
+
+export const circleLoading = h(
+   'svg',
+   { class: 'w-4 h-4', viewBox: '0 0 50 50', style: { animation: 'rotate 2s linear infinite' } },
+   [
+      h('circle', {
+         cx: '25',
+         cy: '25',
+         r: '20',
+         stroke: 'currentColor',
+         fill: 'none',
+         style: { strokeWidth: '3 !important' }, // 强制应用线宽
+      }),
+      h('circle', {
+         cx: '25',
+         cy: '6',
+         r: '6',
+         fill: 'currentColor',
+      }),
+   ],
+);
+
+/**
+ * 匹配缓存中解析已加载的图标库
+ * @param url 远程图标库地址
+ * @param monoColor 是否单色
+ */
+const parseCacheIcons = (url: string, monoColor: boolean) => {
+   const cacheData = getIconCache(url);
+   Object.keys(window).forEach((key) => {
+      if (key.startsWith('_iconfont_svg_string_') && cacheData?.windowKey === key && !loadedIcons.has(key)) {
+         loadedIcons.add(key);
+         parseIcons(key, monoColor);
+      }
+   });
+};
+
+/**
+ * 从window中解析已加载的图标库
+ * @param key window中的key
+ * @param monoColor 是否单色
+ */
+export const parseIcons = (key: string, monoColor: boolean) => {
+   const svgString = (window as Record<string, any>)[key];
+
+   const parser = new DOMParser();
+   const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
+   const newSymbols = svgDoc.getElementsByTagName('symbol');
+
+   // 获取全局的 SVG symbol 定义
+   const globalSymbols = document.querySelectorAll('symbol');
+
+   for (const newSymbol of newSymbols) {
+      const id = newSymbol.id;
+      const globalSymbol = Array.from(globalSymbols).find((s) => s.id === id);
+      if (globalSymbol && monoColor) {
+         globalSymbol.innerHTML = newSymbol.innerHTML;
+         // 如果全局中存在相同id的symbol，则删除其子元素的fill属性
+         globalSymbol.querySelectorAll('*').forEach((element) => {
+            if (element.hasAttribute('fill')) {
+               element.removeAttribute('fill');
+            }
+         });
+      }
+
+      if (!ToolIcons.value[id]) {
+         ToolIcons.value[id] = h('svg', { fill: 'currentColor' }, [h('use', { 'xlink:href': `#${id}` })]);
+      } else {
+         /// 优先使用平台图标
+         // console.warn('已存在图标名：', id);
+      }
+   }
+};
+
+/**
+ * 图标显示效果转换
+ * @param angle 旋转角度
+ * @param flip 翻转
+ * @returns
+ */
+export const getIconTransform = (angle?: number, flip?: boolean): string => {
+   let transform = '';
+   if (angle) {
+      transform += `rotate(${angle}deg)`;
+   }
+   if (flip) {
+      transform += ' scaleX(-1)';
+   }
+   return transform;
+};

package/src/utils/isEmpty.ts

@@ -0,0 +1,18 @@
+/**
+ * 判断数据是否为空
+ * @param data 待检查的数据
+ * @returns 如果数据为空返回 true，否则返回 false
+ */
+export const isEmpty = <T>(data: T | null | undefined): boolean => {
+   // 处理 null、undefined 和 空字符串
+   if (data === null || data === undefined || data === '') return true;
+
+   // 处理数组
+   if (Array.isArray(data)) return data.length === 0;
+
+   // 处理对象
+   if (typeof data === 'object') return Object.keys(data).length === 0;
+
+   // 其他类型不为空
+   return false;
+};

package/src/utils/main-openapis.ts

@@ -0,0 +1,72 @@
+import { useAppInfo } from '@/stores/appInfo';
+import { useHostInfo } from '@/stores/hostInfo';
+import { useUserInfo } from '@/stores/userInfo';
+import { ApiResponse } from '@skyfox2000/fapi';
+import { AppInfo, HostInfo, LoginInfo, UserInfo, mainAppApis } from '@skyfox2000/microbase';
+
+/**
+ * 获取HostInfo
+ */
+export const getHostInfo = (): HostInfo => {
+   if (mainAppApis.value) return mainAppApis.value.getHostInfo();
+   const hostInfoStore = useHostInfo();
+   return hostInfoStore.hostInfo;
+};
+
+/**
+ * 获取当前应用信息
+ */
+export const getAppInfo = (): AppInfo => {
+   if (mainAppApis.value) return mainAppApis.value.getAppInfo();
+   const appInfoStore = useAppInfo();
+   return appInfoStore.appInfo;
+};
+
+// export const userRegister = () => {
+// if (mainAppApis.value && mainAppApis.value.userRegister) return mainAppApis.value.userRegister();
+//    const userInfoStore = useUserInfo()
+//    return userInfoStore.userRegister();
+// }
+
+/**
+ * 用户登录接口
+ */
+export const userLogin = (loginInfo: LoginInfo): Promise<ApiResponse<LoginInfo> | void> => {
+   if (mainAppApis.value && mainAppApis.value.userLogin) return mainAppApis.value.userLogin(loginInfo);
+   const userInfoStore = useUserInfo();
+   return userInfoStore.login(loginInfo, true);
+};
+/**
+ * 用户注销接口
+ */
+export const userLogout = (): Promise<ApiResponse<void> | void> => {
+   if (mainAppApis.value && mainAppApis.value.userLogout) return mainAppApis.value.userLogout();
+   const userInfoStore = useUserInfo();
+   return userInfoStore.logout();
+};
+/**
+ * 获取授权码
+ * @returns 授权码
+ */
+export const getToken = (): string => {
+   if (mainAppApis.value && mainAppApis.value.getToken) return mainAppApis.value.getToken();
+   const userInfoStore = useUserInfo();
+   return userInfoStore.getToken();
+};
+
+/**
+ * 获取当前用户信息
+ */
+export const getUserInfo = (): UserInfo => {
+   if (mainAppApis.value && mainAppApis.value.getUserInfo) return mainAppApis.value.getUserInfo();
+   const userInfoStore = useUserInfo();
+   return userInfoStore.getUserInfo();
+};
+
+/**
+ * 子应用推送路由变更
+ */
+export const mainAppPush = (subPath: string) => {
+   const appInfoStore = useAppInfo();
+   appInfoStore.push(subPath);
+};

package/src/utils/menu.ts

@@ -0,0 +1,89 @@
+import { useAppInfo } from '@/stores/appInfo';
+import { usePageInfo } from '@/stores/pageInfo';
+import { useUserInfo } from '@/stores/userInfo';
+import { BreadcrumbRoute } from '@/typings/menu';
+import { RouteRecord } from '@skyfox2000/microbase';
+import { Component, h, reactive } from 'vue';
+
+/**
+ * 初始化菜单信息
+ * @param routes 路由信息
+ * @param menuData 菜单信息
+ */
+export const initMenu = <T>(
+   routes: RouteRecord[],
+   menuData: T[],
+   iconCom: Component,
+   iconProps?: Record<string, any>,
+) => {
+   const result = routeToMenu<T>(routes, [], iconCom, iconProps);
+   result.forEach((item) => menuData.push(item));
+};
+
+/**
+ * 转换路由为菜单树结构
+ * @param routes 路由
+ * @param parentPath 上级路径
+ * @returns
+ */
+const routeToMenu = <T>(
+   routes: RouteRecord[],
+   parentPath: string[],
+   iconCom: Component,
+   iconProps?: Record<string, any>,
+): T[] => {
+   const result: T[] = [];
+   const userInfoStore = useUserInfo();
+   for (const route of routes) {
+      if (
+         route.redirect ||
+         route.path.includes('/login') ||
+         route.path.includes('/error') ||
+         route.path.includes('/:page(.*)')
+      ) {
+         // 非业务菜单
+         continue;
+      }
+      /// 角色匹配，继续处理
+      if (route.meta?.roles?.length && !userInfoStore.hasRole(route.meta.roles)) {
+         // 角色不匹配，跳过
+         if (route.meta?.permission && !userInfoStore.hasPermit(route.meta.permission, ':page')) {
+            // 权限不匹配，跳过
+            continue;
+         }
+      }
+      /// 角色匹配，继续处理
+      const paths = route.path.split('/');
+      paths.unshift(...parentPath);
+      const children = routeToMenu(route.children || [], paths, iconCom, iconProps);
+      const newMenu: T = {
+         key: paths.join('/'),
+         label: route.name?.toString() ?? '',
+         title: route.name?.toString() ?? '',
+         icon: route.icon ? h(iconCom, { ...iconProps, icon: route.icon }) : undefined,
+         children: children.length > 0 ? children : undefined,
+      } as T;
+      if (children.length > 0 || !route.children) result.push(newMenu);
+   }
+   return result;
+};
+
+export const crumbs: BreadcrumbRoute[] = reactive([]);
+/**
+ * 显示面包屑数据
+ */
+export const showBreadcrumb = () => {
+   crumbs.length = 0;
+   const appInfoStore = useAppInfo();
+   const pageInfoStore = usePageInfo();
+   let fullPath = pageInfoStore.TabActive;
+   const matched = appInfoStore.matchedRoutes(fullPath);
+   matched.forEach((item: RouteRecord, index: number) => {
+      const crumb: BreadcrumbRoute = {
+         index: index,
+         path: item.path,
+         breadcrumbName: item.name?.toString() ?? '',
+      };
+      crumbs.push(crumb);
+   });
+};