# moive-craw

**Repository Path**: longkyo/moive-craw

## Basic Information

- **Project Name**: moive-craw
- **Description**: 一款基于 Vue 3 的静态电影搜索与浏览应用，数据来源为[电影天堂](https://www.dytt8899.com)。
- **Primary Language**: Python
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-03
- **Last Updated**: 2026-05-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CineSearch - 电影搜索应用

一款基于 Vue 3 的静态电影搜索与浏览应用，数据来源为[电影天堂](https://www.dytt8899.com)。

---

## 功能特性

### 首页（电影列表）
- **搜索** - 按电影名称、导演、年份实时搜索，支持防抖
- **类型筛选** - 支持动作、科幻、喜剧、爱情、剧情、恐怖、动画、战争、犯罪、悬疑、历史、奇幻、冒险、灾难等类型过滤
- **排序** - 支持按默认顺序、评分、年份排序
- **分页** - 每页 30 条，自动计算页码导航
- **URL 状态同步** - 搜索、筛选、排序、页码会同步到 URL query 参数，刷新页面可恢复状态
- **图片懒加载** - 海报支持懒加载，加载失败显示占位图
- **卡片动画** - 鼠标悬停时卡片上浮、边框发光、光泽扫过动画

### 详情页
- **电影信息展示** - 名称、别名、年份、国家、语言、分类、评分、导演、演员、简介
- **背景模糊** - 海报自动模糊后作为页面背景
- **下载链接** - 支持显示 ftp、ed2k、magnet 三类下载链接，点击一键复制到剪贴板
- **返回导航** - 支持浏览器后退及返回按钮

---

## 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | Vue 3 (Composition API + `<script setup>`) |
| 构建工具 | Vite 5 |
| 路由 | Vue Router 4 |
| 样式 | 原生 CSS（CSS Variables + Scoped Styles） |
| 数据格式 | JSON（静态文件，无后端） |
| 字体 | Google Fonts: Orbitron + Noto Sans SC |
| 数据来源 | 电影天堂 (dytt8899.com) |

---

## 项目结构

```
movie-app/
├── src/
│   ├── assets/
│   │   ├── movie_list.json    # 列表页轻量数据（id、名称、年份、国家、分类、评分、海报路径）
│   │   └── movie_detail.json  # 详情页完整数据（导演、演员、简介、下载链接等）
│   ├── components/            # （暂无独立组件，逻辑内嵌于 views）
│   ├── views/
│   │   ├── Home.vue           # 首页：搜索 + 筛选 + 列表 + 分页
│   │   └── Detail.vue         # 详情页：电影信息 + 下载链接
│   ├── router/
│   │   └── index.js           # 路由配置：/ 和 /detail/:id
│   ├── styles/
│   │   └── global.css         # 全局样式：CSS Variables、背景网格、滚动条、动画
│   ├── App.vue                # 根组件：背景动效 + 路由视图 + 页面过渡
│   └── main.js                # 应用入口
├── public/
│   └── posters/               # 海报图片（构建后输出到 dist/posters/）
├── dist/                      # Vite 构建产物（可直接部署静态文件）
├── index.html
├── package.json
└── vite.config.js             # （默认配置，无自定义）
```

---

## 数据结构

### movie_list.json（列表数据）

```json
{
  "i": "23736",          // 电影 ID
  "n": "장화, 홍련",     // 电影名称
  "y": "2003",           // 年份
  "c": "韩国",           // 国家/地区
  "cat": "剧情/悬疑/惊悚/恐怖",  // 分类
  "r": "7.2",            // 评分
  "img": "/posters/c53b7cf6a5a0.jpg",  // 海报路径
  "dir": "金知云"        // 导演
}
```

### movie_detail.json（详情数据）

```json
{
  "id": "23736",
  "name": "장화, 홍련",
  "name_alt": "蔷花，红莲",
  "year": "2003",
  "country": "韩国",
  "category": "剧情/悬疑/惊悚/恐怖",
  "language": "韩语",
  "release_date": "2003-06-13(韩国)",
  "rating": "7.2",
  "director": "金知云",
  "actors": ["林秀晶", "文根英", ...],
  "intro": "蔷花（林秀晶 饰）和红莲...",
  "image": "/posters/c53b7cf6a5a0.jpg",
  "download_link": "ftp://...",        // 主下载链接
  "download_links": ["ftp://...", "magnet:?xt=urn:btih:..."],  // 多条链接
  "url": "https://www.dytt8899.com/i/20091230/23736.html"
}
```

---

## 使用方法

### 安装依赖

```bash
cd movie-app
npm install
```

### 开发模式

```bash
npm run dev
```

启动后访问 `http://localhost:5173`。

### 构建生产版本

```bash
npm run build
```

构建产物输出到 `dist/` 目录，可直接部署到任意静态文件服务器或 GitHub Pages。

### 预览构建结果

```bash
npm run preview
```

---

## 数据更新

电影数据由爬虫脚本从电影天堂定期抓取，更新 `src/assets/movie_list.json` 和 `src/assets/movie_detail.json` 后，重新构建即可生效。

抓虫脚本位于 `/mnt/d/project/craw/` 目录（与本项目平级）。

---

## 设计风格

- **主题**：深色科幻风格（Cyberpunk / Dark UI）
- **主色调**：青色 `#00ffc8`（primary）、蓝紫 `#64a0ff`（secondary）
- **背景**：深空蓝 `#0a0e17`，带渐变光晕和网格线叠加层
- **毛玻璃效果**：导航栏、筛选栏使用 `backdrop-filter: blur()`
- **页面过渡**：淡入 + 上移的平滑过渡动画
- **字体**：Orbitron（Logo/标题）、Noto Sans SC（正文/中文）