@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/settings/personal-team/account/account-client.tsx

@@ -28,6 +28,7 @@ import SettingsProfile, { type ProfileData } from "@/components/settings/persona
 import { useState, useCallback } from "react"
 import { type AvatarConfig, getRandomConfig } from "@/components/settings/personal-team/account/avatar/avatar-config"
 import type { ShapeType } from "@allbluecn/kernel"
+import { toAvatarShape } from "@/components/shared-kit/avatars/avatar-shape"
 import { useQueryClient } from "@tanstack/react-query"
 import { updateAvatarFn } from "@/server/serverFns/user/avatar"
 import { toast } from '@/components/ui/toast'
@@ -60,7 +61,7 @@ export default function AccountClient({
   const timezone = useTimezone()
   const persistAvatar = useCallback(async (config: AvatarConfig, shape: string, color: string) => {
     try {
-      await updateAvatarFn({ data: { avatarConfig: config, bgShape: shape as ShapeType, bgColor: color } })
+      await updateAvatarFn({ data: { avatarConfig: config, bgShape: toAvatarShape(shape) ?? "square", bgColor: color } })
       queryClient.setQueryData(['session'], (old: { user?: Record<string, unknown> } | null) =>
         old ? { ...old, user: { ...old.user, avatarConfig: config, bgShape: shape, bgColor: color } } : old,
       )
@@ -72,7 +73,7 @@ export default function AccountClient({
 
   const handleSaveAvatar = async (config: AvatarConfig, newBgShape: string, newBgColor: string) => {
     setAvatarConfig(config)
-    setBgShape(newBgShape as ShapeType)
+    setBgShape(toAvatarShape(newBgShape) ?? "square")
     setBgColor(newBgColor)
     await persistAvatar(config, newBgShape, newBgColor)
     toast.success(m.settings_profile_avatarUpdated())

package/src/components/settings/personal-team/team/invitation-cards/invitation-history-list.tsx

@@ -224,7 +224,7 @@ export function InvitationHistoryList({
                         sideOffset={4}
                       >
                         <DropdownMenuItem
-                          onSelect={() =>
+                          onClick={() =>
                             onAction(
                               () =>
                                 invitation.joinRequestId
@@ -277,7 +277,7 @@ export function InvitationHistoryList({
                       >
                         {canResend && (
                           <DropdownMenuItem
-                            onSelect={() =>
+                            onClick={() =>
                               onAction(
                                 () => onResend!(invitation.id),
                                 invitation.id,
@@ -292,7 +292,7 @@ export function InvitationHistoryList({
                           <>
                             <DropdownMenuSeparator />
                             <DropdownMenuItem
-                              onSelect={() =>
+                              onClick={() =>
                                 onAction(
                                   () => onRevoke!(invitation.id),
                                   invitation.id,
@@ -309,7 +309,7 @@ export function InvitationHistoryList({
                           <>
                             {(canResend || canRevoke) && <DropdownMenuSeparator />}
                             <DropdownMenuItem
-                              onSelect={() =>
+                              onClick={() =>
                                 onAction(
                                   () =>
                                     invitation.joinRequestId
@@ -380,7 +380,7 @@ export function InvitationHistoryList({
                       sideOffset={4}
                     >
                       <DropdownMenuItem
-                        onSelect={() =>
+                        onClick={() =>
                           onAction(
                             () =>
                               invitation.joinRequestId

package/src/components/settings/personal-team/team/team-client.tsx

@@ -59,6 +59,7 @@ import {
 import { Trash2, Infinity as InfinityIcon } from "lucide-react"
 import TeamInvitations, { type TeamInvitation, type TeamJoinRequestItem } from "@/components/settings/personal-team/team/team-invitations"
 import TeamMemberList, { type TeamMember } from "@/components/settings/personal-team/team/team-member-list"
+import { toAvatarShape } from "@/components/shared-kit/avatars/avatar-shape"
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
 
@@ -230,7 +231,7 @@ export default function TeamClient({ user }: TeamClientProps) {
     status: "active",
     joinedAt: new Date(m.joinedAt),
     avatarConfig: m.member.avatarConfig as TeamMember["avatarConfig"],
-    bgShape: m.member.bgShape as TeamMember["bgShape"],
+    bgShape: toAvatarShape(m.member.bgShape),
     bgColor: m.member.bgColor as TeamMember["bgColor"],
   }))
 

package/src/components/settings/personal-team/team/team-member-list.tsx

@@ -379,7 +379,7 @@ export default function TeamMemberList({
                         >
                           {member.role === "member" && onPromote && (
                             <DropdownMenuItem
-                              onSelect={() =>
+                              onClick={() =>
                                 handleAction(
                                   () => onPromote(member.id),
                                   member.id,
@@ -392,7 +392,7 @@ export default function TeamMemberList({
                           )}
                           {member.role === "admin" && onDemote && (
                             <DropdownMenuItem
-                              onSelect={() =>
+                              onClick={() =>
                                 handleAction(
                                   () => onDemote(member.id),
                                   member.id,
@@ -405,7 +405,7 @@ export default function TeamMemberList({
                           )}
                           {member.status === "invited" && onResendInvite && (
                             <DropdownMenuItem
-                              onSelect={() =>
+                              onClick={() =>
                                 handleAction(
                                   () => onResendInvite(member.id),
                                   member.id,
@@ -422,7 +422,7 @@ export default function TeamMemberList({
                           {onRemove && (
                             <>
                               <DropdownMenuItem
-                                onSelect={() =>
+                                onClick={() =>
                                   handleAction(
                                     () => onRemove(member.id),
                                     member.id,

package/src/components/share/share-presence-bar.tsx

@@ -0,0 +1,182 @@
+// 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/>.
+
+// 分享页 presence bar（§9 R4）：成员组（UserAvatar + tooltip 名字）与
+// 访客组（首字母圆形 + 自选颜色 + 昵称）分组显示，各自 +N 折叠，自身头像
+// ring 高亮 + 「我」tooltip（knowledge_sharers_me 文案模式）。
+//
+// 降级：协同不可用（desktop / 无 VITE_COLLAB_WS_URL）/ shareToken 未就绪 /
+// 连接未 synced（connecting/offline，含 room 上限拒连）一律不渲染（§9
+// no-op 不报错）。Tooltip 模式照 sharers-avatar-group（全局
+// TooltipProvider 单例，share 页同享）。
+
+import { m } from '@/paraglide/messages.js'
+import { UserAvatar } from '@/components/shared-kit'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
+import { isCollabEnabled } from '@/lib/collab/env'
+import { useSharePresence } from '@/lib/collab/use-share-presence'
+import type { AvatarConfig } from '@allbluecn/kernel'
+import type { SharePresencePerson } from '@/lib/collab/use-share-presence'
+
+interface SharePresenceBarProps {
+  shareToken: string | null | undefined
+  /** 密码 sessionStorage key 的 designId 段（design 分享路由传） */
+  designId?: string
+  /** 密码 sessionStorage key 的 designver 段（与 SharePasswordGate 对齐） */
+  designver?: string | null
+  /** 每组折叠前直接展示的头像数（默认 4，导航栏空间有限） */
+  max?: number
+}
+
+function PersonAvatar({
+  person,
+  isSelf,
+}: {
+  person: SharePresencePerson
+  isSelf: boolean
+}) {
+  const label = isSelf
+    ? m.presence_share_meTooltip({ name: person.name })
+    : person.name
+  const ringClass = isSelf ? 'ring-primary' : 'ring-background'
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={<div className={cn('rounded-full ring-2', ringClass)} />}
+      >
+        {person.kind === 'member' ? (
+          <UserAvatar
+            name={person.name}
+            avatarConfig={person.avatarConfig as AvatarConfig | null | undefined}
+            bgShape={person.bgShape}
+            bgColor={person.bgColor ?? undefined}
+            size="sm"
+          />
+        ) : (
+          // 访客：首字母圆形 + 自选颜色（数据值上底色，白字保证双主题可读）
+          <div
+            className="flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-medium text-white"
+            style={{ backgroundColor: person.bgColor ?? 'var(--muted)' }}
+          >
+            {(person.name || m.presence_share_guestDefault()).charAt(0).toUpperCase()}
+          </div>
+        )}
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  )
+}
+
+function OverflowChip({
+  count,
+  total,
+  labelOf,
+}: {
+  count: number
+  total: number
+  labelOf: (count: number) => string
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <div className="flex size-6 shrink-0 cursor-default items-center justify-center rounded-full bg-muted text-[10px] font-medium ring-2 ring-background" />
+        }
+      >
+        +{count}
+      </TooltipTrigger>
+      <TooltipContent>{labelOf(total)}</TooltipContent>
+    </Tooltip>
+  )
+}
+
+function PresenceGroup({
+  label,
+  people,
+  selfClientId,
+  max,
+  overflowLabel,
+}: {
+  label: string
+  people: SharePresencePerson[]
+  selfClientId: number | null
+  max: number
+  overflowLabel: (count: number) => string
+}) {
+  if (!people.length) return null
+  const shown = people.slice(0, max)
+  const rest = Math.max(0, people.length - max)
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className="text-[10px] leading-none text-muted-foreground">
+        {label}
+      </span>
+      <div className="flex items-center -space-x-2">
+        {shown.map((person) => (
+          <PersonAvatar
+            key={person.clientId}
+            person={person}
+            isSelf={person.clientId === selfClientId}
+          />
+        ))}
+        {rest > 0 && <OverflowChip count={rest} total={people.length} labelOf={overflowLabel} />}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 分享页在场条。挂载点需在密码门禁通过后的布局内（design 分享路由为
+ * ShareNavBar），保证 join 时 sessionStorage 密码已就位。
+ */
+export function SharePresenceBar({
+  shareToken,
+  designId,
+  designver,
+  max = 4,
+}: SharePresenceBarProps) {
+  const { status, members, guests, selfClientId } = useSharePresence({
+    shareToken,
+    designId,
+    designver,
+  })
+
+  if (!isCollabEnabled() || !shareToken) return null
+  // connecting/offline（含 room 上限拒连）一律不渲染（§9 no-op）
+  if (status !== 'synced') return null
+  if (!members.length && !guests.length) return null
+
+  return (
+    <div className="flex items-center gap-3">
+      <PresenceGroup
+        label={m.presence_share_membersLabel()}
+        people={members}
+        selfClientId={selfClientId}
+        max={max}
+        overflowLabel={(count) => m.presence_share_membersOverflow({ count })}
+      />
+      <PresenceGroup
+        label={m.presence_share_guestsLabel()}
+        people={guests}
+        selfClientId={selfClientId}
+        max={max}
+        overflowLabel={(count) => m.presence_share_guestsOverflow({ count })}
+      />
+    </div>
+  )
+}

package/src/components/shared-kit/auth/auth-client.ts

@@ -25,6 +25,11 @@ export interface Session {
     name: string
     role: 'USER' | 'ADMIN' | 'SUPER_ADMIN'
     image?: string | null
+    // /api/auth/session 实际返回（auth.config session callback 两分支都写入），
+    // 此前类型缺失导致消费方只能绕道或撒谎断言
+    avatarConfig?: Record<string, number> | null
+    bgShape?: string | null
+    bgColor?: string | null
     aiProvider?: string | null
     aiModel?: string | null
     hasAiKey?: boolean | null

package/src/components/shared-kit/avatars/__tests__/avatar-shape.test.ts

@@ -0,0 +1,44 @@
+// 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, it, expect } from "vitest";
+import { AVATAR_SHAPES, toAvatarShape } from "../avatar-shape";
+
+describe("AVATAR_SHAPES", () => {
+  it("与 kernel ShapeType 三值一致", () => {
+    expect([...AVATAR_SHAPES]).toEqual(["circle", "rounded", "square"]);
+  });
+});
+
+describe("toAvatarShape", () => {
+  it("三个合法值原样通过", () => {
+    expect(toAvatarShape("circle")).toBe("circle");
+    expect(toAvatarShape("rounded")).toBe("rounded");
+    expect(toAvatarShape("square")).toBe("square");
+  });
+
+  it("非法字符串返回 null", () => {
+    expect(toAvatarShape("weird")).toBeNull();
+    expect(toAvatarShape("CIRCLE")).toBeNull();
+  });
+
+  it("空串与空值返回 null", () => {
+    expect(toAvatarShape("")).toBeNull();
+    expect(toAvatarShape(null)).toBeNull();
+    expect(toAvatarShape(undefined)).toBeNull();
+  });
+});

package/src/components/shared-kit/avatars/__tests__/user-avatar.test.tsx

@@ -0,0 +1,46 @@
+// 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, it, expect } from "vitest"
+import { render } from "@testing-library/react"
+import { UserAvatar } from "../user-avatar"
+
+describe("UserAvatar bgShape 归一", () => {
+  it("非法 bgShape 不崩溃，fallback 走 square（rounded-none）", () => {
+    const { container } = render(<UserAvatar name="张三" bgShape={"weird-shape"} />)
+    const box = container.firstElementChild
+    expect(box).not.toBeNull()
+    expect(box?.className).toContain("rounded-none")
+  })
+
+  it("空值 bgShape（undefined）fallback 也走 square（rounded-none）——与 NotionAvatar 路径统一", () => {
+    const { container } = render(<UserAvatar name="张三" />)
+    expect(container.firstElementChild?.className).toContain("rounded-none")
+  })
+
+  it("合法 rounded 渲染 rounded-lg（对照：合法值路径不变）", () => {
+    const { container } = render(<UserAvatar name="张三" bgShape="rounded" />)
+    expect(container.firstElementChild?.className).toContain("rounded-lg")
+  })
+
+  it("circle 渲染 rounded-full，square 渲染 rounded-none", () => {
+    const circle = render(<UserAvatar name="A" bgShape="circle" />)
+    expect(circle.container.firstElementChild?.className).toContain("rounded-full")
+    const square = render(<UserAvatar name="A" bgShape="square" />)
+    expect(square.container.firstElementChild?.className).toContain("rounded-none")
+  })
+})

package/src/components/{tags/tags-collection.ts → shared-kit/avatars/avatar-shape.ts}

@@ -15,26 +15,20 @@
 // 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 { createCollection } from '@tanstack/db'
-import { queryCollectionOptions } from '@tanstack/query-db-collection'
-import { listTagsFn } from "@/server/serverFns/tags"
-import { getQueryClient } from '@/lib/query-client-seam'
+import type { ShapeType } from "@allbluecn/kernel"
 
-let _collection: ReturnType<typeof buildCollection> | undefined
+export const AVATAR_SHAPES = [
+  "circle",
+  "rounded",
+  "square",
+  // satisfies 只防 kernel 收窄方向漂移（本数组塞进非 ShapeType 值会报错）；
+  // kernel 新增形状值不会报错，会在 toAvatarShape 中静默归 null
+] as const satisfies readonly ShapeType[]
 
-function buildCollection() {
-  return createCollection(
-    queryCollectionOptions({
-      id: 'tags',
-      queryKey: ['tags'],
-      queryFn: () => listTagsFn(),
-      getKey: (item: { id: string }) => item.id,
-      queryClient: getQueryClient(),
-    })
-  )
+/**
+ * UserBrief.bgShape 是 DB 字典直通的 string|null，UI 底形只认 ShapeType：
+ * 运行时守卫替代断言撒谎型 cast，非法/空值返回 null（由消费端决定回落）。
+ */
+export function toAvatarShape(v: string | null | undefined): ShapeType | null {
+  return AVATAR_SHAPES.find((shape) => shape === v) ?? null
 }
-
-export function getTagsCollection() {
-  if (!_collection) _collection = buildCollection()
-  return _collection
-}

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

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
-import { useEffect, useState } from "react"
+import { useEffect, useLayoutEffect, useState } from "react"
 import type { AvatarConfig, AvatarPart, ShapeType } from "@allbluecn/kernel"
 import { sanitizeSvg } from "@/lib/sanitize"
 
@@ -39,6 +39,50 @@ function getPreviewImagePath(part: AvatarPart, index: number): string {
   return `/avatar/preview/${part}/${index}.svg`
 }
 
+/** 部件 SVG 文本进程内缓存：看板一次分组切换会重挂上百张卡片，同一部件会被反复请求 */
+const partCache = new Map<string, string>()
+const partInflight = new Map<string, Promise<string>>()
+/** 整头像拼装结果缓存（键 = 部件索引序列 + flip），命中时可同步出图，避免重挂时骨架闪烁 */
+const avatarCache = new Map<string, string>()
+const AVATAR_CACHE_LIMIT = 500
+
+function avatarCacheKey(config: AvatarConfig, flip: boolean): string {
+  return `${flip ? "1" : "0"}:${partOrder.map((part) => config[part]).join(",")}`
+}
+
+function rememberAvatar(key: string, svg: string): void {
+  if (avatarCache.size >= AVATAR_CACHE_LIMIT) {
+    const oldest = avatarCache.keys().next().value
+    if (oldest !== undefined) avatarCache.delete(oldest)
+  }
+  avatarCache.set(key, svg)
+}
+
+/** SSR 下 useLayoutEffect 会告警：仅在浏览器使用，使缓存命中能在绘制前同步出图 */
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect
+
+function loadPart(part: AvatarPart, index: number): Promise<string> {
+  const path = getPreviewImagePath(part, index)
+  const cached = partCache.get(path)
+  if (cached !== undefined) return Promise.resolve(cached)
+  const inflight = partInflight.get(path)
+  if (inflight) return inflight
+  const request = fetch(path)
+    .then((res) => res.text())
+    .then((svgText) => {
+      const inner = extractInnerSvg(svgText)
+      partCache.set(path, inner)
+      return inner
+    })
+    .catch(() => "")
+    .finally(() => {
+      partInflight.delete(path)
+    })
+  partInflight.set(path, request)
+  return request
+}
+
 const SVGFilter = `<defs>
   <filter id="notion-avatar-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
     <feMorphology operator="dilate" radius="20" in="SourceAlpha" result="morphology"/>
@@ -80,27 +124,34 @@ export function NotionAvatar({
 }: NotionAvatarProps) {
   const [svgContent, setSvgContent] = useState<string>("")
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
+    const cacheKey = avatarCacheKey(config, flip)
+    const cached = avatarCache.get(cacheKey)
+    if (cached !== undefined) {
+      setSvgContent(cached)
+      return
+    }
+
+    let cancelled = false
     async function buildAvatar() {
       const groups = await Promise.all(
         partOrder.map(async (part) => {
           const index = config[part]
           if (noneParts.includes(part) && index === 0) return ""
-          try {
-            const res = await fetch(getPreviewImagePath(part, index))
-            const svgText = await res.text()
-            const inner = extractInnerSvg(svgText)
-            return `\n<g id="avatar-${part}"${part === "face" ? ' fill="#ffffff"' : ""}>${inner}</g>`
-          } catch {
-            return ""
-          }
+          const inner = await loadPart(part, index)
+          if (!inner) return ""
+          return `\n<g id="avatar-${part}"${part === "face" ? ' fill="#ffffff"' : ""}>${inner}</g>`
         }),
       )
       const flipAttr = flip ? ' transform="scale(-1,1) translate(-1080, 0)"' : ""
       const avatarSvg = `<svg viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">${SVGFilter}<g id="avatar"${flipAttr}>${groups.join("")}</g></svg>`
-      setSvgContent(avatarSvg)
+      rememberAvatar(cacheKey, avatarSvg)
+      if (!cancelled) setSvgContent(avatarSvg)
     }
     buildAvatar()
+    return () => {
+      cancelled = true
+    }
   }, [config, flip])
 
   if (!svgContent) {

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

@@ -17,11 +17,13 @@
 
 
 import { NotionAvatar } from "./notion-avatar"
-import type { AvatarConfig, ShapeType } from "@allbluecn/kernel"
+import { toAvatarShape } from "./avatar-shape"
+import type { AvatarConfig } from "@allbluecn/kernel"
 
 type UserAvatarProps = {
   avatarConfig?: AvatarConfig | null
-  bgShape?: ShapeType | null
+  /** DB 字典直通的 string|null，内部经 toAvatarShape 归一，非法值回落 square */
+  bgShape?: string | null
   bgColor?: string | null
   name?: string | null
   imageUrl?: string | null
@@ -50,14 +52,15 @@ export function UserAvatar({
   size = "md",
 }: UserAvatarProps) {
   const initial = (name || "U").charAt(0).toUpperCase()
+  const shape = toAvatarShape(bgShape) ?? "square"
   const shapeClass =
-    bgShape === "circle" ? "rounded-full" : bgShape === "square" ? "rounded-none" : "rounded-lg"
+    shape === "circle" ? "rounded-full" : shape === "square" ? "rounded-none" : "rounded-lg"
 
   if (avatarConfig) {
     return (
       <NotionAvatar
         config={avatarConfig}
-        shape={bgShape ?? "square"}
+        shape={shape}
         bgColor={bgColor ?? "#fff"}
         className={`${sizeClasses[size]} shrink-0 ${className ?? ""}`}
       />