From 7f6dafeab650b3bea4ff8674102b71bfd3e6bbab Mon Sep 17 00:00:00 2001
From: Fam Zheng <fam@euphon.net>
Date: Sun, 1 Mar 2026 22:24:56 +0000
Subject: [PATCH] Extract project examples to JSON file and add time-tracker
 example

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/components/CreateForm.vue |  9 ++-------
 web/src/examples.json             | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 web/src/examples.json

diff --git a/web/src/components/CreateForm.vue b/web/src/components/CreateForm.vue
index 374da0b..3d45176 100644
--- a/web/src/components/CreateForm.vue
+++ b/web/src/components/CreateForm.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import examples from '../examples.json'
 
 const emit = defineEmits<{
   submit: [requirement: string]
@@ -9,12 +10,6 @@ const emit = defineEmits<{
 const requirement = ref('')
 const inputEl = ref<HTMLTextAreaElement>()
 
-const examples = [
-  { label: 'Todo 应用', text: '做一个 Todo List 应用：前端展示任务列表（支持添加、完成、删除），后端 FastAPI 提供增删改查 REST API，数据存 SQLite。完成后用 curl 跑一遍 E2E 测试验证所有接口正常。' },
-  { label: '贪吃蛇+排行榜', text: '做一个贪吃蛇游戏网站，前端用 HTML/JS，后端用 FastAPI 存储排行榜，支持提交分数和查看 Top10' },
-  { label: '抓取豆瓣 Top250', text: '用 Python 抓取豆瓣电影 Top250 并生成分析报告' },
-]
-
 onMounted(() => inputEl.value?.focus())
 
 function onSubmit() {
@@ -31,7 +26,7 @@ function onSubmit() {
         v-for="ex in examples"
         :key="ex.label"
         class="example-tag"
-        @click="requirement = ex.text"
+        @click="requirement = Array.isArray(ex.text) ? ex.text.join('\n') : ex.text"
       >{{ ex.label }}</span>
     </div>
     <textarea
diff --git a/web/src/examples.json b/web/src/examples.json
new file mode 100644
index 0000000..e34ebc6
--- /dev/null
+++ b/web/src/examples.json
@@ -0,0 +1,26 @@
+[
+  {
+    "label": "Todo 应用",
+    "text": "做一个 Todo List 应用，支持添加、完成、删除任务，任务列表持久保存。完成后自动验证所有功能正常。"
+  },
+  {
+    "label": "贪吃蛇+排行榜",
+    "text": "做一个贪吃蛇游戏网站，支持提交分数和查看 Top10 排行榜"
+  },
+  {
+    "label": "抓取豆瓣 Top250",
+    "text": "抓取豆瓣电影 Top250 并生成分析报告"
+  },
+  {
+    "label": "时间观察",
+    "text": [
+      "做一个时间观察打卡应用。",
+      "功能：",
+      "1) 活动管理：增删自定义活动（如读书、练琴、健身），每个活动有名称和颜色标签",
+      "2) 打卡：每个活动有「开始」「结束」按钮，记录每次时长，同一天可打卡多次",
+      "3) 今日面板：显示今日各活动的累计时长和打卡次数，进行中的活动显示实时计时",
+      "4) 统计：每个活动显示连续坚持天数和最近 30 天的打卡日历（有打卡的日期高亮）",
+      "完成后自动验证所有功能正常。"
+    ]
+  }
+]