@allbluecn/admin-app 0.3.2 → 0.3.3

package/src/components/auth/password-input.tsx

@@ -17,8 +17,8 @@
 
 import { useState } from 'react'
 import { m } from '@/paraglide/messages.js'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
 import { Lock } from 'lucide-react'
 
 interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {

package/src/components/component/component-form-dialog.tsx

@@ -17,28 +17,28 @@
 
 import { useState, useEffect } from 'react'
 import { m } from '@/paraglide/messages.js'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
-import { Switch } from '@/components/ui/switch'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
+import { Textarea } from '@allbluecn/ui/textarea'
+import { Switch } from '@allbluecn/ui/switch'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from '@allbluecn/ui/select'
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
-import { getComponent, ComponentPreview } from '@allbluecn/web-app/prototype'
+} from '@allbluecn/ui/dialog'
+import { ComponentPreview } from './component-preview'
 import { createComponentFn, updateComponentFn } from '@/server/serverFns/components/mutations'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import type { ComponentItem } from './component-table'
 
 const CATEGORY_KEYS = ['base', 'block', 'template'] as const
@@ -153,19 +153,11 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
     if (!component) {
       return <span className="text-xs text-muted-foreground">{m.common_component_form_previewUnavailable()}</span>
     }
-    const config = getComponent(component.prototypeKey ?? '')
-    const Comp = config?.component
-    if (Comp) {
-      return (
-        <div className="pointer-events-none flex h-full w-full items-center justify-center overflow-hidden p-3">
-          <Comp props={propsState} style={(component.defaultStyle as Record<string, any>) ?? {}} />
-        </div>
-      )
-    }
     return (
       <ComponentPreview
         type={component.type}
         name={component.name}
+        prototypeKey={component.prototypeKey}
         defaultProps={propsState}
         defaultStyle={component.defaultStyle as Record<string, any>}
         size="md"

package/src/components/component/component-import-dialog.tsx

@@ -16,16 +16,16 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from '@allbluecn/ui/select'
 import {
   Dialog,
   DialogContent,
@@ -33,9 +33,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
+} from '@allbluecn/ui/dialog'
 import { importComponentFn } from '@/server/serverFns/components/import'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import { Loader2, Sparkles } from 'lucide-react'
 import { cn } from '@/lib/utils'
 

package/src/components/component/component-preview.tsx

@@ -0,0 +1,311 @@
+// 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 { memo, useMemo, type CSSProperties, type FC } from 'react'
+import { Image as ImageIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface ComponentPreviewProps {
+  type: string
+  name: string
+  prototypeKey?: string | null
+  defaultProps?: Record<string, unknown> | null
+  defaultStyle?: Record<string, unknown> | null
+  size: 'sm' | 'md' | 'grid'
+  className?: string
+}
+
+interface PrototypeRendererProps {
+  props?: Record<string, unknown> | null
+  style?: CSSProperties
+}
+
+function PrototypeButton({ props, style }: PrototypeRendererProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '8px 16px',
+        borderRadius: '6px',
+        background: 'var(--primary)',
+        color: 'var(--primary-foreground)',
+        fontSize: '14px',
+        fontWeight: 500,
+        cursor: 'default',
+        border: '1px solid var(--primary)',
+        ...style,
+      }}
+    >
+      {textOf(props) || '按钮'}
+    </div>
+  )
+}
+
+function PrototypeInput({ props, style }: PrototypeRendererProps) {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        padding: '8px 12px',
+        border: '1px solid var(--input)',
+        borderRadius: '6px',
+        background: 'var(--background)',
+        fontSize: '14px',
+        color: 'var(--muted-foreground)',
+        cursor: 'default',
+        ...style,
+      }}
+    >
+      {textOf(props) || '输入框'}
+    </div>
+  )
+}
+
+function PrototypeText({ props, style }: PrototypeRendererProps) {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        padding: '4px 0',
+        fontSize: '14px',
+        color: 'var(--foreground)',
+        lineHeight: 1.6,
+        wordBreak: 'break-word',
+        ...style,
+      }}
+    >
+      {textOf(props) || '文本内容'}
+    </div>
+  )
+}
+
+function PrototypeCard({ props, style }: PrototypeRendererProps) {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        borderRadius: '8px',
+        border: '1px solid var(--border)',
+        background: 'var(--card)',
+        boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
+        padding: '16px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        ...style,
+      }}
+    >
+      <div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+        {titleOf(props) || '卡片标题'}
+      </div>
+      <div style={{ flex: 1, borderRadius: '4px', background: 'var(--muted)', minHeight: '24px' }} />
+    </div>
+  )
+}
+
+function PrototypeImage({ props, style }: PrototypeRendererProps) {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        background: 'var(--muted)',
+        border: '1px dashed var(--border)',
+        borderRadius: '6px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'var(--muted-foreground)',
+        fontSize: '12px',
+        ...style,
+      }}
+    >
+      <div className="flex flex-col items-center justify-center gap-3">
+        <ImageIcon size={24} />
+        <span>{textOf(props) || '图片'}</span>
+      </div>
+    </div>
+  )
+}
+
+function PrototypeGeneric({ props, style }: PrototypeRendererProps) {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'var(--muted)',
+        border: '1px dashed var(--border)',
+        borderRadius: '4px',
+        fontSize: '12px',
+        color: 'var(--muted-foreground)',
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      {textOf(props) || '自定义组件'}
+    </div>
+  )
+}
+
+const PROTOTYPE_RENDERERS: Record<string, FC<PrototypeRendererProps>> = {
+  button: PrototypeButton,
+  input: PrototypeInput,
+  text: PrototypeText,
+  card: PrototypeCard,
+  image: PrototypeImage,
+}
+
+const SAFE_STYLE_KEYS = new Set([
+  'background', 'backgroundColor', 'color', 'borderRadius',
+  'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+  'margin', 'fontSize', 'fontWeight', 'fontFamily', 'textAlign',
+  'border', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft',
+  'borderColor', 'borderWidth', 'borderStyle',
+  'boxShadow', 'opacity',
+  'width', 'height', 'minWidth', 'minHeight',
+  'display', 'flexDirection', 'alignItems', 'justifyContent', 'gap',
+  'overflow', 'textOverflow', 'whiteSpace',
+])
+
+function textOf(props: Record<string, unknown> | null | undefined): string {
+  if (!props) return ''
+  for (const key of ['text', 'label', 'title', 'content', 'placeholder', 'value', 'alt', 'children']) {
+    const val = props[key]
+    if (typeof val === 'string' && val.trim()) return val
+  }
+  return ''
+}
+
+function titleOf(props: Record<string, unknown> | null | undefined): string {
+  if (!props) return ''
+  const val = props.title
+  return typeof val === 'string' && val.trim() ? val : ''
+}
+
+function extractStyle(defaultStyle: Record<string, unknown> | null | undefined): Record<string, unknown> {
+  if (!defaultStyle) return {}
+  const safe: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(defaultStyle)) {
+    if (SAFE_STYLE_KEYS.has(key)) safe[key] = value
+  }
+  return safe
+}
+
+const SIZE_CLASSES: Record<string, string> = {
+  sm: 'w-15 h-7 text-[9px]',
+  md: 'w-full min-h-40',
+  grid: 'w-full aspect-[4/3]',
+}
+
+function ComponentPreviewInner({
+  type,
+  name,
+  prototypeKey,
+  defaultProps,
+  defaultStyle,
+  size,
+  className,
+}: ComponentPreviewProps) {
+  const style = useMemo(() => extractStyle(defaultStyle), [defaultStyle])
+  const text = useMemo(() => textOf(defaultProps) || name, [defaultProps, name])
+  const prototypeRenderer = prototypeKey ? PROTOTYPE_RENDERERS[prototypeKey] : undefined
+
+  if (type === 'prototype') {
+    const Renderer = prototypeRenderer ?? PrototypeGeneric
+    return (
+      <div
+        className={cn(
+          'flex items-center justify-center overflow-hidden rounded border border-border/40 bg-background p-1',
+          SIZE_CLASSES[size],
+          className
+        )}
+      >
+        <Renderer props={defaultProps ?? undefined} style={style as CSSProperties} />
+      </div>
+    )
+  }
+
+  if (type === 'component') {
+    return (
+      <div
+        className={cn(
+          'flex items-center justify-center overflow-hidden rounded border border-border/40 bg-background',
+          SIZE_CLASSES[size],
+          className
+        )}
+        style={style as React.CSSProperties}
+      >
+        <span className="truncate px-1 leading-tight text-center">{text}</span>
+      </div>
+    )
+  }
+
+  if (type === 'block') {
+    return (
+      <div
+        className={cn(
+          'flex flex-col items-center justify-center overflow-hidden rounded border border-border/40 bg-background p-1',
+          SIZE_CLASSES[size],
+          className
+        )}
+        style={style as React.CSSProperties}
+      >
+        <div className="w-full h-1 rounded-sm bg-muted-foreground/20 mb-0.5" />
+        <div className="flex-1 w-full rounded-sm bg-muted-foreground/10" />
+        <span className="text-[8px] text-muted-foreground/60 mt-0.5 uppercase tracking-wider">
+          block
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col overflow-hidden rounded border border-border/40 bg-background p-0.5 gap-0.5',
+        SIZE_CLASSES[size],
+        className
+      )}
+      style={style as React.CSSProperties}
+    >
+      <div className="w-full h-1 rounded-sm bg-muted-foreground/20" />
+      <div className="flex w-full flex-1 gap-0.5">
+        <div className="w-1/4 h-full rounded-sm bg-muted-foreground/10" />
+        <div className="flex-1 h-full rounded-sm bg-muted-foreground/5" />
+      </div>
+      <span className="text-[7px] text-muted-foreground/50 uppercase">template</span>
+    </div>
+  )
+}
+
+export const ComponentPreview = memo(ComponentPreviewInner)

