fix(ui): make ConfigProps fields optional to avoid upstream test breakage

This commit is contained in:
chembo.huang 2026-03-18 16:10:17 +08:00
parent c11dbc797f
commit 739ed86847
2 changed files with 12 additions and 8 deletions

View File

@ -46,6 +46,8 @@ describe("config view", () => {
setBorderRadius: vi.fn(),
gatewayUrl: "",
assistantName: "OpenClaw",
borderRadius: 8,
setBorderRadius: vi.fn(),
});
function findActionButtons(container: HTMLElement): {

View File

@ -49,8 +49,8 @@ export type ConfigProps = {
themeMode: ThemeMode;
setTheme: (theme: ThemeName, context?: ThemeTransitionContext) => void;
setThemeMode: (mode: ThemeMode, context?: ThemeTransitionContext) => void;
borderRadius: number;
setBorderRadius: (value: number) => void;
borderRadius?: number;
setBorderRadius?: (value: number) => void;
gatewayUrl: string;
assistantName: string;
configPath?: string | null;
@ -517,6 +517,8 @@ const THEME_OPTIONS: ThemeOption[] = [
];
function renderAppearanceSection(props: ConfigProps) {
const borderRadius = props.borderRadius ?? 8;
const setBorderRadius = props.setBorderRadius ?? (() => {});
return html`
<div class="settings-appearance">
<div class="settings-appearance__section">
@ -559,7 +561,7 @@ function renderAppearanceSection(props: ConfigProps) {
<span class="settings-slider__key-swatch settings-slider__key-swatch--sharp"></span>
Square
</span>
<span class="settings-slider__value">${props.borderRadius}%</span>
<span class="settings-slider__value">${borderRadius}%</span>
<span class="settings-slider__label">
Round
<span class="settings-slider__key-swatch settings-slider__key-swatch--round"></span>
@ -571,24 +573,24 @@ function renderAppearanceSection(props: ConfigProps) {
min="0"
max="100"
step="1"
.value=${String(props.borderRadius)}
.value=${String(borderRadius)}
@input=${(e: Event) => {
const v = Number((e.target as HTMLInputElement).value);
props.setBorderRadius(v);
setBorderRadius(v);
}}
/>
<div class="settings-slider__preview">
<div
class="settings-slider__preview-swatch"
style="border-radius: ${Math.round(10 * (props.borderRadius / 50))}px"
style="border-radius: ${Math.round(10 * (borderRadius / 50))}px"
></div>
<div
class="settings-slider__preview-swatch"
style="border-radius: ${Math.round(14 * (props.borderRadius / 50))}px"
style="border-radius: ${Math.round(14 * (borderRadius / 50))}px"
></div>
<div
class="settings-slider__preview-swatch"
style="border-radius: ${Math.round(20 * (props.borderRadius / 50))}px"
style="border-radius: ${Math.round(20 * (borderRadius / 50))}px"
></div>
</div>
</div>