@allbluecn/web-app 0.11.3 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/web-app",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "files": [
@@ -33,6 +33,14 @@
       "types": "./src/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name.tsx",
       "default": "./src/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name.tsx"
     },
+    "./lucide-icon-picker/lab-icons": {
+      "types": "./src/components/shared-kit/icons/lucide-icon-picker/lab-icons.ts",
+      "default": "./src/components/shared-kit/icons/lucide-icon-picker/lab-icons.ts"
+    },
+    "./lucide-icon-picker/icon-set": {
+      "types": "./src/components/shared-kit/icons/lucide-icon-picker/icon-set.ts",
+      "default": "./src/components/shared-kit/icons/lucide-icon-picker/icon-set.ts"
+    },
     "./prototype": {
       "types": "./src/components/prototype/index.ts",
       "default": "./src/components/prototype/index.ts"
@@ -58,6 +66,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@allbluecn/database": "0.8.0",
+    "@allbluecn/kernel": "0.8.0",
     "@ariakit/react": "^0.4.28",
     "@auth/core": "^0.41.2",
     "@auth/prisma-adapter": "^2.11.2",
@@ -187,9 +197,7 @@
     "tailwind-merge": "^3.5.0",
     "three": "^0.180.0",
     "tw-animate-css": "^1.4.0",
-    "zod": "^4.4.3",
-    "@allbluecn/database": "0.8.0",
-    "@allbluecn/kernel": "0.8.0"
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@babel/parser": "^8.0.4",

package/src/components/shared-kit/icons/__tests__/lucide-icon-picker.test.tsx

@@ -22,7 +22,7 @@ import { Star } from "lucide-react";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
 import { IconPickerPanel } from "@/components/shared-kit/icons/lucide-icon-picker/panel";
 import { LucideIconPicker } from "@/components/shared-kit/icons/lucide-icon-picker";
-import { CURATED_ICONS } from "@/components/shared-kit/icons/lucide-icon-picker/curated-icons";
+import { PICKER_ICONS } from "@/components/shared-kit/icons/lucide-icon-picker/icon-set";
 import { pushRecentIcon, getRecentIcons } from "@/components/shared-kit/icons/lucide-icon-picker/icon-data";
 
 describe("LucideIconByName", () => {
@@ -62,6 +62,16 @@ describe("LucideIconByName", () => {
       "text-primary"
     );
   });
+
+  it("Lab 图标名按需加载后渲染对应图标", async () => {
+    const { container } = render(<LucideIconByName name="avocado" size={20} />);
+    await waitFor(() => {
+      expect(
+        container.querySelector("svg")?.getAttribute("class")
+      ).toContain("lucide-avocado");
+    });
+    expect(container.querySelector("svg")?.getAttribute("width")).toBe("20");
+  });
 });
 
 describe("IconPickerPanel", () => {
@@ -79,9 +89,9 @@ describe("IconPickerPanel", () => {
     expect(screen.queryByRole("button", { name: /全部图标/ })).toBeNull();
     // 无最近记录：不显示"最近使用"小节标题，网格 = 精选总数
     expect(screen.queryByText(/最近使用/)).toBeNull();
-    expect(screen.getByText(/全部图标/)).toBeTruthy();
+    expect(screen.getByText(/常规图标/)).toBeTruthy();
     const cells = await screen.findAllByRole("button", { name: /^icon-cell-/ });
-    expect(cells.length).toBe(CURATED_ICONS.length);
+    expect(cells.length).toBe(PICKER_ICONS.length);
   });
 
   it("英文搜索过滤 + Enter 选中第一个结果", async () => {
@@ -120,9 +130,32 @@ describe("IconPickerPanel", () => {
     pushRecentIcon("clock");
     render(<IconPickerPanel onPick={vi.fn()} />);
     expect(screen.getByText(/最近使用/)).toBeTruthy();
-    expect(screen.getByText(/全部图标/)).toBeTruthy();
+    expect(screen.getByText(/常规图标/)).toBeTruthy();
+    const cells = await screen.findAllByRole("button", { name: /^icon-cell-/ });
+    expect(cells.length).toBe(PICKER_ICONS.length + 2);
+  });
+
+  it("Lab 分区靠前且常规分区在末尾", async () => {
+    render(<IconPickerPanel onPick={vi.fn()} />);
+    const headings = screen.getAllByRole("heading").map((h) => h.textContent);
+    for (const title of [
+      "食物与饮品",
+      "游戏",
+      "家居",
+      "动物",
+      "自然",
+      "人物",
+      "季节",
+      "更多实验图标",
+    ]) {
+      expect(headings).toContain(title);
+    }
+    expect(headings[headings.length - 1]).toBe("常规图标");
     const cells = await screen.findAllByRole("button", { name: /^icon-cell-/ });
-    expect(cells.length).toBe(CURATED_ICONS.length + 2);
+    expect(cells[0].getAttribute("aria-label")).toBe(
+      `icon-cell-${PICKER_ICONS[0].name}`
+    );
+    expect(PICKER_ICONS[0].source).toBe("lab");
   });
 
   it("value 对应 cell 有选中态标识", async () => {
@@ -130,6 +163,51 @@ describe("IconPickerPanel", () => {
     const cell = screen.getByRole("button", { name: "icon-cell-star" });
     expect(cell.getAttribute("data-selected")).toBe("true");
   });
+
+  it("Lab 图标 value 对应 cell 有选中态标识", async () => {
+    render(<IconPickerPanel value="avocado" onPick={vi.fn()} />);
+    const cell = screen.getByRole("button", { name: "icon-cell-avocado" });
+    expect(cell.getAttribute("data-selected")).toBe("true");
+  });
+
+  it("视口高度可用时走虚拟化：只渲染首屏区块，尾部区块不进 DOM", () => {
+    const viewport = 420;
+    // jsdom 默认 clientHeight/offsetHeight 为 0（降级整表渲染），这里给滚动容器一个真实视口高度
+    try {
+      vi.spyOn(Element.prototype, "clientHeight", "get").mockReturnValue(
+        viewport
+      );
+      vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(
+        viewport
+      );
+
+      const { container } = render(<IconPickerPanel onPick={vi.fn()} />);
+      const scrollArea = container.querySelector(
+        ".min-h-0.overflow-y-auto"
+      ) as HTMLElement;
+      expect(scrollArea).toBeTruthy();
+      const spacer = scrollArea.firstElementChild as HTMLElement;
+      expect(spacer.style.position).toBe("relative");
+      const totalSize = Number(spacer.style.height.replace("px", ""));
+      expect(totalSize).toBeGreaterThan(viewport);
+      expect(
+        screen.getByRole("button", {
+          name: `icon-cell-${PICKER_ICONS[0].name}`,
+        })
+      ).toBeTruthy();
+      expect(screen.getByText(/食物与饮品/)).toBeTruthy();
+      const tail = PICKER_ICONS[PICKER_ICONS.length - 1];
+      expect(
+        screen.queryByRole("button", { name: `icon-cell-${tail.name}` })
+      ).toBeNull();
+      expect(screen.queryByText(/常规图标/)).toBeNull();
+      const cells = screen.queryAllByRole("button", { name: /^icon-cell-/ });
+      expect(cells.length).toBeGreaterThan(0);
+      expect(cells.length).toBeLessThan(PICKER_ICONS.length);
+    } finally {
+      vi.restoreAllMocks();
+    }
+  });
 });
 
 describe("LucideIconPicker（Popover 包装）", () => {

package/src/components/shared-kit/icons/__tests__/lucide-lab-icons.test.ts

@@ -0,0 +1,179 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, expect, it } from "vitest";
+import * as lab from "@lucide/lab";
+import {
+  LAB_ICONS,
+  LAB_ICON_MAP,
+  LAB_ICONS_BY_CATEGORY,
+  LAB_PRIORITY_CATEGORIES,
+  type LabCategory,
+} from "@/components/shared-kit/icons/lucide-icon-picker/lab-icons";
+import {
+  CURATED_SEARCH_INDEX,
+  PICKER_ICONS,
+  PICKER_ICON_MAP,
+  PICKER_SEARCH_INDEX,
+} from "@/components/shared-kit/icons/lucide-icon-picker/icon-set";
+import { CURATED_ICONS } from "@/components/shared-kit/icons/lucide-icon-picker/curated-icons";
+import { pascalToKebab } from "@/components/shared-kit/icons/lucide-icon-picker/icon-data";
+
+const ALL_CATEGORIES: LabCategory[] = [...LAB_PRIORITY_CATEGORIES, "other"];
+
+/** kebab 名 → @lucide/lab 导出名（首段保持小写，其余段首字母大写） */
+function kebabToExportName(kebab: string): string {
+  const parts = kebab.split("-");
+  return (
+    parts[0] +
+    parts
+      .slice(1)
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join("")
+  );
+}
+
+/** @lucide/lab 真实图标导出（default/module.exports 聚合对象按值类型排除） */
+const LAB_EXPORTS = Object.keys(lab).filter(
+  (key) => Array.isArray((lab as Record<string, unknown>)[key])
+);
+
+describe("LAB_ICONS 实验性图标名单", () => {
+  it("覆盖 @lucide/lab 全量导出（*-off 关闭变体除外）", () => {
+    const covered = new Set(LAB_ICONS.map((icon) => kebabToExportName(icon.name)));
+    const missing = LAB_EXPORTS.filter(
+      (name) => !covered.has(name) && !pascalToKebab(name).endsWith("-off")
+    );
+    expect(missing).toEqual([]);
+    expect(covered.size).toBe(LAB_ICONS.length);
+  });
+
+  it("每项 name 对应的 @lucide/lab 导出存在", () => {
+    const exportSet = new Set(LAB_EXPORTS);
+    const missing = LAB_ICONS.filter(
+      (icon) => !exportSet.has(kebabToExportName(icon.name))
+    );
+    expect(missing.map((icon) => icon.name)).toEqual([]);
+  });
+
+  it("数量在目标区间 320-420", () => {
+    expect(LAB_ICONS.length).toBeGreaterThanOrEqual(320);
+    expect(LAB_ICONS.length).toBeLessThanOrEqual(420);
+  });
+
+  it("name 无重复", () => {
+    const names = LAB_ICONS.map((icon) => icon.name);
+    expect(new Set(names).size).toBe(names.length);
+  });
+
+  it("不含 -off 关闭变体", () => {
+    const banned = LAB_ICONS.filter((icon) => icon.name.endsWith("-off"));
+    expect(banned.map((icon) => icon.name)).toEqual([]);
+  });
+
+  it("每项 zh 关键词非空且无空字符串", () => {
+    const bad = LAB_ICONS.filter(
+      (icon) => icon.zh.length === 0 || icon.zh.some((k) => !k.trim())
+    );
+    expect(bad.map((icon) => icon.name)).toEqual([]);
+  });
+
+  it("LAB_ICON_MAP 与 LAB_ICONS 一一对应", () => {
+    const names = Object.keys(LAB_ICON_MAP);
+    expect(new Set(names).size).toBe(names.length);
+    expect(names.length).toBe(LAB_ICONS.length);
+    for (const icon of LAB_ICONS) {
+      expect(LAB_ICON_MAP[icon.name]?.name).toBe(icon.name);
+    }
+  });
+
+  it("分类互斥且完整（分区渲染无重漏）", () => {
+    const flattened = ALL_CATEGORIES.flatMap((category) =>
+      LAB_ICONS_BY_CATEGORY[category].map((icon) => icon.name)
+    );
+    expect(flattened.length).toBe(LAB_ICONS.length);
+    expect(new Set(flattened).size).toBe(LAB_ICONS.length);
+    for (const category of ALL_CATEGORIES) {
+      for (const icon of LAB_ICONS_BY_CATEGORY[category]) {
+        expect(icon.category).toBe(category);
+      }
+    }
+  });
+
+  it("优先级分类非空（靠前显示的前提）", () => {
+    for (const category of LAB_PRIORITY_CATEGORIES) {
+      expect(LAB_ICONS_BY_CATEGORY[category].length).toBeGreaterThan(0);
+    }
+  });
+
+  it("展示顺序 = 优先级分类顺序拼接 + other 收尾", () => {
+    const expected = [
+      ...LAB_PRIORITY_CATEGORIES.flatMap((category) =>
+        LAB_ICONS_BY_CATEGORY[category].map((icon) => icon.name)
+      ),
+      ...LAB_ICONS_BY_CATEGORY.other.map((icon) => icon.name),
+    ];
+    expect(LAB_ICONS.map((icon) => icon.name)).toEqual(expected);
+  });
+});
+
+describe("PICKER_ICONS 展示顺序（Lab 整体靠前）", () => {
+  it("总量 = Lab + 精选常规", () => {
+    expect(PICKER_ICONS.length).toBe(LAB_ICONS.length + CURATED_ICONS.length);
+  });
+
+  it("Lab 图标整体排在精选常规图标之前（无交叉）", () => {
+    const lastLab = PICKER_ICONS.map((icon) => icon.source).lastIndexOf("lab");
+    expect(lastLab).toBe(LAB_ICONS.length - 1);
+  });
+
+  it("优先级分类图标位于最前（食物/游戏/家居/动物/自然/人物/季节）", () => {
+    const priorityCount = LAB_PRIORITY_CATEGORIES.reduce(
+      (sum, category) => sum + LAB_ICONS_BY_CATEGORY[category].length,
+      0
+    );
+    expect(LAB_ICON_MAP[PICKER_ICONS[0].name]?.category).toBe("food-beverage");
+    expect(
+      LAB_ICON_MAP[PICKER_ICONS[priorityCount - 1].name]?.category
+    ).toBe("seasons");
+    expect(LAB_ICON_MAP[PICKER_ICONS[priorityCount].name]?.category).toBe(
+      "other"
+    );
+  });
+
+  it("PICKER_ICON_MAP 覆盖 Lab 与精选图标", () => {
+    expect(Object.keys(PICKER_ICON_MAP).length).toBe(PICKER_ICONS.length);
+    expect(PICKER_ICON_MAP[LAB_ICONS[0].name]?.source).toBe("lab");
+    expect(PICKER_ICON_MAP[CURATED_ICONS[0].name]?.source).toBe("curated");
+  });
+
+  it("搜索索引与展示顺序一致", () => {
+    expect(PICKER_SEARCH_INDEX.map((entry) => entry.name)).toEqual(
+      PICKER_ICONS.map((icon) => icon.name)
+    );
+  });
+
+  it("CURATED_SEARCH_INDEX 仅含精选常规图标且顺序不变", () => {
+    expect(CURATED_SEARCH_INDEX.map((entry) => entry.name)).toEqual(
+      CURATED_ICONS.map((icon) => icon.name)
+    );
+    const labNames = new Set(LAB_ICONS.map((icon) => icon.name));
+    expect(
+      CURATED_SEARCH_INDEX.filter((entry) => labNames.has(entry.name))
+    ).toEqual([]);
+  });
+});

package/src/components/shared-kit/icons/lucide-icon-picker/icon-set.ts

@@ -0,0 +1,47 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 选择器图标单一事实源：Lab（实验性）图标整体靠前，随后是精选常规图标。
+// Lab 图标分类靠前规则见 lab-icons.ts（食物/游戏/家居/动物/自然/人物/季节）。
+
+import { CURATED_ICONS } from "./curated-icons";
+import { LAB_ICONS, LAB_ICON_MAP } from "./lab-icons";
+import { buildSearchIndex, type CuratedIcon, type IconSearchEntry } from "./icon-data";
+
+export interface PickerIcon extends CuratedIcon {
+  /** 来源：lab（实验性，靠前）| curated（精选常规） */
+  source: "lab" | "curated";
+}
+
+/** 展示顺序：Lab 图标整体在精选常规图标之前 */
+export const PICKER_ICONS: PickerIcon[] = [
+  ...LAB_ICONS.map((icon) => ({ ...icon, source: "lab" as const })),
+  ...CURATED_ICONS.map((icon) => ({ ...icon, source: "curated" as const })),
+];
+
+/** name → 条目 查找表（全量，含 Lab） */
+export const PICKER_ICON_MAP: Record<string, PickerIcon> = Object.fromEntries(
+  PICKER_ICONS.map((icon) => [icon.name, icon])
+);
+
+/** 搜索索引（与展示顺序一致） */
+export const PICKER_SEARCH_INDEX: IconSearchEntry[] = buildSearchIndex(PICKER_ICONS);
+
+/** 精选常规图标索引（分区渲染用） */
+export const CURATED_SEARCH_INDEX: IconSearchEntry[] = PICKER_SEARCH_INDEX.filter(
+  (entry) => !(entry.name in LAB_ICON_MAP)
+);