58 lines
4.0 KiB
Markdown
58 lines
4.0 KiB
Markdown
# PRD: 知识库索引面板 (Knowledge Index Panel)
|
|
|
|
## Problem Statement
|
|
|
|
用户每次用 `/knowledge-absorber` 学习后，会在项目根目录生成 `knowledge_YYYYMMDD_Title/` 文件夹。目前有 2 个知识条目，预计每月增长 5-10 个。所有条目散落在根目录，没有跨条目的导航或搜索能力。想找之前学过的内容只能手动翻目录，搜索成本随条目数线性上升。
|
|
|
|
## Solution
|
|
|
|
在项目根目录生成一个 **纯静态的 `knowledge-index.html`**，浏览器直接打开即可使用。它能自动发现所有 knowledge 条目，提供标签关联和全文搜索。不需要任何服务器、数据库或外部依赖。
|
|
|
|
## User Stories
|
|
|
|
1. As a 学习者, I want to see all my knowledge entries on one page with dates, so that I can quickly find what I studied and when
|
|
2. As a 学习者, I want to search across all knowledge entries by keyword, so that I can find "that thing about Redis" in 2 seconds instead of manually opening 10 folders
|
|
3. As a 学习者, I want to click a tag like "Claude Code" and see all related entries, so that I can review interconnected topics
|
|
4. As a 学习者, I want the index to auto-discover new knowledge entries, so that I don't need to manually update anything after running `/knowledge-absorber`
|
|
5. As a 学习者, I want the page to work offline by just double-clicking the HTML file, so that I can use it without internet or any setup
|
|
6. As a 学习者, I want to see which entries are related to each other via shared tags, so that I can discover connections between topics I've studied
|
|
7. As a 学习者, I want the search to highlight matching text, so that I can see at a glance why an entry matched my query
|
|
8. As a 学习者, I want to see a count of entries per tag, so that I know which topics I've studied most
|
|
|
|
## Implementation Decisions
|
|
|
|
- **Single HTML file**: All CSS and JS inlined in `knowledge-index.html`. No external files or CDN dependencies
|
|
- **Manifest-based discovery**: A JavaScript array inside the HTML lists all known knowledge directory names. Browser security sandbox prevents dynamic directory listing via `fetch()`
|
|
- **YAML frontmatter parsing**: Regex-based extraction from `.md` files. Simple key:value parsing only — no full YAML spec support
|
|
- **Client-side search**: All `.md` content loaded into memory at page init. Real-time filtering with `String.includes()`, case-insensitive. `<mark>` tags for highlighting
|
|
- **Tag system**: In-memory `Map<tag, entry[]>` built at load time. Click to filter, click again to deselect
|
|
- **Related Content**: Computed from shared tags, displayed per-entry
|
|
- **No pagination**: Designed for < 50 entries. Full list rendered at once
|
|
- **UTF-8 encoding**: All files assumed UTF-8. `fetch()` handles encoding detection
|
|
|
|
## Testing Decisions
|
|
|
|
- **What makes a good test**: Test external behavior — "user types keyword → correct entries appear" — not internal state
|
|
- **Test with real data**: Use existing 2 knowledge entries (`knowledge_20260417_Waza`, `knowledge_20260518_mattpocock_skills`) as test fixtures
|
|
- **Edge cases to verify**:
|
|
- Missing directory (manifest lists a name that doesn't exist) → skip gracefully
|
|
- Malformed YAML → display directory name as fallback
|
|
- Empty tags array → no tag badges rendered
|
|
- No search results → show "没有找到相关条目" message
|
|
- Browser CORS when opened via `file://` protocol → document the workaround
|
|
|
|
## Out of Scope
|
|
|
|
- Google Drive / cloud sync
|
|
- Editing knowledge entries
|
|
- Full YAML 1.2 spec compliance
|
|
- Pagination or virtual scrolling
|
|
- Fuse.js or other fuzzy search libraries (keep it zero-dependency)
|
|
- Dark mode toggle (can add later, not in v1)
|
|
|
|
## Further Notes
|
|
|
|
- The manifest maintenance problem (adding new entries) can be solved in a future iteration by modifying the `/knowledge-absorber` skill to auto-append to the manifest array
|
|
- The `file://` protocol CORS limitation on Chrome means users may need to serve via `python -m http.server` or similar for full functionality
|
|
- Tag counts provide a natural "learning heatmap" — most-studied topics bubble to the top
|