文档样式：

创建项目目录

mkdir world-knowledge

cd world-knowledge

启动Claude code

claude

一句话下达任务

基于node.js 编写一个类似 https://api-docs.deepseek.com/zh-cn 网站的文档管理系统

Claude 展示的项目设计蓝图

空目录，可以开始新项目。让我先确认几个关键的技术选型问题。

⏺ User answered Claude's questions:
⎿ · 前端框架用哪个？ → React + Next.js
· 文档内容用什么格式存储？ → Markdown 文件
· 需要哪些核心功能？ → 全功能管理后台

⏺ 好的，React + Next.js + Markdown 文件 + 全功能管理后台。让我设计详细的实现方案。

⏺ Plan(Design doc management system)
⎿ Done (0 tool uses · 0 tokens · 0s)
(ctrl+o to expand)

⏺ Let me design the plan directly.

⏺ Updated plan
⎿ /plan to preview

⏺ 计划已写好，共 6 个阶段：

  1. Phase 1 — 项目初始化 + 核心库 (db, auth, documents)
  2. Phase 2 — 公开文档查看页 (侧边栏、Markdown 渲染、代码高亮、API 端点展示、TOC、搜索、暗色模式)
  3. Phase 3 — API 路由 (文档 CRUD + 搜索 + 版本历史)
  4. Phase 4 — 认证系统 (JWT 登录/注册 + 路由保护)
  5. Phase 5 — 管理后台 (仪表盘、文档列表、在线 Markdown 编辑器、新建/编辑/删除)
  6. Phase 6 — 用户管理 (角色编辑/权限控制)

技术栈: Next.js 14 + TypeScript + Tailwind CSS + SQLite + Markdown 文件

