From 5d7c36dcb22550ddf3a19c8a8edda4f862829d9c Mon Sep 17 00:00:00 2001 From: siage Date: Mon, 14 Apr 2025 18:27:42 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20.gitignore=20=E4=BB=A5?= =?UTF-8?q?=E5=8C=85=E5=90=AB=E5=AD=90=E7=9B=AE=E9=8C=84=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=20JSON=20=E6=AA=94=E6=A1=88=EF=BC=8C=E4=B8=A6=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=20README.md=20=E4=B8=AD=E7=9A=84=E4=BB=BB=E5=8B=99?= =?UTF-8?q?=E8=A6=8F=E5=8A=83=E8=88=87=E5=9F=B7=E8=A1=8C=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E6=8F=8F=E8=BF=B0=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B6?= =?UTF-8?q?=E7=90=86=E8=A7=A3=E3=80=82=E6=96=B0=E5=A2=9E=E7=B6=B2=E7=AB=99?= =?UTF-8?q?=E7=9B=B8=E9=97=9C=E8=B3=87=E6=BA=90=EF=BC=8C=E5=8C=85=E6=8B=AC?= =?UTF-8?q?=20HTML=E3=80=81CSS=E3=80=81JavaScript=20=E6=AA=94=E6=A1=88?= =?UTF-8?q?=E5=8F=8A=E5=A4=9A=E5=80=8B=20SVG=20=E5=9C=96=E7=A4=BA=EF=BC=8C?= =?UTF-8?q?=E5=A2=9E=E5=BC=B7=E7=B6=B2=E7=AB=99=E5=8A=9F=E8=83=BD=E8=88=87?= =?UTF-8?q?=E8=A6=96=E8=A6=BA=E6=95=88=E6=9E=9C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + README.md | 10 +- docs/web/assets/icons/favicon.svg | 5 + docs/web/assets/icons/feature-complexity.svg | 5 + .../assets/icons/feature-decomposition.svg | 7 + docs/web/assets/icons/feature-memory.svg | 6 + docs/web/assets/icons/feature-planning.svg | 7 + docs/web/assets/icons/feature-tracking.svg | 5 + .../web/assets/icons/feature-verification.svg | 5 + docs/web/assets/icons/knowledge-solution.svg | 11 + docs/web/assets/icons/logo.svg | 5 + docs/web/assets/icons/memory-loss.svg | 11 + docs/web/assets/icons/memory-solution.svg | 12 + docs/web/assets/icons/repeat-work.svg | 12 + docs/web/assets/icons/structure-chaos.svg | 13 + docs/web/assets/icons/structure-solution.svg | 12 + docs/web/assets/icons/workflow-analyze.svg | 6 + docs/web/assets/icons/workflow-complete.svg | 8 + docs/web/assets/icons/workflow-execute.svg | 5 + docs/web/assets/icons/workflow-plan.svg | 5 + docs/web/assets/icons/workflow-reflect.svg | 5 + docs/web/assets/icons/workflow-split.svg | 10 + docs/web/assets/icons/workflow-verify.svg | 6 + docs/web/assets/images/workflow-simple.svg | 54 + docs/web/css/styles.css | 1026 ++++++++++ docs/web/index.html | 1505 +++++++++++++++ docs/web/js/main.js | 1654 +++++++++++++++++ docs/zh/README.md | 10 +- 28 files changed, 4417 insertions(+), 4 deletions(-) create mode 100644 docs/web/assets/icons/favicon.svg create mode 100644 docs/web/assets/icons/feature-complexity.svg create mode 100644 docs/web/assets/icons/feature-decomposition.svg create mode 100644 docs/web/assets/icons/feature-memory.svg create mode 100644 docs/web/assets/icons/feature-planning.svg create mode 100644 docs/web/assets/icons/feature-tracking.svg create mode 100644 docs/web/assets/icons/feature-verification.svg create mode 100644 docs/web/assets/icons/knowledge-solution.svg create mode 100644 docs/web/assets/icons/logo.svg create mode 100644 docs/web/assets/icons/memory-loss.svg create mode 100644 docs/web/assets/icons/memory-solution.svg create mode 100644 docs/web/assets/icons/repeat-work.svg create mode 100644 docs/web/assets/icons/structure-chaos.svg create mode 100644 docs/web/assets/icons/structure-solution.svg create mode 100644 docs/web/assets/icons/workflow-analyze.svg create mode 100644 docs/web/assets/icons/workflow-complete.svg create mode 100644 docs/web/assets/icons/workflow-execute.svg create mode 100644 docs/web/assets/icons/workflow-plan.svg create mode 100644 docs/web/assets/icons/workflow-reflect.svg create mode 100644 docs/web/assets/icons/workflow-split.svg create mode 100644 docs/web/assets/icons/workflow-verify.svg create mode 100644 docs/web/assets/images/workflow-simple.svg create mode 100644 docs/web/css/styles.css create mode 100644 docs/web/index.html create mode 100644 docs/web/js/main.js diff --git a/.gitignore b/.gitignore index edcd867..e90cfa6 100644 --- a/.gitignore +++ b/.gitignore @@ -51,6 +51,7 @@ coverage/ # 資料檔案 *.sqlite data/*.json +data/*/*.json !data/example.json # Cursor AI 生成的暫存檔案 diff --git a/README.md b/README.md index ca3eb76..8400201 100644 --- a/README.md +++ b/README.md @@ -148,13 +148,19 @@ You can enable Cursor Settings => Features => Custom modes, and configure the fo #### TaskPlanner Mode ``` -You are a professional task planning expert who must interact with users, analyze their requirements, and collect project-related information, ultimately using mcp_shrimp_task_manager_plan_task to establish tasks. When tasks are established, you must summarize and inform users to use the Task Execution Model for task execution. You must focus on task planning and are prohibited from using mcp_shrimp_task_manager_execute_task to execute tasks. Serious warning: you are a task planning expert, you cannot directly modify code, you can only plan tasks, and you cannot directly modify code, you can only plan tasks. +You are a professional task planning expert. You must interact with users, analyze their needs, and collect project-related information. Finally, you must use "plan_task" to create tasks. When the task is created, you must summarize it and inform the user to use the "TaskExecutor" mode to execute the task. +You must focus on task planning. Do not use "execute_task" to execute tasks. +Serious warning: you are a task planning expert, you cannot modify the program code directly, you can only plan tasks, and you cannot modify the program code directly, you can only plan tasks. ``` #### TaskExecutor Mode ``` -You are a professional task execution expert. When users specify task execution, use mcp_shrimp_task_manager_execute_task for task execution. Without specified tasks, use mcp_shrimp_task_manager_list_tasks to find unexecuted tasks and execute them. After completion, you must summarize and inform users. You can only execute one task at a time, and unless explicitly instructed by users, you are prohibited from proceeding to the next task after a single task is completed. If users request "continuous mode," execute all tasks in sequence. +You are a professional task execution expert. When a user specifies a task to execute, use "execute_task" to execute the task. +If no task is specified, use "list_tasks" to find unexecuted tasks and execute them. +When the execution is completed, a summary must be given to inform the user of the conclusion. +You can only perform one task at a time, and when a task is completed, you are prohibited from performing the next task unless the user explicitly tells you to. +If the user requests "continuous mode", all tasks will be executed in sequence. ``` > 💡 Choose the appropriate mode based on your needs: diff --git a/docs/web/assets/icons/favicon.svg b/docs/web/assets/icons/favicon.svg new file mode 100644 index 0000000..258f8a0 --- /dev/null +++ b/docs/web/assets/icons/favicon.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/feature-complexity.svg b/docs/web/assets/icons/feature-complexity.svg new file mode 100644 index 0000000..218d7f3 --- /dev/null +++ b/docs/web/assets/icons/feature-complexity.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/feature-decomposition.svg b/docs/web/assets/icons/feature-decomposition.svg new file mode 100644 index 0000000..419bd73 --- /dev/null +++ b/docs/web/assets/icons/feature-decomposition.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/feature-memory.svg b/docs/web/assets/icons/feature-memory.svg new file mode 100644 index 0000000..be3228d --- /dev/null +++ b/docs/web/assets/icons/feature-memory.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/feature-planning.svg b/docs/web/assets/icons/feature-planning.svg new file mode 100644 index 0000000..b58f789 --- /dev/null +++ b/docs/web/assets/icons/feature-planning.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/feature-tracking.svg b/docs/web/assets/icons/feature-tracking.svg new file mode 100644 index 0000000..d23591c --- /dev/null +++ b/docs/web/assets/icons/feature-tracking.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/feature-verification.svg b/docs/web/assets/icons/feature-verification.svg new file mode 100644 index 0000000..8eeecf7 --- /dev/null +++ b/docs/web/assets/icons/feature-verification.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/knowledge-solution.svg b/docs/web/assets/icons/knowledge-solution.svg new file mode 100644 index 0000000..1c401ea --- /dev/null +++ b/docs/web/assets/icons/knowledge-solution.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/logo.svg b/docs/web/assets/icons/logo.svg new file mode 100644 index 0000000..0768355 --- /dev/null +++ b/docs/web/assets/icons/logo.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/memory-loss.svg b/docs/web/assets/icons/memory-loss.svg new file mode 100644 index 0000000..66d6420 --- /dev/null +++ b/docs/web/assets/icons/memory-loss.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/memory-solution.svg b/docs/web/assets/icons/memory-solution.svg new file mode 100644 index 0000000..fa481df --- /dev/null +++ b/docs/web/assets/icons/memory-solution.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/repeat-work.svg b/docs/web/assets/icons/repeat-work.svg new file mode 100644 index 0000000..f9431f4 --- /dev/null +++ b/docs/web/assets/icons/repeat-work.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/structure-chaos.svg b/docs/web/assets/icons/structure-chaos.svg new file mode 100644 index 0000000..a48e8c5 --- /dev/null +++ b/docs/web/assets/icons/structure-chaos.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/structure-solution.svg b/docs/web/assets/icons/structure-solution.svg new file mode 100644 index 0000000..e7a9d48 --- /dev/null +++ b/docs/web/assets/icons/structure-solution.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/workflow-analyze.svg b/docs/web/assets/icons/workflow-analyze.svg new file mode 100644 index 0000000..4b2ac7e --- /dev/null +++ b/docs/web/assets/icons/workflow-analyze.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/workflow-complete.svg b/docs/web/assets/icons/workflow-complete.svg new file mode 100644 index 0000000..a4eef89 --- /dev/null +++ b/docs/web/assets/icons/workflow-complete.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/workflow-execute.svg b/docs/web/assets/icons/workflow-execute.svg new file mode 100644 index 0000000..090c85d --- /dev/null +++ b/docs/web/assets/icons/workflow-execute.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/workflow-plan.svg b/docs/web/assets/icons/workflow-plan.svg new file mode 100644 index 0000000..50b9d47 --- /dev/null +++ b/docs/web/assets/icons/workflow-plan.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/workflow-reflect.svg b/docs/web/assets/icons/workflow-reflect.svg new file mode 100644 index 0000000..b8d6a64 --- /dev/null +++ b/docs/web/assets/icons/workflow-reflect.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/workflow-split.svg b/docs/web/assets/icons/workflow-split.svg new file mode 100644 index 0000000..950d018 --- /dev/null +++ b/docs/web/assets/icons/workflow-split.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/docs/web/assets/icons/workflow-verify.svg b/docs/web/assets/icons/workflow-verify.svg new file mode 100644 index 0000000..6563061 --- /dev/null +++ b/docs/web/assets/icons/workflow-verify.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/docs/web/assets/images/workflow-simple.svg b/docs/web/assets/images/workflow-simple.svg new file mode 100644 index 0000000..d7aacad --- /dev/null +++ b/docs/web/assets/images/workflow-simple.svg @@ -0,0 +1,54 @@ + + + + 任務規劃 + + + + + + + + 深入分析 + + + + + + + + 方案反思 + + + + + + + + 任務分解 + + + + + + + + 執行完成 + + + + + + + + + + + + + + + + + 智能任務管理工作流程 + \ No newline at end of file diff --git a/docs/web/css/styles.css b/docs/web/css/styles.css new file mode 100644 index 0000000..f382a4e --- /dev/null +++ b/docs/web/css/styles.css @@ -0,0 +1,1026 @@ +/* MCP Shrimp Task Manager 網站樣式 */ + +/* 全局變量 */ +:root { + --primary-color: #3b82f6; + --primary-dark: #2563eb; + --secondary-color: #4f46e5; + --text-color: #1f2937; + --text-light: #f9fafb; + --gray-light: #f3f4f6; + --gray-medium: #9ca3af; + --gray-dark: #374151; + --transition-speed: 0.3s; + --pain-red: #ef4444; + --pain-orange: #f97316; + --pain-blue: #3b82f6; + --solution-green: #10b981; + --solution-yellow: #ca8a04; + --solution-purple: #8b5cf6; +} + +/* 全局樣式 */ +html { + scroll-behavior: smooth; + overflow-x: hidden; /* 防止水平溢出 */ +} + +body { + line-height: 1.6; + overflow-x: hidden; /* 防止水平溢出 */ +} + +/* 自定義動畫 */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes floatAnimation { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } +} + +@keyframes pulseArrow { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(6px); + } + 100% { + transform: translateY(0); + } +} + +@keyframes rotateIcon { + 0% { + transform: rotate(0deg); + } + 50% { + transform: rotate(10deg); + } + 100% { + transform: rotate(0deg); + } +} + +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +/* 導航欄樣式 */ +header nav img { + transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +header nav img:hover { + transform: scale(1.2) rotate(10deg); +} + +header nav a { + position: relative; + transition: all 0.3s ease; +} + +header nav a::after { + content: ""; + position: absolute; + width: 0; + height: 2px; + bottom: -3px; + left: 0; + background-color: var(--primary-color); + transition: width 0.3s; +} + +header nav a:hover::after { + width: 100%; +} + +#mobile-menu { + transition: transform 0.4s ease-in-out, opacity 0.3s ease; + transform-origin: top; + opacity: 0; + max-height: 0; + overflow: hidden; +} + +#mobile-menu.visible { + opacity: 1; + max-height: 500px; +} + +/* 英雄區樣式 */ +#hero { + position: relative; + overflow: hidden; +} + +#hero::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + opacity: 0.4; + pointer-events: none; +} + +#hero .btn-primary { + animation: pulse 2.5s infinite; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); + } + 70% { + box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); + } +} + +#hero img { + filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3)); + animation: floatAnimation 6s ease-in-out infinite; + transition: all 0.5s ease; +} + +#hero img:hover { + transform: scale(1.05) translateY(-5px); + filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.5)); +} + +#hero .absolute { + animation: floatAnimation 8s ease-in-out infinite; + animation-delay: calc(var(--animation-order) * 0.7s); + opacity: 0; + animation-fill-mode: forwards; +} + +/* 痛點與解決方案區樣式 */ +#pain-points .shadow-lg { + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +#pain-points .shadow-lg:hover { + transform: translateY(-15px); + box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.15), + 0 10px 15px -5px rgba(0, 0, 0, 0.08); +} + +#pain-points .shadow-lg:hover img { + transform: scale(1.1) rotate(5deg); +} + +#pain-points img { + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +#pain-points .h-8.w-8.text-green-500 { + animation: pulseArrow 2s ease-in-out infinite; +} + +#pain-points .rounded-lg.overflow-hidden:nth-child(1) { + border-bottom: 3px solid var(--pain-red); +} + +#pain-points .rounded-lg.overflow-hidden:nth-child(2) { + border-bottom: 3px solid var(--pain-orange); +} + +#pain-points .rounded-lg.overflow-hidden:nth-child(3) { + border-bottom: 3px solid var(--pain-blue); +} + +#pain-points .bg-green-50, +#pain-points .bg-yellow-50, +#pain-points .bg-purple-50 { + position: relative; + overflow: hidden; +} + +#pain-points .bg-green-50::before, +#pain-points .bg-yellow-50::before, +#pain-points .bg-purple-50::before { + content: ""; + position: absolute; + top: -20px; + right: -20px; + width: 60px; + height: 60px; + border-radius: 50%; + opacity: 0.1; +} + +#pain-points .bg-green-50::before { + background-color: var(--solution-green); +} + +#pain-points .bg-yellow-50::before { + background-color: var(--solution-yellow); +} + +#pain-points .bg-purple-50::before { + background-color: var(--solution-purple); +} + +/* 按鈕樣式 */ +.btn { + display: inline-block; + padding: 0.75rem 1.5rem; + border-radius: 0.375rem; + font-weight: 600; + text-align: center; + transition: all var(--transition-speed); + position: relative; + overflow: hidden; +} + +.btn::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: left 0.7s; +} + +.btn:hover::before { + left: 100%; +} + +.btn-primary { + background-color: var(--primary-color); + color: white; +} + +.btn-primary:hover { + background-color: var(--primary-dark); + transform: translateY(-3px); + box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15); +} + +.btn-secondary { + background-color: white; + color: var(--primary-color); + border: 2px solid var(--primary-color); +} + +.btn-secondary:hover { + background-color: var(--gray-light); + transform: translateY(-3px); + box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1); +} + +/* 卡片樣式 */ +.card { + background-color: white; + border-radius: 0.5rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.card:hover { + transform: translateY(-8px); + box-shadow: 0 15px 20px rgba(0, 0, 0, 0.12); +} + +/* 代碼區塊樣式增強 */ +pre[class*="language-"] { + border-radius: 0.5rem; + margin: 1.5rem 0; + position: relative; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +pre[class*="language-"]:hover { + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); +} + +/* 響應式調整 - 手機端 (<768px) */ +@media (max-width: 767px) { + h1 { + font-size: 1.875rem; + } + + h2 { + font-size: 1.5rem; + } + + h3 { + font-size: 1.25rem; + } + + .section-padding { + padding: 2.5rem 0; + } + + #hero .btn { + width: 100%; + margin-bottom: 0.75rem; + } + + #hero img { + max-width: 90%; + margin: 0 auto; + } + + .card-container { + grid-template-columns: 1fr; + } + + #features .rounded-lg { + margin-bottom: 1.5rem; + } + + .mockup-code { + font-size: 0.8rem; + padding: 1rem; + } + + .copy-cmd-btn { + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + } +} + +/* 平板端 (768px-1024px) */ +@media (min-width: 768px) and (max-width: 1023px) { + h1 { + font-size: 2.25rem; + } + + h2 { + font-size: 1.75rem; + } + + .section-padding { + padding: 3rem 0; + } + + #features .grid { + grid-template-columns: repeat(2, 1fr); + } + + .workflow-step { + margin-bottom: 1.5rem; + } +} + +/* 低性能設備動畫降級 */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* 輔助類 */ +.text-gradient { + background: linear-gradient( + 90deg, + var(--primary-color), + var(--secondary-color) + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.section-title { + position: relative; + display: inline-block; + margin-bottom: 2rem; +} + +.section-title::after { + content: ""; + position: absolute; + bottom: -0.5rem; + left: 0; + width: 50%; + height: 3px; + background: linear-gradient( + 90deg, + var(--primary-color), + var(--secondary-color) + ); +} + +/* GitHub圖標 */ +header nav a[href*="github"] svg { + transition: transform 0.3s ease; +} + +header nav a[href*="github"]:hover svg { + transform: rotate(10deg); +} + +/* 自定義滾動條 */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(--gray-light); +} + +::-webkit-scrollbar-thumb { + background: var(--gray-medium); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--gray-dark); +} + +/* 功能卡片樣式 */ +#features .rounded-lg { + position: relative; + overflow: hidden; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + z-index: 1; +} + +#features .rounded-lg::before { + content: ""; + position: absolute; + top: -100%; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient( + rgba(255, 255, 255, 0.1), + rgba(255, 255, 255, 0.2) + ); + z-index: -1; + transition: all 0.5s ease; +} + +#features .rounded-lg:hover::before { + top: 0; +} + +#features .rounded-lg img { + transition: all 0.5s ease; + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); +} + +#features .rounded-lg:hover img { + filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2)); +} + +#features .rounded-lg h3 { + transition: all 0.3s ease; + position: relative; +} + +#features .rounded-lg h3::after { + content: ""; + position: absolute; + bottom: -8px; + left: 0; + width: 0; + height: 2px; + background-color: currentColor; + transition: width 0.3s ease; +} + +#features .rounded-lg:hover h3::after { + width: 100%; +} + +/* 根據顏色設置不同顏色光暈 */ +#features .bg-indigo-50 { + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.3s ease; +} + +#features .rounded-lg:hover .bg-indigo-50 { + box-shadow: 0 0 15px rgba(79, 70, 229, 0.2); +} + +#features .bg-green-50 { + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.3s ease; +} + +#features .rounded-lg:hover .bg-green-50 { + box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); +} + +#features .bg-blue-50 { + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.3s ease; +} + +#features .rounded-lg:hover .bg-blue-50 { + box-shadow: 0 0 15px rgba(59, 130, 246, 0.2); +} + +#features .bg-amber-50 { + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.3s ease; +} + +#features .rounded-lg:hover .bg-amber-50 { + box-shadow: 0 0 15px rgba(217, 119, 6, 0.2); +} + +#features .bg-purple-50 { + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.3s ease; +} + +#features .rounded-lg:hover .bg-purple-50 { + box-shadow: 0 0 15px rgba(139, 92, 246, 0.2); +} + +#features .bg-red-50 { + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.3s ease; +} + +#features .rounded-lg:hover .bg-red-50 { + box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); +} + +/* 工作流程區域樣式 */ +#workflow { + position: relative; + overflow: hidden; +} + +#workflow::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + opacity: 0.2; + pointer-events: none; +} + +/* 桌面版時間軸樣式 */ +.workflow-step { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + position: relative; + width: 150px; + transition: all 0.3s ease; +} + +.workflow-icon { + width: 64px; + height: 64px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + position: relative; + transition: all 0.3s ease; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + z-index: 1; +} + +.workflow-step:hover .workflow-icon { + transform: scale(1.1); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); +} + +.workflow-step:hover h4 { + transform: translateY(-2px); +} + +/* 移動版時間軸樣式 */ +.workflow-icon-mobile { + width: 48px; + height: 48px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + position: relative; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + flex-shrink: 0; + z-index: 1; + transition: all 0.3s ease; +} + +.workflow-icon-mobile::after { + content: ""; + position: absolute; + top: 48px; + left: 24px; + width: 2px; + height: 0; + background-color: #e2e8f0; + animation: verticalLineGrow 1s forwards; + animation-delay: 0.5s; +} + +@keyframes verticalLineGrow { + from { + height: 0; + } + to { + height: 40px; + } +} + +/* 步驟詳情彈窗樣式 */ +#workflow-detail-modal { + transition: opacity 0.3s ease; +} + +#workflow-detail-modal.active { + opacity: 1; + pointer-events: auto; +} + +.workflow-detail-link { + position: relative; + display: inline-block; + transition: all 0.3s ease; +} + +.workflow-detail-link::after { + content: ""; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 1px; + background-color: currentColor; + transition: width 0.3s ease; +} + +.workflow-detail-link:hover::after { + width: 100%; +} + +/* 安裝與配置區樣式 */ +#installation .install-tab-btn { + transition: all 0.3s ease; + color: var(--gray-dark); +} + +#installation .install-tab-btn.active { + color: var(--primary-color); + border-bottom: 2px solid var(--primary-color); + background-color: var(--gray-light); +} + +#installation .install-tab-btn:hover:not(.active) { + color: var(--primary-dark); + background-color: var(--gray-light); +} + +#installation .install-tab-btn svg { + transition: transform 0.3s ease; +} + +#installation .install-tab-btn:hover svg, +#installation .install-tab-btn.active svg { + transform: scale(1.2); +} + +/* 命令行介面樣式 */ +.mockup-code { + font-family: "Fira Code", monospace; + background-color: #1a202c; /* 深色背景 */ + color: #e2e8f0; /* 亮色文本 */ + border-radius: 0.5rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + padding: 1.5rem; + position: relative; + overflow: hidden; +} + +.mockup-code::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(to right, #ff6b6b, #4ecdc4, #ffbe0b); + opacity: 0.7; +} + +.mockup-code pre { + margin: 0; + padding: 0; + overflow-x: auto; +} + +.mockup-code code { + display: block; + line-height: 1.6; +} + +.copy-cmd-btn { + transition: all 0.3s ease; + opacity: 0.7; +} + +.copy-cmd-btn:hover { + opacity: 1; + transform: translateY(-2px); +} + +/* Cursor IDE 配置選項卡 */ +.cursor-tab-btn { + transition: all 0.3s ease; + background-color: #f3f4f6; +} + +.cursor-tab-btn.active { + background-color: var(--primary-color); + color: white; + border-color: var(--primary-color); +} + +/* 安裝卡片樣式 */ +#installation .grid > div { + transition: all 0.3s ease; + background-size: 200% 200%; + animation: gradientAnimation 15s ease infinite; +} + +@keyframes gradientAnimation { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +#installation .bg-blue-100, +#installation .bg-green-100, +#installation .bg-amber-100 { + transition: all 0.3s ease; +} + +#installation a { + position: relative; + display: inline-block; +} + +#installation a::after { + content: ""; + position: absolute; + width: 0; + height: 2px; + bottom: -2px; + left: 0; + background-color: currentColor; + transition: width 0.3s ease; +} + +#installation a:hover::after { + width: 100%; +} + +@media (max-width: 768px) { + #installation .install-tab-btn { + font-size: 0.75rem; + padding: 0.75rem 0.5rem; + } + + #installation .install-tab-btn svg { + margin-right: 0.25rem; + height: 1rem; + width: 1rem; + } + + .mockup-code { + padding: 1rem; + font-size: 0.75rem; + } + + .copy-cmd-btn { + top: 0.5rem; + right: 0.5rem; + } +} + +/* CTA與資源區樣式 */ +#cta { + position: relative; + overflow: hidden; +} + +#cta::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + opacity: 0.4; + pointer-events: none; +} + +/* CTA按鈕增強 */ +.btn-lg { + padding: 0.875rem 1.75rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.1rem; + transition: all 0.3s ease; +} + +.btn-lg:hover { + transform: translateY(-3px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); +} + +/* 資源卡片樣式 */ +.resource-card { + background-color: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(4px); + border-radius: 0.5rem; + padding: 1.5rem; + transition: all 0.3s ease; +} + +.resource-card:hover { + background-color: rgba(255, 255, 255, 0.15); + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.resource-link { + position: relative; + padding-left: 1rem; +} + +.resource-link::before { + content: "→"; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + opacity: 0; + transition: all 0.3s ease; +} + +.resource-link a { + color: rgba(255, 255, 255, 0.8); + transition: all 0.3s ease; + text-decoration: none; +} + +.resource-link:hover a { + color: white; + padding-left: 0.5rem; +} + +.resource-link:hover::before { + opacity: 1; +} + +/* 使用統計卡片 */ +#cta .text-center { + transition: all 0.3s ease; + overflow: hidden; +} + +#cta .text-center:hover { + transform: translateY(-5px); + background-color: rgba(255, 255, 255, 0.15); +} + +#cta .text-3xl { + position: relative; + display: inline-block; +} + +#cta .text-3xl::after { + content: ""; + position: absolute; + bottom: -5px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 2px; + background-color: white; + transition: width 0.3s ease; +} + +#cta .text-center:hover .text-3xl::after { + width: 80%; +} + +/* 頁腳樣式 */ +footer { + position: relative; + overflow: hidden; +} + +footer .text-gradient { + background: linear-gradient(90deg, #3b82f6, #60a5fa); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.contributor-avatar { + transition: all 0.3s ease; + border: 2px solid transparent; +} + +.contributor-avatar:hover { + transform: translateY(-3px) scale(1.1); + border-color: var(--primary-color); + z-index: 10; +} + +footer h3 { + position: relative; + display: inline-block; +} + +footer h3::after { + content: ""; + position: absolute; + bottom: -5px; + left: 0; + width: 40px; + height: 2px; + background-color: var(--primary-color); +} + +footer ul li { + transition: all 0.2s ease; +} + +footer ul li:hover { + transform: translateX(5px); +} + +@media (max-width: 768px) { + .resource-card { + margin-bottom: 1rem; + } + + #cta .grid { + gap: 1.5rem; + } + + .btn-lg { + width: 100%; + margin-bottom: 0.75rem; + } + + footer .grid { + gap: 2rem; + } +} diff --git a/docs/web/index.html b/docs/web/index.html new file mode 100644 index 0000000..17cd28f --- /dev/null +++ b/docs/web/index.html @@ -0,0 +1,1505 @@ + + + + + + + Shrimp Task Manager - 為AI編程助手提供結構化任務管理的智能系統 + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + +
+ +
+
+
+
+

