refactor(ui): migrate bare z-index to tier scale

Author: Aparencia

app/src/components/AiConversationDock.tsx

@@ -15,6 +15,7 @@
  *              （挂载不拉，首次 open 才装载）＋静态数据 10s 时效。
  */
 import { useCallback, useEffect, useRef, useState } from "react";
+import { zIndex } from "../ui/zIndex";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import type { AiTaskRecord, AiTaskState, AiTurn, ChatMessage, ChatSession } from "../types";
@@ -239,7 +240,7 @@ export default function AiConversationDock({
     <div
       data-testid="ai-dock"
       style={{
-        position: "fixed", top: "var(--ed-nav-h)", right: 0, bottom: 0, width: PANEL_W, zIndex: 900,
+        position: "fixed", top: "var(--ed-nav-h)", right: 0, bottom: 0, width: PANEL_W, zIndex: zIndex("panel"),
         background: "#fff", borderLeft: "1px solid #e5e7eb", boxShadow: "-8px 0 24px rgba(0,0,0,0.08)",
         display: open ? "flex" : "none", flexDirection: "column", overflow: "hidden",
         fontSize: 12.5, color: "#1f2937",

app/src/components/BoxSelectOverlay.tsx

@@ -7,6 +7,7 @@
  *              无图屏不进入（调用方禁用按钮）。
  */
 import { useRef, useState } from "react";
+import { zIndex } from "../ui/zIndex";
 import { invoke } from "@tauri-apps/api/core";
 
 interface Props {
@@ -153,7 +154,7 @@ export default function BoxSelectOverlay({ src, sessionId, firstSeenMs, onDone,
         position: "absolute",
         inset: 0,
         cursor: "crosshair",
-        zIndex: 10,
+        zIndex: zIndex("raised"),
         border: "2px dashed #0d9488",
         background: "rgba(13,148,136,0.06)",
       }}
@@ -179,7 +180,7 @@ export default function BoxSelectOverlay({ src, sessionId, firstSeenMs, onDone,
             position: "absolute",
             inset: 0,
             background: "rgba(255,255,255,0.96)",
-            zIndex: 20,
+            zIndex: zIndex("raised"),
             display: "flex",
             flexDirection: "column",
             alignItems: "center",

app/src/components/BrowserChrome.tsx

@@ -14,6 +14,7 @@
  *              （不弹错；Ctrl+C/V 主路径不受影响）。
  */
 import { useEffect, useRef, useState } from "react";
+import { zIndex } from "../ui/zIndex";
 
 interface MenuState {
   x: number;
@@ -137,7 +138,7 @@ export default function BrowserChrome() {
         position: "fixed",
         left: px,
         top: py,
-        zIndex: 1000,
+        zIndex: zIndex("popover"),
         minWidth: 128,
         background: "#fff",
         border: "1px solid #e5e7eb",

app/src/components/ChatSaveNoteDialog.tsx

@@ -8,6 +8,7 @@
  *              （onOpenNote 已由 ChatPage 透传）+ 关闭；失败红字不关窗（改后再试）。
  */
 import { useState } from "react";
+import { zIndex } from "../ui/zIndex";
 import { invoke } from "@tauri-apps/api/core";
 import type { Note, NoteGroup } from "../types";
 
@@ -66,12 +67,12 @@ export default function ChatSaveNoteDialog({ initialTitle, content, groups, onOp
       <div
         onClick={onClose}
         data-testid="chat-note-backdrop"
-        style={{ position: "fixed", inset: 0, zIndex: 50, background: "rgba(0,0,0,0.18)" }}
+        style={{ position: "fixed", inset: 0, zIndex: zIndex("modal"), background: "rgba(0,0,0,0.18)" }}
       />
       <div
         data-testid="chat-note-dialog"
         style={{
-          position: "fixed", zIndex: 51, top: "50%", left: "50%",
+          position: "fixed", zIndex: zIndex("modal"), top: "50%", left: "50%",
           transform: "translate(-50%, -50%)",
           width: 380, background: "#fff", borderRadius: 10,
           border: "1px solid #e5e7eb", boxShadow: "0 12px 32px rgba(0,0,0,0.18)",

app/src/components/GoalPlanApprovalDialog.tsx

@@ -8,6 +8,7 @@
  *              清理登记（丢弃项）诚实展示，绝不静默。
  */
 import { useMemo, useState } from "react";
+import { zIndex } from "../ui/zIndex";
 import type { GoalPlanView } from "../types/goals";
 
 interface Props {
@@ -75,7 +76,7 @@ export default function GoalPlanApprovalDialog({ view, onConfirm, onClose, onUse
   };
 
   return (
-    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.35)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 60 }}>
+    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.35)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: zIndex("modal") }}>
       <div data-testid="plan-approval" style={{ width: 560, maxHeight: "86vh", overflow: "auto", background: "#fff", borderRadius: 10, padding: 18, boxSizing: "border-box" }}>
         <div style={{ display: "flex", alignItems: "center", marginBottom: 6 }}>
           <span style={{ fontWeight: 700, fontSize: 15 }}>✨ AI 规划建议（草案——确认后落库）</span>

app/src/components/GraduateDialog.tsx

@@ -7,6 +7,7 @@
  * @ai-context: 未达标时按钮不可达（GoalDetail 禁用）；本对话框只管确认流。
  */
 import { useCallback, useEffect, useState } from "react";
+import { zIndex } from "../ui/zIndex";
 import { invoke } from "@tauri-apps/api/core";
 import type { GraduationReport, GoalDetailView, GoalProgressView } from "../types/goals";
 
@@ -53,7 +54,7 @@ export default function GraduateDialog({ goalId, onClose, onGraduated }: Props)
 
   const p = progress?.progress;
   return (
-    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.35)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 60 }}>
+    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.35)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: zIndex("modal") }}>
       <div data-testid="graduate-dialog" style={{ width: 520, maxHeight: "86vh", overflow: "auto", background: "#fff", borderRadius: 10, padding: 18, boxSizing: "border-box" }}>
         <div style={{ display: "flex", alignItems: "center", marginBottom: 8 }}>
           <span style={{ fontWeight: 700, fontSize: 15 }}>🎓 毕业仪式</span>

app/src/components/GroupCreateDialog.tsx

@@ -12,6 +12,7 @@
  *              （弹窗随即关闭，内部 setStatus 一帧即卸载——死代码）。
  */
 import { useEffect, useState } from "react";
+import { zIndex } from "../ui/zIndex";
 import { invoke } from "@tauri-apps/api/core";
 import { DOMAIN_OPTIONS } from "../utils/domainOptions";
 import NoteColorPicker from "./NoteColorPicker";
@@ -79,7 +80,7 @@ export default function GroupCreateDialog({ onClose, onCreated }: Props) {
 
   return (
     <div
-      style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)", zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center" }}
+      style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)", zIndex: zIndex("modal"), display: "flex", alignItems: "center", justifyContent: "center" }}
       onClick={onClose}
     >
       <div

app/src/components/GroupDeleteConfirm.tsx

@@ -8,6 +8,7 @@
  *              （数据不可恢复后果透明可见）。
  */
 import { useCallback, useEffect, useState } from "react";
+import { zIndex } from "../ui/zIndex";
 import { invoke } from "@tauri-apps/api/core";
 import type { NoteGroup } from "../types";
 
@@ -79,7 +80,7 @@ export default function GroupDeleteConfirm({ group, onClose, onDeleted }: Props)
   return (
     <div
       data-testid="group-delete-confirm-backdrop"
-      style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)", zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center" }}
+      style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)", zIndex: zIndex("modal"), display: "flex", alignItems: "center", justifyContent: "center" }}
       onClick={onClose}
     >
       <div

