@allbluecn/web-app 0.4.16 → 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/components/story/display/__tests__/display-dropdown.test.tsx

@@ -29,10 +29,6 @@ vi.mock("@/components/billing/use-feature", () => ({
   useFeature: vi.fn(),
 }));
 
-vi.mock("@/components/billing/upgrade-prompt", () => ({
-  UpgradePrompt: () => <div data-testid="upgrade-prompt">升级提示</div>,
-}));
-
 import { useFeature } from "@/components/billing/use-feature";
 
 const mockUseFeature = useFeature as ReturnType<typeof vi.fn>;
@@ -214,7 +210,28 @@ describe("DisplayDropdown", () => {
     expect(patch.showEmptyGroups).toBe(true);
   });
 
-  it("大分页未解锁——500/1000 禁用且点击不触发 onChange", () => {
+  it("OSS 环境——只显示 100/200，不显示 500/1000", () => {
+    mockUseFeature.mockReturnValue({ enabled: false, loading: false });
+    const onChange = vi.fn();
+    renderWithTooltip(<DisplayDropdown filters={makeFilters()} onChange={onChange} layout="list" {...viewProps} />);
+    fireEvent.click(screen.getByRole("button", { name: /显示/ }));
+    const options = document.querySelector('[data-section="options"]') as HTMLElement;
+    const sizeButtons = within(options).getAllByRole("button").filter((b) => /^\d+$/.test(b.textContent ?? ""));
+    const labels = sizeButtons.map((b) => b.textContent);
+    expect(labels).toContain("100");
+    expect(labels).toContain("200");
+    expect(labels).not.toContain("500");
+    expect(labels).not.toContain("1000");
+  });
+
+  it("Pro 环境且 free 用户——500/1000 锁定但可见", async () => {
+    // mock implementedModules.billing = true（Pro 环境）
+    const modules = await import("@/plugins/modules.gen");
+    vi.spyOn(modules, "implementedModules", "get").mockReturnValue({
+      ...modules.implementedModules,
+      billing: true,
+    } as any);
+
     mockUseFeature.mockReturnValue({ enabled: false, loading: false });
     const onChange = vi.fn();
     renderWithTooltip(<DisplayDropdown filters={makeFilters()} onChange={onChange} layout="list" {...viewProps} />);
@@ -229,10 +246,16 @@ describe("DisplayDropdown", () => {
     expect(btn1000).toBeDisabled();
     fireEvent.click(btn500 as HTMLElement);
     expect(onChange).not.toHaveBeenCalled();
-    expect(screen.getByTestId("upgrade-prompt")).toBeInTheDocument();
+    expect(screen.queryByTestId("upgrade-prompt")).not.toBeInTheDocument();
   });
 
-  it("大分页已解锁——点击 500 触发 onChange({ pageSize: 500 })", () => {
+  it("Pro 环境且 pro 用户——点击 500 触发 onChange", async () => {
+    const modules = await import("@/plugins/modules.gen");
+    vi.spyOn(modules, "implementedModules", "get").mockReturnValue({
+      ...modules.implementedModules,
+      billing: true,
+    } as any);
+
     mockUseFeature.mockReturnValue({ enabled: true, loading: false });
     const onChange = vi.fn();
     renderWithTooltip(<DisplayDropdown filters={makeFilters()} onChange={onChange} layout="list" {...viewProps} />);

package/src/components/story/display/display-dropdown.tsx

@@ -22,7 +22,6 @@ import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useFeature } from "@/components/billing/use-feature";
-import { UpgradePrompt } from "@/components/billing/upgrade-prompt";
 import {
   Popover,
   PopoverContent,
@@ -34,6 +33,7 @@ import type { SavedView, ViewProjectInfo } from "../views/view-types";
 import type { StoryView } from "../views/view-switcher";
 import { DEFAULT_DISPLAY_OPTIONS, GROUP_KEYS, ORDER_KEYS, PAGE_SIZE_OPTIONS, type DisplayOptions, type DisplayProperty, type GroupKey, type OrderDirection, type OrderKey, type PageSize } from "./types";
 import { GROUP_LABELS, ORDER_LABELS, PROPERTY_LABELS, LAYOUT_SUPPORT, LAYOUT_PROPERTIES, GROUP_ICONS, ORDER_ICONS } from "./constants";
+import { implementedModules } from "@/plugins/modules.gen";
 
 /** 分组选项：布局不支持分组时返回空数组；选中特定项目时隐藏"项目"分组 */
 export function getGroupOptions(layout: StoryView, projectId?: string): GroupKey[] {
@@ -377,7 +377,7 @@ function PropertiesSection({ selected, onChange, layout, t }: PropertiesSectionP
   };
 
   return (
-    <div data-section="properties" className="border-t px-3 py-2">
+    <div data-section="properties" className=" px-3 py-2">
       <button
         type="button"
         onClick={() => setCollapsed(!collapsed)}
@@ -432,13 +432,15 @@ function OptionsSection({
   onPageSizeChange,
 }: OptionsSectionProps) {
   const { t } = useTranslation("display");
-  const sizeOptions = PAGE_SIZE_OPTIONS as readonly PageSize[];
+  // OSS 环境（billing 模块未实现）只显示 100/200；Pro 环境显示全部
+  const sizeOptions = implementedModules.billing
+    ? (PAGE_SIZE_OPTIONS as readonly PageSize[])
+    : ([100, 200] as readonly PageSize[]);
   const { enabled: largePageSizeEnabled, loading: largePageSizeLoading } =
     useFeature("largePageSize");
 
   const isPageSizeLocked = (v: PageSize) =>
     v > 200 && !largePageSizeEnabled && !largePageSizeLoading;
-  const showPageSizeUpgrade = !largePageSizeEnabled && !largePageSizeLoading;
 
   return (
     <div data-section="options" className="border-t px-3 py-2">
@@ -484,9 +486,6 @@ function OptionsSection({
             })}
           </div>
         </div>
-        {showPageSizeUpgrade && (
-          <UpgradePrompt feature="largePageSize" />
-        )}
       </div>
     </div>
   );