# 設計師指南 - CSS 類別使用手冊

## 🎨 顏色系統

### 語義化顏色
```css
--color-primary: #c41e3a        /* 黑翅鳶紅眼 - 主要操作 */
--color-secondary: #e8e8e8      /* 淡灰 - 次要操作 */
--color-success: #28a745        /* 綠色 - 成功狀態 */
--color-danger: #dc3545         /* 紅色 - 危險/刪除 */
--color-warning: #d4a017        /* 金黃 - 警告 */
--color-info: #17a2b8           /* 青色 - 信息 */
```

### 文字顏色
```css
--text-primary: #2d2d2d         /* 主文字 - 標題、重要內容 */
--text-secondary: #4a4a4a       /* 次要文字 - 副標題 */
--text-muted: #8a8a8a           /* 淡色文字 - 提示、說明 */
--text-light: #ffffff           /* 亮色文字 - 深色背景上 */
```

### 背景色
```css
--bg-body: #f0f0f0              /* 頁面背景 */
--bg-content: #ffffff           /* 內容背景 */
--bg-card-header: #f5f5f5       /* 表頭/卡片標題背景 */
```

### 使用示例
```html
<!-- 主要操作按鈕 -->
<button class="btn btn-primary">保存</button>

<!-- 成功狀態 -->
<span class="text-success">✓ 成功</span>

<!-- 警告文本 -->
<p class="text-warning">⚠ 請注意</p>

<!-- 淡色文字 -->
<p class="text-muted">這是一條提示文字</p>
```

## 📏 間距系統

### 間距單位
```css
--spacing-xs: 5px               /* 極小 - 元素內部間距 */
--spacing-sm: 10px              /* 小 - 相關元素間距 */
--spacing-md: 15px              /* 中 - 區塊內容間距 */
--spacing-lg: 20px              /* 大 - 主要區塊間距 */
--spacing-xl: 30px              /* 特大 - 頁面級間距 */
--spacing-xxl: 40px             /* 超大 - 頁面頂級間距 */
```

### 間距指南

| 場景 | 使用單位 | 說明 |
|------|--------|------|
| 按鈕內部邊距 | `--spacing-sm` | 8px上下、12px左右 |
| 表單欄位間距 | `--spacing-md` | 表單組之間 |
| 區塊邊距 | `--spacing-lg` | 面板、卡片間距 |
| 搜尋和結果間 | `--spacing-lg` | 主要功能區間距 |

### 使用示例
```html
<!-- Margin 工具類 -->
<div class="mt-3">上邊距 15px</div>
<div class="mb-3">下邊距 15px</div>
<div class="mx-2">左右邊距 10px</div>

<!-- Padding 工具類 -->
<div class="pt-3">上內邊距 15px</div>
<div class="pb-3">下內邊距 15px</div>
<div class="px-2">左右內邊距 10px</div>
```

## 🔤 字體系統

### 字體大小
```css
--font-size-sm: 12px            /* 小字 - 說明、標籤 */
--font-size-base: 14px          /* 基礎 - 正文、表格 */
--font-size-lg: 16px            /* 大字 - 副標題 */
```

### 標題層級
```html
<h1>32px - 頁面標題</h1>
<h2>28px - 主要區域標題</h2>
<h3>24px - 次級區域標題</h3>
<h4>20px - 小區域標題</h4>
<h5>14px</h5>
<h6>14px</h6>
```

## 📐 邊框與圓角

### 邊框顏色
```css
--border-color: #dee2e6         /* 淺灰 - 主要邊框 */
--border-color-dark: #d0d0d0    /* 銀灰 - 強調邊框 */
```

### 圓角半徑
```css
--border-radius: 4px            /* 所有邊框 */
```

## 🌤️ 陰影系統

### 陰影定義
```css
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08)     /* 淡陰影 */
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1)      /* 中等陰影 */
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15)    /* 強陰影 */
--shadow-navbar: 0 2px 8px rgba(0, 0, 0, 0.3)  /* 導航欄陰影 */
```

