150 lines
4.7 KiB
Markdown
150 lines
4.7 KiB
Markdown
# 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`
|