@allbluecn/web-app 0.9.5 → 0.10.0

package/src/components/workspace/workspace-project-list.tsx

@@ -0,0 +1,129 @@
+// 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 { Link } from "@tanstack/react-router";
+import { FolderKanban, Plus, Users, Box } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
+import { CreateProjectDialog } from "@/components/project/create-project-dialog";
+import { m } from "@/paraglide/messages.js";
+import { useState } from "react";
+
+interface WorkspaceProject {
+  id: string;
+  name: string;
+  description: string | null;
+  icon: string;
+  updatedAt: Date;
+  _count: { members: number };
+}
+
+interface WorkspaceProjectListProps {
+  projects: WorkspaceProject[];
+  workspaceId: string;
+  workspaceName: string;
+}
+
+export function WorkspaceProjectList({ projects, workspaceId, workspaceName }: WorkspaceProjectListProps) {
+  const [createOpen, setCreateOpen] = useState(false);
+
+  if (projects.length === 0) {
+    return (
+      <div>
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <FolderKanban className="size-4 text-muted-foreground" />
+            <h2 className="text-base font-semibold">{m.workspace_detail_projects()}</h2>
+          </div>
+          <Button onClick={() => setCreateOpen(true)} size="sm">
+            <Plus className="size-4" />
+            {m.workspace_detail_createProject()}
+          </Button>
+        </div>
+        <Card className="flex flex-col items-center justify-center gap-4 p-12 text-center">
+          <div className="flex size-14 items-center justify-center rounded-full bg-muted">
+            <Box className="size-7 text-muted-foreground" />
+          </div>
+          <div>
+            <h3 className="text-lg font-medium">{m.workspace_detail_emptyProjectsTitle()}</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {m.workspace_detail_emptyProjectsDescription()}
+            </p>
+          </div>
+        </Card>
+        <CreateProjectDialog
+          open={createOpen}
+          onOpenChange={setCreateOpen}
+          defaultWorkspaceId={workspaceId}
+          defaultWorkspaceName={workspaceName}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <FolderKanban className="size-4 text-muted-foreground" />
+          <h2 className="text-base font-semibold">{m.workspace_detail_projects()}</h2>
+        </div>
+        <Button onClick={() => setCreateOpen(true)} size="sm">
+          <Plus className="size-4" />
+          {m.workspace_detail_createProject()}
+        </Button>
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2">
+        {projects.map((project) => (
+          <Card key={project.id} className="group relative p-5 transition-colors hover:bg-accent/40 border rounded-lg">
+            <Link
+              to="/projects/$projectId"
+              params={{ projectId: project.id }}
+              className="absolute inset-0"
+              aria-label={project.name}
+            />
+            <div className="flex-1">
+              <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
+                <LucideIconByName name={project.icon} size={20} />
+              </div>
+              <h3 className="mt-4 font-medium text-lg">{project.name}</h3>
+              <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
+                {project.description || m.workspace_detail_noDescription()}
+              </p>
+            </div>
+            <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
+              <span className="flex items-center gap-1">
+                <Users className="size-3.5" />
+                {project._count.members} {m.workspace_detail_members()}
+              </span>
+              <span className="flex items-center gap-1">
+                <span>{new Intl.DateTimeFormat("zh-CN", { month: "short", day: "numeric" }).format(new Date(project.updatedAt))}</span>
+              </span>
+            </div>
+          </Card>
+        ))}
+      </div>
+      <CreateProjectDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        defaultWorkspaceId={workspaceId}
+        defaultWorkspaceName={workspaceName}
+      />
+    </div>
+  );
+}

package/src/config/sidebar-routes.tsx

@@ -15,6 +15,7 @@
 // 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 { m } from '@/paraglide/messages.js';
 import type React from "react";
 import {
   Sparkles,
@@ -30,91 +31,91 @@ import {
 } from "lucide-react";
 
 export type RouteSubItem = {
-  title: string;
+  title: () => string;
   link: string;
   id: string;
-  badge: string;
+  badge: () => string;
   icon?: React.ReactNode | string;
 };
 
 export type Route = {
   id: string;
-  title: string;
+  title: () => string;
   icon?: React.ReactNode;
   link: string;
-  badge: string;
+  badge: () => string;
   subs?: RouteSubItem[];
 };
 
 export const workspaceRoutes: Route[] = [
   {
     id: "home",
-    title: "nav.workspace",
+    title: m.common_nav_workspace,
     icon: <Sparkles className="size-4" />,
-    badge: " ",
+    badge: () => " ",
     link: "/dashboard",
   },
   {
     id: "chat",
-    title: "nav.chat",
+    title: m.common_nav_chat,
     icon: <BotMessageSquare className="size-4" />,
-    badge: " ",
+    badge: () => " ",
     link: "/chat",
   },
   {
     id: "inspiration",
-    title: "nav.inspiration",
+    title: m.common_nav_inspiration,
     icon: <Lightbulb className="size-4" />,
-    badge: " ",
+    badge: () => " ",
     link: "/inspiration",
   },
   {
     id: "story",
-    title: "nav.story",
+    title: m.common_nav_story,
     icon: <ClipboardList className="size-4" />,
-    badge: " ",
+    badge: () => " ",
     link: "/stories",
   },
   {
     id: "prd",
-    title: "nav.prd",
+    title: m.common_nav_prd,
     icon: <Package2 className="size-4" />,
-    badge: "原型画板",
+    badge: m.common_nav_prototypeBoard,
     link: "/prd",
   },
   {
     id: "design",
-    title: "nav.design",
+    title: m.common_nav_design,
     icon: <PenTool className="size-4" />,
-    badge: " ",
+    badge: () => " ",
     link: "/design",
   },
   {
     id: "testcase",
-    title: "nav.testcase",
+    title: m.common_nav_testcase,
     icon: <FlaskConical className="size-4" />,
-    badge: " ",
+    badge: () => " ",
     link: "/test-cases",
   },
   {
     id: "bug",
-    title: "nav.bug",
+    title: m.common_nav_bug,
     icon: <Bug className="size-4" />,
-    badge: " ",
+    badge: () => " ",
     link: "/bugs",
   },
   {
     id: "acceptance",
-    title: "nav.acceptance",
+    title: m.common_nav_acceptance,
     icon: <CircleCheckBig className="size-4" />,
-    badge: " ",
+    badge: () => " ",
     link: "/acceptance-criteria",
   },
   {
     id: "debrief",
-    title: "nav.debrief",
+    title: m.common_nav_debrief,
     icon: <Speech className="size-4" />,
-    badge: " ",
+    badge: () => " ",
     link: "/debrief",
   },
 ];

package/src/config/sidebar-teams.ts

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import type React from "react";
-import { Logo } from "@/components/layout/sidebar-03/logo";
+import { LogoIcon } from "@/components/shared-kit/logos/logo-icon";
 
 export type Team = {
   id: string;
@@ -26,7 +26,7 @@ export type Team = {
 };
 
 export const teams: Team[] = [
-  { id: "1", name: "Alpha Inc.", logo: Logo, plan: "Free" },
-  { id: "2", name: "Beta Corp.", logo: Logo, plan: "Free" },
-  { id: "3", name: "Gamma Tech", logo: Logo, plan: "Free" },
+  { id: "1", name: "Alpha Inc.", logo: LogoIcon, plan: "Free" },
+  { id: "2", name: "Beta Corp.", logo: LogoIcon, plan: "Free" },
+  { id: "3", name: "Gamma Tech", logo: LogoIcon, plan: "Free" },
 ];

package/src/hooks/__tests__/use-commands.test.tsx

@@ -19,16 +19,6 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { renderHook } from '@testing-library/react'
 import { useCommands } from '@/hooks/use-commands'
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => {
-      if (key === 'command.gotoDashboard') return '前往工作台'
-      if (key === 'command.createPrd') return '新建 PRD'
-      return key
-    },
-  }),
-}))
-
 const navigateMock = vi.fn()
 vi.mock('@tanstack/react-router', () => ({
   useRouter: () => ({ navigate: navigateMock }),

package/src/hooks/use-commands.ts

@@ -17,26 +17,22 @@
 
 import { useCallback, useMemo } from 'react'
 import { useRouter } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { useTheme } from 'next-themes'
 import { signOut } from '@/lib/auth/auth-client'
 import { COMMAND_REGISTRY } from '@/lib/commands/registry'
 import type { CommandDefinition } from '@/lib/commands/types'
 
-export interface ResolvedCommand extends CommandDefinition {
-  title: string
-}
+export type ResolvedCommand = Omit<CommandDefinition, 'title'> & { title: string }
 
 const DELEGATED_ACTIONS = new Set(['create-prd'])
 
 export function useCommands(options?: { onAction?: (id: string) => void }) {
   const router = useRouter()
-  const { t } = useTranslation('common')
   const { theme, setTheme } = useTheme()
 
   const commands = useMemo<ResolvedCommand[]>(
-    () => COMMAND_REGISTRY.map((c) => ({ ...c, title: t(c.titleKey) })),
-    [t],
+    () => COMMAND_REGISTRY.map((c) => ({ ...c, title: c.title() })),
+    [],
   )
 
   const execute = useCallback(

package/src/hooks/use-entity-subscription.ts

@@ -15,7 +15,6 @@
 // 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 { useEffect, useState } from "react"
 import type { EntityUpdateEvent } from "@allbluecn/kernel"
 

package/src/hooks/use-notifications.ts

@@ -3,10 +3,10 @@ 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/kernel'
 import { isInDndWindow } from '@allbluecn/kernel'
 import { getUnreadCountFn, getNotificationPreferencesFn } from '@/server/serverFns/notifications'
+import { m } from "@/paraglide/messages.js";
 
 export const NOTIFICATION_ROOT_KEY = ['notifications'] as const
 export const NOTIFICATION_LIST_KEY = ['notifications', 'list'] as const
@@ -26,12 +26,12 @@ export function parseNotificationEvent(raw: string): NotificationSseValue | null
   }
 }
 
-function toastNotification(item: NotificationItem, t: (key: string) => string, navigate: (opts: { to: string }) => void) {
+function toastNotification(item: NotificationItem, navigate: (opts: { to: string }) => void) {
   toast(item.title, {
     description: item.body ?? undefined,
     action: item.link
       ? {
-          label: t('actions.view'),
+          label: m.notifications_actions_view(),
           onClick: () => {
             navigate({ to: item.link! })
           },
@@ -44,7 +44,6 @@ 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
@@ -101,7 +100,7 @@ export function useNotifications(options?: { toastEnabled?: boolean }) {
           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 }))
+          if (!inDnd) toastNotification(value.notification, (opts) => router.navigate({ to: opts.to as never }))
         }
       }
     }
@@ -116,7 +115,7 @@ export function useNotifications(options?: { toastEnabled?: boolean }) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [toastEnabled, t, router])
+  }, [toastEnabled, router])
 
   return { unreadCount, setUnreadCount }
 }

