# CSS 風格統一與精簡總結

## 概述
本文檔記錄了系統CSS的統一與精簡工作，將所有頁面的共同樣式集中在 `Site.css` 中管理。

## 變更內容

### 1. Site.css 新增/增強的共同樣式

#### 搜尋面板相關
- `.search-panel` - 搜尋面板容器
- `.search-row` - 搜尋行（Grid 12欄佈局）
- `.search-field` 和 `.search-field-inline` - 搜尋欄位（縱向/橫向）
- `.search-label` 和 `.search-label-inline` - 搜尋標籤
- `.search-input` - 搜尋輸入框
- `.search-input-group` - 複合輸入群組
- `.search-checkbox-label` - 複選框標籤
- `.search-actions` - 搜尋動作按鈕區
- 寬度變體：`.w-2`, `.w-3`, `.w-4`, `.w-5`, `.w-6`

#### 自動完成相關
- `.autocomplete-field` - 自動完成欄位容器
- `.autocomplete-container` - 自動完成容器
- `.autocomplete-dropdown` - 下拉清單
- `.autocomplete-item` - 下拉項目
- `.autocomplete-value` 和 `.autocomplete-name` - 下拉項目內容

#### 結果面板與表格
- `.result-panel` - 結果面板
- `.result-header` - 結果標題區
- `.result-title` 和 `.header-actions` - 標題和動作
- `.result-table` - 結果表格
- `.password-cell`, `.password-mask`, `.password-text` - 密碼相關
- `.project-cell` - 計畫欄位

#### 表單相關
- `.form-group` 和 `.form-label` - 一般表單組
- `.form-row` - 表單行（多欄位）
- `.form-col-50` 和 `.form-col-100` - 欄位寬度
- `.form-group-inline` 和 `.form-label-inline` - 行內表單
- 標籤寬度變體：`.w-px-60`, `.w-px-70`, `.w-px-80`, `.w-px-100`
- `.checkbox-group` 和 `.checkbox-label` - 複選框
- `.error-message` - 錯誤訊息

#### 模板相關
- `.btn-template` - 模板按鈕
- `.template-buttons` - 模板按鈕容器
- `.template-preview` - 模板預覽區
- `.preview-placeholder` 和 `.preview-content` - 預覽內容

#### SMS 相關
- `.sms-send-panel` - 批發簡訊面板
- `.sms-send-header`, `.sms-send-title` - 標題區
- `.sms-selected-count` - 選中計數
- `.sms-send-content` 和 `.sms-actions` - 內容和動作
- `.sms-send-compact` - 壓縮版

#### 密碼顯示按鈕
- `.btn-icon` - 密碼顯示/隱藏按鈕

#### 分頁增強
- `.pagination-control` - 分頁控制
- `.pagination-select` - 分頁下拉選擇
- `.pagination-label` 和 `.pagination-count` - 分頁標籤和計數

### 2. 各頁面 CSS 檔案的精簡

#### MessageAccountManage.css
**移至 Site.css 的樣式：**
- 頁面容器、搜尋面板、自動完成、結果表格、按鈕、分頁、彈窗、表單

**保留的特有樣式：**
- 密碼相關樣式（`.password-cell`, `.password-mask`, `.password-text`）
- 響應式設計

#### ClassesList.css
**移至 Site.css 的樣式：**
- 搜尋、自動完成、表單、複選框、模板相關

**保留的特有樣式：**
- 搜尋欄位寬度變體 (`.w-2` 至 `.w-6`)
- 專案欄位 (`.project-cell`)
- 彈窗高度特定設定

#### SignUpList.css
**移至 Site.css 的樣式：**
- 搜尋、表單、SMS 批發、結果表格、分頁

**保留的特有樣式：**
- 結果標題區和動作區
- 分頁進階選擇

#### SignUpImport.css 和 SignUpExport.css
**情況：** 這兩個檔案包含特定的業務邏輯樣式（檔案上傳、預覽、匯入/匯出結果），保持不變

#### RoleManage.css
**情況：** 已使用 CSS 變數，特定的佈局樣式，保持不變

#### Home.css
**情況：** 首頁特定樣式（步驟列表、資訊框等），保持不變

## CSS 變數使用

### 顏色變數
```css
--color-primary: var(--color-red-eye)           /* 主色 */
--color-danger: var(--color-red-eye)            /* 危險色 */
--text-primary: var(--color-dark-gray)          /* 主文字 */
--text-muted: var(--color-light-gray)           /* 淡文字 */
--bg-content: var(--color-white)                /* 內容背景 */
```

### 間距變數
```css
--spacing-xs: 5px
--spacing-sm: 10px
--spacing-md: 15px
--spacing-lg: 20px
--spacing-xl: 30px
```

### 字體變數
```css
--font-size-base: 14px
--font-size-sm: 12px
--font-size-lg: 16px
```

## 遷移指南

如果新增頁面或修改現有頁面的 CSS：

1. **檢查共同樣式**：先檢查 `Site.css` 中是否已有該樣式
2. **優先使用 CSS 變數**：使用 `--spacing-*`, `--color-*` 等變數
3. **僅保留特有樣式**：頁面 CSS 中只保留該頁面獨有的樣式
4. **命名規範**：遵循現有的 BEM-like 命名約定

## 效益

✅ **代碼重複減少**：共同樣式統一管理  
✅ **維護效率提升**：修改共同樣式只需改一處  
✅ **代碼量減少**：頁面 CSS 檔案精簡  
✅ **一致性提高**：所有頁面使用相同的樣式定義  
✅ **易於擴展**：新增頁面更容易

## 文檔位置

- **共同樣式定義**：`Content/Site.css` (第 150-600 行)
- **頁面特定樣式**：`Content/{PageName}.css`