diff --git a/src/env.ts b/src/env.ts index 2465614..e8825d9 100644 --- a/src/env.ts +++ b/src/env.ts @@ -9,6 +9,6 @@ export const env = createEnv({ client: { VITE_APP_TITLE: z.string().min(1).optional(), }, - runtimeEnv: import.meta.env, + runtimeEnv: process.env, emptyStringAsUndefined: true, }) diff --git a/src/routes/todo.tsx b/src/routes/todo.tsx index 4128205..cc4531f 100644 --- a/src/routes/todo.tsx +++ b/src/routes/todo.tsx @@ -1,9 +1,9 @@ +import { useSuspenseQuery } from '@tanstack/react-query' import { createFileRoute } from '@tanstack/react-router' import { createServerFn } from '@tanstack/react-start' import { db } from '@/db' -import { todoTable } from '@/db/schema' -const getTodos = createServerFn().handler(async () => { +const getTodos = createServerFn({ method: 'GET' }).handler(async () => { const todos = await db.query.todoTable.findMany() return todos }) @@ -13,5 +13,180 @@ export const Route = createFileRoute('/todo')({ }) function Todo() { - return
Hello "/todo"!
+ const { data: todos } = useSuspenseQuery({ + queryKey: ['todos'], + queryFn: () => getTodos(), + }) + + const completedCount = todos.filter((todo) => todo.completed).length + const totalCount = todos.length + + return ( +
+
+ {/* Header */} +
+

+ 我的待办事项 +

+

+ 已完成 {completedCount} / {totalCount} 项任务 +

+
+ + {/* Progress Bar */} +
+
+ 完成进度 + + {totalCount > 0 + ? Math.round((completedCount / totalCount) * 100) + : 0} + % + +
+
+
0 ? (completedCount / totalCount) * 100 : 0}%`, + }} + /> +
+
+ + {/* Todo List */} +
+ {todos.length === 0 ? ( +
+
+ +
+

暂无待办事项

+

+ 添加你的第一个任务开始吧！ +

+
+ ) : ( + todos.map((todo) => ( +
+
+ {/* Checkbox */} +
+
+ {todo.completed && ( + + )} +
+
+ + {/* Todo Content */} +
+

+ {todo.title} +

+
+ + + {new Date(todo.createdAt).toLocaleDateString('zh-CN')} + +
+
+ + {/* Status Badge */} +
+ + {todo.completed ? '已完成' : '进行中'} + +
+
+
+ )) + )} +
+ + {/* Footer Stats */} + {todos.length > 0 && ( +
+
+

+ {totalCount - completedCount} +

+

待完成

+
+
+

+ {completedCount} +

+

已完成

+
+
+ )} +
+
+ ) }