@allbluecn/web-app 0.10.2 → 0.11.0

package/src/components/layout/sidebar-03/nav-knowledge.tsx

@@ -70,11 +70,14 @@ import { Link, useLocation } from "@tanstack/react-router";
 import { cn } from "@/lib/utils";
 import { isParentActive } from "@/lib/sidebar-utils";
 import { useEffect, useState } from "react";
-import { useLiveQuery } from "@tanstack/react-db";
-import { knowledgeBasesCollection } from "@/lib/collections/knowledge/knowledge-bases-collection";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { KNOWLEDGE_BASES_QUERY_KEY } from "@/lib/collections/knowledge/knowledge-bases-collection";
+import {
+  listKnowledgeFn,
+  toggleKnowledgePinFn,
+} from "@/server/serverFns/knowledge";
 import { KnowledgeFormDialog } from "@/components/knowledge/dialog/knowledge-form-dialog";
 import { useServerFn } from "@tanstack/react-start";
-import { toggleKnowledgePinFn } from "@/server/serverFns/knowledge";
 
 import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
 import { m } from "@/paraglide/messages.js";
@@ -151,6 +154,7 @@ interface KnowledgeItem {
 
 function UnpinButton({ kb }: { kb: KnowledgeItem }) {
   const togglePin = useServerFn(toggleKnowledgePinFn);
+  const queryClient = useQueryClient();
   const [pinned, setPinned] = useState(kb.pinnedToSidebar);
 
   const handleClick = async () => {
@@ -158,7 +162,7 @@ function UnpinButton({ kb }: { kb: KnowledgeItem }) {
     setPinned(newPinned);
     try {
       await togglePin({ data: { kbId: kb.id, pinned: newPinned } });
-      (knowledgeBasesCollection as any).utils?.refetch?.();
+      void queryClient.invalidateQueries({ queryKey: KNOWLEDGE_BASES_QUERY_KEY });
       window.dispatchEvent(new CustomEvent("knowledge-pinned", { detail: { kbId: kb.id, pinned: newPinned } }));
     } catch {
       setPinned(!newPinned);
@@ -183,11 +187,13 @@ function UnpinButton({ kb }: { kb: KnowledgeItem }) {
 }
 
 function KnowledgeBaseLinks({ pathname }: { pathname: string }) {
-  const { data: items } = useLiveQuery(
-    (q) => q.from({ kb: knowledgeBasesCollection })
-  );
-  const itemsList =
-    (items as unknown as Array<KnowledgeItem> | undefined) ?? [];
+  // useQuery 直读 per-request queryClient（_nav loader 已 SSR 预取），
+  // 列表随 SSR HTML 直出，刷新无需等待；避免 module-level collection 的跨请求泄漏
+  const { data: items } = useQuery({
+    queryKey: KNOWLEDGE_BASES_QUERY_KEY,
+    queryFn: () => listKnowledgeFn(),
+  });
+  const itemsList = (items as unknown as Array<KnowledgeItem> | undefined) ?? [];
 
   if (itemsList.length === 0) return null;
 
@@ -228,18 +234,14 @@ export function NavKnowledge() {
   const { state } = useSidebar();
   const { pathname } = useLocation();
   const isCollapsed = state === "collapsed";
-  const [mounted, setMounted] = useState(false);
   const [open, setOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
+  const queryClient = useQueryClient();
   const active = isParentActive(pathname, "/knowledge");
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   useEffect(() => {
     const refresh = () => {
-      (knowledgeBasesCollection as any).utils?.refetch?.();
+      void queryClient.invalidateQueries({ queryKey: KNOWLEDGE_BASES_QUERY_KEY });
     };
     window.addEventListener("knowledge-created", refresh);
     window.addEventListener("knowledge-updated", refresh);
@@ -251,7 +253,7 @@ export function NavKnowledge() {
       window.removeEventListener("knowledge-deleted", refresh);
       window.removeEventListener("knowledge-pinned", refresh);
     };
-  }, []);
+  }, [queryClient]);
 
   return (
     <SidebarGroup className="p-0 space-y-1">
@@ -350,7 +352,7 @@ export function NavKnowledge() {
         )}
       </Collapsible>
 
-      {!isCollapsed && mounted && (
+      {!isCollapsed && (
         <KnowledgeBaseLinks pathname={pathname} />
       )}
 

package/src/components/layout/sidebar-03/nav-secondary.tsx

@@ -4,24 +4,19 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar"
-import { BookOpen, ScrollText } from "lucide-react"
+import { BookOpen, ExternalLink, ScrollText } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Link } from "@tanstack/react-router"
 import { APP_VERSION_DISPLAY } from "@/lib/app-version"
+import { getLocale } from "@/paraglide/runtime.js"
+import { m } from "@/paraglide/messages.js"
 
-const items = [
+const changelogItems = [
   {
-    title: "使用文档",
-    Icon: BookOpen,
-    href: "/docs",
-    tooltip: "使用文档",
-    external: true,
-  },
-  {
-    title: "开发者日志",
+    title: m.common_changelog_title(),
     Icon: ScrollText,
     href: "/changelog",
-    tooltip: "开发者日志",
+    tooltip: m.common_changelog_title(),
     badge: APP_VERSION_DISPLAY,
   },
 ]
@@ -29,6 +24,7 @@ const items = [
 export function NavSecondary() {
   const { state } = useSidebar()
   const isCollapsed = state === "collapsed"
+  const lang = getLocale()
 
   return (
     <SidebarMenu className={cn("space-y-1", isCollapsed && "px-1")}>
@@ -37,7 +33,42 @@ export function NavSecondary() {
           {/* 资源 */}
         </div>
       )}
-{items.map((item) => (
+      <SidebarMenuItem className="relative group/docs">
+        <SidebarMenuButton
+          asChild
+          tooltip={m.common_docs_title()}
+          className={cn(
+            "flex items-center rounded-lg px-2 pr-8",
+            isCollapsed && "justify-center"
+          )}
+        >
+          <Link
+            to="/$lang/docs/$"
+            params={{ lang, _splat: "" }}
+            className="flex w-full items-center gap-3 text-muted-foreground hover:text-foreground"
+            style={{ width: "100%", height: "100%" }}
+          >
+            <BookOpen className="text-muted-foreground size-3.5" />
+            {!isCollapsed && (
+              <span className="text-xs text-muted-foreground">
+                {m.common_docs_title()}
+              </span>
+            )}
+          </Link>
+        </SidebarMenuButton>
+        {!isCollapsed && (
+          <a
+            href={`/${lang}/docs`}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={m.common_docs_title()}
+            className="absolute right-1.5 top-1/2 -translate-y-1/2 hidden items-center rounded-md p-1 text-muted-foreground/60 hover:text-foreground group-hover/docs:flex"
+          >
+            <ExternalLink className="size-3" />
+          </a>
+        )}
+      </SidebarMenuItem>
+      {changelogItems.map((item) => (
         <SidebarMenuItem key={item.title}>
           <SidebarMenuButton
             asChild
@@ -47,44 +78,23 @@ export function NavSecondary() {
               isCollapsed && "justify-center"
             )}
           >
-            {item.external ? (
-              <a
-                href={item.href}
-                className={cn(
-                  "flex w-full items-center gap-3 text-muted-foreground hover:text-foreground",
-                  isCollapsed && "justify-center -ml-1"
-                )}
-                target="_blank"
-                rel="noopener noreferrer"
-                style={{ width: "100%", height: "100%" }}
-              >
-                <item.Icon className={cn("text-muted-foreground", !isCollapsed && "size-3.5!")} />
+            <Link
+              to={item.href}
+              className="flex w-full items-center justify-between gap-3 text-muted-foreground hover:text-foreground"
+              style={{ width: "100%", height: "100%" }}
+            >
+              <div className="flex items-center gap-3">
+                <item.Icon className="text-muted-foreground size-3.5" />
                 {!isCollapsed && (
                   <span className="text-xs text-muted-foreground">{item.title}</span>
                 )}
-              </a>
-            ) : (
-              <Link
-                to={item.href}
-                className={cn(
-                  "flex w-full items-center justify-between gap-3 text-muted-foreground hover:text-foreground",
-                  isCollapsed && "justify-center -ml-1"
-                )}
-                style={{ width: "100%", height: "100%" }}
-              >
-                <div className="flex items-center gap-3">
-                  <item.Icon className={cn("text-muted-foreground", !isCollapsed && "size-3.5!")} />
-                  {!isCollapsed && (
-                    <span className="text-xs text-muted-foreground">{item.title}</span>
-                  )}
-                </div>
-                {!isCollapsed && item.badge && (
-                  <code className="text-[10px] font-mono text-muted-foreground/60 bg-muted/50 px-1.5 py-0.5 rounded shrink-0">
-                    {item.badge}
-                  </code>
-                )}
-              </Link>
-            )}
+              </div>
+              {!isCollapsed && item.badge && (
+                <code className="text-[10px] font-mono text-muted-foreground/60 bg-muted/50 px-1.5 py-0.5 rounded shrink-0">
+                  {item.badge}
+                </code>
+              )}
+            </Link>
           </SidebarMenuButton>
         </SidebarMenuItem>
       ))}

package/src/components/layout/sidebar-03/nav-workspace.tsx

@@ -17,6 +17,7 @@
 
 import { Link, useLocation } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Layers, Plus, PinOff } from "lucide-react";
 import {
   SidebarGroup,
@@ -29,22 +30,23 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { cn } from "@/lib/utils";
 import { isParentActive } from "@/lib/sidebar-utils";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
-import { CreateWorkspaceDialog } from "@/components/workspace/create-workspace-dialog";
-import { useLiveQuery } from "@tanstack/react-db";
-import { workspacesCollection } from "@/lib/collections/reference/workspaces-collection";
-import { toggleWorkspacePinFn } from "@/server/serverFns/workspace";
+import { CreateWorkspaceDialog } from "@/components/workspace/dialogs/create-workspace-dialog";
+import { WORKSPACES_QUERY_KEY } from "@/lib/collections/reference/workspaces-collection";
+import {
+  listPinnedWorkspacesBriefFn,
+  toggleWorkspacePinFn,
+} from "@/server/serverFns/workspace";
 import { m } from "@/paraglide/messages.js";
 
 function WorkspaceLinks({ pathname }: { pathname: string }) {
-  const { data: workspaces } = useLiveQuery((q) =>
-    q.from({ w: workspacesCollection })
-  );
-  const workspacesList =
-    (workspaces as unknown as Array<{
-      id: string;
-      name: string;
-      icon: string;
-    }> | undefined) ?? [];
+  // useQuery 直读 per-request queryClient（_nav loader 已 SSR 预取），
+  // 列表随 SSR HTML 直出，刷新无需等待；避免 module-level collection 的跨请求泄漏
+  const { data } = useQuery({
+    queryKey: WORKSPACES_QUERY_KEY,
+    queryFn: () => listPinnedWorkspacesBriefFn(),
+  });
+  const queryClient = useQueryClient();
+  const workspacesList = data ?? [];
 
   return (
     <SidebarMenu className="space-y-1">
@@ -90,7 +92,7 @@ function WorkspaceLinks({ pathname }: { pathname: string }) {
               className="absolute right-1 top-1/2 -translate-y-1/2 flex size-5 items-center justify-center rounded text-sidebar-foreground/70 opacity-0 transition-opacity group-hover/ws:opacity-100 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               onClick={async () => {
                 await toggleWorkspacePinFn({ data: { workspaceId: ws.id, pinned: false } });
-                (workspacesCollection as any).utils?.refetch?.();
+                void queryClient.invalidateQueries({ queryKey: WORKSPACES_QUERY_KEY });
                 window.dispatchEvent(new CustomEvent("workspace-pinned", { detail: { workspaceId: ws.id, pinned: false } }));
               }}
             >
@@ -112,16 +114,12 @@ export function NavWorkspace() {
   const { state } = useSidebar();
   const { pathname } = useLocation();
   const isCollapsed = state === "collapsed";
-  const [mounted, setMounted] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     const refresh = () => {
-      (workspacesCollection as any).utils?.refetch?.();
+      void queryClient.invalidateQueries({ queryKey: WORKSPACES_QUERY_KEY });
     };
     window.addEventListener("workspace-created", refresh);
     window.addEventListener("workspace-deleted", refresh);
@@ -133,7 +131,7 @@ export function NavWorkspace() {
       window.removeEventListener("workspace-updated", refresh);
       window.removeEventListener("workspace-pinned", refresh);
     };
-  }, []);
+  }, [queryClient]);
 
   if (isCollapsed) {
     return (
@@ -173,7 +171,7 @@ export function NavWorkspace() {
           <Plus className="size-3.5" />
         </button>
       </div>
-      {mounted && <WorkspaceLinks pathname={pathname} />}
+      <WorkspaceLinks pathname={pathname} />
       <CreateWorkspaceDialog open={createOpen} onOpenChange={setCreateOpen} />
     </SidebarGroup>
   );

package/src/components/mdx.tsx

@@ -0,0 +1,9 @@
+import defaultMdxComponents from 'fumadocs-ui/mdx'
+import type { MDXComponents } from 'mdx/types'
+
+export function getMDXComponents(components?: MDXComponents) {
+  return {
+    ...defaultMdxComponents,
+    ...components,
+  } satisfies MDXComponents
+}

package/src/components/shared-kit/avatars/notion-avatar.tsx

@@ -19,6 +19,7 @@
 
 import { useEffect, useState } from "react"
 import type { AvatarConfig, AvatarPart, ShapeType } from "@allbluecn/kernel"
+import { sanitizeSvg } from "../../../lib/sanitize"
 
 const noneParts: AvatarPart[] = ["glasses", "hair", "accessories", "details", "beard"]
 
@@ -120,7 +121,7 @@ export function NotionAvatar({
         aspectRatio: "1 / 1",
         ...style,
       }}
-      dangerouslySetInnerHTML={{ __html: svgContent }}
+      dangerouslySetInnerHTML={{ __html: sanitizeSvg(svgContent) }}
     />
   )
 }

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

@@ -35,8 +35,8 @@ const NUMBER_TAIL_ALLOWLIST = new Set([
 ]);
 
 describe("CURATED_ICONS 精选名单完整性", () => {
-  it("数量在目标区间 400-520", () => {
-    expect(CURATED_ICONS.length).toBeGreaterThanOrEqual(400);
+  it("数量在目标区间 380-520", () => {
+    expect(CURATED_ICONS.length).toBeGreaterThanOrEqual(380);
     expect(CURATED_ICONS.length).toBeLessThanOrEqual(520);
   });
 

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

@@ -34,11 +34,12 @@ describe("LucideIconByName", () => {
     expect(svg?.innerHTML).toContain("<path");
   });
 
-  it("精选外/未知 name 渲染 fallback（默认 Circle 占位）", () => {
+  it("精选外/未知 name 渲染默认占位图标（FaceSlightlySmilingPlus）", () => {
     const { container } = render(<LucideIconByName name="not-exist-icon" />);
     const svg = container.querySelector("svg");
     expect(svg).toBeTruthy();
-    expect(svg?.innerHTML).toContain("<circle");
+    expect(svg?.getAttribute("class")).toContain("lucide-face-slightly-smiling-plus");
+    expect(svg?.innerHTML).toContain("<path");
   });
 
   it("undefined name 渲染 fallback", () => {

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

@@ -20,7 +20,7 @@
 // 机械禁则由 lucide-curated-icons.test.ts 强制校验。
 
 import {
-  Accessibility, Activity, Ambulance, Ampersand, Anchor, Angry, Aperture, Archive, ArrowDown, ArrowDownLeft,
+  Accessibility, Activity, Ambulance, Ampersand, Anchor, Aperture, Archive, ArrowDown, ArrowDownLeft,
   ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Asterisk, AtSign, Atom, AudioLines,
   Award, BadgeCheck, Bandage, Banknote, Barcode, Bath, Battery, BatteryCharging, Bed, BedDouble,
   Beer, Bell, BellPlus, BellRing, Bike, Binary, Binoculars, Bird, Bold, Book,
@@ -35,15 +35,15 @@ import {
   EthernetPort, ExternalLink, Eye, Factory, FastForward, File, FileArchive, FileBadge, FileBox, FileCheck,
   FileClock, FileCode, FilePlus, FileText, Files, Film, Fish, Flag, FlaskConical, Flower,
   Folder, FolderCheck, FolderClock, FolderClosed, FolderCode, FolderGit, FolderHeart, FolderKanban, FolderOpen, FolderPlus,
-  FolderRoot, FolderSearch, FolderSync, FolderTree, Frown, Funnel, Gamepad, Gauge, Gift, Ghost,
+  FolderRoot, FolderSearch, FolderSync, FolderTree, Funnel, Gamepad, Gauge, Gift, Ghost,
   GitBranch, GitCommitHorizontal, GitCommitVertical, GitCompare, GitFork, GitGraph, GitMerge, Globe, GraduationCap, Grid2x2Check,
   Grid2x2Plus, Guitar, Hammer, HardDrive, Hash, Headphones, Headset, Heart, HeartPulse, Helicopter,
   Hexagon, Hospital, Hourglass, IdCard, Image, ImageDown, ImagePlus, ImageUp, Images, Inbox,
   Infinity, Info, Italic, Joystick, Key, KeyRound, Keyboard, Lamp, Landmark, Laptop,
-  Laugh, Layers, LayoutDashboard, LayoutFreeform, LayoutGrid, LayoutList, LayoutPanelLeft, LayoutTemplate, Leaf, Library,
+  Layers, LayoutDashboard, LayoutFreeform, LayoutGrid, LayoutList, LayoutPanelLeft, LayoutTemplate, Leaf, Library,
   Lightbulb, Link, List, ListChecks, ListOrdered, Loader, LoaderCircle, LoaderPinwheel, LocateFixed, Lock,
   LogIn, LogOut, Luggage, Mail, MailCheck, MailOpen, MailPlus, MailSearch, MailWarning, Mailbox,
-  Map, MapPin, Medal, Megaphone, Meh, MessageCircle, MessageCircleCheck, MessageCircleHeart, MessageCircleMore, MessageCirclePlus,
+  Map, MapPin, Medal, Megaphone, MessageCircle, MessageCircleCheck, MessageCircleHeart, MessageCircleMore, MessageCirclePlus,
   MessageCircleQuestionMark, MessageSquare, MessageSquareCheck, MessageSquareCode, MessageSquareLock, MessagesSquare, Mic, Microscope, Minus, Monitor,
   Moon, Mountain, MountainSnow, Mouse, MousePointer, MousePointerClick, Music, Navigation, Network, Newspaper,
   Nfc, Octagon, PaintBucket, Paintbrush, Palette, PanelTop, PartyPopper, Pause, PenLine, PenTool,
@@ -52,7 +52,7 @@ import {
   Reply, Rewind, Rocket, Route, Sailboat, Satellite, Save, Scan, ScanBarcode, ScanFace,
   ScanLine, ScanSearch, ScanText, School, Search, SearchAlert, SearchCode, Send, Server, Shapes,
   Shield, ShieldAlert, ShieldCheck, Ship, ShoppingBag, ShoppingBasket, ShoppingCart, Sigma, Signal, Signpost,
-  Siren, SkipBack, SkipForward, Slash, SlidersHorizontal, Smartphone, Smile, Skull, Snowflake, Sofa,
+  Siren, SkipBack, SkipForward, Slash, SlidersHorizontal, Smartphone, Skull, Snowflake, Sofa,
   Spade, Sparkles, Spline, Sprout, Square, SquarePen, SquareTerminal, Stamp, Star, StarCheck,
   StarHalf, StarMinus, StarPlus, Stethoscope, Store, Strikethrough, Sun, Sunrise, Sunset, SwatchBook,
   Syringe, Table, TableOfContents, Tablet, Tag, Tags, Target, Tent, Terminal, TestTube,
@@ -391,11 +391,6 @@ export const CURATED_ICONS: CuratedIcon[] = [
     { name: "star-minus", Icon: StarMinus, zh: ["减星"] },
     { name: "star-plus", Icon: StarPlus, zh: ["加星"] },
     { name: "thumbs-down", Icon: ThumbsDown, zh: ["踩"] },
-    { name: "smile", Icon: Smile, zh: ["微笑"] },
-    { name: "frown", Icon: Frown, zh: ["愁眉"] },
-    { name: "meh", Icon: Meh, zh: ["一般"] },
-    { name: "laugh", Icon: Laugh, zh: ["大笑"] },
-    { name: "angry", Icon: Angry, zh: ["愤怒"] },
     { name: "map", Icon: Map, zh: ["地图"] },
     { name: "map-pin", Icon: MapPin, zh: ["地图钉"] },
     { name: "navigation", Icon: Navigation, zh: ["导航"] },

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

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import type { ReactNode } from "react";
-import { Smile } from "lucide-react";
+import { FaceSlightlySmilingPlus } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { CURATED_ICON_MAP } from "./curated-icons";
 import { pascalToKebab } from "./icon-data";
@@ -48,7 +48,7 @@ interface LucideIconByNameProps {
   name?: string;
   size?: number;
   className?: string;
-  /** 默认：Smile 微笑脸（未选择图标时的占位） */
+  /** 默认：FaceSlightlySmilingPlus 微笑脸（未选择图标时的占位） */
   fallback?: ReactNode;
 }
 
@@ -64,7 +64,7 @@ export function LucideIconByName({
     return (
       <>
         {fallback ?? (
-          <Smile
+          <FaceSlightlySmilingPlus
             size={size}
             aria-hidden
             className={cn("text-muted-foreground", className)}

package/src/components/shared-kit/theme/theme-surface.tsx

@@ -0,0 +1,52 @@
+// 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/>.
+
+// 测试专用样板组件：VRT 视觉回归基线的主题表面聚合。
+// 不接入任何路由，不加入 shared-kit/index.ts 导出（避免被产品代码误引用）。
+// 文案为测试样板硬编码中文（不出现在产品 UI），豁免 i18n。
+
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+
+export function ThemeSurface() {
+  return (
+    <div data-testid="theme-surface" className="bg-background text-foreground p-6 space-y-4 w-96">
+      <Card>
+        <CardHeader><CardTitle className="text-base">语义色表面</CardTitle></CardHeader>
+        <CardContent className="space-y-3">
+          <Input placeholder="输入框 placeholder" />
+          <div className="flex gap-2">
+            <Button size="sm">主按钮</Button>
+            <Button size="sm" variant="secondary">次按钮</Button>
+            <Button size="sm" variant="destructive">危险</Button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button size="sm" variant="outline">带提示</Button>
+              </TooltipTrigger>
+              <TooltipContent>工具提示内容</TooltipContent>
+            </Tooltip>
+          </div>
+          <div className="rounded-lg border bg-muted p-3 text-sm text-muted-foreground">muted 区域</div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/src/components/story/relations/general-groups.ts

@@ -1,15 +1 @@
-import { m } from '@/paraglide/messages.js'
-
-const GROUP_LABELS: Record<string, () => string> = {
-  legal: m.story_knowledgeDialog_groupLegal,
-  compliance: m.story_knowledgeDialog_groupCompliance,
-  dictionary: m.story_knowledgeDialog_groupDictionary,
-  bookmark: m.story_knowledgeDialog_groupBookmark,
-  summary: m.story_knowledgeDialog_groupSummary,
-}
-
-/** 通用知识库分组 key → 标签（未知 key 原样返回） */
-export function generalGroupLabel(group: string): string {
-  const labelFn = GROUP_LABELS[group]
-  return labelFn ? labelFn() : group
-}
+export { generalGroupLabel } from "@/components/knowledge/general-groups";