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

feat(canvas): 视频参数 - 支持自定义时长并统一分辨率与设置面板

Browse Source
This commit is contained in:
ddCat
2026-07-31 17:16:43 +08:00
parent 7dd2a5881b
commit 98aad91d5f
8 changed files with 63 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/image-settings-panel.tsx
View File

@@ -121,8 +121,8 @@ export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle =
<button
key={item.value}
type="button"
className="flex h-[58px] cursor-pointer flex-col items-center justify-center gap-0.5 rounded-lg border bg-transparent text-xs transition hover:opacity-80"
style={{ borderColor: selectedAspect?.value === item.value ? theme.node.text : theme.node.stroke, background: "transparent", color: theme.node.text }}
className="flex h-[58px] cursor-pointer flex-col items-center justify-center gap-0.5 rounded-lg bg-transparent text-xs transition-colors hover:brightness-110 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
style={{ background: selectedAspect?.value === item.value ? theme.toolbar.activeBg : "transparent", color: theme.node.text, outlineColor: theme.node.muted }}
onMouseDown={(event) => event.stopPropagation()}
onClick={() => selectAspect(item.value)}
>
@@ -154,8 +154,8 @@ export function ImageSettingsTheme({ theme, children }: { theme: CanvasTheme; ch
return (
<ConfigProvider
theme={{
token: { colorBgContainer: theme.toolbar.panel, colorBgElevated: theme.toolbar.panel, colorBorder: theme.node.stroke, colorPrimary: theme.node.activeStroke, colorText: theme.node.text, colorTextLightSolid: theme.node.panel },
components: { Button: { defaultBg: theme.toolbar.panel, defaultBorderColor: theme.node.stroke, defaultColor: theme.node.text } },
token: { colorBgContainer: theme.canvas.background, colorBgElevated: theme.canvas.background, colorBorder: theme.node.stroke, colorPrimary: theme.node.activeStroke, colorText: theme.node.text, colorTextLightSolid: theme.node.panel },
components: { Button: { defaultBg: theme.canvas.background, defaultBorderColor: theme.node.stroke, defaultColor: theme.node.text } },
}}
>
{children}
@@ -175,8 +175,8 @@ function OptionPill({ selected, theme, onClick, children }: { selected: boolean;
return (
<button
type="button"
className="h-8 cursor-pointer rounded-full border px-2 text-xs transition hover:opacity-80"
style={{ background: "transparent", borderColor: selected ? theme.node.text : theme.node.stroke, color: theme.node.text }}
className="h-8 cursor-pointer rounded-full px-2 text-xs transition-colors hover:brightness-110 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
style={{ background: selected ? theme.toolbar.activeBg : "transparent", color: theme.node.text, outlineColor: theme.node.muted }}
onMouseDown={(event) => event.stopPropagation()}
onClick={onClick}
>
@@ -193,7 +193,7 @@ function DimensionInput({ prefix, value, disabled, theme, alignToStep, onChange
};
return (
<label className="flex h-8 overflow-hidden rounded-lg text-xs" style={{ background: theme.node.fill, color: theme.node.text, opacity: disabled ? 0.55 : 1 }}>
<label className="flex h-8 overflow-hidden rounded-lg text-xs" style={{ background: theme.toolbar.itemHover, color: theme.node.text, opacity: disabled ? 0.55 : 1 }}>
<span className="grid w-8 place-items-center" style={{ color: theme.node.muted }}>
{prefix}
</span>
@@ -216,7 +216,7 @@ function DimensionInput({ prefix, value, disabled, theme, alignToStep, onChange
function CountInput({ value, max, theme, onChange }: { value: number; max: number; theme: CanvasTheme; onChange: (value: number | null) => void }) {
return (
<label className="col-span-2 flex h-8 overflow-hidden rounded-full border text-xs" style={{ borderColor: theme.node.stroke, color: theme.node.text }}>
<label className="col-span-2 flex h-8 overflow-hidden rounded-full text-xs" style={{ background: theme.toolbar.itemHover, color: theme.node.text }}>
<input
type="number"
min={1}