# paipweb 项目

## 项目概述

- **项目名称**: paipweb
- **框架**: uni-app (Vue 3 + Vite)
- **状态管理**: Pinia
- **样式预处理器**: Sass
- **多语言支持**: Vue I18n

## 环境要求

- Node.js 16.0 或更高版本
- npm 或 yarn 包管理器

## 安装依赖

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install
```

## 开发环境运行

### H5 开发模式

```bash
npm run dev:h5
```

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

### 自定义平台开发模式

```bash
npm run dev:custom
```

### SSR 模式（H5）

```bash
npm run dev:h5:ssr
```

## 构建打包

### H5 构建

```bash
npm run build:h5
```

构建产物位于 `dist/build/h5` 目录

### 自定义平台构建

```bash
npm run build:custom
```

### SSR 构建（H5）

```bash
npm run build:h5:ssr
```

## 项目结构

```
paipweb/
├── src/                    # 源代码目录
│   ├── App.vue            # 应用入口
│   ├── main.js            # 主入口文件
│   ├── api/               # API 接口
│   │   └── api.js         # API 配置
│   ├── pages/             # 页面目录
│   │   ├── comments/      # 评论组件
│   │   ├── findmore/      # 发现更多组件
│   │   ├── head/          # 下载应用组件
│   │   ├── index/         # 首页
│   │   ├── intereact/     # 互动组件
│   │   ├── news.vue       # 新闻页面
│   │   ├── post.vue       # 帖子页面
│   │   └── video.vue      # 视频页面
│   ├── stores/            # 状态管理
│   │   └── common.js      # 公共状态
│   ├── static/            # 静态资源
│   │   ├── fonts/         # 字体文件
│   │   ├── imgs/          # 图片资源
│   │   ├── logo.png       # 应用图标
│   │   └── videos/        # 视频资源
│   ├── pages.json         # 页面配置
│   ├── manifest.json      # 应用配置
│   └── uni.scss           # 全局样式
├── uni_modules/           # uni-app 模块（包含各种UI组件）
├── package.json           # 项目配置
├── vite.config.js         # Vite 配置
├── index.html             # HTML 入口文件
└── manifest.json          # 应用配置
```

## 测试指南

### 功能测试

1. 运行开发服务器：`npm run dev:h5`
2. 在浏览器中访问 http://localhost:5173
3. 测试各个页面的功能是否正常

### 打包测试

1. 执行构建命令：`npm run build:h5`
2. 检查构建产物是否完整
3. 在服务器上部署构建产物进行测试

## 常见问题

### 依赖安装失败

- 确保 Node.js 版本符合要求
- 尝试清除缓存：`npm cache clean --force`
- 使用淘宝镜像：`npm config set registry https://registry.npmmirror.com`

### 构建失败

- 检查 Node.js 和 npm 版本
- 确认所有依赖已正确安装
- 查看控制台错误信息进行排查

### 样式问题

- 检查 Sass 是否正确安装
- 确认 uni.scss 中的变量和混入是否正确导入

## 开发规范

- 使用 Vue 3 Composition API
- 组件命名采用 PascalCase
- 页面文件放在 `src/pages` 目录下
- 公共组件放在 `src/pages/components` 目录下
- 状态管理使用 Pinia

# 当前存在问题

- 目前是自动跳转到指定页面，后续按需修改跳转逻辑
  - 等待阶段：当前还没有添加等待动画，后续按需添加
  - 加载失败：缺省图貌似需要修改
- 页面布局问题
  - FindMore 组件：目前采用 fixed 定位，固定在页面底部
  - Video 页面：视频与评论在拉动时，评论和右侧互动区域会跟随浏览器窗口向上移动，导致重叠遮挡问题；右侧互动区域图标需要更换
  - Post/News 页面：评论组件互动区域布局问题（可以先检查）
  - 评论组件
    - 互动区域图标需要更换
    - 评论父子关系需要使用数据中的 parent（Comment）Id 进行追踪再展示（还没有实现）
    - 在 video 页面后续可能会变更为弹幕组件
  - 缺省图
    - 各个页面/组件缺省图需要更换