# 智步楼梯灯安装指导中心 - 部署说明

## 项目结构

```
stair-light-guide/
├── index.html          # 主页面
├── css/
│   └── style.css       # 样式文件
├── js/
│   └── app.js          # 应用脚本
├── images/             # 图片资源（待添加）
└── README.md           # 本文件
```

## 本地部署步骤

### 1. 启动本地服务器

使用 Python 简易 HTTP 服务器：

```bash
cd /mnt/data/we-smart/users/limaolin/projects/stair-light-guide

# Python 3
python3 -m http.server 8088

# Python 2
python -m SimpleHTTPServer 8088
```

或使用 Node.js http-server：

```bash
npx http-server -p 8088
```

### 2. FRP 配置

在 frpc.ini 中添加：

```ini
[stair-light-guide]
type = http
local_port = 8088
custom_domains = www.we-smart.cn
locations = /guide/stair-light/
```

或使用子域名方式：

```ini
[stair-light-guide]
type = http
local_port = 8088
custom_domains = guide.we-smart.cn
```

### 3. Nginx 配置（阿里云服务器）

```nginx
# 方式1: 子路径代理
location /guide/stair-light/ {
    proxy_pass http://127.0.0.1:8088/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

# 方式2: 子域名
server {
    listen 80;
    server_name guide.we-smart.cn;
    
    location / {
        proxy_pass http://127.0.0.1:8088;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 腾讯视频嵌入说明

### 方式1: 直接在 JS 中配置

编辑 `js/app.js`，在 videoData 中填入 vid：

```javascript
const videoData = {
    1: {
        title: '开箱验货与配件清单',
        vid: 'x123456789',  // 腾讯视频vid
        // ...
    }
};
```

### 方式2: 通过控制台动态设置

在浏览器控制台执行：

```javascript
// 设置单个视频
setVideoVid(1, 'x123456789');

// 批量设置
setVideoVids({
    1: 'x123456789',
    2: 'x987654321',
    // ...
});
```

### 获取腾讯视频 vid 的方法

1. 上传视频到腾讯视频
2. 打开视频页面
3. 查看页面源代码或分享链接
4. vid 格式如：`x123456789` 或 `m123456789`

## 访问地址

部署完成后，访问：

- 本地: http://localhost:8088
- 线上: https://www.we-smart.cn/guide/stair-light/
- 或: https://guide.we-smart.cn

## 功能特性

- ✅ 16个视频完整教程体系
- ✅ 分类导航（安装基础/小程序/米家APP/特殊场景）
- ✅ 观看进度自动记录（localStorage）
- ✅ 进度条显示
- ✅ 响应式设计（PC/平板/手机）
- ✅ 相关视频推荐
- ✅ FAQ常见问题
- ✅ 配套资料下载区
- ✅ 腾讯视频iframe嵌入

## 后续更新

### 添加腾讯视频iframe

1. 上传视频到腾讯视频
2. 获取每个视频的 vid
3. 更新 `js/app.js` 中的 videoData
4. 刷新页面即可

### 添加配套下载资料

将PDF文件放入项目目录，更新下载链接：

```html
<a href="docs/说明书.pdf" class="download-card" download>
    ...
</a>
```

### SEO优化

已内置：
- meta description
- meta keywords
- 语义化HTML结构
- 响应式meta viewport

建议添加：
- 百度统计/谷歌分析代码
- sitemap.xml
- robots.txt

## 技术支持

如有问题，请联系：
- 邮箱: support@we-smart.cn
- 电话: 400-xxx-xxxx