+ Shrimp Task Manager +

+

+ 為AI編程助手提供結構化任務管理的智能系統 +

+

+ 讓AI助手擁有長期記憶能力，高效管理複雜任務，提供結構化的任務分解和執行追蹤，讓您的編程體驗更加流暢和高效。 +

+
+ 開始使用 + 了解更多 +
+
+
+
+ 智能任務管理工作流程 +
+
+
+ + +
+
+
+
+
+ + +
+
+

痛點與解決方案

+

+ Shrimp Task Manager 專為解決 AI + 編程助手在任務管理中面臨的三大核心痛點而設計。 +

+ +
+ +
+
+ 記憶缺失 +
+
+

記憶缺失

+

+ AI助手缺乏跨對話的任務記憶能力，導致無法追蹤長期任務進度，重複解釋相同需求，浪費時間和資源。 +

+
+
+ + + +
+
+
+ 任務記憶功能 +
+

+ 任務記憶功能 +

+

+ 自動保存執行歷史，提供長期記憶能力，讓AI助手能夠記住之前的任務進度，無縫繼續未完成任務。 +

+
+
+
+ + +
+
+ 結構混亂 +
+
+

結構混亂

+

+ 複雜任務缺乏系統化管理導致效率低下，缺少依賴關係管理，子任務執行混亂，難以追蹤總體進度。 +

