admin/nanocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4d1ab1548cb495ca56be526e7fb2e0f98ef711ea
nanocode/new-media-platform/website-new/docs/ROADMAP.md
T
Ubuntu 32b43f85bd a
2026-07-03 16:58:28 +08:00

8.5 KiB
Raw Blame History

实现路线图

开发原则

"做完一个模块，测试一个模块，保证每一步的实现都能使用。"

第一阶段：基础架构搭建（第 1 步）

目标

搭建前后端基础架构，确保开发环境可用，前后端能正常通信。

任务清单

1.1 后端基础架构

  • 创建项目目录结构
  • 初始化 Python 虚拟环境
  • 安装依赖：FastAPI, SQLAlchemy, Pydantic, python-jose, passlib, bcrypt, uvicorn
  • 创建 app/main.py - FastAPI 入口
  • 创建 app/database.py - SQLite 连接配置
  • 创建 app/config.py - 环境配置
  • 配置 CORS 允许前端访问
  • 配置自动 Swagger 文档
  • 测试：启动后端，访问 /docs 确认文档页面正常

1.2 前端基础架构

  • 使用 Vite 创建 React 项目
  • 安装依赖：tailwindcss, react-router, axios, swiper, lucide-react
  • 配置 TailwindCSS 4
  • 创建基础目录结构
  • 配置 API 请求基础路径
  • 测试：启动前端，确认页面正常显示

验收标准

# 后端启动成功
cd backend && uvicorn app.main:app --reload --port 10003
# 访问 http://localhost:10003/docs 能看到 Swagger 文档

# 前端启动成功
cd frontend && npm run dev
# 访问 http://localhost:10002 能看到默认 React 页面

第二阶段：数据模型与认证（第 2 步）

目标

建立数据库模型，实现管理员认证功能。

任务清单

2.1 数据库模型

  • 创建 app/models/admin.py - 管理员模型
  • 创建 app/models/home_module.py - 首页模块模型
  • 创建 app/models/nav_menu.py - 导航菜单模型
  • 创建 app/models/setting.py - 系统设置模型
  • 创建数据库初始化脚本
  • 创建默认管理员账号 (admin/admin123)
  • 测试：确认数据库表创建成功

2.2 认证模块

  • 创建 app/auth.py - JWT 认证工具
  • 创建 app/routers/auth.py - 登录/获取信息/修改密码接口
  • 创建登录依赖 get_current_admin
  • 测试：使用 Swagger 测试登录接口

2.3 后台登录页面

  • 创建 views/admin/Login.jsx
  • 实现登录表单
  • 调用登录 API
  • Token 本地存储
  • 登录成功跳转
  • 测试：能正常登录并跳转到后台

验收标准

# 1. 数据库初始化成功
sqlite3 backend/cms.db ".tables"
# 应显示: admins, home_modules, nav_menus, settings

# 2. 登录接口正常
curl -X POST http://localhost:10003/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"username":"admin","password":"admin123"}'
# 返回包含 token 的 JSON

# 3. 前端登录页面正常
# 访问 http://localhost:10002/admin/login 能看到登录表单
# 输入 admin/admin123 登录成功

第三阶段：首页模块管理（第 3 步）⭐ 核心

目标

实现首页模块化功能，支持后台配置，前台展示。

任务清单

3.1 首页模块后端 API

  • 创建 app/routers/home_modules.py
  • GET /api/home/modules - 前台获取启用的模块
  • GET /api/admin/home/modules - 后台获取所有模块
  • GET /api/admin/home/modules/:id - 获取单个模块详情
  • PUT /api/admin/home/modules/:id - 更新模块
  • PUT /api/admin/home/modules/sort - 批量更新排序
  • PUT /api/admin/home/modules/:id/toggle - 切换启用状态
  • 测试：所有接口在 Swagger 中测试通过

3.2 首页模块后台管理页面

  • 创建 views/admin/Dashboard.jsx - 后台首页仪表盘
  • 创建 views/admin/HomeModules.jsx - 模块列表页
    • 显示所有模块（名称、类型、排序、启用状态）
    • 拖拽排序功能
    • 启用/禁用开关
    • 编辑按钮跳转
  • 创建 views/admin/HomeModuleEdit.jsx - 模块编辑页
    • 基础信息编辑（标题、副标题）
    • 内容编辑（根据模块类型不同表单）
    • 样式配置（背景色、内边距）
    • 保存功能
  • 创建 components/layout/AdminLayout.jsx - 后台布局
  • 测试：能在后台增删改查模块

