refactor(ui): migrate muted text in pages

T16-B 第 2 批：照 tmp/t16a/slice.md 清单迁移其余 components/** 与 pages/** 的弱化灰文本（含 NoteImage 的样式常量手工改）。

- color 一律走 Text 的 tone（本单元一律 ink-3，5.13:1；无一处 ink-4，理由见报告）

- A 类三元逐处判：ok / ink-2 / due / inherit 四类语义等价档才迁；品牌青·粉·靛蓝·三红支登记例外

- B1/B2 硬守卫冲突：NON_MIGRATED_14 的 7 文件 9 处**回退不迁**（既有断言不许打红）

- fontSize 在档值换 size={n}；越界值原样留行内（R2 交批 5/6）；文案逐字保留、零结构改动

Author: Aparencia

app/src/components/KnowledgeCanvasView.tsx

@@ -30,7 +30,7 @@ import { layoutCanvas } from "../utils/layoutCanvas";
 import CanvasNodeQuestion from "./CanvasNodeQuestion";
 import CanvasNodeConcept from "./CanvasNodeConcept";
 import CanvasNodeModel from "./CanvasNodeModel";
-import { StatusLine } from "../ui/primitives";
+import { StatusLine, Text } from "../ui/primitives";
 
 interface Props {
   systemId: number;
@@ -376,7 +376,7 @@ function CanvasFlow({
           ← 树视图
         </button>
         <span style={{ fontSize: 12, fontWeight: 600, color: "#374151" }}>🗺 知识画布</span>
-        <span style={{ fontSize: 11, color: "#9ca3af" }}>拖拽整理你的知识结构——位置只由你决定</span>
+        <Text tone="ink-3" style={{ fontSize: 11 }}>拖拽整理你的知识结构——位置只由你决定</Text>
       </div>
 
       <div style={{ flex: 1, minHeight: 0 }}>

app/src/components/KnowledgeConceptDialog.tsx

@@ -9,7 +9,7 @@
  * @ai-context: 不预填内容（预填＝假燃料）——所有输入从空字符串开始。
  */
 import { useState } from "react";
