@allbluecn/web-app 0.3.0

package/src/routes/_nav/knowledge/bookmarks/index.lazy.tsx

@@ -0,0 +1,179 @@
+// 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 { cn } from "@/lib/utils"
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useQuery, useQueryClient, keepPreviousData } from '@tanstack/react-query'
+import { listBookmarksFn } from '@/server/serverFns/knowledge-public/bookmarks/list'
+import { syncBookmarkGithubFn } from '@/server/serverFns/knowledge-public/bookmarks/sync-github'
+import { shareBookmarkFn } from '@/server/serverFns/knowledge-public/bookmarks/share'
+import { unshareBookmarkFn } from '@/server/serverFns/knowledge-public/bookmarks/unshare'
+import { toggleFavoriteBookmarkFn } from '@/server/serverFns/knowledge-public/bookmarks/favorite'
+import { listBookmarkCategoriesFn } from '@/server/serverFns/knowledge-public/bookmarks/categories'
+import { KnowledgeSearchBar } from '@/components/knowledge-public/knowledge-search-bar'
+import { KnowledgeFilters } from '@/components/knowledge-public/knowledge-filters'
+import { BookmarkCard } from '@/components/knowledge-public/bookmark-card'
+import { BookmarkFormDialog, type BookmarkEditTarget } from '@/components/knowledge-public/bookmark-form-dialog'
+import { toast } from '@/components/ui/sonner'
+import { DotPattern } from '@/components/magicui/dot-pattern'
+import { AuroraText } from '@/components/magicui/aurora-text'
+
+export const Route = createLazyFileRoute('/_nav/knowledge/bookmarks/')({ component: BookmarkPage })
+
+interface ListItem {
+  id: string
+  canonicalId: string
+  title: string
+  url: string
+  categoryId: string | null
+  summary: string | null
+  visibility: string
+  isOwner?: boolean
+  isFavorited?: boolean
+}
+
+function BookmarkPage() {
+  const { t } = useTranslation('knowledge')
+  const queryClient = useQueryClient()
+  const [scope, setScope] = useState<'all' | 'private' | 'share' | 'favorite'>('all')
+  const [search, setSearch] = useState('')
+  const [categoryId, setCategoryId] = useState<string | undefined>()
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [editDialogOpen, setEditDialogOpen] = useState(false)
+  const [editing, setEditing] = useState<BookmarkEditTarget | null>(null)
+
+  const { data, refetch } = useQuery({
+    queryKey: ['bookmarks', scope, search, categoryId],
+    queryFn: () => listBookmarksFn({ data: { scope, search: search || undefined, categoryId } }),
+    placeholderData: keepPreviousData,
+  })
+
+  const { data: cats } = useQuery({
+    queryKey: ['bookmark-categories'],
+    queryFn: () => listBookmarkCategoriesFn(),
+  })
+
+  const categoryGroup = [
+    {
+      key: 'category',
+      label: t('bookmarks.detail.category'),
+      options: (cats ?? []).map((c) => ({ value: c.id, label: c.name })),
+    },
+  ]
+
+  const refresh = () => {
+    void queryClient.invalidateQueries({ queryKey: ['bookmarks'] })
+  }
+
+  const handleEdit = (b: ListItem) => {
+    setEditing({ id: b.id, title: b.title, url: b.url, categoryId: b.categoryId, summary: b.summary })
+    setEditDialogOpen(true)
+  }
+
+  const handleShareToggle = async (b: ListItem) => {
+    try {
+      if (b.visibility === 'public') {
+        await unshareBookmarkFn({ data: { canonicalId: b.canonicalId } })
+        toast.success(t('bookmarks.index.unshared'))
+      } else {
+        const { message } = await shareBookmarkFn({ data: { id: b.id } })
+        toast.success(message)
+      }
+      refresh()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t('bookmarks.index.operationFailed'))
+    }
+  }
+
+  const handleFavoriteToggle = async (b: ListItem) => {
+    try {
+      const { favorited } = await toggleFavoriteBookmarkFn({ data: { canonicalId: b.canonicalId } })
+      toast.success(favorited ? t('bookmarks.index.favorited') : t('bookmarks.index.unfavorited'))
+      refresh()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t('bookmarks.index.operationFailed'))
+    }
+  }
+
+  return (
+    <div className="relative flex min-h-full flex-col overflow-hidden">
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-85 overflow-hidden">
+        <DotPattern
+          className={cn("absolute inset-0 h-full w-full fill-sky-500/20 mask-[linear-gradient(to_bottom,white_80%,transparent)]")}
+          glow
+        />
+      </div>
+      <div className="relative z-10 flex h-full flex-col gap-4 p-4">
+        <h1 className="text-center text-[46px] font-semibold mt-10">
+          {t('bookmarks.index.titleA')}
+          <AuroraText colors={["#B81C60", "#FF2E88", "#FF7096", "#FFB3C1"]}>
+            {t('bookmarks.index.titleB')}
+          </AuroraText>
+        </h1>
+        <KnowledgeSearchBar
+          search={search}
+          onSearchChange={setSearch}
+          onCreate={() => setDialogOpen(true)}
+          createLabel={t('bookmarks.index.addSite')}
+        />
+        <KnowledgeFilters
+          scope={scope}
+          onScopeChange={setScope}
+          groups={categoryGroup}
+          active={{ [categoryGroup[0].key]: categoryId }}
+          onChange={(k, v) => k === 'category' && setCategoryId(v)}
+        />
+        <div className="mx-auto w-full max-w-2xl flex-1 overflow-auto mt-4">
+          {data?.items.length ? (
+            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {data.items.map((b) => (
+                <BookmarkCard
+                  key={b.id}
+                  item={b}
+                  canEdit={scope === 'private'}
+                  onEdit={b.isOwner ? () => handleEdit(b) : undefined}
+                  onShareToggle={b.isOwner ? () => handleShareToggle(b) : undefined}
+                  onFavoriteToggle={!b.isOwner && b.visibility === 'public' ? () => handleFavoriteToggle(b) : undefined}
+                  onSync={async () => {
+                    try {
+                      await syncBookmarkGithubFn({ data: { id: b.id } })
+                      refetch()
+                      toast.success(t('bookmarks.index.synced'))
+                    } catch {
+                      toast.error(t('bookmarks.index.syncFailed'))
+                    }
+                  }}
+                />
+              ))}
+            </div>
+          ) : (
+            <p className="py-12 text-center text-sm text-muted-foreground">{t('bookmarks.index.empty')}</p>
+          )}
+        </div>
+        <BookmarkFormDialog open={dialogOpen} onOpenChange={setDialogOpen} onSuccess={refresh} />
+        <BookmarkFormDialog
+          open={editDialogOpen}
+          onOpenChange={setEditDialogOpen}
+          editItem={editing}
+          onSuccess={refresh}
+        />
+      </div>
+    </div>
+  )
+}