⏺ User approved Claude's plan
⎿ Plan saved to: ~/.claude/plans/zazzy-squishing-snowglobe.md · /plan to edit
API 文档管理系统 - 实现计划

 Context

 构建一个类似 DeepSeek API Docs 的文档管理系统，支持 Markdown 文件存储、在线编辑、用户认证、权限管理等全功能管理后台。

 技术栈

 - 框架: Next.js 14 (App Router) + TypeScript
 - 样式: Tailwind CSS
 - 数据库: SQLite (better-sqlite3) — 存储用户、权限、编辑历史
 - 文档存储: Markdown 文件 (content/docs/) — YAML frontmatter
 - 认证: JWT (jsonwebtoken + bcryptjs)
 - Markdown 渲染: react-markdown + remark-gfm + rehype-slug
 - 代码高亮: prism-react-renderer
 - 暗色模式: next-themes
 - Markdown 编辑器: @uiw/react-md-editor

 项目结构

 world-knowledge/
 ├── package.json
 ├── next.config.js
 ├── tailwind.config.ts
 ├── tsconfig.json
 ├── content/
 │   └── docs/                        # Markdown 文档文件
 │       ├── getting-started/
 │       │   └── introduction.md
 │       └── api-reference/
 │           └── chat-completions.md
 ├── src/
 │   ├── app/
 │   │   ├── layout.tsx               # 根布局 (ThemeProvider)
 │   │   ├── page.tsx                 # 首页 → 重定向到第一个文档
 │   │   ├── docs/
 │   │   │   └── [[...slug]]/
 │   │   │       └── page.tsx         # 文档查看页 (侧边栏+内容+TOC)
 │   │   ├── admin/
 │   │   │   ├── layout.tsx           # 管理后台布局
 │   │   │   ├── page.tsx             # 仪表盘
 │   │   │   ├── login/
 │   │   │   │   └── page.tsx         # 登录页
 │   │   │   └── documents/
 │   │   │       ├── page.tsx         # 文档列表
 │   │   │       ├── new/
 │   │   │       │   └── page.tsx     # 新建文档
 │   │   │       └── edit/
 │   │   │           └── [...slug]/
 │   │   │               └── page.tsx # 编辑文档
 │   │   └── api/
 │   │       ├── auth/
 │   │       │   ├── login/route.ts
 │   │       │   └── register/route.ts
 │   │       ├── documents/
 │   │       │   ├── route.ts         # GET 列表, POST 创建
 │   │       │   └── [...slug]/
 │   │       │       ├── route.ts     # GET/PUT/DELETE 单文档
 │   │       │       └── history/
 │   │       │           └── route.ts # GET 版本历史
 │   │       └── search/
 │   │           └── route.ts         # GET 搜索
 │   ├── components/
 │   │   ├── Sidebar.tsx              # 侧边栏导航 (树形结构)
 │   │   ├── TableOfContents.tsx      # 页面内目录 (右侧)
 │   │   ├── MarkdownRenderer.tsx     # Markdown 渲染组件
 │   │   ├── CodeBlock.tsx            # 代码高亮 + 复制按钮
 │   │   ├── ApiEndpoint.tsx          # API 端点展示 (方法+路径+示例)
 │   │   ├── SearchDialog.tsx         # 全局搜索弹窗
 │   │   ├── ThemeToggle.tsx          # 暗/亮模式切换
 │   │   └── admin/
 │   │       ├── AdminSidebar.tsx     # 管理后台侧边栏
 │   │       ├── DocumentEditor.tsx   # Markdown 在线编辑器
 │   │       └── UserTable.tsx        # 用户管理表格
 │   └── lib/
 │       ├── db.ts                    # SQLite 初始化 + 表创建
 │       ├── auth.ts                  # JWT 签发/验证, 密码哈希
 │       ├── documents.ts             # Markdown 文件读写 + frontmatter 解析
 │       ├── search.ts                # 全文搜索实现
 │       └── types.ts                 # TypeScript 类型定义
 └── middleware.ts                     # 路由保护 (admin 路径需认证)

 分阶段实现

 Phase 1: 项目初始化 + 核心基础

 1. npx create-next-app 初始化项目 (TypeScript, Tailwind, App Router)
 2. 安装依赖: better-sqlite3, jsonwebtoken, bcryptjs, react-markdown, remark-gfm, rehype-slug, prism-react-renderer, next-themes, gray-matter,
 @uiw/react-md-editor
 3. 配置 Tailwind + 暗色模式
 4. 创建 src/lib/types.ts — 类型定义
 5. 创建 src/lib/db.ts — SQLite 初始化 (users 表, document_history 表)
 6. 创建 src/lib/auth.ts — JWT 工具函数
 7. 创建 src/lib/documents.ts — 读写 Markdown 文件 + frontmatter 解析

 Phase 2: 文档查看页面 (公开端)

 8. 创建示例 Markdown 文档 (content/docs/)
 9. src/components/Sidebar.tsx — 侧边栏树形导航 (读取文档目录结构)
 10. src/components/MarkdownRenderer.tsx — Markdown 渲染 (含自定义组件映射)
 11. src/components/CodeBlock.tsx — 代码高亮 + 复制按钮
 12. src/components/ApiEndpoint.tsx — API 端点展示组件 (彩色方法标签, 请求/响应示例)
 13. src/components/TableOfContents.tsx — 从 markdown 标题提取 TOC
 14. src/app/docs/[[...slug]]/page.tsx — 文档查看页 (侧边栏 + 内容 + TOC 三栏布局)
 15. src/components/ThemeToggle.tsx — 暗/亮模式切换
 16. src/components/SearchDialog.tsx — 全局搜索

 Phase 3: API 路由

 17. src/app/api/documents/route.ts — 列出文档 + 创建文档
 18. src/app/api/documents/[...slug]/route.ts — 获取/更新/删除文档
 19. src/app/api/documents/[...slug]/history/route.ts — 版本历史
 20. src/app/api/search/route.ts — 搜索接口

 Phase 4: 认证系统

 21. src/app/api/auth/login/route.ts — 登录接口
 22. src/app/api/auth/register/route.ts — 注册接口 (管理员限制)
 23. src/app/admin/login/page.tsx — 登录页面
 24. middleware.ts — 路由保护

 Phase 5: 管理后台

 25. src/app/admin/layout.tsx — 后台布局 (侧边栏 + 顶部栏)
 26. src/components/admin/AdminSidebar.tsx — 后台侧边栏
 27. src/app/admin/page.tsx — 仪表盘 (文档数量/最近编辑)
 28. src/app/admin/documents/page.tsx — 文档列表 (搜索/筛选/排序)
 29. src/components/admin/DocumentEditor.tsx — Markdown 编辑器 (实时预览)
 30. src/app/admin/documents/new/page.tsx — 新建文档页
 31. src/app/admin/documents/edit/[...slug]/page.tsx — 编辑文档页
 32. src/app/admin/documents/page.tsx 添加删除功能

 Phase 6: 用户管理 (管理员)

 33. src/components/admin/UserTable.tsx — 用户管理表格
 34. 用户管理页面 (角色编辑/禁用/删除)

 数据库设计 (SQLite)

 -- 用户表
 CREATE TABLE users (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
   username TEXT UNIQUE NOT NULL,
   password_hash TEXT NOT NULL,
   role TEXT DEFAULT 'viewer',  -- admin, editor, viewer
   created_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );

 -- 文档编辑历史
 CREATE TABLE document_history (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
   file_path TEXT NOT NULL,
   content TEXT NOT NULL,
   edited_by INTEGER REFERENCES users(id),
   version INTEGER NOT NULL,
   created_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );

 Markdown Frontmatter 格式

 ---
 title: "Chat Completions"
 category: "API Reference"
 order: 1
 tags: ["api", "chat"]
 api_method: "POST"
 api_path: "/v1/chat/completions"
 ---

 验证方式

 1. npm run dev 启动开发服务器
 2. 访问 http://localhost:3000 — 看到文档首页, 侧边栏导航, 代码高亮
 3. 切换暗/亮模式正常
 4. 搜索功能返回匹配结果
 5. 访问 /admin/login — 登录管理后台
 6. 创建/编辑/删除文档正常
 7. 编辑后查看版本历史正常

