@allbluecn/web-app 0.3.0

package/src/components/design/sketch/canvas-preview.tsx

@@ -0,0 +1,151 @@
+// 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 { useRef, useState, useCallback, useEffect } from "react"
+import type { AnnotationLayer, AnnotationArtboard } from "@/server/design/sketch/annotation-parser"
+import { hitTestLayers } from "./spacing-calculator"
+
+interface CanvasPreviewProps {
+  artboard: AnnotationArtboard
+  projectId: string
+  artboardId: string
+  onLayerHover: (layer: AnnotationLayer | null) => void
+  onLayerClick: (layer: AnnotationLayer | null) => void
+  selectedLayerId: string | null
+}
+
+export function CanvasPreview({
+  artboard,
+  projectId,
+  artboardId,
+  onLayerHover,
+  onLayerClick,
+  selectedLayerId,
+}: CanvasPreviewProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const [scale, setScale] = useState(1)
+  const [offset, setOffset] = useState({ x: 0, y: 0 })
+  const hoveredLayerRef = useRef<AnnotationLayer | null>(null)
+
+  const imgSrc = `/design-files/${projectId}/${artboardId}/preview.png`
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    const containerWidth = container.clientWidth
+    const s = Math.min(containerWidth / artboard.frame.width, 1)
+    setScale(s)
+    setOffset({
+      x: (containerWidth - artboard.frame.width * s) / 2,
+      y: 16,
+    })
+  }, [artboard.frame.width])
+
+  const drawOverlay = useCallback(
+    (layer: AnnotationLayer | null) => {
+      const canvas = canvasRef.current
+      if (!canvas) return
+      const ctx = canvas.getContext("2d")
+      if (!ctx) return
+
+      canvas.width = canvas.offsetWidth * window.devicePixelRatio
+      canvas.height = canvas.offsetHeight * window.devicePixelRatio
+      ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
+      ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight)
+
+      if (!layer) return
+
+      const f = layer.frame
+      ctx.strokeStyle = "#3b82f6"
+      ctx.lineWidth = 2
+      ctx.strokeRect(f.x * scale + offset.x, f.y * scale + offset.y, f.width * scale, f.height * scale)
+
+      const labelText = `${Math.round(f.width)} × ${Math.round(f.height)}`
+      ctx.fillStyle = "#3b82f6"
+      ctx.font = "11px system-ui"
+      const textWidth = ctx.measureText(labelText).width
+      const labelX = f.x * scale + offset.x
+      const labelY = f.y * scale + offset.y - 6
+      ctx.fillRect(labelX, labelY - 14, textWidth + 8, 18)
+      ctx.fillStyle = "#fff"
+      ctx.fillText(labelText, labelX + 4, labelY)
+    },
+    [scale, offset],
+  )
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      const container = containerRef.current
+      if (!container) return
+      const rect = container.getBoundingClientRect()
+      const mx = (e.clientX - rect.left - offset.x) / scale
+      const my = (e.clientY - rect.top - offset.y) / scale
+
+      const hit = hitTestLayers(artboard.layers, mx, my)
+      const layer = hit?.layer || null
+
+      if (layer?.id !== hoveredLayerRef.current?.id) {
+        hoveredLayerRef.current = layer
+        drawOverlay(layer)
+        onLayerHover(layer)
+      }
+    },
+    [scale, offset, artboard.layers, drawOverlay, onLayerHover],
+  )
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      const container = containerRef.current
+      if (!container) return
+      const rect = container.getBoundingClientRect()
+      const mx = (e.clientX - rect.left - offset.x) / scale
+      const my = (e.clientY - rect.top - offset.y) / scale
+
+      const hit = hitTestLayers(artboard.layers, mx, my)
+      onLayerClick(hit?.layer || null)
+    },
+    [scale, offset, artboard.layers, onLayerClick],
+  )
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative flex-1 overflow-auto bg-muted/30"
+      onMouseMove={handleMouseMove}
+      onClick={handleClick}
+      onMouseLeave={() => {
+        hoveredLayerRef.current = null
+        drawOverlay(null)
+        onLayerHover(null)
+      }}
+    >
+      <div
+        style={{
+          width: artboard.frame.width * scale,
+          height: artboard.frame.height * scale,
+          marginLeft: offset.x,
+          marginTop: offset.y,
+          position: "relative",
+        }}
+      >
+        <img src={imgSrc} alt={artboard.name} className="w-full h-full" draggable={false} />
+        <canvas ref={canvasRef} className="absolute inset-0 w-full h-full pointer-events-none" />
+      </div>
+    </div>
+  )
+}

