# ai-factory

**Repository Path**: Marsfactory/ai-factory

## Basic Information

- **Project Name**: ai-factory
- **Description**: AI梦工厂(vue3+naive-ui)
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-10-13
- **Last Updated**: 2025-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI梦工厂 - 编程续杯软件一站式平台

一个基于 Vue3 + Vite + Naive UI + TailwindCSS 开发的现代化AI编程工具平台官网。

## ✨ 特性

- 🎨 **抖音风格设计** - 黑色背景 + 粉紫蓝渐变主题
- 🤖 **机器人Logo** - 可爱的机器人形象作为品牌标识
- 📱 **响应式设计** - 完美适配桌面端和移动端
- ⚡ **现代化技术栈** - Vue3 + Vite + TypeScript
- 🎭 **丰富动画** - Animate.css 提供流畅的交互体验
- 🛒 **完整购买流程** - 模拟支付和订单管理系统
- 👥 **商家入驻** - 完整的商家申请和管理功能
- 🔐 **用户系统** - 登录注册和个人中心

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 [http://localhost:5173](http://localhost:5173) 查看项目。

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 📁 项目结构

```
src/
├── components/          # 公共组件
│   └── Navbar.vue      # 导航栏组件
├── views/              # 页面组件
│   ├── Home.vue        # 首页
│   ├── Products.vue    # 产品列表页
│   ├── ProductDetail.vue # 产品详情页
│   ├── Merchant.vue    # 商家入驻页
│   └── User.vue        # 用户中心页
├── stores/             # Pinia 状态管理
│   └── index.ts        # 主要状态store
├── router/             # Vue Router 路由配置
│   └── index.ts        # 路由定义
├── App.vue             # 根组件
├── main.ts             # 应用入口文件
└── style.css           # 全局样式
```

## 🎨 设计系统

### 主题色彩

- **主色调**: `#FE2C55` (抖音粉)
- **辅助色**: `#8B5CF6` (紫色)
- **强调色**: `#25F4EE` (青色)
- **背景色**: `#000000` (纯黑)
- **卡片色**: `#161823` (深灰)

### 渐变效果

```css
/* 主要渐变 */
background: linear-gradient(135deg, #FE2C55 0%, #8B5CF6 50%, #25F4EE 100%);

/* 背景渐变 */
background: linear-gradient(135deg, #000000 0%, #161823 50%, #2F2F2F 100%);
```

## 🛠️ 技术栈

- **框架**: Vue 3.4+ (Composition API)
- **构建工具**: Vite 5.0+
- **UI组件库**: Naive UI 2.38+
- **CSS框架**: TailwindCSS 3.4+
- **路由**: Vue Router 4.3+
- **状态管理**: Pinia 2.1+
- **动画**: Animate.css 4.1+
- **图标**: Vicons (Ionicons5)
- **开发语言**: TypeScript 5.2+

## 📱 页面功能

### 首页 (/)
- Hero Banner 展示
- 热门软件推荐
- 价格套餐展示
- 商家入驻入口

### 产品中心 (/products)
- 所有软件产品展示
- 产品筛选和搜索
- 产品详情跳转

### 产品详情 (/product/:id)
- 详细产品介绍
- 核心功能展示
- 价格套餐选择
- 购买流程引导

### 商家入驻 (/merchant)
- 入驻优势展示
- 申请流程说明
- 入驻表单提交
- 文件上传功能

### 用户中心 (/user)
- 个人信息管理
- 订单历史查看
- 激活码管理
- 账户设置

## 🔧 配置说明

### Vite 配置
- 路径别名 `@` 指向 `src` 目录
- PostCSS 集成 TailwindCSS
- TypeScript 支持

### TailwindCSS 配置
- 自定义抖音主题色彩
- 响应式断点设置
- 自定义动画效果

### Naive UI 配置
- 深色主题适配
- 抖音色彩方案
- 自定义组件样式

## 🎯 核心功能实现

### 用户认证系统
- 手机号/邮箱登录
- 用户注册功能
- 登录状态管理
- 自动登录保持

### 购买流程
- 产品选择和配置
- 模拟支付处理
- 订单生成和管理
- 激活码自动生成

### 商家管理
- 入驻申请表单
- 文件上传处理
- 申请状态跟踪
- 审核流程模拟

### 数据管理
- Pinia 状态管理
- 本地数据持久化
- 响应式数据更新
- 类型安全保障

## 🚀 部署说明

### 环境变量
创建 `.env.production` 文件：

```env
VITE_API_BASE_URL=https://api.aidreamfactory.com
VITE_APP_TITLE=AI梦工厂
```

### 构建命令
```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

### 服务器配置
推荐使用 Nginx 作为静态文件服务器，配置示例：

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

## 🤝 贡献指南

1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 📞 联系方式

- 项目地址: [https://github.com/your-username/ai-dream-factory](https://github.com/your-username/ai-dream-factory)
- 问题反馈: [Issues](https://github.com/your-username/ai-dream-factory/issues)

---

<div align="center">
  <p>Made with ❤️ by AI梦工厂团队</p>
  <p>🤖 让AI编程更简单，让创意无限可能！</p>
</div>