+
+
+ + + +
+
+
+ 結構化任務分解 +
+

+ 結構化任務分解 +

+

+ 自動將複雜任務分解為可管理的子任務，建立清晰的依賴關係，提供有序執行路徑，確保高效完成。 +

+
+
+
+ + +
+
+ 重複工作 +
+
+

重複工作

+

+ 無法有效利用過往經驗與解決方案，每次對話都需從零開始，缺乏知識積累和經驗參考系統。 +

+
+
+ + + +
+
+
+ 知識積累和經驗參考 +
+

+ 知識積累與經驗參考 +

+

+ 自動記錄成功解決方案，建立任務知識庫，支持相似任務快速參考，實現經驗積累和知識復用。 +

+
+
+
+
+ +
+ + 探索核心功能 + + + + +
+
+
+ + +
+
+

核心功能

+

+ Shrimp Task Manager + 提供六大核心功能，幫助您高效管理、執行和追蹤複雜任務。 +

+ +
+ +
+
+ 智能任務規劃與分析 +
+
+

+ 智能任務規劃與分析 +

+

+ 通過深入分析需求和約束條件，生成結構化任務計劃。自動評估範圍、風險和優先級，提供理性和全面的實施策略。 +

+
+
+ + +
+
+ 自動任務分解與依賴管理 +
+
+

