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

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

報到系統/Content/DESIGN_SYSTEM_GUIDE.md

@@ -0,0 +1,444 @@
+# 設計師指南 - CSS 類別使用手冊
+
+## 🎨 顏色系統
+
+### 語義化顏色
+```css
+--color-primary: #c41e3a        /* 黑翅鳶紅眼 - 主要操作 */
+--color-secondary: #e8e8e8      /* 淡灰 - 次要操作 */
+--color-success: #28a745        /* 綠色 - 成功狀態 */
+--color-danger: #dc3545         /* 紅色 - 危險/刪除 */
+--color-warning: #d4a017        /* 金黃 - 警告 */
+--color-info: #17a2b8           /* 青色 - 信息 */
+```
+
+### 文字顏色
+```css
+--text-primary: #2d2d2d         /* 主文字 - 標題、重要內容 */
+--text-secondary: #4a4a4a       /* 次要文字 - 副標題 */
+--text-muted: #8a8a8a           /* 淡色文字 - 提示、說明 */
+--text-light: #ffffff           /* 亮色文字 - 深色背景上 */
+```
+
+### 背景色
+```css
+--bg-body: #f0f0f0              /* 頁面背景 */
+--bg-content: #ffffff           /* 內容背景 */
+--bg-card-header: #f5f5f5       /* 表頭/卡片標題背景 */
+```
+
+### 使用示例
+```html
+<!-- 主要操作按鈕 -->
+<button class="btn btn-primary">保存</button>
+
+<!-- 成功狀態 -->
+<span class="text-success">✓ 成功</span>
+
+<!-- 警告文本 -->
+<p class="text-warning">⚠ 請注意</p>
+
+<!-- 淡色文字 -->
+<p class="text-muted">這是一條提示文字</p>
+```
+
+## 📏 間距系統
+
+### 間距單位
+```css
+--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` | 主要功能區間距 |
+
+### 使用示例
+```html
+<!-- 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>
+```
+
+## 🔤 字體系統
+
+### 字體大小
+```css
+--font-size-sm: 12px            /* 小字 - 說明、標籤 */
+--font-size-base: 14px          /* 基礎 - 正文、表格 */
+--font-size-lg: 16px            /* 大字 - 副標題 */
+```
+
+### 標題層級
+```html
+<h1>32px - 頁面標題</h1>
+<h2>28px - 主要區域標題</h2>
+<h3>24px - 次級區域標題</h3>
+<h4>20px - 小區域標題</h4>
+<h5>14px</h5>
+<h6>14px</h6>
+```
+
+## 📐 邊框與圓角
+
+### 邊框顏色
+```css
+--border-color: #dee2e6         /* 淺灰 - 主要邊框 */
+--border-color-dark: #d0d0d0    /* 銀灰 - 強調邊框 */
+```
+
+### 圓角半徑
+```css
+--border-radius: 4px            /* 所有邊框 */
+```
+
+## 🌤️ 陰影系統
+
+### 陰影定義
+```css
+--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)
+```html
+<button class="btn btn-primary">保存</button>
+```
+- 顏色：紅色 (#c41e3a)
+- 使用：主要操作、確認操作
+- 懸停效果：加深 + 升起效果
+
+#### 次要按鈕 (Secondary)
+```html
+<button class="btn btn-secondary">取消</button>
+```
+- 顏色：灰色
+- 使用：取消、返回、清除
+- 懸停效果：背景加深
+
+#### 成功按鈕 (Success)
+```html
+<button class="btn btn-success">新增</button>
+```
+- 顏色：綠色 (#28a745)
+- 使用：新增、確認成功
+- 懸停效果：加深 + 升起
+
+#### 危險按鈕 (Danger)
+```html
+<button class="btn btn-danger">刪除</button>
+```
+- 顏色：紅色 (#dc3545)
+- 使用：刪除、警告操作
+- 懸停效果：加深 + 升起
+
+#### 小型按鈕
+```html
+<button class="btn btn-primary btn-sm">編輯</button>
+```
+- 尺寸：5px上下、10px左右內邊距
+- 字體：12px
+- 使用：表格、列表中的操作
+
+#### 模板按鈕
+```html
+<button class="btn-template">插入模板</button>
+```
+- 顏色：灰色
+- 尺寸：小型
+- 使用：輔助操作
+
+### 按鈕狀態
+
+| 狀態 | 樣式 | 說明 |
+|------|------|------|
+| 正常 | 原色 | 正常交互 |
+| 懸停 | 加深 + 升起 | 鼠標懸停 |
+| 按下 | 更深 + 內陷 | 點擊時 |
+| 禁用 | 50% 透明度 | 不可交互 |
+
+## 📋 表單設計
+
+### 表單佈局
+
+#### 行內表單
+```html
+<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>
+```
+
+#### 多行表單
+```html
+<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>
+```
+
+### 表單欄位樣式
+
+```html
+<!-- 文本輸入 -->
+<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>
+```
+
+### 驗證狀態
+
+```html
+<!-- 必填欄位 -->
+<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>
+```
+
+## 📊 表格設計
+
+### 基礎表格
+```html
+<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>
+```
+
+### 密碼欄位
+```html
+<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>
+```
+
+## 🔍 搜尋面板設計
+
+### 基礎搜尋
+```html
+<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%)
+```
+
+## 🔄 自動完成設計
+
+```html
+<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
+```
+
+### 響應式類別
+```html
+<div class="d-none">在所有屏幕上隱藏</div>
+<div class="d-block">顯示為塊級元素</div>
+<div class="d-none d-sm-block">小屏及以上顯示</div>
+```
+
+## ✨ 特殊效果
+
+### 過渡效果
+```css
+transition: all 0.2s              /* 按鈕懸停 */
+transition: background 0.2s       /* 背景變化 */
+transition: all 0.3s ease         /* 平滑過渡 */
+```
+
+### 聚焦狀態
+```css
+border-color: var(--focus-color)
+box-shadow: var(--focus-shadow)   /* 藍色外光環 */
+```
+
+### 禁用狀態
+```css
+opacity: 0.5
+cursor: not-allowed
+background: #e9ecef
+```
+
+## 📝 最佳實踐
+
+### ✅ 應該做
+
+1. **使用 CSS 變數** - 保持樣式一致性
+2. **使用現有類別** - 先在 Site.css 中查找
+3. **遵循間距系統** - 使用 `--spacing-*` 變數
+4. **使用語義化顏色** - 用 `--color-*` 代替硬編碼
+5. **命名清晰** - 使用有意義的類別名
+
+### ❌ 不應該做
+
+1. ❌ 不要硬編碼顏色值（#fff, #333 等）
+2. ❌ 不要創建重複的樣式
+3. ❌ 不要使用 `!important`
+4. ❌ 不要使用內聯樣式
+5. ❌ 不要創建通用名稱的類別
+
+## 🚀 快速開始模板
+
+### 新頁面基礎結構
+```html
+<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>
+```
+
+---
+
+**使用此指南進行一致的設計和開發！**