# 社区生鲜团购系统前端 (Group Buy Frontend)

基于 Vue 3 + Vite + TypeScript 构建的现代化社区生鲜团购系统前端应用。

## 🚀 技术栈

- **框架**: Vue 3.4 (Composition API)
- **构建工具**: Vite 5.0
- **编程语言**: TypeScript 5.3
- **UI组件库**: Element Plus 2.4
- **状态管理**: Pinia 2.1
- **路由**: Vue Router 4.2
- **HTTP客户端**: Axios 1.6
- **样式**: TailwindCSS 3.4 + Sass
- **图表**: ECharts 5.4
- **工具库**: VueUse, Day.js, Lodash

## ✨ 功能特性

### 用户端功能

- 🏠 **首页展示**: 轮播图、限时活动、热门商品推荐
- 🔐 **用户认证**: 登录、注册、个人中心管理
- ⚡ **限时活动抢购**: 实时倒计时、库存显示、防重复提交
- 🛍️ **商品浏览**: 分类筛选、价格排序、关键词搜索
- 🛒 **购物车**: 商品管理、批量操作、结算功能
- 📦 **订单管理**: 订单列表、详情查看、状态跟踪

### 管理后台

- 📊 **数据仪表盘**: 实时统计、图表展示
- 📝 **内容管理**: 商品、限时活动、订单、用户管理
- 📈 **数据分析**: 销售趋势、用户行为分析

### 高级特性

- 🔔 **实时通知**: WebSocket消息推送、消息中心
- 🔍 **智能搜索**: 搜索历史、热门推荐、实时建议
- 📸 **图片上传**: 拖拽上传、预览下载、进度显示
- 📊 **数据导出**: Excel导出、批量处理
- 🎨 **响应式设计**: 移动端适配、深色模式（开发中）

## 📁 项目结构

```
community-fresh-group-buy-frontend/
├── src/
│   ├── api/              # API接口封装
│   ├── assets/           # 静态资源
│   ├── components/       # 组件
│   │   ├── common/       # 通用组件
│   │   ├── business/     # 业务组件
│   │   └── layout/       # 布局组件
│   ├── composables/      # 组合式函数
│   ├── layouts/          # 页面布局
│   ├── pages/            # 页面视图
│   ├── router/           # 路由配置
│   ├── stores/           # Pinia状态管理
│   ├── styles/           # 全局样式
│   ├── types/            # TypeScript类型定义
│   └── utils/            # 工具函数
├── public/               # 公共资源
├── .env.development      # 开发环境变量
├── .env.production       # 生产环境变量
└── vite.config.ts        # Vite配置
```

## 🔧 安装使用

### 环境要求

- Node.js >= 16.0
- npm >= 8.0 或 yarn >= 1.22

### 安装依赖

```bash
npm install
# 或
yarn install
```

### 开发环境

```bash
npm run dev
# 或
yarn dev
```

访问 http://localhost:3000

### 生产构建

```bash
npm run build
# 或
yarn build
```

### 预览构建结果

```bash
npm run preview
# 或
yarn preview
```

## 🔑 测试账号

- **普通用户**: user / 123456
- **管理员**: admin / 123456

## 📝 配置说明

### 环境变量

修改 `.env.development` 或 `.env.production` 文件：

```env
# API基础路径
VITE_API_BASE_URL=http://localhost:8080

# WebSocket地址
VITE_WS_URL=ws://localhost:8080/ws

# 上传地址
VITE_UPLOAD_URL=http://localhost:8080/upload
```

### 代理配置

在 `vite.config.ts` 中配置开发环境代理：

```typescript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    }
  }
}
```

## 🚢 部署

### Nginx配置示例

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend-server:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

### Docker部署

```dockerfile
FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

## 🎯 性能优化

- **路由懒加载**: 减少首屏加载时间
- **组件缓存**: keep-alive缓存页面状态
- **图片懒加载**: 按需加载图片资源
- **代码分割**: 自动分包优化
- **Gzip压缩**: 减少传输体积
- **CDN加速**: 静态资源CDN分发

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📧 联系我们

- 邮箱: contact@community-fresh-groupbuy.example
- 官网: https://community-fresh-groupbuy.example

---

Made with ❤️ by Group Buy Team