# v0.2 規劃：Web UI
## 1. 專案概述
名稱：search5
類型：網頁搜尋引擎 with Web UI
主要功能：在 v0.1 基礎上加入 Web 搜尋介面
## 2. 技術選型
- 前端框架：htmx + Tailwind CSS（無需打包工具）
- 模板引擎：axum-tera 或 minijinja
- 靜態檔案服務：tower-http static
## 3. 功能列表
### v0.2 完成事項
1. **首頁 (/)**
- 搜尋輸入框
- 熱門關鍵字顯示
- 最新索引文件列表
2. **搜尋結果頁 (/search)**
- 關鍵字高亮
- 分頁功能
- 結果排序（依相關性）
3. **API 整合**
- `/index` - 建立索引
- `/search?q=關鍵字` - 搜尋
- `/index/status` - 索引狀態
## 4. 頁面設計
```
首頁：
┌─────────────────────────────┐
│ 🔍 搜尋引擎 │
├─────────────────────────────┤
│ [________________________] │
│ [搜尋] │
├─────────────────────────────┤
│ 熱門：Python, Rust, AI │
├─────────────────────────────┤
│ 最近索引： │
│ - 程式設計基礎 │
│ - 資料庫原理 │
│ - ... │
└─────────────────────────────┘
搜尋結果：
┌─────────────────────────────┐
│ 🔍 [______________] [搜尋] │
├─────────────────────────────┤
│ 找到 15 個結果 (0.01s) │
├─────────────────────────────┤
│ 1. <mark>程式</mark>設計基礎 │
│ URL: data/01_programming │
│ 這是<mark>程式</mark>相關...│
├─────────────────────────────┤
│ 2. Python <mark>程式</mark> │
│ ... │
├─────────────────────────────┤
│ [上一頁] 1 2 3 4 5 [下一頁] │
└─────────────────────────────┘
```
## 5. 目錄結構
```
src/
├── main.rs # 入口點
├── indexer/ # 索引模組
├── search/ # 搜尋模組
├── parser/ # 解析模組
├── api/ # REST API
└── ui/ # Web UI 模組
├── mod.rs
├── handlers.rs # 頁面處理
└── templates/ # HTML 模板
├── index.html
└── search.html
static/
├── css/
│ └── style.css
└── js/
└── main.js
```
## 6. 測試计划
- 單元測試：UI handlers
- 整合測試：頁面渲染
- 手動測試：瀏覽器操作
## 7. 預估進度
- v0.2：Web UI（本周）
- v0.3：加強排名演算法