@allbluecn/web-app 0.3.0

package/src/components/knowledge-public/legal-compliance-editor.tsx

@@ -0,0 +1,290 @@
+// 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 { useCallback, useEffect, useMemo, useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { ArrowLeft } from 'lucide-react'
+import { KnowledgeDocEditor } from '@/components/knowledge/editor/knowledge-doc-editor'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import type { PropertyField, PropertyValues } from '@/components/knowledge/doc-properties'
+import { updateLegalFn } from '@/server/serverFns/knowledge-public/legal/update'
+import { getLegalDetailFn } from '@/server/serverFns/knowledge-public/legal/detail'
+import { deleteLegalFn } from '@/server/serverFns/knowledge-public/legal/delete'
+import { updateComplianceFn } from '@/server/serverFns/knowledge-public/compliance/update'
+import { getComplianceDetailFn } from '@/server/serverFns/knowledge-public/compliance/detail'
+import { deleteComplianceFn } from '@/server/serverFns/knowledge-public/compliance/delete'
+import { useTranslation } from 'react-i18next'
+
+type EditorType = 'legal' | 'compliance'
+
+export const JURISDICTION_OPTS = [
+  { value: 'CN_NATIONAL', label: 'legalEditor.jurisdiction.CN_NATIONAL' },
+  { value: 'CN_LOCAL', label: 'legalEditor.jurisdiction.CN_LOCAL' },
+  { value: 'OVERSEAS', label: 'legalEditor.jurisdiction.OVERSEAS' },
+]
+
+const INDUSTRY_OPTS = [
+  { value: '通用', label: 'public.legal-form.industry.通用' },
+  { value: '互联网', label: 'public.legal-form.industry.互联网' },
+  { value: '金融', label: 'public.legal-form.industry.金融' },
+  { value: '医疗', label: 'public.legal-form.industry.医疗' },
+  { value: '教育', label: 'public.legal-form.industry.教育' },
+  { value: '制造业', label: 'public.legal-form.industry.制造业' },
+  { value: '能源', label: 'public.legal-form.industry.能源' },
+  { value: '交通', label: 'public.legal-form.industry.交通' },
+  { value: '电商', label: 'public.legal-form.industry.电商' },
+  { value: '游戏', label: 'public.legal-form.industry.游戏' },
+]
+
+export const LEGAL_FIELDS: PropertyField[] = [
+  { key: 'code', label: 'legalEditor.fields.code', type: 'text', icon: 'Hash' },
+  { key: 'category', label: 'legalEditor.fields.category', type: 'text', icon: 'Tag' },
+  { key: 'jurisdiction', label: 'legalEditor.fields.jurisdiction', type: 'select', icon: 'Globe', options: JURISDICTION_OPTS },
+  { key: 'region', label: 'legalEditor.fields.region', type: 'text', icon: 'MapPin' },
+  { key: 'country', label: 'legalEditor.fields.country', type: 'text', icon: 'Globe' },
+  { key: 'issuingAuthority', label: 'legalEditor.fields.issuingAuthority', type: 'text', icon: 'Building2' },
+  { key: 'effectiveDate', label: 'legalEditor.fields.effectiveDate', type: 'date', icon: 'Calendar' },
+  { key: 'sourceUrl', label: 'legalEditor.fields.sourceUrl', type: 'url', icon: 'Link' },
+]
+
+export const COMPLIANCE_FIELDS: PropertyField[] = [
+  { key: 'code', label: 'complianceEditor.fields.code', type: 'text', icon: 'Hash' },
+  { key: 'industry', label: 'complianceEditor.fields.industry', type: 'select', icon: 'Briefcase', options: INDUSTRY_OPTS },
+  { key: 'regulatoryBody', label: 'complianceEditor.fields.regulatoryBody', type: 'text', icon: 'ShieldCheck' },
+  { key: 'region', label: 'complianceEditor.fields.region', type: 'text', icon: 'MapPin' },
+  { key: 'sourceUrl', label: 'complianceEditor.fields.sourceUrl', type: 'url', icon: 'Link' },
+]
+
+interface Props {
+  type: EditorType
+  editingId?: string
+}
+
+function toDateStr(d: unknown): string {
+  if (!d) return ''
+  const dt = new Date(d as string | Date)
+  if (Number.isNaN(dt.getTime())) return ''
+  return dt.toISOString().slice(0, 10)
+}
+
+function mapRecordToProperties(record: any, type: EditorType): PropertyValues {
+  if (type === 'legal') {
+    return {
+      code: record.code ?? '',
+      category: record.category ?? '',
+      jurisdiction: record.jurisdiction ?? '',
+      region: record.region ?? '',
+      country: record.country ?? '',
+      issuingAuthority: record.issuingAuthority ?? '',
+      effectiveDate: toDateStr(record.effectiveDate),
+      sourceUrl: record.sourceUrl ?? '',
+    }
+  }
+  return {
+    code: record.code ?? '',
+    industry: record.industry ?? '',
+    regulatoryBody: record.regulatoryBody ?? '',
+    region: record.region ?? '',
+    sourceUrl: record.sourceUrl ?? '',
+  }
+}
+
+function mapPropsToLegalTable(vals: PropertyValues) {
+  return {
+    code: (vals.code as string) ?? '',
+    category: (vals.category as string) ?? '',
+    jurisdiction: (vals.jurisdiction as string) || undefined,
+    region: (vals.region as string) || null,
+    country: (vals.country as string) || null,
+    issuingAuthority: (vals.issuingAuthority as string) || null,
+    effectiveDate: vals.effectiveDate ? new Date(vals.effectiveDate as string) : null,
+    sourceUrl: (vals.sourceUrl as string) || '',
+  }
+}
+
+function mapPropsToComplianceTable(vals: PropertyValues) {
+  return {
+    code: (vals.code as string) ?? '',
+    industry: (vals.industry as string) ?? '',
+    regulatoryBody: (vals.regulatoryBody as string) || null,
+    region: (vals.region as string) || null,
+    sourceUrl: (vals.sourceUrl as string) || '',
+  }
+}
+
+function sortByLegalOrder(fields: PropertyField[]): PropertyField[] {
+  const order = LEGAL_FIELDS.map(f => f.key)
+  return [...fields].sort((a, b) => {
+    const ia = order.indexOf(a.key)
+    const ib = order.indexOf(b.key)
+    return (ia === -1 ? 999 : ia) - (ib === -1 ? 999 : ib)
+  })
+}
+
+export function LegalComplianceEditor({ type, editingId }: Props) {
+  const { t } = useTranslation('knowledge')
+  const navigate = useNavigate()
+  const qc = useQueryClient()
+  const fields = type === 'legal' ? LEGAL_FIELDS : COMPLIANCE_FIELDS
+  const detailPath = type === 'legal' ? '/knowledge/laws/$id' : '/knowledge/compliance/$id'
+  const listPath = type === 'legal' ? '/knowledge/laws' : '/knowledge/compliance'
+
+  const detailQuery = useQuery({
+    queryKey: [`${type}-detail`, editingId],
+    queryFn: async (): Promise<any> => {
+      return type === 'legal'
+        ? getLegalDetailFn({ data: { id: editingId! } })
+        : getComplianceDetailFn({ data: { id: editingId! } })
+    },
+    enabled: !!editingId,
+  })
+
+  const record = detailQuery.data
+
+  const [propertyValues, setPropertyValues] = useState<PropertyValues>(() => ({}))
+  const [addedFields, setAddedFields] = useState<PropertyField[]>([])
+
+  useEffect(() => {
+    if (record) {
+      const vals = mapRecordToProperties(record, type)
+      setPropertyValues(vals)
+      const allFields = type === 'legal' ? LEGAL_FIELDS : COMPLIANCE_FIELDS
+      setAddedFields(sortByLegalOrder(allFields.filter((f) => {
+        if (type === 'legal') {
+        if (f.key === 'region') return vals.jurisdiction === 'CN_LOCAL'
+        if (f.key === 'country') return vals.jurisdiction === 'OVERSEAS'
+        }
+        const v = vals[f.key]
+        return v !== null && v !== undefined && v !== ''
+      })))
+    }
+  }, [record, type])
+
+  const docData = useMemo(
+    () => ({
+      id: editingId ?? 'new',
+      kbId: '',
+      title: record?.title ?? '',
+      content: { html: record?.content ?? '', markdown: '' },
+      type: 'doc',
+      tags: Array.isArray(record?.tags) ? (record!.tags as string[]) : [],
+      updatedAt: record?.updatedAt as string | Date | null | undefined,
+      creator: record?.user ?? null,
+    }),
+    [editingId, record],
+  )
+
+  const saveField = useCallback(
+    async (field: 'content' | 'title' | 'tags', value: unknown): Promise<void> => {
+      if (!editingId) return
+      const payload: any = { id: editingId, [field]: value }
+      if (type === 'legal') {
+        await updateLegalFn({ data: payload })
+      } else {
+        await updateComplianceFn({ data: payload })
+      }
+    },
+    [editingId, type],
+  )
+
+  const handlePropertyChange = useCallback((key: string, value: unknown) => {
+    setPropertyValues((prev) => ({ ...prev, [key]: value }))
+    if (key === 'jurisdiction') {
+      if (value === 'CN_LOCAL') {
+        setAddedFields((prev) => sortByLegalOrder([
+          ...prev.filter(f => f.key !== 'country'),
+          ...(prev.some(f => f.key === 'region') ? [] : [LEGAL_FIELDS.find(f => f.key === 'region')!]),
+        ]))
+        setPropertyValues((prev) => ({ ...prev, country: '' }))
+      } else if (value === 'OVERSEAS') {
+        setAddedFields((prev) => sortByLegalOrder([
+          ...prev.filter(f => f.key !== 'region'),
+          ...(prev.some(f => f.key === 'country') ? [] : [LEGAL_FIELDS.find(f => f.key === 'country')!]),
+        ]))
+        setPropertyValues((prev) => ({ ...prev, region: '' }))
+      } else {
+        setAddedFields((prev) => prev.filter(f => f.key !== 'region' && f.key !== 'country'))
+        setPropertyValues((prev) => ({ ...prev, region: '', country: '' }))
+      }
+    }
+  }, [])
+
+  const saveHandlers = useMemo(
+    () => ({
+      content: (c: { html: string; markdown: string }) => saveField('content', c.html),
+      title: (t: string) => saveField('title', t),
+      tags: (t: string[]) => saveField('tags', t),
+      properties: async (vals: PropertyValues) => {
+        if (!editingId) return
+        const mapped = type === 'legal' ? mapPropsToLegalTable(vals) : mapPropsToComplianceTable(vals)
+        const payload: any = { id: editingId, ...mapped }
+        if (type === 'legal') {
+          await updateLegalFn({ data: payload })
+        } else {
+          await updateComplianceFn({ data: payload })
+        }
+      },
+    }),
+    [editingId, type, saveField],
+  )
+
+  if (!record) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+        {t('public.legal-compliance.loading')}
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full">
+      <KnowledgeDocEditor
+        document={docData}
+        propertyFields={addedFields}
+        propertyValues={propertyValues}
+        onPropertyChange={handlePropertyChange}
+        addablePropertyFields={fields.filter(f => !(type === 'legal' && (f.key === 'region' || f.key === 'country')))}
+        onAddProperty={(f) => setAddedFields((prev) => sortByLegalOrder(prev.some((x) => x.key === f.key) ? prev : [...prev, f]))}
+        onRemoveProperty={(key) => setAddedFields((prev) => prev.filter((f) => f.key !== key))}
+        saveHandlers={saveHandlers}
+        backButton={
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button onClick={async () => {
+                const defaultTitle = type === 'legal' ? t('public.untitled-legal') : t('public.untitled-compliance')
+                if (record.title === defaultTitle && !record.content) {
+                  try {
+                    if (type === 'legal') await deleteLegalFn({ data: { id: editingId! } })
+                    else await deleteComplianceFn({ data: { id: editingId! } })
+                  } catch {}
+                  navigate({ to: listPath })
+                } else {
+                  qc.invalidateQueries({ queryKey: [`${type}-detail`] })
+                  navigate({ to: detailPath, params: { id: editingId! } })
+                }
+              }} className="inline-flex items-center text-foreground hover:text-muted-foreground transition-colors">
+                <ArrowLeft className="size-8" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{t('public.legal-compliance.back-to-preview')}</TooltipContent>
+          </Tooltip>
+        }
+      />
+    </div>
+  )
+}