package/src/components/design/sketch/code-preview.tsx

@@ -0,0 +1,81 @@
+// 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 { useTranslation } from "react-i18next"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Copy, Check, Sparkles } from "lucide-react"
+import type { AnnotationLayer } from "@/server/design/sketch/annotation-parser"
+import { generateCode, type CodeFormat } from "@/server/design/sketch/code-generator"
+
+interface CodePreviewProps {
+  layer: AnnotationLayer | null
+}
+
+const formats: { value: CodeFormat; label: string }[] = [
+  { value: "html", label: "HTML/CSS" },
+  { value: "react-tailwind", label: "React+TW" },
+  { value: "swift-uikit", label: "Swift" },
+]
+
+export function CodePreview({ layer }: CodePreviewProps) {
+  const { t } = useTranslation('design')
+  const [activeFormat, setActiveFormat] = useState<CodeFormat>("html")
+  const [copied, setCopied] = useState(false)
+
+  if (!layer) {
+    return (
+      <div className="p-4 text-sm text-muted-foreground">
+        {t('codePreview.selectLayer')}
+      </div>
+    )
+  }
+
+  const result = generateCode(layer, activeFormat)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(result.code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between border-b px-3 py-2">
+        <Tabs value={activeFormat} onValueChange={(v) => setActiveFormat(v as CodeFormat)}>
+          <TabsList className="h-8">
+            {formats.map((f) => (
+              <TabsTrigger key={f.value} value={f.value} className="text-xs px-2 h-6">
+                {f.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="sm" className="h-7 text-xs gap-1" onClick={handleCopy}>
+            {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+            {copied ? t('codePreview.copied') : t('codePreview.copy')}
+          </Button>
+        </div>
+      </div>
+      <pre className="flex-1 overflow-auto p-3 text-xs font-mono bg-muted/30">
+        <code>{result.code}</code>
+      </pre>
+    </div>
+  )
+}

package/src/components/design/sketch/export-panel.tsx

@@ -0,0 +1,74 @@
+// 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 { Download } from "lucide-react"
+import { useTranslation } from "react-i18next"
+import { Button } from "@/components/ui/button"
+
+interface ExportAsset {
+  id: string
+  layerName: string
+  layerId: string
+  scale: number
+  format: string
+  filePath: string
+  width: number
+  height: number
+}
+
+interface ExportPanelProps {
+  exports: ExportAsset[]
+  projectId: string
+}
+
+export function ExportPanel({ exports, projectId }: ExportPanelProps) {
+  const { t } = useTranslation('design')
+  const grouped = exports.reduce<Record<string, ExportAsset[]>>((acc, exp) => {
+    const key = exp.layerName
+    if (!acc[key]) acc[key] = []
+    acc[key].push(exp)
+    return acc
+  }, {})
+
+  return (
+    <div className="p-4 space-y-4">
+      <h3 className="text-sm font-medium">{t('exportPanel.title')}</h3>
+      {Object.keys(grouped).length === 0 ? (
+        <p className="text-sm text-muted-foreground">{t('exportPanel.empty')}</p>
+      ) : (
+        Object.entries(grouped).map(([name, assets]) => (
+          <div key={name} className="space-y-2">
+            <h4 className="text-xs font-medium">{name}</h4>
+            <div className="flex gap-2">
+              {assets.sort((a, b) => a.scale - b.scale).map((asset) => (
+                <a
+                  key={asset.id}
+                  href={asset.filePath}
+                  download={`${name}_${asset.scale}x.png`}
+                  className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-md bg-accent hover:bg-accent/80"
+                >
+                  <Download className="size-3" />
+                  {asset.scale}x ({asset.width}×{asset.height})
+                </a>
+              ))}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  )
+}

package/src/components/design/sketch/layer-tree.tsx

@@ -0,0 +1,106 @@
+// 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 { ChevronRight, ChevronDown, Square, Type, Layers } from "lucide-react"
+import type { AnnotationLayer } from "@/server/design/sketch/annotation-parser"
+
+interface LayerTreeProps {
+  layers: AnnotationLayer[]
+  selectedId: string | null
+  onSelect: (layer: AnnotationLayer) => void
+}
+
+const iconMap: Record<string, React.ReactNode> = {
+  Text: <Type className="size-3.5" />,
+  Image: <Square className="size-3.5" />,
+  Shape: <Square className="size-3.5" />,
+  Frame: <Layers className="size-3.5" />,
+  Group: <Layers className="size-3.5" />,
+}
+
+export function LayerTree({ layers, selectedId, onSelect }: LayerTreeProps) {
+  return (
+    <div className="text-sm">
+      {layers.map((layer) => (
+        <LayerItem
+          key={layer.id}
+          layer={layer}
+          selectedId={selectedId}
+          onSelect={onSelect}
+          depth={0}
+        />
+      ))}
+    </div>
+  )
+}
+
+function LayerItem({
+  layer,
+  selectedId,
+  onSelect,
+  depth,
+}: {
+  layer: AnnotationLayer
+  selectedId: string | null
+  onSelect: (layer: AnnotationLayer) => void
+  depth: number
+}) {
+  const [expanded, setExpanded] = useState(depth < 1)
+  const hasChildren = layer.layers && layer.layers.length > 0
+  const isSelected = selectedId === layer.id
+
+  return (
+    <div>
+      <div
+        className={`flex items-center gap-1 px-2 py-1 cursor-pointer hover:bg-accent rounded-sm ${
+          isSelected ? "bg-accent text-accent-foreground" : ""
+        }`}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        onClick={() => {
+          onSelect(layer)
+          if (hasChildren) setExpanded(!expanded)
+        }}
+      >
+        {hasChildren ? (
+          expanded ? (
+            <ChevronDown className="size-3.5 shrink-0" />
+          ) : (
+            <ChevronRight className="size-3.5 shrink-0" />
+          )
+        ) : (
+          <span className="w-3.5 shrink-0" />
+        )}
+        {iconMap[layer.type] || <Square className="size-3.5" />}
+        <span className="truncate ml-1">{layer.name}</span>
+      </div>
+      {expanded && hasChildren && (
+        <div>
+          {layer.layers!.map((child) => (
+            <LayerItem
+              key={child.id}
+              layer={child}
+              selectedId={selectedId}
+              onSelect={onSelect}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/design/sketch/property-panel.tsx

@@ -0,0 +1,120 @@
+// 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 type { AnnotationLayer } from "@/server/design/sketch/annotation-parser"
+import { useTranslation } from 'react-i18next'
+import { calculateSpacings } from "./spacing-calculator"
+
+interface PropertyPanelProps {
+  layer: AnnotationLayer | null
+  siblings: AnnotationLayer[]
+}
+
+export function PropertyPanel({ layer, siblings }: PropertyPanelProps) {
+  const { t } = useTranslation('design')
+  if (!layer) {
+    return (
+      <div className="p-4 text-sm text-muted-foreground">
+        {t('propertyPanel.clickLayer')}
+      </div>
+    )
+  }
+
+  const f = layer.frame
+  const spacings = calculateSpacings(layer, siblings)
+  const style = layer.style
+
+  return (
+    <div className="p-4 space-y-4 text-sm overflow-auto h-full">
+      <div>
+        <h4 className="font-medium mb-2">{layer.name}</h4>
+        <p className="text-xs text-muted-foreground">{layer.type}</p>
+      </div>
+
+      <Section title={t('propertyPanel.dimensions')}>
+        <Row label="X" value={Math.round(f.x)} />
+        <Row label="Y" value={Math.round(f.y)} />
+        <Row label="W" value={Math.round(f.width)} />
+        <Row label="H" value={Math.round(f.height)} />
+      </Section>
+
+      {(spacings.top || spacings.bottom || spacings.left || spacings.right) && (
+        <Section title={t('propertyPanel.spacing')}>
+          {spacings.top && <Row label={t('propertyPanel.top')} value={`${spacings.top.distance}px → ${spacings.top.layer.name}`} />}
+          {spacings.bottom && <Row label={t('propertyPanel.bottom')} value={`${spacings.bottom.distance}px → ${spacings.bottom.layer.name}`} />}
+          {spacings.left && <Row label={t('propertyPanel.left')} value={`${spacings.left.distance}px → ${spacings.left.layer.name}`} />}
+          {spacings.right && <Row label={t('propertyPanel.right')} value={`${spacings.right.distance}px → ${spacings.right.layer.name}`} />}
+        </Section>
+      )}
+
+      {style?.fills && style.fills.length > 0 && (
+        <Section title={t('propertyPanel.fill')}>
+          {style.fills.map((fill, i) => (
+            <div key={i} className="flex items-center gap-2">
+              <div className="size-4 rounded border" style={{ backgroundColor: fill.color.slice(0, 7) }} />
+              <span className="text-xs font-mono">{fill.color}</span>
+            </div>
+          ))}
+        </Section>
+      )}
+
+      {style?.borders && style.borders.length > 0 && (
+        <Section title={t('propertyPanel.border')}>
+          {style.borders.map((b, i) => <Row key={i} label={`${b.thickness}px`} value={b.color} />)}
+        </Section>
+      )}
+
+      {style?.shadows && style.shadows.length > 0 && (
+        <Section title={t('propertyPanel.shadow')}>
+          {style.shadows.map((s, i) => (
+            <div key={i} className="text-xs font-mono">
+              {s.x} {s.y} {s.blur} {s.color}
+            </div>
+          ))}
+        </Section>
+      )}
+
+      {style?.fontFamily && (
+        <Section title={t('propertyPanel.text')}>
+          <Row label={t('propertyPanel.fontFamily')} value={style.fontFamily} />
+          <Row label={t('propertyPanel.fontSize')} value={`${style.fontSize}px`} />
+          {style.textColor && <Row label={t('propertyPanel.textColor')} value={style.textColor} />}
+        </Section>
+      )}
+
+      {style?.corners && <Section title={t('propertyPanel.cornerRadius')}><Row label="Radius" value={JSON.stringify(style.corners.radii)} /></Section>}
+    </div>
+  )
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <h5 className="text-xs font-medium text-muted-foreground mb-1.5">{title}</h5>
+      <div className="space-y-1">{children}</div>
+    </div>
+  )
+}
+
+function Row({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="flex justify-between text-xs">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-mono">{value}</span>
+    </div>
+  )
+}

package/src/components/design/sketch/spacing-calculator.ts

@@ -0,0 +1,46 @@
+// 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 type { AnnotationLayer, LayerFrame } from "@/server/design/sketch/annotation-parser"
+import { calculateSpacings, flattenLayers } from "@/server/design/sketch/annotation-parser"
+
+export { calculateSpacings, flattenLayers }
+
+export interface HitResult {
+  layer: AnnotationLayer
+  depth: number
+}
+
+export function hitTestLayers(
+  layers: AnnotationLayer[],
+  x: number,
+  y: number,
+  depth = 0,
+): HitResult | null {
+  for (let i = layers.length - 1; i >= 0; i--) {
+    const layer = layers[i]
+    const f = layer.frame
+    if (x >= f.x && x <= f.x + f.width && y >= f.y && y <= f.y + f.height) {
+      if (layer.layers && layer.layers.length > 0) {
+        const childHit = hitTestLayers(layer.layers, x, y, depth + 1)
+        if (childHit) return childHit
+      }
+      return { layer, depth }
+    }
+  }
+  return null
+}

package/src/components/forms/app-array-field.tsx

@@ -0,0 +1,92 @@
+// 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 { Plus, Trash2 } from "lucide-react"
+import type { AnyReactFormApi } from "@tanstack/react-form"
+import type { ReactNode } from "react"
+import { useTranslation } from "react-i18next"
+import { Button } from "@/components/ui/button"
+import { AppField } from "./app-field"
+
+export interface AppArrayFieldProps<TItem> {
+  name: string
+  form: AnyReactFormApi
+  label?: string
+  description?: string
+  addButtonLabel?: string
+  render: (index: number) => ReactNode
+  emptyText?: string
+  pushValue: () => TItem
+}
+
+export function AppArrayField<TItem>({
+  name,
+  form,
+  label,
+  description,
+  addButtonLabel,
+  render,
+  emptyText,
+  pushValue,
+}: AppArrayFieldProps<TItem>) {
+  const { t } = useTranslation("common")
+  const displayAddLabel = addButtonLabel ?? t("form.add")
+  const displayEmptyText = emptyText ?? t("form.empty")
+  return (
+    <AppField
+      name={name}
+      form={form}
+      label={label}
+      description={description}
+    >
+      {(field) => {
+        const values = field.value as TItem[]
+        return (
+          <div className="space-y-2">
+            {values.length === 0 ? (
+              <p className="text-sm text-muted-foreground">{displayEmptyText}</p>
+            ) : (
+              values.map((_, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <span className="text-sm text-muted-foreground">{index + 1}.</span>
+                  <div className="flex-1">{render(index)}</div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => field.removeValue(index)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))
+            )}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => field.pushValue(pushValue())}
+            >
+              <Plus className="mr-1 h-4 w-4" />
+              {displayAddLabel}
+            </Button>
+          </div>
+        )
+      }}
+    </AppField>
+  )
+}