@allbluecn/admin-app 0.3.2 → 0.3.4

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

@@ -15,10 +15,10 @@
 // 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, Outlet, useLocation } from '@tanstack/react-router'
+import { createLazyFileRoute, Link, Outlet, useLocation } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
-import { SidebarTrigger } from '@/components/ui/sidebar'
-import { Separator } from '@/components/ui/separator'
+import { SidebarTrigger } from '@allbluecn/ui/sidebar'
+import { Separator } from '@allbluecn/ui/separator'
 
 export const Route = createLazyFileRoute('/_nav/monitoring')({
   component: MonitoringLayout,
@@ -46,16 +46,16 @@ function MonitoringLayout() {
         <Separator orientation="vertical" className="mr-2 h-4" />
         <nav className="flex gap-1">
           {subNavItems.map((item) => (
-            <a
+            <Link
               key={item.id}
-              href={item.path}
+              to={item.path}
               className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${currentId === item.id
                 ? 'bg-accent text-accent-foreground'
                 : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
                 }`}
             >
               {item.label}
-            </a>
+            </Link>
           ))}
         </nav>
       </header>

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

@@ -18,10 +18,10 @@
 import { createLazyFileRoute, useRouter } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
 import * as Sentry from '@sentry/tanstackstart-react'
-import { BugPlay, ExternalLink, Bug, Activity, AlertTriangle, Eye, EyeOff, Save, RotateCcw, CheckCircle2, XCircle, RefreshCw, ShieldCheck } from 'lucide-react'
+import { BugPlay, ExternalLink, Bug, Activity, Eye, EyeOff, Save, CheckCircle2, XCircle, RefreshCw, ShieldCheck } from 'lucide-react'
 import { IconBrandSentry } from '@tabler/icons-react';
 import { useEffect, useState } from 'react'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import { getSentryConfig, saveSentryConfig, reconfigureSentryServer } from '@/server/serverFns/sentry/config'
 import type { SentryConfig } from '@/server/serverFns/sentry/config'
 

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

@@ -2,36 +2,15 @@ import { createLazyFileRoute, Link, useLocation } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
 import { getLocale } from '@/paraglide/runtime.js'
 import { useServerFn } from '@tanstack/react-start'
-import { toast } from '@/components/ui/toast'
-import { useCallback, useEffect, useState } from 'react'
+import { toast } from '@allbluecn/ui/toast'
+import { 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 { Badge } from '@allbluecn/ui/badge'
+import { Button } from '@allbluecn/ui/button'
 import {
   Table,
   TableBody,
@@ -39,57 +18,10 @@ import {
   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' },
-]
+} from '@allbluecn/ui/table'
+import { CreateRoleDialog } from '@/components/permissions/create-role-dialog'
+import { AssignDialog } from '@/components/permissions/assign-dialog'
+import type { RoleItem } from '@/components/permissions/types'
 
 export const Route = createLazyFileRoute('/_nav/permissions')({
   pendingComponent: () => (
@@ -100,222 +32,6 @@ export const Route = createLazyFileRoute('/_nav/permissions')({
   component: PermissionsPage,
 })
 
-function CreateRoleDialog({
-  open,
-  onOpenChange,
-  workspaceId,
-  i18nLang,
-  onCreated,
-}: {
-  open: boolean
-  onOpenChange: (v: boolean) => void
-  workspaceId: string
-  i18nLang: string
-  onCreated: () => void
-}): React.ReactElement {
-  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(m.enterprise_permissions_toast_nameRequired())
-      return
-    }
-    await createRole({
-      data: {
-        workspaceId,
-        name: name.trim(),
-        permissions,
-      },
-    })
-    toast.success(m.enterprise_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>{m.enterprise_permissions_createRole()}</DialogTitle>
-          <DialogDescription>{m.enterprise_permissions_createRoleDesc()}</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div className="grid gap-2">
-            <Label htmlFor="role-name">{m.enterprise_permissions_roleName()}</Label>
-            <Input
-              id="role-name"
-              value={name}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
-              placeholder={m.enterprise_permissions_roleNamePlaceholder()}
-              autoFocus
-            />
-          </div>
-
-          <div className="space-y-3">
-            <Label>{m.enterprise_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)}>
-            {m.enterprise_permissions_dialog_cancel()}
-          </Button>
-          <Button onClick={handleSubmit}>{m.enterprise_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 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: any) => 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(m.enterprise_permissions_toast_assigned())
-    setSearchUser('')
-    onAssigned()
-  }
-
-  const handleUnassign = async (assignmentId: string) => {
-    await unassignRole({ data: { assignmentId } })
-    toast.success(m.enterprise_permissions_toast_unassigned())
-    setAssignments(assignments.filter((a) => a.id !== assignmentId))
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-lg">
-        <DialogHeader>
-          <DialogTitle>
-            {m.enterprise_permissions_assign({ name: role?.name ?? '' })}
-          </DialogTitle>
-          <DialogDescription>{m.enterprise_permissions_assignDesc()}</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div className="flex gap-2">
-            <Input
-              value={searchUser}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchUser(e.target.value)}
-              placeholder={m.enterprise_permissions_searchUserPlaceholder()}
-            />
-            <Button onClick={handleAssign} disabled={!searchUser.trim()}>
-              {m.enterprise_permissions_assignUser()}
-            </Button>
-          </div>
-
-          {assignments.length === 0 ? (
-            <p className="text-sm text-muted-foreground">{m.enterprise_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)}
-                      >
-                        {m.enterprise_permissions_unassign()}
-                      </button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {m.enterprise_permissions_dialog_close()}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
 function PermissionsPage(): React.ReactElement {
   const location = useLocation()
   const selectedWorkspaceId =
@@ -358,6 +74,16 @@ function PermissionsPage(): React.ReactElement {
     setAssignDialogOpen(true)
   }
 
+  const refetchRoles = () => {
+    if (selectedWorkspaceId) {
+      listRoles({ data: { workspaceId: selectedWorkspaceId } })
+        .then((result: any) => {
+          const data = result as { items: RoleItem[] }
+          setRoles(data.items)
+        })
+    }
+  }
+
   const PERMISSION_LEVELS: Record<string, () => string> = {
     admin: () => m.enterprise_permissions_level_admin(),
     write: () => m.enterprise_permissions_level_write(),
@@ -471,15 +197,7 @@ function PermissionsPage(): React.ReactElement {
         onOpenChange={setCreateDialogOpen}
         workspaceId={selectedWorkspaceId}
         i18nLang={getLocale()}
-        onCreated={() => {
-          if (selectedWorkspaceId) {
-            listRoles({ data: { workspaceId: selectedWorkspaceId } })
-              .then((result: any) => {
-                const data = result as { items: RoleItem[] }
-                setRoles(data.items)
-              })
-          }
-        }}
+        onCreated={refetchRoles}
       />
 
       <AssignDialog
@@ -487,16 +205,8 @@ function PermissionsPage(): React.ReactElement {
         onOpenChange={setAssignDialogOpen}
         role={selectedRole}
         i18nLang={getLocale()}
-        onAssigned={() => {
-          if (selectedWorkspaceId) {
-            listRoles({ data: { workspaceId: selectedWorkspaceId } })
-              .then((result: any) => {
-                const data = result as { items: RoleItem[] }
-                setRoles(data.items)
-              })
-          }
-        }}
+        onAssigned={refetchRoles}
       />
     </div>
   )
-}
+}

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

@@ -16,7 +16,7 @@
 // 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'
+import { listWorkspacesFn } from '@/server/serverFns/permissions'
 
 export const Route = createFileRoute('/_nav/permissions')({
   loader: async () => {

package/src/routes/_nav/route.tsx

@@ -15,20 +15,12 @@
 // 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'
+import { createFileRoute } from '@tanstack/react-router'
+import { requireAdminPage } from '@/lib/auth/page-gate'
 
 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' })
-    }
+  beforeLoad: ({ context, location }) => {
+    // session 已由 __root beforeLoad 注入 context，无需重复调 getSessionFn（每次导航多一次 RPC）
+    requireAdminPage({ context, location })
   },
 })

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

@@ -18,10 +18,10 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
 import { useServerFn } from '@tanstack/react-start'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import type React from 'react'
 import { deleteSsoProviderFn, toggleSsoProviderFn } from '@/server/serverFns/sso-config'
-import { Badge } from '@/components/ui/badge'
+import { Badge } from '@allbluecn/ui/badge'
 
 export const Route = createLazyFileRoute('/_nav/sso')({
   pendingComponent: () => (
@@ -39,7 +39,6 @@ function SsoConfigPage(): React.ReactElement {
       workspaceId: string
       type: string
       name: string
-      config: Record<string, unknown>
       domain: string | null
       enabled: boolean
       createdAt: string