feat(settings): 开关改为可点击卡片 — 高亮即启用

- 清单项（侧边栏内容/文件预览）、嵌套相关设置与「新会话默认打开」
  全部从复选框行改为 <button aria-pressed> 卡片：整卡点击切换，
  视觉状态即状态（启用 = 品牌描边 + 交互选中填充 + 勾选徽标；
  禁用 = 中性 hairline + 文字降级），悬停仅在禁用卡上显示
- 嵌套相关设置渲染为更小的缩进卡片（仍仅父级启用时显示）；
  宽度输入保持原生设置行（数值非开关）
- 设置导航齿轮为宿主 shell navIcon 硬编码（无插件注入点），
  按用户选择不改宿主、保持现状
- 新增 settingsGeneralTitle 文案；规格测试改为断言 aria-pressed
- 文档（README/AGENTS.md/设计文档偏差记录）同步

src/client/SideCardSection.module.css

@@ -1,13 +1,17 @@
 /**
- * Side card settings section chrome: the native settings-row recipe (figma
- * row 16/0 padding, hairline separator, 14px/22px title, 12px/17px desc) with
- * the native checkbox (16px, brand accent) and the Input atom + "%" suffix.
- * The shell strips the last row's separator via the trailing-child rule.
+ * Side card settings section chrome: the toggle cards are the switch — a
+ * clickable block whose visual state IS the state (enabled = brand border +
+ * tinted fill + check badge; disabled = neutral hairline + dimmed text).
+ * Nested declarative toggles render as smaller indented cards; the width
+ * input stays a native settings row; the section heading groups the three
+ * inventories. The shell strips the last row's separator via the
+ * trailing-child rule.
  */
 
 .section {
   display: flex;
   flex-direction: column;
+  gap: 8px;
   width: 100%;
 }
 
@@ -15,30 +19,93 @@
   border-bottom: none;
 }
 
