# cart

**Repository Path**: qleonardo/cart

## Basic Information

- **Project Name**: cart
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-19
- **Last Updated**: 2025-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 在线商城项目

基于 React + Vite + Supabase 构建的在线商城应用，支持商品管理、购物清单和多人协作。

## ✨ 功能特性

- ✅ 商品分类导航和品牌筛选
- ✅ 商品展示和搜索
- ✅ 购物清单管理
- ✅ 添加/编辑/删除商品
- ✅ 分类和品牌管理
- ✅ 图片上传到 Supabase Storage
- ✅ Bark 通知推送（iOS）
- ✅ 多人实时协作
- ✅ 响应式设计

## 🚀 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 配置环境变量

复制 `.env.example` 为 `.env`，填写你的 Supabase 配置：

```env
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
VITE_STORAGE_BUCKET=product-images
VITE_BARK_URL=https://api.day.app/your_bark_key/购物清单
```

### 3. 设置 Supabase

参考 `SQL_SCRIPTS.md` 创建数据库表和配置权限。

### 4. 启动开发服务器

```bash
npm run dev
```

### 5. 构建生产版本

```bash
npm run build
```

## 📚 文档

- **[DOCUMENTATION.md](./DOCUMENTATION.md)** - 完整功能文档和使用指南
- **[SQL_SCRIPTS.md](./SQL_SCRIPTS.md)** - 所有 SQL 脚本合集
- **[README_SUPABASE.md](./README_SUPABASE.md)** - Supabase 集成说明

## 📋 主要功能

### 商品管理
- 添加新商品（支持图片上传）
- 编辑商品信息（长按商品卡片）
- 分类和品牌筛选
- 商品搜索

### 购物清单
- 添加商品到清单
- 修改商品数量
- 删除清单项
- Bark 通知推送

### 数据管理
- 分类管理（添加/编辑/删除）
- 品牌管理（添加/编辑/删除）
- 实时数据同步

## 🛠️ 技术栈

- **前端**: React 18 + Vite
- **后端**: Supabase (PostgreSQL + Storage + Realtime)
- **样式**: CSS Modules
- **通知**: Bark (iOS)

## 📁 项目结构

```
├── src/
│   ├── components/          # 组件目录
│   │   ├── Header.jsx       # 头部组件
│   │   ├── CategoryNav.jsx  # 分类导航
│   │   ├── BrandSidebar.jsx # 品牌侧边栏
│   │   ├── ProductList.jsx  # 商品列表
│   │   ├── ProductCard.jsx  # 商品卡片
│   │   ├── CartList.jsx     # 购物清单
│   │   ├── AddProduct.jsx   # 添加/编辑商品
│   │   └── ManagePage.jsx   # 分类品牌管理
│   ├── services/            # 服务层
│   │   ├── supabaseService.js  # 数据库操作
│   │   ├── storageService.js   # 图片上传
│   │   └── barkService.js      # Bark 通知
│   ├── lib/
│   │   └── supabase.js      # Supabase 客户端
│   ├── App.jsx              # 本地版本
│   ├── AppWithSupabase.jsx  # Supabase 版本
│   └── main.jsx             # 入口文件
├── DOCUMENTATION.md         # 完整文档
├── SQL_SCRIPTS.md           # SQL 脚本合集
├── README_SUPABASE.md       # Supabase 说明
└── package.json
```

## 💡 使用技巧

- **添加商品**: 点击顶部 ➕ 按钮
- **编辑商品**: 长按商品卡片（0.5秒）
- **管理分类品牌**: 点击顶部 ⚙️ 按钮
- **发送通知**: 在购物清单页面点击 🔔 按钮

## 🔍 常见问题

遇到问题？查看 `DOCUMENTATION.md` 中的"问题排查"部分。

## 📄 许可证

MIT License