181 lines
4.3 KiB
Bash
Executable File
181 lines
4.3 KiB
Bash
Executable File
#!/bin/bash
|
||
|
||
# Drama Ling 設計系統自動化同步腳本
|
||
# 功能：自動同步設計代幣、元件樣式到各個相關位置
|
||
# 作者：Drama Ling 開發團隊
|
||
# 日期：2025-09-15
|
||
|
||
set -e
|
||
|
||
# 顏色定義
|
||
RED='\033[0;31m'
|
||
GREEN='\033[0;32m'
|
||
YELLOW='\033[1;33m'
|
||
NC='\033[0m' # No Color
|
||
|
||
# 路徑定義
|
||
DESIGN_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
|
||
DESIGN_SYSTEM_DIR="$DESIGN_ROOT/design-system"
|
||
COMPONENT_LIBRARY_DIR="$DESIGN_ROOT/component-library"
|
||
PROTOTYPES_DIR="$DESIGN_ROOT/prototypes"
|
||
|
||
# 日誌函數
|
||
log_info() {
|
||
echo -e "${GREEN}[INFO]${NC} $1"
|
||
}
|
||
|
||
log_warning() {
|
||
echo -e "${YELLOW}[WARNING]${NC} $1"
|
||
}
|
||
|
||
log_error() {
|
||
echo -e "${RED}[ERROR]${NC} $1"
|
||
}
|
||
|
||
# 確保必要目錄存在
|
||
ensure_directories() {
|
||
log_info "檢查目錄結構..."
|
||
|
||
if [ ! -d "$DESIGN_SYSTEM_DIR" ]; then
|
||
log_error "設計系統目錄不存在: $DESIGN_SYSTEM_DIR"
|
||
exit 1
|
||
fi
|
||
|
||
if [ ! -d "$COMPONENT_LIBRARY_DIR" ]; then
|
||
log_error "元件庫目錄不存在: $COMPONENT_LIBRARY_DIR"
|
||
exit 1
|
||
fi
|
||
}
|
||
|
||
# 同步設計代幣
|
||
sync_design_tokens() {
|
||
log_info "同步設計代幣..."
|
||
|
||
TOKENS_FILE="$DESIGN_SYSTEM_DIR/tokens/design-tokens.css"
|
||
|
||
if [ ! -f "$TOKENS_FILE" ]; then
|
||
log_warning "設計代幣文件不存在，跳過同步"
|
||
return
|
||
fi
|
||
|
||
# 複製到元件庫
|
||
cp "$TOKENS_FILE" "$COMPONENT_LIBRARY_DIR/assets/styles/tokens.css"
|
||
log_info "✓ 設計代幣已同步到元件庫"
|
||
|
||
# 複製到原型目錄（如果存在）
|
||
if [ -d "$PROTOTYPES_DIR/web/html" ]; then
|
||
cp "$TOKENS_FILE" "$PROTOTYPES_DIR/web/html/assets/tokens.css"
|
||
log_info "✓ 設計代幣已同步到原型目錄"
|
||
fi
|
||
}
|
||
|
||
# 生成元件索引
|
||
generate_component_index() {
|
||
log_info "生成元件索引..."
|
||
|
||
INDEX_FILE="$COMPONENT_LIBRARY_DIR/COMPONENT_INDEX.md"
|
||
|
||
cat > "$INDEX_FILE" << EOF
|
||
# Drama Ling 元件索引
|
||
**自動生成時間**: $(date '+%Y-%m-%d %H:%M:%S')
|
||
|
||
## 📚 元件清單
|
||
|
||
EOF
|
||
|
||
# 掃描元件目錄
|
||
for dir in "$COMPONENT_LIBRARY_DIR"/components/*/; do
|
||
if [ -d "$dir" ]; then
|
||
dirname=$(basename "$dir")
|
||
echo "### $dirname" >> "$INDEX_FILE"
|
||
echo "" >> "$INDEX_FILE"
|
||
|
||
# 列出該目錄下的HTML文件
|
||
for file in "$dir"*.html; do
|
||
if [ -f "$file" ]; then
|
||
filename=$(basename "$file")
|
||
echo "- [$filename]($dir$filename)" >> "$INDEX_FILE"
|
||
fi
|
||
done
|
||
echo "" >> "$INDEX_FILE"
|
||
fi
|
||
done
|
||
|
||
log_info "✓ 元件索引已生成: $INDEX_FILE"
|
||
}
|
||
|
||
# 驗證CSS文件
|
||
validate_css() {
|
||
log_info "驗證CSS文件..."
|
||
|
||
CSS_FILES=(
|
||
"$COMPONENT_LIBRARY_DIR/assets/styles/base.css"
|
||
"$COMPONENT_LIBRARY_DIR/assets/styles/components.css"
|
||
"$DESIGN_SYSTEM_DIR/tokens/design-tokens.css"
|
||
)
|
||
|
||
for css_file in "${CSS_FILES[@]}"; do
|
||
if [ -f "$css_file" ]; then
|
||
# 基本CSS語法檢查
|
||
if grep -q "^\s*[^:{}]*{\s*$" "$css_file"; then
|
||
log_info "✓ $css_file 語法檢查通過"
|
||
else
|
||
log_warning "⚠ $css_file 可能包含語法錯誤，請手動檢查"
|
||
fi
|
||
fi
|
||
done
|
||
}
|
||
|
||
# 生成變更報告
|
||
generate_change_report() {
|
||
log_info "生成變更報告..."
|
||
|
||
REPORT_FILE="$DESIGN_SYSTEM_DIR/CHANGE_LOG.md"
|
||
TIMESTAMP=$(date '+%Y-%m-%d %H:%M:%S')
|
||
|
||
# 如果報告文件不存在，創建標題
|
||
if [ ! -f "$REPORT_FILE" ]; then
|
||
cat > "$REPORT_FILE" << EOF
|
||
# 設計系統變更日誌
|
||
|
||
## 變更記錄
|
||
|
||
EOF
|
||
fi
|
||
|
||
# 添加新的變更記錄
|
||
cat >> "$REPORT_FILE" << EOF
|
||
### $TIMESTAMP
|
||
- 執行自動同步
|
||
- 同步設計代幣到元件庫
|
||
- 更新元件索引
|
||
- 驗證CSS文件
|
||
|
||
---
|
||
|
||
EOF
|
||
|
||
log_info "✓ 變更報告已更新: $REPORT_FILE"
|
||
}
|
||
|
||
# 主函數
|
||
main() {
|
||
echo "========================================="
|
||
echo "Drama Ling 設計系統自動化同步"
|
||
echo "========================================="
|
||
echo ""
|
||
|
||
ensure_directories
|
||
sync_design_tokens
|
||
generate_component_index
|
||
validate_css
|
||
generate_change_report
|
||
|
||
echo ""
|
||
echo "========================================="
|
||
log_info "同步完成！"
|
||
echo "========================================="
|
||
}
|
||
|
||
# 執行主函數
|
||
main "$@" |