## 🔘 按鈕設計系統

### 按鈕類型

#### 主要按鈕 (Primary)
```html
<button class="btn btn-primary">保存</button>
```
- 顏色：紅色 (#c41e3a)
- 使用：主要操作、確認操作
- 懸停效果：加深 + 升起效果

#### 次要按鈕 (Secondary)
```html
<button class="btn btn-secondary">取消</button>
```
- 顏色：灰色
- 使用：取消、返回、清除
- 懸停效果：背景加深

#### 成功按鈕 (Success)
```html
<button class="btn btn-success">新增</button>
```
- 顏色：綠色 (#28a745)
- 使用：新增、確認成功
- 懸停效果：加深 + 升起

#### 危險按鈕 (Danger)
```html
<button class="btn btn-danger">刪除</button>
```
- 顏色：紅色 (#dc3545)
- 使用：刪除、警告操作
- 懸停效果：加深 + 升起

#### 小型按鈕
```html
<button class="btn btn-primary btn-sm">編輯</button>
```
- 尺寸：5px上下、10px左右內邊距
- 字體：12px
- 使用：表格、列表中的操作

#### 模板按鈕
```html
<button class="btn-template">插入模板</button>
```
- 顏色：灰色
- 尺寸：小型
- 使用：輔助操作

### 按鈕狀態

| 狀態 | 樣式 | 說明 |
|------|------|------|
| 正常 | 原色 | 正常交互 |
| 懸停 | 加深 + 升起 | 鼠標懸停 |
| 按下 | 更深 + 內陷 | 點擊時 |
| 禁用 | 50% 透明度 | 不可交互 |

## 📋 表單設計

### 表單佈局

#### 行內表單
```html
<div class="form-group-inline">
    <label class="form-label-inline required">姓名</label>
    <input type="text" class="form-control" placeholder="請輸入姓名">
    <div class="error-message">必填欄位</div>
</div>
```

#### 多行表單
```html
<div class="form-row">
    <div class="form-col-50">
        <div class="form-group">
            <label class="form-label required">日期</label>
            <input type="date" class="form-control">
        </div>
    </div>
    <div class="form-col-50">
        <div class="form-group">
            <label class="form-label">備註</label>
            <input type="text" class="form-control">
        </div>
    </div>
</div>
```

### 表單欄位樣式

```html
<!-- 文本輸入 -->
<input type="text" class="form-control" placeholder="請輸入內容">

<!-- 日期選擇 -->
<input type="date" class="form-control">

<!-- 下拉選擇 -->
<select class="form-control">
    <option>請選擇</option>
</select>

<!-- 文本框 -->
<textarea class="form-control" rows="4"></textarea>

<!-- 複選框 -->
<div class="checkbox-group">
    <input type="checkbox" id="cb">
    <label class="checkbox-label" for="cb">同意條款</label>
</div>

<!-- 禁用狀態 -->
<input type="text" class="form-control" disabled>

<!-- 只讀狀態 -->
<input type="text" class="form-control" readonly>
```

### 驗證狀態

```html
<!-- 必填欄位 -->
<label class="form-label required">欄位名稱</label>

<!-- 錯誤訊息 -->
<div class="error-message">錯誤訊息內容</div>

<!-- 有效狀態 -->
<div class="form-control is-valid"></div>

<!-- 無效狀態 -->
<div class="form-control is-invalid"></div>
```

## 📊 表格設計

### 基礎表格
```html
<div class="result-panel">
    <table class="result-table">
        <thead>
            <tr>
                <th class="text-center">編號</th>
                <th>名稱</th>
                <th class="text-center">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-center">1</td>
                <td>項目名稱</td>
                <td class="text-center">
                    <button class="btn btn-primary btn-sm">編輯</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
```

### 密碼欄位
```html
<td class="password-cell">
    <span v-if="!showPassword" class="password-mask">●●●●●●●●</span>
    <span v-else class="password-text">actualPassword123</span>
    <button class="btn-icon" @click="togglePassword">顯示</button>
</td>
```

## 🔍 搜尋面板設計

### 基礎搜尋
```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" type="text" placeholder="請輸入計畫編號">
        </div>
        <div class="search-field-inline w-3">
            <label class="search-label-inline">日期</label>
            <input class="search-input" type="date">
        </div>
        <div class="search-field-inline w-3">
            <label class="search-label-inline">狀態</label>
            <select class="search-input">
                <option>全部</option>
                <option>進行中</option>
                <option>已完成</option>
            </select>
        </div>
    </div>
    
    <div class="search-actions">
        <button class="btn btn-secondary">清除</button>
        <button class="btn btn-primary">搜尋</button>
    </div>
</div>
```

### 寬度設定
```
w-2: 佔 2欄 (16.67%)
w-3: 佔 3欄 (25%)
w-4: 佔 4欄 (33.33%)
w-5: 佔 5欄 (41.67%)
w-6: 佔 6欄 (50%)
```

## 🔄 自動完成設計

```html
<div class="form-group-inline autocomplete-field">
    <label class="form-label-inline">選擇</label>
    <div class="autocomplete-container" style="flex: 1;">
        <input class="form-control autocomplete-input" @input="search" @focus="showSuggestions = true">
        <div class="autocomplete-dropdown" v-if="showSuggestions">
            <div class="autocomplete-item" v-for="item in suggestions" @click="select(item)">
                <span class="autocomplete-value">{{ item.code }}</span>
                <span class="autocomplete-name">{{ item.name }}</span>
            </div>
        </div>
    </div>
</div>
```

## 📱 響應式設計

### 斷點
```
超小屏: < 576px
小屏: 576px - 767px
平板: 768px - 1199px
台式: ≥ 1200px
超大: ≥ 1920px
```

### 響應式類別
```html
<div class="d-none">在所有屏幕上隱藏</div>
<div class="d-block">顯示為塊級元素</div>
<div class="d-none d-sm-block">小屏及以上顯示</div>
```

## ✨ 特殊效果

### 過渡效果
```css
transition: all 0.2s              /* 按鈕懸停 */
transition: background 0.2s       /* 背景變化 */
transition: all 0.3s ease         /* 平滑過渡 */
```

### 聚焦狀態
```css
border-color: var(--focus-color)
box-shadow: var(--focus-shadow)   /* 藍色外光環 */
```

### 禁用狀態
```css
opacity: 0.5
cursor: not-allowed
background: #e9ecef
```

## 📝 最佳實踐

### ✅ 應該做

1. **使用 CSS 變數** - 保持樣式一致性
2. **使用現有類別** - 先在 Site.css 中查找
3. **遵循間距系統** - 使用 `--spacing-*` 變數
4. **使用語義化顏色** - 用 `--color-*` 代替硬編碼
5. **命名清晰** - 使用有意義的類別名

### ❌ 不應該做

1. ❌ 不要硬編碼顏色值（#fff, #333 等）
2. ❌ 不要創建重複的樣式
3. ❌ 不要使用 `!important`
4. ❌ 不要使用內聯樣式
5. ❌ 不要創建通用名稱的類別

## 🚀 快速開始模板

### 新頁面基礎結構
```html
<div class="page-container">
    <!-- 頁面標題 -->
    <div class="page-header">
        <h1 class="page-title">頁面名稱</h1>
        <p class="page-description">頁面描述</p>
    </div>

    <!-- 搜尋面板 -->
    <div class="search-panel">
        <div class="search-row">
            <!-- 搜尋欄位 -->
        </div>
        <div class="search-actions">
            <!-- 按鈕 -->
        </div>
    </div>

    <!-- 結果面板 -->
    <div class="result-panel">
        <!-- 表格或列表 -->
    </div>

    <!-- 分頁 -->
    <div class="pagination">
        <!-- 分頁控制 -->
    </div>
</div>
```

---

**使用此指南進行一致的設計和開發！**