package/src/hooks/useTranslator.ts

@@ -15,7 +15,6 @@
 // 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 { useState, useEffect, useRef } from "react";
 import { translateFn } from '@/server/serverFns/translation'
 

package/src/lib/__tests__/edition.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from 'vitest'
+import { isSaasEdition, profileId } from '../edition'
+
+describe('edition', () => {
+  it('OSS 装配产物下 profileId 为 oss、isSaasEdition 为 false', () => {
+    expect(profileId).toBe('oss')
+    expect(isSaasEdition).toBe(false)
+  })
+})

package/src/lib/analytics.ts

@@ -15,7 +15,6 @@
 // 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 { trackAnalyticsFn } from '@/server/serverFns/analytics'
 
 export interface LogEvent {

package/src/lib/anyhub/anyhub-message-bridge.ts

@@ -82,7 +82,7 @@ async function proxyToInternalAPI(
   method: string,
   params: Record<string, unknown> | undefined,
 ): Promise<unknown> {
-  const [group, action] = method.split(":")
+  const [group, action] = method.split('_')
   const apiMap: Record<string, Record<string, string>> = {
     prd: {
       list: "/api/prd",

package/src/lib/auth/__tests__/anonymous-safe.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it, vi } from 'vitest'
+import { isUnauthorizedError, navigateToLoginOnUnauthorized } from '../anonymous-safe'
+
+describe('isUnauthorizedError', () => {
+  it('识别 message 为 UNAUTHORIZED 的普通 Error（serverFn RPC 序列化形态）', () => {
+    expect(isUnauthorizedError(new Error('UNAUTHORIZED'))).toBe(true)
+  })
+
+  it('识别 name 为 UnauthorizedError 的错误（进程内直抛形态）', () => {
+    const e = new Error('别的消息')
+    e.name = 'UnauthorizedError'
+    expect(isUnauthorizedError(e)).toBe(true)
+  })
+
+  it('非 401 错误返回 false', () => {
+    expect(isUnauthorizedError(new Error('网络错误'))).toBe(false)
+    expect(isUnauthorizedError(new Error('FORBIDDEN'))).toBe(false)
+    expect(isUnauthorizedError(null)).toBe(false)
+    expect(isUnauthorizedError(undefined)).toBe(false)
+  })
+
+  it('识别 TanStack Router 包裹形态（error.error 为原始 401）', () => {
+    const wrapped = new Error('loader failed')
+    ;(wrapped as { error?: unknown }).error = new Error('UNAUTHORIZED')
+    expect(isUnauthorizedError(wrapped)).toBe(true)
+  })
+
+  it('自引用错误对象不栈溢出', () => {
+    const self = new Error('x')
+    ;(self as { error?: unknown }).error = self
+    expect(() => isUnauthorizedError(self)).not.toThrow()
+    expect(isUnauthorizedError(self)).toBe(false)
+  })
+
+  it('环引用错误对象不栈溢出', () => {
+    const a = new Error('a')
+    const b = new Error('b')
+    ;(a as { error?: unknown }).error = b
+    ;(b as { error?: unknown }).error = a
+    expect(() => isUnauthorizedError(a)).not.toThrow()
+    expect(isUnauthorizedError(a)).toBe(false)
+  })
+})
+
+describe('navigateToLoginOnUnauthorized', () => {
+  it('401 时携带当前页 redirect 跳登录', () => {
+    const navigate = vi.fn()
+    const router = {
+      state: { location: { pathname: '/prd', searchStr: '?tab=all' } },
+      navigate,
+    }
+    const handled = navigateToLoginOnUnauthorized(new Error('UNAUTHORIZED'), router as never)
+    expect(handled).toBe(true)
+    expect(navigate).toHaveBeenCalledWith({
+      to: '/login',
+      search: { redirect: '/prd?tab=all' },
+    })
+  })
+
+  it('非 401 返回 false 不跳转', () => {
+    const navigate = vi.fn()
+    const router = { state: { location: { pathname: '/', searchStr: '' } }, navigate }
+    expect(navigateToLoginOnUnauthorized(new Error('boom'), router as never)).toBe(false)
+    expect(navigate).not.toHaveBeenCalled()
+  })
+})
+
+describe('MutationCache 集成', () => {
+  it('QueryClient 挂载后 mutation 401 触发 navigateToLoginOnUnauthorized', async () => {
+    const { QueryClient, MutationCache } = await import('@tanstack/react-query')
+    const navigate = vi.fn()
+    const router = {
+      state: { location: { pathname: '/prd', searchStr: '' } },
+      navigate,
+    }
+    const mutationCache = new MutationCache({
+      onError: (error) => navigateToLoginOnUnauthorized(error, router as never),
+    })
+    const client = new QueryClient({ mutationCache })
+    const mutation = mutationCache.build(client, {
+      mutationFn: () => Promise.reject(new Error('UNAUTHORIZED')),
+    })
+    await mutation.execute(undefined as never).catch(() => undefined)
+    expect(navigate).toHaveBeenCalledWith({
+      to: '/login',
+      search: { redirect: '/prd' },
+    })
+  })
+})

package/src/lib/auth/__tests__/page-gate.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { isRedirect } from '@tanstack/react-router'
+import { requireSessionPage } from '../page-gate'
+
+function makeArgs(session: { user?: { id?: string } } | null) {
+  return {
+    context: { session },
+    location: { pathname: '/settings/account', searchStr: '' },
+  } as never
+}
+
+describe('requireSessionPage', () => {
+  it('已登录放行（不抛错）', () => {
+    expect(() => requireSessionPage(makeArgs({ user: { id: 'u1' } }))).not.toThrow()
+  })
+
+  it('未登录抛 redirect 到 /login 并携带回跳', () => {
+    let caught: unknown
+    try {
+      requireSessionPage(makeArgs(null))
+    } catch (e) {
+      caught = e
+    }
+    const options = (caught as { options?: { to?: string; search?: { redirect?: string } } }).options
+    expect(isRedirect(caught as never)).toBe(true)
+    expect(options?.to).toBe('/login')
+    expect(options?.search?.redirect).toBe('/settings/account')
+  })
+})

package/src/lib/auth/anonymous-safe.ts

@@ -0,0 +1,39 @@
+import type { AnyRouter } from '@tanstack/react-router'
+
+const UNAUTHORIZED_NAME = 'UnauthorizedError'
+const UNAUTHORIZED_STATUS = 401
+
+function isUnauthorizedMessage(msg: unknown): boolean {
+  return typeof msg === 'string' && msg.toLowerCase() === 'unauthorized'
+}
+
+export function isUnauthorizedError(
+  error: unknown,
+  seen: WeakSet<object> = new WeakSet(),
+): boolean {
+  if (!error || typeof error !== 'object') return false
+  if (seen.has(error)) return false
+  seen.add(error)
+  const e = error as { message?: unknown; name?: unknown; error?: unknown; status?: unknown; statusCode?: unknown }
+  return (
+    isUnauthorizedMessage(e.message) ||
+    e.name === UNAUTHORIZED_NAME ||
+    e.status === UNAUTHORIZED_STATUS ||
+    e.statusCode === UNAUTHORIZED_STATUS ||
+    isUnauthorizedError(e.error, seen)
+  )
+}
+
+/** 写操作 401 时跳登录（带当前页回跳），返回是否已处理 */
+export function navigateToLoginOnUnauthorized(
+  error: unknown,
+  router: Pick<AnyRouter, 'state' | 'navigate'>,
+): boolean {
+  if (!isUnauthorizedError(error)) return false
+  const loc = router.state.location
+  router.navigate({
+    to: '/login',
+    search: { redirect: loc.pathname + loc.searchStr },
+  })
+  return true
+}

package/src/lib/auth/page-gate.ts

@@ -0,0 +1,18 @@
+import { redirect } from '@tanstack/react-router'
+
+interface SessionLike {
+  user?: { id?: string } | null
+}
+
+/** 「需登录页面」beforeLoad gate：未登录跳登录并携带回跳。直接用于路由 beforeLoad。 */
+export function requireSessionPage(args: {
+  context: { session: SessionLike | null }
+  location: { pathname: string; searchStr: string }
+}): void {
+  if (!args.context.session?.user?.id) {
+    throw redirect({
+      to: '/login',
+      search: { redirect: args.location.pathname + args.location.searchStr },
+    })
+  }
+}