app/src/components/GroupRowContextMenu.tsx

@@ -12,6 +12,7 @@
  *              与笔记置顶语义一致；边界/置顶可用性由父层按分区可见序计算。
  */
 import { useEffect } from "react";
+import { zIndex } from "../ui/zIndex";
 
 interface Props {
   /** 组名（菜单头） */
@@ -75,7 +76,7 @@ export default function GroupRowContextMenu({
       <div
         onClick={onClose}
         onContextMenu={(e) => { e.preventDefault(); onClose(); }}
-        style={{ position: "fixed", inset: 0, zIndex: 60, background: "transparent" }}
+        style={{ position: "fixed", inset: 0, zIndex: zIndex("popover"), background: "transparent" }}
       />
       <div
         role="menu"
@@ -87,7 +88,7 @@ export default function GroupRowContextMenu({
           position: "fixed",
           left: px,
           top: py,
-          zIndex: 61,
+          zIndex: zIndex("popover"),
           width: 216,
           background: "#fff",
           border: "1px solid #e5e7eb",

app/src/components/GroupSidebarRow.tsx

@@ -9,6 +9,7 @@
  *              所有事件 stopPropagation（不与行点击过滤/色点/ⓘ/拖拽冲突）。
  */
 import { useMemo, useState } from "react";
+import { zIndex } from "../ui/zIndex";
 import type { NoteGroup } from "../types";
 import type { KnowledgeSystem } from "../types/knowledge";
 import { parseRouteReason, routeLineState } from "../utils/routeReason";
@@ -171,7 +172,7 @@ export default function GroupSidebarRow({
       {colorPickerOpen && (
         <div
           data-testid={`group-color-picker-${group.id}`}
-          style={{ position: "absolute", top: "100%", left: 8, zIndex: 20, background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, boxShadow: "0 4px 12px rgba(0,0,0,0.12)" }}
+          style={{ position: "absolute", top: "100%", left: 8, zIndex: zIndex("popover"), background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 8, boxShadow: "0 4px 12px rgba(0,0,0,0.12)" }}
         >
           <NoteColorPicker
             value={group.color ?? null}