danci 项目（一）：从需求到架构，一个单词学习系统为什么会这样设计

摘要：从单词学习这一核心需求出发，逐步推导后台管理系统、H5、Next.js、shadcn/ui 与 Tailwind CSS 的存在理由。重点不是罗列技术栈，而是理解"业务问题如何推动技术选择"。

一、先从业务开始，而不是从技术栈开始

开发一个项目时，很容易先列出一串技术：

text 复制代码

Next.js
Supabase
Drizzle
shadcn/ui
Tailwind CSS

但真正合理的顺序应该是：

text 复制代码

业务需求
↓
业务产生问题
↓
寻找解决方案
↓
选择合适的技术

技术不是项目的起点，需求才是。

danci 是一个单词学习系统。当前主要包含两个部分：

text 复制代码

danci
├── 后台管理系统
└── H5 单词学习应用

未来还可以继续扩展：

text 复制代码

danci
├── 后台管理系统
├── PC Web
├── H5
├── 小程序
└── 移动 App

但"未来支持多端"和"现在同时开发所有端"是两回事。项目早期更重要的是先把核心业务跑通。

二、为什么单词学习应用还需要后台管理系统

如果只有一个用户端，用户打开应用后可以：

text 复制代码

选择单词书
↓
开始背单词
↓
记录学习进度

很快就会出现另一个问题：

这些单词和单词书是谁维护的？

例如：

新增一本考研英语词汇书；
修改错误的单词释义；
删除过时的单词书；
更新某本单词书中的单词；
管理内容维护人员。

这些事情显然不能每次都让程序员修改源代码。

因此系统需要后台管理端。

可以把两端的职责简单理解为：

text 复制代码

后台管理系统
↓
维护内容

H5 / PC / App
↓
使用内容

整个系统因此形成：

text 复制代码

管理员
   ↓
后台管理系统
   ↓
数据库
   ↑
H5 / PC / App
   ↑
普通用户

三、后台第一阶段需要哪些功能

第一阶段没有必要一次做几十个模块。

最核心的两个模块是：

text 复制代码

单词书管理
管理员管理

1. 单词书管理

单词书例如：

text 复制代码

大学英语四级
大学英语六级
考研英语
雅思核心词汇
托福核心词汇

后台需要完成最基本的 CRUD：

text 复制代码

Create   创建
Read     查询
Update   修改
Delete   删除

也就是：

text 复制代码

创建单词书
查看单词书
编辑单词书
删除单词书

例如 /books 页面可以展示：

单词书	单词数量	操作
四级核心词汇	2600	编辑 / 删除
六级核心词汇	3200	编辑 / 删除
考研核心词汇	5500	编辑 / 删除

CRUD 本身并不复杂，但它是后台管理系统最典型的基础业务。

2. 管理员管理

后台不能让任何用户都进入。

因此需要管理员身份。

项目可以区分：

text 复制代码

超级管理员
普通管理员

超级管理员拥有更高权限，例如：

创建管理员；
删除管理员；
管理单词书；
管理单词。

普通管理员则更偏向内容维护。

四、第一个管理员从哪里来

这里会遇到一个很典型的业务问题：

如果只有管理员才能添加管理员，那么第一个管理员是谁创建的？

因此系统需要一个初始化流程。

例如：

text 复制代码

系统第一次运行
↓
发现不存在超级管理员
↓
进入超级管理员注册页面
↓
创建第一个超级管理员
↓
以后关闭公开注册入口

页面流程可以设计为：

text 复制代码

首次访问 /
↓
检查是否已有超级管理员
↓
没有
↓
/signup
↓
创建超级管理员
↓
/ signin
↓
/books

后续再访问系统：

text 复制代码

/
↓
/signin
↓
登录成功
↓
/books

这说明一个重要问题：

页面流程不是由 UI 决定的，而是由业务规则决定的。

五、为什么选择 Next.js

确定了页面和业务以后，应用至少需要：

text 复制代码

页面
路由
React 组件
服务端逻辑
数据访问
身份认证

Next.js 可以作为整个 Web 应用的主体框架。

例如：

text 复制代码

/signup
/signin
/books
/admin-users

都可以放在同一个 Next.js 项目中组织。

可以简单理解为：

text 复制代码

Next.js
↓
负责组织整个 Web 应用

它不是 UI 组件库，也不是数据库。

