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

常見 CSS 類別快速參考

搜尋面板

<!-- 搜尋面板容器 -->
<div class="search-panel">
    <!-- 搜尋行（12欄 Grid）-->
    <div class="search-row">
        <!-- 半寬欄位 (6欄) -->
        <div class="search-field-inline w-6">
            <label class="search-label-inline">計畫</label>
            <input class="search-input" type="text" placeholder="請輸入計畫編號">
        </div>
        
        <!-- 1/4寬欄位 (3欄) -->
        <div class="search-field-inline w-3">
            <label class="search-label-inline">課程</label>
            <input class="search-input" type="text" placeholder="請輸入課程">
        </div>
    </div>
    
    <!-- 搜尋按鈕 -->
    <div class="search-actions">
        <button class="btn btn-secondary">清除</button>
        <button class="btn btn-primary">搜尋</button>
    </div>
</div>

表單佈局

<!-- 多行表單 -->
<div class="form-row">
    <div class="form-col-50">
        <div class="form-group">
            <label class="form-label required">欄位名稱</label>
            <input type="text" class="form-control" placeholder="內容">
            <div class="error-message">錯誤訊息</div>
        </div>
    </div>
    <div class="form-col-50">
        <div class="form-group">
            <label class="form-label">欄位名稱</label>
            <input type="text" class="form-control" placeholder="內容">
        </div>
    </div>
</div>

<!-- 單行表單（行內） -->
<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>

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

自動完成

<div class="form-group-inline autocomplete-field">
    <label class="form-label-inline">計畫</label>
    <div class="autocomplete-container" style="flex: 1;">
        <input 
            type="text" 
            class="form-control autocomplete-input"
            @input="searchProjects"
            @focus="showSuggestions = true">
        <div class="autocomplete-dropdown" v-if="showSuggestions && suggestions.length > 0">
            <div 
                v-for="item in suggestions"
                :key="item.Value"
                class="autocomplete-item"
                @click="selectProject(item)">
                <span class="autocomplete-value">{{ item.Value }}</span>
                <span class="autocomplete-name">{{ item.Name }}</span>
            </div>
        </div>
    </div>
</div>

結果表格

<div class="result-panel">
    <table class="result-table">
        <thead>
            <tr>
                <th class="text-center">編號</th>
                <th>名稱</th>
                <th class="text-center">狀態</th>
                <th class="text-center">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-if="loading">
                <td colspan="4" class="empty-message">載入中...</td>
            </tr>
            <tr v-else-if="data.length === 0">
                <td colspan="4" class="empty-message">查無資料</td>
            </tr>
            <tr v-else v-for="item in data" :key="item.id">
                <td class="text-center">{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td class="text-center">{{ item.status }}</td>
                <td class="text-center">
                    <button class="btn btn-primary btn-sm">編輯</button>
                    <button class="btn btn-danger btn-sm">刪除</button>
                </td>
            </tr>
        </tbody>
    </table>
    
    <!-- 分頁 -->
    <div class="pagination" v-if="totalCount > 0">
        <button class="btn btn-secondary btn-sm" :disabled="currentPage === 1">上一頁</button>
        <span class="pagination-info">第 {{ currentPage }} / {{ totalPages }} 頁</span>
        <button class="btn btn-secondary btn-sm" :disabled="currentPage === totalPages">下一頁</button>
    </div>
</div>

模板編輯

<div class="form-row">
    <div class="form-col-50">
        <div class="form-group">
            <label class="form-label">通知模板</label>
            <textarea class="form-control" v-model="template" maxlength="1000"></textarea>
            <div class="template-buttons">
                <button class="btn-template" @click="insertTemplate('{日期}')">日期</button>
                <button class="btn-template" @click="insertTemplate('{姓名}')">姓名</button>
            </div>
        </div>
    </div>
    <div class="form-col-50">
        <label class="form-label">預覽</label>
        <div class="template-preview">
            <p v-if="!template" class="preview-placeholder">（預覽內容）</p>
            <p v-else class="preview-content">{{ preview }}</p>
        </div>
    </div>
</div>

按鈕類別

<!-- 主要按鈕 -->
<button class="btn btn-primary">保存</button>

<!-- 次要按鈕 -->
<button class="btn btn-secondary">取消</button>

<!-- 成功按鈕 -->
<button class="btn btn-success">新增</button>

<!-- 危險按鈕 -->
<button class="btn btn-danger">刪除</button>

<!-- 小型按鈕 -->
<button class="btn btn-primary btn-sm">編輯</button>

<!-- 禁用狀態 -->
<button class="btn btn-primary" disabled>禁用</button>

<!-- 範本按鈕 -->
<button class="btn-template">插入模板</button>

<!-- 圖標按鈕 -->
<button class="btn-icon">顯示</button>

彈窗

<!-- 彈窗容器 -->
<div class="modal" :class="{ show: showModal }">
    <div class="modal-dialog">
        <!-- 彈窗標題 -->
        <div class="modal-header">
            <h3 class="modal-title">編輯</h3>
        </div>
        
        <!-- 彈窗內容 -->
        <div class="modal-body">
            <!-- 表單內容 -->
        </div>
        
        <!-- 彈窗頁尾 -->
        <div class="modal-footer">
            <button class="btn btn-secondary" @click="closeModal">取消</button>
            <button class="btn btn-primary" @click="save">保存</button>
        </div>
    </div>
</div>

寬度類別

搜尋欄位寬度

<!-- 佔 1/6 (2欄) -->
<div class="search-field-inline w-2"></div>

<!-- 佔 1/4 (3欄) -->
<div class="search-field-inline w-3"></div>

<!-- 佔 1/3 (4欄) -->
<div class="search-field-inline w-4"></div>

<!-- 佔 1/2 (6欄) -->
<div class="search-field-inline w-6"></div>

標籤寬度

<!-- 相對寬度 -->
<label class="form-label-inline w-3">標籤</label>

<!-- 固定寬度 -->
<label class="form-label-inline w-px-80">標籤</label>

CSS 變數

/* 顏色 */
--color-primary: #c41e3a          /* 主色 */
--text-primary: #2d2d2d           /* 主文字 */
--text-muted: #8a8a8a             /* 淡文字 */
--bg-content: #ffffff             /* 內容背景 */

/* 間距 */
--spacing-xs: 5px
--spacing-sm: 10px
--spacing-md: 15px
--spacing-lg: 20px

/* 字體 */
--font-size-base: 14px
--font-size-sm: 12px

/* 邊框 */
--border-color: #dee2e6
--border-radius: 4px

/* 陰影 */
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1)

文字工具類

<p class="text-center">居中文字</p>
<p class="text-primary">主要顏色文字</p>
<p class="text-muted">淡色文字</p>
<p class="text-danger">危險顏色文字</p>

間距工具類

<!-- Margin -->
<div class="mt-3">上邊距</div>
<div class="mb-3">下邊距</div>

<!-- Padding -->
<div class="pt-3">上內邊距</div>
<div class="pb-3">下內邊距</div>