3.3 首页模块前台展示组件

  • 创建 components/modules/BannerModule.jsx - 轮播图
  • 创建 components/modules/FeaturesModule.jsx - 产品优势
  • 创建 components/modules/NewsModule.jsx - 新闻动态
  • 创建 components/modules/PartnersModule.jsx - 合作伙伴
  • 创建 components/modules/DownloadsModule.jsx - APP下载
  • 创建 components/modules/ContactModule.jsx - 联系方式
  • 创建 components/modules/HtmlModule.jsx - 自定义HTML

3.4 首页页面

  • 创建 views/home/Index.jsx
  • 调用 /api/home/modules 获取模块数据
  • 根据模块类型渲染对应组件
  • 按 sort_order 排序
  • 过滤未启用的模块
  • 测试：首页能正确展示所有启用的模块

验收标准

# 1. 后台能管理模块
# 访问 http://localhost:10002/admin
# 能看到模块列表，可以拖拽排序、启用/禁用、编辑内容

# 2. 前台能展示模块
# 访问 http://localhost:10002/
# 能看到按顺序排列的各个模块

# 3. 修改实时生效
# 在后台修改模块内容或顺序
# 刷新前台页面立即看到变化

第四阶段：导航与布局（第 4 步）

目标

实现导航栏和页脚，支持后台配置导航菜单。

任务清单

4.1 导航菜单后端 API

  • 创建 app/routers/nav_menus.py
  • GET /api/nav - 前台获取启用菜单
  • GET /api/admin/nav - 后台获取所有菜单
  • POST /api/admin/nav - 创建菜单
  • PUT /api/admin/nav/:id - 更新菜单
  • DELETE /api/admin/nav/:id - 删除菜单

4.2 导航菜单后台管理

  • 创建 views/admin/NavMenus.jsx
  • 菜单列表展示
  • 新增菜单表单
  • 编辑菜单
  • 删除菜单确认
  • 排序调整

4.3 前台导航和页脚

  • 创建 components/layout/Navbar.jsx
  • 动态渲染导航菜单
  • 移动端汉堡菜单
  • 创建 components/layout/Footer.jsx
  • 从 settings 读取公司信息
  • 应用到所有页面

验收标准

# 1. 后台能管理导航
# 访问 http://localhost:10002/admin/nav
# 能增删改查导航菜单

# 2. 前台显示正确
# 访问 http://localhost:10002/
# 导航栏显示配置的菜单，点击能跳转
# 页脚显示公司信息

第五阶段：系统设置（第 5 步）

目标

实现系统设置功能，支持配置网站基本信息。

任务清单

5.1 设置后端 API

  • 创建 app/routers/settings.py
  • GET /api/settings - 前台获取公开设置
  • GET /api/admin/settings - 后台获取所有设置
  • PUT /api/admin/settings - 批量更新设置

5.2 设置后台管理

  • 创建 views/admin/Settings.jsx
  • 网站信息设置（名称、Logo、Favicon）
  • 公司信息设置（地址、电话、邮箱）
  • SEO 设置（标题、描述、关键词）
  • 备案信息设置

5.3 文件上传

  • 创建 app/routers/upload.py
  • POST /api/upload/image - 图片上传
  • 限制文件类型和大小
  • 生成唯一文件名
  • 存储到 public/uploads

验收标准

# 1. 后台能修改设置
# 访问 http://localhost:10002/admin/settings
# 能修改网站名称、上传 Logo

# 2. 设置生效
# 修改后前台导航栏显示新 Logo
# 页脚显示新公司信息

第六阶段：数据迁移与优化（后续）

目标

导入原有网站的内容数据，优化性能和体验。

任务清单（暂不实现）

  • 分析原网站数据结构
  • 编写数据迁移脚本
  • 导入新闻数据
  • 导入产品数据
  • 导入图片资源
  • 图片懒加载优化
  • SEO 优化

开发检查清单

每个步骤完成后，确认以下事项：

  • 代码已提交到 Git
  • 功能在本地测试通过
  • API 文档已更新
  • 无明显 Bug
  • 代码有适当注释

端口分配

服务 端口 说明
前端开发 5173 Vite 默认
前端生产 10002 serve 部署
后端 API 10003 uvicorn

下一步行动

当前准备开始：第一阶段 - 基础架构搭建

等待用户确认后，开始编写代码。

Reference in New Issue View Git Blame Copy Permalink