|
| 1 | +/** |
| 2 | + * NoteListToolbar — 笔记列表顶栏（标题栏 + 搜索/排序/标签区；批 0-C2·Task 2 自 NoteListView 抽出）。 |
| 3 | + * |
| 4 | + * @ai-context: 展示适配器——只做「透传 + 一层组合」，**不含业务逻辑**（选择模式态在 |
| 5 | + * hooks/useNoteListSelection，过滤/排序态在父层 pages/NotesPage）。 |
| 6 | + * 返回 **fragment**：两个区块仍是列表外壳（width/borderRight/flex 列）的 |
| 7 | + * 直接子元素，不新增包裹层（包裹层会改变 flex 布局）。 |
| 8 | + * @ai-context: 文案与 data-testid 是测试契约（`batch-mode-toggle`、 |
| 9 | + * 「选择模式（N）」「选择」「+ 新建」…测试用 getByText 精确匹配）， |
| 10 | + * **逐字保留**（含全角括号与省略号）。样式全内联，**不换 className**。 |
| 11 | + * @ai-context: `ghostBtn` 由本文件导出并被 NoteListBatchMenu 复用——同一份按钮基底， |
| 12 | + * 避免两处样式漂移；`btn` 仅作为其基底，保持模块私有。 |
| 13 | + * @ai-context: 边界——`SortMode` 以 **type-only import** 自 NoteListView 取（编译期 |
| 14 | + * 擦除，无运行时循环依赖）；公共 API（`export type SortMode`）仍归主文件。 |
| 15 | + */ |
| 16 | +import type { SortMode } from "./NoteListView"; |
| 17 | + |
| 18 | +const btn: React.CSSProperties = { padding: "5px 10px", cursor: "pointer", fontSize: 12 }; |
| 19 | +/** 幽灵按钮基底（顶栏「选择」+ 批量栏/选集菜单 6 处共用） */ |
| 20 | +export const ghostBtn: React.CSSProperties = { ...btn, fontSize: 11, borderRadius: 6, border: "1px solid #d1d5db", background: "#fff" }; |
| 21 | + |
| 22 | +interface Props { |
| 23 | + /** 批量选择模式（单击行=勾选） */ |
| 24 | + selectionMode: boolean; |
| 25 | + /** 选集大小（模式徽标「选择模式（N）」） */ |
| 26 | + selectionCount: number; |
| 27 | + /** 「选择 / 退出选择模式」切换（父层裁决进入/退出） */ |
| 28 | + onToggleBatchMode: () => void; |
| 29 | + onCreate: () => void; |
| 30 | + onCollapse?: () => void; |
| 31 | + keyword: string; |
| 32 | + onKeywordChange: (kw: string) => void; |
| 33 | + onRefresh: () => void; |
| 34 | + sortMode: SortMode; |
| 35 | + onSortModeChange: (mode: SortMode) => void; |
| 36 | + allTags: string[]; |
| 37 | + tagFilter: string | null; |
| 38 | + onTagFilterChange: (tag: string | null) => void; |
| 39 | +} |
| 40 | + |
| 41 | +export default function NoteListToolbar({ |
| 42 | + selectionMode, selectionCount, onToggleBatchMode, onCreate, onCollapse, |
| 43 | + keyword, onKeywordChange, onRefresh, sortMode, onSortModeChange, |
| 44 | + allTags, tagFilter, onTagFilterChange, |
| 45 | +}: Props) { |
| 46 | + return ( |
| 47 | + <> |
| 48 | + <div style={{ padding: "10px 14px", borderBottom: "1px solid #e5e7eb", fontWeight: 600, display: "flex", alignItems: "center", gap: 8 }}> |
| 49 | + <span>📝 笔记</span> |
| 50 | + {selectionMode && ( |
| 51 | + <span style={{ fontSize: 10.5, color: "#4f46e5", border: "1px solid #c7d2fe", borderRadius: 10, padding: "0 6px", background: "#eef2ff", lineHeight: "16px" }}> |
| 52 | + 选择模式{selectionCount > 0 ? `（${selectionCount}）` : ""} |
| 53 | + </span> |
| 54 | + )} |
| 55 | + <button |
| 56 | + data-testid="batch-mode-toggle" |
| 57 | + onClick={onToggleBatchMode} |
| 58 | + style={{ |
| 59 | + ...ghostBtn, |
| 60 | + marginLeft: "auto", |
| 61 | + borderColor: selectionMode ? "#4f46e5" : undefined, |
| 62 | + color: selectionMode ? "#3730a3" : "#4b5563", |
| 63 | + }} |
| 64 | + title={selectionMode ? "退出选择模式（Esc）" : "进入选择模式：单击笔记=勾选（可多选后批量操作）"} |
| 65 | + > |
| 66 | + 选择 |
| 67 | + </button> |
| 68 | + <button onClick={onCreate} style={{ fontSize: 12, cursor: "pointer", padding: "2px 8px", borderRadius: 4, border: "1px solid #d1d5db", background: "#f9fafb" }} title="新建笔记">+ 新建</button> |
| 69 | + <button onClick={onCollapse} style={{ fontSize: 12, cursor: "pointer", border: "none", background: "none", color: "#9ca3af" }} title="折叠列表">⟨</button> |
| 70 | + </div> |
| 71 | + |
| 72 | + <div style={{ padding: 10, borderBottom: "1px solid #f3f4f6", display: "flex", flexDirection: "column", gap: 6 }}> |
| 73 | + <div style={{ display: "flex", gap: 6 }}> |
| 74 | + <input value={keyword} onChange={(e) => onKeywordChange(e.target.value)} placeholder="搜索标题/正文…" style={{ flex: 1, padding: "6px 8px", fontSize: 13, border: "1px solid #e5e7eb", borderRadius: 6, minWidth: 0 }} /> |
| 75 | + <button onClick={onRefresh} style={{ fontSize: 13, cursor: "pointer" }}>⟳</button> |
| 76 | + </div> |
| 77 | + <select value={sortMode} onChange={(e) => onSortModeChange(e.target.value as SortMode)} style={{ fontSize: 12, padding: "3px 6px", border: "1px solid #e5e7eb", borderRadius: 4 }}> |
| 78 | + <option value="updated-desc">按更新时间</option> |
| 79 | + <option value="pin-first">置顶优先</option> |
| 80 | + <option value="created-desc">按创建时间</option> |
| 81 | + </select> |
| 82 | + {allTags.length > 0 && ( |
| 83 | + <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}> |
| 84 | + {tagFilter && ( |
| 85 | + <span onClick={() => onTagFilterChange(null)} style={{ fontSize: 11, color: "#6b7280", cursor: "pointer", border: "1px solid #d1d5db", borderRadius: 10, padding: "1px 6px", background: "#f3f4f6" }}>清除过滤 ✕</span> |
| 86 | + )} |
| 87 | + {allTags.map((t) => ( |
| 88 | + <span key={t} onClick={() => onTagFilterChange(t)} style={{ fontSize: 11, cursor: "pointer", border: `1px solid ${tagFilter === t ? "#0d9488" : "#e5e7eb"}`, borderRadius: 10, padding: "1px 6px", background: tagFilter === t ? "#f0fdfa" : "#f9fafb", color: tagFilter === t ? "#0d9488" : "#6b7280" }}>{t}</span> |
| 89 | + ))} |
| 90 | + </div> |
| 91 | + )} |
| 92 | + </div> |
| 93 | + </> |
| 94 | + ); |
| 95 | +} |
0 commit comments