+ 自動任務分解與依賴管理 +

+

+ 智能將複雜任務分解為可管理的小任務，識別任務間依賴關係，建立優化執行路徑，避免資源衝突與執行瓶頸。 +

+
+
+ + +
+
+ 執行狀態追蹤 +
+
+

+ 執行狀態追蹤 +

+

+ 實時監控每個任務的執行狀態，提供進度視覺化顯示，自動更新依賴項狀態，並在任務完成時提供詳細執行報告。 +

+
+
+ + +
+
+ 任務完整性驗證 +
+
+

+ 任務完整性驗證 +

+

+ 全面檢查任務完成度，確保所有需求與標準都已滿足，提供驗證報告與質量評估，確保產出符合預期要求。 +

+
+
+ + +
+
+ 任務複雜度評估 +
+
+

+ 任務複雜度評估 +

+

+ 基於多維度標準評估任務複雜度，提供資源需求估算，識別高風險組件，幫助合理分配資源與時間。 +

+
+
+ + +
+
+ 任務記憶功能 +
+
+

+ 任務記憶功能 +

+

+ 提供跨會話的任務記憶能力，自動保存執行歷史與上下文，允許隨時恢復任務並繼續執行，無需重複解釋需求。 +

+
+
+
+ +
+ + 了解工作流程 + + + + +
+
+
+ + +
+
+

工作流程

+

+ Shrimp Task Manager + 提供完整的工作流程，從任務規劃到任務完成的每個步驟都經過精心設計。 +

+ + + + + +
+ +
+ + +
+ +
+
+ 任務規劃 +
+
+

任務規劃

+

+ 初始化並詳細規劃任務流程，建立明確的目標與成功標準，可選擇參考現有任務進行延續規劃。 +

+ + 了解更多 → + +
+
+ + +
+
+ 深入分析 +
+
+

深入分析

+

+ 深入分析任務需求並系統性檢查代碼庫，評估技術可行性與潛在風險，提供初步解決方案建議。 +

+ + 了解更多 → + +
+
+ + +
+
+ 方案反思 +
+
+

方案反思

+

+ 批判性審查分析結果，評估方案完整性並識別優化機會，確保解決方案符合最佳實踐。 +

+ + 了解更多 → + +
+
+ + +
+
+ 任務分解 +
+
+

任務分解

+

+ 將複雜任務分解為獨立且可追蹤的子任務，建立明確的依賴關係和優先順序，支援多種更新模式。 +

+ + 了解更多 → + +
+
+ + +
+
+ 任務執行 +
+
+

任務執行

+

+ 按照預定計劃執行特定任務，確保每個步驟的輸出符合質量標準，處理執行過程中的異常情況。 +

+ + 了解更多 → + +
+
+ + +
+
+ 結果驗證 +
+
+

結果驗證

+

+ 全面驗證任務完成度，確保所有需求與技術標準都已滿足，並無遺漏細節，提供質量評估報告。 +

+ + 了解更多 → + +
+
+ + +
+
+ 任務完成 +
+
+

任務完成

+

+ 正式標記任務為完成狀態，生成詳細的完成報告，並更新關聯任務的依賴狀態，確保工作流程的連續性。 +

+ + 了解更多 → + +
+
+
+
+ + + +
+
+ + +
+
+ +
+ +
+
+ +
+
+

+ 任務規劃與分解流程 +

+

+ 這個示例展示了如何使用MCP Shrimp Task + Manager來規劃和分解複雜任務。整個流程包括四個主要步驟： +

+
    +
  1. + 任務規劃 + - 初始化並詳細規劃任務，明確目標與成功標準 +
    2. +
  2. + 深入分析 + - 深入了解任務，分析技術可行性和潛在挑戰 +
    3. +
  3. + 方案反思 + - 批判性審查分析結果，優化提案 +
    4. +
  4. + 任務分解 + - 將複雜任務分解為可管理的子任務 +
    5. +
+

+ 通過這種方法，您可以將複雜的大型任務轉化為結構化的、可執行的工作單元，同時保持整體視角。 +

+
+
+
+
+

+ 任務執行與完成流程 +

+

+ 這個示例展示了如何執行和完成已規劃的任務。整個流程包括四個主要步驟： +

+
    +
  1. + 任務列表 + - 查詢待處理任務列表，了解當前狀態 +
    2. +
  2. + 任務執行 + - 按照預定計劃執行選定的任務 +
    3. +
  3. + 結果驗證 + - 驗證任務完成情況，確保達到質量標準 +
    4. +
  4. + 任務完成 + - 正式標記任務為完成狀態，生成報告 +
    5. +
+

+ 通過這種方法，您可以系統地執行任務並確保每個步驟都達到預期的質量標準，最終完成整個工作流程。 +

+
+
+
+
+
+ + +
+

💡 提示

+

+ 上面的工作流程並非固定不變的，Agent + 會根據分析情況進行重複迭代不同步驟，直到達到預期效果。 +

+
+
+
+ + +
+
+

安裝與配置區

+

+ Shrimp Task Manager + 提供多種安裝方式，無論您是想快速開始，還是需要進行高級配置，都能輕鬆上手。 +

+ + +
+ +
+ + +
+ + +
+ +
+
+

+ 手動安裝設置 +

+

按照以下步驟手動安裝。

+
+ + +
+
+
+ 1 +
+

克隆代碼倉庫

+
+ +
+ 
git clone https://github.com/cjo4m06/mcp-shrimp-task-manager.git
+cd mcp-shrimp-task-manager
+ +
+
+ + +
+
+
+ 2 +
+

安裝依賴

+
+ +
+ 
npm install
+ +
+
+ + +
+
+
+ 3 +
+

編譯項目

+
+ +
+ 
npm run build
+ +
+
+
+ + + +
+
+ + +
+ +
+
+
+ + + +
+

快速入門

+
+

+ 完成安裝後，請查看我們的快速入門指南，了解如何使用 MCP Shrimp + Task Manager。 +

+ + 查看代碼 → + +
+ + +
+
+
+ + + +
+

常見問題

+
+

+ 遇到問題？查看我們的常見問題解答，或在 GitHub 上提交問題。 +

+ + 查看常見問題 → + +
+
+
+
+ + +
+
+
+

+ 立即體驗智能任務管理 +

+

+ 提升您的AI編程體驗，告別無序任務管理，擁抱更高效的工作流程。 +

+
+ + + + + 前往 GitHub 倉庫 + + + + + + 開始安裝 + +
+
+
+
+ + +
+
+ +
+
+

+ © 2023 MCP Task Manager. 保留所有權利。 +

+

+ 由 + Siage + 用 ❤️ 開發 +

