AIReels 官网

基于 Astro.js 构建的极简技术风格官网，展示郑州灵映科技的AI驱动数字化营销工具。

🚀 技术栈

• 框架: Astro 4.0+
• 样式: Tailwind CSS
• 交互: Alpine.js
• 部署: GitHub Pages
• 字体: JetBrains Mono + Inter

🎨 设计特色

• 极简美学: 大量留白，精确的8px网格系统
• 技术感: 代码块样式，终端界面元素，等宽字体应用
• 暗色模式: 完整的light/dark主题切换
• 响应式: 移动优先设计，完美适配各种屏幕尺寸

📁 项目结构

src/
├── components/          # 组件
│   ├── Header.astro    # 导航栏
│   ├── Footer.astro    # 页脚
│   ├── CodeBlock.astro # 代码展示组件
│   ├── MetricCard.astro # 性能指标卡片
│   └── TestimonialCard.astro # 用户证言卡片
├── layouts/
│   └── Layout.astro    # 基础布局
├── pages/              # 页面
│   ├── index.astro     # 首页
│   ├── products.astro  # 产品页面
│   ├── demo.astro      # 演示页面
│   ├── docs.astro      # 文档页面
│   ├── about.astro     # 关于页面
│   └── contact.astro   # 联系页面
├── config.ts           # 站点配置
└── ...

🛠️ 开发

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览构建结果

npm run preview

🌐 部署

项目配置了 GitHub Actions 自动部署到 GitHub Pages：

1. 推送代码到 main 分支
2. GitHub Actions 自动构建并部署
3. 访问 https://aireels-dev.github.io/aireels-web

📱 页面功能

首页 (/)

• Hero 区域：命令行风格欢迎界面
• 核心价值主张展示
• AI能力演示（代码示例）
• 用户证言
• 性能指标展示

产品页面 (/products)

• 三大核心业务模块详细介绍
• API示例代码展示
• 技术优势说明
• 集成能力介绍

演示页面 (/demo)

• 在线AI内容生成器
• 实时性能监控
• 多语言代码示例
• API服务状态监控

文档页面 (/docs)

• 快速开始指南
• 完整API参考
• 错误处理说明
• FAQ手风琴组件

关于页面 (/about)

• 公司使命和愿景
• 目标用户群体
• 技术架构展示
• 团队信息

联系页面 (/contact)

• 联系表单（Alpine.js驱动）
• 多渠道联系方式
• 服务方案概述
• 响应时间说明

🎨 主题色彩

:root {
  --tech-black: #1a1a1a;      /* 技术黑 */
  --minimal-white: #fafafa;    /* 极简白 */
  --function-blue: #0066cc;    /* 功能蓝 */
  --success-green: #00d084;    /* 成功绿 */
}

🔧 配置说明

Site 配置 (src/config.ts)

包含站点的所有配置信息：

• 基本信息（标题、描述等）
• 导航菜单
• 功能特性
• 用户证言
• FAQ内容
• 性能指标

Astro 配置 (astro.config.mjs)

• 站点URL和base路径
• 集成插件（Tailwind、Sitemap、MDX）
• 构建配置

Tailwind 配置 (tailwind.config.mjs)

• 自定义颜色
• 字体配置
• 扩展间距
• Typography插件

📦 组件说明

CodeBlock

• 支持多语言语法高亮
• 一键复制功能
• 终端风格设计
• 深色主题适配

MetricCard

• 性能指标展示
• 趋势指示器
• 响应式设计

TestimonialCard

• 用户证言展示
• 自动生成头像
• 验证徽章

🚀 性能优化

• 静态生成，零JavaScript运行时（除交互组件）
• 图片懒加载
• CSS Critical Path内联
• 字体预加载
• Service Worker缓存

📱 响应式断点

sm: 640px    /* 小屏手机 */
md: 768px    /* 平板 */
lg: 1024px   /* 小屏笔记本 */
xl: 1280px   /* 桌面显示器 */
2xl: 1536px  /* 大屏显示器 */

