@allbluecn/admin-app 0.1.0

package/src/routes/_nav/permissions/route.lazy.tsx

@@ -0,0 +1,504 @@
+import { createLazyFileRoute, Link, useLocation } from '@tanstack/react-router'
+import { useServerFn } from '@tanstack/react-start'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { useCallback, useEffect, useState } from 'react'
+import type React from 'react'
+import {
+  listRolesFn,
+  deleteRoleFn,
+  createRoleFn,
+  assignRoleFn,
+  unassignRoleFn,
+  listRoleAssignmentsFn,
+} from '@/server/serverFns/permissions'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+
+type ResourcePermission = Record<string, 'admin' | 'write' | 'read' | 'none'>
+
+type RoleItem = {
+  id: string
+  name: string
+  permissions: ResourcePermission
+  isSystem: boolean
+  _count: { assignments: number }
+}
+
+type AssignmentItem = {
+  id: string
+  roleId: string
+  userId: string
+  user: {
+    id: string
+    username: string
+    email: string
+  }
+  createdAt: string | Date
+}
+
+type SearchUser = {
+  id: string
+  username: string
+  email: string
+}
+
+const ALL_RESOURCES: { key: string; labelZh: string; labelEn: string }[] = [
+  { key: 'knowledge', labelZh: '知识库', labelEn: 'Knowledge' },
+  { key: 'story', labelZh: '故事', labelEn: 'Story' },
+  { key: 'user', labelZh: '用户', labelEn: 'User' },
+  { key: 'setting', labelZh: '设置', labelEn: 'Setting' },
+  { key: 'billing', labelZh: '计费', labelEn: 'Billing' },
+]
+
+const ALL_ACTIONS: { key: string; labelZh: string; labelEn: string }[] = [
+  { key: 'read', labelZh: '读', labelEn: 'Read' },
+  { key: 'write', labelZh: '写', labelEn: 'Write' },
+  { key: 'delete', labelZh: '删', labelEn: 'Delete' },
+  { key: 'publish', labelZh: '发布', labelEn: 'Publish' },
+]
+
+const LEVELS: { value: 'none' | 'read' | 'write' | 'admin'; labelZh: string; labelEn: string }[] = [
+  { value: 'none', labelZh: '无', labelEn: 'None' },
+  { value: 'read', labelZh: '读', labelEn: 'Read' },
+  { value: 'write', labelZh: '写', labelEn: 'Write' },
+  { value: 'admin', labelZh: '管理', labelEn: 'Admin' },
+]
+
+export const Route = createLazyFileRoute('/_nav/permissions')({
+  pendingComponent: () => (
+    <div className="flex h-64 items-center justify-center">
+      <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+  ),
+  component: PermissionsPage,
+})
+
+function CreateRoleDialog({
+  open,
+  onOpenChange,
+  workspaceId,
+  i18nLang,
+  onCreated,
+}: {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  workspaceId: string
+  i18nLang: string
+  onCreated: () => void
+}): React.ReactElement {
+  const { t } = useTranslation('enterprise')
+  const createRole = useServerFn(createRoleFn)
+  const [name, setName] = useState('')
+  const [permissions, setPermissions] = useState<ResourcePermission>({})
+  const isZh = i18nLang === 'zh'
+
+  useEffect(() => {
+    if (open) {
+      setName('')
+      setPermissions({})
+    }
+  }, [open])
+
+  const handleLevelChange = useCallback((resource: string, action: string, value: string) => {
+    const level = (value as 'none' | 'read' | 'write' | 'admin') || 'none'
+    setPermissions((prev) => ({ ...prev, [`${resource}:${action}`]: level }))
+  }, [])
+
+  const handleSubmit = async () => {
+    if (!name.trim()) {
+      toast.warning(t('permissions.toast.nameRequired'))
+      return
+    }
+    await createRole({
+      data: {
+        workspaceId,
+        name: name.trim(),
+        permissions,
+      },
+    })
+    toast.success(t('permissions.toast.created', { name: name.trim() }))
+    onOpenChange(false)
+    onCreated()
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{t('permissions.createRole')}</DialogTitle>
+          <DialogDescription>{t('permissions.createRoleDesc')}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="grid gap-2">
+            <Label htmlFor="role-name">{t('permissions.roleName')}</Label>
+            <Input
+              id="role-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t('permissions.roleNamePlaceholder')}
+              autoFocus
+            />
+          </div>
+
+          <div className="space-y-3">
+            <Label>{t('permissions.permissionsMatrix')}</Label>
+            {ALL_RESOURCES.map((resource) => (
+              <div key={resource.key} className="space-y-2">
+                <span className="text-sm font-medium">{isZh ? resource.labelZh : resource.labelEn}</span>
+                <div className="grid grid-cols-4 gap-2">
+                  {ALL_ACTIONS.map((action) => (
+                    <Select
+                      key={action.key}
+                      value={permissions[`${resource.key}:${action.key}`] || 'none'}
+                      onValueChange={(value) => handleLevelChange(resource.key, action.key, value)}
+                    >
+                      <SelectTrigger className="h-8">
+                        <SelectValue>
+                          {isZh ? resource.labelEn : resource.labelZh} / {isZh ? action.labelZh : action.labelEn}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {LEVELS.map((level) => (
+                          <SelectItem key={level.value} value={level.value}>
+                            {isZh ? level.labelZh : level.labelEn}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('permissions.dialog.cancel')}
+          </Button>
+          <Button onClick={handleSubmit}>{t('permissions.dialog.create')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function AssignDialog({
+  open,
+  onOpenChange,
+  role,
+  i18nLang,
+  onAssigned,
+}: {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  role: RoleItem | null
+  i18nLang: string
+  onAssigned: () => void
+}): React.ReactElement {
+  const { t } = useTranslation('enterprise')
+  const assignRole = useServerFn(assignRoleFn)
+  const unassignRole = useServerFn(unassignRoleFn)
+  const listAssignments = useServerFn(listRoleAssignmentsFn)
+  const [assignments, setAssignments] = useState<AssignmentItem[]>([])
+  const [searchUser, setSearchUser] = useState('')
+  const isZh = i18nLang === 'zh'
+
+  useEffect(() => {
+    if (open && role) {
+      listAssignments({ data: { roleId: role.id } })
+        .then((result) => setAssignments(result))
+        .catch(() => setAssignments([]))
+    }
+  }, [open, role, listAssignments])
+
+  const handleAssign = async () => {
+    if (!searchUser.trim() || !role) return
+    await assignRole({ data: { userId: searchUser.trim(), roleId: role.id } })
+    toast.success(t('permissions.toast.assigned'))
+    setSearchUser('')
+    onAssigned()
+  }
+
+  const handleUnassign = async (assignmentId: string) => {
+    await unassignRole({ data: { assignmentId } })
+    toast.success(t('permissions.toast.unassigned'))
+    setAssignments(assignments.filter((a) => a.id !== assignmentId))
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            {t('permissions.assign', { name: role?.name })}
+          </DialogTitle>
+          <DialogDescription>{t('permissions.assignDesc')}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="flex gap-2">
+            <Input
+              value={searchUser}
+              onChange={(e) => setSearchUser(e.target.value)}
+              placeholder={t('permissions.searchUserPlaceholder')}
+            />
+            <Button onClick={handleAssign} disabled={!searchUser.trim()}>
+              {t('permissions.assignUser')}
+            </Button>
+          </div>
+
+          {assignments.length === 0 ? (
+            <p className="text-sm text-muted-foreground">{t('permissions.noAssignments')}</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{isZh ? '用户' : 'User'}</TableHead>
+                  <TableHead>{isZh ? '邮箱' : 'Email'}</TableHead>
+                  <TableHead>{isZh ? '操作' : 'Actions'}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {assignments.map((a) => (
+                  <TableRow key={a.id}>
+                    <TableCell className="font-medium">{a.user?.username || a.userId}</TableCell>
+                    <TableCell>{a.user?.email || '-'}</TableCell>
+                    <TableCell>
+                      <button
+                        type="button"
+                        className="text-destructive hover:underline"
+                        onClick={() => handleUnassign(a.id)}
+                      >
+                        {t('permissions.unassign')}
+                      </button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('permissions.dialog.close')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function PermissionsPage(): React.ReactElement {
+  const { t, i18n } = useTranslation('enterprise')
+  const location = useLocation()
+  const selectedWorkspaceId =
+    (location.search as { workspaceId?: string }).workspaceId ??
+    (Route.useLoaderData() as {
+      workspaces: Array<{ id: string; name: string }>
+    }).workspaces[0]?.id ??
+    ''
+
+  const [roles, setRoles] = useState<RoleItem[]>([])
+  const [createDialogOpen, setCreateDialogOpen] = useState(false)
+  const [assignDialogOpen, setAssignDialogOpen] = useState(false)
+  const [selectedRole, setSelectedRole] = useState<RoleItem | null>(null)
+  const listRoles = useServerFn(listRolesFn)
+  const deleteRole = useServerFn(deleteRoleFn)
+
+  useEffect(() => {
+    if (selectedWorkspaceId) {
+      listRoles({ data: { workspaceId: selectedWorkspaceId } })
+        .then((result) => {
+          const data = result as { items: RoleItem[]; total: number; seeded: string }
+          setRoles(data.items)
+        })
+        .catch(() => setRoles([]))
+    }
+  }, [selectedWorkspaceId, listRoles])
+
+  const handleDelete = async (role: RoleItem) => {
+    if (role.isSystem) {
+      toast.info(t('permissions.toast.systemRole'))
+      return
+    }
+    await deleteRole({ data: { roleId: role.id } })
+    toast.success(t('permissions.toast.deleted', { name: role.name }))
+    setRoles(roles.filter((r) => r.id !== role.id))
+  }
+
+  const handleOpenAssign = (role: RoleItem) => {
+    setSelectedRole(role)
+    setAssignDialogOpen(true)
+  }
+
+  const PERMISSION_LEVELS: Record<string, () => string> = {
+    admin: () => t('permissions.level.admin'),
+    write: () => t('permissions.level.write'),
+    read: () => t('permissions.level.read'),
+    none: () => t('permissions.level.none'),
+  }
+
+  const workspaces = (Route.useLoaderData() as {
+    workspaces: Array<{ id: string; name: string }>
+  }).workspaces
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h1 className="text-2xl font-bold">{t('permissions.title')}</h1>
+        <p className="text-sm text-muted-foreground mt-1">{t('permissions.subtitle')}</p>
+      </div>
+
+      {workspaces.length > 0 && (
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">{t('permissions.workspaceLabel')}</span>
+          {workspaces.map((ws) => (
+            <Link
+              key={ws.id}
+              to="/permissions"
+              search={{ workspaceId: ws.id }}
+              className={`inline-flex rounded-md px-3 py-1 text-sm ${
+                ws.id === selectedWorkspaceId
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground hover:bg-muted/80'
+              }`}
+            >
+              {ws.name}
+            </Link>
+          ))}
+        </div>
+      )}
+
+      {roles.length === 0 ? (
+        <div className="rounded-lg border border-border p-8 text-center text-muted-foreground">
+          {t('permissions.empty')}
+        </div>
+      ) : (
+        <div className="rounded-lg border border-border overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('permissions.table.role')}</TableHead>
+                <TableHead>{t('permissions.table.type')}</TableHead>
+                <TableHead>{t('permissions.table.members')}</TableHead>
+                <TableHead>{t('permissions.table.permissions')}</TableHead>
+                <TableHead>{t('permissions.table.actions')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {roles.map((role) => (
+                <TableRow key={role.id}>
+                  <TableCell className="font-medium">{role.name}</TableCell>
+                  <TableCell>
+                    <Badge variant={role.isSystem ? 'default' : 'secondary'}>
+                      {role.isSystem ? t('permissions.type.system') : t('permissions.type.custom')}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>{role._count?.assignments}</TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-1">
+                      {Object.entries(role.permissions || {}).map(([perm, level]) => (
+                        <span
+                          key={perm}
+                          className="inline-flex rounded bg-muted px-1.5 py-0.5 text-xs"
+                        >
+                          {perm.split(':').pop()}:{PERMISSION_LEVELS[level]?.() ?? level}
+                        </span>
+                      ))}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex gap-2 items-center">
+                      <button
+                        type="button"
+                        className="text-primary hover:underline text-sm"
+                        onClick={() => handleOpenAssign(role)}
+                      >
+                        {t('permissions.action.viewAssignments')}
+                      </button>
+                      <button
+                        type="button"
+                        className="text-destructive hover:underline text-sm"
+                        onClick={() => handleDelete(role)}
+                        disabled={role.isSystem}
+                      >
+                        {role.isSystem ? t('permissions.action.notAvailable') : t('permissions.action.delete')}
+                      </button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {selectedWorkspaceId && (
+        <div className="flex justify-end">
+          <Button onClick={() => setCreateDialogOpen(true)}>{t('permissions.action.createRole')}</Button>
+        </div>
+      )}
+
+      <CreateRoleDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+        workspaceId={selectedWorkspaceId}
+        i18nLang={i18n.language}
+        onCreated={() => {
+          if (selectedWorkspaceId) {
+            listRoles({ data: { workspaceId: selectedWorkspaceId } })
+              .then((result) => {
+                const data = result as { items: RoleItem[] }
+                setRoles(data.items)
+              })
+          }
+        }}
+      />
+
+      <AssignDialog
+        open={assignDialogOpen}
+        onOpenChange={setAssignDialogOpen}
+        role={selectedRole}
+        i18nLang={i18n.language}
+        onAssigned={() => {
+          if (selectedWorkspaceId) {
+            listRoles({ data: { workspaceId: selectedWorkspaceId } })
+              .then((result) => {
+                const data = result as { items: RoleItem[] }
+                setRoles(data.items)
+              })
+          }
+        }}
+      />
+    </div>
+  )
+}

package/src/routes/_nav/permissions/route.tsx

@@ -0,0 +1,26 @@
+// 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 } from '@tanstack/react-router'
+import { listRolesFn, listWorkspacesFn } from '@/server/serverFns/permissions'
+
+export const Route = createFileRoute('/_nav/permissions')({
+  loader: async () => {
+    const workspaces = await listWorkspacesFn({ data: {} })
+    return { workspaces, roles: null }
+  },
+})

package/src/routes/_nav/route.lazy.tsx

@@ -0,0 +1,31 @@
+// 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 { Outlet, createLazyFileRoute } from '@tanstack/react-router'
+import Sidebar02 from '@/components/layout/sidebar-02'
+
+export const Route = createLazyFileRoute('/_nav')({
+  component: DashboardLayout,
+})
+
+function DashboardLayout() {
+  return (
+    <Sidebar02>
+      <Outlet />
+    </Sidebar02>
+  )
+}

package/src/routes/_nav/route.tsx

@@ -0,0 +1,34 @@
+// 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, redirect } from '@tanstack/react-router'
+import { getSessionFn } from '@/server/serverFns/auth/session'
+
+export const Route = createFileRoute('/_nav')({
+  beforeLoad: async ({ location }) => {
+    const session = await getSessionFn()
+    if (!session?.user?.id) {
+      throw redirect({
+        to: '/login',
+        search: { redirect: location.pathname + location.searchStr },
+      })
+    }
+    if (session.user.role !== 'ADMIN' && session.user.role !== 'SUPER_ADMIN') {
+      throw redirect({ to: '/login' })
+    }
+  },
+})

package/src/routes/_nav/settings/route.lazy.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 { createLazyFileRoute } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { Settings } from 'lucide-react'
+import { PlaceholderPage } from '@/components/common/placeholder-page'
+
+export const Route = createLazyFileRoute('/_nav/settings')({
+  component: SettingsPage,
+})
+
+function SettingsPage() {
+  const { t } = useTranslation('common')
+  return <PlaceholderPage title={t('settings.title')} icon={Settings} />
+}

package/src/routes/_nav/settings/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 } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_nav/settings')({})