feat: 完成短剧项目空间与结构化资产创作闭环 (#38)
* feat(canvas): 短剧项目空间 - 建立项目章节与画布关联 MVP * feat(canvas): 短剧项目空间 - 完善项目资产、镜头与流程闭环 Refs #30 * fix(deploy): 本地部署 - 修复前端构建并忽略本地 PostgreSQL 配置 * feat(*): 短剧项目空间 - 完成项目、章节、资产、角色与画布创作闭环 Refs #30 --------- Co-authored-by: ddCat <ddcat666@88.com>
This commit is contained in:
ddcat666
@@ -82,6 +82,10 @@ export function CometCard({ containerClassName, className, rotateDepth = 5.5, tr
|
||||
};
|
||||
}, [clearSettleTimer, resetMotion]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!motionEnabled) resetMotion(true);
|
||||
}, [motionEnabled, resetMotion]);
|
||||
|
||||
return (
|
||||
<div className={cn("aceternity-comet-perspective h-full w-full", containerClassName)} data-comet-active={motionEnabled && motionActive ? "true" : "false"}>
|
||||
<motion.div
|
||||
|
||||
@@ -8,6 +8,7 @@ export type FloatingDockCommand = {
|
||||
kind?: "command";
|
||||
id: string;
|
||||
label: string;
|
||||
displayLabel?: string;
|
||||
icon: ReactNode;
|
||||
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
||||
active?: boolean;
|
||||
@@ -24,6 +25,7 @@ type FloatingDockProps = {
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
ariaLabel?: string;
|
||||
showLabels?: boolean;
|
||||
};
|
||||
|
||||
type DockMetrics = {
|
||||
@@ -44,7 +46,7 @@ const TOUCH_DOCK_METRICS: Record<NonNullable<FloatingDockProps["size"]>, DockMet
|
||||
compact: { base: 36, magnified: 36, icon: 16, iconMagnified: 16, distance: 0 },
|
||||
};
|
||||
|
||||
export const FloatingDock = forwardRef<HTMLDivElement, FloatingDockProps>(function FloatingDock({ items, size = "default", embedded = false, className, style, ariaLabel = "画布工具" }, forwardedRef) {
|
||||
export const FloatingDock = forwardRef<HTMLDivElement, FloatingDockProps>(function FloatingDock({ items, size = "default", embedded = false, className, style, ariaLabel = "画布工具", showLabels = false }, forwardedRef) {
|
||||
const mouseX = useMotionValue(Number.POSITIVE_INFINITY);
|
||||
const reducedMotion = useReducedMotion();
|
||||
const [coarsePointer, setCoarsePointer] = useState(() => typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches);
|
||||
@@ -66,9 +68,14 @@ export const FloatingDock = forwardRef<HTMLDivElement, FloatingDockProps>(functi
|
||||
role="toolbar"
|
||||
aria-label={ariaLabel}
|
||||
className={cn(
|
||||
"aceternity-floating-dock flex items-end overflow-visible",
|
||||
"aceternity-floating-dock flex overflow-visible",
|
||||
showLabels ? "items-center" : "items-end",
|
||||
embedded ? "shadow-none" : "border backdrop-blur-2xl",
|
||||
coarsePointer
|
||||
showLabels
|
||||
? embedded
|
||||
? size === "compact" ? "h-9 gap-0.5 px-0.5" : "h-10 gap-0.5 px-0.5"
|
||||
: size === "compact" ? "h-10 gap-0.5 rounded-[13px] px-1.5" : "h-11 gap-0.5 rounded-[15px] px-2"
|
||||
: coarsePointer
|
||||
? embedded
|
||||
? size === "compact" ? "h-10 gap-1 px-0.5" : "h-11 gap-1 px-0.5"
|
||||
: size === "compact" ? "h-11 gap-1 rounded-[15px] px-1.5 pb-1" : "h-12 gap-1 rounded-[17px] px-2 pb-1"
|
||||
@@ -83,12 +90,12 @@ export const FloatingDock = forwardRef<HTMLDivElement, FloatingDockProps>(functi
|
||||
}}
|
||||
onPointerLeave={() => mouseX.set(Number.POSITIVE_INFINITY)}
|
||||
>
|
||||
{items.map((item) => item.kind === "separator" ? <DockSeparator key={item.id} compact={size === "compact"} /> : <DockCommandButton key={item.id} command={item} mouseX={mouseX} metrics={metrics} motionEnabled={motionEnabled} compact={size === "compact"} />)}
|
||||
{items.map((item) => item.kind === "separator" ? <DockSeparator key={item.id} compact={size === "compact"} labeled={showLabels} /> : <DockCommandButton key={item.id} command={item} mouseX={mouseX} metrics={metrics} motionEnabled={motionEnabled && !showLabels} compact={size === "compact"} showLabel={showLabels} />)}
|
||||
</motion.div>
|
||||
);
|
||||
});
|
||||
|
||||
function DockCommandButton({ command, mouseX, metrics, motionEnabled, compact }: { command: FloatingDockCommand; mouseX: MotionValue<number>; metrics: DockMetrics; motionEnabled: boolean; compact: boolean }) {
|
||||
function DockCommandButton({ command, mouseX, metrics, motionEnabled, compact, showLabel }: { command: FloatingDockCommand; mouseX: MotionValue<number>; metrics: DockMetrics; motionEnabled: boolean; compact: boolean; showLabel: boolean }) {
|
||||
const ref = useRef<HTMLSpanElement>(null);
|
||||
const [focused, setFocused] = useState(false);
|
||||
const [hovered, setHovered] = useState(false);
|
||||
@@ -101,7 +108,31 @@ function DockCommandButton({ command, mouseX, metrics, motionEnabled, compact }:
|
||||
const iconTarget = useTransform(distance, (value) => proximitySize(value, metrics.icon, metrics.iconMagnified, metrics.distance, motionEnabled));
|
||||
const itemSize = useSpring(itemTarget, aceternityMotion.spring.dock);
|
||||
const iconSize = useSpring(iconTarget, aceternityMotion.spring.dock);
|
||||
const showTooltip = (hovered || focused) && !command.disabled;
|
||||
const showTooltip = !showLabel && (hovered || focused) && !command.disabled;
|
||||
|
||||
if (showLabel) {
|
||||
return (
|
||||
<motion.span ref={ref} className="relative block h-8 shrink-0">
|
||||
<motion.button
|
||||
type="button"
|
||||
aria-label={command.label}
|
||||
aria-pressed={command.active || undefined}
|
||||
disabled={command.disabled}
|
||||
className={cn("aceternity-dock-command is-labeled group inline-flex h-8 items-center justify-center gap-1.5 whitespace-nowrap rounded-[9px] border-0 px-2.5 outline-none", command.active && "is-active", command.danger && "is-danger")}
|
||||
whileTap={!command.disabled ? { scale: 0.96 } : undefined}
|
||||
transition={aceternityMotion.spring.dock}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
onClick={command.onClick}
|
||||
>
|
||||
<span className="grid size-3.5 shrink-0 place-items-center">{command.icon}</span>
|
||||
<span className="inline-flex h-4 items-center text-[11px] font-medium leading-none">{command.displayLabel || command.label}</span>
|
||||
</motion.button>
|
||||
</motion.span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.span ref={ref} className="relative block shrink-0" style={{ width: itemSize, height: itemSize }}>
|
||||
@@ -141,8 +172,8 @@ function DockCommandButton({ command, mouseX, metrics, motionEnabled, compact }:
|
||||
);
|
||||
}
|
||||
|
||||
function DockSeparator({ compact }: { compact: boolean }) {
|
||||
return <span aria-hidden className={cn("aceternity-dock-separator mb-0.5 shrink-0 self-center", compact ? "mx-0.5 h-3.5 w-px" : "mx-0.5 h-4 w-px")} />;
|
||||
function DockSeparator({ compact, labeled }: { compact: boolean; labeled: boolean }) {
|
||||
return <span aria-hidden className={cn("aceternity-dock-separator shrink-0 self-center", labeled ? "mx-1.5 h-6 w-px" : compact ? "mx-0.5 mb-0.5 h-3.5 w-px" : "mx-0.5 mb-0.5 h-4 w-px")} />;
|
||||
}
|
||||
|
||||
function proximitySize(distance: number, base: number, magnified: number, range: number, enabled: boolean) {
|
||||
|
||||
100
web/src/components/ui/aceternity/workspace-signal-icon.tsx
Normal file
100
web/src/components/ui/aceternity/workspace-signal-icon.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { useId } from "react";
|
||||
import { motion, useReducedMotion } from "motion/react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type WorkspaceSignalIconVariant = "home" | "canvas" | "projects" | "assets" | "skills" | "tasks" | "wallet" | "settings" | "empty" | "error" | "loading";
|
||||
|
||||
const palettes: Record<WorkspaceSignalIconVariant, [string, string, string]> = {
|
||||
home: ["#2563eb", "#06b6d4", "#f59e0b"],
|
||||
canvas: ["#2563eb", "#14b8a6", "#f97316"],
|
||||
projects: ["#f59e0b", "#f97316", "#2563eb"],
|
||||
assets: ["#06b6d4", "#2563eb", "#ec4899"],
|
||||
skills: ["#ec4899", "#f97316", "#2563eb"],
|
||||
tasks: ["#2563eb", "#22c55e", "#f59e0b"],
|
||||
wallet: ["#f59e0b", "#eab308", "#14b8a6"],
|
||||
settings: ["#2563eb", "#64748b", "#14b8a6"],
|
||||
empty: ["#64748b", "#2563eb", "#06b6d4"],
|
||||
error: ["#ef4444", "#f97316", "#f59e0b"],
|
||||
loading: ["#2563eb", "#06b6d4", "#14b8a6"],
|
||||
};
|
||||
|
||||
export function WorkspaceSignalIcon({ variant, size = "md", className }: { variant: WorkspaceSignalIconVariant; size?: "sm" | "md" | "lg"; className?: string }) {
|
||||
const instanceId = useId().replace(/:/g, "");
|
||||
const reducedMotion = useReducedMotion();
|
||||
const [primary, secondary, accent] = palettes[variant];
|
||||
const gradientId = `workspace-signal-${variant}-${instanceId}`;
|
||||
const dimension = size === "sm" ? 32 : size === "lg" ? 56 : 42;
|
||||
const initial = reducedMotion ? false : { opacity: 0, scale: 0.86, rotate: -4 };
|
||||
|
||||
return (
|
||||
<motion.span
|
||||
initial={initial}
|
||||
animate={{ opacity: 1, scale: 1, rotate: 0 }}
|
||||
transition={{ duration: 0.32, ease: [0.16, 1, 0.3, 1] }}
|
||||
className={cn("workspace-signal-icon group/signal relative grid shrink-0 place-items-center", className)}
|
||||
style={{ width: dimension, height: dimension }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg viewBox="0 0 48 48" className="h-full w-full overflow-visible" fill="none">
|
||||
<defs>
|
||||
<linearGradient id={gradientId} x1="8" y1="7" x2="40" y2="41" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor={primary} />
|
||||
<stop offset="0.55" stopColor={secondary} />
|
||||
<stop offset="1" stopColor={accent} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="3.5" y="3.5" width="41" height="41" rx="11.5" className="fill-background/92 stroke-border" />
|
||||
<motion.path
|
||||
d={signalPath(variant)}
|
||||
stroke={`url(#${gradientId})`}
|
||||
strokeWidth="2.4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
initial={reducedMotion ? false : { pathLength: 0, opacity: 0 }}
|
||||
animate={{ pathLength: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.48, delay: 0.08, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="origin-center transition-transform duration-200 ease-out group-hover/signal:scale-[1.04]"
|
||||
/>
|
||||
<motion.circle
|
||||
cx={signalDot(variant)[0]}
|
||||
cy={signalDot(variant)[1]}
|
||||
r="2.7"
|
||||
fill={accent}
|
||||
initial={reducedMotion ? false : { scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.24, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="origin-center transition-transform duration-150 group-hover/signal:scale-125"
|
||||
/>
|
||||
</svg>
|
||||
</motion.span>
|
||||
);
|
||||
}
|
||||
|
||||
function signalPath(variant: WorkspaceSignalIconVariant) {
|
||||
if (variant === "home") return "M13 29V20L24 12L35 20V35H28V27H20V35H15";
|
||||
if (variant === "canvas") return "M12 15H27V27H12V15ZM21 27V35H36V22H27M16 20H23";
|
||||
if (variant === "projects") return "M11 18H22L25 21H37V35H11V18ZM17 14H29";
|
||||
if (variant === "assets") return "M11 14H37V34H11V14ZM15 29L21 23L26 28L30 24L36 31";
|
||||
if (variant === "skills") return "M24 10L27 19L36 22L27 26L24 36L21 26L12 22L21 19L24 10Z";
|
||||
if (variant === "tasks") return "M12 16H30M12 24H25M12 32H22M31 29L34 32L39 25";
|
||||
if (variant === "wallet") return "M12 17H36V34H12V17ZM12 21H36M29 27H34";
|
||||
if (variant === "settings") return "M12 16H36M12 24H36M12 32H36M19 13V19M29 21V27M23 29V35";
|
||||
if (variant === "error") return "M24 11L38 36H10L24 11ZM24 19V27M24 32V32.5";
|
||||
if (variant === "loading") return "M34 17A13 13 0 1 0 36 28M34 17V10M34 17H27";
|
||||
return "M14 30C17 20 31 18 35 27M14 30H21M14 30V23";
|
||||
}
|
||||
|
||||
function signalDot(variant: WorkspaceSignalIconVariant): [number, number] {
|
||||
if (variant === "home") return [34, 20];
|
||||
if (variant === "canvas") return [35, 22];
|
||||
if (variant === "projects") return [35, 21];
|
||||
if (variant === "assets") return [30, 20];
|
||||
if (variant === "skills") return [35, 13];
|
||||
if (variant === "tasks") return [38, 25];
|
||||
if (variant === "wallet") return [31, 27];
|
||||
if (variant === "settings") return [29, 24];
|
||||
if (variant === "error") return [24, 32];
|
||||
if (variant === "loading") return [34, 11];
|
||||
return [34, 27];
|
||||
}
|
||||
@@ -1,194 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return (
|
||||
<SelectPrimitive.Group
|
||||
data-slot="select-group"
|
||||
className={cn("scroll-my-1 p-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
hideChevron = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
hideChevron?: boolean
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{!hideChevron ? (
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="canvas-select-chevron pointer-events-none size-4 text-muted-foreground" />
|
||||
</SelectPrimitive.Icon>
|
||||
) : null}
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "item-aligned",
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
data-align-trigger={position === "item-aligned"}
|
||||
className={cn("relative z-50 max-h-[min(var(--radix-select-content-available-height),18rem)] min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
|
||||
position={position}
|
||||
align={align}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
data-position={position}
|
||||
className={cn(
|
||||
"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
|
||||
position === "popper" && ""
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="pointer-events-none" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
Reference in New Issue
Block a user