六、为什么后台管理系统需要组件库

后台管理系统会大量重复出现：

text 复制代码

Button
Input
Form
Table
Dialog
Select
Sidebar
Dropdown
Pagination
AlertDialog

这些组件在不同后台项目中的基本结构高度相似。

如果每个项目都重新实现按钮、弹窗、表格、输入框和侧边栏，会产生大量重复劳动。

因此现代前端项目通常会使用成熟的组件方案。

七、为什么使用 shadcn/ui

danci 使用：

text 复制代码

shadcn/ui
+
Tailwind CSS

shadcn/ui 和传统组件库有一个明显区别。

像 Ant Design 这类组件库，通常是：

text 复制代码

安装 npm 包
↓
import 组件
↓
使用第三方包中的实现

而 shadcn/ui 更接近：

text 复制代码

选择需要的组件
↓
把组件源码加入项目
↓
继续自行修改和维护

项目中可能出现：

text 复制代码

components/
└── ui/
    ├── button.tsx
    ├── input.tsx
    ├── dialog.tsx
    └── table.tsx

这些代码最终属于项目本身。

这带来两个明显优势：

定制能力强；
项目内部的 UI 规范更容易统一。

八、Tailwind CSS 在这里负责什么

shadcn/ui 和 Tailwind CSS 经常一起出现，但职责不同。

可以理解为：

text 复制代码

shadcn/ui
↓
提供可复用组件

Tailwind CSS
↓
负责组件的样式表达

例如一个按钮最终仍然需要 padding、字体、颜色、圆角、hover、disabled 等样式。

因此三者的关系可以整理为：

text 复制代码

Next.js
↓
应用框架

shadcn/ui
↓
UI 组件

Tailwind CSS
↓
样式系统

九、为什么 shadcn/ui 对 AI Coding 比较友好

当 Coding Agent 接到一个任务：

text 复制代码

实现"创建单词书"弹窗

如果项目已经存在：

text 复制代码

components/ui/dialog.tsx
components/ui/input.tsx
components/ui/button.tsx

AI 可以直接读取和复用这些已有组件。

于是实现更可能遵循现有 Dialog、Input、Button，而不是每次重新生成一套 UI。

这背后的工程思想是：

项目规范越明确，开发者和 AI 都越不需要猜。

十、H5、PC、Android、iOS 和桌面端分别是什么

一个应用可以运行在不同环境中。

PC Web

PC Web 主要运行在电脑浏览器中，例如 Chrome、Safari、Edge。

常见场景包括：

text 复制代码

后台管理
办公系统
内容网站
电商网站

H5

在国内 Web 开发语境中，H5 通常指：

面向手机浏览器开发的移动端 Web 页面或 Web 应用。

它本质上仍然属于 Web 技术体系：

text 复制代码

HTML
CSS
JavaScript

与 PC Web 相比，它更关注手机屏幕适配、触摸操作、响应式布局和移动端交互。

所以 PC Web 和 H5 底层都属于 Web，只是主要运行设备和界面适配目标不同。

Android / iOS

Android 和 iOS 属于移动客户端平台。

如果希望使用一套代码覆盖多个移动平台，可以考虑：

text 复制代码

React Native
Flutter

桌面客户端

Windows、macOS、Linux 上的桌面应用可以使用原生技术开发，也可以使用 Electron 这类方案。

Electron 允许开发者继续使用 HTML、CSS、JavaScript、React 来构建桌面应用界面。

十一、为什么不应该一开始就同时开发所有端

项目早期最重要的是先验证核心业务。

更合理的顺序通常是：

text 复制代码

先完成后台
+
先完成 H5
↓
核心业务跑通
↓
根据需求扩展 PC / App / 小程序

"未来多端"应该是一种扩展方向，而不是项目早期的负担。

十二、把整条主线串起来

danci 的第一条主线可以整理为：

text 复制代码

用户需要背单词
↓
需要单词内容
↓
内容需要维护
↓
需要后台管理系统
↓
后台需要管理员权限
↓
后台需要大量通用 UI
↓
使用 shadcn/ui
↓
整个 Web 应用需要框架
↓
使用 Next.js

这条链路比单纯记住"用了哪些技术"更重要。

真正的项目设计不是先决定使用某个技术，再想办法把它塞进项目；而应该是：

需求产生问题，问题推动架构和技术选择。