package/src/components/knowledge-public/markdown-editor.tsx

@@ -0,0 +1,59 @@
+// 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 { useState } from 'react'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import { MarkdownView } from './markdown-view'
+import { Eye, Pencil } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+export function MarkdownEditor({
+  value,
+  onChange,
+  placeholder,
+  rows = 10,
+}: {
+  value: string
+  onChange: (v: string) => void
+  placeholder?: string
+  rows?: number
+}) {
+  const { t } = useTranslation('knowledge')
+  const [mode, setMode] = useState<'edit' | 'preview'>('edit')
+  return (
+    <div className="space-y-2">
+      <div className="flex gap-1">
+        <Button type="button" size="sm" variant={mode === 'edit' ? 'default' : 'outline'} onClick={() => setMode('edit')}>
+          <Pencil className="h-3.5 w-3.5" />
+          {t('markdownEditor.edit')}
+        </Button>
+        <Button type="button" size="sm" variant={mode === 'preview' ? 'default' : 'outline'} onClick={() => setMode('preview')}>
+          <Eye className="h-3.5 w-3.5" />
+          {t('markdownEditor.preview')}
+        </Button>
+      </div>
+      {mode === 'edit' ? (
+        <Textarea value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} rows={rows} className="font-mono text-sm" />
+      ) : (
+        <div className="min-h-40 rounded-md border border-input p-3">
+          <MarkdownView content={value} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/knowledge-public/markdown-view.tsx

@@ -0,0 +1,30 @@
+// 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 ReactMarkdown from 'react-markdown'
+import { cn } from '@/lib/utils'
+import { useTranslation } from 'react-i18next'
+
+export function MarkdownView({ content, className }: { content: string; className?: string }) {
+  const { t } = useTranslation('knowledge')
+  if (!content?.trim()) return <p className="text-sm text-muted-foreground">{t('markdownView.empty')}</p>
+  return (
+    <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)}>
+      <ReactMarkdown>{content}</ReactMarkdown>
+    </div>
+  )
+}

package/src/components/knowledge-public/sharers-avatar-group.tsx

@@ -0,0 +1,81 @@
+// 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 { UserAvatar } from '@allbluecn/ui'
+import { AvatarGroup, AvatarGroupTooltip } from '@/components/magicui/components/animate/avatar-group'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
+import { useTranslation } from 'react-i18next'
+
+interface Sharer {
+  id: string
+  username: string
+  avatarConfig: unknown
+  bgShape: string | null
+  bgColor: string | null
+}
+
+export function SharersAvatarGroup({
+  sharers,
+  max = 5,
+  currentUserId,
+}: {
+  sharers: Sharer[]
+  max?: number
+  currentUserId?: string
+}) {
+  const { t } = useTranslation('knowledge')
+  if (!sharers?.length) return null
+  const shown = sharers.slice(0, max)
+  const rest = Math.max(0, sharers.length - max)
+
+  return (
+    <div className="flex items-center -space-x-2">
+      <AvatarGroup className="h-6 -space-x-2" invertOverlap translate="-22%" sideOffset={14}>
+        {shown.map((s) => {
+          const label = s.id === currentUserId ? t('sharers.me', { name: s.username }) : s.username
+          return (
+            <div key={s.id} className="ring-2 ring-background rounded-full">
+              <UserAvatar
+                name={s.username}
+                avatarConfig={s.avatarConfig as any}
+                bgShape={(s.bgShape ?? undefined) as any}
+                bgColor={s.bgColor ?? undefined}
+                size="sm"
+              />
+              <AvatarGroupTooltip>{label}</AvatarGroupTooltip>
+            </div>
+          )
+        })}
+      </AvatarGroup>
+      {rest > 0 && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                'flex h-6 w-6 items-center justify-center rounded-full bg-muted text-[10px] font-medium ring-2 ring-background cursor-default',
+              )}
+            >
+              +{rest}
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>{t('sharers.count', { count: sharers.length })}</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  )
+}

