# AI编程app模板完整项目框架

**Repository Path**: codingyunnew/ai-app-project-model

## Basic Information

- **Project Name**: AI编程app模板完整项目框架
- **Description**: 一个专注于AI编程的Flutter应用模板框架，提供快速开发智能应用的基础结构和常用组件，支持多平台部署，助力开发者高效实现AI功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-27
- **Last Updated**: 2026-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI App Project Model

一个完整的全栈开发模板系统，包含移动端App、管理后台和后端服务三个子系统。

## 项目概述

本项目是一个基于现代技术栈的全栈开发模板，旨在快速搭建企业级应用。系统采用前后端分离架构，包含以下三个子系统：

1. **flutter-app-frame** - 移动端App (Flutter)
2. **sysWeb-frame** - 超级管理员后台管理端 (Vue 3)
3. **server-frame** - 后端服务 (Express)

## 技术栈

### 公共技术
- **运行环境**: Node.js 20
- **开发语言**: TypeScript 5.3.3

### flutter-app-frame (移动端App)
- **核心框架**: Flutter 3.4+
- **Dart SDK**: >=3.4.0 <4.0.0
- **主要依赖**:
  - shared_preferences - 本地存储
  - http - 网络请求
  - background_fetch - 后台任务
  - intl - 国际化

### sysWeb-frame (管理后台)
- **核心框架**: Vue 3.4.15
- **UI 组件库**: Ant Design Vue 4.x
- **构建工具**: Vite 5.0.12
- **状态管理**: Pinia 2.x
- **主要依赖**:
  - echarts - 图表可视化
  - md-editor-v3 - Markdown 编辑器
  - xlsx - Excel 处理
  - vuedraggable - 拖拽组件

### server-frame (后端服务)
- **Web 框架**: Express 4.18.2
- **数据库**: MySQL (mysql2 3.6.5)
- **缓存**: Redis 5.8.2
- **主要依赖**:
  - jsonwebtoken - JWT 认证
  - bcryptjs - 密码加密
  - multer - 文件上传
  - puppeteer - 网页爬虫

## 项目结构

```
ai-app-project-model/
├── flutter-app-frame/     # 移动端App
│   ├── lib/
│   │   ├── main.dart           # 应用入口
│   │   ├── pages/              # 页面组件
│   │   ├── services/           # 服务层
│   │   ├── background/         # 后台任务
│   │   └── utils/              # 工具函数
│   ├── android/                # Android 平台代码
│   ├── ios/                    # iOS 平台代码
│   ├── web/                    # Web 平台代码
│   ├── windows/                # Windows 平台代码
│   ├── linux/                  # Linux 平台代码
│   └── macos/                  # macOS 平台代码
├── sysWeb-frame/          # 管理后台 (端口: 3001)
│   └── src/
│       ├── views/              # 页面视图
│       │   ├── Dashboard.vue   # 仪表盘
│       │   ├── Login.vue       # 登录页
│       │   ├── customer/       # 客户管理
│       │   ├── hero/           # 首页横幅管理
│       │   ├── notice/         # 系统通知
│       │   ├── profile/        # 个人中心
│       │   └── system/         # 系统配置
│       ├── layouts/            # 布局组件
│       ├── router/             # 路由配置
│       ├── stores/             # 状态管理
│       └── api/                # API 接口
├── server-frame/          # 后端服务 (端口: 4000)
│   └── src/
│       ├── controllers/        # 控制器
│       ├── routes/             # 路由
│       ├── models/             # 数据模型
│       ├── middleware/         # 中间件
│       ├── services/           # 服务层
│       ├── config/             # 配置文件
│       └── utils/              # 工具函数
└── README.md
```

## 快速开始

### 环境要求

- Node.js 20+
- Flutter 3.4+
- MySQL 5.7+ (可选，后端有模拟数据兜底)
- Redis 5+ (可选，连接失败不影响启动)

### 安装依赖

```bash
# 移动端App
cd flutter-app-frame
flutter pub get

# 管理后台
cd sysWeb-frame
npm install

# 后端服务
cd server-frame
npm install
```

### 配置环境变量

#### server-frame 配置

