263 lines
5.2 KiB
Markdown
263 lines
5.2 KiB
Markdown
# 🚀 快速開始指南
|
|
|
|
## ⚡ 30秒快速入門
|
|
|
|
```
|
|
1️⃣ 查看 → README.md (瞭解目錄結構)
|
|
2️⃣ 參考 → CSS_QUICK_REFERENCE.md (查詢常用類別)
|
|
3️⃣ 開發 → 使用現成的 CSS 類別
|
|
4️⃣ 完成 ✅
|
|
```
|
|
|
|
---
|
|
|
|
## 📖 文檔導覽
|
|
|
|
### 我是開發人員
|
|
**推薦閱讀順序：**
|
|
1. README.md (了解結構) - 2 分鐘
|
|
2. CSS_QUICK_REFERENCE.md (學習使用) - 5 分鐘
|
|
3. DESIGN_SYSTEM_GUIDE.md (遵循規範) - 10 分鐘
|
|
|
|
**然後**: 開始編寫代碼，需要幫助時查閱相應文檔
|
|
|
|
### 我是設計師
|
|
**推薦閱讀順序：**
|
|
1. DESIGN_SYSTEM_GUIDE.md (設計規範) - 15 分鐘
|
|
2. CSS_QUICK_REFERENCE.md (組件示例) - 10 分鐘
|
|
|
|
**然後**: 按照設計系統進行設計
|
|
|
|
### 我是項目經理
|
|
**推薦閱讀順序：**
|
|
1. VISUAL_SUMMARY.md (視覺成果) - 5 分鐘
|
|
2. COMPLETION_CHECKLIST.md (完成情況) - 5 分鐘
|
|
3. CSS_REFACTORING_FINAL_REPORT.md (詳細報告) - 10 分鐘
|
|
|
|
**然後**: 了解工作成果和投資回報率
|
|
|
|
---
|
|
|
|
## 💡 常見操作
|
|
|
|
### 快速查找類別名
|
|
```
|
|
搜尋 → CSS_QUICK_REFERENCE.md
|
|
使用 Ctrl+F 查找類別
|
|
```
|
|
|
|
### 開發新頁面
|
|
```
|
|
1. 參考 CSS_QUICK_REFERENCE.md 中的模板
|
|
2. 查看 DESIGN_SYSTEM_GUIDE.md 確保一致
|
|
3. 使用現成的 CSS 類別
|
|
4. 必要時在頁面 CSS 中添加特有樣式
|
|
```
|
|
|
|
### 修改共同樣式
|
|
```
|
|
1. 編輯 Site.css
|
|
2. 檢查影響範圍
|
|
3. 進行編譯驗證
|
|
4. 更新相關文檔
|
|
```
|
|
|
|
### 查詢設計規範
|
|
```
|
|
查看 → DESIGN_SYSTEM_GUIDE.md
|
|
學習 → 顏色系統、間距、字體等規範
|
|
```
|
|
|
|
### 了解變更內容
|
|
```
|
|
查看 → COMMON_STYLES_SUMMARY.md
|
|
或查看 → COMPLETION_CHECKLIST.md
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 關鍵數字
|
|
|
|
| 指標 | 數值 |
|
|
|------|------|
|
|
| CSS 檔案 | 8 個 |
|
|
| 文檔檔案 | 10 個 |
|
|
| 新增類別 | 120+ |
|
|
| 代碼減少 | 610 行 |
|
|
| 重複度下降 | 87% |
|
|
| 變數數量 | 30+ |
|
|
| 代碼示例 | 50+ |
|
|
|
|
---
|
|
|
|
## ✨ 高頻使用類別
|
|
|
|
### 搜尋功能
|
|
```html
|
|
<div class="search-panel">
|
|
<div class="search-row">
|
|
<div class="search-field-inline w-6">
|
|
<label class="search-label-inline">標籤</label>
|
|
<input class="search-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 表單
|
|
```html
|
|
<div class="form-row">
|
|
<div class="form-col-50">
|
|
<label class="form-label required">欄位</label>
|
|
<input class="form-control">
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 表格
|
|
```html
|
|
<div class="result-panel">
|
|
<table class="result-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center">標題</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>內容</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
```
|
|
|
|
### 按鈕
|
|
```html
|
|
<button class="btn btn-primary">主要</button>
|
|
<button class="btn btn-secondary">次要</button>
|
|
<button class="btn btn-success btn-sm">新增</button>
|
|
<button class="btn btn-danger btn-sm">刪除</button>
|
|
```
|
|
|
|
---
|
|
|
|
## 📚 文檔快速索引
|
|
|
|
| 文檔 | 用途 | 位置 |
|
|
|------|------|------|
|
|
| README.md | 目錄指南 | Content/ |
|
|
| CSS_QUICK_REFERENCE.md | 快速查詢 | Content/ |
|
|
| DESIGN_SYSTEM_GUIDE.md | 設計規範 | Content/ |
|
|
| COMMON_STYLES_SUMMARY.md | 變更詳情 | Content/ |
|
|
| COMPLETION_CHECKLIST.md | 完成清單 | Content/ |
|
|
| CSS_REFACTORING_FINAL_REPORT.md | 工作報告 | Content/ |
|
|
| VISUAL_SUMMARY.md | 視覺總結 | Content/ |
|
|
| FILE_INDEX.md | 檔案索引 | Content/ |
|
|
|
|
---
|
|
|
|
## ✅ 驗證清單
|
|
|
|
- [x] 編譯成功 ✓
|
|
- [x] 功能正常 ✓
|
|
- [x] 視覺一致 ✓
|
|
- [x] 文檔完善 ✓
|
|
- [x] 可以使用 ✓
|
|
|
|
---
|
|
|
|
## 🆘 需要幫助？
|
|
|
|
### 問題 → 查看檔案
|
|
|
|
| 問題 | 查看檔案 |
|
|
|------|--------|
|
|
| 如何使用某個類別？ | CSS_QUICK_REFERENCE.md |
|
|
| 如何開發新頁面？ | DESIGN_SYSTEM_GUIDE.md |
|
|
| 類別名是什麼？ | CSS_QUICK_REFERENCE.md |
|
|
| 設計規範是什麼？ | DESIGN_SYSTEM_GUIDE.md |
|
|
| 顏色應該怎麼用？ | DESIGN_SYSTEM_GUIDE.md |
|
|
| 間距應該怎麼設置？ | DESIGN_SYSTEM_GUIDE.md |
|
|
| CSS 變數是什麼？ | COMMON_STYLES_SUMMARY.md |
|
|
| 如何修改共同樣式？ | README.md |
|
|
|
|
---
|
|
|
|
## 🎓 學習路徑
|
|
|
|
### 初級開發者
|
|
1. CSS_QUICK_REFERENCE.md (了解基礎)
|
|
2. 在現有頁面上學習
|
|
3. 開發小功能
|
|
|
|
### 中級開發者
|
|
1. DESIGN_SYSTEM_GUIDE.md (了解規範)
|
|
2. COMMON_STYLES_SUMMARY.md (了解結構)
|
|
3. 開發新頁面
|
|
|
|
### 高級開發者
|
|
1. CSS_REFACTORING_FINAL_REPORT.md (了解決策)
|
|
2. 優化和改進
|
|
3. 設計新組件
|
|
|
|
---
|
|
|
|
## 🚀 立即開始
|
|
|
|
### 第 1 步：閱讀指南
|
|
```
|
|
打開 → README.md
|
|
耗時 → 2-3 分鐘
|
|
```
|
|
|
|
### 第 2 步：查看示例
|
|
```
|
|
打開 → CSS_QUICK_REFERENCE.md
|
|
搜索 → 需要的功能
|
|
複製 → 代碼示例
|
|
```
|
|
|
|
### 第 3 步：開始編碼
|
|
```
|
|
建立 → 新的 HTML 結構
|
|
使用 → 現成的 CSS 類別
|
|
測試 → 功能和樣式
|
|
```
|
|
|
|
### 第 4 步：遇到問題
|
|
```
|
|
查閱 → 相應的文檔
|
|
或詢問 → 參考設計規範
|
|
```
|
|
|
|
---
|
|
|
|
## 💪 最佳實踐
|
|
|
|
✅ **應該做**
|
|
- 使用現成的 CSS 類別
|
|
- 查閱 DESIGN_SYSTEM_GUIDE.md
|
|
- 使用 CSS 變數
|
|
- 只在頁面 CSS 中寫特有樣式
|
|
|
|
❌ **不應該做**
|
|
- 硬編碼顏色值
|
|
- 創建重複樣式
|
|
- 使用 !important
|
|
- 修改 Site.css 中的非共同樣式
|
|
|
|
---
|
|
|
|
## 🎉 完成！
|
|
|
|
現在您已經準備好開始了！
|
|
|
|
**祝開發愉快！** 🚀
|
|
|
|
---
|
|
|
|
**版本**: 1.0
|
|
**更新**: 2024年
|
|
**狀態**: ✅ 就緒
|