refactor(ui): 迁入 Surface 受控槽与只出边框档的落点

Author: Aparencia

app/src/components/AiProviderSettings.tsx

@@ -13,7 +13,7 @@
 import { useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import type { AiProviderInput, AiProviderView } from "../types";
-import { ConfirmDialog, Button, EmptyState, StatusLine } from "../ui/primitives";
+import { ConfirmDialog, Button, EmptyState, StatusLine, Surface } from "../ui/primitives";
 
 const btn: React.CSSProperties = {
   padding: "5px 10px",
@@ -160,7 +160,7 @@ export default function AiProviderSettings() {
       )}
 
       {providers.map((p) => (
-        <div key={p.id} style={{ border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, marginBottom: 8 }}>
+        <Surface key={p.id} level="none" radius="panel" style={{ padding: 8, marginBottom: 8 }}>
           <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
             <span style={{ fontWeight: 600 }}>{p.name}</span>
             {p.isDefault && <span style={{ color: "#0d9488", fontWeight: 600 }}>● 默认</span>}
@@ -218,7 +218,7 @@ export default function AiProviderSettings() {
               </Button>
             </div>
           )}
-        </div>
+        </Surface>
       ))}
 
       {showAdd && (

app/src/components/AiServicePanel.tsx

@@ -13,7 +13,7 @@ import { invoke } from "@tauri-apps/api/core";
 import type { AiAuditEntry, AiSettingsView, RefineStrategyMeta } from "../types";
 import RefineStrategyPicker from "./RefineStrategyPicker";
 import { draftFromPrefs, prefsFromDraft, type StrategyDraft } from "../utils/refineStrategy";
-import { Button, EmptyState, StatusLine, Text } from "../ui/primitives";
+import { Button, EmptyState, StatusLine, Surface, Text } from "../ui/primitives";
 
 /** 通用小按钮样式（与各设置面板一致） */
 const btn: React.CSSProperties = {
@@ -259,7 +259,7 @@ export default function AiServicePanel() {
         {audit.length === 0 ? (
           <EmptyState title="暂无调用记录" compact />
         ) : (
-          <div style={{ maxHeight: 140, overflowY: "auto", border: "1px solid #e5e7eb", borderRadius: 6 }}>
+          <Surface level="none" radius="panel" style={{ maxHeight: 140, overflowY: "auto" }}>
             {audit.map((a, i) => (
               <div key={i} style={{ display: "flex", gap: 8, padding: "4px 8px", borderBottom: "1px solid #f3f4f6" }}>
                 <span style={{ color: "#6b7280", width: 64, flexShrink: 0 }}>{fmtTime(a.at_unix)}</span>
@@ -269,7 +269,7 @@ export default function AiServicePanel() {
                 <StatusLine kind={a.result === "ok" ? "ok" : "error"}>{a.result}</StatusLine>
               </div>
             ))}
-          </div>
+          </Surface>
         )}
       </div>
 

app/src/components/AiTaskPanel.tsx

@@ -15,7 +15,7 @@ import { invoke } from "@tauri-apps/api/core";
 import type { AiEnrichResult, AiRefineResult, AiTaskRecord } from "../types";
 // 低5（审查）：类别词经 entityLabel.kindWord 单一来源（不带 id 的语义词）
 import { kindWord } from "../utils/entityLabel";
-import { Button, EmptyState, StatusLine, Text } from "../ui/primitives";
+import { Button, EmptyState, StatusLine, Surface, Text } from "../ui/primitives";
 
 const btn: React.CSSProperties = { padding: "3px 8px", fontSize: 11, borderRadius: 5, border: "1px solid #d1d5db", background: "#fff", cursor: "pointer" };
 
@@ -154,7 +154,7 @@ export default function AiTaskPanel() {
       {tasks.length === 0 ? (
         <EmptyState title="暂无任务记录" description="精修/补充完成后自动记录" compact />
       ) : (
-        <div style={{ maxHeight: 200, overflowY: "auto", border: "1px solid #e5e7eb", borderRadius: 6 }}>
+        <Surface level="none" radius="panel" style={{ maxHeight: 200, overflowY: "auto" }}>
           {tasks.map((t) => {
             const badge = stateBadge(t.state);
             return (
@@ -188,7 +188,7 @@ export default function AiTaskPanel() {
               </div>
             );
           })}
-        </div>
+        </Surface>
       )}
 
       {/* 结果摘要 + 采纳（防重复采纳：采纳后任务标记 adopted，历史中不再可恢复） */}

app/src/components/ClassroomCapturePanel.tsx

@@ -21,10 +21,10 @@ import { AUTO_RESUME_HINTS } from "../hooks/liveCaptureState";
 import type { CaptureActionKind } from "../hooks/useLiveCaptureControl";
 import type { PrepareState } from "../hooks/useClassroomHints";
 import type { FloatSnapshot } from "../hooks/useFloatWindow";
+import { Surface } from "../ui/primitives";
 import type { DownloadProgress, PauseSource, StreamingModelStatus } from "../types";
 
 const btn: React.CSSProperties = { padding: "6px 12px", cursor: "pointer", fontSize: 13 };
-const panel: React.CSSProperties = { border: "1px solid #e5e7eb", borderRadius: 8, padding: 12 };
 
 /** 采集卡暂停状态行文案（按 reason 三态；沿用原横幅语义——媒体暂停含"自动继续"
  *  说明，前台切走含"回窗即继续"说明；徽标/右栏/浮窗用短文案 pauseReasonLabel） */
@@ -106,7 +106,7 @@ export default function ClassroomCapturePanel({
     pausedReason === "media" || pausedReason === "foreground" ? AUTO_RESUME_HINTS[pausedReason] : undefined;
 
   return (
-    <div style={panel}>
+    <Surface level="none" radius="panel" padded>
       <div style={{ fontSize: 12, color: "#6b7280", marginBottom: 6 }}>
         实时捕获{active && <span style={{ color: "#dc2626" }}> ● 录制中</span>}
       </div>
@@ -292,6 +292,6 @@ export default function ClassroomCapturePanel({
       {sessionId && !starting && (
         <p style={{ fontSize: 11, color: "#6b7280", margin: "6px 0 0" }}>实时捕获中（可到「会话」页查看）</p>
       )}
-    </div>
+    </Surface>
   );
 }

app/src/components/ClassroomRightPane.tsx

@@ -13,11 +13,11 @@
  */
 import LiveActivityPanel from "./LiveActivityPanel";
 import ProfileDetector from "./ProfileDetector";
+import { Surface } from "../ui/primitives";
 import { columnSpec } from "../shell/columnRegistry";
 import type { Note, ProfileKind, WindowInfo } from "../types";
 
 const btn: React.CSSProperties = { padding: "6px 12px", cursor: "pointer", fontSize: 13 };
-const panel: React.CSSProperties = { border: "1px solid #e5e7eb", borderRadius: 8, padding: 12 };
 
 /**
  * 非采集态内容区的**唯一**宽度上限（规格 §6.2：右面板是 flex 列，「统一 wrapper」）。
@@ -135,14 +135,14 @@ export default function ClassroomRightPane({
                   <li><strong>添加学习素材</strong>：音频文件（WAV，本地 SenseVoice 转写）与图片（本地 PP-OCRv6 识别）</li>
                   <li><strong>一键提取</strong>：转写 + OCR → 本地拼接为 Markdown 笔记 → 自动保存</li>
                 </ol>
-                <div style={{ ...panel, marginTop: 16, fontSize: 12, color: "#6b7280", lineHeight: 1.9 }}>
+                <Surface level="none" radius="panel" padded style={{ marginTop: 16, fontSize: 12, color: "#6b7280", lineHeight: 1.9 }}>
                   <div><strong>当前配置</strong></div>
                   <div>目标窗口：{selectedWindow ? `${selectedWindow.title}（${selectedWindow.processName || "未知进程"}）` : "未选择（实时捕获将抓全屏）"}</div>
                   <div>流式转写：sherpa-onnx Zipformer（实时字幕，需模型就绪）</div>
                   <div>转写引擎：sherpa-onnx SenseVoice（本地，已就绪）</div>
                   <div>OCR 引擎：oar-ocr PP-OCRv6（本地，首次使用自动下载模型）</div>
                   <div>数据主权：全部本地处理，内容不出本机</div>
-                </div>
+                </Surface>
               </div>
             )}
           </div>

app/src/components/LiveImageStrip.tsx

@@ -107,6 +107,9 @@ export default function LiveImageStrip({ sessionId }: { sessionId: number | null
       {/* 点击放大的大图预览（full 原图） */}
       {expanded && baseUrl && (
         <div style={{ marginBottom: 6, position: "relative", border: "1px solid #e5e7eb", borderRadius: 6, overflow: "hidden" }}>
+          {/* ⚠️ 批 7 T7：本处是「透明边框容器」的候选，但本文件是 `SURFACE_TAG_REGISTRY` 的 **legacy 行**
+              （`≤` 上限只许降）⇒ 迁它会顶红牙 1；抬高 legacy 面属 §C9.5 禁止 ⇒ 留在原地并登记
+              （见 `surfaceResidual.ts` 的 `legacy-registry-frozen`）。 */}
           <img
             src={convertFileSrc(`${baseUrl}/${expanded}`)}
             alt="关键帧原图"

app/src/components/MaterialInputPanel.tsx

@@ -13,10 +13,9 @@ import { open } from "@tauri-apps/plugin-dialog";
 import type { Note } from "../types";
 // Low 清扫：标题截断长度单一定义源（与 ClassroomPage 共享）
 import { NOTE_TITLE_MAX_LEN } from "../utils/constants";
-import { Button, Text } from "../ui/primitives";
+import { Button, Surface, Text } from "../ui/primitives";
 
 const btn: React.CSSProperties = { padding: "6px 12px", cursor: "pointer", fontSize: 13 };
-const panel: React.CSSProperties = { border: "1px solid #e5e7eb", borderRadius: 8, padding: 12 };
 
 interface Props {
   /** 标题来源：选定窗口标题（无窗口 → 默认名） */
@@ -63,15 +62,15 @@ export default function MaterialInputPanel({ windowTitle, onNote, onStatus }: Pr
   return (
     <>
       {/* 素材输入（v0.1.0：文件流水线） */}
-      <div style={panel}>
+      <Surface level="none" radius="panel" padded>
         <div style={{ fontSize: 12, color: "#6b7280", marginBottom: 6 }}>学习素材（文件）</div>
         <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
           <Button variant="secondary" size="lg" busy={processing} onClick={pickAudio}>选音频 WAV</Button>
           <Button variant="secondary" size="lg" busy={processing} onClick={pickImages}>选图片（多选）</Button>
         </div>
         {audioPath && <p style={{ fontSize: 11, color: "#374151", marginTop: 6, wordBreak: "break-all" }}>🎵 {audioPath}</p>}
         {imagePaths.length > 0 && <p style={{ fontSize: 11, color: "#374151", marginTop: 4 }}>🖼 已选 {imagePaths.length} 张图片</p>}
-      </div>
+      </Surface>
 
       {/* 底部启动按钮（参考原项目"开始回声定位"位置） */}
       <div style={{ padding: 12, borderTop: "1px solid #e5e7eb" }}>

app/src/components/NotePreviewView.tsx

@@ -15,7 +15,7 @@ import { invoke, convertFileSrc } from "@tauri-apps/api/core";
 import type { Note, NoteFilterResult, TextFilterDecision, TextFilterReview, TextFilterStatus } from "../types";
 import { escapeHtml, renderTimestampAnchors } from "../utils/html";
 import AiRefineCard from "./AiRefineCard";
-import { ConfirmDialog, Loading, Text } from "../ui/primitives";
+import { ConfirmDialog, Loading, Surface, Text } from "../ui/primitives";
 
 const btn: React.CSSProperties = { padding: "5px 10px", cursor: "pointer", fontSize: 12 };
 
@@ -290,15 +290,21 @@ export default function NotePreviewView({
               回到规则版预览
             </button>
           </div>
-          <div
-            style={{ fontSize: 13, lineHeight: 1.6, background: "#fff", border: "1px solid #d1fae5", borderRadius: 6, padding: 12 }}
-            dangerouslySetInnerHTML={{ __html: renderMarkdown(adopted.content, baseUrl, dataDir) }}
+          <Surface
+            level="surface"
+            radius="panel"
+            padded
+            html={renderMarkdown(adopted.content, baseUrl, dataDir)}
+            style={{ fontSize: 13, lineHeight: 1.6 }}
           />
         </div>
       ) : (
-        <div
-          style={{ fontSize: 13, lineHeight: 1.6, background: "#fff", border: "1px solid #e5e7eb", borderRadius: 8, padding: 12 }}
-          dangerouslySetInnerHTML={{ __html: renderMarkdown(preview.markdown, baseUrl, dataDir) }}
+        <Surface
+          level="surface"
+          radius="panel"
+          padded
+          html={renderMarkdown(preview.markdown, baseUrl, dataDir)}
+          style={{ fontSize: 13, lineHeight: 1.6 }}
         />
       )}
 

app/src/components/PhotoCapturePanel.tsx

@@ -12,10 +12,10 @@ import { useCallback, useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
+import { Surface } from "../ui/primitives";
 import ScreenSelectOverlay from "./ScreenSelectOverlay";
 
 const btn: React.CSSProperties = { padding: "6px 12px", cursor: "pointer", fontSize: 13 };
-const panel: React.CSSProperties = { border: "1px solid #e5e7eb", borderRadius: 8, padding: 12 };
 
 interface Props {
   onOpenSessions?: (sessionId: number) => void;
@@ -151,7 +151,7 @@ export default function PhotoCapturePanel({ onOpenSessions, onStatus }: Props) {
 
   return (
     <>
-      <div style={panel}>
+      <Surface level="none" radius="panel" padded>
         <div style={{ fontSize: 12, color: "#6b7280", marginBottom: 6 }}>图文采集（截屏导入图文内容）</div>
         {phase === "idle" && (
           <button
@@ -212,7 +212,7 @@ export default function PhotoCapturePanel({ onOpenSessions, onStatus }: Props) {
             </button>
           </>
         )}
-      </div>
+      </Surface>
       {snapshot && (
         <ScreenSelectOverlay
           src={snapshot.src}

app/src/components/PracticeQuestionsOverlays.tsx

@@ -11,7 +11,7 @@
  *              （`ActionCenterPanel` 的条件挂载）⇒ `open` 恒为 `true`，160ms 退场相位不触发。
  */
 import { useCallback, useEffect, useState } from "react";
-import { Button, EmptyState, Modal, Text } from "../ui/primitives";
+import { Button, EmptyState, Modal, Surface, Text } from "../ui/primitives";
 import { invoke } from "@tauri-apps/api/core";
 
 /** 响应结构（PracticeItem/QuestionItem 均 serde camelCase——字段须 camel 读取） */
@@ -112,15 +112,15 @@ export function PracticeOverlay({ onClose }: { onClose: () => void }) {
       ) : (
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
           {items.map((it) => (
-            <div key={it.id} style={{ border: "1px solid #e5e7eb", borderRadius: 8, padding: "6px 10px", display: "flex", gap: 6, alignItems: "center" }}>
+            <Surface key={it.id} level="none" radius="panel" style={{ padding: "6px 10px", display: "flex", gap: 6, alignItems: "center" }}>
               <span style={{ fontSize: 12.5, flex: 1 }}>{it.text}</span>
               <Text tone="ink-3" style={{ fontSize: 10.5 }}>
                 {it.frequency === "daily" ? "每日" : "手动"}
                 {it.mastery != null ? ` · 熟练 ${it.mastery}/5` : ""}
                 {it.nextDue != null ? ` · 下次 ${new Date(it.nextDue * 1000).toLocaleDateString()}` : ""}
               </Text>
               <Button variant="primary" size="md" onClick={() => void tick(it)}>🎯 打点</Button>
-            </div>
+            </Surface>
           ))}
         </div>
       )}
@@ -196,7 +196,7 @@ export function QuestionsOverlay({ onClose }: { onClose: () => void }) {
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
         {open.map((q) => (
-          <div key={q.id} style={{ border: "1px solid #e5e7eb", borderRadius: 8, padding: "6px 10px" }}>
+          <Surface key={q.id} level="none" radius="panel" style={{ padding: "6px 10px" }}>
             <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
               <span style={{ fontSize: 12.5, flex: 1 }}>❓ {q.text}</span>
               <Button variant="secondary" size="md" onClick={() => setAnswerFor(answerFor === q.id ? null : q.id)}>已答</Button>
@@ -208,7 +208,7 @@ export function QuestionsOverlay({ onClose }: { onClose: () => void }) {
                 <Button variant="primary" size="md" onClick={() => void answer(q)}>确认</Button>
               </div>
             )}
-          </div>
+          </Surface>
         ))}
         {open.length === 0 && answered.length === 0 && (
           <EmptyState title="暂无问题——" description="学习中的疑问随手记下，答沉淀后归档（可转复习卡出口规划中）" />