Skip to content

Commit 69489f9

Browse files
AparenciaAparencia
committed
refactor(ui): migrate card borders to surface
1 parent 1ac129a commit 69489f9

9 files changed

Lines changed: 37 additions & 37 deletions

‎app/src/components/ChatMessageList.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type { ChatMessage, KbHit } from "../types";
1414
import ChatMessageMarkdown from "./ChatMessageMarkdown";
1515
import CitationChips from "./CitationChips";
1616
import { parseKbMeta } from "../utils/kbHits";
17-
import { Text } from "../ui/primitives";
17+
import { Surface, Text } from "../ui/primitives";
1818

1919
export interface StreamingState {
2020
/** 流式累积文本（非 null = 流式生成中） */
@@ -113,13 +113,13 @@ export default function ChatMessageList({ messages, streaming, onRegenerate, onE
113113
<span>{parseUsage(m.usageJson).tokens} tokens</span>
114114
)}
115115
</Text>
116-
<div style={{ background: "#f8fafc", border: "1px solid #e5e7eb", borderRadius: 8, padding: "8px 12px" }}>
116+
<Surface level="canvas" style={{ padding: "8px 12px" }}>
117117
<ChatMessageMarkdown content={m.content} />
118118
{/* v0.19.1：引用 chips（answer 与 hits-only 引导同款展示） */}
119119
{meta && meta.hits.length > 0 && (
120120
<CitationChips hits={meta.hits} onOpenNote={onOpenCitedNote} />
121121
)}
122-
</div>
122+
</Surface>
123123
{/* v0.16.1：AI 回答整段存为笔记（至该条的完整对话上下文） */}
124124
{onSaveMessage && (m.status === "done" || m.status === "aborted") && (
125125
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: 2 }}>
@@ -142,11 +142,11 @@ export default function ChatMessageList({ messages, streaming, onRegenerate, onE
142142
{/* 流式占位（进行中回答）——命中引用随 kb_hits 事件先达 */}
143143
{streaming?.text !== null && streaming?.text !== undefined && (
144144
<div style={{ display: "flex", justifyContent: "flex-start", marginBottom: 12 }}>
145-
<div style={{ background: "#f8fafc", border: "1px solid #e5e7eb", borderRadius: 8, padding: "8px 12px", maxWidth: "86%" }}>
145+
<Surface level="canvas" style={{ padding: "8px 12px", maxWidth: "86%" }}>
146146
<ChatMessageMarkdown content={streaming.text} />
147147
{(streaming.hits?.length ?? 0) > 0 && <CitationChips hits={streaming.hits ?? []} onOpenNote={onOpenCitedNote} />}
148148
<span style={{ display: "inline-block", width: 6, height: 14, background: "#0d9488", verticalAlign: "text-bottom", marginLeft: 2 }} />
149-
</div>
149+
</Surface>
150150
</div>
151151
)}
152152
<div ref={endRef} />

‎app/src/components/EnrichPanel.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { invoke } from "@tauri-apps/api/core";
1313
// M8：轮询/事件双通道/卡住检测抽入共用 hook（与 AiRefineCard 同源）
1414
import { useAiTaskPolling } from "../hooks/useAiTaskPolling";
1515
import { failureGuide } from "./aiTaskFailure";
16-
import { Button, StatusLine, Text } from "../ui/primitives";
16+
import { Button, StatusLine, Surface, Text } from "../ui/primitives";
1717
import type {
1818
AiEnrichResult,
1919
AiSettingsView,
@@ -252,7 +252,7 @@ export default function EnrichPanel({ noteId, onUpdated }: { noteId: number; onU
252252

253253
{/* 成本确认 */}
254254
{phase === "confirm" && est && (
255-
<div style={{ border: "1px solid #e5e7eb", background: "#fff", borderRadius: 6, padding: 8, marginBottom: 6, fontSize: 12 }}>
255+
<Surface style={{ padding: 8, marginBottom: 6, fontSize: 12 }}>
256256
<div style={{ fontWeight: 600, marginBottom: 4 }}>成本确认</div>
257257
<div>
258258
预估 token：<strong>{est.estTokens}</strong> · 预估费用：<strong>¥{est.estCostYuan.toFixed(4)}</strong>
@@ -277,7 +277,7 @@ export default function EnrichPanel({ noteId, onUpdated }: { noteId: number; onU
277277
</button>
278278
<Button variant="secondary" size="md" onClick={reset}>取消</Button>
279279
</div>
280-
</div>
280+
</Surface>
281281
)}
282282

283283
{/* 任务进度 */}
@@ -308,9 +308,9 @@ export default function EnrichPanel({ noteId, onUpdated }: { noteId: number; onU
308308
{(result.droppedReasons ?? []).length > 3 ? "…" : ""}（其余合规块照常展示）
309309
</div>
310310
)}
311-
<div style={{ maxHeight: 200, overflowY: "auto", border: "1px solid #e5e7eb", borderRadius: 6, background: "#fff", padding: 8, fontSize: 11, fontFamily: "monospace", marginBottom: 6, whiteSpace: "pre-wrap" }}>
311+
<Surface style={{ maxHeight: 200, overflowY: "auto", padding: 8, fontSize: 11, fontFamily: "monospace", marginBottom: 6, whiteSpace: "pre-wrap" }}>
312312
{result.enrichedMarkdown.slice(-800)}
313-
</div>
313+
</Surface>
314314
<div style={{ display: "flex", gap: 6 }}>
315315
<button style={{ ...btn, background: "#7c3aed", color: "#fff", border: "none" }} onClick={() => void apply()}>
316316
✅ 采纳（应用补充）

‎app/src/components/FeedFragmentList.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import type { Fragment, Note, NoteGroup } from "../types";
1616
// REQ-316（批 7）：碎片删除/升笔记返回契约（源空组清理留痕数据源）
1717
import type { DeleteFragmentResult, PromoteNoteResult } from "../types/notes";
1818
import { fragmentPreview, promoteTitleFor } from "../utils/inbox";
19-
import { ConfirmDialog, StatusLine, Text } from "../ui/primitives";
19+
import { ConfirmDialog, StatusLine, Surface, Text } from "../ui/primitives";
2020

2121
interface Props {
2222
/** 列宽（v0.15 全站自适应——父层 useColumnLayout 驱动；缺省 320=历史值） */
@@ -239,7 +239,7 @@ export default function FeedFragmentList({ width = 320, onChanged, onPromoted, o
239239

240240
{/* 升笔记轻确认：内联展开（标题预填首句可改 + 归组下拉默认未归组） */}
241241
{promote?.fragmentId === f.id && (
242-
<div data-testid={`promote-form-${f.id}`} style={{ marginTop: 6, padding: 8, background: "#f9fafb", borderRadius: 6, border: "1px solid #e5e7eb" }}>
242+
<Surface level="canvas" testId={`promote-form-${f.id}`} style={{ marginTop: 6, padding: 8 }}>
243243
<input
244244
data-testid="promote-title"
245245
value={promote.title}
@@ -273,7 +273,7 @@ export default function FeedFragmentList({ width = 320, onChanged, onPromoted, o
273273
取消
274274
</button>
275275
</div>
276-
</div>
276+
</Surface>
277277
)}
278278
</div>
279279
))}

‎app/src/components/GoalAiSection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import { useEffect, useState } from "react";
1010
import { invoke } from "@tauri-apps/api/core";
1111
import type { AiSettingsView } from "../types/ai";
12-
import { Text } from "../ui/primitives";
12+
import { Surface, Text } from "../ui/primitives";
1313

1414
const TIERS = [
1515
{ id: "light", label: "轻量（~4K，快而省）" },
@@ -45,7 +45,7 @@ export default function GoalAiSection() {
4545
};
4646

4747
return (
48-
<div style={{ marginTop: 8, padding: 8, background: "#fff", borderRadius: 6, border: "1px solid #e5e7eb" }}>
48+
<Surface style={{ marginTop: 8, padding: 8 }}>
4949
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
5050
<span style={{ fontWeight: 600, fontSize: 12, color: "#374151" }}>🎯 目标 AI（规划师）</span>
5151
<label style={{ fontSize: 12, display: "flex", alignItems: "center", gap: 4, cursor: "pointer" }}>
@@ -75,6 +75,6 @@ export default function GoalAiSection() {
7575
<Text tone="ink-3" style={{ fontSize: 11 }}>预算硬顶·成本/轨迹可查·失败自动回退规则草案</Text>
7676
</div>
7777
{msg && <p style={{ fontSize: 11, color: "#6b7280", margin: "4px 0 0" }}>{msg}</p>}
78-
</div>
78+
</Surface>
7979
);
8080
}

‎app/src/components/KnowledgeSampleView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import type { ReactNode } from "react";
1313
import { invoke } from "@tauri-apps/api/core";
1414
import { SAMPLE_SYSTEM } from "../utils/knowledgeSample";
1515
import type { KnowledgeSystem } from "../types/knowledge";
16-
import { StatusLine } from "../ui/primitives";
16+
import { StatusLine, Surface } from "../ui/primitives";
1717

1818
interface Props {
1919
/** 复制完成回调（父级刷新体系列表并选中新体系） */
@@ -102,7 +102,7 @@ export default function KnowledgeSampleView({ onCopied, onNeedGlobal, refreshGlo
102102
};
103103

104104
return (
105-
<div data-testid="sample-view" style={{ width: "100%", maxWidth: 560, textAlign: "left", background: "#fff", border: "1px solid #e5e7eb", borderRadius: 10, padding: 16 }}>
105+
<Surface radius="overlay" testId="sample-view" style={{ width: "100%", maxWidth: 560, textAlign: "left", padding: 16 }}>
106106
<div style={{ fontWeight: 700, fontSize: 14, color: "#0f766e", marginBottom: 4 }}>📷 示例：领域体系「{SAMPLE_SYSTEM.name}」</div>
107107
<div style={{ fontSize: 12, color: "#6b7280", marginBottom: 10 }}>核心问题：{SAMPLE_SYSTEM.coreQuestion}</div>
108108
<div style={{ fontSize: 12, fontWeight: 600, marginBottom: 4 }}>🌳 问题树</div>
@@ -133,6 +133,6 @@ export default function KnowledgeSampleView({ onCopied, onNeedGlobal, refreshGlo
133133
{busy ? "复制中…" : "📋 复制为我的体系"}
134134
</button>
135135
{err && <div style={{ marginTop: 6 }}><StatusLine kind="error">{err}</StatusLine></div>}
136-
</div>
136+
</Surface>
137137
);
138138
}

‎app/src/components/LiveImageStrip.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
1313
import { invoke } from "@tauri-apps/api/core";
1414
import { convertFileSrc } from "@tauri-apps/api/core";
1515
import { listen } from "@tauri-apps/api/event";
16-
import { Text } from "../ui/primitives";
16+
import { Surface, Text } from "../ui/primitives";
1717

1818
/** 横条最多展示张数（最新 N 张，旧的到「会话」页图集查看） */
1919
const MAX_SHOWN = 12;
@@ -93,7 +93,7 @@ export default function LiveImageStrip({ sessionId }: { sessionId: number | null
9393
const shown = images.slice(-MAX_SHOWN);
9494

9595
return (
96-
<div style={{ border: "1px solid #e5e7eb", borderRadius: 8, padding: 8, marginBottom: 8, background: "#fff" }}>
96+
<Surface style={{ padding: 8, marginBottom: 8 }}>
9797
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
9898
<span style={{ fontSize: 11, color: "#6b7280" }}>🖼 最近画面（{images.length} 张，实时归档）</span>
9999
<button
@@ -157,6 +157,6 @@ export default function LiveImageStrip({ sessionId }: { sessionId: number | null
157157
</div>
158158
)}
159159
{error && <div style={{ fontSize: 10, color: "#dc2626", marginTop: 4 }}>{error}</div>}
160-
</div>
160+
</Surface>
161161
);
162162
}

‎app/src/components/TaskConversationView.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { useState } from "react";
1212
import { invoke } from "@tauri-apps/api/core";
1313
import type { AiEnrichResult, AiTaskRecord, AiTurn } from "../types";
1414
import ChatMessageMarkdown, { truncatePreview } from "./ChatMessageMarkdown";
15-
import { Text } from "../ui/primitives";
15+
import { Surface, Text } from "../ui/primitives";
1616

1717
interface Props {
1818
task: AiTaskRecord;
@@ -75,7 +75,7 @@ export default function TaskConversationView({ task, turns, refTitle, onOpenSess
7575
return (
7676
<div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: "16px 20px" }}>
7777
{/* 任务卡 */}
78-
<div style={{ border: "1px solid #e5e7eb", borderRadius: 10, padding: "10px 14px", marginBottom: 14, background: "#fafafa" }}>
78+
<Surface level="canvas" radius="overlay" style={{ padding: "10px 14px", marginBottom: 14 }}>
7979
<div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
8080
<span style={{ fontWeight: 700, fontSize: 14, color: "#111827" }}>
8181
{isRefine ? "✨ AI 精修" : "📚 AI 知识补充"} · {refTitle}
@@ -173,7 +173,7 @@ export default function TaskConversationView({ task, turns, refTitle, onOpenSess
173173
background: adoptMsg.startsWith("✅") ? "#ecfdf5" : "#fef2f2",
174174
}}>{adoptMsg}</div>
175175
)}
176-
</div>
176+
</Surface>
177177

178178
{/* 成功结果预览（result_json → refinedMarkdown） */}
179179
{task.state === "succeeded" && task.resultJson && (
@@ -185,9 +185,9 @@ export default function TaskConversationView({ task, turns, refTitle, onOpenSess
185185
{openResult ? "▾" : "▸"} 展开精修/补充结果
186186
</button>
187187
{openResult && (
188-
<div style={{ border: "1px solid #e5e7eb", borderRadius: 8, padding: "10px 14px", marginTop: 6, background: "#fcfcfd", maxHeight: 420, overflowY: "auto" }}>
188+
<Surface level="canvas" style={{ padding: "10px 14px", marginTop: 6, maxHeight: 420, overflowY: "auto" }}>
189189
<ChatMessageMarkdown content={truncatePreview(extractResultMarkdown(task.resultJson))} />
190-
</div>
190+
</Surface>
191191
)}
192192
</div>
193193
)}
@@ -207,11 +207,11 @@ export default function TaskConversationView({ task, turns, refTitle, onOpenSess
207207
{openTurns[t.turn] ? "▾" : "▸"} 第 {t.turn} 片对话（提示词 + 回答全文）
208208
</button>
209209
{openTurns[t.turn] && (
210-
<div style={{ border: "1px solid #e5e7eb", borderRadius: 8, marginTop: 6, background: "#fcfcfd" }}>
210+
<Surface level="canvas" style={{ marginTop: 6 }}>
211211
<TrajectoryBlock label="🤖 提示词（system）" text={t.system} mono />
212212
<TrajectoryBlock label="📄 请求（user）" text={t.user} mono />
213213
<TrajectoryBlock label="✍️ 回答（assistant）" text={truncatePreview(t.response)} mono />
214-
</div>
214+
</Surface>
215215
)}
216216
</div>
217217
))}

‎app/src/components/VersionPanel.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { useCallback, useEffect, useState } from "react";
1212
import { invoke } from "@tauri-apps/api/core";
1313
import type { AiUsageRecord, DiffOp, NoteVersion, NoteVersionSource } from "../types";
1414
import RefineWorkbench from "./RefineWorkbench";
15-
import { ConfirmDialog, StatusLine, Text } from "../ui/primitives";
15+
import { ConfirmDialog, StatusLine, Surface, Text } from "../ui/primitives";
1616

1717
const btn: React.CSSProperties = { padding: "4px 8px", cursor: "pointer", fontSize: 11, borderRadius: 6, border: "1px solid #d1d5db", background: "#fff" };
1818

@@ -111,7 +111,7 @@ export default function VersionPanel({ noteId, onChanged }: { noteId: number; on
111111
const totalCost = usage.reduce((s, u) => s + u.costYuan, 0);
112112

113113
return (
114-
<div style={{ border: "1px solid #e5e7eb", borderRadius: 8, padding: 10, marginBottom: 10, background: "#fcfcfd" }}>
114+
<Surface level="canvas" style={{ padding: 10, marginBottom: 10 }}>
115115
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
116116
<button style={{ ...btn, fontWeight: 600 }} onClick={() => setOpen((o) => !o)}>
117117
{open ? "▾" : "▸"} 🕘 版本时间线（{versions.length || "…"}）
@@ -174,9 +174,9 @@ export default function VersionPanel({ noteId, onChanged }: { noteId: number; on
174174
</select>
175175
</div>
176176
{diff && (
177-
<div style={{ maxHeight: 200, overflowY: "auto", border: "1px solid #e5e7eb", borderRadius: 6, background: "#fff", padding: 6, fontSize: 11, fontFamily: "monospace" }}>
177+
<Surface style={{ maxHeight: 200, overflowY: "auto", padding: 6, fontSize: 11, fontFamily: "monospace" }}>
178178
{diff.length === 0 ? <div style={{ color: "#6b7280" }}>两版内容一致</div> : diff.map((op, i) => <DiffLine key={i} op={op} />)}
179-
</div>
179+
</Surface>
180180
)}
181181

182182
{/* AI 成本记录（REQ-143 完整：token/费用/模型/切片） */}
@@ -220,6 +220,6 @@ export default function VersionPanel({ noteId, onChanged }: { noteId: number; on
220220
onCancel={() => setPendingRollback(null)}
221221
testId="version-rollback-confirm"
222222
/>
223-
</div>
223+
</Surface>
224224
);
225225
}

‎app/src/components/WeekContractCard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
import { useCallback, useEffect, useState } from "react";
1212
import { invoke } from "@tauri-apps/api/core";
1313
import type { WeekContractStatus } from "../types";
14-
import { Text } from "../ui/primitives";
14+
import { Surface, Text } from "../ui/primitives";
1515

1616
interface Props {
1717
groupId: number;
@@ -81,7 +81,7 @@ export default function WeekContractCard({ groupId }: Props) {
8181
const cardRatio = status && c ? status.actualCards / c.targetCards : 0;
8282

8383
return (
84-
<div style={{ marginTop: 8, padding: 8, background: "#fff", borderRadius: 6, border: "1px solid #e5e7eb" }}>
84+
<Surface style={{ marginTop: 8, padding: 8 }}>
8585
<div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
8686
<span style={{ fontWeight: 600, color: "#374151", fontSize: 12 }}>📅 周契约</span>
8787
{status?.minimalDayMet && (
@@ -178,6 +178,6 @@ export default function WeekContractCard({ groupId }: Props) {
178178
)}
179179

180180
{err && <p style={{ fontSize: 11, color: "#dc2626", marginTop: 4 }}>{err}</p>}
181-
</div>
181+
</Surface>
182182
);
183183
}

0 commit comments

Comments
 (0)