软件工程全生命周期文档模板与示例库 —— 基于 High-Fidelity Claymorphism 设计系统构建
覆盖项目计划、需求分析、概要/详细设计、用户手册、测试计划、测试报告、开发进度、项目总结、维护手册等全生命周期文档，提供 .docx / .xlsx / .pptx 标准化模板与示例。
- 7 大阶段 · 23 子分类 · 40+ 文档 —— 从可行性分析到维护手册全覆盖
- High-Fidelity Claymorphism —— 4 层阴影栈、糖果色调色板、物理反馈动效
- 原子化组件架构 —— Atom / Molecule / Organism 三层拆分，TypeScript 严格类型
- Mobile-First 响应式 —— 移动端单列 → 桌面端 Bento 网格渐进增强
- Vercel 一键部署 —— Vite + React 零配置上线
| 类别 | 技术 |
|---|---|
| 框架 | React 18 + TypeScript 5 |
| 构建 | Vite 5 |
| 样式 | Tailwind CSS 3（Claymorphism Design Tokens） |
| 字体 | Nunito（标题）+ DM Sans（正文） |
- Node.js ≥ 18.0
- npm ≥ 9.0（或 pnpm / yarn 等效包管理器）
npm installnpm run dev启动后访问 http://localhost:5173
npm run build构建产物输出至 dist/ 目录。
npm run previewnpx tsc --noEmit| 命令 | 说明 |
|---|---|
npm install |
安装项目依赖 |
npm run dev |
启动 Vite 开发服务器（热更新） |
npm run build |
类型检查 + 生产构建 |
npm run preview |
本地预览生产构建产物 |
dev-document/
├── public/ # 静态资源（文档文件，构建时复制到 dist/）
│ ├── 01 计划阶段/
│ ├── 02 需求阶段/
│ ├── 03 设计阶段/
│ ├── 04 开发阶段/
│ ├── 05 测试阶段/
│ ├── 06 验收阶段/
│ └── 99 其他模板/
├── src/
│ ├── components/
│ │ ├── atoms/ # 原子组件
│ │ │ ├── Badge.tsx # 文件类型徽章
│ │ │ ├── Blob.tsx # 背景浮动球
│ │ │ └── Button.tsx # Clay 按钮基元
│ │ ├── molecules/ # 分子组件
│ │ │ ├── DocItem.tsx # 文档项
│ │ │ ├── PaneHeader.tsx # 阶段标题栏
│ │ │ └── SubSection.tsx # 子分类
│ │ └── organisms/ # 组织组件
│ │ ├── AboutMeModal.tsx # 关于我弹窗
│ │ ├── Footer.tsx # 页脚
│ │ ├── Hero.tsx # 英雄区
│ │ ├── Pane.tsx # 阶段窗格
│ │ ├── StatusBar.tsx # 状态栏
│ │ └── TopActions.tsx # 右上角操作组
│ ├── data/
│ │ └── documents.ts # 文档数据源
│ ├── styles/
│ │ └── globals.css # 全局样式 + Clay 阴影工具类
│ ├── types/
│ │ └── index.ts # TypeScript 类型定义
│ ├── App.tsx # 根组件
│ └── main.tsx # 应用入口
├── index.html # HTML 模板
├── tailwind.config.js # Tailwind 扩展配置
├── vite.config.ts # Vite 配置
├── tsconfig.json # TypeScript 配置
└── package.json
本项目可零配置直接部署到 Vercel。
- 将本项目推送至 GitHub 仓库
- 登录 Vercel，点击 New Project
- 导入 GitHub 仓库，Vercel 自动识别为 Vite 项目
- 默认配置如下（无需修改）：
| 配置项 | 值 |
|---|---|
| Framework Preset | Vite |
| Build Command | npm run build |
| Output Directory | dist |
| Install Command | npm install |
- 点击 Deploy，等待构建完成即可访问
# 安装 Vercel CLI
npm i -g vercel
# 在项目根目录执行
vercel
# 部署到生产环境
vercel --prod本项目严格遵循 High-Fidelity Claymorphism 设计规范：
| 设计维度 | 规范 |
|---|---|
| 画布色 | #F4F1FA（冷调薰衣草白，非纯白） |
| 阴影 | 4 层阴影栈（外投影 + 高光 + 内色彩 + 内边缘） |
| 圆角 | ≥ 20px（按钮）→ 60px（大容器） |
| 字体 | Nunito（标题 700/800/900）+ DM Sans（正文 400/500/700） |
| 交互 | hover lift -translate-y + active squish scale-[0.92] |
| 动效 | clay-float / clay-breathe 关键帧 + prefers-reduced-motion 适配 |
| 阶段 | 文档类型 |
|---|---|
| 01 计划阶段 | 可行性分析、项目信息表、实施方案（PPT/Word）、进度计划 |
| 02 需求阶段 | 需求规格说明书 |
| 03 设计阶段 | 功能设计说明书、数据库设计说明书 |
| 04 开发阶段 | 系统提测申请单 |
| 05 测试阶段 | 测试用例、测试报告、测试计划 |
| 06 验收阶段 | 竣工报告、安装维护手册、培训文档、使用手册 |
| 99 其他文档 | 会议纪要、工时统计、项目周报/月报、进度确认 |
MIT