+
+
+
+
+
+ + + + diff --git a/docs/web/js/main.js b/docs/web/js/main.js new file mode 100644 index 0000000..3ed534b --- /dev/null +++ b/docs/web/js/main.js @@ -0,0 +1,1654 @@ +/** + * MCP Shrimp Task Manager 網站主腳本 + */ + +// 頁面加載完成後執行 +document.addEventListener("DOMContentLoaded", function () { + // 初始化滾動動畫 + initAOS(); + + // 初始化移動端菜單 + initMobileMenu(); + + // 初始化代碼高亮和複製功能 + initCodeBlocks(); + + // 平滑滾動功能 + initSmoothScroll(); + + // 英雄區特效 + initHeroEffects(); + + // 痛點與解決方案區特效 + initPainPointsEffects(); + + // 核心功能展示區特效 + initFeaturesEffects(); + + // 工作流程展示區特效 + initWorkflowEffects(); + + // 初始化安裝與配置區功能 + initInstallationSection(); + + // 檢測頁面滾動位置以顯示回到頂部按鈕 + initScrollToTopButton(); + + // 初始化響應式圖片懶加載 + initLazyLoading(); + + // 初始化頁面進入動畫 + initPageEntranceAnimation(); + + // 多語系功能 + initMultiLanguage(); +}); + +/** + * 初始化AOS滾動動畫庫 + */ +function initAOS() { + AOS.init({ + duration: 800, + easing: "ease-in-out", + once: true, + mirror: true, + disable: function () { + // 只在低性能設備上禁用動畫，根據用戶偏好設置 + return window.matchMedia("(prefers-reduced-motion: reduce)").matches; + }, + }); + + // 在窗口調整大小時重新初始化AOS以確保正確的觸發位置 + window.addEventListener("resize", function () { + AOS.refresh(); + }); +} + +/** + * 初始化移動端菜單 + */ +function initMobileMenu() { + const menuToggle = document.getElementById("menu-toggle"); + const mobileMenu = document.getElementById("mobile-menu"); + + if (menuToggle && mobileMenu) { + menuToggle.addEventListener("click", function (e) { + e.preventDefault(); + + // 為了支持過渡效果，先移除hidden類 + if (mobileMenu.classList.contains("hidden")) { + mobileMenu.classList.remove("hidden"); + + // 等待DOM更新，然後添加visible類啟動過渡效果 + setTimeout(() => { + mobileMenu.classList.add("visible"); + }, 10); + } else { + // 先移除visible類觸發過渡效果 + mobileMenu.classList.remove("visible"); + + // 等待過渡完成，然後隱藏菜單 + setTimeout(() => { + mobileMenu.classList.add("hidden"); + }, 300); // 300ms與CSS過渡時間匹配 + } + }); + + // 點擊菜單項後關閉菜單 + const menuLinks = mobileMenu.querySelectorAll("a"); + menuLinks.forEach((link) => { + link.addEventListener("click", function () { + mobileMenu.classList.remove("visible"); + + // 等待過渡完成，然後隱藏菜單 + setTimeout(() => { + mobileMenu.classList.add("hidden"); + }, 300); + }); + }); + + // 點擊菜單外區域關閉菜單 + document.addEventListener("click", function (e) { + if ( + !menuToggle.contains(e.target) && + !mobileMenu.contains(e.target) && + !mobileMenu.classList.contains("hidden") + ) { + mobileMenu.classList.remove("visible"); + + setTimeout(() => { + mobileMenu.classList.add("hidden"); + }, 300); + } + }); + } +} + +/** + * 英雄區特效初始化 + */ +function initHeroEffects() { + // 獲取英雄區 + const heroSection = document.getElementById("hero"); + if (!heroSection) return; + + // 添加浮動裝飾元素的動畫序列 + const decorElements = heroSection.querySelectorAll(".absolute"); + decorElements.forEach((elem, index) => { + elem.style.setProperty("--animation-order", index + 1); + + // 使用淡入動畫讓元素在頁面加載後逐個顯示 + setTimeout(() => { + elem.style.opacity = "0.8"; + }, (index + 1) * 200); + }); + + // 添加視差滾動效果 + window.addEventListener("scroll", function () { + const scrollTop = window.pageYOffset; + const heroHeight = heroSection.offsetHeight; + + // 當用戶滾動經過英雄區時應用效果 + if (scrollTop <= heroHeight) { + const scrollPercentage = scrollTop / heroHeight; + + // 英雄區域淡出效果 + heroSection.style.opacity = 1 - scrollPercentage * 0.8; + + // 標題向上移動效果 + const heroTitle = heroSection.querySelector("h1"); + if (heroTitle) { + heroTitle.style.transform = `translateY(${scrollPercentage * 50}px)`; + } + } + }); + + // 添加滑鼠移動視差效果 + heroSection.addEventListener("mousemove", function (e) { + // 只在更大的屏幕上啟用這個效果 + if (window.innerWidth >= 768) { + const moveX = (e.clientX - window.innerWidth / 2) * 0.01; + const moveY = (e.clientY - window.innerHeight / 2) * 0.01; + + // 獲取英雄區內的圖片元素 + const heroImage = heroSection.querySelector("img"); + if (heroImage) { + heroImage.style.transform = `translate(${moveX * 2}px, ${ + moveY * 2 + }px) scale(1.02)`; + } + + // 獲取英雄區內的裝飾元素 + decorElements.forEach((elem, index) => { + // 使用不同的移動比例，創造層次感 + const factorX = (index + 1) * 0.03; + const factorY = (index + 1) * 0.02; + elem.style.transform = `translate(${moveX * factorX}px, ${ + moveY * factorY + }px)`; + }); + } + }); + + // 鼠標離開時重置元素位置 + heroSection.addEventListener("mouseleave", function () { + const heroImage = heroSection.querySelector("img"); + if (heroImage) { + heroImage.style.transform = ""; + } + + decorElements.forEach((elem) => { + elem.style.transform = ""; + }); + }); + + // Logo動畫效果 + const logo = document.querySelector("header nav img"); + if (logo) { + // 導航欄 logo 在頁面加載時輕微旋轉動畫 + logo.style.transition = "transform 1s ease-out"; + logo.style.transform = "rotate(0deg)"; + + setTimeout(() => { + logo.style.transform = "rotate(5deg)"; + setTimeout(() => { + logo.style.transform = "rotate(0deg)"; + }, 500); + }, 1500); + } +} + +/** + * 痛點與解決方案區特效初始化 + */ +function initPainPointsEffects() { + const painPointsSection = document.getElementById("pain-points"); + if (!painPointsSection) return; + + // 獲取所有卡片 + const cards = painPointsSection.querySelectorAll( + ".rounded-lg.overflow-hidden" + ); + + // 為每個卡片添加延遲出現動畫 + cards.forEach((card, index) => { + card.setAttribute("data-aos", "fade-up"); + card.setAttribute("data-aos-delay", (index * 150).toString()); + }); + + // 為每個卡片添加鼠標進入和離開效果 + cards.forEach((card, index) => { + // 獲取痛點和解決方案區塊 + const painIcon = card.querySelector(".p-6 img"); + const solutionIcon = card.querySelector(".p-4 img"); + const arrowIcon = card.querySelector(".h-8.w-8.text-green-500"); + + // 鼠標進入效果 + card.addEventListener("mouseenter", function () { + // 延遲執行動畫，營造序列動畫效果 + if (painIcon) { + setTimeout(() => { + painIcon.style.transform = "scale(1.1) rotate(5deg)"; + }, 100); + } + + if (arrowIcon) { + setTimeout(() => { + arrowIcon.style.transform = "translateY(8px)"; + }, 200); + } + + if (solutionIcon) { + setTimeout(() => { + solutionIcon.style.transform = "scale(1.1) rotate(-5deg)"; + }, 300); + } + + // 添加發光效果 + card.style.boxShadow = + "0 20px 30px rgba(0, 0, 0, 0.15), 0 0 15px rgba(59, 130, 246, 0.3)"; + }); + + // 鼠標離開效果 + card.addEventListener("mouseleave", function () { + if (painIcon) painIcon.style.transform = ""; + if (arrowIcon) arrowIcon.style.transform = ""; + if (solutionIcon) solutionIcon.style.transform = ""; + + // 移除發光效果 + card.style.boxShadow = ""; + }); + }); + + // 添加視差滾動效果 + window.addEventListener("scroll", function () { + // 只在更大的屏幕上啟用這個效果 + if (window.innerWidth >= 768) { + const scrollPosition = window.scrollY; + const sectionTop = painPointsSection.offsetTop; + const sectionHeight = painPointsSection.offsetHeight; + + // 當用戶滾動到該區域時應用效果 + if ( + scrollPosition > sectionTop - window.innerHeight && + scrollPosition < sectionTop + sectionHeight + ) { + cards.forEach((card, index) => { + // 相對於部分的滾動位置 + const relativeScroll = + (scrollPosition - (sectionTop - window.innerHeight)) / + (sectionHeight + window.innerHeight); + // 根據卡片位置計算偏移量 + const offset = Math.sin(relativeScroll * Math.PI + index * 0.5) * 15; + + // 根據索引設置不同的偏移方向 + if (index % 2 === 0) { + card.style.transform = `translateY(${offset}px)`; + } else { + card.style.transform = `translateY(${-offset}px)`; + } + }); + } + } + }); +} + +/** + * 初始化代碼區塊功能 + */ +function initCodeBlocks() { + // 確保 Prism.js 已加載 + if (typeof Prism !== "undefined") { + // 代碼高亮應用 + Prism.highlightAll(); + } + + // 初始化代碼示例切換功能 + initCodeTabSwitcher(); + + // 可選：添加打字機效果 + initTypingEffect(); +} + +/** + * 初始化代碼示例標籤切換功能 + */ +function initCodeTabSwitcher() { + const tabButtons = document.querySelectorAll(".code-tab-btn"); + const contentSections = document.querySelectorAll(".code-content-section"); + + if (!tabButtons.length || !contentSections.length) return; + + tabButtons.forEach((btn) => { + btn.addEventListener("click", () => { + // 獲取目標內容ID + const targetId = btn.getAttribute("data-target"); + + // 取消所有按鈕激活狀態 + tabButtons.forEach((b) => { + b.classList.remove("active", "bg-blue-50", "text-blue-600"); + b.classList.add("hover:bg-blue-50"); + }); + + // 激活當前按鈕 + btn.classList.add("active", "bg-blue-50", "text-blue-600"); + + // 隱藏所有內容 + contentSections.forEach((section) => { + section.classList.add("hidden"); + }); + + // 顯示目標內容 + const targetSection = document.getElementById(targetId); + if (targetSection) { + targetSection.classList.remove("hidden"); + + // 確保激活內容區的代碼高亮 + const codeBlocks = targetSection.querySelectorAll("code"); + if (typeof Prism !== "undefined" && codeBlocks.length) { + codeBlocks.forEach((block) => { + Prism.highlightElement(block); + }); + } + } + }); + }); +} + +/** + * 初始化打字機效果 (可選功能) + */ +function initTypingEffect() { + // 檢查是否啟用打字機效果（可以通過URL參數控制） + const urlParams = new URLSearchParams(window.location.search); + const enableTyping = urlParams.get("typing") === "true"; + + if (!enableTyping) return; + + const codeBlocks = document.querySelectorAll("#examples code"); + if (!codeBlocks.length) return; + + codeBlocks.forEach((codeBlock) => { + const originalText = codeBlock.textContent; + codeBlock.textContent = ""; + + let charIndex = 0; + const typingSpeed = 30; // 每字符間隔毫秒 + + // 先隱藏原始代碼，然後進行打字效果 + codeBlock.parentElement.classList.add("typing-in-progress"); + + // 視窗進入可視區域時啟動打字效果 + const observer = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting) { + startTyping(); + observer.disconnect(); + } + }, + { threshold: 0.1 } + ); + + observer.observe(codeBlock.parentElement); + + function startTyping() { + const typingInterval = setInterval(() => { + if (charIndex < originalText.length) { + codeBlock.textContent += originalText.charAt(charIndex); + charIndex++; + + // 自動滾動代碼塊以跟踪光標 + codeBlock.parentElement.scrollTop = + codeBlock.parentElement.scrollHeight; + + // 動態應用語法高亮 + if (typeof Prism !== "undefined") { + Prism.highlightElement(codeBlock); + } + } else { + clearInterval(typingInterval); + codeBlock.parentElement.classList.remove("typing-in-progress"); + } + }, typingSpeed); + } + }); +} + +/** + * 初始化平滑滾動 + */ +function initSmoothScroll() { + const links = document.querySelectorAll('a[href^="#"]'); + + links.forEach((link) => { + link.addEventListener("click", function (e) { + const href = this.getAttribute("href"); + + // 確保不是僅 "#" 的鏈接 + if (href !== "#") { + e.preventDefault(); + const target = document.querySelector(href); + + if (target) { + // 計算目標元素位置並考慮固定導航欄的高度 + const headerHeight = document.querySelector("header").offsetHeight; + const targetPosition = + target.getBoundingClientRect().top + + window.pageYOffset - + headerHeight; + + window.scrollTo({ + top: targetPosition, + behavior: "smooth", + }); + } + } + }); + }); +} + +/** + * 核心功能展示區特效初始化 + */ +function initFeaturesEffects() { + const featuresSection = document.getElementById("features"); + if (!featuresSection) return; + + // 獲取所有功能卡片 + const featureCards = featuresSection.querySelectorAll(".rounded-lg"); + + // 為每個卡片添加懸停效果 + featureCards.forEach((card, index) => { + // 獲取卡片中的圖標和標題 + const featureIcon = card.querySelector(".p-6 img"); + const featureTitle = card.querySelector("h3"); + + // 鼠標進入效果 + card.addEventListener("mouseenter", function () { + if (featureIcon) { + featureIcon.style.transform = "scale(1.2) rotate(5deg)"; + featureIcon.style.transition = "transform 0.5s ease"; + } + + if (featureTitle) { + featureTitle.style.transform = "translateY(-5px)"; + featureTitle.style.transition = "transform 0.3s ease"; + } + }); + + // 鼠標離開效果 + card.addEventListener("mouseleave", function () { + if (featureIcon) { + featureIcon.style.transform = ""; + } + + if (featureTitle) { + featureTitle.style.transform = ""; + } + }); + + // 點擊效果 - 添加輕微彈跳效果 + card.addEventListener("click", function () { + card.style.transform = "scale(0.95)"; + setTimeout(() => { + card.style.transform = ""; + }, 200); + }); + }); + + // 添加滾動視差效果 + window.addEventListener("scroll", function () { + const scrollPosition = window.scrollY; + const windowHeight = window.innerHeight; + + // 計算特效觸發範圍 + const sectionTop = featuresSection.offsetTop; + const sectionHeight = featuresSection.offsetHeight; + const triggerStart = sectionTop - windowHeight; + const triggerEnd = sectionTop + sectionHeight; + + // 只在特效範圍內計算視差 + if (scrollPosition > triggerStart && scrollPosition < triggerEnd) { + const scrollProgress = + (scrollPosition - triggerStart) / (triggerEnd - triggerStart); + + // 應用各種視差效果 + featureCards.forEach((card, index) => { + const delayFactor = (index % 3) * 0.1; + const moveY = Math.sin((scrollProgress + delayFactor) * Math.PI) * 15; + + // 應用視差效果 + card.style.transform = `translateY(${moveY}px)`; + }); + } + }); +} + +/** + * 工作流程展示區特效初始化 + */ +function initWorkflowEffects() { + // 步驟詳情彈窗功能 + initWorkflowModal(); + + // 為桌面版時間軸添加連接線動畫 + animateWorkflowConnections(); + + // 為步驟圖標添加互動效果 + addWorkflowIconInteractions(); +} + +/** + * 初始化工作流程詳情彈窗 + */ +function initWorkflowModal() { + const modal = document.getElementById("workflow-detail-modal"); + const closeBtn = document.getElementById("close-modal"); + const closeBtnAlt = document.getElementById("close-modal-btn"); + const detailLinks = document.querySelectorAll( + ".workflow-detail-link, .workflow-step" + ); + const modalTitle = document.getElementById("modal-title"); + const modalContent = document.getElementById("modal-content"); + + if (!modal || !closeBtn || !detailLinks.length) return; + + // 工作流程步驟詳情數據 + const workflowDetails = { + en: { + 1: { + title: "Task Planning", + content: ` +

