@allbluecn/web-app 0.4.17 → 0.4.18

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

@@ -1,21 +1,4 @@
-// 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/>.
-
-"use client";
+"use client"
 
 import {
   Crown,
@@ -26,147 +9,138 @@ import {
   Trash2,
   User,
   UserCheck,
-} from "lucide-react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { cn } from "@/lib/utils";
-import { formatDate } from "@/lib/datetime";
-import { useTimezone } from "@/providers/timezone-provider";
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+} from "lucide-react"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { cn } from "@/lib/utils"
+import { formatDate } from "@/lib/datetime"
+import { useTimezone } from "@/providers/timezone-provider"
+import { UserAvatar } from "@allbluecn/ui"
+import type { AvatarConfig, ShapeType } from "@allbluecn/shared"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+} from "@/components/ui/card"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu"
 import {
   Empty,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/components/ui/empty";
+} from "@/components/ui/empty"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupInput,
-} from "@/components/ui/input-group";
+} from "@/components/ui/input-group"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
 
 export interface TeamMember {
-  id: string;
-  name: string;
-  email: string;
-  avatar?: string;
-  role: "owner" | "admin" | "member" | "viewer" | "guest";
-  status: "active" | "invited" | "suspended";
-  lastActive?: Date;
-  joinedAt: Date;
+  id: string
+  name: string
+  email: string
+  avatar?: string
+  avatarConfig?: AvatarConfig | null
+  bgShape?: ShapeType | null
+  bgColor?: string | null
+  role: "owner" | "admin" | "member" | "viewer" | "guest"
+  status: "active" | "invited" | "suspended"
+  lastActive?: Date
+  joinedAt: Date
   aiUsage?: {
-    tokens: number;
-    sessions: number;
-  };
+    tokens: number
+    sessions: number
+  }
 }
 
 export interface TeamMemberListProps {
-  members?: TeamMember[];
-  currentUserId?: string;
-  onPromote?: (memberId: string) => Promise<void>;
-  onDemote?: (memberId: string) => Promise<void>;
-  onRemove?: (memberId: string) => Promise<void>;
-  onResendInvite?: (memberId: string) => Promise<void>;
-  className?: string;
-  showSearch?: boolean;
-  showFilters?: boolean;
-  showUsage?: boolean;
+  members?: TeamMember[]
+  currentUserId?: string
+  onPromote?: (memberId: string) => Promise<void>
+  onDemote?: (memberId: string) => Promise<void>
+  onRemove?: (memberId: string) => Promise<void>
+  onResendInvite?: (memberId: string) => Promise<void>
+  className?: string
+  showSearch?: boolean
+  showFilters?: boolean
+  showUsage?: boolean
 }
 
 function formatLastActive(date: Date | undefined, timezone: string, t: (key: string, params?: Record<string, unknown>) => string): string {
-  if (!date) return t("team.never");
-  const now = Date.now();
-  const diff = now - date.getTime();
-  const minutes = Math.floor(diff / 60_000);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
+  if (!date) return t("team.never")
+  const now = Date.now()
+  const diff = now - date.getTime()
+  const minutes = Math.floor(diff / 60_000)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
 
-  if (minutes < 1) return t("team.justNow");
-  if (minutes < 60) return t("team.minutesAgo", { count: minutes });
-  if (hours < 24) return t("team.hoursAgo", { count: hours });
-  if (days < 7) return t("team.daysAgo", { count: days });
-  return formatDate(date, timezone, 'MMM d, yyyy');
+  if (minutes < 1) return t("team.justNow")
+  if (minutes < 60) return t("team.minutesAgo", { count: minutes })
+  if (hours < 24) return t("team.hoursAgo", { count: hours })
+  if (days < 7) return t("team.daysAgo", { count: days })
+  return formatDate(date, timezone, "MMM d, yyyy")
 }
 
 function getRoleLabel(role: TeamMember["role"], t: (key: string) => string): string {
-  return t(`team.role.${role}`);
+  return t(`team.role.${role}`)
 }
 
 function formatNumber(num: number): string {
   if (num >= 1_000_000) {
-    return `${(num / 1_000_000).toFixed(1)}M`;
+    return `${(num / 1_000_000).toFixed(1)}M`
   }
   if (num >= 1000) {
-    return `${(num / 1000).toFixed(1)}K`;
+    return `${(num / 1000).toFixed(1)}K`
   }
-  return num.toString();
+  return num.toString()
 }
 
 function getRoleIcon(role: TeamMember["role"]) {
   switch (role) {
     case "owner":
-      return Crown;
+      return Crown
     case "admin":
-      return Shield;
+      return Shield
     case "member":
-      return UserCheck;
+      return UserCheck
     case "viewer":
     case "guest":
-      return User;
+      return User
     default:
-      return User;
+      return User
   }
 }
 
 function getRoleBadgeVariant(role: TeamMember["role"]) {
   switch (role) {
     case "owner":
-      return "default";
+      return "default"
     case "admin":
-      return "secondary";
+      return "secondary"
     default:
-      return "outline";
+      return "outline"
   }
 }
 
