# VideoSlicer

**Repository Path**: lpchw/video-slicer

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-30
- **Last Updated**: 2025-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VideoSlicer - 浏览器端超高速视频切分工具

## 📖 项目简介

VideoSlicer 是一款完全运行在浏览器端的轻量级视频切分工具,支持将长视频智能切分为多个固定时长的片段,并提供批量下载、标签管理和持久化存储功能。

**核心特性:**
- ✨ **零服务器依赖** - 所有处理在浏览器本地完成,数据不上传
- ⚡ **超高速切分** - 使用 MP4Box.js 进行无损快速切分
- 🏷️ **智能标签系统** - 支持预设标签和自定义标签管理
- 💾 **数据持久化** - 基于 IndexedDB 的本地存储,关闭页面数据不丢失
- 📦 **批量下载** - 一键打包下载所有切分片段为 ZIP 文件
- 📊 **实时进度反馈** - 切分和下载进度实时可视化

## 🛠️ 技术栈

- **前端框架:** Vue.js 3.4+ (CDN 引入,无构建工具)
- **视频处理:** MP4Box.js 0.5.2
- **文件打包:** JSZip 3.10.1
- **数据存储:** IndexedDB (Web API)
- **样式规范:** CSS3 + BEM 命名规范
- **开发模式:** 纯 HTML/CSS/JavaScript (无需 npm/webpack)

## 🚀 快速开始

### 前置要求

- 现代浏览器 (Chrome 90+, Edge 90+, Firefox 88+, Safari 14+)
- 本地 HTTP 服务器 (避免 CORS 跨域问题)

### 运行方式

#### 方式 1: Python HTTP Server (推荐)

```bash
python -m http.server 8000
```

#### 方式 2: Node.js serve

```bash
npx serve -p 8000
```

#### 方式 3: PHP 内置服务器

```bash
php -S localhost:8000
```

#### 方式 4: VSCode Live Server 插件

在 VSCode 中右键 `index.html` → "Open with Live Server"

### 访问应用

打开浏览器访问: **http://localhost:8000**

## 📁 项目结构

```
demo3/
├── index.html              # 应用入口
├── css/
│   ├── reset.css           # CSS 重置
│   ├── variables.css       # CSS 变量定义
│   ├── main.css            # 全局样式
│   ├── components.css      # 组件样式
│   └── responsive.css      # 响应式样式
├── js/
│   ├── main.js             # Vue 应用入口
│   ├── composables/        # Composition API 函数
│   ├── components/         # Vue 组件
│   ├── utils/              # 工具函数
│   └── constants.js        # 常量定义
├── assets/
│   ├── icons/              # SVG 图标
│   └── images/             # 图片资源
├── docs/                   # 项目文档
│   ├── prd/                # 产品需求文档
│   ├── ui-architecture/    # UI 架构文档
│   └── stories/            # 开发故事
├── .eslintrc.json          # ESLint 配置
├── .prettierrc.json        # Prettier 配置
├── .editorconfig           # 编辑器配置
└── README.md               # 本文件
```

## 🌐 浏览器兼容性

| 浏览器 | 最低版本 | 支持等级 | 说明 |
|--------|---------|---------|------|
| Chrome | 90+ | ✅ 完全支持 | 最佳体验,推荐使用 |
| Edge | 90+ | ✅ 完全支持 | 基于 Chromium,性能优秀 |
| Firefox | 88+ | ✅ 核心功能 | 部分 API 可能有差异 |
| Safari | 14+ | ⚠️ 基础功能 | IndexedDB 支持有限 |

## 👨‍💻 开发规范

项目遵循严格的编码规范,详见 [前端开发者标准](docs/ui-architecture/前端开发者标准.md)

**关键规范:**
- JavaScript: ES6+, 严格模式, 禁用 `var`
- 命名规范: camelCase (变量), PascalCase (组件), UPPER_SNAKE_CASE (常量)
- CSS 规范: BEM 命名法, kebab-case 类名
- 可访问性: 符合 WCAG AA 标准

## 📚 文档索引

- [产品需求文档 (PRD)](docs/prd/index.md)
- [UI 架构设计](docs/ui-architecture/index.md)
- [开发故事 (User Stories)](docs/stories/)
- [前端技术栈](docs/ui-architecture/前端技术栈.md)
- [样式指南](docs/ui-architecture/样式指南.md)
- [测试要求](docs/ui-architecture/测试要求.md)

## 📝 开发计划

### Epic 1: 项目基础设施与核心切分功能 ✅
- [x] Story 1.1: 项目初始化与开发环境配置
- [ ] Story 1.2: Vue.js 集成与应用框架搭建
- [ ] Story 1.3: 视频上传与预览功能

### Epic 2: 批量处理与进度反馈系统 (规划中)
### Epic 3: 片段管理与标注系统 (规划中)
### Epic 4: 批量下载与数据备份 (规划中)

## 🤝 贡献指南

(待补充)

## 📄 许可证

(待补充)

## 🔗 相关链接

- **在线演示:** (待部署)
- **问题反馈:** [GitHub Issues](https://github.com/your-repo/issues)
- **文档站点:** (待构建)

---

**最后更新:** 2025-10-30
**版本:** v1.0.0 (初始版本)