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

style: 调整打光设置弹窗宽度和样式

Browse Source 
1.  将打光弹窗的固定宽度改为全屏适配宽度
2.  调整项目页面弹窗的宽度从740px改为900px
This commit is contained in:
bensharp
2026-09-09 17:13:34 +08:00
parent 01d3842cc6
commit 75e8e05934
3 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -2,6 +2,7 @@
out/
node_modules/
docs/*
open-storyboard-canvas/
!docs/design/
!docs/index.md
!docs/adr/
@@ -57,3 +58,4 @@ camera_language_guide.md
.superdesign
.playwright-cli/
/project-memory/
open-storyboard-canvas

8
web/src/components/canvas/canvas-node-lighting-dialog.tsx
View File

@@ -204,7 +204,7 @@ export function CanvasNodeLightingPanel({ dataUrl, onClose, onConfirm }: { dataU
initial={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.97 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={reducedMotion ? { duration: 0 } : aceternityMotion.spring.panel}
className="w-[700px] max-w-full overflow-hidden rounded-[var(--r-2xl)] border backdrop-blur-2xl"
className="w-full max-w-full overflow-hidden rounded-[var(--r-2xl)] border backdrop-blur-2xl"
style={{ background: theme.spatial.elevated, borderColor: theme.toolbar.border, color: theme.node.text, boxShadow: `0 28px 80px ${theme.spatial.shadow}` }}
onMouseDown={(event) => event.stopPropagation()}
onPointerDown={(event) => event.stopPropagation()}
@@ -237,7 +237,7 @@ export function CanvasNodeLightingPanel({ dataUrl, onClose, onConfirm }: { dataU
</div>
{/* Middle col: global controls */}
<div className="flex flex-col gap-3 border-r px-3 py-3" style={{ width: 210, borderColor: theme.toolbar.border }}>
<div className="flex flex-col gap-3 border-r px-3 py-3" style={{ width: 280, borderColor: theme.toolbar.border }}>
<div className="flex items-center justify-between">
<span className="text-[var(--fs-tiny)] font-medium" style={{ color: theme.node.muted }}>全局</span>
<PanelToggle label="智能模式" checked={options.smartMode} onChange={(checked) => updateOption("smartMode", checked)} theme={theme} />
@@ -245,7 +245,7 @@ export function CanvasNodeLightingPanel({ dataUrl, onClose, onConfirm }: { dataU
<div className="space-y-1.5">
<div className="flex items-center gap-2">
<span className="w-6 text-[var(--fs-tiny)]" style={{ color: theme.node.muted }}>亮度</span>
<span className="w-8 text-[var(--fs-tiny)]" style={{ color: theme.node.muted }}>亮度</span>
<div className="min-w-0 flex-1"><Slider min={0} max={100} value={options.brightness} onChange={(value) => updateOption("brightness", value)} tooltip={{ formatter: (value) => `${value}%` }} /></div>
<div className="flex items-center gap-1 rounded-[var(--r-md)] border px-2 py-1 text-[11px]" style={{ borderColor: theme.toolbar.border, background: theme.toolbar.itemHover, color: theme.node.muted }}>
<Sun className="size-3" />
@@ -255,7 +255,7 @@ export function CanvasNodeLightingPanel({ dataUrl, onClose, onConfirm }: { dataU
</div>
<div className="flex items-center gap-2">
<span className="w-6 text-[var(--fs-tiny)]" style={{ color: theme.node.muted }}>颜色</span>
<span className="w-8 text-[var(--fs-tiny)]" style={{ color: theme.node.muted }}>颜色</span>
<div className="relative flex items-center">
<label
className="relative h-6 w-10 cursor-pointer overflow-hidden rounded border"

2
web/src/pages/canvas/project.tsx
View File

@@ -2521,7 +2521,7 @@ function InfiniteCanvasPage() {
centered
title="打光效果"
footer={null}
width={740}
width={900}
destroyOnHidden
onCancel={() => setLightingNodeId(null)}
>