# electric-businiess-work

**Repository Path**: learning-as-a-group/electric-businiess-work

## Basic Information

- **Project Name**: electric-businiess-work
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-04
- **Last Updated**: 2026-01-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Zenith - 可持续生活家居商城 (Sustainable Living Store)

## 📌 项目简介

**Zenith** 是一个设计精美、响应式的电商前端项目，专注于展示可持续发展的家具与家居装饰。本项目采用现代前端技术栈构建，强调极简主义视觉风格、流畅的交互体验以及移动端优先的适配策略。

本项目为**纯前端实现**，数据通过本地 Mock 模拟，不依赖后端服务，可直接在浏览器环境中运行。

## 🌟 核心特性

*   **完全响应式设计**：完美适配桌面端、平板和移动端（Mobile-First）。
*   **交互式 UI**：
    *   支持触摸滑动（Swipe）的轮播图组件。
    *   移动端汉堡菜单与平滑展开动画。
    *   全屏沉浸式搜索体验。
*   **商品浏览系统**：
    *   支持多条件筛选（分类）与排序（价格、新品）。
    *   实时搜索过滤功能。
    *   商品详情页画廊展示与规格选择。
*   **购物车功能**：
    *   基于 Context API 的全局状态管理。
    *   支持添加、删除、修改数量。
    *   数据持久化存储（LocalStorage），刷新不丢失。
*   **视觉效果**：
    *   全站统一的 Tailwind CSS 设计系统。
    *   精心设计的过渡动画（Fade-in, Slide-up）。
    *   极简主义排版（Playfair Display + Inter 字体组合）。

## 🛠 技术栈

*   **核心框架**: React 19 (ESM)
*   **路由管理**: React Router DOM 7
*   **样式库**: Tailwind CSS v4.1 (通过 CDN 引入与配置)
*   **图标库**: Lucide React
*   **语言**: TypeScript (ES6+)
*   **构建/运行环境**: 浏览器原生 ESM 支持 (Import Maps)

## 📂 项目目录结构

```text
/
├── index.html              # 入口 HTML 文件 (包含 Tailwind 配置与 Import Maps)
├── index.tsx               # React 应用入口挂载点
├── App.tsx                 # 主组件，包含路由配置与全局 Layout
├── types.ts                # TypeScript 类型定义 (Product, CartItem 等)
├── constants.ts            # Mock 数据源 (商品列表, 分类, 评论等)
├── metadata.json           # 项目元数据配置
├── README.md               # 项目说明文档
│
├── context/
│   └── CartContext.tsx     # 购物车全局状态管理 (Context + Provider)
│
├── components/
│   ├── Layout.tsx          # 页面布局 (导航栏, 页脚, 侧边栏, 搜索弹窗)
│   ├── Carousel.tsx        # 首页轮播图 (支持自动播放与触摸滑动)
│   └── UI.tsx              # 通用 UI 组件 (ProductCard, Tabs, SectionHeader)
│
└── pages/
    ├── Home.tsx            # 首页 (特色板块, 轮播, 推荐商品)
    ├── Shop.tsx            # 商品列表页 (含筛选、排序、搜索逻辑)
    ├── ProductDetail.tsx   # 商品详情页
    ├── Categories.tsx      # 分类聚合页 (Tab 切换效果)
    ├── Cart.tsx            # 购物车页面
    └── About.tsx           # 关于我们 (含 FAQ 折叠面板)
```

## 📝 详细文件说明

### 1. 核心逻辑 (`context/CartContext.tsx`)
管理全站的购物车逻辑。
*   **功能**：提供 `addToCart`, `removeFromCart`, `updateQuantity`, `clearCart` 等方法。
*   **持久化**：使用 `useEffect` 监听 `items` 变化并同步到 `localStorage`，确保用户刷新页面后购物车内容不丢失。

### 2. 布局组件 (`components/Layout.tsx`)
全站的骨架组件。
*   **导航栏 (Navbar)**：
    *   桌面端：显示完整链接。
    *   移动端：折叠为汉堡菜单，点击展开。
    *   滚动监听：页面滚动时导航栏背景变为半透明模糊效果。
*   **搜索 (Search Overlay)**：集成全屏搜索弹窗，支持回车跳转至商品页。
*   **页脚 (Footer)**：展示品牌信息、链接与订阅表单。

### 3. 首页 (`pages/Home.tsx` & `components/Carousel.tsx`)
*   **Carousel**：自定义实现的轮播图，不依赖第三方重型库。实现了自动播放暂停机制（Hover/Touch 时暂停）和触摸滑动切换逻辑。
*   **板块**：包含特性展示（Feature）、推荐商品（Trending）、品牌哲学（Split Layout）和用户评价。

### 4. 商品列表 (`pages/Shop.tsx`)
*   **筛选与排序**：
    *   `useMemo` 钩子优化性能，根据 `search`（搜索词）、`category`（分类）和 `sortBy`（排序规则）实时计算展示列表。
    *   支持 URL 参数控制搜索内容。

### 5. 数据源 (`constants.ts`)
*   由于没有后端，所有商品数据 (`PRODUCTS`)、分类信息 (`CATEGORIES`) 和评论 (`TESTIMONIALS`) 均以静态常量形式存储在此文件中。图片使用了 `picsum.photos` 和 `unsplash` 的随机图源。

## 🎨 设计规范

*   **主色调 (Primary Colors)**:
    *   Zenith 900 (`#3c3c36`): 用于标题、主要按钮、页脚背景。
    *   Zenith 50 (`#f7f7f5`): 用于页面背景，营造柔和的纸质感。
*   **字体**:
    *   标题: `Playfair Display` (衬线体，体现优雅与高级感)。
    *   正文: `Inter` (无衬线体，保证可读性)。

## 🚀 如何运行

建议通过以下方式运行：

注意：本机需要具备nodejs >= 22.0.x版本

1. 如果你是第一次运行本项目，请先下载项目依赖到本地：`npm install`

2. 本地运行通过：`npm run dev` 启动即可

---

© 2024 Zenith Sustainable Living. Created for demonstration purposes.