The task planning stage is the initial phase where AI assistants define project scope, set goals, and establish success criteria.

+

Key Activities:

+ +

Outputs:

+ +

This stage lays the foundation for all subsequent work, ensuring that both the AI assistant and the user have a shared understanding of what needs to be accomplished.

+ `, + }, + 2: { + title: "In-depth Analysis", + content: ` +

The in-depth analysis stage involves a thorough examination of the requirements and technical landscape to develop a viable implementation strategy.

+

Key Activities:

+ +

Outputs:

+ +

This stage ensures that the proposed solution is technically sound and addresses all requirements before proceeding to implementation.

+ `, + }, + 3: { + title: "Solution Reflection", + content: ` +

The solution reflection stage involves critical review and optimization of the proposed approach before implementation.

+

Key Activities:

+ +

Outputs:

+ +

This reflective process helps catch potential issues early and ensures the chosen approach is optimal before investing in implementation.

+ `, + }, + 4: { + title: "Task Decomposition", + content: ` +

The task decomposition stage breaks down complex tasks into manageable, atomic subtasks with clear dependencies and execution order.

+

Key Activities:

+ +

Supported Update Modes:

+ +

This structured approach makes complex projects manageable by creating a clear roadmap of small, achievable steps.

+ `, + }, + 5: { + title: "Task Execution", + content: ` +

The task execution stage involves implementing specific tasks according to the predetermined plan, with a focus on quality and adherence to requirements.

+

Key Activities:

+ +

Execution Process:

+ +

This stage transforms plans into concrete results, implementing the solutions designed in earlier stages.

+ `, + }, + 6: { + title: "Result Verification", + content: ` +

The result verification stage ensures that implemented tasks meet all requirements and quality standards before being marked as complete.

+

Key Activities:

+ +

Verification Checklist:

+ +

This thorough verification process ensures high-quality deliverables that fully satisfy requirements.

+ `, + }, + 7: { + title: "Task Completion", + content: ` +

The task completion stage formally marks tasks as complete, generates detailed completion reports, and updates the status of dependent tasks.

+

Key Activities:

+ +

Completion Report Contents:

+ +

The completion stage ensures proper closure of tasks, maintains workflow continuity, and builds institutional knowledge for future projects.

+ `, + }, + }, + "zh-TW": { + 1: { + title: "任務規劃", + content: ` +

任務規劃階段是初始階段，AI助手定義項目範圍、設定目標，並建立成功標準。

+

主要活動：

+ +

輸出成果：

+ +

此階段為所有後續工作奠定基礎，確保AI助手和用戶對需要完成的工作有共同理解。

+ `, + }, + 2: { + title: "深入分析", + content: ` +

深入分析階段涉及對需求和技術環境的徹底檢查，以制定可行的實施策略。

+

主要活動：

+ +

輸出成果：

+ +

此階段確保在進行實施前，提出的解決方案在技術上是合理的，並能處理所有需求。

+ `, + }, + 3: { + title: "方案反思", + content: ` +

方案反思階段涉及在實施前對提出的方法進行批判性審查和優化。

+

主要活動：

+ +

輸出成果：

+ +

這種反思過程有助於及早發現潛在問題，並確保在投入實施前所選方法是最佳選擇。

+ `, + }, + 4: { + title: "任務分解", + content: ` +

任務分解階段將複雜任務分解為可管理的原子子任務，並建立明確的依賴關係和執行順序。

+

主要活動：

+ +

支持的更新模式：

+ +

這種結構化方法通過創建由小型、可實現步驟組成的清晰路線圖，使複雜項目變得可管理。

+ `, + }, + 5: { + title: "任務執行", + content: ` +

任務執行階段涉及按照預定計劃實施特定任務，重點關注質量和需求遵從。

+

主要活動：

+ +

執行過程：

+ +

該階段將計劃轉化為具體結果，實施早期階段設計的解決方案。