-import { Modal, StatusLine } from "../ui/primitives";
+import { Modal, StatusLine, Text } from "../ui/primitives";
 import { invoke } from "@tauri-apps/api/core";
 
 interface Props {
@@ -138,9 +138,9 @@ export default function KnowledgeConceptDialog({ systemId, onCreated, onClose }:
         style={textarea}
       />
 
-      <p style={{ fontSize: 11, color: "#9ca3af", margin: "10px 0 0" }}>
+      <Text as="p" tone="ink-3" style={{ fontSize: 11, margin: "10px 0 0" }}>
         新概念默认状态为「核心」，创建后可在右栏详情面板修改。
-      </p>
+      </Text>
 
       {error && (
         <div style={{ marginTop: 10 }}>

app/src/components/KnowledgeDecisionForm.tsx

@@ -13,7 +13,7 @@
  *              application 且 conceptId 提供时默认带上 conceptIds=[conceptId]（挂概念）。
  */
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Modal, StatusLine } from "../ui/primitives";
+import { Modal, StatusLine, Text } from "../ui/primitives";
 import { invoke } from "@tauri-apps/api/core";
 import type {
   KnowledgeConcept, KnowledgeDecision, KnowledgeModel, KnowledgeNode,
@@ -230,7 +230,7 @@ function Field({ label, testid, value, onChange, placeholder }: { label: string;
 
 /** 复选列表（引用多选：概念/节点/模型/笔记/闪卡/碎片） */
 function RefCheckboxList({ title, items, checked, onToggle, dataPrefix }: { title: string; items: { id: number; label: string }[]; checked: (id: number) => boolean; onToggle: (id: number) => void; dataPrefix: string }) {
-  if (items.length === 0) return <div style={{ fontSize: 11, color: "#9ca3af", marginTop: 2 }}>{title}：暂无</div>;
+  if (items.length === 0) return <Text as="div" tone="ink-3" style={{ fontSize: 11, marginTop: 2 }}>{title}：暂无</Text>;
   return (
     <div style={{ marginTop: 4 }}>
       <div style={{ fontSize: 11, color: "#6b7280", marginBottom: 2 }}>{title}</div>

app/src/components/KnowledgeDecisionLog.tsx

@@ -16,7 +16,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { confirm } from "@tauri-apps/plugin-dialog";
 import type { DecisionKind, KnowledgeDecision } from "../types/knowledge";
 import { countUsedRefs, parseUsedRefs } from "../types/knowledge";
-import { EmptyState, StatusLine } from "../ui/primitives";
+import { EmptyState, StatusLine, Text } from "../ui/primitives";
 
 interface Props {
   systemId: number;
@@ -96,7 +96,7 @@ export default function KnowledgeDecisionLog({ systemId, conceptId, onChanged }:
                 <span data-testid={`decision-kind-${d.id}`} style={{ fontSize: 12 } as const}>{d.kind === "decision" ? "🧭" : "🛠"}</span>
                 <div style={{ flex: 1, minWidth: 0 }}>
                   <div data-testid={`decision-content-${d.id}`} style={{ fontSize: 12, color: "#374151", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.content}</div>
-                  <div style={{ fontSize: 11, color: "#9ca3af" }}>{formatDecisionTime(d.decidedAt)} · {refCount} 个引用</div>
+                  <Text as="div" tone="ink-3" style={{ fontSize: 11 }}>{formatDecisionTime(d.decidedAt)} · {refCount} 个引用</Text>
                 </div>
                 <button data-testid={`decision-delete-${d.id}`} onClick={() => void remove(d.id)} title="删除记录" style={{ border: "none", background: "none", cursor: "pointer", fontSize: 13, color: "#9ca3af" }}>🗑</button>
               </div>

app/src/components/KnowledgeDetailPanel.tsx

@@ -22,7 +22,7 @@ import KnowledgeLinkSection from "./KnowledgeLinkSection";
 import DiscoverySuggestSection from "./DiscoverySuggestSection";
 import KnowledgeDecisionForm from "./KnowledgeDecisionForm";
 import KnowledgeDecisionLog from "./KnowledgeDecisionLog";
-import { StatusLine } from "../ui/primitives";
+import { StatusLine, Text } from "../ui/primitives";
 
 interface Props {
   /** 面板宽（v0.15 全站自适应——父层 useColumnLayout 驱动；缺省 320=历史值） */
@@ -163,9 +163,9 @@ export default function KnowledgeDetailPanel({ width = 320, system, nodes, conce
           </div>
         )}
         {!selection && (
-          <div style={{ fontSize: 12, color: "#9ca3af", textAlign: "center", paddingTop: 40 }}>
+          <Text as="div" size={5} tone="ink-3" style={{ textAlign: "center", paddingTop: 40 }}>
             从中间选择一个实体查看详情
-          </div>
+          </Text>
         )}
 
         {/* ── 节点：只读信息 + 引用 ── */}
@@ -175,9 +175,9 @@ export default function KnowledgeDetailPanel({ width = 320, system, nodes, conce
             <div style={{ fontSize: 14, fontWeight: 600, color: "#111827", marginBottom: 4 }}>{selectedNode.text}</div>
             <div style={{ display: "flex", gap: 6, marginBottom: 6 }}>
               <span style={{ fontSize: 11, padding: "1px 8px", borderRadius: 8, background: "#f9fafb", color: "#6b7280" }}>{nodeTypeLabel[selectedNode.type]}</span>
-              <span style={{ fontSize: 11, color: "#9ca3af", alignSelf: "center" }}>
+              <Text tone="ink-3" style={{ fontSize: 11, alignSelf: "center" }}>
                 父节点：{selectedNode.parentId != null ? (nodes.find((n) => n.id === selectedNode.parentId)?.text ?? "—") : "（根）"}
-              </span>
+              </Text>
             </div>
             <KnowledgeLinkSection systemId={system.id} entityType="node" entityId={selectedNode.id} links={links} nodes={nodes} concepts={concepts} models={models} onChanged={onChanged} />
           </div>

app/src/components/KnowledgeGraphView.tsx

@@ -29,7 +29,7 @@ import {
   type GraphSnapshot,
 } from "../utils/graphSnapshot";
 import { isColorId, onColorText, paletteHex, type ThemeMode } from "../utils/colorPalette";
-import { StatusLine } from "../ui/primitives";
+import { StatusLine, Text } from "../ui/primitives";
 
 /** 图谱节点 data（RF 节点 data 契约——跳转/着色所需全部字段）
  * 注意：type 而非 interface——RF v12 Node<T> 约束 Record<string, unknown>，
@@ -171,9 +171,9 @@ function GraphFlow({ onOpenNote, onOpenGroup, onOpenSystem, refreshToken }: Prop
           </button>
         ))}
         {snapshot && (
-          <span data-testid="graph-counts" style={{ fontSize: 11, color: "#9ca3af" }}>
+          <Text tone="ink-3" testId="graph-counts" style={{ fontSize: 11 }}>
             {snapshot.nodes.length} 节点 · {visibleCount} 边
-          </span>
+          </Text>
         )}
         <span style={{ fontSize: 10, color: "#d1d5db", marginLeft: "auto" }}>单击聚焦 · 双击跳转</span>
       </div>
@@ -194,13 +194,13 @@ function GraphFlow({ onOpenNote, onOpenGroup, onOpenSystem, refreshToken }: Prop
 
       {empty ? (
         /* 空态（spec §5：空图不阻塞其他功能；重试按钮） */
-        <div data-testid="graph-empty" style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10, color: "#9ca3af", fontSize: 13 }}>
+        <Text as="div" size={4} tone="ink-3" testId="graph-empty" style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10 }}>
           <div style={{ fontSize: 36 }}>🕸</div>
           <p>图谱还是空的——挂接笔记/概念后这里会出现关系。</p>
           <button data-testid="graph-retry" onClick={() => void load()} style={{ fontSize: 12, cursor: "pointer", padding: "4px 12px", borderRadius: 4, border: "1px solid #d1d5db", background: "#fff" }}>
             刷新
           </button>
-        </div>
+        </Text>
       ) : (
         <div style={{ flex: 1, minHeight: 0 }}>
           <ReactFlow

app/src/components/KnowledgeModelDialog.tsx

@@ -8,7 +8,7 @@
  * @ai-context: 不预填内容（预填＝假燃料）——所有输入从空字符串开始。
  */
 import { useState } from "react";
-import { isImeComposing, Modal, StatusLine } from "../ui/primitives";
+import { isImeComposing, Modal, StatusLine, Text } from "../ui/primitives";
 import { invoke } from "@tauri-apps/api/core";
 
 interface Props {
@@ -136,9 +136,9 @@ export default function KnowledgeModelDialog({ systemId, onCreated, onClose }: P
           style={textarea}
         />
 
-        <p style={{ fontSize: 11, color: "#9ca3af", margin: "10px 0 0" }}>
+        <Text as="p" tone="ink-3" style={{ fontSize: 11, margin: "10px 0 0" }}>
           新模型默认状态为「active」，创建后可在右栏详情面板修改。
-        </p>
+        </Text>
 
         {error && (
           <div style={{ marginTop: 10 }}>

app/src/components/KnowledgeSystemWizard.tsx

@@ -18,7 +18,7 @@
  *              底栏「取消」仍直连 `onClose`（原行为：取消不确认）。
  */
 import { useMemo, useState } from "react";
-import { Modal, StatusLine } from "../ui/primitives";
+import { Modal, StatusLine, Text } from "../ui/primitives";
 import { invoke } from "@tauri-apps/api/core";
 import { confirm } from "@tauri-apps/plugin-dialog";
 import type { KnowledgeSystem, KnowledgeNodeType } from "../types/knowledge";
@@ -226,7 +226,7 @@ export default function KnowledgeSystemWizard({ onClose, onCreated }: Props) {
 
         {step === 2 && (
           <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-            <div style={{ fontSize: 11, color: "#9ca3af", marginBottom: 4 }}>每个入口一行；可全部跳过（空行自动忽略）。</div>
+            <Text as="div" tone="ink-3" style={{ fontSize: 11, marginBottom: 4 }}>每个入口一行；可全部跳过（空行自动忽略）。</Text>
             {domainEntries.map((val, i) => (
               <input
                 key={i}

app/src/components/KnowledgeTreeView.tsx

@@ -15,7 +15,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { confirm } from "@tauri-apps/plugin-dialog";
 import type { KnowledgeNode, KnowledgeLink, KnowledgeNodeType } from "../types/knowledge";
 import { nodeTypeColor, nodeTypeLabel } from "../types/knowledge";
-import { Button, StatusLine } from "../ui/primitives";
+import { Button, StatusLine, Text } from "../ui/primitives";
 
 interface Props {
   systemId: number;
@@ -179,7 +179,7 @@ export default function KnowledgeTreeView({ systemId, nodes, links, selectedNode
             <span style={{ flex: 1, fontSize: 13, color: "#374151", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{n.text}</span>
           )}
           {count > 0 && (
-            <span data-testid={`node-ref-${n.id}`} style={{ fontSize: 11, color: "#9ca3af", whiteSpace: "nowrap" }}>{count} 引用</span>
+            <Text tone="ink-3" testId={`node-ref-${n.id}`} style={{ fontSize: 11, whiteSpace: "nowrap" }}>{count} 引用</Text>
           )}
           {!isEditing && (
             <span onClick={(e) => e.stopPropagation()} style={{ display: "inline-flex", gap: 2 }}>
@@ -240,9 +240,9 @@ export default function KnowledgeTreeView({ systemId, nodes, links, selectedNode
       <div style={{ padding: "24px 20px", textAlign: "center" }}>
         <div style={{ fontSize: 26, marginBottom: 8 }}>🌱</div>
         <div style={{ fontSize: 14, fontWeight: 600, color: "#374151", marginBottom: 6 }}>从子问题开始</div>
-        <p style={{ fontSize: 12, color: "#9ca3af", lineHeight: 1.7, margin: "0 auto 12px", maxWidth: 300 }}>
+        <Text as="p" size={5} tone="ink-3" style={{ lineHeight: 1.7, margin: "0 auto 12px", maxWidth: 300 }}>
           把卡住你的大问题拆成一个个能动手的子问题，每拆一层，就把它从"一团乱麻"变成"一条路径"。
-        </p>
+        </Text>
         <button data-testid="tree-add-root" onClick={() => startAdd(null)} style={{ fontSize: 13, cursor: "pointer", padding: "6px 14px", borderRadius: 6, border: "1px solid #0f766e", background: "#f0fdfa", color: "#0f766e" }}>
           ＋ 添加根问题
         </button>
@@ -276,9 +276,9 @@ export default function KnowledgeTreeView({ systemId, nodes, links, selectedNode
         {nodes.length === 0 && addDraft?.parentId === null && (
           <div style={{ padding: "16px 8px 8px", textAlign: "center" }}>
             <div style={{ fontSize: 20, marginBottom: 6 }}>🌱</div>
-            <p style={{ fontSize: 12, color: "#9ca3af", lineHeight: 1.6, margin: "0 0 10px" }}>
+            <Text as="p" size={5} tone="ink-3" style={{ lineHeight: 1.6, margin: "0 0 10px" }}>
               写下第一个根问题，让它成为问题树的起点。
-            </p>
+            </Text>
           </div>
         )}
 

app/src/components/LearningLibraryEngineSection.tsx

@@ -16,6 +16,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import type { EmbeddingStatusView } from "../types/kb";
+import { Text } from "../ui/primitives";
 
 export default function LearningLibraryEngineSection() {
   const [emb, setEmb] = useState<EmbeddingStatusView | null>(null);
@@ -82,9 +83,9 @@ export default function LearningLibraryEngineSection() {
             ✓ 就绪（dim={emb.dim}）
           </span>
         ) : (
-          <span data-testid="kb-emb-noop" style={{ color: "#9ca3af" }} title={emb?.modelDir ?? "模型目录未探测"}>
+          <Text tone="ink-3" testId="kb-emb-noop" title={emb?.modelDir ?? "模型目录未探测"}>
             ○ {emb?.detail ?? "状态读取中…"}
-          </span>
+          </Text>
         )}
         <span style={{ flex: 1 }} />
         <button