yovinchen/FlashSaleSystem

Fork 0

Files

YoVinchen 13b2e9f093 refactor: 全局重命名系统名称为社区生鲜团购系统

2026-03-16 22:25:45 +08:00

4.3 KiB

Raw Blame History

社区生鲜团购系统前端 (Flash Sale 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导出、批量处理
🎨 响应式设计: 移动端适配、深色模式（开发中）

📁 项目结构

flash-sale-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

安装依赖

npm install
# 或
yarn install

开发环境

npm run dev
# 或
yarn dev

访问 http://localhost:3000

生产构建

npm run build
# 或
yarn build

预览构建结果

npm run preview
# 或
yarn preview

🔑 测试账号

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

📝 配置说明

环境变量

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

# 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 中配置开发环境代理：

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

🚢 部署

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部署

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@flashsale.com
官网: https://flashsale.com

Made with ❤️ by Flash Sale Team

4.3 KiB Raw Blame History Unescape Escape