-function getInitials(name: string): string {
-  return name
-    .split(" ")
-    .map((n) => n[0])
-    .join("")
-    .toUpperCase()
-    .slice(0, 2);
-}
-
 export default function TeamMemberList({
   members = [],
   currentUserId,
@@ -179,40 +153,40 @@ export default function TeamMemberList({
   showFilters = true,
   showUsage = false,
 }: TeamMemberListProps) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [roleFilter, setRoleFilter] = useState<string>("all");
-  const [statusFilter, setStatusFilter] = useState<string>("all");
-  const [actionLoading, setActionLoading] = useState<string | null>(null);
-  const timezone = useTimezone();
-  const { t } = useTranslation("settings");
+  const { t } = useTranslation("settings")
+  const timezone = useTimezone()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [roleFilter, setRoleFilter] = useState<string>("all")
+  const [statusFilter, setStatusFilter] = useState<string>("all")
+  const [actionLoading, setActionLoading] = useState<string | null>(null)
 
   const filteredMembers = members.filter((member) => {
     const matchesSearch =
       !searchQuery.trim() ||
       member.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      member.email.toLowerCase().includes(searchQuery.toLowerCase());
+      member.email.toLowerCase().includes(searchQuery.toLowerCase())
 
-    const matchesRole = roleFilter === "all" || member.role === roleFilter;
+    const matchesRole = roleFilter === "all" || member.role === roleFilter
     const matchesStatus =
-      statusFilter === "all" || member.status === statusFilter;
+      statusFilter === "all" || member.status === statusFilter
 
-    return matchesSearch && matchesRole && matchesStatus;
-  });
+    return matchesSearch && matchesRole && matchesStatus
+  })
 
   const handleAction = async (
     action: () => Promise<void>,
-    memberId: string
+    memberId: string,
   ) => {
-    setActionLoading(memberId);
+    setActionLoading(memberId)
     try {
-      await action();
+      await action()
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
   return (
-    <Card className={cn("w-full shadow-xs border", className)}>
+    <Card className={cn("w-full border shadow-xs", className)}>
       <CardHeader>
         <div className="flex flex-col gap-4">
           <div className="flex flex-col gap-1">
@@ -287,12 +261,16 @@ export default function TeamMemberList({
                 <User className="size-6" />
               </EmptyMedia>
               <EmptyTitle>
-                {searchQuery || roleFilter !== "all" || statusFilter !== "all"
+                {searchQuery ||
+                roleFilter !== "all" ||
+                statusFilter !== "all"
                   ? t("team.noMatch")
                   : t("team.noMembers")}
               </EmptyTitle>
               <EmptyDescription>
-                {searchQuery || roleFilter !== "all" || statusFilter !== "all"
+                {searchQuery ||
+                roleFilter !== "all" ||
+                statusFilter !== "all"
                   ? t("team.tryAdjustFilters")
                   : t("team.inviteMembers")}
               </EmptyDescription>
@@ -301,9 +279,9 @@ export default function TeamMemberList({
         ) : (
           <div className="flex flex-col gap-0 overflow-hidden rounded-lg border">
             {filteredMembers.map((member, idx) => {
-              const RoleIcon = getRoleIcon(member.role);
-              const isCurrentUser = member.id === currentUserId;
-              const canModify = !isCurrentUser && member.role !== "owner";
+              const RoleIcon = getRoleIcon(member.role)
+              const isCurrentUser = member.id === currentUserId
+              const canModify = !isCurrentUser && member.role !== "owner"
 
               return (
                 <div key={member.id}>
@@ -312,15 +290,14 @@ export default function TeamMemberList({
                       <div className="flex items-center gap-2">
                         <span className="flex items-center gap-2 font-medium text-sm">
                           {" "}
-                          <Avatar className="size-8">
-                            <AvatarImage
-                              alt={member.name}
-                              src={member.avatar}
-                            />
-                            <AvatarFallback>
-                              {getInitials(member.name)}
-                            </AvatarFallback>
-                          </Avatar>
+                          <UserAvatar
+                            avatarConfig={member.avatarConfig}
+                            bgShape={member.bgShape}
+                            bgColor={member.bgColor}
+                            className="shrink-0"
+                            name={member.name}
+                            size="md"
+                          />
                           {member.name}
                         </span>
                         {isCurrentUser && (
@@ -346,16 +323,20 @@ export default function TeamMemberList({
                           </Badge>
                         )}
                       </div>
-                      <p className="text-muted-foreground text-sm">
-                        {member.email}
+                      <p className="flex flex-wrap items-center gap-x-2 text-muted-foreground text-sm">
+                        <span>{member.email}</span>
+                        <span className="text-xs">
+                          {t("team.joinedAt")}{" "}
+                          {formatDate(member.joinedAt, timezone, "MMM d, yyyy")}
+                        </span>
                       </p>
                       <div className="flex flex-wrap items-center gap-1 text-muted-foreground text-xs">
-                        <span>{t("team.joinedAt")} {formatDate(member.joinedAt, timezone, 'MMM d, yyyy')}</span>
                         {member.lastActive && (
                           <>
                             <span aria-hidden="true">•</span>
                             <span>
-                              {t("team.lastActiveAt")} {formatLastActive(member.lastActive, timezone, t)}
+                              {t("team.lastActiveAt")}{" "}
+                              {formatLastActive(member.lastActive, timezone, t)}
                             </span>
                           </>
                         )}
@@ -363,11 +344,16 @@ export default function TeamMemberList({
                           <>
                             <span aria-hidden="true">•</span>
                             <span>
-                              {formatNumber(member.aiUsage.tokens)} Token
+                              {formatNumber(member.aiUsage.tokens)}{" "}
+                              {t("team.tokens", {
+                                count: formatNumber(member.aiUsage.tokens),
+                              })}
                             </span>
                             <span aria-hidden="true">•</span>
                             <span>
-                              {member.aiUsage.sessions} {t("team.sessions", { count: member.aiUsage.sessions })}
+                              {t("team.sessions", {
+                                count: member.aiUsage.sessions,
+                              })}
                             </span>
                           </>
                         )}
@@ -377,7 +363,7 @@ export default function TeamMemberList({
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                           <Button
-                            aria-label={`${member.name} ${t("team.moreActions")}`}
+                            aria-label={t("team.moreActions")}
                             size="icon"
                             type="button"
                             variant="ghost"
@@ -399,7 +385,7 @@ export default function TeamMemberList({
                               onSelect={() =>
                                 handleAction(
                                   () => onPromote(member.id),
-                                  member.id
+                                  member.id,
                                 )
                               }
                             >
@@ -412,7 +398,7 @@ export default function TeamMemberList({
                               onSelect={() =>
                                 handleAction(
                                   () => onDemote(member.id),
-                                  member.id
+                                  member.id,
                                 )
                               }
                             >
@@ -425,7 +411,7 @@ export default function TeamMemberList({
                               onSelect={() =>
                                 handleAction(
                                   () => onResendInvite(member.id),
-                                  member.id
+                                  member.id,
                                 )
                               }
                             >
@@ -433,7 +419,7 @@ export default function TeamMemberList({
                               {t("team.resendInvite")}
                             </DropdownMenuItem>
                           )}
-                          {member.role !== "viewer" && (
+                          {member.role !== "viewer" && member.role !== "guest" && (
                             <DropdownMenuSeparator />
                           )}
                           {onRemove && (
@@ -442,7 +428,7 @@ export default function TeamMemberList({
                                 onSelect={() =>
                                   handleAction(
                                     () => onRemove(member.id),
-                                    member.id
+                                    member.id,
                                   )
                                 }
                                 variant="destructive"
@@ -458,11 +444,11 @@ export default function TeamMemberList({
                   </div>
                   {idx < filteredMembers.length - 1 && <Separator />}
                 </div>
-              );
+              )
             })}
           </div>
         )}
       </CardContent>
     </Card>
-  );
-}
+  )
+}

package/src/hooks/__tests__/use-notifications.test.ts

@@ -0,0 +1,41 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { describe, it, expect } from 'vitest'
+import { parseNotificationEvent } from '../use-notifications'
+
+describe('parseNotificationEvent', () => {
+  it('解析合法 notification 事件', () => {
+    const raw = JSON.stringify({
+      type: 'CUSTOM',
+      name: 'notifications',
+      value: {
+        kind: 'notification',
+        notification: {
+          id: 'n1',
+          category: 'team',
+          type: 'team.invite_request',
+          title: 't',
+          body: null,
+          link: null,
+          readAt: null,
+          createdAt: '2026-08-26T00:00:00Z',
+        },
+      },
+    })
+    const parsed = parseNotificationEvent(raw)
+    expect(parsed?.kind).toBe('notification')
+  })
+
+  it('解析 unread_snapshot 事件', () => {
+    const raw = JSON.stringify({ type: 'CUSTOM', name: 'notifications', value: { kind: 'unread_snapshot', count: 5 } })
+    expect(parseNotificationEvent(raw)).toEqual({ kind: 'unread_snapshot', count: 5 })
+  })
+
+  it('非法 JSON 返回 null', () => {
+    expect(parseNotificationEvent('not json')).toBeNull()
+  })
+
+  it('非 notifications 通道的 CUSTOM 事件返回 null', () => {
+    const raw = JSON.stringify({ type: 'CUSTOM', name: 'other', value: { kind: 'unread_snapshot', count: 5 } })
+    expect(parseNotificationEvent(raw)).toBeNull()
+  })
+})

package/src/hooks/use-notifications.ts

@@ -0,0 +1,119 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { useCallback, useEffect } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useRouter } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { useTranslation } from 'react-i18next'
+import type { NotificationSseValue, NotificationItem } from '@allbluecn/shared'
+import { isInDndWindow } from '@allbluecn/shared'
+import { getUnreadCountFn, getNotificationPreferencesFn } from '@/server/serverFns/notifications'
+
+export const NOTIFICATION_LIST_KEY = ['notifications', 'list'] as const
+export const NOTIFICATION_UNREAD_KEY = ['notifications', 'unread'] as const
+export const NOTIFICATION_PREFERENCES_KEY = ['notifications', 'preferences'] as const
+
+export function parseNotificationEvent(raw: string): NotificationSseValue | null {
+  try {
+    const parsed = JSON.parse(raw)
+    if (parsed?.type === 'CUSTOM' && parsed?.name === 'notifications' && parsed?.value?.kind) {
+      return parsed.value as NotificationSseValue
+    }
+    return null
+  } catch {
+    return null
+  }
+}
+
+function toastNotification(item: NotificationItem, t: (key: string) => string, navigate: (opts: { to: string }) => void) {
+  toast(item.title, {
+    description: item.body ?? undefined,
+    action: item.link
+      ? {
+          label: t('actions.view'),
+          onClick: () => {
+            navigate({ to: item.link! })
+          },
+        }
+      : undefined,
+  })
+}
+
+let source: EventSource | null = null
+let refCount = 0
+
+export function useNotifications(options?: { toastEnabled?: boolean }) {
+  const { t } = useTranslation('notifications')
+  const queryClient = useQueryClient()
+  const router = useRouter()
+  const toastEnabled = options?.toastEnabled !== false
+
+  const { data: unreadData } = useQuery({
+    queryKey: NOTIFICATION_UNREAD_KEY,
+    queryFn: () => getUnreadCountFn({ data: {} }),
+  })
+
+  const unreadCount = unreadData?.count ?? 0
+
+  // N2 修复：预加载偏好数据到缓存，确保 DND 判断在任何页面均可用
+  useQuery({
+    queryKey: NOTIFICATION_PREFERENCES_KEY,
+    queryFn: () => getNotificationPreferencesFn({ data: {} }),
+    staleTime: 60000,
+  })
+
+  const setUnreadCount = useCallback(
+    (updater: number | ((c: number) => number)) => {
+      if (typeof updater === 'function') {
+        queryClient.setQueryData(NOTIFICATION_UNREAD_KEY, (old) => {
+          const count = (old as { count?: number } | undefined)?.count ?? 0
+          return { count: updater(count) }
+        })
+      } else {
+        queryClient.setQueryData(NOTIFICATION_UNREAD_KEY, { count: updater })
+      }
+    },
+    [queryClient]
+  )
+
+  useEffect(() => {
+    refCount++
+    if (!source) {
+      source = new EventSource('/api/notifications/stream')
+    }
+    const es = source
+
+    const handleMessage = (event: MessageEvent) => {
+      const value = parseNotificationEvent(event.data)
+      if (!value) return
+      if (value.kind === 'unread_snapshot') {
+        queryClient.setQueryData(NOTIFICATION_UNREAD_KEY, { count: value.count })
+      } else {
+        queryClient.setQueryData(NOTIFICATION_UNREAD_KEY, (old) => {
+          const count = (old as { count?: number } | undefined)?.count ?? 0
+          return { count: count + 1 }
+        })
+        queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
+        if (toastEnabled) {
+          const prefs = queryClient.getQueryData<{ dndEnabled: boolean; dndStart: string; dndEnd: string }>(NOTIFICATION_PREFERENCES_KEY)
+          const now = new Date()
+          const hhmm = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
+          const inDnd = !!prefs && isInDndWindow(prefs, hhmm)
+          if (!inDnd) toastNotification(value.notification, t, (opts) => router.navigate({ to: opts.to as never }))
+        }
+      }
+    }
+
+    es.addEventListener('message', handleMessage as EventListener)
+    return () => {
+      es.removeEventListener('message', handleMessage as EventListener)
+      refCount--
+      if (refCount === 0) {
+        source?.close()
+        source = null
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toastEnabled, t, router])
+
+  return { unreadCount, setUnreadCount }
+}

package/src/lib/app-version.ts

@@ -15,6 +15,9 @@
 // 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/>.
 
-export const APP_VERSION = '0.5.0'
+// 版本号由 vite.shared.ts 构建时注入（__APP_VERSION__），无需运行时读取 package.json
+declare const __APP_VERSION__: string
+const APP_VERSION: string = __APP_VERSION__
+
 export const APP_VERSION_DISPLAY = `v${APP_VERSION}`
 export const APP_FULL_VERSION = `AllBlue v${APP_VERSION}`

package/src/lib/auth/auth.config.ts

@@ -139,8 +139,8 @@ export const authConfig: StartAuthJSConfig = {
         // 安全提取 IP/UA（start-authjs 传递的 request 类型可能不标准，失败不阻塞登录）
         let ip: string | null = null
         let userAgent: string | null = null
+        const headers = request?.headers as { get?: (name: string) => string | null } | undefined
         try {
-          const headers = request?.headers as { get?: (name: string) => string | null } | undefined
           if (headers && typeof headers.get === 'function') {
             ip = getClientIp(request as Request)
             userAgent = headers.get('user-agent') || null
@@ -194,6 +194,22 @@ export const authConfig: StartAuthJSConfig = {
 
         const remember = creds.remember === 'true'
         const stayLoggedIn = creds.stayLoggedIn === 'true'
+
+        const isNewDevice = (() => {
+          const cookieHeader = headers?.get?.('cookie') || ''
+          return !cookieHeader.includes('allblue_device_seen=')
+        })()
+        void (async () => {
+          if (!isNewDevice) return
+          const { createNotification } = await import('@/server/notifications/notification-service')
+          await createNotification({
+            userId: user.id,
+            category: 'security',
+            type: 'security.new_device_login',
+            title: '检测到新设备登录',
+            body: `登录时间 ${new Date().toLocaleString('zh-CN')}`,
+          })
+        })()
         return {
           id: user.id,
           email: user.email,

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

@@ -1,5 +1,6 @@
 export interface SdkVersion {
   name: string
+  displayName?: string
   version: string
   lastUpdate: string
   source: string