替代 Buffer/Hootsuite 的本地化社交媒体管理工具,支持多平台排程、内容日历、AI 文案助手和数据分析仪表板
你是一位资深全栈工程师,精通 Next.js 16、Tailwind CSS 4 和 Supabase。请帮我构建一个社交媒体排程与数据分析平台,品牌名称为 [brand_name],服务行业为 [industry],目标平台为 [platforms],团队人数为 [team_size] 人,品牌主色调为 [primary_color]。
## 项目概述
面向马来西亚中小企业和营销机构的社交媒体管理工具,替代 Buffer/Hootsuite。支持中英双语内容创作,考虑马来西亚社交媒体使用习惯和本地节日。
## 技术栈
- Next.js 16 (App Router) + TypeScript 严格模式
- Tailwind CSS 4 + shadcn/ui
- Supabase (PostgreSQL + Auth + Storage + Edge Functions)
- OpenAI API(文案生成)
- 部署:Vercel
## 核心功能
1. **仪表板**:统计卡片(本月发布数、互动数、互动率、待审批数)、今日排程列表、马来西亚节日提醒、平台连接状态、快捷操作。
2. **内容日历**:月/周/日视图,拖拽排程,点击空白快速创建,按平台/状态/分类/成员筛选,显示马来西亚公共假期。
3. **帖子创作器**:双栏布局,平台选择器,中英双语文案编辑器(富文本、字数统计、变量插入),AI 文案助手(关键词、语气、平台),媒体上传(拖拽、进度条、从媒体库选择),标签管理(选择标签集或手动输入),排程设置(日期时间、时区、最佳时间推荐、循环排程),各平台预览。
4. **批量排程**:CSV 上传(提供模板),表格预览可编辑,一键排程。
5. **媒体库**:网格/列表视图,文件类型筛选,标签搜索,拖拽上传,预览灯箱,文件信息。
6. **模板管理**:模板卡片网格,按分类/平台筛选,从模板快速创建帖子。
7. **标签管理器**:标签集列表,创建标签集,热门标签推荐,一键复制。
8. **数据分析仪表板**:时间范围选择,总览卡片,互动趋势折线图,平台对比柱状图,最佳发布时间热力图,内容分类表现,成员贡献,帖子排行榜(Top 20)。使用模拟数据(考虑马来西亚时区高峰)。
9. **审批工作流**:状态流转(draft→pending_review→approved/rejected→scheduled→published),审批时间线,评论建议,通知 manager,批量审批。
10. **团队设置**:团队信息编辑,成员管理(邀请、角色修改),社交平台连接管理(模拟 OAuth),通知偏好,默认发布设置。
## 模拟数据与发布
- 发布时延迟 1-3 秒模拟 API,95% 成功,生成模拟 URL。
- 发布后自动生成模拟分析数据(随机但合理,每小时递增)。
## 马来西亚本地化
- 中英双语切换,日期格式 DD/MM/YYYY,时区 Asia/Kuala_Lumpur (GMT+8),货币 MYR。
- 内置马来西亚节日:农历新年、开斋节、屠妖节、国庆日、马来西亚日、双11/12、年中促销。
- AI 文案支持马来西亚华语用词。
## UI/UX 要求
- 响应式设计(桌面 1440px 为主),品牌主色调用于按钮和导航激活态。
- 深色侧边栏 + 白色内容区,卡片细边框阴影。
- 加载骨架屏,操作 Toast 通知,表单验证 React Hook Form + Zod,动画 Framer Motion。
## 代码质量
- TypeScript 严格模式,类型定义在 src/types/。
- Server/Client 组件边界清晰,错误边界和加载状态完整。
- 使用 next/image 优化图片。
- 环境变量:NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY, OPENAI_API_KEY。
请先给出简短实施计划,然后逐步构建 MVP,优先实现主要用户流程。
## 构建顺序(请严格遵守)
请按以下顺序开发,让我尽早在屏幕上看到成果,不要长时间没有画面:
1. 先做界面:用接近真实的示例数据,把所有页面做出来(暂时不接数据库),让我能马上看到、能点击。做完先停下来,等我确认。
2. 再做功能:我确认界面后,才让按钮、表单和计算真正可用(继续用示例数据)。
3. 再接 Supabase:功能都正常后,才连接 Supabase 保存真实数据和登录(如需要)。
4. 最后上线:先确保在我电脑上运行正常,再把代码上传到 GitHub,经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事,先问我,不要自己假设。