package/src/routes/_nav/knowledge/bookmarks/route.tsx

@@ -0,0 +1,20 @@
+// 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 { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_nav/knowledge/bookmarks')({ component: () => <Outlet /> })

package/src/routes/_nav/knowledge/compliance/$id.lazy.tsx

@@ -0,0 +1,250 @@
+// 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, Suspense } from 'react'
+import { createLazyFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { getComplianceDetailFn } from '@/server/serverFns/knowledge-public/compliance/detail'
+import { shareComplianceFn } from '@/server/serverFns/knowledge-public/compliance/share'
+import { unshareComplianceFn } from '@/server/serverFns/knowledge-public/compliance/unshare'
+import { deleteComplianceFn } from '@/server/serverFns/knowledge-public/compliance/delete'
+import { SharersAvatarGroup } from '@/components/knowledge-public/sharers-avatar-group'
+import { KnowledgeDocEditor } from '@/components/knowledge/editor/knowledge-doc-editor'
+import { COMPLIANCE_FIELDS } from '@/components/knowledge-public/legal-compliance-editor'
+import type { PropertyValues } from '@/components/knowledge/doc-properties'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Share2, ArrowLeft, Pencil, Trash2, Link2, Globe, Star } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { toggleFavoriteFn, getFavoriteIdsFn } from '@/server/serverFns/knowledge-public/favorite'
+import { toast } from '@/components/ui/sonner'
+
+export const Route = createLazyFileRoute('/_nav/knowledge/compliance/$id')({ component: ComplianceDetailPage })
+
+function ComplianceDetailPage() {
+  const { t } = useTranslation('knowledge')
+  const { id } = Route.useParams()
+  const navigate = useNavigate()
+  const qc = useQueryClient()
+  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [sharing, setSharing] = useState(false)
+  const { data } = useQuery({
+    queryKey: ['compliance-detail', id],
+    queryFn: () => getComplianceDetailFn({ data: { id } }),
+  })
+
+  const { data: favoriteIds } = useQuery({
+    queryKey: ['favorite-ids', 'compliance'],
+    queryFn: () => getFavoriteIdsFn({ data: { entityType: 'compliance' } }),
+  })
+  const ctx = Route.useRouteContext() as any
+
+  async function handleDelete() {
+    try {
+      await deleteComplianceFn({ data: { id } })
+      toast.success(t('compliance.detail.deleted'))
+      qc.invalidateQueries({ queryKey: ['compliance'] })
+      navigate({ to: '/knowledge/compliance' })
+    } catch {
+      toast.error(t('compliance.detail.deleteFailed'))
+    }
+  }
+
+  if (!data) return null
+  const isPublic = data.visibility === 'public'
+  const currentUserId = ctx.session?.user?.id
+  const isOwn = data.userId === currentUserId
+  const hasShared = isPublic && currentUserId && data.sharers?.some((s: any) => s.id === currentUserId)
+  const favorited = favoriteIds?.includes(data.id) ?? false
+
+  const handleToggleFavorite = async () => {
+    const r = await toggleFavoriteFn({ data: { entityType: 'compliance', entityId: data.id } })
+    toast.success(r.favorited ? t('compliance.detail.favorited') : t('compliance.detail.unfavorited'))
+    qc.invalidateQueries({ queryKey: ['favorite-ids', 'compliance'] })
+    qc.invalidateQueries({ queryKey: ['compliance'] })
+  }
+
+  const docData = {
+    id: data.id,
+    kbId: '',
+    title: data.title,
+    content: { html: data.content ?? '', markdown: '' },
+    type: 'doc',
+    tags: Array.isArray(data.tags) ? (data.tags as string[]) : [],
+    updatedAt: data.updatedAt,
+    creator: data.user ?? null,
+  }
+
+  const propertyValues: PropertyValues = {
+    industry: data.industry ?? '',
+    regulatoryBody: data.regulatoryBody ?? '',
+    region: data.region ?? '',
+    sourceUrl: data.sourceUrl ?? '',
+  }
+
+  const propertyFields = COMPLIANCE_FIELDS.filter((f) => {
+    const v = propertyValues[f.key]
+    return v !== null && v !== undefined && v !== ''
+  })
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex-1 overflow-y-auto">
+        <Suspense fallback={null}>
+          <KnowledgeDocEditor
+            document={docData}
+            readOnly
+            propertyFields={propertyFields}
+            propertyValues={propertyValues}
+            backButton={
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Link to="/knowledge/compliance" className="inline-flex items-center text-foreground hover:text-muted-foreground transition-colors">
+                    <ArrowLeft className="size-8" />
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent>{t('compliance.detail.backToList')}</TooltipContent>
+              </Tooltip>
+            }
+            actions={
+              <>
+              {isOwn ? (
+                <>
+                  <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <AlertDialogTrigger asChild>
+                          <Button variant="ghost" size="icon" className="text-destructive hover:text-destructive">
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </AlertDialogTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>{t('compliance.detail.delete')}</TooltipContent>
+                    </Tooltip>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>{t('compliance.detail.confirmDeleteTitle')}</AlertDialogTitle>
+                        <AlertDialogDescription>{t('compliance.detail.confirmDeleteDesc')}</AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>{t('compliance.detail.cancel')}</AlertDialogCancel>
+                        <AlertDialogAction onClick={handleDelete}>{t('compliance.detail.delete')}</AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="icon" onClick={() => navigate({ to: '/knowledge/compliance/edit/$id', params: { id } })}>
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t('compliance.detail.edit')}</TooltipContent>
+                  </Tooltip>
+                  <DropdownMenu>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="icon" disabled={sharing}>
+                            <Share2 className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>{t('compliance.detail.share')}</TooltipContent>
+                    </Tooltip>
+                    <DropdownMenuContent align="end" className="w-40">
+                      {hasShared ? (
+                        <DropdownMenuItem onClick={async () => {
+                          if (!data.canonicalId) return
+                          setSharing(true)
+                          try {
+                            await unshareComplianceFn({ data: { canonicalId: data.canonicalId } })
+                            toast.success(t('compliance.detail.unshared'))
+                            qc.invalidateQueries({ queryKey: ['compliance-detail', id] })
+                          } catch (e) {
+                            toast.error(e instanceof Error ? e.message : t('compliance.detail.unshareFailed'))
+                          } finally {
+                            setSharing(false)
+                          }
+                        }}>
+                          <Globe className="mr-2 h-4 w-4" />
+                          {t('compliance.detail.unshare')}
+                        </DropdownMenuItem>
+                      ) : (
+                        <DropdownMenuItem onClick={async () => {
+                          setSharing(true)
+                          try {
+                            const r = await shareComplianceFn({ data: { id } })
+                            toast.success(r.message)
+                            qc.invalidateQueries({ queryKey: ['compliance-detail', id] })
+                          } catch (e) {
+                            toast.error(e instanceof Error ? e.message : t('compliance.detail.shareFailed'))
+                          } finally {
+                            setSharing(false)
+                          }
+                        }}>
+                          <Globe className="mr-2 h-4 w-4" />
+                          {t('compliance.detail.sharePublic')}
+                        </DropdownMenuItem>
+                      )}
+                      <DropdownMenuItem onClick={() => {
+                        const shareUrl = `${window.location.origin}/share/compliance/${data.id}`
+                        navigator.clipboard.writeText(shareUrl)
+                        toast.success(t('compliance.detail.linkCopied'))
+                      }}>
+                        <Link2 className="mr-2 h-4 w-4" />
+                        {t('compliance.detail.copyLink')}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </>
+              ) : (
+                <>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="icon" onClick={handleToggleFavorite}>
+                        <Star className={cn('h-4 w-4', favorited && 'fill-amber-400 text-amber-400')} />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{favorited ? t('compliance.detail.unfavorite') : t('compliance.detail.favorite')}</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="icon" onClick={() => {
+                        navigator.clipboard.writeText(`${window.location.origin}/share/compliance/${data.id}`)
+                        toast.success(t('compliance.detail.linkCopied'))
+                      }}>
+                        <Share2 className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t('compliance.detail.copyShareLink')}</TooltipContent>
+                  </Tooltip>
+                </>
+              )}
+              {isPublic && data.sharers?.length ? (
+                <SharersAvatarGroup sharers={data.sharers} currentUserId={currentUserId} />
+              ) : null}
+              </>
+            }
+          />
+        </Suspense>
+      </div>
+    </div>
+  )
+}

