@@ -376,7 +376,7 @@ function renderCardHeader(icon: TemplateResult, title: string, action?: Template
376376377377function renderModelCard(props: QuickSettingsProps) {
378378return html`
379- <div class="qs-card">
379+ <div class="qs-card qs-card--model">
380380 ${renderCardHeader(icons.brain, "Model & Thinking")}
381381 <div class="qs-card__body">
382382 <div class="qs-row">
@@ -426,7 +426,7 @@ function renderChannelsCard(props: QuickSettingsProps) {
426426 : undefined;
427427428428return html`
429- <div class="qs-card">
429+ <div class="qs-card qs-card--channels">
430430 ${renderCardHeader(icons.send, "Channels", badge)}
431431 <div class="qs-card__body">
432432 ${props.channels.length === 0
@@ -460,7 +460,7 @@ function renderAutomationsCard(props: QuickSettingsProps) {
460460const { cronJobCount, skillCount, mcpServerCount } = props.automation;
461461462462return html`
463- <div class="qs-card">
463+ <div class="qs-card qs-card--automations">
464464 ${renderCardHeader(icons.zap, "Automations")}
465465 <div class="qs-card__body">
466466 <div class="qs-row">
@@ -490,7 +490,7 @@ function renderSecurityCard(props: QuickSettingsProps) {
490490const { gatewayAuth, execPolicy, deviceAuth } = props.security;
491491492492return html`
493- <div class="qs-card">
493+ <div class="qs-card qs-card--security">
494494 ${renderCardHeader(
495495 icons.eye,
496496 "Security",
@@ -525,7 +525,7 @@ function renderSecurityCard(props: QuickSettingsProps) {
525525function renderAppearanceCard(props: QuickSettingsProps) {
526526const themeOptions: ThemeOption[] = [...BUILTIN_THEME_OPTIONS, { id: "custom", label: "Custom" }];
527527return html`
528- <div class="qs-card">
528+ <div class="qs-card qs-card--appearance">
529529 ${renderCardHeader(icons.spark, "Appearance")}
530530 <div class="qs-card__body">
531531 <div class="qs-row">
@@ -976,10 +976,6 @@ function renderConnectionFooter(props: QuickSettingsProps) {
976976 `;
977977}
978978979-function renderStack(...cards: TemplateResult[]) {
980-return html`<div class="qs-stack">${cards}</div>`;
981-}
982-983979// ── Main render ──
984980985981export function renderQuickSettings(props: QuickSettingsProps) {
@@ -993,9 +989,11 @@ export function renderQuickSettings(props: QuickSettingsProps) {
993989 </div>
994990995991 <div class="qs-grid">
996- ${renderStack(renderModelCard(props), renderSecurityCard(props))}
997- ${renderChannelsCard(props)} ${renderPersonalCard(props)}
998- ${renderStack(renderAppearanceCard(props), renderAutomationsCard(props))}
992+ ${renderModelCard(props)} ${renderChannelsCard(props)} ${renderSecurityCard(props)}
993+ ${renderPersonalCard(props)}
994+ <div class="qs-side-stack">
995+ ${renderAppearanceCard(props)} ${renderAutomationsCard(props)}
996+ </div>
999997 ${renderPresetsCard(props)}
1000998 </div>
1001999此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。