full-stack-demo

# PRD: 全栈演示应用 ## 概述 一个完整的全栈应用程序，展示 Loki Mode 的端到端能力。一个带有标签的简单书签管理器。 ## 目标用户 想要保存和整理书签的用户。 ## 功能 ### 核心功能 1. **添加书签** - 保存带有标题和可选标签的 URL 2. **查看书签** - 列出所有带有搜索/过滤功能的书签 3. **编辑书签** - 更新标题、URL 或标签 4. **删除书签** - 移除书签 5. **标签管理** - 创建、查看并按标签过滤 ### 用户流程 1. 用户打开应用 → 查看书签列表 2. 点击“添加书签” → 出现表单 3. 输入 URL、标题、标签 → 提交 4. 书签出现在列表中 5. 可以按标签过滤或按标题搜索 6. 可以编辑或删除任何书签 ## 技术栈 ### 前端 - React 18 + TypeScript - Vite (打包) - TailwindCSS (样式) - React Query (数据获取) ### 后端 - Node.js 18+ - Express.js - SQLite + better-sqlite3 - zod (验证) ### 结构 / ├── frontend/ │ ├── src/ │ │ ├── components/ │ │ ├── hooks/ │ │ ├── types/ │ │ └── App.tsx │ ├── package.json │ └── vite.config.ts ├── backend/ │ ├── src/ │ │ ├── routes/ │ │ ├── db/ │ │ └── index.ts │ ├── package.json │ └── tsconfig.json └── README.md ## API 端点 ### 书签 - `GET /api/bookmarks` - 列出所有 (查询参数: `?tag=`, `?search=`) - `POST /api/bookmarks` - 创建新书签 - `PUT /api/bookmarks/:id` - 更新书签 - `DELETE /api/bookmarks/:id` - 删除书签 ### 标签 - `GET /api/tags` - 列出所有标签及计数 ## 数据库架构 sql CREATE TABLE bookmarks ( id INTEGER PRIMARY KEY, url TEXT NOT NULL, title TEXT NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE tags ( id INTEGER PRIMARY KEY, name TEXT UNIQUE NOT NULL ); CREATE TABLE bookmark_tags ( bookmark_id INTEGER REFERENCES bookmarks(id), tag_id INTEGER REFERENCES tags(id), PRIMARY KEY (bookmark_id, tag_id) ); ## 要求 - 全程使用 TypeScript - 输入验证 (前端 + 后端) - 带有用户反馈的错误处理 - 加载状态 - 空状态 - 响应式设计 ## 测试 - 后端: Jest + supertest 进行 API 测试 - 前端: 基础组件测试 (可选) - E2E: 手动测试清单 ## 超出范围 - 用户身份验证 - 导入/导出 - 浏览器扩展 - 云部署 - 实时同步 ## 成功标准 - 所有 CRUD 操作均可正常工作 - 搜索和过滤