+ `, + }, + 6: { + title: "結果驗證", + content: ` +

結果驗證階段確保已實施的任務在標記為完成前滿足所有需求和質量標準。

+

主要活動：

+ +

驗證清單：

+ +

這種徹底的驗證過程確保交付高質量的成果，完全滿足需求。

+ `, + }, + 7: { + title: "任務完成", + content: ` +

任務完成階段正式將任務標記為已完成，生成詳細的完成報告，並更新相關依賴任務的狀態。

+

主要活動：

+ +

完成報告內容：

+ +

完成階段確保任務適當結束，維持工作流程連續性，並為未來項目建立機構知識。

+ `, + }, + }, + }; + + // 點擊詳情鏈接打開彈窗 + detailLinks.forEach((link) => { + link.addEventListener("click", function (e) { + e.preventDefault(); + const stepIndex = parseInt(this.getAttribute("data-step")) - 1; + + if (stepIndex >= 0 && stepIndex < workflowDetails["zh-TW"].length) { + modalTitle.textContent = workflowDetails["zh-TW"][stepIndex].title; + modalContent.innerHTML = workflowDetails["zh-TW"][stepIndex].content; + modal.classList.remove("hidden"); + modal.classList.add("active"); + } + }); + }); + + // 關閉彈窗 + function closeModal() { + modal.classList.add("hidden"); + modal.classList.remove("active"); + } + + closeBtn.addEventListener("click", closeModal); + closeBtnAlt.addEventListener("click", closeModal); + + // 點擊彈窗外部關閉 + modal.addEventListener("click", function (e) { + if (e.target === modal) { + closeModal(); + } + }); +} + +/** + * 為工作流程時間軸添加連接線動畫 + */ +function animateWorkflowConnections() { + const desktopTimeline = document.querySelector( + "#workflow .hidden.md\\:block" + ); + if (!desktopTimeline) return; + + // 當時間軸進入視口時觸發動畫 + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const steps = entry.target.querySelectorAll(".workflow-step"); + + steps.forEach((step, index) => { + setTimeout(() => { + step.classList.add("animated"); + }, index * 200); + }); + + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.3 } + ); + + observer.observe(desktopTimeline); +} + +/** + * 為工作流程步驟圖標添加互動效果 + */ +function addWorkflowIconInteractions() { + const workflowIcons = document.querySelectorAll( + ".workflow-icon, .workflow-icon-mobile" + ); + + workflowIcons.forEach((icon) => { + icon.addEventListener("mouseenter", function () { + const img = this.querySelector("img"); + if (img) { + img.style.transform = "scale(1.2) rotate(5deg)"; + img.style.transition = "transform 0.3s ease"; + } + }); + + icon.addEventListener("mouseleave", function () { + const img = this.querySelector("img"); + if (img) { + img.style.transform = ""; + } + }); + + // 增加點擊效果 + icon.addEventListener("click", function () { + const link = + this.parentNode.querySelector(".workflow-detail-link") || + this.closest(".flex").querySelector(".workflow-detail-link"); + + if (link) { + link.click(); + } + }); + }); +} + +/** + * 初始化安裝與配置區功能 + */ +function initInstallationSection() { + // 初始化安裝方式選項卡切換 + initInstallTabs(); + + // 初始化Cursor IDE配置選項卡切換 + initCursorTabs(); + + // 初始化命令行複製按鈕 + initCommandCopyButtons(); + + // 添加安裝卡片的動畫效果 + initInstallCardsAnimation(); +} + +/** + * 初始化安裝方式選項卡切換 + */ +function initInstallTabs() { + const tabButtons = document.querySelectorAll(".install-tab-btn"); + const contentSections = document.querySelectorAll(".install-content-section"); + + if (!tabButtons.length || !contentSections.length) return; + + tabButtons.forEach((button) => { + button.addEventListener("click", () => { + // 移除所有活動狀態 + tabButtons.forEach((btn) => btn.classList.remove("active")); + contentSections.forEach((section) => section.classList.add("hidden")); + + // 設置當前活動狀態 + button.classList.add("active"); + const targetId = button.getAttribute("data-target"); + const targetSection = document.getElementById(targetId); + if (targetSection) { + targetSection.classList.remove("hidden"); + } + }); + }); +} + +/** + * 初始化Cursor IDE配置選項卡切換 + */ +function initCursorTabs() { + const tabButtons = document.querySelectorAll(".cursor-tab-btn"); + const contentSections = document.querySelectorAll(".cursor-content-section"); + + if (!tabButtons.length || !contentSections.length) return; + + tabButtons.forEach((button) => { + button.addEventListener("click", () => { + // 移除所有活動狀態 + tabButtons.forEach((btn) => btn.classList.remove("active")); + contentSections.forEach((section) => section.classList.add("hidden")); + + // 設置當前活動狀態 + button.classList.add("active"); + const targetId = button.getAttribute("data-target"); + const targetSection = document.getElementById(targetId); + if (targetSection) { + targetSection.classList.remove("hidden"); + } + }); + }); +} + +/** + * 初始化命令行複製按鈕 + */ +function initCommandCopyButtons() { + const copyButtons = document.querySelectorAll(".copy-cmd-btn"); + + copyButtons.forEach((button) => { + button.addEventListener("click", async () => { + const command = button.getAttribute("data-command"); + if (!command) return; + + try { + await navigator.clipboard.writeText(command); + + // 更新按鈕文字 + const originalText = button.textContent.trim(); + button.textContent = "已複製!"; + button.classList.add("bg-gray-600"); + button.classList.remove( + "bg-blue-600", + "bg-green-600", + "bg-purple-600", + "hover:bg-blue-700", + "hover:bg-green-700", + "hover:bg-purple-700" + ); + + // 恢復原始狀態 + setTimeout(() => { + button.textContent = originalText; + button.classList.remove("bg-gray-600"); + + // 根據按鈕顏色還原樣式 + if (button.classList.contains("copy-cmd-btn")) { + if (button.closest("#smithery-install")) { + button.classList.add("bg-blue-600", "hover:bg-blue-700"); + } else if (button.closest("#manual-install")) { + button.classList.add("bg-green-600", "hover:bg-green-700"); + } else if (button.closest("#cursor-config")) { + button.classList.add("bg-purple-600", "hover:bg-purple-700"); + } + } + }, 2000); + } catch (err) { + console.error("複製命令失敗:", err); + button.textContent = "複製失敗"; + } + }); + }); +} + +/** + * 安裝卡片的動畫效果 + */ +function initInstallCardsAnimation() { + const installCards = document.querySelectorAll("#installation .grid > div"); + + installCards.forEach((card) => { + card.addEventListener("mouseenter", () => { + card.style.transform = "translateY(-10px)"; + card.style.boxShadow = + "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; + + // 找到卡片內的圖標並添加動畫 + const icon = card.querySelector("svg"); + if (icon) { + icon.style.transform = "scale(1.2)"; + icon.style.transition = "transform 0.3s ease"; + } + }); + + card.addEventListener("mouseleave", () => { + card.style.transform = ""; + card.style.boxShadow = ""; + + // 恢復圖標 + const icon = card.querySelector("svg"); + if (icon) { + icon.style.transform = ""; + } + }); + }); +} + +/** + * 初始化頁面滾動到頂部按鈕 + */ +function initScrollToTopButton() { + // 創建回到頂部按鈕元素 + const scrollToTopBtn = document.createElement("button"); + scrollToTopBtn.id = "scrollToTop"; + scrollToTopBtn.innerHTML = + ''; + scrollToTopBtn.className = + "fixed bottom-5 right-5 bg-blue-600 text-white p-2 rounded-full shadow-lg transform scale-0 transition-transform duration-300"; + scrollToTopBtn.setAttribute("aria-label", "回到頂部"); + + // 添加按鈕到文檔 + document.body.appendChild(scrollToTopBtn); + + // 點擊事件 - 平滑滾動到頂部 + scrollToTopBtn.addEventListener("click", function () { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }); + + // 根據滾動位置顯示或隱藏按鈕 + window.addEventListener("scroll", function () { + if (window.scrollY > 500) { + scrollToTopBtn.style.transform = "scale(1)"; + } else { + scrollToTopBtn.style.transform = "scale(0)"; + } + }); +} + +/** + * 初始化圖片懶加載功能 + */ +function initLazyLoading() { + if ("loading" in HTMLImageElement.prototype) { + // 瀏覽器支持原生懶加載 + const images = document.querySelectorAll('img[loading="lazy"]'); + images.forEach((img) => { + img.src = img.dataset.src; + }); + } else { + // 回退方案 - 使用 Intersection Observer API + const imgObserver = new IntersectionObserver((entries, observer) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src; + img.classList.add("loaded"); + observer.unobserve(img); + } + }); + }); + + const lazyImages = document.querySelectorAll("img[data-src]"); + lazyImages.forEach((img) => { + imgObserver.observe(img); + }); + } +} + +/** + * 初始化頁面進入動畫 + */ +function initPageEntranceAnimation() { + // 頁面加載完成後的動畫效果 + document.body.classList.add("page-loaded"); + + // 延遲一點時間後開始序列動畫 + setTimeout(() => { + const header = document.querySelector("header"); + if (header) { + header.style.opacity = "1"; + header.style.transform = "translateY(0)"; + } + + const heroContent = document.querySelector("#hero .container"); + if (heroContent) { + setTimeout(() => { + heroContent.style.opacity = "1"; + heroContent.style.transform = "translateY(0)"; + }, 200); + } + }, 100); +} + +/** + * 為元素添加動畫類 + * @param {Element} element - 要添加動畫的元素 + * @param {string} animationClass - 要添加的動畫類名 + * @param {number} delay - 延遲時間(毫秒) + */ +function addAnimation(element, animationClass, delay = 0) { + if (!element) return; + + setTimeout(() => { + element.classList.add(animationClass); + + // 動畫結束後移除類 + element.addEventListener( + "animationend", + () => { + element.classList.remove(animationClass); + }, + { once: true } + ); + }, delay); +} + +/** + * 檢測元素是否在視口中 + * @param {Element} element - 要檢測的元素 + * @returns {boolean} - 元素是否在視口中 + */ +function isInViewport(element) { + const rect = element.getBoundingClientRect(); + return ( + rect.top <= (window.innerHeight || document.documentElement.clientHeight) && + rect.bottom >= 0 && + rect.left <= (window.innerWidth || document.documentElement.clientWidth) && + rect.right >= 0 + ); +} + +/** + * 初始化多語系功能 + */ +function initMultiLanguage() { + // 檢查 i18n.js 是否已載入，如果已載入則調用 initLanguage 函數 + if (typeof initLanguage === "function") { + initLanguage(); + } + + // 監聽語言切換事件 + document.addEventListener("languageChanged", function (event) { + const lang = event.detail.language; + console.log("Language changed to:", lang); + + // 語言切換後的特殊處理邏輯 + // 更新複製按鈕文字 + const copyBtns = document.querySelectorAll(".copy-cmd-btn"); + const copyText = lang === "en" ? "Copy" : "複製"; + + copyBtns.forEach((btn) => { + // 只更新沒有顯示"已複製"的按鈕 + if (btn.textContent !== "Copied!" && btn.textContent !== "已複製!") { + btn.textContent = copyText; + } + }); + + // 更新模態窗口中的關閉按鈕文字 + const closeModalBtn = document.getElementById("close-modal-btn"); + if (closeModalBtn) { + closeModalBtn.textContent = lang === "en" ? "Close" : "關閉"; + } + + // 根據當前語言更新工作流程模態內容 + updateWorkflowModalContent(lang); + }); +} + +/** + * 根據當前語言更新工作流程模態窗口內容 + * @param {string} lang - 當前語言代碼 ("en" 或 "zh-TW") + */ +function updateWorkflowModalContent(lang) { + const modal = document.getElementById("workflow-detail-modal"); + if (!modal) return; + + // 獲取當前顯示的步驟 + const modalTitle = document.getElementById("modal-title"); + const modalContent = document.getElementById("modal-content"); + const currentStep = modal.getAttribute("data-current-step"); + + if (currentStep && modalTitle && modalContent) { + // 從工作流程詳情中獲取對應語言的內容 + const workflowDetails = getWorkflowDetails(); + const langKey = lang === "en" ? "en" : "zh-TW"; + + if (workflowDetails[langKey] && workflowDetails[langKey][currentStep]) { + const stepData = workflowDetails[langKey][currentStep]; + modalTitle.textContent = stepData.title; + modalContent.innerHTML = stepData.content; + } + } +} + +/** + * 獲取工作流程詳情數據 + * @returns {Object} 工作流程詳情對象 + */ +function getWorkflowDetails() { + // 返回工作流程詳情數據 + return { + // 現有數據保持不變 + en: { + 1: { + title: "Task Planning", + content: ` +

