@hb-hellotech/hb-ui 2.4.3 → 2.5.0

package/hooks/useIconfont.ts

@@ -0,0 +1,149 @@
+import {
+    ref,
+    toValue,
+    watch,
+    type MaybeRefOrGetter,
+    type Ref,
+} from 'vue';
+
+export interface UseIconfontResult {
+    /** iconfont @font-face 中声明的 font-family，通常也是渲染图标时需要挂载的基础 class */
+    iconBaseClass: Ref<string>;
+    /** 所有图标 class 的公共前缀，例如 full class 为 `strong-user` 时，公共前缀可能是 `strong-` */
+    iconPrefix: Ref<string>;
+    /** 去掉公共前缀后的图标名称列表，可直接用于图标选择器或组件的 name 属性 */
+    iconClasses: Ref<string[]>;
+}
+
+interface IconfontParseResult {
+    baseClass: string;
+    prefix: string;
+    names: string[];
+}
+
+/**
+ * 解析 iconfont 的 CSS 文本，提取组件渲染和图标选择所需的信息。
+ *
+ * 解析规则：
+ * 1. 从 @font-face 中取 font-family 作为基础 class，例如 "strongQ"。
+ * 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(
+        /@font-face\s*\{[\s\S]*?font-family\s*:\s*["']([^"']+)["']/
+    );
+    const baseClass = fontFaceMatch?.[1] ?? '';
+
+    const iconClassRegex =
+        /\.([\w-]+)\s*:before\s*\{\s*content\s*:\s*["']\\[\da-fA-F]+["']\s*;?\s*\}/g;
+    const fullClasses: string[] = [];
+    let match: RegExpExecArray | null;
+    while ((match = iconClassRegex.exec(css)) !== null) {
+        fullClasses.push(match[1]);
+    }
+
+    const prefix = findCommonPrefix(fullClasses);
+    const names = prefix
+        ? fullClasses.map((className) => className.slice(prefix.length))
+        : fullClasses.slice();
+
+    return { baseClass, prefix, names };
+}
+
+/**
+ * 计算字符串数组的最长公共前缀。
+ *
+ * iconfont 生成的 class 通常会共享同一个业务前缀，例如 `strong-user`、`strong-home`。
+ * 将该前缀单独提取出来后，外部使用时只需要关心 `user`、`home` 这类图标名。
+ */
+function findCommonPrefix(list: string[]): string {
+    if (list.length === 0) return '';
+    let prefix = list[0];
+    for (let i = 1; i < list.length; i++) {
+        while (prefix && !list[i].startsWith(prefix)) {
+            prefix = prefix.slice(0, -1);
+        }
+        if (!prefix) break;
+    }
+    return prefix;
+}
+
+/**
+ * 将 iconfont CSS 注入到页面，确保 @font-face 字体和 class 规则可以被浏览器识别。
+ *
+ * 同一个 key 只会注入一次，避免响应式 url 重复触发时创建多份相同 style。
+ * SSR 环境没有 document，因此会直接跳过注入。
+ */
+function injectCss(cssText: string, key: string) {
+    if (typeof document === 'undefined' || document.getElementById(key)) return;
+
+    const style = document.createElement('style');
+    style.id = key;
+    style.textContent = cssText;
+    document.head.appendChild(style);
+}
+
+/**
+ * 加载并解析 iconfont CSS 的组合式函数。
+ *
+ * @param cssUrl iconfont 的 CSS 地址，支持普通字符串、ref 或 getter。
+ * @returns iconfont 的基础 class、公共前缀，以及去掉公共前缀后的图标名称列表。
+ *
+ * 使用方式：
+ * ```ts
+ * const { iconBaseClass, iconPrefix, iconClasses } = useIconfont(cssUrl);
+ * ```
+ *
+ * 典型用途：
+ * - 将 `iconBaseClass` 和 `iconPrefix + name` 组合成真实图标 class。
+ * - 使用 `iconClasses` 渲染图标选择器的可选项。
+ * - 当 `cssUrl` 是响应式数据时，地址变化会自动重新加载并解析。
+ */
+export function useIconfont(cssUrl: MaybeRefOrGetter<string>): UseIconfontResult {
+    const iconBaseClass = ref('');
+    const iconPrefix = ref('');
+    const iconClasses = ref<string[]>([]);
+    let requestId = 0;
+
+    const loadIconfont = async (url: string) => {
+        const currentRequestId = ++requestId;
+        if (!url) {
+            iconBaseClass.value = '';
+            iconPrefix.value = '';
+            iconClasses.value = [];
+            return;
+        }
+
+        try {
+            const res = await fetch(url);
+            const cssText = await res.text();
+            injectCss(cssText, 'hb-iconfont-' + url);
+
+            const { baseClass, prefix, names } = parseIconfontCss(cssText);
+            // 避免较早的慢请求覆盖较新的 cssUrl 解析结果。
+            if (currentRequestId !== requestId) return;
+
+            iconBaseClass.value = baseClass;
+            iconPrefix.value = prefix;
+            iconClasses.value = names;
+        } catch (err) {
+            console.error('[HbLibIcon] 加载 iconfont 失败：', url, err);
+        }
+    };
+
+    watch(() => toValue(cssUrl), loadIconfont, { immediate: true });
+
+    return {
+        iconBaseClass,
+        iconPrefix,
+        iconClasses,
+    };
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hb-hellotech/hb-ui",
-    "version": "2.4.3",
+    "version": "2.5.0",
     "type": "module",
     "main": "dist/hb_component_lib.umd.cjs",
     "module": "dist/hb_component_lib.js",
@@ -32,8 +32,9 @@
         "build": "vite build",
         "lint": "eslint ./src/**/*.{ts,vue}",
         "lint:fix": "eslint ./src/**/*.{ts,vue} --fix",
-        "docs:dev": "vitepress dev docs --port 3001",
-        "docs:build": "vitepress build docs",
+        "docs:gen": "node scripts/generate-docs.mjs",
+        "docs:dev": "npm run docs:gen && vitepress dev docs --port 3001",
+        "docs:build": "npm run docs:gen && vitepress build docs",
         "docs:preview": "vitepress preview docs"
     },
     "peerDependencies": {
@@ -45,7 +46,12 @@
         "vue": "^3.5.22",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.1.6",
-        "vuedraggable": "4.1.0"
+        "vuedraggable": "4.1.0",
+        "@vue-office/docx": "^1.6.3",
+        "@vue-office/excel": "^1.7.14",
+        "@vue-office/pdf": "^2.0.10",
+        "@vue-office/pptx": "^1.0.1",
+        "vue-demi": "0.14.6"
     },
     "dependencies": {
         "@hb-hellotech/hb-ui": "1.2.5-beta.5",
@@ -57,8 +63,7 @@
         "lodash-es": "^4.17.23",
         "rollup-plugin-external-globals": "^0.8.0",
         "throttle-debounce": "^5.0.0",
-        "vite-plugin-libcss": "^1.0.5",
-        "vue-files-preview": "^1.0.43"
+        "vite-plugin-libcss": "^1.0.5"
     },
     "devDependencies": {
         "@ant-design/icons-vue": "^6.1.0",
@@ -92,6 +97,11 @@
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.1.6",
         "vue-tsc": "^2.1.10",
-        "vuedraggable": "4.1.0"
+        "vuedraggable": "4.1.0",
+        "@vue-office/docx": "^1.6.3",
+        "@vue-office/excel": "^1.7.14",
+        "@vue-office/pdf": "^2.0.10",
+        "@vue-office/pptx": "^1.0.1",
+        "vue-demi": "0.14.6"
     }
 }