thinkyu/報到系統/Content/COMMON_STYLES_SUMMARY.md

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 變數使用

顏色變數

--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)                /* 內容背景 */

間距變數

--spacing-xs: 5px
--spacing-sm: 10px
--spacing-md: 15px
--spacing-lg: 20px
--spacing-xl: 30px

字體變數

--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