@hb-hellotech/hb-ui 2.6.0 → 2.7.1

package/dist/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAGA,OAAO,8BAA8B,CAAC;AAatC,wBAAgB,QAAQ,CAAC,GAAG,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAczD"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAGA,OAAO,8BAA8B,CAAC;AAiBtC,wBAAgB,QAAQ,CAAC,GAAG,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAczD"}

package/hooks/useIconfont.ts

@@ -1,18 +1,45 @@
 import {
+    inject,
     ref,
     toValue,
     watch,
     type MaybeRefOrGetter,
     type Ref,
 } from 'vue';
+import type { InjectionKey } from 'vue';
+
+/** 图标库的默认 iconfont CSS 地址 */
+export const HB_ICON_DEFAULT_CSS_URL =
+    '//at.alicdn.com/t/c/font_5174416_x116sg1gb1q.css';
+
+export const HB_ICON_DEFAULT_SYMBOL_CSS_URL =
+    '//at.alicdn.com/t/c/font_5174416_x116sg1gb1q.js';
+
+/** 图标渲染模式：字体 class 或多色 SVG Symbol */
+export type HbLibIconMode = 'font' | 'symbol';
+
+/** 通过 app.use(HbLibIconList, options) 注入的全局配置 */
+export interface HbLibIconGlobalOptions {
+    /** iconfont 资源地址，支持 `.css`（字体图标）或 `.js`（Symbol / 彩色 SVG） */
+    cssUrl?: string;
+}
+
+/** provide/inject 的 key */
+export const HB_ICON_GLOBAL_KEY: InjectionKey<HbLibIconGlobalOptions> =
+    Symbol('HB_ICON_GLOBAL_KEY');
+
+// app.use(...) 注入的全局默认配置
+const globalOptions = inject<HbLibIconGlobalOptions>(HB_ICON_GLOBAL_KEY, {});
 
 export interface UseIconfontResult {
-    /** iconfont @font-face 中声明的 font-family，通常也是渲染图标时需要挂载的基础 class */
+    /** 字体模式下为 @font-face 的 font-family；Symbol 模式下为空字符串 */
     iconBaseClass: Ref<string>;
-    /** 所有图标 class 的公共前缀，例如 full class 为 `strong-user` 时，公共前缀可能是 `strong-` */
+    /** 字体模式下为图标 class 公共前缀；Symbol 模式下为 symbol id 的公共前缀（常见为 `icon-`） */
     iconPrefix: Ref<string>;
-    /** 去掉公共前缀后的图标名称列表，可直接用于图标选择器或组件的 name 属性 */
+    /** 去掉公共前缀后的名称列表，可作为 `HbLibIcon` 的 name  */
     iconClasses: Ref<string[]>;
+    /** `font`：class + 字体；`symbol`：`<use href="#前缀+name">`，保留路径中的多色填充 */
+    iconMode: Ref<HbLibIconMode>;
 }
 
 interface IconfontParseResult {
@@ -21,6 +48,21 @@ interface IconfontParseResult {
     names: string[];
 }
 
+/** 是否为 iconfont「Symbol（彩色 SVG）」类型的 `.js` 地址 */
+export function isIconfontSymbolJsUrl(url: string): boolean {
+    const path = url.trim().split(/[?#]/)[0].toLowerCase();
+    return path.endsWith('.js');
+}
+
+function stableIdPart(url: string): string {
+    let h = 2166136261;
+    for (let i = 0; i < url.length; i++) {
+        h ^= url.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return (h >>> 0).toString(36);
+}
+
 /**
  * 解析 iconfont 的 CSS 文本，提取组件渲染和图标选择所需的信息。
  *
@@ -29,11 +71,6 @@ interface IconfontParseResult {
  * 2. 读取所有 `.xxx:before { content: "\eXXX" }` 规则中的 xxx，作为完整图标 class。
  * 3. 计算完整图标 class 的最长公共前缀，例如 "strong-"。
  * 4. 将公共前缀从完整 class 中移除，得到更适合使用者传入的图标 name。
- *
- * 示例：
- * - CSS 中存在 `.strong-user:before`、`.strong-home:before`
- * - 返回 prefix 为 `strong-`
- * - 返回 names 为 `['user', 'home']`
  */
 function parseIconfontCss(css: string): IconfontParseResult {
     const fontFaceMatch = css.match(
@@ -57,11 +94,28 @@ function parseIconfontCss(css: string): IconfontParseResult {
     return { baseClass, prefix, names };
 }
 
+/**
+ * 从 iconfont 生成的 `.js` 文本中提取 `<symbol id="...">`，规则与 CSS 模式一致，
+ * 用最长公共前缀拆出简短的 `iconClasses` name。
+ */
+function parseIconfontJs(
+    js: string
+): Pick<IconfontParseResult, 'prefix' | 'names'> {
+    const fullIds: string[] = [];
+    const symbolIdRe = /<symbol\b[^>]*?\bid\s*=\s*["']([^"']+)["']/gi;
+    let m: RegExpExecArray | null;
+    while ((m = symbolIdRe.exec(js)) !== null) {
+        fullIds.push(m[1]);
+    }
+    const prefix = findCommonPrefix(fullIds);
+    const names = prefix
+        ? fullIds.map((id) => id.slice(prefix.length))
+        : fullIds.slice();
+    return { prefix, names };
+}
+
 /**
  * 计算字符串数组的最长公共前缀。
- *
- * iconfont 生成的 class 通常会共享同一个业务前缀，例如 `strong-user`、`strong-home`。
- * 将该前缀单独提取出来后，外部使用时只需要关心 `user`、`home` 这类图标名。
  */
 function findCommonPrefix(list: string[]): string {
     if (list.length === 0) return '';
@@ -76,10 +130,7 @@ function findCommonPrefix(list: string[]): string {
 }
 
 /**
- * 将 iconfont CSS 注入到页面，确保 @font-face 字体和 class 规则可以被浏览器识别。
- *
- * 同一个 key 只会注入一次，避免响应式 url 重复触发时创建多份相同 style。
- * SSR 环境没有 document，因此会直接跳过注入。
+ * 将 iconfont CSS 注入到页面。
  */
 function injectCss(cssText: string, key: string) {
     if (typeof document === 'undefined' || document.getElementById(key)) return;
@@ -91,59 +142,119 @@ function injectCss(cssText: string, key: string) {
 }
 
 /**
- * 加载并解析 iconfont CSS 的组合式函数。
- *
- * @param cssUrl iconfont 的 CSS 地址，支持普通字符串、ref 或 getter。
- * @returns iconfont 的基础 class、公共前缀，以及去掉公共前缀后的图标名称列表。
- *
- * 使用方式：
- * ```ts
- * const { iconBaseClass, iconPrefix, iconClasses } = useIconfont(cssUrl);
- * ```
+ * 执行 iconfont `.js`（内部为 Symbol 精灵图脚本）。同一 resolvedUrl 只注入一次；
+ * 使用单次 fetch 得到的文本 + Blob URL 执行，避免重复请求。
+ */
+function injectIconfontJs(jsText: string, resolvedUrl: string): Promise<void> {
+    if (typeof document === 'undefined') return Promise.resolve();
+
+    const id = `hb-iconfont-js-${stableIdPart(resolvedUrl)}`;
+    if (document.getElementById(id)) return Promise.resolve();
+
+    return new Promise((resolve, reject) => {
+        const blob = new Blob([jsText], { type: 'text/javascript' });
+        const blobUrl = URL.createObjectURL(blob);
+        const script = document.createElement('script');
+        script.id = id;
+        script.async = true;
+        script.onload = () => {
+            URL.revokeObjectURL(blobUrl);
+            resolve();
+        };
+        script.onerror = () => {
+            URL.revokeObjectURL(blobUrl);
+            reject(
+                new Error(
+                    `[HbLibIcon] iconfont JS 脚本执行失败：${resolvedUrl}`
+                )
+            );
+        };
+        script.src = blobUrl;
+        document.head.appendChild(script);
+    });
+}
+
+/**
+ * 加载并解析 iconfont 资源（CSS 字体或 Symbol JS）的组合式函数。
  *
- * 典型用途：
- * - 将 `iconBaseClass` 和 `iconPrefix + name` 组合成真实图标 class。
- * - 使用 `iconClasses` 渲染图标选择器的可选项。
- * - 当 `cssUrl` 是响应式数据时，地址变化会自动重新加载并解析。
+ * @param cssUrl 资源地址：`.css` 为字体图标，`.js` 为 Symbol 彩色 SVG。
  */
-export function useIconfont(cssUrl: MaybeRefOrGetter<string>): UseIconfontResult {
+export function useIconfont(
+    cssUrl?: MaybeRefOrGetter<string>
+): UseIconfontResult {
+    if (!cssUrl) {
+        cssUrl = globalOptions?.cssUrl || HB_ICON_DEFAULT_CSS_URL;
+    }
+
     const iconBaseClass = ref('');
     const iconPrefix = ref('');
     const iconClasses = ref<string[]>([]);
+    const iconMode = ref<HbLibIconMode>('font');
     let requestId = 0;
 
     const loadIconfont = async (url: string) => {
         const currentRequestId = ++requestId;
-        if (!url) {
+        const resolvedUrl =
+            url || globalOptions?.cssUrl || HB_ICON_DEFAULT_CSS_URL;
+
+        if (!resolvedUrl) {
             iconBaseClass.value = '';
             iconPrefix.value = '';
             iconClasses.value = [];
+            iconMode.value = 'font';
+            return;
+        }
+
+        if (isIconfontSymbolJsUrl(resolvedUrl)) {
+            try {
+                const res = await fetch(resolvedUrl);
+                const jsText = await res.text();
+                if (currentRequestId !== requestId) return;
+
+                const { prefix, names } = parseIconfontJs(jsText);
+                await injectIconfontJs(jsText, resolvedUrl);
+                if (currentRequestId !== requestId) return;
+
+                iconMode.value = 'symbol';
+                iconBaseClass.value = '';
+                iconPrefix.value = prefix;
+                iconClasses.value = names;
+            } catch (err) {
+                console.error(
+                    '[HbLibIcon] 加载 iconfont Symbol 失败：',
+                    resolvedUrl,
+                    err
+                );
+            }
             return;
         }
 
         try {
-            const res = await fetch(url);
+            const res = await fetch(resolvedUrl);
             const cssText = await res.text();
-            injectCss(cssText, 'hb-iconfont-' + url);
+            injectCss(cssText, 'hb-iconfont-' + resolvedUrl);
 
             const { baseClass, prefix, names } = parseIconfontCss(cssText);
-            // 避免较早的慢请求覆盖较新的 cssUrl 解析结果。
             if (currentRequestId !== requestId) return;
 
+            iconMode.value = 'font';
             iconBaseClass.value = baseClass;
             iconPrefix.value = prefix;
             iconClasses.value = names;
         } catch (err) {
-            console.error('[HbLibIcon] 加载 iconfont 失败：', url, err);
+            console.error(
+                '[HbLibIcon] 加载 iconfont CSS 失败：',
+                resolvedUrl,
+                err
+            );
         }
     };
 
     watch(() => toValue(cssUrl), loadIconfont, { immediate: true });
-
     return {
         iconBaseClass,
         iconPrefix,
         iconClasses,
+        iconMode,
     };
 }
-

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hb-hellotech/hb-ui",
-    "version": "2.6.0",
+    "version": "2.7.1",
     "type": "module",
     "main": "dist/hb_component_lib.umd.cjs",
     "module": "dist/hb_component_lib.js",
@@ -28,7 +28,7 @@
     ],
     "scripts": {
         "dev": "vite --port 3003",
-        "pub": "npm publish --tag latest --access public --registry=https://registry.npmjs.org && node scripts/notify-dingtalk-changelog.mjs",
+        "pub": "npm publish --tag latest --access public --registry=https://registry.npmjs.org ",
         "pub:notify": "node scripts/notify-dingtalk-changelog.mjs",
         "build": "vite build",
         "lint": "eslint ./src/**/*.{ts,vue}",

package/dist/components/func_comp/hb_func_icon_list/constants.d.ts

@@ -1,11 +0,0 @@
-import { InjectionKey } from 'vue';
-/** 图标库的默认 iconfont CSS 地址 */
-export declare const HB_ICON_DEFAULT_CSS_URL = "//at.alicdn.com/t/c/font_2862164_1wnr7wxlgxf.css";
-/** 通过 app.use(HbLibIcon, options) 注入的全局配置 */
-export interface HbLibIconGlobalOptions {
-    /** iconfont css 地址 */
-    cssUrl?: string;
-}
-/** provide/inject 的 key */
-export declare const HB_ICON_GLOBAL_KEY: InjectionKey<HbLibIconGlobalOptions>;
-//# sourceMappingURL=constants.d.ts.map

package/dist/components/func_comp/hb_func_icon_list/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/func_comp/hb_func_icon_list/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AAExC,6BAA6B;AAC7B,eAAO,MAAM,uBAAuB,qDACkB,CAAC;AAEvD,6CAA6C;AAC7C,MAAM,WAAW,sBAAsB;IACnC,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,2BAA2B;AAC3B,eAAO,MAAM,kBAAkB,EAAE,YAAY,CAAC,sBAAsB,CAEnE,CAAC"}

package/dist/demo/HbLibDetailBox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HbLibDetailBox.vue.d.ts","sourceRoot":"","sources":["../../src/demo/HbLibDetailBox.vue"],"names":[],"mappings":";;AA2NA,wBAMG"}

package/dist/demo/HbUnDetailBox.d.ts

@@ -1,6 +0,0 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {
-    hbEditPageContainer: unknown;
-}, HTMLDivElement>;
-export default _default;
-//# sourceMappingURL=HbUnDetailBox.vue.d.ts.map

package/dist/demo/HbUnDetailBox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HbUnDetailBox.vue.d.ts","sourceRoot":"","sources":["../../src/demo/HbUnDetailBox.vue"],"names":[],"mappings":";;;;AA8GA,wBAOG"}