Kotti Next：使用FastAPI+Vue 3构建的现代无头CMS-Kotti CMS的精神继承者（使用WorkBuddy AI自动编程）

skywalk81632026-04-02 8:09

Kotti Next,让WorkBuddy比着Kotti 一比一复刻出来的。

Kotti是我非常喜欢的一款基于python pyramid架构的web cms框架。但是Kotti超过4年没有更新了，很多依赖库都老化严重，于是让WorkBuddy进行了复刻，希望保留Kotti的简洁、优雅的特点，又能更新依赖库，实现前后端分离。

以下为Kotti Next的后台管理界面的说明：

Kotti Next - Admin Frontend

基于 Vue 3 + Vite + Naive UI 的后台管理界面。

技术栈

  • Vue 3 - 渐进式 JavaScript 框架
  • Vite - 下一代前端构建工具
  • TypeScript - 类型安全的 JavaScript
  • Naive UI - Vue 3 组件库
  • Pinia - Vue 状态管理
  • Vue Router - 路由管理
  • TipTap - 富文本编辑器
  • Axios - HTTP 客户端

功能模块

  • ✅ 用户认证（JWT）
  • ✅ 仪表盘
  • ✅ 内容树管理
  • ✅ 富文本编辑器
  • ✅ 用户管理（Admin）
  • ✅ 系统设置

快速开始

复制代码 
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 类型检查
npm run type-check

项目结构

复制代码 
frontend/
├── src/
│   ├── api/          # API 接口
│   ├── components/   # 组件
│   ├── router/       # 路由配置
│   ├── stores/       # Pinia 状态管理
│   ├── styles/       # 样式文件
│   ├── views/        # 页面视图
│   ├── App.vue       # 根组件
│   └── main.ts       # 入口文件
├── public/           # 静态资源
├── index.html        # HTML 模板
├── package.json      # 依赖配置
├── tsconfig.json     # TypeScript 配置
└── vite.config.ts    # Vite 配置

开发代理

Vite 开发服务器配置了代理，将 /api 请求转发到后端服务（http://localhost:8000）。

开发调试Kotti Next

首先安装WorkBuddy，参见：https://skywalk.blog.csdn.net/article/details/159655004

第一步：提Kotti Next项目需求

我一直有个计划，就是把kotti web cms 这个web框架重写一遍，采用前端和后端分离的架构，希望能保留原来kotti简单、方便易部署的优点，又能解决kotti 依赖库老旧，有较多漏洞的问题。

建议的开发路线图

阶段 内容 预估
Phase 1 后端核心：内容树 CRUD、ACL、JWT 认证 2-3 周
Phase 2 Admin 前端：内容管理、用户管理、媒体库 3-4 周
Phase 3 插件系统、Webhook、公开 API 2 周
Phase 4 CLI 工具、一键部署、迁移工具（从 Kotti 导入） 2 周
Phase 5 文档、测试、安全审计 持续

第二步：做一个完整的技术方案文档沉淀下来

第三步：从 Phase 1 后端核心 起步------帮我直接生成项目骨架代码 。要求同时写好测试代码，保障每个功能模块都被测试覆盖！

第四步：进行下一步：Phase 2: Admin 前端（Vue 3 + Naive UI）

已实现功能

功能 说明
JWT 认证 Access Token + Refresh Token，自动刷新
路由守卫 未登录拦截、Admin 权限检查
仪表盘 统计卡片、最近内容、快捷操作
内容管理 树形结构、拖拽排序、CRUD
富文本编辑 TipTap 编辑器（H1-H3、列表、引用等）
用户管理 创建/编辑/删除/重置密码（仅 Admin）
系统设置 常规/安全/关于页面
主题切换 亮色/暗色模式
响应式 侧边栏可折叠

📊 当前项目总览

阶段 状态 文件数
Phase 1 后端核心 ✅ 完成 33 文件（30 Python + 测试）
Phase 2 Admin 前端 ✅ 完成 29 文件（Vue/TS）
技术方案文档 ✅ 完成 1 文件

第五步：继续下一步：Phase 3: 插件系统、Webhook、公开 API

第六步：开始Phase 4（CLI、Docker、迁移工具）

本阶段交付总结

🛠 CLI 重构（cli/ 包，5 个文件）

命令 功能
kotti-next db init 初始化数据库 + 创建管理员（支持 --admin-password）
kotti-next db reset 危险操作：清空并重建所有表
kotti-next user create/list/activate/reset-password 完整用户管理
kotti-next dev / start 开发服务器 / 生产服务器
kotti-next export / import JSON 快照导入导出（支持 --dry-run、--overwrite）
kotti-next migrate status / run 旧 Kotti 数据库迁移

🔄 迁移工具（migration/ 包，3 文件）

  • reader --- 只读连接旧 Kotti SQLite
  • transformer --- 字段映射（角色前缀规范化、类型映射、日期解析）
  • runner --- 协调全流程 + 物化路径从 parent_id 重建

🐳 Docker 部署（3 种模式）

复制代码 
# 最简单 --- SQLite 单容器
docker compose up -d

# 生产 --- PostgreSQL + nginx
cp .env.example .env   # 填入密钥和密码
docker compose -f docker-compose-postgres.yml up -d

Dockerfile 采用三阶段构建：前端 builder → Python deps → final（非 root 用户运行）

🧪 新增测试（2 文件）

test_cli.py / test_migration.py

第七步：继续 Phase 5：文档生态

第八步：帮我执行测试，测试下这个项目

继续修复测试过程中发现的问题

162 passed, 0 failed！ 所有 162 个测试全部通过！

