@allbluecn/web-app 0.11.4 → 0.12.1

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

@@ -17,37 +17,65 @@
 
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { Search } from "lucide-react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
-import { CURATED_ICONS } from "./curated-icons";
+import { CURATED_SEARCH_INDEX, PICKER_SEARCH_INDEX } from "./icon-set";
+import {
+  LAB_ICONS_BY_CATEGORY,
+  LAB_PRIORITY_CATEGORIES,
+  type LabCategory,
+} from "./lab-icons";
 import {
-  buildSearchIndex,
   filterIcons,
   getRecentIcons,
   pruneRecentIcons,
+  type CuratedIcon,
   type IconSearchEntry,
 } from "./icon-data";
 import { m } from "@/paraglide/messages.js";
 
-const SEARCH_INDEX = buildSearchIndex(CURATED_ICONS);
+const PANEL_WIDTH = 22 * 16;
+const PANEL_HEIGHT = 26.25 * 16;
+const GRID_COLS = 8;
+const CELL_SIZE = 36;
+const CELL_GAP = 4;
+const ROW_HEIGHT = CELL_SIZE + CELL_GAP;
+const HEADER_HEIGHT = 24;
+const OVERSCAN = 8;
 
 interface IconPickerPanelProps {
   value?: string;
   onPick: (name: string) => void;
 }
 
