Next.js SaaS仪表板，含引导流程

1. 设置 next.js 和 shadcn 2. 添加一个简单的 supabase 身份验证，包含注册和登录页面 3. 根据以下提示设置前端： <frontend prompt> <summary_title> 创建具有以下要求的详细组件： 1. 对客户端组件使用 'use client' 指令 2. 使用 Tailwind CSS 工具类进行响应式设计 3. 使用 Lucide React 图标（来自 lucide-react 包）。除非要求，否则不要使用其他 UI 库 4. 在适当的地方使用来自 https://t.co/kmBMYKBzp0 的库存照片，仅使用你确认存在的有效 URL 5. 配置 next.config.js 的 image remotePatterns 以启用来自 https://t.co/kmBMYKBzp0 的库存照片 6. 创建根布局 layout.tsx 页面，将必要的导航项包裹到所有页面 7. 必须在正确的位置实现导航元素项，即左侧边栏、顶部页眉 8. 准确实现必要的网格布局 9. 遵循正确的导入实践： - 使用 @/ 路径别名 - 保持组件导入有序 - 用新的综合代码更新当前 src/app/page.tsx - 不要忘记根路由（page.tsx）处理 - 你必须在停止之前完成整个提示 现代 SaaS 仪表板与入门流程 </summary_title> <image_analysis> 1. 导航元素： - 左侧边栏包含：仪表板、内容、社区、营销、分析、销售、商店 - 底部次要导航包含：设置、帮助 - 侧边栏顶部为用户资料区域 2. 布局组件： - 侧边栏宽度：240px - 主内容区域：灵活宽度 - 卡片容器：约 500px 宽度 - 内边距：24px（整体一致） - 响应式容器，边距为 32px 3. 内容区域： - 欢迎页眉，包含用户问候语 - 入门清单（4 个步骤） - 视频通话预约卡片 - 页面构建器预览卡片 - 已完成任务的进度指示器 4. 交互控件： - 带有完成状态的清单项 - “安排时间”和“试试看”主要按钮 - “了解更多”文本链接 - 带有悬停状态的导航菜单项 - 页面构建器中的富文本编辑器控件 5. 颜色： - 主蓝色：#0066FF（按钮） - 背景灰色：#F5F5F7 - 深色文本：#1A1A1A - 成功绿色：#34C759 - 头像的强调色 6. 网格/布局结构： - 主内容采用单列布局 - 卡片之间间距为 24px - 灵活宽度容器 - 卡片网格系统，圆角为 12px </image_analysis> <development_planning> 1. 项目结构： ``` src/ ├── components/ │ ├── layout/ │ │ ├── Sidebar │ │ ├── Header │ │ └── MainContent │ ├── features/ │ │ ├── Onboarding │ │ ├── VideoCall │ │ └── PageBuilder │ └── shared/ ├── assets/ ├── styles/ ├── hooks/ └── utils/ ``` 2. 关键功能： - 入门清单系统 - 视频通话安排 - 页面构建器界面 - 进度跟踪 - 用户仪表板 3. 状态管理： ```typescript interface AppState { ├── onboarding: { │ ├── steps: Step[] │ ├── completedSteps: string[] │ └── currentStep: number ├── user: { │ ├── profile: UserProfile │ ├── preferences: UserPreferences │ └── settings: UserSettings } ``` 4. 路由： ```typescript const routes = [ ├── '/dashboard', ├── '/content/*', ├── '/community/*', ├── '/marketing/*', ├── '/analytics/*', ├── '/sales/*', └── '/storefront/*' ] ``` 5. 组件架构： - DashboardLayout（父组件） - OnboardingCard（功能组件） - VideoCallCard（功能组件） - PageBuilderPreview（功能组件） - NavigationMenu（共享组件） - ActionButton（共享组件） 6. 响应式断点： ```scss $breakpoints: ( ├── 'mobile': 320px, ├── 'tablet': 768px, ├── 'desktop': 1024px, └── 'wide': 1440px ); ``` </development_planning> </frontend prompt> 4. 根据以下提示设置页面结构 <page structure prompt> 基于导航菜单项（不包括主路由）的 Next.js 路由结构。确保用组件包裹所有路由： 路由： - /dashboard - /content - /community - /marketing - /analytics - /sales - /storefront - /settings - /help 页面实现： /dashboard： 核心目的：提供关键指标概览和主要功能的快速访问 关键组件 - 统计卡片网格 - 最近活动流 - 快速操作按钮 - 性能图表 - 任务通知 布局结构 - 基于 12 列系统的网格布局 - 在移动端堆叠的响应式卡片 - 带有关键指标的粘性页眉 /content： 核心目的：管理和组织所有内容资产 关键组件 - 内容列表 /网格视图切换 - 搜索和筛选系统 - 内容编辑器 - 媒体库 - 版本历史 布局结构： - 带有侧边导航的分屏视图 - 带有无限滚动的主内容区域 - 用于编辑的模态覆盖层 /community： 核心目的：管理用户互动和社区功能 关键组件 - 成员目录 - 讨论板 - 审核工具 - 用户举报 - 活动日志 布局结构 - 三列布局 - 可折叠侧边栏 - 可滚动的主内容区域 /marketing： 核心目的：活动管理和营销工具 关键组件 - 活动创建器 - 电子邮件模板构建器 - 分析仪表板 - 受众细分 - A/B 测试工具 布局结构 - 标签式界面 - 用于编辑的分屏视图 - 预览窗格 /analytics： 核心目的：数据可视化和报告 关键组件 - 交互式图表 - 自定义报告构建器 - 数据导出工具 - 指标比较 - 日期范围选择器 布局结构 - 全宽图表 - 粘性筛选页眉 - 响应式数据表 /sales： 核心目的：销售管道和订单管理 关键组件 - 订单仪表板 - 客户资料 - 发票生成器 - 支付处理 - 销售报告 布局结构 - 看板视图 - 列表视图选项 - 详情面板 /storefront： 核心目的：电子商务商店管理 关键组件 - 产品管理器 - 库存控制 - 商店定制器 - 订单履行 - 配送设置 布局结构 - 基于网格的产品布局 - 快速编辑侧边栏 - 预览模式 /settings： 核心目的：系统配置和用户偏好 关键组件 - 账户设置 - 系统偏好 - 集成设置 - 用户管理 - 安全设置 布局结构 - 分类设置面板 - 基于表单的布局 - 确认模态框 /help： 核心目的：支持文档和帮助 关键组件 - 搜索文档 - 常见问题解答部分 - 联系支持 - 教程视频 - 知识库 布局结构 - 可搜索的侧边栏 - 文章视图 - 快速链接面板 布局： AdminLayout： - 适用路由：除 /help 外的所有路由 - 核心组件 - 顶部导航栏 - 侧边导航 - 用户资料菜单 - 通知 - 面包屑 - 响应式行为 - 移动端可折叠侧边栏 - 小屏幕上的导航下拉菜单 - 可调整的内容宽度 HelpLayout - 适用路由：/help - 核心组件 - 文档侧边栏 - 搜索栏 - 支持聊天小部件 - 返回管理后台按钮 - 响应式行为 - 移动端全宽 - 用于支持的浮动操作按钮 - 可折叠部分 </page structure prompt>