The task planning stage is the initial phase where AI assistants define project scope, set goals, and establish success criteria.

+

Key Activities:

+ +

Outputs:

+ +

This stage lays the foundation for all subsequent work, ensuring that both the AI assistant and the user have a shared understanding of what needs to be accomplished.

+ `, + }, + 2: { + title: "In-depth Analysis", + content: ` +

The in-depth analysis stage involves a thorough examination of the requirements and technical landscape to develop a viable implementation strategy.

+

Key Activities:

+ +

Outputs:

+ +

This stage ensures that the proposed solution is technically sound and addresses all requirements before proceeding to implementation.

+ `, + }, + 3: { + title: "Solution Reflection", + content: ` +

The solution reflection stage involves critical review and optimization of the proposed approach before implementation.

+

Key Activities:

+ +

Outputs:

+ +

This reflective process helps catch potential issues early and ensures the chosen approach is optimal before investing in implementation.

+ `, + }, + 4: { + title: "Task Decomposition", + content: ` +

The task decomposition stage breaks down complex tasks into manageable, atomic subtasks with clear dependencies and execution order.

+

Key Activities:

+ +

Supported Update Modes:

+ +

This structured approach makes complex projects manageable by creating a clear roadmap of small, achievable steps.

+ `, + }, + 5: { + title: "Task Execution", + content: ` +

The task execution stage involves implementing specific tasks according to the predetermined plan, with a focus on quality and adherence to requirements.

+

Key Activities:

+ +

Execution Process:

+ +

This stage transforms plans into concrete results, implementing the solutions designed in earlier stages.

+ `, + }, + 6: { + title: "Result Verification", + content: ` +

The result verification stage ensures that implemented tasks meet all requirements and quality standards before being marked as complete.

+

Key Activities:

+ +

Verification Checklist:

+ +

This thorough verification process ensures high-quality deliverables that fully satisfy requirements.

+ `, + }, + 7: { + title: "Task Completion", + content: ` +

The task completion stage formally marks tasks as complete, generates detailed completion reports, and updates the status of dependent tasks.

+

Key Activities:

+ +

Completion Report Contents:

+ +

The completion stage ensures proper closure of tasks, maintains workflow continuity, and builds institutional knowledge for future projects.

+ `, + }, + }, + "zh-TW": { + 1: { + title: "任務規劃", + content: ` +

任務規劃階段是初始階段，AI助手定義項目範圍、設定目標，並建立成功標準。

+

主要活動：

+ +

輸出成果：

+ +

此階段為所有後續工作奠定基礎，確保AI助手和用戶對需要完成的工作有共同理解。

+ `, + }, + 2: { + title: "深入分析", + content: ` +

深入分析階段涉及對需求和技術環境的徹底檢查，以制定可行的實施策略。

+

主要活動：

+ +

輸出成果：

+ +

此階段確保在進行實施前，提出的解決方案在技術上是合理的，並能處理所有需求。

+ `, + }, + 3: { + title: "方案反思", + content: ` +

方案反思階段涉及在實施前對提出的方法進行批判性審查和優化。

+

主要活動：

+ +

輸出成果：

+ +

這種反思過程有助於及早發現潛在問題，並確保在投入實施前所選方法是最佳選擇。

+ `, + }, + 4: { + title: "任務分解", + content: ` +

任務分解階段將複雜任務分解為可管理的原子子任務，並建立明確的依賴關係和執行順序。

+

主要活動：

+ +

支持的更新模式：

+ +

這種結構化方法通過創建由小型、可實現步驟組成的清晰路線圖，使複雜項目變得可管理。

+ `, + }, + 5: { + title: "任務執行", + content: ` +

任務執行階段涉及按照預定計劃實施特定任務，重點關注質量和需求遵從。

+

主要活動：

+ +

Execution Process:

+ +

This stage transforms plans into concrete results, implementing the solutions designed in earlier stages.

+ `, + }, + 6: { + title: "結果驗證", + content: ` +

結果驗證階段確保已實施的任務在標記為完成前滿足所有需求和質量標準。

+

Key Activities:

+ +

Verification Checklist:

+ +

This thorough verification process ensures high-quality deliverables that fully satisfy requirements.

+ `, + }, + 7: { + title: "任務完成", + content: ` +

任務完成階段正式將任務標記為已完成，生成詳細的完成報告，並更新相關依賴任務的狀態。

+

Key Activities:

+ +

Completion Report Contents:

+ +

The completion stage ensures proper closure of tasks, maintains workflow continuity, and builds institutional knowledge for future projects.

+ `, + }, + }, + }; +} diff --git a/docs/zh/README.md b/docs/zh/README.md index 4a6962b..ffb172a 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -148,13 +148,19 @@ npm run build #### TaskPlanner 模式 ``` -你是一個專業的任務規劃專家，你必須與用戶進行交互，分析用戶的需求，並收集專案相關資訊，最終使用 mcp_shrimp_task_manager_plan_task 建立任務，當任務建立完成後必須總結摘要，並告知用戶使用 任務執行 Model 進行任務執行。你必須專心於任務規劃禁止使用 mcp_shrimp_task_manager_execute_task 來執行任務，嚴重警告你是任務規劃專家，你不能直接修改程式碼，你只能規劃任務，並且你不能直接修改程式碼，你只能規劃任務。 +你是一個專業的任務規劃專家，你必須與用戶進行交互，分析用戶的需求，並收集專案相關資訊，最終使用 「plan_task」 建立任務，當任務建立完成後必須總結摘要，並告知用戶使用「TaskExecutor」模式進行任務執行。 +你必須專心於任務規劃禁止使用 「execute_task」 來執行任務， +嚴重警告你是任務規劃專家，你不能直接修改程式碼，你只能規劃任務，並且你不能直接修改程式碼，你只能規劃任務。 ``` #### TaskExecutor 模式 ``` -你是一個專業的任務執行專家，當用戶有指定執行任務，則使用 mcp_shrimp_task_manager_execute_task 進行任務執行，沒有執行任務時則使用 mcp_shrimp_task_manager_list_tasks 尋找位執行的任務並執行，當執行完成後必須總結摘要告知用戶使用，你一次只能執行一個任務，單任務完成時除非用戶明確告知否則禁止進行下一則任務。用戶如果要求"連續模式"則按照順序連續執行所有任務 +你是一個專業的任務執行專家，當用戶有指定執行任務，則使用 「execute_task」 進行任務執行， +沒有指定任務時則使用 「list_tasks」 尋找未執行的任務並執行， +當執行完成後必須總結摘要告知用戶結論， +你一次只能執行一個任務，當任務完成時除非用戶明確告知否則禁止進行下一則任務。 +用戶如果要求「連續模式」則按照順序連續執行所有任務 ``` > 💡 根據您的需求場景選擇適當的模式：