feat: 添加待办事项列表功能并更新环境变量源
- 将运行时环境变量源从 import.meta.env 更新为 process.env。 - 添加待办事项列表功能，包含进度条、任务状态显示、完成统计和响应式界面设计。
This commit is contained in:
@@ -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 <div>Hello "/todo"!</div>
|
||||
const { data: todos } = useSuspenseQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: () => getTodos(),
|
||||
})
|
||||
|
||||
const completedCount = todos.filter((todo) => todo.completed).length
|
||||
const totalCount = todos.length
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">
|
||||
我的待办事项
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
已完成 {completedCount} / {totalCount} 项任务
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-8 bg-white rounded-lg shadow-sm p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-700">完成进度</span>
|
||||
<span className="text-sm font-medium text-indigo-600">
|
||||
{totalCount > 0
|
||||
? Math.round((completedCount / totalCount) * 100)
|
||||
: 0}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div
|
||||
className="bg-gradient-to-r from-indigo-500 to-purple-600 h-2.5 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${totalCount > 0 ? (completedCount / totalCount) * 100 : 0}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Todo List */}
|
||||
<div className="space-y-3">
|
||||
{todos.length === 0 ? (
|
||||
<div className="bg-white rounded-lg shadow-sm p-12 text-center">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg
|
||||
className="mx-auto h-12 w-12"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500 text-lg">暂无待办事项</p>
|
||||
<p className="text-gray-400 text-sm mt-2">
|
||||
添加你的第一个任务开始吧！
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
todos.map((todo) => (
|
||||
<div
|
||||
key={todo.id}
|
||||
className={`bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 p-5 border-l-4 ${
|
||||
todo.completed
|
||||
? 'border-green-500 bg-gray-50'
|
||||
: 'border-indigo-500'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Checkbox */}
|
||||
<div className="flex-shrink-0 pt-1">
|
||||
<div
|
||||
className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all ${
|
||||
todo.completed
|
||||
? 'bg-green-500 border-green-500'
|
||||
: 'border-gray-300 hover:border-indigo-500'
|
||||
}`}
|
||||
>
|
||||
{todo.completed && (
|
||||
<svg
|
||||
className="w-4 h-4 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Todo Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3
|
||||
className={`text-lg font-medium ${
|
||||
todo.completed
|
||||
? 'text-gray-500 line-through'
|
||||
: 'text-gray-900'
|
||||
}`}
|
||||
>
|
||||
{todo.title}
|
||||
</h3>
|
||||
<div className="mt-2 flex items-center gap-2 text-xs text-gray-500">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
{new Date(todo.createdAt).toLocaleDateString('zh-CN')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Badge */}
|
||||
<div className="flex-shrink-0">
|
||||
<span
|
||||
className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
|
||||
todo.completed
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-indigo-100 text-indigo-800'
|
||||
}`}
|
||||
>
|
||||
{todo.completed ? '已完成' : '进行中'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Stats */}
|
||||
{todos.length > 0 && (
|
||||
<div className="mt-8 grid grid-cols-2 gap-4">
|
||||
<div className="bg-white rounded-lg shadow-sm p-4 text-center">
|
||||
<p className="text-2xl font-bold text-indigo-600">
|
||||
{totalCount - completedCount}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mt-1">待完成</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-sm p-4 text-center">
|
||||
<p className="text-2xl font-bold text-green-600">
|
||||
{completedCount}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mt-1">已完成</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user