@allbluecn/admin-app 0.1.0

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

@@ -0,0 +1,348 @@
+// 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, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { getComponent, ComponentPreview } from '@allbluecn/web-app/prototype'
+import { createComponentFn, updateComponentFn } from '@/server/serverFns/components/mutations'
+import { toast } from '@/components/ui/sonner'
+import type { ComponentItem } from './component-table'
+
+const CATEGORY_KEYS = ['base', 'block', 'template'] as const
+
+interface ComponentFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  component?: ComponentItem | null
+  onSuccess: () => void
+}
+
+export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }: ComponentFormDialogProps) {
+  const { t } = useTranslation('common')
+  const isEdit = !!component
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [category, setCategory] = useState<string>('base')
+  const [type, setType] = useState<string>('component')
+  const [subCategory, setSubCategory] = useState('')
+  const [defaultWidth, setDefaultWidth] = useState(200)
+  const [defaultHeight, setDefaultHeight] = useState(40)
+  const [tags, setTags] = useState('')
+  const [isHidden, setIsHidden] = useState(false)
+  const [sortOrder, setSortOrder] = useState(0)
+  const [saving, setSaving] = useState(false)
+  const [path, setPath] = useState('')
+  const [propsState, setPropsState] = useState<Record<string, any>>({})
+
+  useEffect(() => {
+    if (!open) return
+    setName(component?.name ?? '')
+    setDescription(component?.description ?? '')
+    setCategory(categoryFromKey(component?.category) ?? 'base')
+    setType(component?.type ?? 'component')
+    setSubCategory(component?.subCategory ?? '')
+    setPath(component?.path ?? '')
+    setDefaultWidth(component?.defaultWidth ?? 200)
+    setDefaultHeight(component?.defaultHeight ?? 40)
+    setTags((component?.tags ?? []).join(', '))
+    setIsHidden(component?.isHidden ?? false)
+    setSortOrder(component?.sortOrder ?? 0)
+    setPropsState((component?.defaultProps as Record<string, any>) ?? {})
+  }, [open, component])
+
+  async function handleSave() {
+    if (!name.trim()) {
+      toast.error(t('component.form.nameRequired'))
+      return
+    }
+    setSaving(true)
+    try {
+      const categoryValue = categoryToDisplay(category)
+      if (isEdit && component) {
+        await updateComponentFn({
+          data: {
+            id: component.id,
+            name: name.trim(),
+            description: description.trim() || undefined,
+            category: categoryValue,
+            type,
+            subCategory: subCategory.trim() || undefined,
+            path: path.trim() || undefined,
+            defaultWidth,
+            defaultHeight,
+            tags: tags.split(',').map((tag) => tag.trim()).filter(Boolean),
+            isHidden,
+            sortOrder,
+            defaultProps: propsState,
+          },
+        })
+        toast.success(t('component.form.updated'))
+      } else {
+        await createComponentFn({
+          data: {
+            name: name.trim(),
+            type,
+            category: categoryValue,
+            description: description.trim() || undefined,
+          },
+        })
+        toast.success(t('component.form.created'))
+      }
+      onSuccess()
+      onOpenChange(false)
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t('component.form.saveFailed'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function categoryToDisplay(k: string): string {
+    const map: Record<string, string> = {
+      base: t('component.categories.base'),
+      block: t('component.categories.block'),
+      template: t('component.categories.template'),
+    }
+    return map[k] ?? k
+  }
+
+  function categoryFromKey(label: string | null | undefined): string | undefined {
+    if (!label) return undefined
+    const zhBase = t('component.categories.base')
+    const zhBlock = t('component.categories.block')
+    const zhTemplate = t('component.categories.template')
+    if (label === zhBase) return 'base'
+    if (label === zhBlock) return 'block'
+    if (label === zhTemplate) return 'template'
+    return undefined
+  }
+
+  function renderPreview() {
+    if (!component) {
+      return <span className="text-xs text-muted-foreground">{t('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}
+        defaultProps={propsState}
+        defaultStyle={component.defaultStyle as Record<string, any>}
+        size="md"
+      />
+    )
+  }
+
+  function renderPropsEditor() {
+    if (!component) return null
+    const schema = (component.config as { props?: Array<{ key: string; type: string; label: string; default: unknown; options?: Array<{ label: string; value: unknown }> }> } | null)?.props ?? []
+    if (schema.length === 0) return null
+    return (
+      <div className="col-span-2 mt-2 space-y-2 border-t pt-3">
+        <Label className="text-muted-foreground">{t('component.form.defaultProps')}</Label>
+        <div className="grid grid-cols-2 gap-3">
+          {schema.map((prop) => {
+            const val = propsState[prop.key] ?? prop.default
+            const setVal = (v: unknown) => setPropsState((s) => ({ ...s, [prop.key]: v }))
+            return (
+              <div key={prop.key} className="space-y-1">
+                <Label className="text-xs text-muted-foreground">{prop.label}</Label>
+                {prop.type === 'boolean' ? (
+                  <Switch checked={!!val} onCheckedChange={setVal} />
+                ) : prop.type === 'number' ? (
+                  <Input type="number" value={Number(val)} onChange={(e) => setVal(Number(e.target.value))} />
+                ) : prop.type === 'color' ? (
+                  <div className="flex gap-2">
+                    <input type="color" value={String(val)} onChange={(e) => setVal(e.target.value)} className="size-8 shrink-0 rounded border" />
+                    <Input value={String(val)} onChange={(e) => setVal(e.target.value)} className="font-mono text-xs" />
+                  </div>
+                ) : prop.type === 'select' && prop.options ? (
+                  <Select value={String(val)} onValueChange={setVal}>
+                    <SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      {prop.options.map((o) => (
+                        <SelectItem key={String(o.value)} value={String(o.value)}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <Input value={String(val ?? '')} onChange={(e) => setVal(e.target.value)} />
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? t('component.form.edit') : t('component.form.create')}</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex min-h-[300px] gap-4">
+          {/* 左侧预览区 */}
+          <div className="flex w-60 shrink-0 flex-col gap-1.5">
+            <Label className="text-muted-foreground">{t('component.form.preview')}</Label>
+            <div className="flex flex-1 items-center justify-center overflow-hidden rounded-lg border bg-muted/30">
+              {renderPreview()}
+            </div>
+            {isEdit && component && (
+              <div className="space-y-0.5 text-[10px] text-muted-foreground">
+                <div className="truncate">prototypeKey: <code className="font-mono">{component.prototypeKey ?? '-'}</code></div>
+                <div>source: <code className="font-mono">{component.source}</code> · v{component.version}</div>
+              </div>
+            )}
+          </div>
+
+          {/* 右侧表单 */}
+          <div className="grid flex-1 grid-cols-2 gap-x-4 gap-y-3">
+            <div className="col-span-2 space-y-1.5">
+              <Label>{t('component.form.name')}</Label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t('component.form.namePlaceholder')} />
+            </div>
+
+            <div className="col-span-2 space-y-1.5">
+              <Label>{t('component.form.description')}</Label>
+              <Textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder={t('component.form.descriptionPlaceholder')}
+                rows={2}
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label>{t('component.form.category')}</Label>
+              <Select value={category} onValueChange={setCategory}>
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem key="base" value="base">{t('component.categories.base')}</SelectItem>
+                  <SelectItem key="block" value="block">{t('component.categories.block')}</SelectItem>
+                  <SelectItem key="template" value="template">{t('component.categories.template')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label>{t('component.form.type')}</Label>
+              <Select value={type} onValueChange={setType}>
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem key="component" value="component">{t('component.types.base')}</SelectItem>
+                  <SelectItem key="block" value="block">{t('component.types.block')}</SelectItem>
+                  <SelectItem key="template" value="template">{t('component.types.template')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label>{t('component.form.subCategory')}</Label>
+              <Input value={subCategory} onChange={(e) => setSubCategory(e.target.value)} placeholder={t('component.form.subCategoryPlaceholder')} />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label>{t('component.form.tags')}</Label>
+              <Input value={tags} onChange={(e) => setTags(e.target.value)} placeholder={t('component.form.tagsPlaceholder')} />
+            </div>
+
+            <div className="col-span-2 space-y-1.5">
+              <Label>{t('component.form.path')}</Label>
+              <Input value={path} onChange={(e) => setPath(e.target.value)} placeholder={t('component.form.pathPlaceholder')} className="font-mono text-xs" />
+              <p className="text-[10px] text-muted-foreground">{t('component.form.pathHint')}</p>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label>{t('component.form.defaultWidth')}</Label>
+              <Input
+                type="number"
+                value={defaultWidth}
+                onChange={(e) => setDefaultWidth(Number(e.target.value))}
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label>{t('component.form.defaultHeight')}</Label>
+              <Input
+                type="number"
+                value={defaultHeight}
+                onChange={(e) => setDefaultHeight(Number(e.target.value))}
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label>{t('component.form.sortOrder')}</Label>
+              <Input
+                type="number"
+                value={sortOrder}
+                onChange={(e) => setSortOrder(Number(e.target.value))}
+              />
+            </div>
+
+            <div className="flex items-center gap-2 pt-6">
+              <Switch checked={isHidden} onCheckedChange={setIsHidden} />
+              <Label className="cursor-pointer" onClick={() => setIsHidden(!isHidden)}>{t('component.form.hidden')}</Label>
+            </div>
+
+            {renderPropsEditor()}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? t('status.saving') : t('common.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,235 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { importComponentFn } from '@/server/serverFns/components/import'
+import { toast } from '@/components/ui/sonner'
+import { Loader2, Sparkles } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const CATEGORIES = [
+  { value: '基础组件', label: '基础组件', type: 'component' },
+  { value: '内容区块', label: '内容区块', type: 'block' },
+  { value: '页面模版', label: '页面模版', type: 'template' },
+] as const
+
+interface ComponentImportDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSuccess: () => void
+}
+
+export function ComponentImportDialog({ open, onOpenChange, onSuccess }: ComponentImportDialogProps) {
+  const [source, setSource] = useState<'npm' | 'local'>('npm')
+  const [packageName, setPackageName] = useState('')
+  const [importPath, setImportPath] = useState('')
+  const [exportName, setExportName] = useState('default')
+  const [componentKey, setComponentKey] = useState('')
+  const [displayName, setDisplayName] = useState('')
+  const [category, setCategory] = useState<string>('基础组件')
+  const [importing, setImporting] = useState(false)
+
+  function suggestKey() {
+    const raw = source === 'npm' ? packageName : importPath
+    if (!raw) return
+    const lastPart = raw.split('/').pop() ?? raw
+    const key = lastPart
+      .replace(/[^a-z0-9-]/gi, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '')
+      .toLowerCase()
+    setComponentKey(key)
+    if (!displayName) setDisplayName(lastPart)
+  }
+
+  async function handleImport() {
+    const idField = source === 'npm' ? packageName : importPath
+    if (!idField.trim() || !componentKey.trim() || !displayName.trim()) {
+      toast.error('请填写所有必填字段')
+      return
+    }
+    setImporting(true)
+    try {
+      const cat = CATEGORIES.find((c) => c.value === category) ?? CATEGORIES[0]!
+      const result = await importComponentFn({
+        data: {
+          source,
+          packageName: source === 'npm' ? packageName.trim() : undefined,
+          importPath: source === 'local' ? importPath.trim() : undefined,
+          exportName: exportName.trim() || 'default',
+          componentKey: componentKey.trim(),
+          displayName: displayName.trim(),
+          category: cat.value,
+          type: cat.type,
+        },
+      })
+      toast.success(result.message)
+      onSuccess()
+      onOpenChange(false)
+      setPackageName('')
+      setImportPath('')
+      setExportName('default')
+      setComponentKey('')
+      setDisplayName('')
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : '导入失败')
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>导入组件</DialogTitle>
+          <DialogDescription>
+            {source === 'npm'
+              ? '从 npm 安装第三方组件包（自动 pnpm add + 生成 wrapper）。'
+              : '输入 registry 路径（如 @magicui/safari，自动 shadcn add 安装）或已安装组件的 @/ 路径。'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div className="flex gap-1 rounded-lg bg-muted/40 p-1">
+            {(['npm', 'local'] as const).map((s) => (
+              <button
+                key={s}
+                onClick={() => setSource(s)}
+                className={cn(
+                  'flex-1 rounded-md px-3 py-1.5 text-sm transition-colors',
+                  source === s ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground',
+                )}
+              >
+                {s === 'npm' ? 'npm 包' : '本地组件'}
+              </button>
+            ))}
+          </div>
+
+          {source === 'npm' ? (
+            <div className="space-y-1.5">
+              <Label>npm 包名 *</Label>
+              <div className="flex gap-2">
+                <Input
+                  value={packageName}
+                  onChange={(e) => setPackageName(e.target.value)}
+                  placeholder="如：lucide-react"
+                  className="font-mono text-xs"
+                />
+                <Button variant="outline" size="sm" onClick={suggestKey} disabled={!packageName}>
+                  <Sparkles className="mr-1 size-3.5" />
+                  生成
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-1.5">
+              <Label>registry 路径或 @/ 路径 *</Label>
+              <div className="flex gap-2">
+                <Input
+                  value={importPath}
+                  onChange={(e) => setImportPath(e.target.value)}
+                  placeholder="@magicui/safari 或 @/components/magicui/safari"
+                  className="font-mono text-xs"
+                />
+                <Button variant="outline" size="sm" onClick={suggestKey} disabled={!importPath}>
+                  <Sparkles className="mr-1 size-3.5" />
+                  生成
+                </Button>
+              </div>
+              <p className="text-[10px] text-muted-foreground">
+                registry 路径自动 <code className="font-mono">shadcn add</code> 安装；<code className="font-mono">@/</code> 路径直接引用已安装组件。
+              </p>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label>导出名</Label>
+              <Input
+                value={exportName}
+                onChange={(e) => setExportName(e.target.value)}
+                placeholder="default 或具名"
+                className="font-mono text-xs"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label>组件标识 *</Label>
+              <Input
+                value={componentKey}
+                onChange={(e) => setComponentKey(e.target.value)}
+                placeholder="如：my-button"
+                className="font-mono text-xs"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label>显示名称 *</Label>
+              <Input
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                placeholder="如：我的按钮"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label>分类</Label>
+              <Select value={category} onValueChange={setCategory}>
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {CATEGORIES.map((c) => (
+                    <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
+          <Button onClick={handleImport} disabled={importing}>
+            {importing ? (
+              <><Loader2 className="mr-1 size-4 animate-spin" />处理中...</>
+            ) : '导入'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}