package/src/routes/_nav/knowledge/compliance/edit/$id.lazy.tsx

@@ -0,0 +1,28 @@
+// 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 { createLazyFileRoute } from '@tanstack/react-router'
+import { LegalComplianceEditor } from '@/components/knowledge-public/legal-compliance-editor'
+
+export const Route = createLazyFileRoute('/_nav/knowledge/compliance/edit/$id')({
+  component: ComplianceEditPage,
+})
+
+function ComplianceEditPage() {
+  const { id } = Route.useParams()
+  return <LegalComplianceEditor type="compliance" editingId={id} />
+}

package/src/routes/_nav/knowledge/compliance/index.lazy.tsx

@@ -0,0 +1,125 @@
+// 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 { cn } from "@/lib/utils"
+import { createLazyFileRoute, useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useQuery, keepPreviousData } from '@tanstack/react-query'
+import { listComplianceFn } from '@/server/serverFns/knowledge-public/compliance/list'
+import { createComplianceFn } from '@/server/serverFns/knowledge-public/compliance/create'
+import { getEntityTagsFn } from '@/server/serverFns/knowledge-public/entity-tags'
+import { KnowledgeSearchBar } from '@/components/knowledge-public/knowledge-search-bar'
+import { KnowledgeFilters } from '@/components/knowledge-public/knowledge-filters'
+import { KnowledgeCard } from '@/components/knowledge-public/knowledge-card'
+import { KnowledgeCardGrid, EmptyState } from '@/components/knowledge-public/knowledge-card-grid'
+import { TagFilter } from '@/components/knowledge-public/tag-filter'
+import { AnimatedGridPattern } from '@/components/magicui/animated-grid-pattern'
+import { AuroraText } from '@/components/magicui/aurora-text'
+
+function buildIndustryOptions(t: any) {
+  return [
+    { value: 'internet', label: t('compliance.industries.internet') },
+    { value: 'finance', label: t('compliance.industries.finance') },
+    { value: 'medical', label: t('compliance.industries.medical') },
+    { value: 'education', label: t('compliance.industries.education') },
+    { value: 'manufacturing', label: t('compliance.industries.manufacturing') },
+    { value: 'energy', label: t('compliance.industries.energy') },
+    { value: 'transportation', label: t('compliance.industries.transportation') },
+    { value: 'ecommerce', label: t('compliance.industries.ecommerce') },
+    { value: 'gaming', label: t('compliance.industries.gaming') },
+    { value: 'general', label: t('compliance.industries.general') },
+  ]
+}
+
+export const Route = createLazyFileRoute('/_nav/knowledge/compliance/')({ component: CompliancePage })
+
+function CompliancePage() {
+  const { t } = useTranslation('knowledge')
+  const navigate = useNavigate()
+  const industryOptions = buildIndustryOptions(t)
+  const industryGroups = [
+    { key: 'industry', label: t('compliance.index.industry'), options: industryOptions },
+  ]
+  const [scope, setScope] = useState<'all' | 'private' | 'share' | 'favorite'>('all')
+  const [search, setSearch] = useState('')
+  const [industry, setIndustry] = useState<string | undefined>()
+  const [tag, setTag] = useState<string | undefined>()
+  const { data: tagList } = useQuery({
+    queryKey: ['entity-tags', 'compliance'],
+    queryFn: () => getEntityTagsFn({ data: { entityType: 'compliance' } }),
+  })
+  const { data } = useQuery({
+    queryKey: ['compliance', scope, search, industry, tag],
+    queryFn: () => listComplianceFn({ data: { scope, search: search || undefined, industry, tag: tag || undefined } }),
+    placeholderData: keepPreviousData,
+  })
+
+  return (
+    <div className="relative flex min-h-full flex-col overflow-hidden">
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-85 overflow-hidden">
+        <AnimatedGridPattern
+          numSquares={30}
+          maxOpacity={0.1}
+          duration={3}
+          repeatDelay={1}
+          width={27}
+          height={27}
+          x={-6}
+          y={0}
+          className={cn("mask-[linear-gradient(to_bottom,white_80%,transparent)] absolute inset-0 h-full w-full fill-emerald-500/20 stroke-emerald-500/20")}
+        />
+      </div>
+      <div className="relative z-10 flex h-full flex-col gap-4 p-4">
+        <h1 className="text-center text-[46px] font-semibold mt-10">
+          {t('compliance.index.titleA')}
+          <AuroraText colors={["#006B5A", "#009E86", "#00C49F", "#42E0C0"]}>
+            {t('compliance.index.titleB')}
+          </AuroraText>
+        </h1>
+        <KnowledgeSearchBar
+          search={search}
+          onSearchChange={setSearch}
+          onCreate={async () => {
+            const r = await createComplianceFn({ data: { title: t('compliance.index.untitled'), industry: '', tags: [] } })
+            navigate({ to: '/knowledge/compliance/edit/$id', params: { id: r.id } })
+          }}
+          createLabel={t('compliance.index.add')}
+        />
+        <KnowledgeFilters
+          scope={scope}
+          onScopeChange={setScope}
+          groups={industryGroups}
+          active={{ industry }}
+          onChange={(k, v) => k === 'industry' && setIndustry(v)}
+        />
+        <TagFilter tags={tagList ?? []} activeTag={tag} onChange={setTag} />
+        <div className="mx-auto w-full max-w-2xl flex-1 overflow-auto mt-4">
+          {data?.items.length ? (
+            <KnowledgeCardGrid>
+              {data.items.map((it) => (
+                <KnowledgeCard key={it.id} item={it} type="compliance" to="/knowledge/compliance/$id" />
+              ))}
+            </KnowledgeCardGrid>
+          ) : (
+            <EmptyState />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/routes/_nav/knowledge/compliance/route.tsx

@@ -0,0 +1,22 @@
+// 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 { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_nav/knowledge/compliance')({
+  component: () => <Outlet />,
+})