package/src/components/knowledge-public/tag-filter.tsx

@@ -0,0 +1,53 @@
+// 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 { chipClass } from './chip-utils'
+import { cn } from '@/lib/utils'
+import { useTranslation } from 'react-i18next'
+
+interface TagFilterProps {
+  tags: string[]
+  activeTag?: string
+  onChange: (tag: string | undefined) => void
+  className?: string
+}
+
+export function TagFilter({ tags, activeTag, onChange, className }: TagFilterProps) {
+  const { t } = useTranslation('knowledge')
+  return (
+    <div className={cn('mx-auto flex w-full max-w-2xl flex-wrap items-center gap-2.5', className)}>
+      <span className="text-sm font-medium text-muted-foreground mr-4">{t('tagFilter.label')}</span>
+      <button
+        type="button"
+        onClick={() => onChange(undefined)}
+        className={chipClass(!activeTag)}
+      >
+        {t('tagFilter.all')}
+      </button>
+      {tags.map((t) => (
+        <button
+          key={t}
+          type="button"
+          onClick={() => onChange(activeTag === t ? undefined : t)}
+          className={chipClass(activeTag === t)}
+        >
+          {t}
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/components/layout/sidebar-03/__tests__/nav-workspace.test.tsx

@@ -0,0 +1,156 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { I18nextProvider } from "react-i18next";
+import { createServerI18n } from "@/lib/i18n/server";
+
+const i18n = createServerI18n("zh");
+
+const { mockUseLiveQuery, mockUseLocation, mockUseSidebar } = vi.hoisted(() => ({
+  mockUseLiveQuery: vi.fn(),
+  mockUseLocation: vi.fn(),
+  mockUseSidebar: vi.fn(),
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+  Link: ({ children, to, className, params }: any) => (
+    <a href={to} data-to={to} className={className}>
+      {children}
+    </a>
+  ),
+  useLocation: () => mockUseLocation(),
+}));
+
+vi.mock("@tanstack/react-db", () => ({
+  useLiveQuery: mockUseLiveQuery,
+}));
+
+vi.mock("@/components/ui/sidebar", () => ({
+  SidebarGroup: ({ children }: any) => <div data-testid="sidebar-group">{children}</div>,
+  SidebarMenu: ({ children }: any) => <ul>{children}</ul>,
+  SidebarMenuItem: ({ children }: any) => <li>{children}</li>,
+  SidebarMenuButton: ({
+    children,
+    asChild,
+    tooltip,
+    isActive,
+    className,
+  }: any) => (
+    <div data-active={isActive} data-tooltip={tooltip} className={className}>
+      {children}
+    </div>
+  ),
+  useSidebar: () => mockUseSidebar(),
+}));
+
+vi.mock("@/lib/sidebar-utils", () => ({
+  isParentActive: (pathname: string, target: string) => pathname.startsWith(target),
+}));
+
+vi.mock("@/components/project/project-icon", () => ({
+  ProjectIconDisplay: ({ name }: any) => <span data-testid="project-icon">{name}</span>,
+}));
+
+vi.mock("@/components/workspace/create-workspace-dialog", () => ({
+  CreateWorkspaceDialog: ({ open }: { open: boolean }) =>
+    open ? <span data-testid="create-workspace-dialog">Dialog</span> : null,
+}));
+
+vi.mock("@/lib/utils", () => ({
+  cn: (...classes: string[]) => classes.filter(Boolean).join(" "),
+}));
+
+vi.mock("@/lib/collections/reference/workspaces-collection", () => ({
+  workspacesCollection: { id: "workspaces" },
+}));
+
+import { NavWorkspace } from "../nav-workspace";
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockUseLocation.mockReturnValue({ pathname: "/workspaces" });
+  mockUseSidebar.mockReturnValue({ state: "expanded" });
+  mockUseLiveQuery.mockReturnValue({
+    data: [
+      { id: "ws1", name: "工作空间 A", icon: "folder" },
+      { id: "ws2", name: "工作空间 B", icon: "folder-kanban" },
+    ],
+  });
+});
+
+describe("NavWorkspace", () => {
+  it("展开状态下渲染标题与新建按钮", () => {
+    render(<I18nextProvider i18n={i18n}><NavWorkspace /></I18nextProvider>);
+
+    expect(screen.getByText("工作空间")).toBeDefined();
+    expect(screen.getByLabelText("创建空间")).toBeDefined();
+  });
+
+  it("渲染工作空间主页入口", () => {
+    render(<I18nextProvider i18n={i18n}><NavWorkspace /></I18nextProvider>);
+
+    expect(screen.getByText("工作空间主页")).toBeDefined();
+    expect(screen.queryByTestId("create-workspace-dialog")).toBeNull();
+  });
+
+  it("从 collection 数据渲染工作空间列表", async () => {
+    render(<I18nextProvider i18n={i18n}><NavWorkspace /></I18nextProvider>);
+
+    await waitFor(() => {
+      expect(screen.getByText("工作空间 A")).toBeDefined();
+      expect(screen.getByText("工作空间 B")).toBeDefined();
+    });
+  });
+
+  it("当前工作空间页标记 active 状态", async () => {
+    mockUseLocation.mockReturnValue({ pathname: "/workspaces/ws1" });
+    render(<I18nextProvider i18n={i18n}><NavWorkspace /></I18nextProvider>);
+
+    await waitFor(() => {
+      const links = screen.getAllByTestId("project-icon");
+      expect(links).toHaveLength(2);
+    });
+
+    const activeElements = screen
+      .getAllByTestId("project-icon")
+      .map((el) => el.closest("[data-active]"))
+      .filter((el): el is HTMLElement => el !== null);
+
+    expect(activeElements.some((el) => el.dataset.active === "true")).toBe(true);
+  });
+
+  it("折叠状态下不显示工作空间列表", () => {
+    mockUseSidebar.mockReturnValue({ state: "collapsed" });
+    render(<I18nextProvider i18n={i18n}><NavWorkspace /></I18nextProvider>);
+
+    expect(screen.queryByText("工作空间")).not.toBeInTheDocument();
+    expect(screen.queryByText("工作空间主页")).not.toBeInTheDocument();
+    expect(screen.queryByText("工作空间 A")).not.toBeInTheDocument();
+    expect(screen.queryByText("工作空间 B")).not.toBeInTheDocument();
+  });
+
+  it("空 collection 时不渲染工作空间列表项", async () => {
+    mockUseLiveQuery.mockReturnValue({ data: [] });
+    render(<I18nextProvider i18n={i18n}><NavWorkspace /></I18nextProvider>);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("project-icon")).not.toBeInTheDocument();
+    });
+  });
+});