⏺ 计划已批准，开始实施。先创建任务列表来跟踪进度。

一路回车Yes

如果不懂编程，闭眼敲击回车，一路Yes到底

项目构建完成总结

项目已全部完成。以下是最终总结：

文档管理系统 — 已构建完成

启动方式

cd /Users/liquancun/world-knowledge
npm run dev
访问 http://localhost:3000 查看文档，http://localhost:3000/admin 进入管理后台。

功能清单

公开端 (文档查看)

  • 三栏布局：侧边栏导航 + 内容区 + 页面内目录 (TOC)
  • Markdown 渲染 + 代码高亮 + 复制按钮
  • API 端点展示（彩色方法标签 GET/POST/PUT/DELETE）
  • 全文搜索（Cmd+K 快捷键）
  • 暗色/亮色模式切换
  • 响应式设计

管理后台

  • 登录页 /admin/login（默认账号：admin / admin123）
  • 仪表盘：文档数量、分类统计、最近编辑
  • 文档 CRUD：创建/编辑/删除 Markdown 文档
  • 在线 Markdown 编辑器（实时预览）
  • 用户管理：创建用户、角色分配（admin/editor/viewer）
  • JWT 认证 + 路由保护

项目结构

┌───────────────────────┬────────────────────────────────────────┐
│ 目录 │ 说明 │
├───────────────────────┼────────────────────────────────────────┤
│ content/docs/ │ Markdown 文档（5 篇示例文档） │
├───────────────────────┼────────────────────────────────────────┤
│ src/lib/ │ 核心库（数据库、认证、文档读写、搜索） │
├───────────────────────┼────────────────────────────────────────┤
│ src/components/ │ 公开端组件 │
├───────────────────────┼────────────────────────────────────────┤
│ src/components/admin/ │ 管理后台组件 │
├───────────────────────┼────────────────────────────────────────┤
│ src/app/api/ │ REST API（7 个接口） │
├───────────────────────┼────────────────────────────────────────┤
│ src/app/admin/ │ 管理后台页面 │
├───────────────────────┼────────────────────────────────────────┤
│ src/app/docs/ │ 文档查看页面 │
└───────────────────────┴────────────────────────────────────────┘

技术栈

Next.js 16 + TypeScript + Tailwind CSS + SQLite + JWT + react-markdown

✻ Sautéed for 4m 45s

My God，共耗时4分45秒，项目竣工

返回 关闭页面

历史沿革

站内导航

版权声明

  • 声明：本站99%+的代码由AI编写，主页面前端采用Bootstrap开源框架，后台控制台采用TailwindCSS开源样式，响应式设计，可适配多种终端，支持RSS、Markdown、大文件上传和语法高亮。
  • 本站所涉开源软件包括但不限于Nginx、PHP、MongoDB、Bootstrap、TailwindCSS、TinyMCE、iHover、SimplePie、ChartJs、Parsedown、Prism、Resumable、Claude等版权归原作者所有。

Copyright © 2026. 骏九文化 版权所有

Powered by Batata Ver 1.12.40