📋 待开发功能模块

🚨 高优先级 (Critical)

Demo页面交互功能

• AI内容生成器 - 实际可用的在线内容生成工具
  • 文案生成器（朋友圈、微博、小红书）
  • 短视频脚本生成器
  • 邮件模板生成器
  • 营销文案生成器
• 实时预览功能 - 生成内容的实时预览和编辑
• 模板系统 - 行业模板和风格选择
• 导出功能 - 支持多种格式导出（PDF、DOC、TXT）

后端API服务

• 内容生成API - 对接真实的AI模型服务
• 用户认证系统 - 注册、登录、API密钥管理
• 使用量统计 - 生成次数、字符数统计
• 速率限制 - API调用频率控制

🔥 中等优先级 (High)

用户管理系统

• 用户注册/登录页面 - 完整的身份验证流程
• 用户dashboard - 个人使用统计和历史记录
• 订阅系统 - 不同套餐和支付集成
• API密钥管理 - 密钥生成、重置、权限控制

文档系统增强

• 交互式API文档 - 可测试的API explorer
• 代码示例库 - 多语言代码示例
• 视频教程 - 使用指南和最佳实践
• FAQ搜索功能 - 智能FAQ搜索和过滤

联系页面增强

• 表单后端处理 - 真实的表单提交和邮件发送
• 在线客服系统 - 实时聊天支持
• 工单系统 - 技术支持工单管理
• 预约系统 - 在线咨询预约

📈 低优先级 (Medium)

营销和分析

• 博客系统 - 技术文章和案例分享
• 案例展示页面 - 成功案例和用户故事
• SEO优化 - 完整的SEO元数据和结构化数据
• 数据分析 - Google Analytics、用户行为追踪

性能和体验

• PWA支持 - 离线访问和安装提示
• 国际化 - 多语言支持（中英文）
• 无障碍性 - WCAG 2.1 AA标准兼容
• 性能监控 - 真实用户性能监控

内容管理

• CMS集成 - 内容管理后台
• 动态配置 - 可配置的网站内容
• 版本管理 - 内容版本控制和回滚
• 多媒体库 - 图片和视频资源管理

🔧 技术优化 (Low)

开发体验

• 组件库 - 可复用的UI组件库
• 设计系统 - 完整的设计规范和组件
• 测试覆盖 - 单元测试和集成测试
• CI/CD增强 - 自动化测试和部署

安全和合规

• 安全审计 - 安全漏洞扫描和修复
• 隐私合规 - GDPR和国内法规合规
• 内容安全 - 生成内容的安全过滤
• API安全 - 完整的API安全策略

📊 统计信息

• 总计任务: 35个
• 高优先级: 8个
• 中等优先级: 12个
• 低优先级: 15个

🎯 里程碑规划

Phase 1 (MVP - 4周)

• Demo页面核心功能
• 基础API服务
• 用户认证系统

Phase 2 (Beta - 8周)

• 用户管理完善
• 文档系统增强
• 联系功能实现

Phase 3 (正式版 - 12周)

• 营销功能上线
• 性能优化完成
• 内容管理系统

🔄 更新日志

v1.1.0 (2024-09-18)

• 修复网站路由配置和链接跳转问题
• 修复底部logo显示异常
• 更新联系邮箱为 dev@aireels.top
• 移除左上角版本信息
• 新增隐私政策页面
• 完善待开发功能规划

v1.0.0 (2024-09-18)

• 初始版本发布
• 完整的多页面网站
• 响应式设计
• 暗色模式支持
• GitHub Pages部署

📄 许可证

本项目采用 MIT 许可证。

🤝 贡献

欢迎提交 Issues 和 Pull Requests 来改进这个项目。

---

联系我们: dev@aireels.top 项目地址: https://github.com/aireels-dev/aireels-web