-function IconGrid({
-  items,
+type PanelBlock =
+  | { kind: "header"; key: string; title: string }
+  | { kind: "row"; key: string; icons: CuratedIcon[] };
+
+const LAB_CATEGORY_TITLES: Record<LabCategory, () => string> = {
+  "food-beverage": () => m.common_iconPicker_categoryFoodBeverage(),
+  gaming: () => m.common_iconPicker_categoryGaming(),
+  home: () => m.common_iconPicker_categoryHome(),
+  animals: () => m.common_iconPicker_categoryAnimals(),
+  nature: () => m.common_iconPicker_categoryNature(),
+  people: () => m.common_iconPicker_categoryPeople(),
+  seasons: () => m.common_iconPicker_categorySeasons(),
+  other: () => m.common_iconPicker_labMore(),
+};
+
+function IconRow({
+  icons,
   value,
   onPick,
 }: {
-  items: IconSearchEntry[];
+  icons: CuratedIcon[];
   value?: string;
   onPick: (name: string) => void;
 }) {
   return (
-    <div className="grid grid-cols-8 gap-1 px-2 pb-2">
-      {items.map((item) => {
+    <div className="grid grid-cols-8 gap-1 px-2" style={{ height: ROW_HEIGHT }}>
+      {icons.map((item) => {
         const Icon = item.Icon;
         const selected = item.name === value;
         return (
@@ -59,7 +87,8 @@ function IconGrid({
             onClick={() => onPick(item.name)}
             className={cn(
               "flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-              selected && "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary"
+              selected &&
+                "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary"
             )}
           >
             <Icon size={18} aria-hidden />
@@ -70,38 +99,137 @@ function IconGrid({
   );
 }
 
-function SectionTitle({ children, className }: { children: ReactNode; className?: string }) {
+function SectionTitle({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
   return (
-    <h3 className={cn("px-3 pb-1 text-xs font-medium text-muted-foreground", className)}>
+    <h3
+      className={cn(
+        "px-3 pt-2 pb-1 text-xs font-medium leading-none text-muted-foreground",
+        className
+      )}
+      style={{ height: HEADER_HEIGHT }}
+    >
       {children}
     </h3>
   );
 }
 
+function buildBlocks(
+  sections: { id: string; title: string; icons: CuratedIcon[] }[]
+): PanelBlock[] {
+  const blocks: PanelBlock[] = [];
+  for (const section of sections) {
+    if (section.icons.length === 0) continue;
+    blocks.push({
+      kind: "header",
+      key: `header-${section.id}`,
+      title: section.title,
+    });
+    for (let start = 0; start < section.icons.length; start += GRID_COLS) {
+      blocks.push({
+        kind: "row",
+        key: `row-${section.id}-${start / GRID_COLS}`,
+        icons: section.icons.slice(start, start + GRID_COLS),
+      });
+    }
+  }
+  return blocks;
+}
+
 export function IconPickerPanel({ value, onPick }: IconPickerPanelProps) {
   const [query, setQuery] = useState("");
+  const [viewportHeight, setViewportHeight] = useState<number | null>(null);
   const searchRef = useRef<HTMLInputElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     searchRef.current?.focus();
     // 清理最近使用中已失效的记录（如精选名单收缩前存入的图标名）
     const stored = getRecentIcons();
-    const invalid = stored.filter((n) => !SEARCH_INDEX.some((e) => e.name === n));
-    if (invalid.length > 0) pruneRecentIcons(new Set(stored.filter((n) => !invalid.includes(n))));
+    const invalid = stored.filter((n) => !PICKER_SEARCH_INDEX.some((e) => e.name === n));
+    if (invalid.length > 0)
+      pruneRecentIcons(new Set(stored.filter((n) => !invalid.includes(n))));
+  }, []);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const update = () => setViewportHeight(el.clientHeight);
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
   }, []);
 
   const searching = query.trim().length > 0;
   const results = useMemo(
-    () => (searching ? filterIcons(query.trim(), SEARCH_INDEX) : []),
+    () => (searching ? filterIcons(query.trim(), PICKER_SEARCH_INDEX) : []),
     [query, searching]
   );
+
   const recent = getRecentIcons()
-    .map((n) => SEARCH_INDEX.find((e) => e.name === n))
+    .map((n) => PICKER_SEARCH_INDEX.find((e) => e.name === n))
     .filter((e): e is IconSearchEntry => Boolean(e));
-  const firstVisible = searching ? results[0] : (recent[0] ?? SEARCH_INDEX[0]);
+
+  const sections = searching
+    ? [
+        {
+          id: "results",
+          title: m.common_iconPicker_resultCount({ count: results.length }),
+          icons: results,
+        },
+      ]
+    : [
+        ...(recent.length > 0
+          ? [{ id: "recent", title: m.common_iconPicker_recent(), icons: recent }]
+          : []),
+        ...LAB_PRIORITY_CATEGORIES.map((category) => ({
+          id: `lab-${category}`,
+          title: LAB_CATEGORY_TITLES[category](),
+          icons: LAB_ICONS_BY_CATEGORY[category],
+        })),
+        {
+          id: "lab-other",
+          title: m.common_iconPicker_labMore(),
+          icons: LAB_ICONS_BY_CATEGORY.other,
+        },
+        {
+          id: "curated",
+          title: m.common_iconPicker_standard(),
+          icons: CURATED_SEARCH_INDEX,
+        },
+      ];
+
+  const blocks = buildBlocks(sections);
+  const firstVisible = searching ? results[0] : (recent[0] ?? PICKER_SEARCH_INDEX[0]);
+
+  // 视口高度未知（首次渲染）或大于 0 时走虚拟化；高度为 0（jsdom 等无布局环境）降级为整表渲染
+  const virtualized = viewportHeight === null || viewportHeight > 0;
+
+  const virtualizer = useVirtualizer({
+    count: blocks.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: (index) =>
+      blocks[index].kind === "header" ? HEADER_HEIGHT : ROW_HEIGHT,
+    overscan: OVERSCAN,
+  });
+
+  const renderBlock = (block: PanelBlock) =>
+    block.kind === "header" ? (
+      <SectionTitle key={block.key}>{block.title}</SectionTitle>
+    ) : (
+      <IconRow key={block.key} icons={block.icons} value={value} onPick={onPick} />
+    );
 
   return (
-    <div className="flex flex-col overflow-auto" style={{ height: 26.25 * 16, width: 22 * 16 }}>
+    <div
+      className="flex flex-col overflow-hidden"
+      style={{ width: PANEL_WIDTH, height: PANEL_HEIGHT }}
+    >
       {/* 搜索框 */}
       <div className="relative shrink-0 p-1.5 pb-2">
         <Search
@@ -125,35 +253,33 @@ export function IconPickerPanel({ value, onPick }: IconPickerPanelProps) {
         />
       </div>
 
-      {searching ? (
-        <>
-          <div className="shrink-0 px-3 pb-1 text-xs text-muted-foreground">
-            {m.common_iconPicker_resultCount({ count: results.length })}
-          </div>
-          {results.length === 0 ? (
-            <div className="flex flex-1 items-center justify-center px-6 text-center text-xs text-muted-foreground">
-              {m.common_iconPicker_noResults()}
+      {searching && results.length === 0 ? (
+        <div className="flex min-h-0 flex-1 items-center justify-center px-6 text-center text-xs text-muted-foreground">
+          {m.common_iconPicker_noResults()}
+        </div>
+      ) : (
+        <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
+          {virtualized ? (
+            <div style={{ position: "relative", height: virtualizer.getTotalSize() }}>
+              {virtualizer.getVirtualItems().map((item) => (
+                <div
+                  key={item.key}
+                  style={{
+                    position: "absolute",
+                    top: item.start,
+                    left: 0,
+                    width: "100%",
+                    height: item.size,
+                  }}
+                >
+                  {renderBlock(blocks[item.index])}
+                </div>
+              ))}
             </div>
           ) : (
-            <IconGrid items={results} value={value} onPick={onPick} />
-          )}
-        </>
-      ) : (
-        <>
-          {/* 最近使用：仅在有记录时显示，与全部图标同页上下排列 */}
-          {recent.length > 0 && (
-            <section>
-              <SectionTitle>{m.common_iconPicker_recent()}</SectionTitle>
-              <IconGrid items={recent} value={value} onPick={onPick} />
-            </section>
+            <div>{blocks.map(renderBlock)}</div>
           )}
-          <section>
-            <SectionTitle className={cn(recent.length === 0 && "pt-1")}>
-              {m.common_iconPicker_all()}
-            </SectionTitle>
-            <IconGrid items={SEARCH_INDEX} value={value} onPick={onPick} />
-          </section>
-        </>
+        </div>
       )}
     </div>
   );

package/src/lib/changelog/sdk-versions.ts

@@ -95,8 +95,8 @@ export const SDK_GROUPS: SdkGroup[] = [
     "items": [
       {
         "name": "@allbluecn/web-app",
-        "version": "v0.11.4",
-        "lastUpdate": "Sep 12, 2026",
+        "version": "v0.12.1",
+        "lastUpdate": "Sep 13, 2026",
         "source": "apps/web/package.json",
         "docsUrl": "https://github.com/allbluecn/allblue"
       },