-.row {
+/* One toggle card: whole-card click, `aria-pressed` announces the state. */
+.card {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 16px 0;
-  border-bottom: 1px solid var(--dsw-alias-border-l2);
+  gap: 12px;
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
   cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease;
 }
 
-/* Nested declarative toggle (a tab's related setting): indented child row. */
-.subRow {
-  display: flex;
+/* Hover affordance on disabled cards only (enabled cards are already lit). */
+.card:not(.cardOn):hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-l4);
+  outline-offset: 2px;
+}
+
+/* Enabled = highlighted: brand border + tinted fill. */
+.cardOn {
+  border-color: var(--dsw-alias-button-primary-fill);
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+/* Nested declarative toggle (a feature's related setting): smaller, indented. */
+.cardSub {
+  margin-left: 28px;
+  padding: 10px 12px;
+}
+
+.cardIcon {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 10px 0 10px 28px;
-  border-bottom: 1px solid var(--dsw-alias-border-l2);
-  cursor: pointer;
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
 }
 
-/* Inventory section heading (侧边栏内容 / 文件预览). */
+.cardOn .cardIcon {
+  color: var(--dsw-alias-button-primary-fill);
+}
+
+.cardText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.cardTitle {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.cardOn .cardTitle {
+  color: var(--dsw-alias-label-primary);
+}
+
+.cardDesc {
+  font-size: 12px;
+  line-height: 17px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.cardOn .cardDesc {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.cardCheck {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--dsw-alias-button-primary-fill);
+}
+
+/* Inventory section heading (常规 / 侧边栏内容 / 文件预览). */
 .sectionHeading {
-  padding: 18px 0 6px;
+  padding: 14px 0 0;
   font-size: 12px;
   line-height: 17px;
   font-weight: 600;
@@ -46,20 +113,14 @@
   color: var(--dsw-alias-label-secondary);
 }
 
-/* Icon of one inventory row, inline with the title. */
-.rowIcon {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  color: var(--dsw-alias-label-secondary);
-}
-
-/* Title with the icon beside it. */
-.titleLine {
+/* The width input stays a native settings row (it is a value, not a switch). */
+.row {
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-width: 0;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
 }
 
 .rowText {
@@ -81,21 +142,6 @@
   color: var(--dsw-alias-label-secondary);
 }
 
-/* Native checkbox: 16px, brand accent, no custom chrome (RiskConfirmation recipe). */
-.toggle {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--dsw-alias-button-primary-fill);
-  cursor: pointer;
-}
-
-.toggle:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-l4);
-  outline-offset: 2px;
-}
-
 .control {
   flex: none;
   display: flex;
@@ -121,7 +167,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .row {
+  .card {
     transition: none;
   }
 }

src/client/SideCardSection.tsx

@@ -4,16 +4,18 @@
  *
  * The section is DECLARATIVE — it renders the enable/disable inventory from
  * the sidebar service's registries instead of hardcoding rows:
- *  - 常规: new conversations open the panel by default (native checkbox),
- *    and the default panel width as a percent of the window (number input).
- *  - 侧边栏内容: one row per REGISTERED tab type (built-ins and external
- *    plugins alike) — icon + title + type id + an on/off switch persisted in
- *    `prefs.tabsEnabled[id]`. A tab's `settings.toggles` declaration renders
- *    as nested switches under its row while the tab is enabled (e.g. the
- *    Subagent page's "auto-open when a subagent appears").
- *  - 文件预览: one row per REGISTERED file viewer — icon + title + the
- *    extensions it covers + an on/off switch persisted in
- *    `prefs.viewersEnabled[id]`.
+ *  - 常规: new conversations open the panel by default (a toggle card), and
+ *    the default panel width as a percent of the window (number input row).
+ *  - 侧边栏内容: one CARD per REGISTERED tab type (built-ins and external
+ *    plugins alike) — icon + title + type id, clicked to toggle the switch
+ *    persisted in `prefs.tabsEnabled[id]`. A card's `settings.toggles`
+ *    declaration renders as nested smaller cards under it while the tab is
+ *    enabled (e.g. the Subagent page's "auto-open when a subagent appears").
+ *  - 文件预览: one CARD per REGISTERED file viewer — icon + title + the
+ *    extensions it covers, clicked to toggle `prefs.viewersEnabled[id]`.
+ *
+ * A card's on/off state is its VISUAL STATE: enabled = highlighted (brand
+ * border + tinted fill + check badge), disabled = neutral and dimmed.
  *
  * Writes ride the plugin's own fenced settings route (the host calls the
  * settings seam in-process — the DSH settings RPC domain does not serve
@@ -25,7 +27,8 @@
  * shell.
  */
 import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react'
-import { Input } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconCheckOutline16, IconPanelLeftOutline16, Input } from '@deepseek-ai/dsh-client-ui-primitives'
+import clsx from 'clsx'
 // Type-only: pulls the settings shell's SlotMap merges ('settings.section').
 import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
@@ -210,49 +213,51 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
     void commit({ defaultWidthPercent: clamped }).then(outcome => applyOutcome(previous, outcome))
   }
 
-  /** One enable/disable row: icon + title + desc + checkbox. */
-  const renderRow = (props: {
+  /**
+   * One toggle CARD: the whole card is the switch — clicking it flips the
+   * feature, and the visual state IS the state (highlighted = enabled, with
+   * a check badge; neutral + dimmed = disabled). Nested related settings
+   * render as smaller indented cards (`sub`).
+   */
+  const renderCard = (props: {
     title: string
     desc: string
     icon?: ReactNode
-    checked: boolean
-    label: string
+    enabled: boolean
     onToggle: (next: boolean) => void
     sub?: boolean
   }) => (
-    <label className={props.sub === true ? css.subRow : css.row}>
-      <span className={css.rowText}>
-        <span className={css.titleLine}>
-          {props.icon !== null && props.icon !== undefined && <span className={css.rowIcon}>{props.icon}</span>}
-          <span className={css.title}>{props.title}</span>
-        </span>
-        <span className={css.desc}>{props.desc}</span>
+    <button
+      type="button"
+      className={clsx(css.card, props.sub === true && css.cardSub, props.enabled && css.cardOn)}
+      aria-pressed={props.enabled}
+      onClick={() => { props.onToggle(!props.enabled) }}
+    >
+      {props.icon !== null && props.icon !== undefined && (
+        <span className={css.cardIcon}>{props.icon}</span>
+      )}
+      <span className={css.cardText}>
+        <span className={css.cardTitle}>{props.title}</span>
+        <span className={css.cardDesc}>{props.desc}</span>
       </span>
-      <input
-        type="checkbox"
-        className={css.toggle}
-        checked={props.checked}
-        aria-label={props.label}
-        onChange={event => { props.onToggle(event.currentTarget.checked) }}
-      />
-    </label>
+      {props.enabled && (
+        <span className={css.cardCheck}>
+          <IconCheckOutline16 size={14} />
+        </span>
+      )}
+    </button>
   )
 
   return (
     <div className={css.section}>
-      <label className={css.row}>
-        <span className={css.rowText}>
-          <span className={css.title}>{t('settingsOpenTitle')}</span>
-          <span className={css.desc}>{t('settingsOpenDesc')}</span>
-        </span>
-        <input
-          type="checkbox"
-          className={css.toggle}
-          checked={prefs.openByDefault}
-          aria-label={t('settingsOpenTitle')}
-          onChange={event => { onToggle(event.currentTarget.checked) }}
-        />
-      </label>
+      <div className={css.sectionHeading}>{t('settingsGeneralTitle')}</div>
+      {renderCard({
+        title: t('settingsOpenTitle'),
+        desc: t('settingsOpenDesc'),
+        icon: <IconPanelLeftOutline16 size={16} />,
+        enabled: prefs.openByDefault,
+        onToggle,
+      })}
       <div className={css.row}>
         <span className={css.rowText}>
           <span className={css.title}>{t('settingsWidthTitle')}</span>
@@ -277,27 +282,25 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
         </span>
       </div>
 
-      {/* 侧边栏内容: one row per registered tab type, icon + type id + switch,
-          plus each tab's declaratively-declared nested toggles (shown only
-          while the tab itself is enabled). */}
+      {/* 侧边栏内容: one card per registered tab type, icon + type id; the
+          card's `settings.toggles` render as nested smaller cards while the
+          tab itself is enabled. */}
       <div className={css.sectionHeading}>{t('settingsTabsTitle')}</div>
       {tabs.map(tab => (
         <Fragment key={tab.id}>
-          {renderRow({
+          {renderCard({
             title: textOf(tab.title),
             desc: tab.id,
             icon: iconOf(tab.icon, 16),
-            checked: prefs.tabsEnabled[tab.id] !== false,
-            label: textOf(tab.title),
+            enabled: prefs.tabsEnabled[tab.id] !== false,
             onToggle: (next) => { onToggleTab(tab.id, next) },
           })}
           {prefs.tabsEnabled[tab.id] !== false && (tab.settings?.toggles ?? []).map(toggle => (
             <Fragment key={`${tab.id}:${toggle.key}`}>
-              {renderRow({
+              {renderCard({
                 title: textOf(toggle.title),
                 desc: textOf(toggle.desc),
-                checked: prefBool(prefs, toggle.key),
-                label: textOf(toggle.title),
+                enabled: prefBool(prefs, toggle.key),
                 onToggle: (next) => { onToggleSetting(toggle, next) },
                 sub: true,
               })}
@@ -306,16 +309,15 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
         </Fragment>
       ))}
 
-      {/* 文件预览: one row per registered file viewer, icon + title + exts + switch. */}
+      {/* 文件预览: one card per registered file viewer, icon + title + exts. */}
       <div className={css.sectionHeading}>{t('settingsViewersTitle')}</div>
       {viewers.map(viewer => (
         <Fragment key={viewer.id}>
-          {renderRow({
+          {renderCard({
             title: textOf(viewer.title) || viewer.id,
             desc: viewer.exts.length === 0 ? t('settingsViewerCatchAll') : viewer.exts.join(' · '),
             icon: iconOf(viewer.icon, 16),
-            checked: prefs.viewersEnabled[viewer.id] !== false,
-            label: textOf(viewer.title) || viewer.id,
+            enabled: prefs.viewersEnabled[viewer.id] !== false,
             onToggle: (next) => { onToggleViewer(viewer.id, next) },
           })}
         </Fragment>

src/client/locales.ts

@@ -123,6 +123,7 @@ const zh = {
   settingsToolsDesc: '开启后，模型可通过 terminal_create 等 8 个工具创建并操作侧边栏终端（默认关闭）',
   settingsTabsTitle: '侧边栏内容',
   settingsViewersTitle: '文件预览',
+  settingsGeneralTitle: '常规',
   settingsViewerCatchAll: '兜底：任意文件',
   viewerImage: '图片',
   viewerPdf: 'PDF',
@@ -267,6 +268,7 @@ const en: Record<keyof typeof zh, string> = {
   settingsToolsDesc: 'When enabled, the model can create and drive sidebar terminals through the 8 terminal_* tools (off by default)',
   settingsTabsTitle: 'Sidebar content',
   settingsViewersTitle: 'File viewers',
+  settingsGeneralTitle: 'General',
   settingsViewerCatchAll: 'Catch-all: any file',
   viewerImage: 'Image',
   viewerPdf: 'PDF',