# web-movie
**Repository Path**: walii/web-movie
## Basic Information
- **Project Name**: web-movie
- **Description**: IMovie 是一个功能完善的在线观影平台，采用现代化的前端技术栈构建，提供流畅的用户体验和精美的界面展示。支持电影浏览、搜索、播放、评论、收藏等核心功能，同时具备完整的用户系统和 VIP 会员体系。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-05-12
- **Last Updated**: 2026-05-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: Vue, TypeScript
## README
# IMovie 在线观影平台客户端
**基于 Vue3 + TypeScript 的现代化在线观影平台**
[特性](#特性) • [技术栈](#技术栈) • [快速开始](#快速开始) • [项目结构](#项目结构) • [开发指南](#开发指南) • [部署](#部署)
---
## 📖 项目简介
IMovie 是一个功能完善的在线观影平台，采用现代化的前端技术栈构建，提供流畅的用户体验和精美的界面展示。支持电影浏览、搜索、播放、评论、收藏等核心功能，同时具备完整的用户系统和 VIP 会员体系。
## ✨ 特性
- 🎬 **丰富的影视内容** - 热门电影、最新上映、分类浏览
- 🔍 **智能搜索** - 支持关键词搜索和高级筛选
- 🎥 **专业播放器** - 支持弹幕、倍速、画质切换、断点续播
- 💬 **互动社区** - 评论系统、点赞回复、弹幕互动
- 👤 **用户中心** - 个人资料、观看历史、收藏夹
- 💎 **VIP 会员** - 会员特权、积分系统、优惠券
- 📱 **响应式设计** - 完美适配 PC 端和移动端
- 🎨 **精美 UI** - 深色主题、流畅动画、卡片式布局
- ⚡ **高性能** - 路由懒加载、组件按需引入、代码分割
## 🛠️ 技术栈
### 核心框架
- **Vue 3.5** - 渐进式 JavaScript 框架（Composition API）
- **TypeScript 5.6** - 类型安全的 JavaScript 超集
- **Vite 5.4** - 下一代前端构建工具
- **Vue Router 4.6** - 官方路由管理器
- **Pinia 3.0** - Vue 状态管理库
### UI 与样式
- **Element Plus 2.14** - Vue 3 组件库
- **Tailwind CSS 3.14** - 原子化 CSS 框架
- **Sass 1.99** - CSS 预处理器
- **Lucide Icons** - 现代图标库
### 工具库
- **Axios 1.16** - HTTP 请求库
- **Day.js 1.11** - 轻量级日期处理
- **Lodash-es 4.18** - JavaScript 工具库
- **VueUse 14.3** - Vue 组合式工具集
### 工程化
- **ESLint 10.3** - 代码质量检查
- **Prettier 3.8** - 代码格式化
- **Husky 9.1** - Git hooks 工具
- **Commitlint 21.0** - 提交信息规范
## 🚀 快速开始
### 环境要求
- Node.js >= 18.0.0
- npm >= 9.0.0 或 pnpm >= 8.0.0
### 安装依赖
```
bash
# 克隆项目
git clone
cd web-movie
# 安装依赖
npm install
# 或使用 pnpm
pnpm install
```
### 配置环境变量
在项目根目录创建 `.env` 文件：
```
env
VITE_APP_API_BASE_URL=http://localhost:3000/api
```
### 启动开发服务器
```
bash
npm run dev
```
访问 http://localhost:8003 查看应用
### 构建生产版本
```
bash
# 类型检查并构建
npm run build
# 预览生产构建
npm run preview
```
### 代码检查与格式化
```
bash
# ESLint 检查
npm run lint
# ESLint 自动修复
npm run lint:fix
```
## 📁 项目结构
```
web-movie/
├── public/ # 静态资源
│ └── logo.png
├── src/
│ ├── api/ # API 接口封装
│ │ └── index.ts # Axios 实例与拦截器
│ ├── assets/ # 资源文件
│ │ └── styles/ # 全局样式
│ │ └── index.scss
│ ├── components/ # 组件
│ │ ├── common/ # 通用组件
│ │ │ ├── ActionButton.vue
│ │ │ ├── Carousel.vue
│ │ │ ├── MovieCard.vue
│ │ │ ├── RatingStars.vue
│ │ │ └── ...
│ │ ├── layout/ # 布局组件
│ │ │ ├── Header.vue
│ │ │ ├── Footer.vue
│ │ │ ├── SearchInput.vue
│ │ │ └── ...
│ │ ├── movie/ # 播放器相关组件
│ │ │ ├── VideoPlayer.vue
│ │ │ ├── VideoControls.vue
│ │ │ ├── VideoDanmaku.vue
│ │ │ └── ...
│ │ └── user/ # 用户相关组件
│ │ ├── VipPlanCard.vue
│ │ ├── ProfileHeader.vue
│ │ └── ...
│ ├── layout/ # 页面布局
│ │ ├── Header.vue
│ │ └── Footer.vue
│ ├── router/ # 路由配置
│ │ └── index.ts
│ ├── stores/ # Pinia 状态管理
│ │ ├── movie.ts # 电影相关状态
│ │ └── user.ts # 用户相关状态
│ ├── types/ # TypeScript 类型定义
│ │ └── index.ts
│ ├── utils/ # 工具函数
│ │ └── index.ts
│ ├── views/ # 页面视图
│ │ ├── home/ # 首页
│ │ ├── movie/ # 电影详情与播放
│ │ ├── search/ # 搜索页
│ │ ├── category/ # 分类页
│ │ └── user/ # 用户中心
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── .env # 环境变量
├── .eslintrc.cjs # ESLint 配置
├── .prettierrc.json # Prettier 配置
├── vite.config.ts # Vite 配置
├── tailwind.config.js # Tailwind 配置
├── tsconfig.json # TypeScript 配置
└── package.json # 项目依赖
```
## 🎯 核心功能
### 1. 首页模块
- 轮播图展示热门推荐
- 分类导航快捷入口
- 热门/最新电影列表
- 无限滚动加载
### 2. 电影详情
- 电影基本信息展示
- 演员阵容介绍
- 评分与评价
- 相关推荐
- 收藏与分享
### 3. 视频播放
- 高清视频播放
- 弹幕功能（发送/显示/屏蔽）
- 播放控制（暂停/播放/快进/快退）
- 音量调节
- 画质切换
- 倍速播放（0.5x - 2.0x）
- 进度条拖拽
- 断点续播
- 快捷键支持
### 4. 搜索功能
- 关键词搜索
- 搜索结果展示
- 高级筛选（类型/年份/地区）
- 搜索历史
### 5. 分类浏览
- 按类型分类
- 按年份分类
- 按地区分类
- 分页加载
### 6. 用户系统
- 登录/注册
- 个人资料管理
- 头像上传
- 密码修改
### 7. 个人中心
- 观看历史记录
- 收藏夹管理
- 消息通知
- VIP 会员中心
- 礼品中心
- 设置中心
- 帮助中心
### 8. VIP 会员
- 会员套餐购买
- 会员特权展示
- 积分系统
- 优惠券管理
- 会员统计
### 9. 评论系统
- 发表评论
- 评论列表展示
- 点赞/取消点赞
- 回复评论
- 评论排序
### 10. 响应式设计
- PC 端优化布局
- 平板适配
- 移动端适配
- 触摸手势支持
## 🔧 开发指南
### 路由配置
路由配置文件位于 `src/router/index.ts`，采用懒加载方式：
### 状态管理
使用 Pinia 进行状态管理，主要包含两个 store：
**用户状态** (`src/stores/user.ts`)
- 用户信息
- 登录状态
- Token 管理
- VIP 状态
**电影状态** (`src/stores/movie.ts`)
- 电影列表
- 搜索历史
- 播放记录
- 收藏列表
### 组件开发规范
1. 使用 Composition API (`