tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(web): 文件夹主题 - 修复前端格式检查

Browse Source
This commit is contained in:
echoD886
2026-08-20 16:50:50 +08:00
parent d5895a07a6
commit 77818e08ce
5 changed files with 50 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/src/pages/dev/folder-preview-lab.css
View File

@@ -22,14 +22,14 @@
color: var(--muted-foreground);
font-size: var(--fs-label);
font-weight: 650;
letter-spacing: .12em;
letter-spacing: 0.12em;
}
.folder-preview-lab-header h1 {
margin: var(--space-2) 0 0;
font-size: var(--fs-display);
font-weight: 620;
letter-spacing: -.04em;
letter-spacing: -0.04em;
}
.folder-preview-lab-header p {
@@ -151,7 +151,7 @@
margin: 0;
font-size: var(--fs-title);
font-weight: 620;
letter-spacing: -.02em;
letter-spacing: -0.02em;
}
.folder-preview-lab-section-heading p {
@@ -215,7 +215,9 @@
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);
transition:
transform var(--motion-state) var(--motion-ease-out),
background-color var(--motion-state) var(--motion-ease-out);
}
.folder-preview-lab-open {
@@ -282,7 +284,9 @@
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);
transition:
transform var(--motion-state) var(--motion-ease-out),
background-color var(--motion-state) var(--motion-ease-out);
}
.folder-preview-lab-asset:hover {
@@ -315,16 +319,37 @@
}
@media (max-width: 760px) {
.folder-preview-lab { padding: var(--space-6) var(--space-4) var(--space-12); }
.folder-preview-lab {
padding: var(--space-6) var(--space-4) var(--space-12);
}
.folder-preview-lab-header,
.folder-preview-lab-controls,
.folder-preview-lab-section-heading { align-items: flex-start; flex-direction: column; }
.folder-preview-lab-grid { grid-template-columns: minmax(0, 1fr); }
.folder-preview-lab-theme-catalog { grid-template-columns: repeat(2, 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; }
.folder-preview-lab-section-heading {
align-items: flex-start;
flex-direction: column;
}
.folder-preview-lab-grid {
grid-template-columns: minmax(0, 1fr);
}
.folder-preview-lab-theme-catalog {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.folder-preview-lab-folder {
transform: scale(0.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) {
@@ -332,6 +357,6 @@
.folder-preview-lab-open,
.folder-preview-lab-asset,
.folder-preview-lab-drawer-header button {
transition-duration: .01ms !important;
transition-duration: 0.01ms !important;
}
}

19
web/src/pages/dev/folder-preview-lab.tsx
View File

@@ -35,13 +35,7 @@ const PRESET_GROUPS = [
const THEME_SEQUENCE: CanvasFolderTheme[] = ["aurora", "pearl", "ember", "obsidian", "aurora", "pearl"];
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",
];
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 {
@@ -75,9 +69,7 @@ const INITIAL_FOLDERS = STYLE_PRESETS.map((preset, index) => makeFolderNode(pres
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),
),
SAMPLE_MEDIA.slice(0, 3 + (folderIndex % 3)).map((source, childIndex) => makeMediaNode(`${folder.id}-asset-${childIndex}`, ["主视觉", "氛围参考", "场景草图", "色彩方案", "镜头灵感"][childIndex], source, childIndex)),
]),
) as Record<string, CanvasNodeData[]>;
@@ -100,12 +92,7 @@ export default function FolderPreviewLab() {
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,
);
const next = makeMediaNode(`${openedId}-asset-${Date.now()}`, `新素材 ${index + 1}`, SAMPLE_MEDIA[index % SAMPLE_MEDIA.length], index);
return { ...current, [openedId]: [...previous, next] };
});
};