Files

T

sryang 577060bc78 chore: 首次簽入 Thinkyu ASP.NET 專案

- 加入 Visual Studio / ASP.NET .gitignore
- 排除建置輸出、IDE 設定、NuGet packages、大型 MSI 安裝檔

2026-09-10 09:42:37 +08:00

11 KiB

Raw Blame History

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

🎨 顏色系統

語義化顏色

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

文字顏色

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

背景色

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

使用示例

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

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

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

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

📏 間距系統

間距單位

--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`	主要功能區間距

使用示例

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

🔤 字體系統

字體大小

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

標題層級

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

📐 邊框與圓角

邊框顏色

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

圓角半徑

--border-radius: 4px            /* 所有邊框 */

🌤️ 陰影系統

陰影定義

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

<button class="btn btn-primary">保存</button>

顏色：紅色 (#c41e3a)
使用：主要操作、確認操作
懸停效果：加深 + 升起效果

次要按鈕 (Secondary)

<button class="btn btn-secondary">取消</button>

顏色：灰色
使用：取消、返回、清除
懸停效果：背景加深

成功按鈕 (Success)

<button class="btn btn-success">新增</button>

顏色：綠色 (#28a745)
使用：新增、確認成功
懸停效果：加深 + 升起

危險按鈕 (Danger)

<button class="btn btn-danger">刪除</button>

顏色：紅色 (#dc3545)
使用：刪除、警告操作
懸停效果：加深 + 升起

小型按鈕

<button class="btn btn-primary btn-sm">編輯</button>

尺寸：5px上下、10px左右內邊距
字體：12px
使用：表格、列表中的操作

模板按鈕

<button class="btn-template">插入模板</button>

顏色：灰色
尺寸：小型
使用：輔助操作

按鈕狀態

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

📋 表單設計

表單佈局

行內表單

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

表單欄位樣式

<!-- 文本輸入 -->
<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>

驗證狀態

<!-- 必填欄位 -->
<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>

📊 表格設計

基礎表格

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

密碼欄位

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

🔍 搜尋面板設計

基礎搜尋

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

🔄 自動完成設計

<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

響應式類別

<div class="d-none">在所有屏幕上隱藏</div>
<div class="d-block">顯示為塊級元素</div>
<div class="d-none d-sm-block">小屏及以上顯示</div>

✨ 特殊效果

過渡效果

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

聚焦狀態

border-color: var(--focus-color)
box-shadow: var(--focus-shadow)   /* 藍色外光環 */

禁用狀態

opacity: 0.5
cursor: not-allowed
background: #e9ecef

📝 最佳實踐

✅ 應該做

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

❌ 不應該做

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

🚀 快速開始模板

新頁面基礎結構

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

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

11 KiB Raw Blame History

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

🎨 顏色系統

語義化顏色

文字顏色

背景色

使用示例

📏 間距系統

間距單位

間距指南

使用示例

🔤 字體系統

字體大小

標題層級

📐 邊框與圓角

邊框顏色

圓角半徑

🌤️ 陰影系統

陰影定義

🔘 按鈕設計系統

按鈕類型

主要按鈕 (Primary)

次要按鈕 (Secondary)

成功按鈕 (Success)

危險按鈕 (Danger)

小型按鈕

模板按鈕

按鈕狀態

📋 表單設計

表單佈局

行內表單

多行表單

表單欄位樣式

驗證狀態

📊 表格設計

基礎表格

密碼欄位

🔍 搜尋面板設計

基礎搜尋

寬度設定

🔄 自動完成設計

📱 響應式設計

斷點

響應式類別

✨ 特殊效果

過渡效果

聚焦狀態

禁用狀態

📝 最佳實踐

✅ 應該做

❌ 不應該做

🚀 快速開始模板

新頁面基礎結構

11 KiB

Raw Blame History