# 湖北大学电商网站示例

**Repository Path**: caredhieacid/website

## Basic Information

- **Project Name**: 湖北大学电商网站示例
- **Description**: 这是一个讲座演示电商网站的demo
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-13
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, JavaScript

## README

# Vibe Shop

<div align="center">

  ![Vibe Shop Banner](screen_mainpage.png)

  <br />

  <h3 align="center">下一代电商体验</h3>

  <p align="center">
    专为速度、美学和流畅的用户交互而打造。
    <br />
    <br />
    <a href="#功能特性">查看演示</a>
    ·
    <a href="#快速开始">报告 Bug</a>
    ·
    <a href="#快速开始">请求功能</a>
  </p>
</div>

## 🎨 设计理念

> *时尚、现代、响应式。*

我们致力于通过精心策划的活力美学，提供卓越的视觉体验。

<div align="center">
  <img src="screen.png" alt="购物车与产品交互" width="45%" style="border-radius: 10px; margin-right: 10px;" />
  <img src="screen_mainpage.png" alt="主仪表盘" width="45%" style="border-radius: 10px;" />
</div>

## ⚡ 技术栈

本项目基于最新的前沿技术构建，以确保顶级的性能和开发体验。

| 类别 | 技术 |
| :--- | :--- |
| **框架** | [Next.js 16](https://nextjs.org/) (App Router) |
| **语言** | [TypeScript](https://www.typescriptlang.org/) |
| **样式** | [Tailwind CSS 4](https://tailwindcss.com/) & [Vanilla CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) |
| **组件库** | [Radix UI](https://www.radix-ui.com/) |
| **状态管理** | [Zustand](https://github.com/pmndrs/zustand) |
| **数据库** | [Prisma](https://www.prisma.io/) |
| **图标** | [Lucide React](https://lucide.dev/) |
| **动画** | [Framer Motion](https://www.framer.com/motion/) |

## ✨ 功能特性

- **动态购物车系统**：具有本地持久化的实时状态管理。
- **响应式布局**：通过流体容器系统完美适配所有设备尺寸。
- **现代 UI/UX**：玻璃拟态效果、流畅的过渡动画和独特的调色板。
- **交互元素**：微动画和悬停效果让界面栩栩如生。

## 🚀 快速开始

按照以下步骤在本地运行项目。

### 前置要求

- Node.js (v18 或更高版本)
- npm 或 yarn

### 安装

1. 克隆仓库
   ```sh
   git clone https://gitee.com/caredhieacid/website.git
   ```
2. 进入项目目录
   ```sh
   cd vibe-shop
   ```
3. 安装依赖
   ```sh
   npm install
   ```
4. 启动开发服务器
   ```sh
   npm run dev
   ```

在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看结果。

## 📄用于学习

本项目基于 开源 许可证分发。查看 `LICENSE` 了解更多信息。

---
<div align="center">
  由 小莫同学 给湖北大学曼彻斯特学院讲课时现场 制作 ❤️  
</div>