@allbluecn/web-app 0.4.22 → 0.5.0

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

@@ -12,7 +12,6 @@ import {
   RefreshCw,
   Trash2,
   X,
-  UserPlus,
 } from "lucide-react"
 import { useMemo, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -82,6 +81,8 @@ export interface TeamInvitation {
   expiresAt?: Date
   createdAt: Date
   acceptedAt?: Date
+  joinRequestId?: string
+  joinRequestStatus?: "pending" | "approved" | "rejected" | "invalidated"
 }
 
 export interface TeamJoinRequestItem {
@@ -109,6 +110,8 @@ export interface TeamInvitationsProps {
   onApproveLink?: (invitationId: string, role: "admin" | "member" | "viewer") => Promise<void>
   onApproveRequest?: (requestId: string, role: "admin" | "member" | "viewer") => Promise<void>
   onRejectRequest?: (requestId: string) => Promise<void>
+  onDeleteInvitation?: (invitationId: string) => Promise<void>
+  onDeleteRequest?: (requestId: string) => Promise<void>
   onClearExpired?: () => Promise<void>
   className?: string
   allowDirectLinks?: boolean
@@ -135,6 +138,18 @@ function getInvitationBadge(
   invitation: TeamInvitation,
   t: (key: string) => string,
 ) {
+  if (invitation.joinRequestId) {
+    switch (invitation.joinRequestStatus) {
+      case "pending":
+        return <Badge variant="default">{t("team.status.pendingApproval")}</Badge>
+      case "approved":
+        return <Badge variant="default">{t("team.joinRequests.requestApproved")}</Badge>
+      case "rejected":
+        return <Badge variant="destructive">{t("team.joinRequests.requestRejected")}</Badge>
+      case "invalidated":
+        return <Badge variant="outline">{t("team.joinRequests.requestInvalidated")}</Badge>
+    }
+  }
   switch (invitation.status) {
     case "pending":
       return <Badge variant="secondary">{t("team.status.pending")}</Badge>
@@ -169,6 +184,8 @@ export default function TeamInvitations({
   onApproveLink,
   onApproveRequest,
   onRejectRequest,
+  onDeleteInvitation,
+  onDeleteRequest,
   onClearExpired,
   className,
   allowDirectLinks = true,
@@ -213,11 +230,32 @@ export default function TeamInvitations({
       (!!activeLinkInvitation.expiresAt && new Date(activeLinkInvitation.expiresAt) < new Date())
     )
 
-  const historyInvitations = invitations.filter(
-    (inv) =>
-      !inv.link ||
-      ["accepted", "pending_approval", "revoked", "pending"].includes(inv.status),
-  )
+  const joinRequestInvitations: TeamInvitation[] = joinRequests.map((req) => ({
+    id: `jr-${req.id}`,
+    channel: "link",
+    status:
+      req.status === "pending"
+        ? "pending_approval"
+        : req.status === "approved"
+          ? "accepted"
+          : "revoked",
+    joinRequestId: req.id,
+    joinRequestStatus: req.status,
+    applicantEmail: req.email,
+    role:
+      req.status === "approved"
+        ? req.seatType === "guest"
+          ? "viewer"
+          : "member"
+        : undefined,
+    invitedBy: { name: "", email: "" },
+    createdAt: req.createdAt,
+  }))
+
+  const historyInvitations = [
+    ...invitations.filter((inv) => inv.channel === "email"),
+    ...joinRequestInvitations,
+  ].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
 
   useEffect(() => {
     if (freshLink && activeLinkInvitation?.id === freshLink.id && activeLinkInvitation !== freshLink) {
@@ -228,12 +266,14 @@ export default function TeamInvitations({
   const pendingInvitations = invitations.filter(
     (i) => i.status === "pending" || i.status === "pending_approval",
   )
-  const approvalPendingInvitations = invitations.filter(
-    (i) => i.status === "pending_approval",
-  )
-  const acceptedInvitations = invitations.filter(
-    (i) => i.status === "accepted",
-  )
+  const approvalPendingInvitations = [
+    ...invitations.filter((i) => i.status === "pending_approval"),
+    ...joinRequests.filter((r) => r.status === "pending"),
+  ]
+  const acceptedInvitations = [
+    ...invitations.filter((i) => i.status === "accepted"),
+    ...joinRequests.filter((r) => r.status === "approved"),
+  ]
 
   const handleRefreshLink = async () => {
     setLinkRefreshing(true)
@@ -317,12 +357,16 @@ export default function TeamInvitations({
   }
 
   const handleApprove = async (
-    invitationId: string,
+    invitation: TeamInvitation,
     role: "admin" | "member" | "viewer",
   ) => {
-    setActionLoading(invitationId)
+    setActionLoading(invitation.id)
     try {
-      await onApproveLink?.(invitationId, role)
+      if (invitation.joinRequestId) {
+        await onApproveRequest?.(invitation.joinRequestId, role)
+      } else {
+        await onApproveLink?.(invitation.id, role)
+      }
     } finally {
       setActionLoading(null)
     }
@@ -476,98 +520,6 @@ export default function TeamInvitations({
             </div>
           )}
 
-          {joinRequests.length > 0 && (
-            <div className="flex flex-col gap-3 rounded-lg border bg-muted/30 p-4">
-              <div className="flex items-center gap-2">
-                <UserPlus className="size-4" />
-                <h4 className="font-medium text-sm">{t("team.joinRequests.title")}</h4>
-                <span className="text-muted-foreground text-xs">
-                  {t("team.joinRequests.description")}
-                </span>
-              </div>
-              <div className="flex flex-col gap-3">
-                {joinRequests.map((req) => (
-                  <div className="flex flex-col gap-2 rounded-lg border bg-card p-3" key={req.id}>
-                    <div className="flex items-center justify-between gap-3">
-                      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
-                        <span className="font-medium text-sm">{req.applicantName || req.email}</span>
-                        <Badge variant="outline" className="text-xs">
-                          {t("team.joinRequests.sourceLink")}
-                        </Badge>
-                        {req.status === "pending" && (
-                          <Badge variant="default">{t("team.status.pendingApproval")}</Badge>
-                        )}
-                        {req.status === "approved" && (
-                          <Badge variant="default">{t("team.joinRequests.requestApproved")}</Badge>
-                        )}
-                        {req.status === "rejected" && (
-                          <Badge variant="destructive">{t("team.joinRequests.requestRejected")}</Badge>
-                        )}
-                        {req.status === "invalidated" && (
-                          <Badge variant="outline">{t("team.joinRequests.requestInvalidated")}</Badge>
-                        )}
-                      </div>
-                      {req.status === "pending" && onApproveRequest && (
-                        <div className="flex items-center gap-2">
-                          <Select
-                            value={approveRoles[req.id] ?? "member"}
-                            onValueChange={(value: "admin" | "member" | "viewer") =>
-                              setApproveRoles((prev) => ({ ...prev, [req.id]: value }))
-                            }
-                          >
-                            <SelectTrigger className="h-8 w-24" size="sm">
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="member">{t("team.role.member")}</SelectItem>
-                              <SelectItem value="admin">{t("team.role.admin")}</SelectItem>
-                              <SelectItem value="viewer">{t("team.role.viewer")}</SelectItem>
-                            </SelectContent>
-                          </Select>
-                          <Button
-                            disabled={actionLoading === req.id}
-                            onClick={() =>
-                              handleAction(async () => {
-                                await onApproveRequest(req.id, approveRoles[req.id] ?? "member")
-                              }, req.id)
-                            }
-                            size="sm"
-                            type="button"
-                          >
-                            {actionLoading === req.id ? (
-                              <Loader2 className="size-4 animate-spin" />
-                            ) : (
-                              <Check className="size-4" />
-                            )}
-                            {t("team.invite.approve")}
-                          </Button>
-                          <Button
-                            disabled={actionLoading === req.id}
-                            onClick={() =>
-                              handleAction(async () => {
-                                await onRejectRequest?.(req.id)
-                              }, req.id)
-                            }
-                            size="sm"
-                            type="button"
-                            variant="ghost"
-                          >
-                            <X className="size-4" />
-                            {t("team.joinRequests.reject")}
-                          </Button>
-                        </div>
-                      )}
-                    </div>
-                    <div className="text-muted-foreground text-xs">
-                      {t("team.joinRequests.appliedAt")}{" "}
-                      {formatDate(req.createdAt, timezone, "MMM d, yyyy")}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
           <div className="flex flex-col gap-3 rounded-lg border bg-muted/30 p-4">
             <div className="flex items-center gap-2">
               <Mail className="size-4" />
@@ -753,15 +705,26 @@ export default function TeamInvitations({
                             )}
                           </div>
                           <div className="flex flex-wrap items-center gap-2 text-muted-foreground text-xs">
-                            <span>
-                              {t("team.invite.invitedAt")}{" "}
-                              {invitation.invitedBy.name}{" "}
-                              {formatDate(
-                                invitation.createdAt,
-                                timezone,
-                                "MMM d, yyyy",
-                              )}
-                            </span>
+                            {invitation.joinRequestId ? (
+                              <span>
+                                {t("team.joinRequests.appliedAt")}{" "}
+                                {formatDate(
+                                  invitation.createdAt,
+                                  timezone,
+                                  "MMM d, yyyy",
+                                )}
+                              </span>
+                            ) : (
+                              <span>
+                                {t("team.invite.invitedAt")}{" "}
+                                {invitation.invitedBy.name}{" "}
+                                {formatDate(
+                                  invitation.createdAt,
+                                  timezone,
+                                  "MMM d, yyyy",
+                                )}
+                              </span>
+                            )}
                             {invitation.expiresAt && (
                               <>
                                 <span aria-hidden="true">•</span>
@@ -815,7 +778,7 @@ export default function TeamInvitations({
                             <Button
                               disabled={actionLoading === invitation.id}
                               onClick={() =>
-                                handleApprove(invitation.id, approveRoles[invitation.id] ?? "member")
+                                handleApprove(invitation, approveRoles[invitation.id] ?? "member")
                               }
                               size="sm"
                               type="button"
@@ -846,22 +809,39 @@ export default function TeamInvitations({
                                 <DropdownMenuItem
                                   onSelect={() =>
                                     handleAction(
-                                      () => onRevoke!(invitation.id),
+                                      () =>
+                                        invitation.joinRequestId
+                                          ? onRejectRequest!(invitation.joinRequestId!)
+                                          : onRevoke!(invitation.id),
                                       invitation.id,
                                     )
                                   }
                                   variant="destructive"
                                 >
-                                  <Trash2 className="size-4" />
-                                  {t("team.revoke")}
+                                  {invitation.joinRequestId ? (
+                                    <X className="size-4" />
+                                  ) : (
+                                    <Trash2 className="size-4" />
+                                  )}
+                                  {invitation.joinRequestId
+                                    ? t("team.joinRequests.reject")
+                                    : t("team.revoke")}
                                 </DropdownMenuItem>
                               </DropdownMenuContent>
                             </DropdownMenu>
                           </div>
                         )}
-                        {!(invitation.status === "pending_approval" && onApproveLink) && (() => {
-                          const canResend = ["pending", "expired"].includes(invitation.status) && onResend
-                          const canRevoke = onRevoke
+                        {!(invitation.status === "pending_approval" && onApproveLink) &&
+                          (() => {
+                          const canResend = !invitation.joinRequestId && ["pending", "expired"].includes(invitation.status) && onResend
+                          const canRevoke =
+                            !invitation.joinRequestId &&
+                            ["pending", "pending_approval"].includes(invitation.status) &&
+                            onRevoke
+                          const canDelete = invitation.joinRequestId
+                            ? !!onDeleteRequest
+                            : !!onDeleteInvitation
+                          if (!canResend && !canRevoke && !canDelete) return null
                           return (
                             <DropdownMenu>
                               <DropdownMenuTrigger asChild>
@@ -913,21 +893,32 @@ export default function TeamInvitations({
                                     </DropdownMenuItem>
                                   </>
                                 )}
+                                {canDelete && (
+                                  <>
+                                    {(canResend || canRevoke) && <DropdownMenuSeparator />}
+                                    <DropdownMenuItem
+                                      onSelect={() =>
+                                        handleAction(
+                                          () =>
+                                            invitation.joinRequestId
+                                              ? onDeleteRequest!(invitation.joinRequestId!)
+                                              : onDeleteInvitation!(invitation.id),
+                                          invitation.id,
+                                        )
+                                      }
+                                      variant="destructive"
+                                    >
+                                      <Trash2 className="size-4" />
+                                      {t("team.invite.deleteRecord")}
+                                    </DropdownMenuItem>
+                                  </>
+                                )}
                               </DropdownMenuContent>
                             </DropdownMenu>
                           )
                         })()}
                       </div>
-                     {invitation.link &&
-                       (invitation.status === "expired" ||
-                         invitation.status === "revoked") && (
-                       <div className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
-                         <code className="wrap-break-word truncate text-wrap text-xs">
-                           {invitation.link}
-                         </code>
-                       </div>
-                     )}
-                      {invitation.status === "pending_approval" && onApproveLink && (
+                       {invitation.status === "pending_approval" && onApproveLink && (
                         <div className="xl:hidden flex justify-end items-center gap-2">
                           <Select
                             value={approveRoles[invitation.id] ?? "member"}
@@ -950,60 +941,69 @@ export default function TeamInvitations({
                              </SelectItem>
                            </SelectContent>
                          </Select>
-                         <Button
-                           disabled={actionLoading === invitation.id}
-                           onClick={() =>
-                             handleApprove(invitation.id, approveRoles[invitation.id] ?? "member")
-                           }
-                           size="sm"
-                           type="button"
-                         >
-                           {actionLoading === invitation.id ? (
-                             <Loader2 className="size-4 animate-spin" />
-                           ) : (
-                             <Check className="size-4" />
-                           )}
-                           {t("team.invite.approve")}
-                         </Button>
-                         <DropdownMenu>
-                           <DropdownMenuTrigger asChild>
-                             <Button
-                               aria-label="More options"
-                               size="icon"
-                               type="button"
-                               variant="ghost"
-                             >
-                               <X className="size-4" />
-                             </Button>
-                           </DropdownMenuTrigger>
-                           <DropdownMenuContent
-                             align="end"
-                             collisionPadding={8}
-                             sideOffset={4}
-                           >
-                             <DropdownMenuItem
-                               onSelect={() =>
-                                 handleAction(
-                                   () => onRevoke!(invitation.id),
-                                   invitation.id,
-                                 )
-                               }
-                               variant="destructive"
-                             >
-                               <Trash2 className="size-4" />
-                               {t("team.revoke")}
-                             </DropdownMenuItem>
-                           </DropdownMenuContent>
-                         </DropdownMenu>
-                       </div>
-                     )}
+                          <Button
+                            disabled={actionLoading === invitation.id}
+                            onClick={() =>
+                              handleApprove(invitation, approveRoles[invitation.id] ?? "member")
+                            }
+                            size="sm"
+                            type="button"
+                          >
+                            {actionLoading === invitation.id ? (
+                              <Loader2 className="size-4 animate-spin" />
+                            ) : (
+                              <Check className="size-4" />
+                            )}
+                            {t("team.invite.approve")}
+                          </Button>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                aria-label="More options"
+                                size="icon"
+                                type="button"
+                                variant="ghost"
+                              >
+                                <X className="size-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent
+                              align="end"
+                              collisionPadding={8}
+                              sideOffset={4}
+                            >
+                              <DropdownMenuItem
+                                onSelect={() =>
+                                  handleAction(
+                                    () =>
+                                      invitation.joinRequestId
+                                        ? onRejectRequest!(invitation.joinRequestId!)
+                                        : onRevoke!(invitation.id),
+                                    invitation.id,
+                                  )
+                                }
+                                variant="destructive"
+                              >
+                                {invitation.joinRequestId ? (
+                                  <X className="size-4" />
+                                ) : (
+                                  <Trash2 className="size-4" />
+                                )}
+                                {invitation.joinRequestId
+                                  ? t("team.joinRequests.reject")
+                                  : t("team.revoke")}
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                      )}
                    </div>
                 ))}
               </div>
             </>
           )}
 
-          {invitations.length === 0 && (
+          {historyInvitations.length === 0 && (
             <Empty>
               <EmptyHeader>
                 <EmptyMedia variant="icon">

package/src/components/shared/wave-physics-loader.tsx

@@ -0,0 +1,155 @@
+// 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 { useMemo } from "react";
+
+/**
+ * 波形弹跳加载动画（纯 CSS keyframes 版）。
+ *
+ * 性能关键：所有动画只用 transform / opacity（合成器线程驱动，主线程繁忙不掉帧），
+ * 禁用 height/background-color 等布局属性。柱子视觉高度 = scaleY(最大高)，明暗 =
+ * 柱色 opacity（深色柱叠浅底 ≈ 原版 zinc-200→zinc-800 插值）。
+ */
+
+const NUM_BARS = 15;
+const BAR_W = 12;
+const BAR_TOTAL_W = BAR_W + 8; // 12 + 8 gap
+const NUM_FRAMES = 60; // 关键帧间由浏览器逐帧插值，60 个定义点足够平滑
+const B = 4;
+
+type WaveTheme = "light" | "dark";
+const MAX_BOUNCE = 60;
+const BASE_H = 16;
+const WAVE_PEAK = 48;
+const MAX_H = BASE_H + WAVE_PEAK; // 64，柱子布局高度（transform 不影响布局）
+const MIN_OPACITY = 0.125; // opacity 下限 ≈ 原版最浅色 zinc-200 叠白底的等效值
+const DURATION_S = 4;
+
+interface WaveKeyframes {
+  css: string;
+  barNames: string[];
+  ballName: string;
+}
+
+/** 物理曲线 → scaleY/opacity/translate keyframes（合成器友好属性） */
+function buildKeyframes(theme: WaveTheme): WaveKeyframes {
+  const suffix = theme === "dark" ? "d" : "l";
+  const barNames = Array.from({ length: NUM_BARS }, (_, i) => `wpb-h-${suffix}-${i}`);
+  const ballName = `wpb-ball-${suffix}`;
+  const lines: string[] = [];
+
+  for (let i = 0; i < NUM_BARS; i++) {
+    const parts: string[] = [];
+    for (let k = 0; k < NUM_FRAMES; k++) {
+      const t = k / (NUM_FRAMES - 1);
+      const pct = ((k / (NUM_FRAMES - 1)) * 100).toFixed(4);
+      const xFrac = t < 0.5 ? t / 0.5 : (1 - t) / 0.5;
+      const ballIdx = xFrac * (NUM_BARS - 1);
+      const f = (xFrac * B) % 1;
+      const bounceH = 4 * f * (1 - f);
+      const heightFactor = Math.max(0, 1 - bounceH * 2);
+      const dist = Math.abs(i - ballIdx);
+      const waveVal = dist < 3 ? Math.cos((dist / 3) * (Math.PI / 2)) : 0;
+      let indent = 0;
+      if (dist < 1.5) {
+        indent = Math.cos((dist / 1.5) * (Math.PI / 2)) * heightFactor * 20;
+      }
+      const barH = Math.max(4, BASE_H + waveVal * WAVE_PEAK - indent);
+      const scaleY = barH / MAX_H;
+      // 深色柱 + opacity：亮起程度等价原版 zinc-200→zinc-800 颜色插值
+      const opacity = MIN_OPACITY + waveVal * (1 - MIN_OPACITY);
+      parts.push(`${pct}%{transform:scaleY(${scaleY.toFixed(4)});opacity:${opacity.toFixed(3)}}`);
+    }
+    lines.push(`@keyframes ${barNames[i]}{${parts.join("")}}`);
+  }
+
+  const ballParts: string[] = [];
+  for (let k = 0; k < NUM_FRAMES; k++) {
+    const t = k / (NUM_FRAMES - 1);
+    const pct = ((k / (NUM_FRAMES - 1)) * 100).toFixed(4);
+    const xFrac = t < 0.5 ? t / 0.5 : (1 - t) / 0.5;
+    const ballIdx = xFrac * (NUM_BARS - 1);
+    let bounceF = (xFrac * B) % 1;
+    if (xFrac === 1 || xFrac === 0) bounceF = 0;
+    const bounceH = 4 * bounceF * (1 - bounceF);
+    const heightFactor = Math.max(0, 1 - bounceH * 2);
+    const ballIndent = heightFactor * 20;
+    const ballY = BASE_H + WAVE_PEAK - ballIndent + bounceH * MAX_BOUNCE;
+    const squish = heightFactor;
+    ballParts.push(
+      `${pct}%{transform:translate(${(ballIdx * BAR_TOTAL_W).toFixed(2)}px,-${ballY.toFixed(2)}px) scale(${(1 + squish * 0.25).toFixed(3)},${(1 - squish * 0.3).toFixed(3)})}`,
+    );
+  }
+  lines.push(`@keyframes ${ballName}{${ballParts.join("")}}`);
+
+  return { css: lines.join(""), barNames, ballName };
+}
+
+export function WavePhysicsLoader() {
+  // light/dark 各烘焙一套 keyframes，用 html.dark 切换 animation-name：
+  // next-themes 的 SSR 内联脚本在渲染前写好 html class，首帧即正确主题、无闪烁无重置
+  const light = useMemo(() => buildKeyframes("light"), []);
+  const dark = useMemo(() => buildKeyframes("dark"), []);
+
+  const css = useMemo(() => {
+    const lines = [light.css, dark.css];
+    for (let i = 0; i < NUM_BARS; i++) {
+      lines.push(
+        `.wpb-b-${i}{animation:${light.barNames[i]} ${DURATION_S}s linear infinite}`,
+        `html.dark .wpb-b-${i}{animation-name:${dark.barNames[i]}}`,
+      );
+    }
+    lines.push(
+      `.wpb-ball{animation:${light.ballName} ${DURATION_S}s linear infinite}`,
+      `html.dark .wpb-ball{animation-name:${dark.ballName}}`,
+    );
+    return `html{--wpb-bar-color:rgb(39 39 42);--wpb-ball-color:${"#18181b"}}html.dark{--wpb-bar-color:rgb(228 228 231);--wpb-ball-color:${"#ffffff"}}${lines.join("")}`;
+  }, [light, dark]);
+
+  return (
+    <div className="relative flex w-full flex-col items-center justify-center scale-[0.6] sm:scale-75 md:scale-100">
+      <style dangerouslySetInnerHTML={{ __html: css }} />
+      {/* w-[292px]：15 根柱 × 20px 间距的几何总宽，标准刻度类无对应值 */}
+      <div className="relative flex h-48 w-[292px] items-end justify-start space-x-2">
+        {Array.from({ length: NUM_BARS }, (_, i) => (
+          <div
+            key={i}
+            className={`wpb-b-${i} will-change-transform`}
+            style={{
+              width: BAR_W,
+              height: MAX_H,
+              borderRadius: 6,
+              transformOrigin: "bottom",
+              flexShrink: 0,
+              backgroundColor: "var(--wpb-bar-color)",
+            }}
+          />
+        ))}
+        <div
+          className="wpb-ball absolute bottom-0 left-0 z-10 shadow-sm will-change-transform"
+          style={{
+            width: BAR_W,
+            height: BAR_W,
+            borderRadius: "50%",
+            transformOrigin: "bottom center",
+            backgroundColor: "var(--wpb-ball-color)",
+          }}
+        />
+      </div>
+    </div>
+  );
+}