package/src/components/component/component-table.tsx

@@ -17,8 +17,8 @@
 
 import { Edit, Trash2 } from 'lucide-react'
 import { m } from '@/paraglide/messages.js'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
+import { Badge } from '@allbluecn/ui/badge'
+import { Button } from '@allbluecn/ui/button'
 import {
   Table,
   TableBody,
@@ -26,7 +26,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/components/ui/table'
+} from '@allbluecn/ui/table'
 import { cn } from '@/lib/utils'
 
 export interface ComponentItem {

package/src/components/dependency/changelog-dialog.tsx

@@ -21,14 +21,14 @@ import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 import { ExternalLink, FileText } from "lucide-react"
 import type { ThirdPartyDependencyRow } from "@allbluecn/kernel"
-import { Button } from "@/components/ui/button"
+import { Button } from "@allbluecn/ui/button"
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog"
+} from "@allbluecn/ui/dialog"
 
 export function ChangelogDialog({ row }: { row: ThirdPartyDependencyRow }) {
   const [open, setOpen] = useState(false)

package/src/components/dependency/columns.tsx

@@ -29,9 +29,9 @@ import {
   type ThirdPartyDependencyRow,
   type VersionStatus,
 } from "@allbluecn/kernel"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { Badge } from "@allbluecn/ui/badge"
+import { Button } from "@allbluecn/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip"
 import { cn } from "@/lib/utils"
 import { EditDependencyDialog } from "./edit-dialog"
 import { ChangelogDialog } from "./changelog-dialog"

package/src/components/dependency/dependency-table.tsx

@@ -22,7 +22,7 @@ import {
   useTable,
   type PaginationState,
 } from "@tanstack/react-table"
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import { RefreshCw, Search, TriangleAlert, Loader2 } from "lucide-react"
 import {
   DEPENDENCY_CATEGORIES,
@@ -31,10 +31,10 @@ import {
   type VersionStatus,
 } from "@allbluecn/kernel"
 import { syncAllDependenciesFn, syncDependencyFn } from "@/server/serverFns/dependency/sync"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Badge } from "@allbluecn/ui/badge"
+import { Button } from "@allbluecn/ui/button"
+import { Input } from "@allbluecn/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@allbluecn/ui/select"
 import {
   Table,
   TableBody,
@@ -42,7 +42,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@allbluecn/ui/table"
 import {
   Pagination,
   PaginationContent,
@@ -51,7 +51,7 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@/components/ui/pagination"
+} from "@allbluecn/ui/pagination"
 import { cn } from "@/lib/utils"
 import { dependencyTableFeatures, getDependencyColumns } from "./columns"
 

package/src/components/dependency/edit-dialog.tsx

@@ -17,7 +17,7 @@
 
 import { useState } from "react"
 import { m } from '@/paraglide/messages.js'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import { Loader2, Pencil } from "lucide-react"
 import {
   DEPENDENCY_CATEGORIES,
@@ -26,13 +26,13 @@ import {
   type ThirdPartyDependencyRow,
 } from "@allbluecn/kernel"
 import { updateDependencyFn } from "@/server/serverFns/dependency/update"
-import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } 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 { Textarea } from "@/components/ui/textarea"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { Button } from "@allbluecn/ui/button"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@allbluecn/ui/dialog"
+import { Input } from "@allbluecn/ui/input"
+import { Label } from "@allbluecn/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@allbluecn/ui/select"
+import { Textarea } from "@allbluecn/ui/textarea"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip"
 
 export function EditDependencyDialog({
   row,

package/src/components/invitations/invitations-page.tsx

@@ -19,15 +19,15 @@ import { useState } from "react"
 import type React from "react"
 import { m } from "@/paraglide/messages.js"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { toast } from "@/components/ui/toast"
+import { toast } from "@allbluecn/ui/toast"
 import { Ticket, Plus, Copy, Ban, CheckCircle2, Trash2, Users } from "lucide-react"
 import { PageHeader } from "@/components/common/page-header"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { Skeleton } from "@/components/ui/skeleton"
+import { Button } from "@allbluecn/ui/button"
+import { Badge } from "@allbluecn/ui/badge"
+import { Input } from "@allbluecn/ui/input"
+import { Label } from "@allbluecn/ui/label"
+import { Switch } from "@allbluecn/ui/switch"
+import { Skeleton } from "@allbluecn/ui/skeleton"
 import {
   Dialog,
   DialogContent,
@@ -35,17 +35,8 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
+} from "@allbluecn/ui/dialog"
+import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog"
 import {
   Table,
   TableBody,
@@ -53,13 +44,13 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@allbluecn/ui/table"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { Card, CardContent } from "@/components/ui/card"
+} from "@allbluecn/ui/tooltip"
+import { Card, CardContent } from "@allbluecn/ui/card"
 import {
   listInvitationCodesFn,
   createInvitationCodeFn,
@@ -68,7 +59,7 @@ import {
   getRegistrationModeFn,
   setRegistrationModeFn,
 } from "@/server/serverFns/invitations"
-import { formatTimestamp } from "@allbluecn/web-app/lib/datetime"
+import { formatTimestamp } from "@allbluecn/ui/lib/datetime"
 
 type RegistrationMode = "invite" | "open"
 
@@ -448,35 +439,21 @@ export function InvitationsPage(): React.ReactElement {
         </DialogContent>
       </Dialog>
 
-      <AlertDialog
+      <ConfirmDialog
         open={!!pendingDelete}
         onOpenChange={(open: boolean) => !open && setPendingDelete(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {m["admin-invitations_delete_confirm_title"]({
-                code: pendingDelete?.code ?? "",
-              })}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {m["admin-invitations_delete_confirm_desc"]()}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{m.common_common_cancel()}</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              disabled={deleteMutation.isPending}
-              onClick={() =>
-                pendingDelete && deleteMutation.mutate(pendingDelete.id)
-              }
-            >
-              {m["admin-invitations_action_delete"]()}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+        title={m["admin-invitations_delete_confirm_title"]({
+          code: pendingDelete?.code ?? "",
+        })}
+        description={m["admin-invitations_delete_confirm_desc"]()}
+        cancelLabel={m.common_common_cancel()}
+        confirmLabel={m["admin-invitations_action_delete"]()}
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+        confirmDisabled={deleteMutation.isPending}
+        onConfirm={() =>
+          pendingDelete && deleteMutation.mutate(pendingDelete.id)
+        }
+      />
 
       <Dialog
         open={!!usesViewer}