feat(ui): 新增 TextButton / ToggleRow，Table 支持紧凑档

- TextButton：文字按钮（tone 主色/危险、可选图标、disabled），
  用于表格行内操作，hover 只加下划线
- ToggleRow：左标签 + 右开关的开关行，支持 hint 与 switchLabel
- Table：新增 size='md' | 'sm'，sm 把行内边距收到 space-2
- 展示页：按钮补「文字按钮」、开关补「开关行」、表格补「紧凑档」；
  COMPONENTS.md 契约 3.46 / 3.47 与 README 清单同步

src/components/ToggleRow.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react'
+import { Switch } from './Switch'
+import { Text } from './Typography'
+import styles from './ToggleRow.module.css'
+
+/**
+ * 开关行：左边一行说明文字，右边一个开关，两端对齐。
+ *
+ * 设置面板里「每行一个开关」的场景用它，比自己拼 `Space justify="between"` 更整齐。
+ * 开关旁边没有文字标签时，`switchLabel` 必填（会进 aria-label）。
+ */
+export type ToggleRowProps = {
+  /** 显示的标签 */
+  label: ReactNode
+  checked: boolean
+  onChange: (checked: boolean) => void
+  /** 屏幕阅读器读到的开关名称，默认取 label 的文本 */
+  switchLabel?: string
+  disabled?: boolean
+  /** 标签下方的补充说明 */
+  hint?: ReactNode
+  className?: string
+}
+
+export function ToggleRow({
+  label,
+  checked,
+  onChange,
+  switchLabel,
+  disabled = false,
+  hint,
+  className,
+}: ToggleRowProps) {
+  const accessibleLabel =
+    switchLabel ?? (typeof label === 'string' ? label : '开关')
+
+  return (
+    <div className={[styles.root, className].filter(Boolean).join(' ')}>
+      <span className={styles.text}>
+        <Text>{label}</Text>
+        {hint !== undefined && (
+          <Text size="xs" tone="muted">
+            {hint}
+          </Text>
+        )}
+      </span>
+      <Switch
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        label={accessibleLabel}
+      />
+    </div>
+  )
+}