ASP.NET Core MVC 專案 - 數位電子鐘 & 番茄鐘工作法 & 3D 互動地球儀 & 備忘錄系統
功能特色 • 快速開始 • 專案結構 • 技術規格 • 部署 • 文件
這是一個基於 ASP.NET Core 8.0 MVC 的展示專案，包含五大特色功能：
- 數位電子鐘 - 華麗的即時數位電子鐘，展示彩虹漸層與霓虹發光特效
- 番茄鐘工作法 - 完整的時間管理工具，支援任務追蹤、統計分析與資料持久化
- 3D 互動地球儀 - 基於 Three.js 的 3D 地球儀，支援地點標記、搜尋、多圖層和響應式設計
- 備忘錄系統 - 功能完整的筆記管理系統，支援 Markdown 編輯、標籤管理、搜尋和釘選功能
- 匿名留言板 ⭐ 新增 - 24 小時限時匿名留言板，支援回覆、按讚、搜尋和內容過濾
- ✨ 新增匿名留言板功能
- ✨ 完全匿名設計，使用 Cookie 識別使用者
- ✨ 24 小時限時留言，自動過期清理
- ✨ 支援回覆、按讚、編輯、刪除功能
- ✨ 智慧搜尋與排序 (最新/熱門/最舊)
- ✨ 內容過濾系統，自動過濾不當字詞
- ✨ Markdown 支援 (粗體、斜體、刪除線)
- ✨ RESTful API (8 個端點)
- ✨ SemaphoreSlim 檔案鎖定，防止並行寫入衝突
- ✨ LocalStorage 快取，按讚狀態持久化
- 🎨 現代化卡片設計，支援深色模式
- 🎨 響應式介面，完美適配各裝置
- 🎨 動畫效果 (按讚愛心、淡入動畫、載入動畫)
- 🎨 智慧時間顯示 (相對時間格式)
- 📚 新增留言板功能規格書
- 📚 新增留言板技術總結文件
- ⚡ 分頁載入 (每頁 10 筆)，提升效能
- ⚡ 防抖搜尋 (300ms)，減少 API 呼叫
- ⚡ 初次載入時間 < 300ms
- ✨ 新增備忘錄系統功能
- ✨ 整合 Marked.js 進行 Markdown 解析與渲染
- ✨ 實作即時 Markdown 預覽編輯器
- ✨ 實作標籤管理系統 (新增、刪除、篩選)
- ✨ 實作置頂功能 (最多 5 個)
- ✨ 實作軟刪除機制
- ✨ 實作搜尋、篩選、分頁功能
- ✨ 實作 11 色卡片配色方案
- ✨ RESTful API (11 個端點)
- ✨ 60 秒快取機制，提升效能
- ✨ SemaphoreSlim 執行緒鎖，確保資料一致性
- 🎨 響應式 CSS Grid 設計 (3/2/1 欄位)
- 🎨 卡片翻轉動畫與漸層背景
- 📚 新增備忘錄功能規格書
- 📚 新增備忘錄技術總結文件
- ⚡ 搜尋防抖 (500ms)，減少不必要的 API 呼叫
- ⚡ 初次載入時間 < 500ms
- ✨ 新增 3D 互動地球儀功能
- ✨ 整合 Three.js r128 進行 WebGL 渲染
- ✨ 實作地點標記系統 (10+ 世界地標)
- ✨ 實作搜尋、圖層管理、快速導航
- ✨ 地球貼圖載入 (NASA Blue Marble)
- ✨ 雙重顯示策略 (立即顯示 + 非同步貼圖)
- ✨ 經緯線網格視覺化
- ✨ 拖曳旋轉、滾輪縮放、慣性滑動
- ✨ 多光源系統 (環境光、方向光、點光源)
- ✨ RESTful API (8 個端點)
- 🎨 響應式設計,支援桌面、平板、手機
- 🐛 修正地球儀不顯示問題 (材質顏色與光源優化)
- 📚 新增地球儀功能規格書
- 📚 新增地球儀修復說明文件尋和釘選功能
專案展示了現代化 Web 開發的最佳實務，包含響應式設計、無障礙功能和效能優化。
- 即時更新: 每秒自動更新當前時間
- 台灣時區: 顯示台灣標準時間 (UTC+8)
- 格式化顯示: HH:mm:ss 24小時制格式
- 華麗視覺效果: 彩虹漸層色彩和霓虹發光特效
- 響應式設計: 適應各種螢幕尺寸
核心功能
- 計時器管理: 工作時間（25分鐘）、短休息（5分鐘）、長休息（15分鐘）
- 任務追蹤: 新增、刪除、完成任務，支援任務狀態管理
- 智慧按鈕: 任務開始後，「開始」按鈕自動切換為「暫停」按鈕 ⭐ 新增
- 即時回饋: 樂觀更新機制，零感知延遲的 UI 更新 ⭐ 新增
- 資料持久化: JSON 檔案儲存，自動儲存工作記錄
- 統計分析: 今日/本週番茄數統計、任務完成率追蹤
- 自訂設定: 可調整時間長度、音效控制、自動開始選項
設計特色
- 華麗科技感 UI: 漸層色彩、玻璃擬態效果、流暢動畫
- 響應式設計: 完美支援桌面、平板、手機裝置
- 圓形計時器: SVG 進度環、即時視覺回饋
- 視覺效果增強: 正在執行的任務有脈搏動畫和旋轉圖示 ⭐ 新增
- 音效系統: Web Audio API 生成提示音，支援音量控制
使用者體驗亮點 ⭐ 新增
- 一鍵啟動: 點擊任務的「開始」按鈕，立即開始倒數
- 狀態可視化: 任務狀態即時更新，清楚顯示「進行中」任務
- 智慧控制: 在任務列表直接暫停，無需切換到計時器區域
- 視覺識別: 正在執行的任務有特殊動畫效果，一眼就能識別
核心功能
- 3D 渲染: 使用 Three.js 渲染真實感地球儀，支援地球貼圖和經緯線網格
- 互動操作: 拖曳旋轉、滾輪縮放、雙擊聚焦、慣性滑動
- 地點系統: 10+ 預設世界地標，支援新增、編輯、刪除地點
- 搜尋功能: 即時搜尋地點名稱，支援中英文關鍵字
- 圖層管理: 城市圖層、地標圖層、自然奇觀圖層，可獨立切換
- 快速導航: 一鍵前往台北、東京、巴黎、紐約等知名城市
- 詳細資訊: 點擊地點查看名稱、座標、類型、描述等詳細資訊
視覺特色
- 真實地球貼圖: 使用 NASA Blue Marble 高解析度地球貼圖
- 雙重顯示策略: 立即顯示純色球體，貼圖載入後自動替換
- 經緯線網格: 半透明網格提供視覺參考
- 多種光源: 環境光、方向光、點光源，模擬真實光照效果
- 地點標記: 彩色球體標記，不同類型使用不同顏色（藍色=首都，綠色=城市，紅色=地標）
- 動畫效果: 地球自動旋轉、標記縮放動畫、相機平滑移動
技術實作
- WebGL 渲染: 硬體加速的 3D 圖形渲染
- 資料持久化: JSON 檔案儲存地點資料
- RESTful API: 完整的 CRUD 操作端點
- 響應式設計: 桌面、平板、手機完美適配
- 效能優化: 材質快取、紋理壓縮、智慧更新
核心功能
- 完整 CRUD: 建立、讀取、更新、刪除備忘錄，支援軟刪除機制
- Markdown 編輯器: 即時預覽、工具列、語法高亮，支援完整 Markdown 語法
- 標籤系統: 多標籤管理、自動完成、標籤篩選、智慧分類
- 搜尋功能: 全文搜尋（標題、內容、標籤），支援即時搜尋（含 Debounce）
- 釘選功能: 最多 5 個釘選，優先顯示重要備忘錄
- 顏色標記: 視覺化分類管理，自訂卡片顏色
- 字數統計: 即時顯示標題和內容字數
- 資料持久化: JSON 檔案儲存，自動儲存變更
視覺特色
- 卡片式設計: 美觀的卡片佈局，支援懸停動畫效果
- 響應式網格: 桌面 3 欄、平板 2 欄、手機 1 欄自動適應
- Markdown 預覽: 即時渲染 HTML，支援程式碼高亮、表格、引言等
- 釘選視覺化: 金色邊框和釘選圖示，一眼識別重要備忘錄
- 標籤徽章: 彩色標籤徽章，點擊即可篩選
- 淡入動畫: 流暢的卡片載入和刪除動畫
技術實作
- 服務層架構: IMemorandumDataService 介面，依賴注入設計
- 執行緒安全: SemaphoreSlim 檔案鎖定，防止並行寫入衝突
- 快取機制: 60 秒快取，減少 80% 檔案 I/O 操作
- RESTful API: 11 個端點，統一 JSON 回應格式
- 分頁支援: 每頁 12 筆，支援自訂分頁大小
- Marked.js 整合: 輕量級 Markdown 解析器（<10KB）
- 完全匿名: 無需註冊登入，使用 Cookie 識別使用者
- 24 小時限時: 留言自動過期刪除，營造輕鬆交流氛圍
- 即時互動: 支援回覆、按讚功能，點擊即可互動
- 智慧搜尋: 關鍵字搜尋與排序功能，快速找到相關內容
- 內容過濾: 自動過濾不當字詞，維護良好交流環境
- 權限管理: 僅作者可編輯/刪除（10 分鐘編輯限制）
- 現代化設計: 卡片式佈局，支援懸停動畫和深色模式
- 響應式介面: 桌面、平板、手機完美適配，隨處都能使用
- 即時字數統計: 輸入框顯示字數，防止超過限制
- 動畫效果: 按讚愛心動畫、留言淡入動畫、載入動畫
- Markdown 支援: 支援粗體、斜體、刪除線等基本語法
- 時間顯示: 智慧時間顯示（剛剛、X 分鐘前、X 小時前）
- 服務層架構: IMessageBoardService 介面，依賴注入設計
- 執行緒安全: SemaphoreSlim 檔案鎖定，防止並行寫入衝突
- Cookie 識別: 7 天有效期 Cookie 實現匿名使用者識別
- RESTful API: 8 個端點，統一 JSON 回應格式與錯誤處理
- 分頁載入: 每頁 10 筆，支援排序（最新/熱門/最舊）
- LocalStorage: 快取按讚狀態，提升使用者體驗
- 現代化架構: ASP.NET Core 8.0 MVC 模式
- 前端技術: HTML5, CSS3, JavaScript ES6+, Three.js r128, Marked.js ⭐
- 3D 圖形: WebGL + Three.js，硬體加速渲染
- Markdown 支援: Marked.js 即時解析與預覽 ⭐ 新增
- 視覺特效: CSS3 漸層、動畫和硬體加速
- 無障礙支援: ARIA 標籤和高對比度模式
- 效能優化: 智慧暫停、記憶體管理、執行緒安全、快取機制 ⭐
- RESTful API: 統一的 JSON API 設計
- 依賴注入: 服務導向架構，易於測試與維護
- .NET 8.0 SDK
- Visual Studio Code 或 Visual Studio 2022
- 現代瀏覽器 (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
-
克隆儲存庫
git clone https://github.com/HyperLee/DemoMVC.git cd DemoMVC -
還原相依套件
dotnet restore
-
建置專案
dotnet build
-
執行應用程式
cd DemoMVC dotnet run -
開啟瀏覽器
導航至http://localhost:5000或https://localhost:5001
-
首頁: 即時數位電子鐘展示
http://localhost:5000/ -
世界時鐘: 多時區時間顯示
http://localhost:5000/WorldClock -
番茄鐘: 完整的時間管理工具
http://localhost:5000/Pomodoro -
3D 地球儀: 互動式 3D 地球儀與地點瀏覽
http://localhost:5000/Globe -
備忘錄: 完整的筆記管理系統 ⭐ 新增
http://localhost:5000/Memorandum
提示: 點擊導覽列的 🍅 番茄鐘即可開始使用番茄工作法！拖曳 🌍 地球儀來探索世界各地！建立您的第一個 📝 備忘錄！
DemoMVC/
├── DemoMVC/ # 主要應用程式目錄
│ ├── Controllers/
│ │ ├── HomeController.cs # 首頁控制器
│ │ ├── WorldClockController.cs # 世界時鐘控制器
│ │ ├── PomodoroController.cs # 番茄鐘控制器
│ │ ├── GlobeController.cs # 地球儀控制器
│ │ └── MemorandumController.cs # 備忘錄控制器 ⭐ 新增
│ ├── Models/
│ │ ├── ErrorViewModel.cs # 錯誤檢視模型
│ │ ├── WorldClockModels.cs # 世界時鐘模型
│ │ ├── PomodoroTask.cs # 番茄鐘任務模型
│ │ ├── PomodoroSession.cs # 番茄鐘階段模型
│ │ ├── PomodoroSettings.cs # 番茄鐘設定模型
│ │ ├── PomodoroStatistics.cs # 番茄鐘統計模型
│ │ ├── PomodoroData.cs # 番茄鐘資料容器
│ │ ├── LocationData.cs # 地球儀地點模型
│ │ ├── GlobeSettings.cs # 地球儀設定模型
│ │ ├── GlobeLayer.cs # 地球儀圖層模型
│ │ ├── Memorandum.cs # 備忘錄模型 ⭐ 新增
│ │ └── MemorandumData.cs # 備忘錄資料容器 ⭐ 新增
│ ├── Services/
│ │ ├── IPomodoroDataService.cs # 番茄鐘資料服務介面
│ │ ├── PomodoroDataService.cs # 番茄鐘資料服務實作
│ │ ├── IGlobeDataService.cs # 地球儀資料服務介面
│ │ ├── GlobeDataService.cs # 地球儀資料服務實作
│ │ ├── IMemorandumDataService.cs # 備忘錄資料服務介面 ⭐ 新增
│ │ └── MemorandumDataService.cs # 備忘錄資料服務實作 ⭐ 新增
│ ├── Views/
│ │ ├── Home/
│ │ │ ├── Index.cshtml # 首頁視圖 (數位電子鐘)
│ │ │ ├── index2.cshtml # 備用首頁
│ │ │ └── Privacy.cshtml # 隱私頁面
│ │ ├── WorldClock/
│ │ │ ├── Index.cshtml # 世界時鐘主頁
│ │ │ └── _TimeZoneCard.cshtml # 時區卡片部分檢視
│ │ ├── Pomodoro/
│ │ │ └── Index.cshtml # 番茄鐘主頁
│ │ ├── Globe/
│ │ │ └── Index.cshtml # 地球儀主頁
│ │ ├── Memorandum/ # ⭐ 新增
│ │ │ ├── Index.cshtml # 備忘錄列表頁
│ │ │ ├── Create.cshtml # 新增備忘錄頁
│ │ │ └── Edit.cshtml # 編輯備忘錄頁
│ │ └── Shared/
│ │ ├── _Layout.cshtml # 共用佈局
│ │ └── Error.cshtml # 錯誤頁面
│ ├── wwwroot/ # 靜態檔案
│ │ ├── css/
│ │ │ ├── site.css # 主要樣式表 (電子鐘)
│ │ │ ├── worldclock.css # 世界時鐘樣式
│ │ │ ├── pomodoro.css # 番茄鐘樣式
│ │ │ ├── globe.css # 地球儀樣式
│ │ │ └── memorandum.css # 備忘錄樣式 ⭐ 新增
│ │ ├── js/
│ │ │ ├── site.js # 電子鐘邏輯
│ │ │ ├── worldclock.js # 世界時鐘邏輯
│ │ │ ├── pomodoro.js # 番茄鐘邏輯
│ │ │ ├── globe.js # 地球儀核心邏輯
│ │ │ ├── globe-controls.js # 地球儀控制邏輯
│ │ │ ├── globe-data-handler.js # 地球儀資料處理
│ │ │ └── memorandum.js # 備忘錄邏輯 ⭐ 新增
│ │ └── lib/ # 第三方函式庫
│ ├── Data/
│ │ ├── pomodoro-data.json # 番茄鐘資料儲存
│ │ ├── globe-data.json # 地球儀資料儲存
│ │ └── memorandums.json # 備忘錄資料儲存 ⭐ 新增
│ ├── Program.cs # 應用程式進入點
│ ├── appsettings.json # 應用程式配置
│ └── DemoMVC.csproj # 專案檔案
├── .github/
│ ├── instructions/
│ │ └── csharp.instructions.md # C# 開發指南
│ ├── prompts/
│ │ ├── index.prompt.md # 電子鐘功能規格書
│ │ ├── PomodoroTechnique.prompt.md # 番茄鐘功能規格書
│ │ └── globe.prompt.md # 地球儀功能規格書 ⭐
│ └── Summarize/
│ └── PomodoroTechnique-Summary.md # 番茄鐘技術總結
├── GLOBE_FIX.md # 地球儀修復說明 ⭐
└── DemoMVC.sln # 解決方案檔案
| 技術 | 版本 | 用途 |
|---|---|---|
| .NET | 8.0 | 執行環境 |
| ASP.NET Core MVC | 8.0 | Web 框架 |
| C# | 12.0 | 程式語言 |
| 技術 | 版本 | 用途 |
|---|---|---|
| HTML5 | - | 結構標記 |
| CSS3 | - | 樣式和動畫 |
| JavaScript | ES6+ | 互動邏輯 |
| Three.js | r128 | 3D 圖形渲染 ⭐ |
| Bootstrap | 5.x | UI 框架 |
JavaScript 類別設計
class DigitalClock {
// 核心功能
- 時間格式化 (formatTime)
- 顏色循環 (updateColor)
- 計時器管理 (startClock/stopClock)
- 效能優化 (destroy)
}CSS 特效技術
- 漸層動畫:
linear-gradient配合@keyframes - 文字特效:
background-clip: text和text-shadow - 響應式:
clamp()函式和 Media Queries - 硬體加速:
transform3d和will-change - 無障礙: 高對比度和減少動畫支援
後端架構
// 資料模型
PomodoroTask // 任務管理
PomodoroSession // 工作階段記錄
PomodoroSettings // 使用者設定
PomodoroStatistics // 統計資訊
// 服務層
IPomodoroDataService // 介面定義
PomodoroDataService // JSON 資料存取實作
// 控制器
PomodoroController // RESTful API 端點前端架構
// 全域狀態管理
PomodoroApp = {
timer: { /* 計時器狀態 */ },
settings: { /* 使用者設定 */ },
tasks: [ /* 任務清單 */ ],
stats: { /* 統計資訊 */ }
}
// 核心功能
- startTimer / pauseTimer / resetTimer
- createTask / updateTask / deleteTask
- playSound (Web Audio API)
- updateTimerDisplay (SVG 進度環)技術特點
- 執行緒安全: 使用
SemaphoreSlim實作檔案鎖定 - 圓形進度環: SVG +
stroke-dasharray實作 - 玻璃擬態:
backdrop-filter: blur()視覺效果 - 智慧狀態管理: 自動追蹤任務進度
- 音效系統: Web Audio API 動態生成音效
後端架構
// 資料模型
LocationData // 地點資料 (經緯度、類型、描述)
GlobeSettings // 全域設定 (旋轉速度、縮放範圍)
GlobeLayer // 圖層管理 (城市、地標、自然奇觀)
// 服務層
IGlobeDataService // 介面定義
GlobeDataService // JSON 資料存取實作
// 控制器
GlobeController // RESTful API 端點 (8個端點)前端架構
// 核心模組 (globe.js)
- Scene / Camera / Renderer 初始化
- 地球建立 (createGlobe)
- 地球貼圖載入 (NASA Blue Marble)
- 經緯線網格
- 雙重顯示策略 (立即顯示 + 非同步貼圖)
- 光源系統 (createLights)
- 環境光 (AmbientLight)
- 方向光 (DirectionalLight)
- 點光源 (PointLight)
- 標記系統 (createMarkers)
- 互動系統 (setupInteraction)
- 拖曳旋轉
- 滾輪縮放
- 慣性滑動
- 動畫循環 (animate)
// 控制模組 (globe-controls.js)
- 搜尋功能
- 圖層切換
- 快速導航
- 縮放控制
- 設定面板
// 資料模組 (globe-data-handler.js)
- API 呼叫封裝
- 資料快取
- 錯誤處理技術特點
- WebGL 渲染: Three.js PerspectiveCamera (FOV 45°)
- 球體幾何: SphereGeometry (半徑 100, 64x64 段數)
- 材質系統:
- MeshPhongMaterial (支援光照)
- 貼圖映射 (TextureLoader)
- 雙重顯示策略 (純色 → 貼圖)
- 經緯線網格: 半透明 wireframe overlay
- 座標轉換: 經緯度 → 3D 笛卡爾座標
- 相機控制:
- 拖曳旋轉 (mousemove)
- 滾輪縮放 (wheel event)
- 雙擊聚焦 (dblclick)
- 平滑插值 (lerp)
- 效能優化:
- requestAnimationFrame 動畫循環
- 材質快取
- 事件節流
- 智慧更新 (needsUpdate flag)
-
樣式調整
/* 編輯 wwwroot/css/site.css */ .digital-clock { /* 自訂樣式 */ }
-
邏輯調整
// 編輯 wwwroot/js/site.js class DigitalClock { // 自訂邏輯 }
-
後端 API 擴充
// 編輯 Controllers/PomodoroController.cs [HttpPost] public async Task<IActionResult> YourNewEndpoint() { // 新增 API 端點 }
-
前端功能擴充
// 編輯 wwwroot/js/pomodoro.js PomodoroApp.yourNewFeature = function() { // 新增功能邏輯 }
-
UI 客製化
/* 編輯 wwwroot/css/pomodoro.css */ :root { --gradient-work: linear-gradient(/* 自訂漸層 */); }
# 開發建置
dotnet build
# 發佈建置
dotnet publish -c Release
# 執行測試 (如有)
dotnet test
# 清理建置
dotnet clean# 建置發佈版本
dotnet publish -c Release -o ./publish
# 執行發佈版本
cd publish
dotnet DemoMVC.dll注意: 專案使用 .NET 8.0 內建容器支援
# 建立容器映像
dotnet publish --os linux --arch x64 -p:PublishProfile=DefaultContainer
# 執行容器
docker run -p 8080:8080 demomvc- Azure App Service: 支援直接部署
- Azure Container Apps: 支援容器部署
- IIS: 支援 Windows Server 部署
| 瀏覽器 | 最低版本 | 支援狀態 |
|---|---|---|
| Chrome | 90+ | ✅ 完全支援 |
| Firefox | 88+ | ✅ 完全支援 |
| Safari | 14+ | ✅ 完全支援 |
| Edge | 90+ | ✅ 完全支援 |
| IE | - | ❌ 不支援 |
- 首次載入: < 1 秒
- 記憶體使用: < 30MB
- CPU 使用率: < 2%
- 動畫流暢度: 60 FPS
- 頁面載入: < 2 秒
- 記憶體使用: < 50MB
- 計時器精確度: ±100ms
- 音效延遲: < 50ms
- API 回應時間: < 200ms
- 頁面載入: < 3 秒
- WebGL 初始化: < 500ms
- 地球貼圖載入: 1-3 秒 (2048x1024 解析度)
- 記憶體使用: < 80MB
- 渲染效能: 60 FPS (桌面) / 30+ FPS (行動裝置)
- 互動延遲: < 16ms
- API 回應時間: < 150ms
- 頁面載入: < 2 秒
- 記憶體使用: < 45MB
- 搜尋回應時間: < 250ms (含 Debounce)
- API 回應時間: < 150ms
- Markdown 渲染: < 50ms
- 動畫流暢度: 60 FPS
- ✅ ARIA 標籤支援
- ✅ 鍵盤導航
- ✅ 螢幕閱讀器相容
- ✅ 高對比度模式
- ✅ 減少動畫選項
- ✅ 語義化 HTML
- ✅ 大字體支援
- ✅ 色盲友善設計
- 番茄鐘技術總結 - 完整的技術實作說明
- 系統架構設計
- 後端 API 實作
- 前端 UI/UX 設計
- 核心邏輯說明
- 效能優化策略
- 已知限制與未來改進
- UI/UX 增強技術總結
- 問題分析與解決方案
- 樂觀更新機制實作
- 智慧按鈕切換邏輯
- 視覺效果增強
- 使用者體驗改善
- 地球儀修復說明
- 問題診斷與分析
- 地球貼圖載入機制
- 雙重顯示策略
- 經緯線網格實作
- 故障排除指南
- 備忘錄技術總結 ⭐ 新增
- 完整系統架構
- 後端服務層設計
- 前端模組化架構
- 資料流程說明
- 效能優化策略
- 安全性考量
彩虹漸層與霓虹發光特效
華麗科技感介面設計
WebGL 渲染的真實感地球儀，支援拖曳旋轉和地點標記
Markdown 支援與標籤管理的完整筆記系統
此專案旨在展示：
- ASP.NET Core MVC 最佳實務 - 遵循 MVC 架構模式，清晰的職責分離
- 現代化前端技術 - HTML5、CSS3、JavaScript ES6+ 的實際應用
- 3D 圖形技術 - Three.js + WebGL 實作互動式 3D 視覺化 ⭐
- 響應式設計 - 適應各種裝置的使用體驗
- 效能優化 - 智慧資源管理與高效能運算
- 完整功能實作 - 從需求分析到實作完成的完整流程
- 檔案並行存取 - 使用
SemaphoreSlim實作執行緒安全的檔案鎖定 - 即時 UI 更新 - 使用 JavaScript 定時器與 DOM 操作優化
- 跨瀏覽器相容 - 漸進增強與 polyfill 策略
- 狀態管理 - 前端狀態與後端資料的同步機制
- 使用者體驗 - 流暢的動畫效果與即時回饋
-
樂觀更新模式（Optimistic Update）
- 在等待 API 回應前先更新 UI
- 提供零感知延遲的使用者體驗
- 確保最終資料一致性
-
狀態驅動 UI 架構
- 所有 UI 渲染完全基於應用程式狀態
- 避免狀態不同步問題
- 易於除錯和維護
-
智慧按鈕切換邏輯
- 根據計時器和任務狀態動態渲染按鈕
- 一鍵操作，減少使用者認知負擔
- 即時視覺回饋
-
CSS 硬體加速動畫
- 使用 GPU 加速的 CSS 屬性
- 60 FPS 流暢動畫
- 低 CPU 使用率
-
WebGL 3D 渲染技術 ⭐ 新增
- Three.js 場景管理
- 高效能 3D 物件渲染
- 紋理載入與材質系統
- 互動式相機控制
-
座標轉換演算法 ⭐ 新增
- 經緯度 → 3D 笛卡爾座標
- 球面幾何計算
- 精確的地點定位
-
資料視覺化 ⭐ 新增
- 地理資訊視覺化
- 即時互動回饋
- 多圖層管理系統
歡迎提交 Issue 和 Pull Request！
- Fork 專案
- 建立功能分支 (
git checkout -b feature/AmazingFeature) - 提交變更 (
git commit -m 'Add some AmazingFeature') - 推送分支 (
git push origin feature/AmazingFeature) - 開啟 Pull Request
- 遵循現有的程式碼風格
- 為新功能撰寫文件
- 確保所有測試通過
- 更新 README.md 說明新功能
- ✨ 新增匿名留言板功能
- ✨ 完全匿名設計，使用 Cookie 識別使用者
- ✨ 24 小時限時留言，自動過期清理
- ✨ 支援回覆、按讚、編輯、刪除功能
- ✨ 智慧搜尋與排序 (最新/熱門/最舊)
- ✨ 內容過濾系統，自動過濾不當字詞
- ✨ Markdown 支援 (粗體、斜體、刪除線)
- ✨ RESTful API (8 個端點)
- ✨ SemaphoreSlim 檔案鎖定，防止並行寫入衝突
- ✨ LocalStorage 快取，按讚狀態持久化
- 🎨 現代化卡片設計，支援深色模式
- 🎨 響應式介面，完美適配各裝置
- 🎨 動畫效果 (按讚愛心、淡入動畫、載入動畫)
- 🎨 智慧時間顯示 (相對時間格式)
- 📚 新增留言板功能規格書
- 📚 新增留言板技術總結文件
- ⚡ 分頁載入 (每頁 10 筆)，提升效能
- ⚡ 防抖搜尋 (300ms)，減少 API 呼叫
- ⚡ 初次載入時間 < 300ms
- ✨ 新增備忘錄系統功能
- ✨ 整合 Marked.js 進行 Markdown 解析與渲染
- ✨ 實作即時 Markdown 預覽編輯器
- ✨ 實作標籤管理系統 (新增、刪除、篩選)
- ✨ 實作置頂功能 (最多 5 個)
- ✨ 實作軟刪除機制
- ✨ 實作搜尋、篩選、分頁功能
- ✨ 實作 11 色卡片配色方案
- ✨ RESTful API (11 個端點)
- ✨ 60 秒快取機制，提升效能
- ✨ SemaphoreSlim 執行緒鎖，確保資料一致性
- 🎨 響應式 CSS Grid 設計 (3/2/1 欄位)
- 🎨 卡片翻轉動畫與漸層背景
- 📚 新增備忘錄功能規格書
- 📚 新增備忘錄技術總結文件
- ⚡ 搜尋防抖 (500ms)，減少不必要的 API 呼叫
- ⚡ 初次載入時間 < 500ms
- ✨ 新增 3D 互動地球儀功能
- ✨ 整合 Three.js r128 進行 WebGL 渲染
- ✨ 實作地點標記系統 (10+ 世界地標)
- ✨ 實作搜尋、圖層管理、快速導航
- ✨ 地球貼圖載入 (NASA Blue Marble)
- ✨ 雙重顯示策略 (立即顯示 + 非同步貼圖)
- ✨ 經緯線網格視覺化
- ✨ 拖曳旋轉、滾輪縮放、慣性滑動
- ✨ 多光源系統 (環境光、方向光、點光源)
- ✨ RESTful API (8 個端點)
- 🎨 響應式設計，支援桌面、平板、手機
- 🐛 修正地球儀不顯示問題 (材質顏色與光源優化)
- 📚 新增地球儀功能規格書
- 📚 新增地球儀修復說明文件
- ✨ 新增智慧按鈕切換功能（開始 ↔ 暫停）
- ✨ 實作樂觀更新機制，提升 UI 回應速度
- ✨ 新增視覺效果增強（脈搏動畫、執行圖示）
- 🐛 修正任務點擊開始後不會自動倒數的問題
- 🐛 修正任務狀態不會更新為「進行中」的問題
- 🎨 改善使用者體驗，操作步驟減少 50%
- 📚 新增 UI/UX 增強技術總結文件
- 📚 更新規格書至 v2.0
- ✨ 新增番茄鐘工作法功能
- ✨ 實作任務管理系統
- ✨ 新增統計分析功能
- ✨ 實作 JSON 資料持久化
- 🎨 華麗科技感 UI 設計
- 📱 完整的響應式支援
- 🔊 Web Audio API 音效系統
- 📚 完整的技術文件
- 🎉 初始版本發布
- ⏰ 數位電子鐘功能
- 🌍 世界時鐘功能
- 🎨 彩虹漸層視覺效果
- 📱 響應式設計
此專案採用 MIT 授權。
HyperLee - GitHub
感謝以下資源與技術：
- ASP.NET Core - 強大的 Web 框架
- Three.js - 強大的 3D 圖形函式庫
- Marked.js - 快速且輕量的 Markdown 解析器 ⭐
- Bootstrap - UI 元件庫
- Font Awesome - 圖示集
- MDN Web Docs - 前端技術文件
- Pomodoro Technique - 番茄工作法
- NASA Blue Marble - 地球貼圖資源
如有任何問題或建議，歡迎透過以下方式聯絡：
- GitHub Issues: 提交問題
- Email: your.email@example.com
⭐ 如果這個專案對您有幫助，請給個星號支持！
🍅 開始使用番茄鐘，提升您的工作效率！
🌍 探索 3D 地球儀，發現世界之美！
📝 使用備忘錄系統，記錄您的靈感與想法！