编辑 `server-frame/.env.development`：

```env
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=vibe_coding

REDIS_URL=redis://localhost:6379
```

#### 前端项目配置

编辑 `sysWeb-frame/.env.development`：

```env
VITE_API_BASE_URL=http://192.168.1.100:4000/api
```

> 注意：请将 `192.168.1.100` 替换为您的本机 IP 地址

### 启动项目

```bash
# 后端服务 (端口 4000)
cd server-frame
npm run dev

# 管理后台 (端口 3001)
cd sysWeb-frame
npm run dev

# 移动端App
cd flutter-app-frame
flutter run -d <device_id>
```

### 访问地址

- 管理后台: `http://本机IP:3001`
- 后端服务: `http://本机IP:4000`

## 功能特性

### flutter-app-frame (移动端App)
- ✅ Flutter 跨平台开发 (iOS/Android/Web/Desktop)
- ✅ 引导页与主页切换
- ✅ 本地数据持久化 (SharedPreferences)
- ✅ 后台任务支持
- ✅ Material 3 设计风格
- ✅ 网络请求封装

### sysWeb-frame (管理后台)
- ✅ Ant Design Vue 组件库
- ✅ 登录认证系统 (JWT)
- ✅ 路由守卫
- ✅ 后台布局（侧边栏 + 头部 + 内容区）
- ✅ 仪表盘统计
- ✅ ECharts 图表可视化
- ✅ Markdown 编辑器
- ✅ Excel 导入导出
- ✅ 拖拽排序功能

### server-frame (后端服务)
- ✅ Express RESTful API
- ✅ MySQL 数据库连接池
- ✅ Redis 缓存支持
- ✅ JWT 用户认证
- ✅ 密码加密 (bcryptjs)
- ✅ 文件上传 (multer)
- ✅ 统一响应格式 `{success, data, message}`
- ✅ 全局错误处理
- ✅ 请求日志记录
- ✅ CORS 跨域支持
- ✅ Puppeteer 网页爬虫

## API 模块

### 核心接口

| 模块 | 说明 |
|------|------|
| `/api/users` | 用户管理 |
| `/api/auth` | 用户认证 |
| `/api/admin` | 管理员操作 |
| `/api/customers` | 客户管理 |
| `/api/hero-banner` | 首页横幅 |
| `/api/zone-banner` | 区域横幅 |
| `/api/system-notice` | 系统通知 |
| `/api/upload` | 文件上传 |
| `/api/shipping` | 物流管理 |

### 健康检查
```
GET /health
```

## 开发规范

1. **代码风格**
   - 使用 TypeScript 进行类型安全开发
   - Flutter 使用 Dart 3.4+ 特性
   - Vue 组件使用 `<script setup>` 语法
   - 添加函数级注释

2. **API 规范**
   - 后端统一返回 `{success: true, data: {xxx}}` 格式
   - 前端正确处理双层嵌套结构 `response.data.data.xxx`

3. **调试规范**
   - 关键位置打印日志方便控制台查看
   - 不使用 Vite 代理配置
   - 页面调用接口的模块不显示模拟数据

4. **网络配置**
   - 不使用 `localhost`，使用本机网卡 IP 地址
   - 防止本地回环地址被代理软件接管

## 生产部署

### 构建项目

```bash
# 移动端App
cd flutter-app-frame
flutter build apk        # Android
flutter build ios        # iOS
flutter build web        # Web

# 管理后台
cd sysWeb-frame
npm run build

# 后端服务
cd server-frame
npm run build
npm start
```

### 环境变量

生产环境请修改各项目的 `.env.production` 文件，配置正确的数据库、Redis 和 API 地址。

## Flutter 开发代理配置

如需配置代理访问 Flutter 资源：

```powershell
# PowerShell
$env:http_proxy="http://127.0.0.1:10808"
$env:https_proxy="http://127.0.0.1:10808"
```

```bash
# CMD
set http_proxy=http://127.0.0.1:10808
set https_proxy=http://127.0.0.1:10808
```

## 许可证

MIT

## 贡献指南

欢迎提交 Issue 和 Pull Request！

## 联系方式

如有问题，请通过 Issue 联系我们。