feat(dev): 文件夹预览 - 新增交互展厅

2026-08-20 15:27:06 +08:00
parent 935108edca
commit d8637f5032
3 changed files with 422 additions and 0 deletions
--- a/web/src/pages/dev/folder-preview-lab.css
+++ b/web/src/pages/dev/folder-preview-lab.css
@@ -0,0 +1,232 @@
+.folder-preview-lab {
+    min-height: 100dvh;
+    overflow: auto;
+    background: var(--workspace-canvas);
+    color: var(--fg);
+    padding: var(--space-10) var(--space-12) var(--space-20);
+}
+
+.folder-preview-lab-header {
+    display: flex;
+    max-width: 1280px;
+    margin: 0 auto var(--space-10);
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--space-8);
+}
+
+.folder-preview-lab-kicker {
+    color: var(--muted-foreground);
+    font-size: var(--fs-label);
+    font-weight: 650;
+    letter-spacing: .12em;
+}
+
+.folder-preview-lab-header h1 {
+    margin: var(--space-2) 0 0;
+    font-size: var(--fs-display);
+    font-weight: 620;
+    letter-spacing: -.04em;
+}
+
+.folder-preview-lab-header p {
+    max-width: 620px;
+    margin: var(--space-3) 0 0;
+    color: var(--muted-foreground);
+    font-size: var(--fs-body-lg);
+    line-height: 1.7;
+}
+
+.folder-preview-lab-guide {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--space-2);
+    border-radius: var(--r-full);
+    background: var(--library-surface);
+    padding: var(--space-3) var(--space-4);
+    color: var(--muted-foreground);
+    font-size: var(--fs-caption);
+}
+
+.folder-preview-lab-guide svg,
+.folder-preview-lab-open svg,
+.folder-preview-lab-drawer-header button svg {
+    width: var(--space-4);
+    height: var(--space-4);
+}
+
+.folder-preview-lab-grid {
+    display: grid;
+    max-width: 1280px;
+    margin: 0 auto;
+    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+    gap: var(--space-10) var(--space-8);
+}
+
+.folder-preview-lab-item {
+    min-width: 0;
+}
+
+.folder-preview-lab-item-copy {
+    display: flex;
+    margin-bottom: var(--space-4);
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--space-4);
+}
+
+.folder-preview-lab-item-copy strong {
+    font-size: var(--fs-heading);
+    font-weight: 620;
+}
+
+.folder-preview-lab-item-copy span {
+    color: var(--muted-foreground);
+    font-size: var(--fs-caption);
+}
+
+.folder-preview-lab-folder {
+    width: 360px;
+    height: 280px;
+    max-width: 100%;
+    margin: 0 auto;
+    cursor: pointer;
+}
+
+.folder-preview-lab-folder:focus-visible {
+    border-radius: var(--r-5xl);
+    outline: 2px solid var(--cn-active-stroke);
+    outline-offset: var(--space-2);
+}
+
+.folder-preview-lab-open,
+.folder-preview-lab-drawer-header button {
+    display: inline-flex;
+    min-height: 44px;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    border: 0;
+    border-radius: var(--r-xl);
+    background: var(--library-surface);
+    padding: var(--space-2) var(--space-4);
+    color: var(--fg);
+    font-size: var(--fs-body);
+    transition: transform var(--motion-state) var(--motion-ease-out), background-color var(--motion-state) var(--motion-ease-out);
+}
+
+.folder-preview-lab-open {
+    margin: var(--space-4) auto 0;
+}
+
+.folder-preview-lab-open:hover,
+.folder-preview-lab-drawer-header button:hover {
+    background: var(--library-surface-hover);
+    transform: translateY(-2px);
+}
+
+.folder-preview-lab-drawer {
+    position: fixed;
+    z-index: var(--z-modal);
+    inset: var(--space-6);
+    overflow: auto;
+    border-radius: var(--r-5xl);
+    background: var(--bg);
+    padding: var(--space-8);
+    box-shadow: var(--elevation-overlay);
+}
+
+.folder-preview-lab-drawer-header {
+    display: grid;
+    max-width: 1180px;
+    margin: 0 auto var(--space-8);
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: var(--space-4);
+}
+
+.folder-preview-lab-drawer-header > div {
+    text-align: center;
+}
+
+.folder-preview-lab-drawer-header > div span {
+    color: var(--muted-foreground);
+    font-size: var(--fs-caption);
+}
+
+.folder-preview-lab-drawer-header h2 {
+    margin: var(--space-1) 0 0;
+    font-size: var(--fs-title);
+}
+
+.folder-preview-lab-drawer-header button:first-child {
+    justify-self: start;
+}
+
+.folder-preview-lab-drawer-header button:last-child {
+    justify-self: end;
+}
+
+.folder-preview-lab-assets {
+    display: grid;
+    max-width: 1180px;
+    margin: 0 auto;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: var(--space-5);
+}
+
+.folder-preview-lab-asset {
+    overflow: hidden;
+    border-radius: var(--r-3xl);
+    background: var(--library-surface);
+    transition: transform var(--motion-state) var(--motion-ease-out), background-color var(--motion-state) var(--motion-ease-out);
+}
+
+.folder-preview-lab-asset:hover {
+    background: var(--library-surface-hover);
+    transform: translateY(-2px);
+}
+
+.folder-preview-lab-asset img {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    object-fit: cover;
+}
+
+.folder-preview-lab-asset div {
+    display: flex;
+    padding: var(--space-4);
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+}
+
+.folder-preview-lab-asset strong {
+    font-size: var(--fs-body);
+}
+
+.folder-preview-lab-asset span {
+    color: var(--muted-foreground);
+    font-size: var(--fs-caption);
+}
+
+@media (max-width: 760px) {
+    .folder-preview-lab { padding: var(--space-6) var(--space-4) var(--space-12); }
+    .folder-preview-lab-header { align-items: flex-start; flex-direction: column; }
+    .folder-preview-lab-grid { grid-template-columns: minmax(0, 1fr); }
+    .folder-preview-lab-folder { transform: scale(.86); transform-origin: top center; margin-bottom: -40px; }
+    .folder-preview-lab-drawer { inset: var(--space-2); padding: var(--space-4); }
+    .folder-preview-lab-drawer-header { grid-template-columns: 1fr 1fr; }
+    .folder-preview-lab-drawer-header > div { grid-column: 1 / -1; grid-row: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .folder-preview-lab-folder *,
+    .folder-preview-lab-open,
+    .folder-preview-lab-asset,
+    .folder-preview-lab-drawer-header button {
+        transition-duration: .01ms !important;
+    }
+}
--- a/web/src/pages/dev/folder-preview-lab.tsx
+++ b/web/src/pages/dev/folder-preview-lab.tsx
@@ -0,0 +1,186 @@
+import { useMemo, useState } from "react";
+import { ChevronLeft, FolderOpen, ImagePlus, MousePointer2 } from "lucide-react";
+
+import { CanvasFolderPreview } from "@/components/canvas/canvas-folder-preview";
+import type { CanvasFolderStyle, CanvasNodeData } from "@/types/canvas";
+import { CanvasNodeType } from "@/types/canvas";
+
+import "./folder-preview-lab.css";
+
+const STYLE_PRESETS: Array<{ style: CanvasFolderStyle; name: string; hint: string }> = [
+    { style: "glass", name: "流光玻璃", hint: "复刻参考 · 加号入口" },
+    { style: "stacked", name: "内容陈列", hint: "复刻参考 · 文件预览" },
+    { style: "midnight", name: "午夜封面", hint: "复刻参考 · 深色标签" },
+    { style: "paper", name: "纸感收藏", hint: "衍生 · 轻量资料" },
+    { style: "cinema", name: "电影胶片", hint: "衍生 · 影像项目" },
+    { style: "compact", name: "紧凑资料", hint: "衍生 · 高频调用" },
+];
+
+const SAMPLE_MEDIA = [
+    "/short-drama-styles/fantasy-3d.jpg",
+    "/short-drama-styles/suspense-noir.jpg",
+    "/short-drama-styles/cyberpunk-neon.jpg",
+    "/short-drama-styles/ink-narrative.jpg",
+    "/short-drama-styles/space-opera.jpg",
+];
+
+function makeMediaNode(id: string, title: string, content: string, index: number): CanvasNodeData {
+    return {
+        id,
+        type: CanvasNodeType.Image,
+        title,
+        position: { x: 0, y: 0 },
+        width: 320,
+        height: 180,
+        metadata: { content, mimeType: "image/jpeg", count: index + 1 },
+    };
+}
+
+function makeFolderNode(style: CanvasFolderStyle, index: number): CanvasNodeData {
+    return {
+        id: `folder-${style}`,
+        type: CanvasNodeType.Frame,
+        title: ["我的素材", "项目资料", "视觉档案", "灵感收藏", "影像资产", "快速调用"][index],
+        position: { x: 0, y: 0 },
+        width: 360,
+        height: 280,
+        metadata: {
+            folder: { style, createdAt: new Date(2026, 7, 19 + index).toISOString() },
+            frame: { collapsed: true, expandedWidth: 760, expandedHeight: 520 },
+        },
+    };
+}
+
+const INITIAL_FOLDERS = STYLE_PRESETS.map((preset, index) => makeFolderNode(preset.style, index));
+
+const INITIAL_CHILDREN = Object.fromEntries(
+    INITIAL_FOLDERS.map((folder, folderIndex) => [
+        folder.id,
+        SAMPLE_MEDIA.slice(0, 3 + (folderIndex % 3)).map((source, childIndex) =>
+            makeMediaNode(`${folder.id}-asset-${childIndex}`, ["主视觉", "氛围参考", "场景草图", "色彩方案", "镜头灵感"][childIndex], source, childIndex),
+        ),
+    ]),
+) as Record<string, CanvasNodeData[]>;
+
+export default function FolderPreviewLab() {
+    const [folders, setFolders] = useState(INITIAL_FOLDERS);
+    const [childrenByFolder, setChildrenByFolder] = useState(INITIAL_CHILDREN);
+    const [selectedId, setSelectedId] = useState(INITIAL_FOLDERS[0].id);
+    const [openedId, setOpenedId] = useState<string | null>(null);
+    const openedFolder = useMemo(() => folders.find((folder) => folder.id === openedId), [folders, openedId]);
+    const openedChildren = openedId ? childrenByFolder[openedId] || [] : [];
+
+    const updateFolder = (nodeId: string, patch: (folder: CanvasNodeData) => CanvasNodeData) => {
+        setFolders((current) => current.map((folder) => (folder.id === nodeId ? patch(folder) : folder)));
+    };
+
+    const addSampleContent = () => {
+        if (!openedId) return;
+        setChildrenByFolder((current) => {
+            const previous = current[openedId] || [];
+            const index = previous.length;
+            const next = makeMediaNode(
+                `${openedId}-asset-${Date.now()}`,
+                `新素材 ${index + 1}`,
+                SAMPLE_MEDIA[index % SAMPLE_MEDIA.length],
+                index,
+            );
+            return { ...current, [openedId]: [...previous, next] };
+        });
+    };
+
+    return (
+        <main className="folder-preview-lab">
+            <header className="folder-preview-lab-header">
+                <div>
+                    <span className="folder-preview-lab-kicker">DEV · INTERACTIVE FOLDER LAB</span>
+                    <h1>通用素材文件夹</h1>
+                    <p>悬停查看动效，单击选中，双击打开；标题和右上角菜单都可以直接操作。</p>
+                </div>
+                <div className="folder-preview-lab-guide">
+                    <MousePointer2 aria-hidden />
+                    <span>试试 hover、双击与样式切换</span>
+                </div>
+            </header>
+
+            <section className="folder-preview-lab-grid" aria-label="文件夹样式预览">
+                {folders.map((folder, index) => {
+                    const preset = STYLE_PRESETS[index];
+                    const childNodes = childrenByFolder[folder.id] || [];
+                    return (
+                        <article key={folder.id} className="folder-preview-lab-item">
+                            <div className="folder-preview-lab-item-copy">
+                                <strong>{preset.name}</strong>
+                                <span>{preset.hint}</span>
+                            </div>
+                            <div
+                                className="folder-preview-lab-folder"
+                                role="button"
+                                tabIndex={0}
+                                aria-label={`打开 ${folder.title}`}
+                                onClick={() => setSelectedId(folder.id)}
+                                onDoubleClick={() => setOpenedId(folder.id)}
+                                onKeyDown={(event) => {
+                                    if (event.key === "Enter" || event.key === " ") {
+                                        event.preventDefault();
+                                        setOpenedId(folder.id);
+                                    }
+                                }}
+                            >
+                                <CanvasFolderPreview
+                                    data={folder}
+                                    childNodes={childNodes}
+                                    active={selectedId === folder.id}
+                                    isDropTarget={false}
+                                    readOnly={false}
+                                    onToggleCollapsed={setOpenedId}
+                                    onTitleChange={(nodeId, title) => updateFolder(nodeId, (current) => ({ ...current, title }))}
+                                    onStyleChange={(nodeId, style) =>
+                                        updateFolder(nodeId, (current) => ({
+                                            ...current,
+                                            metadata: {
+                                                ...current.metadata,
+                                                folder: { ...current.metadata!.folder!, style },
+                                            },
+                                        }))
+                                    }
+                                />
+                            </div>
+                            <button type="button" className="folder-preview-lab-open" onClick={() => setOpenedId(folder.id)}>
+                                <FolderOpen aria-hidden /> 打开文件夹
+                            </button>
+                        </article>
+                    );
+                })}
+            </section>
+
+            {openedFolder ? (
+                <section className="folder-preview-lab-drawer" aria-label={`${openedFolder.title} 内容`}>
+                    <div className="folder-preview-lab-drawer-header">
+                        <button type="button" onClick={() => setOpenedId(null)}>
+                            <ChevronLeft aria-hidden /> 返回
+                        </button>
+                        <div>
+                            <span>已打开</span>
+                            <h2>{openedFolder.title}</h2>
+                        </div>
+                        <button type="button" onClick={addSampleContent}>
+                            <ImagePlus aria-hidden /> 添加示例内容
+                        </button>
+                    </div>
+                    <div className="folder-preview-lab-assets">
+                        {openedChildren.map((node) => (
+                            <article key={node.id} className="folder-preview-lab-asset">
+                                <img src={node.metadata?.content} alt="" draggable={false} />
+                                <div>
+                                    <strong>{node.title}</strong>
+                                    <span>图片素材</span>
+                                </div>
+                            </article>
+                        ))}
+                    </div>
+                </section>
+            ) : null}
+        </main>
+    );
+}
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -40,6 +40,7 @@ const ProjectsPage = lazy(loadProjectsPage);
 const ProjectDetailPage = lazy(() => import("@/pages/projects/detail"));
 const SettingsPage = lazy(() => import("@/pages/settings"));
 const TestVoiceRecording = lazy(() => import("@/pages/test-voice-recording"));
+const FolderPreviewLab = lazy(() => import("@/pages/dev/folder-preview-lab"));

 function deferred(element: ReactNode) {
    return <Suspense fallback={<WorkspaceRouteLoader />}>{element}</Suspense>;
@@ -59,6 +60,9 @@ export const router = createBrowserRouter([
        ],
    },
    { path: "/share/canvas/:token", element: fullScreenDeferred(<SharedCanvasPage />), errorElement: <RouteErrorPage /> },
+    ...(import.meta.env.DEV
+        ? [{ path: "/dev/folders", element: fullScreenDeferred(<FolderPreviewLab />), errorElement: <RouteErrorPage /> }]
+        : []),
    {
        element: (
            <UserLayout>