website 功能清单
🎨 一、前台展示系统 (Public Portal)
核心目标: 极速加载、沉浸式体验、转化（让访客联系你）。
1. 全局通用模块 (Global)
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| 响应式导航栏 | 包含 Logo、菜单项、主题切换开关、语言切换。移动端自动折叠为汉堡菜单。 | 滚动时改变背景透明度 (Glassmorphism)；移动端手势支持。 |
| 多语言支持 (i18n) | 支持中文/英文一键切换，所有文本动态替换，URL 带语言前缀 (/en/about)。 | 使用 next-intl，SEO 友好 (hreflang)。 |
| 深色/浅色模式 | 默认跟随系统，支持手动强制切换，记住用户偏好。 | Tailwind dark: 类，平滑过渡动画。 |
| 全局搜索 | 快速搜索文章标题、项目名称、标签。支持快捷键 Cmd+K 唤起。 | 本地 Fuse.js 模糊搜索或 Algolia 集成。 |
| 页脚 (Footer) | 版权信息、社交媒体图标链、备案信息、回到顶部按钮。 | 社交图标 Hover 动效。 |
| SEO 元数据管理 | 每个页面动态生成 Title, Description, Keywords, Open Graph 图片。 | 结构化数据 (JSON-LD) 注入，利于 Google/百度收录。 |
2. 首页 (Home)
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| Hero 区域 | 3D 头像/插画、动态打字机效果 Slogan、CTA 按钮 (查看作品/联系我)。 | 使用 Framer Motion 或 GSAP 做入场动画。 |
| 技术栈跑马灯 | 无限滚动的技术图标墙 (React, TS, Node, Docker 等)。 | CSS Animation 或 JS 控制无缝滚动。 |
| 精选项目展示 | 卡片式布局，展示 3-4 个代表作，带悬停放大和详情预览。 | 图片懒加载 (Lazy Load)，Hover 显示遮罩层。 |
| 数据概览 | 动态数字计数：代码行数、项目数、咖啡杯数、工作年限。 | 数字滚动动画。 |
| 最新博客摘要 | 展示最近 3 篇文章的标题、摘要和发布时间。 | 骨架屏 (Skeleton) 加载状态。 |
3. 作品集页面 (Projects)
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| 高级筛选器 | 按技术栈 (React/Vue)、类型 (Web/App/Tool)、状态 (已完成/进行中) 筛选。 | URL 参数同步筛选状态，支持浏览器后退。 |
| 项目卡片网格 | 瀑布流或网格布局，展示封面、标题、标签、简短描述。 | 响应式网格，移动端单列，桌面端三列。 |
| 项目详情页 | 核心页面。包含：项目背景、我的角色、技术架构图、难点与解决方案、高清截图/视频演示、在线演示链接、GitHub 源码链接。 | 图片灯箱 (Lightbox) 预览；代码块高亮复制；架构图可缩放。 |
| 相关推荐 | 底部推荐同标签的其他项目。 | 基于标签权重的简单推荐算法。 |
4. 个人简历页面 (Resume/CV)
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| 时间轴经历 | 垂直时间轴展示工作经历、教育背景。 | 滚动视差效果，节点高亮。 |
| 技能可视化 | 雷达图或进度条展示技能熟练度（用“精通/熟悉/了解”标签）。 | 使用 Recharts 或 Chart.js 绘制动态图表。 |
| 证书与奖项 | 卡片展示证书缩略图，点击查看详情。 | 模态框展示证书大图。 |
| PDF 下载 | 提供最新版简历 PDF 下载，支持在线预览。 | 浏览器原生 PDF 预览或嵌入 viewer。 |
5. 博客系统 (Blog)
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| 文章列表 | 支持分页或无限滚动，按分类/标签筛选。 | 阅读时间估算显示。 |
| 文章详情页 | Markdown 渲染，目录导航 (TOC)，代码高亮，引用块样式。 | 右侧悬浮目录，点击平滑滚动定位；代码块一键复制。 |
| 阅读进度条 | 顶部固定进度条，随滚动增加。 | 监听 scroll 事件计算百分比。 |
| 评论系统 | 接入 Giscus (基于 GitHub Issues) 或自研简易评论。 | 支持 Markdown 评论，实时通知。 |
| 分享功能 | 一键分享到 Twitter, LinkedIn, 微信 (生成海报)。 | 调用 Web Share API。 |
6. 联系我 (Contact)
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| 联系表单 | 姓名、邮箱、主题、内容。带前端验证 (Zod/Yup)。 | 提交后防抖，成功/失败 Toast 提示。 |
| 直接联系方式 | 展示邮箱 (点击复制)、微信二维码 (Hover 显示)、社交媒体链接。 | 邮箱地址混淆防爬虫。 |
| 留言反馈 | 提交后存入数据库，后台可查看。 | 简单的防刷机制 (如 HoneyPot 字段)。 |
🛠️ 二、后台管理系统 (Admin Dashboard)
核心目标: 高效内容生产、数据可视化、安全可控。
注：此系统需登录访问，建议自定义一个特定的路由前缀，如 /admin
1. 认证与权限 (Auth)
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| 管理员登录 | 账号密码登录，支持记住我。 | JWT 令牌管理，HttpOnly Cookie 存储。 |
| 登出与会话管理 | 主动登出，Token 过期自动跳转。 | 拦截器处理 401 错误。 |
| (可选) 多角色 | 预留 Super Admin 和 Editor 角色。 | 基于角色的路由守卫 (RBAC)。 |
2. 仪表盘 (Dashboard)
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| 数据概览卡片 | 总访问量 (PV)、独立访客 (UV)、留言数、文章总数。 | 对比昨日/上周数据的变化率。 |
| 访客趋势图 | 近 7 天/30 天的访问趋势折线图。 | ECharts 或 Recharts 交互式图表。 |
| 热门内容排行 | 浏览量最高的文章/项目 Top 5。 | 列表展示，点击可跳转编辑。 |
| 最新留言提醒 | 展示未读留言列表。 | 标记为已读功能。 |
3. 内容管理 (CMS Core)
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| 项目管理 (CRUD) | 增删改查项目。支持上传多张封面图、拖拽排序、富文本/Markdown 编辑详情。 | 图片拖拽上传至 OSS/S3；富文本编辑器 (TipTap)。 |
| 博客管理 (CRUD) | 增删改查文章。支持 Markdown 编辑、草稿箱、定时发布、标签管理。 | 实时预览 (Split view)；自动保存草稿 (LocalStorage/DB)。 |
| 简历配置 | 可视化表单修改个人简介、技能列表、工作经历。 | 表单即时生效，无需重启服务。 |
| 媒体库 (Media Library) | 统一管理所有上传图片/视频。支持文件夹分类、重命名、删除。 | 网格视图，支持批量删除。 |
4. 互动管理
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| 留言管理 | 查看联系表单提交的留言，标记“已读/已回复”，直接回复 (发送邮件)。 | 状态标签筛选。 |
| 评论审核 | (若启用自研评论) 审核、删除用户评论，屏蔽垃圾广告。 | 批量操作。 |
5. 系统设置 (Settings)
| 功能点 | 详细描述 | 技术/交互亮点 |
|---|
| SEO 全局配置 | 修改网站 Title, Description, 关键词，OG 默认图片。 | 修改后立即生效 (需配合 ISR/Revalidate)。 |
| 友链管理 | 添加/移除友情链接 (名称, URL, Logo)。 | 拖拽排序。 |
| 账号安全 | 修改管理员密码。 | 密码强度校验，加密存储。 |
| 操作日志 | 记录关键操作 (如：删除了某篇文章，修改了配置)。 | 时间、操作人、IP、动作详情。 |
💡 开发优先级建议 (MVP 策略)
🚀 P0: 必须实现 (MVP 版本)
目标：先上线，有内容可看，核心功能闭环。
- 前台: 首页、项目列表及详情、简历页、联系表单、深色模式。
- 后台: 登录、项目 CRUD、博客 CRUD (Markdown 基础版)、媒体上传。
✨ P1: 锦上添花 (第二版本)
目标：提升用户体验和转化率。
- 前台: 博客详情页优化 (目录、高亮)、多语言、SEO 深度优化、PWA。
- 后台: 仪表盘图表、留言管理、富文本编辑器升级。
🚀 P2: 炫技加分 (第三版本)
目标：展示高阶前端能力，作为面试亮点。
- 前台: 3D 互动元素、复杂的过滤动画、评论系统。
- 后台: 操作日志、定时发布、多角色权限。
备注:
- 所有图片资源建议对接对象存储 (如 AWS S3, 阿里云 OSS, Cloudflare R2)。
- 数据库设计需预留
created_at, updated_at 字段。
- 接口设计遵循 RESTful 或 GraphQL 规范。
