116 lines
2.8 KiB
Markdown
116 lines
2.8 KiB
Markdown
# 設計系統自動化工具
|
|
|
|
## 📋 概述
|
|
|
|
本目錄包含設計系統的自動化維護工具，確保設計規範和元件庫的一致性。
|
|
|
|
## 🛠️ 工具清單
|
|
|
|
### 1. design-sync.sh
|
|
**功能**: 自動同步設計代幣和元件樣式到各個相關位置
|
|
|
|
**使用方法**:
|
|
```bash
|
|
# 賦予執行權限
|
|
chmod +x design-sync.sh
|
|
|
|
# 執行同步
|
|
./design-sync.sh
|
|
```
|
|
|
|
**自動化任務**:
|
|
- ✅ 同步設計代幣 (design-tokens.css) 到元件庫
|
|
- ✅ 生成元件索引 (COMPONENT_INDEX.md)
|
|
- ✅ 驗證CSS文件語法
|
|
- ✅ 生成變更報告 (CHANGE_LOG.md)
|
|
|
|
### 2. component-validator.js
|
|
**功能**: 驗證元件符合設計規範
|
|
|
|
### 3. style-watcher.sh
|
|
**功能**: 監控樣式文件變更並自動同步
|
|
|
|
## 📝 自動化流程
|
|
|
|
### 日常維護流程
|
|
1. **修改設計代幣**: 編輯 `design-system/tokens/design-tokens.css`
|
|
2. **執行同步**: 運行 `./design-sync.sh`
|
|
3. **檢查報告**: 查看 `CHANGE_LOG.md` 確認變更
|
|
4. **提交變更**: Git提交所有自動更新的文件
|
|
|
|
### CI/CD 整合
|
|
```yaml
|
|
# .github/workflows/design-sync.yml 範例
|
|
name: Design System Sync
|
|
|
|
on:
|
|
push:
|
|
paths:
|
|
- 'docs/02_design/design-system/**'
|
|
- 'docs/02_design/component-library/**'
|
|
|
|
jobs:
|
|
sync:
|
|
runs-on: ubuntu-latest
|
|
steps:
|
|
- uses: actions/checkout@v2
|
|
- name: Run design sync
|
|
run: |
|
|
cd docs/02_design/design-system/automation
|
|
chmod +x design-sync.sh
|
|
./design-sync.sh
|
|
- name: Commit changes
|
|
run: |
|
|
git config --local user.email "action@github.com"
|
|
git config --local user.name "GitHub Action"
|
|
git add -A
|
|
git commit -m "🤖 Auto-sync design system" || true
|
|
git push
|
|
```
|
|
|
|
## 🔄 自動化任務清單
|
|
|
|
### 每次設計變更時
|
|
- [x] 同步設計代幣到所有使用位置
|
|
- [x] 更新元件索引文檔
|
|
- [x] 驗證CSS語法正確性
|
|
- [x] 生成變更日誌
|
|
|
|
### 每週執行
|
|
- [ ] 檢查未使用的樣式類別
|
|
- [ ] 生成元件使用統計報告
|
|
- [ ] 檢查設計一致性
|
|
|
|
### 每月執行
|
|
- [ ] 完整的設計系統審計
|
|
- [ ] 性能優化建議
|
|
- [ ] 無障礙性檢查
|
|
|
|
## 📊 報告輸出
|
|
|
|
自動化工具會生成以下報告：
|
|
|
|
1. **COMPONENT_INDEX.md** - 所有元件的索引清單
|
|
2. **CHANGE_LOG.md** - 設計系統變更歷史
|
|
3. **VALIDATION_REPORT.md** - CSS驗證報告
|
|
4. **USAGE_STATS.md** - 元件使用統計
|
|
|
|
## 🚨 錯誤處理
|
|
|
|
如果自動化腳本執行失敗：
|
|
|
|
1. 檢查目錄結構是否正確
|
|
2. 確認文件權限設置
|
|
3. 查看錯誤日誌 `automation.log`
|
|
4. 手動執行失敗的步驟
|
|
|
|
## 🔗 相關文檔
|
|
|
|
- [設計系統總覽](../README.md)
|
|
- [元件庫使用指南](../../component-library/COMPONENT_USAGE_GUIDE.md)
|
|
- [設計代幣規範](../tokens/design-tokens.css)
|
|
|
|
---
|
|
|
|
**最後更新**: 2025-09-15
|
|
**維護者**: Drama Ling 開發團隊 |