# 短视频达人 (Super Video)

一个基于 Vue 3 的现代化短视频应用，专注于提供优质的视频创作和分享体验。

## 📱 项目介绍

短视频达人是一个功能丰富的短视频应用，旨在帮助用户轻松创作、编辑和分享精彩的短视频内容。项目采用现代化的前端技术栈，提供流畅的用户体验和强大的功能支持。

### ✨ 核心特性

- 🎬 **视频创作** - 直观的视频录制和编辑工具
- 🎨 **智能引导** - 新手友好的操作引导系统
- 📱 **响应式设计** - 完美适配各种设备尺寸
- ⚡ **高性能** - 基于 Vite 的快速构建和热更新
- 🔧 **类型安全** - 完整的 TypeScript 支持
- 🎯 **代码质量** - 严格的代码规范和自动化检查

## 🛠️ 技术栈

### 前端框架

- **Vue 3.5.18** - 渐进式 JavaScript 框架
- **TypeScript 5.8.3** - 类型安全的 JavaScript 超集
- **Vite 7.1.2** - 下一代前端构建工具

### 样式和 UI

- **Tailwind CSS 3.4.17** - 实用优先的 CSS 框架
- **PostCSS 8.5.6** - CSS 后处理器
- **Autoprefixer 10.4.21** - 自动添加浏览器前缀

### 开发工具

- **ESLint 9.35.0** - 代码质量检查
- **Prettier 3.6.2** - 代码格式化
- **Husky 9.1.7** - Git hooks 管理
- **Lint-staged 16.1.6** - 暂存文件检查
- **Commitlint** - Commit 信息规范

### 包管理

- **pnpm 10.13.1** - 高效的包管理器
- **Node.js 22.14.0** - JavaScript 运行时

## 🚀 快速开始

### 环境要求

- Node.js >= 22.14.0
- pnpm >= 10.13.1

### 安装依赖

```bash
# 切换到指定 Node.js 版本
nvm use 22.14

# 安装依赖
pnpm install
```

### 开发模式

```bash
# 启动开发服务器
pnpm dev

# 访问应用
# http://localhost:5173
```

### 构建部署

```bash
# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview
```

### 代码质量

```bash
# 代码检查
pnpm lint

# 自动修复
pnpm fix
```

## 📁 项目结构

```
src/
├── components/          # 可复用组件
│   ├── common/         # 通用基础组件
│   ├── video/          # 视频相关组件
│   └── user/           # 用户相关组件
├── views/              # 页面组件
├── composables/        # 组合式函数
├── stores/             # 状态管理
├── utils/              # 工具函数
├── types/              # TypeScript 类型定义
├── assets/             # 静态资源
│   ├── images/         # 图片资源
│   ├── icons/          # 图标资源
│   └── styles/         # 样式文件
└── router/             # 路由配置
```

## 🎯 功能模块

### 已实现功能

- ✅ 项目基础架构搭建
- ✅ 响应式布局系统
- ✅ 引导系统组件
- ✅ 模块切换器
- ✅ 代码质量保障

### 规划中功能

- 🔄 用户认证系统
- 🔄 视频录制和编辑
- 🔄 内容分享功能
- 🔄 社交互动功能

## 📝 开发规范

### 代码风格

- 使用 ESLint + Prettier 统一代码格式
- 遵循 TypeScript 严格类型检查
- 采用 Vue 3 Composition API
- 组件命名使用 PascalCase

### Git 提交规范

使用约定式提交格式：

```bash
# 功能开发
git commit -m "feat: 添加新功能"

# 问题修复
git commit -m "fix: 修复登录问题"

# 文档更新
git commit -m "docs: 更新 README"
```

### 组件开发

- 单一职责原则
- 可复用性设计
- 完整的 TypeScript 类型定义
- 详细的组件文档

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'feat: 添加某个功能'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系方式

如有问题或建议，请通过以下方式联系：

- 项目 Issues: [GitHub Issues](https://github.com/your-username/super_video/issues)
- 邮箱: your-email@example.com

---

⭐ 如果这个项目对你有帮助，请给它一个星标！