面向商户的产品架构总设计

✨ 背景

在开发我的电商平台项目 ShopStack 的过程中，我遇到了一个典型问题：

如何同时兼顾“面向商户的 landing page 展示” 与 “商户登录后的后台操作”？

这个问题并不新，但它一直困扰着许多中小型 SaaS 产品的架构设计。

后来，我从 Vercel 的行为中得到了灵感。

---

🔍 灵感来源：Vercel 的 redirect 行为

访问 vercel.com 时：

• 你是游客，看到的是干净清爽的 landing page；

• 如果你登录过，再访问首页会自动 redirect 到 /dashboard。

路径	作用
/	展示型 landing page，面向所有人
/dashboard	登录用户的工作区
/login	登录页，登录成功后 redirect 回 /dashboard

🧭 我的项目结构设计

我借鉴了 Vercel 的模式，重新规划了 ShopStack 项目结构，重点是：

✅ 保持首页纯净，只做展示

shopstack.com/ // landing page，介绍产品、引导注册

✅ 登录后重定向进入操作后台

shopstack.com/dashboard // 商户主后台
shopstack.com/dashboard/edit-template // 编辑模版 (Headless CMS Low Code)
shopstack.com/dashboard/products // 商品内容 CRUD

 

if (user) {
router.replace('/dashboard')
}

 

🏗️ 后台功能规划

登录后的 dashboard 提供两类能力：

1. 编辑模版：Headless CMS + Low Code 配置体验

• 商户选择预设模板（如 cool / general）

• 选择页面类型（如 landing / shopping）

• 勾选模块（如 HeroSection、CategorySection）

• 自定义模块字段（通过表单输入文字、图片等）

• 实时预览效果

2. 商品内容管理：经典 CMS 模式

• 添加 / 修改商品

• 管理分类

• 控制上下架与库存

 

🧠 为什么这样设计

目标	实现方式
保持首页轻量纯净	SSR + 静态页面，不夹杂登录逻辑
提升用户体验	登录后自动跳转 dashboard，减少思考路径
降低工程复杂度	清晰的路径划分 + 全部复用 Next.js App Router
未来易于拓展	后台内可继续添加 tab 或嵌套模块，互不干扰