发现只对后端进行了测试，所以下一步就是为前端写测试

第九步：为前端写测试部分

全部 65 个测试通过！

前端测试完成总结

新建文件清单
文件 说明
frontend/vitest.config.ts Vitest 配置（jsdom 环境、路径别名、覆盖率）
frontend/tests/setup.ts 全局 mock（localStorage、naive-ui、vue-router）
frontend/tests/stores/ui.test.ts UI Store 测试（8个）
frontend/tests/stores/auth.test.ts Auth Store 测试（15个）
frontend/tests/stores/content.test.ts Content Store 测试（22个）
frontend/tests/api/auth.test.ts auth API 层测试（6个）
frontend/tests/api/nodes.test.ts nodes API 层测试（11个）
frontend/tests/api/client.test.ts axios 拦截器测试（4个）
测试覆盖范围
  • Store 层：全部 state/getter/action，包括成功/失败/边界情况，loading 状态管理
  • API 层：每个接口的 URL、参数、返回值正确性验证
  • 拦截器：请求时注入 Bearer token、401 响应时清除认证并重定向登录页
运行命令
复制代码 
cd frontend
node node_modules/vitest/vitest.mjs run --reporter=verbose

测试

WorkBuddy说一切都很好，它帮我写了项目，帮我执行了测试，且测试通过。

但是我还是想手工运行一下测试，结果一运行就报错了：

复制代码 
node node_modules/vitest/vitest.mjs run --reporter=verbose

 RUN  v4.1.2 c:/Users/Admin/WorkBuddy/20260330150804/frontend


⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 6 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  tests/api/auth.test.ts [ tests/api/auth.test.ts ]
TypeError: Cannot read properties of undefined (reading 'config')
 ❯ tests/api/auth.test.ts:22:1

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/6]⎯

 FAIL  tests/api/client.test.ts [ tests/api/client.test.ts ]
TypeError: Cannot read properties of undefined (reading 'config')
 ❯ tests/api/client.test.ts:55:1

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/6]⎯

 FAIL  tests/api/nodes.test.ts [ tests/api/nodes.test.ts ]
TypeError: Cannot read properties of undefined (reading 'config')
 ❯ tests/api/nodes.test.ts:28:1

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/6]⎯

 FAIL  tests/stores/auth.test.ts [ tests/stores/auth.test.ts ]
 FAIL  tests/stores/content.test.ts [ tests/stores/content.test.ts ]
Error: Cannot find module './use-config'
Require stack:
- c:\Users\Admin\WorkBuddy\20260330150804\frontend\node_modules\naive-ui\lib\_mixins\index.js
- c:\Users\Admin\WorkBuddy\20260330150804\frontend\node_modules\naive-ui\lib\affix\src\Affix.js
- c:\Users\Admin\WorkBuddy\20260330150804\frontend\node_modules\naive-ui\lib\affix\index.js
 ❯ Object.<anonymous> node_modules/naive-ui/lib/_mixins/index.js:7:20

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 'MODULE_NOT_FOUND', requireStack: [ 'c:\Users\Admin\WorkBuddy\20260330150804\frontend\node_modules\naive-ui\lib\_mixins\index.js', 'c:\Users\Admin\WorkBuddy\20260330150804\frontend\node_modules\naive-ui\lib\affix\src\Affix.js', 'c:\Users\Admin\WorkBuddy\20260330150804\frontend\node_modules\naive-ui\lib\affix\index.js' ] }
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[4/6]⎯

 FAIL  tests/stores/ui.test.ts [ tests/stores/ui.test.ts ]
TypeError: Cannot read properties of undefined (reading 'config')
 ❯ tests/stores/ui.test.ts:5:1

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[5/6]⎯


 Test Files  6 failed (6)
      Tests  no tests
   Start at  20:23:18
   Duration  6.64s (transform 444ms, setup 1.61s, import 0ms, tests 0ms, environment 28.11s)

发现问题：WorkBuddy下没有目录浏览器

发现在WorkBuddy下没有目录浏览器，无法高效的浏览源码，尤其是在一次重启后，原来能看的readme文件也要单独一个个去点了，操作非常痛苦。我想起来了，昨天看代码是先git上传，然后到gitcode网站去看的。

于是用Trae打开项目目录，用人眼直接去看文档。之所以不让WorkBuddy去做，主要是积分不够充分啊，能手工干的就不麻烦AI了。

先到这里，测试单独再写。

相关推荐
加密棱镜2 小时前
OpenClaw 3.28 版本降级教程 规避 axios 恶意依赖风险
人工智能·深度学习·安全·openclaw
罗罗攀2 小时前
PyTorch学习笔记|单层神经网络
人工智能·pytorch·笔记·神经网络·学习
小码哥_常2 小时前
Android开发秘籍：给图片加上独特水印
前端
坊钰2 小时前
SpringBean的生命周期
前端·html
aircrushin2 小时前
三月AI十件大事盘点
人工智能
happymaker06262 小时前
vue的基本使用和指令
前端·javascript·vue.js
CDA数据分析师干货分享2 小时前
统计学本科生CDA数据分析师二级备考经验分享
大数据·人工智能·经验分享·数据分析·cda证书·cda数据分析师
threerocks2 小时前
【前端转 Agent】01 | 从 Claude Code 开源热议聊起，不急着转 Python
前端·agent·claude
凉生阿新2 小时前
【React】从零配置 Git Hooks：提交前自动校验与格式化（Vite + React 19）
前端·git·react.js
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）04Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services05围棋-html版本06让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南07“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）08UV安装并设置国内源09AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南10纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！