像素广告位

1. 概述

像素广告位页面是一个基于网格布局的广告展示系统，采用 32×20 像素网格（16:10 比例），将整个画布分割成多个不同大小的广告块。通过直观的可视化界面，你可以查看所有广告位的占用情况、点击空闲块进行模拟上传，以及访问已发布的广告链接。想要投送广告的可以联系 CueMate 团队， 广告到时候可以内置在用户的安装包里展示。

核心特性：

• 像素网格系统：32×20 网格布局，精确控制广告位大小和位置
• 无缝广告拼接：广告图片完全填充块，实现无缝视觉效果
• 智能筛选高亮：快速定位特定广告块，炫酷高亮动画
• 模拟上传功能：点击空闲块即可模拟上传广告图片
• 全屏展示模式：Ctrl+F 快捷键，沉浸式浏览体验
• 实时状态显示：空闲、已占用、已过期三种状态一目了然

2. 进入像素广告位

2.1 打开像素广告位页面

点击顶部下拉列表菜单中的"像素广告位"，进入像素广告位页面。

3. 理解网格布局

像素广告位基于 32×20 网格系统（16:10 比例）设计：

3.1 网格系统说明

3.1.1 网格规格

• 总网格数：32 列 × 20 行 = 640 个基本单元
• 画布比例：16:10（宽屏比例）
• 自适应布局：画布完全填充浏览器窗口，保持比例
• 百分比定位：所有广告块使用百分比位置和大小，确保响应式

3.1.2 广告块类型

根据形状和大小，广告块分为三种类型：

类型	说明	渐变样式	典型尺寸
square	正方形块	对角渐变 (135deg)	2×2, 4×4, 6×6
horizontal	横向长条块	横向渐变 (90deg)	8×2, 12×3, 16×4
vertical	纵向长条块	纵向渐变 (180deg)	2×8, 4×10, 6×12

3.1.3 统计信息

页面顶部显示广告位统计：

• 总块数：系统配置的广告块总数
• 已占用：当前有广告且未过期的块数
• 可用：空闲或已过期的块数
• 比例：32×20（网格规格）

示例：

总块数: 50 | 已占用: 32 | 可用: 18 | 比例: 32×20

4. 查看广告状态

广告块使用不同颜色和渐变标识状态：

4.1 三种状态

4.1.1 空闲可用（灰色系）

视觉特征：

• 背景：浅灰渐变 (linear-gradient)
• 边框：灰色 (#94a3b8)
• 文字：深灰色 (#475569)

显示内容：

• 块 ID（如 A1、B2、C3）
• "点击上传" 提示
• 价格标签（如 ¥100）

交互行为：

• 点击可打开模拟上传弹框
• 悬停显示详细信息
• 轻微阴影效果

4.1.2 已占用（蓝色系）

视觉特征：

• 背景：浅蓝渐变 (#dbeafe → #bfdbfe)
• 边框：蓝色 (#3b82f6)
• 文字：深蓝色 (#1e3a8a)

显示内容：

• 有图片：完全填充显示广告图片（无缝拼接）
• 无图片：显示块 ID 和广告标题

交互行为：

• 点击跳转到广告链接（新窗口打开）
• 悬停显示广告详情
• 图片悬停时显示半透明覆盖层

4.1.3 已过期（红色系）

视觉特征：

• 背景：浅红渐变 (#fee2e2 → #fecaca)
• 边框：红色 (#ef4444)
• 文字：深红色 (#7f1d1d)

显示内容：

• 块 ID
• 广告标题
• "已过期" 标识

交互行为：

• 点击可重新模拟上传
• 视为可用状态
• 悬停显示过期时间

4.2 状态图例

页面右下角的状态图例（可折叠）：

点击「状态图例」标题可折叠/展开：

• 展开：显示三种状态的颜色示例和说明
• 折叠：仅显示标题和折叠图标
• 悬浮层：半透明背景，不遮挡广告内容

5. 筛选和高亮广告块

使用筛选功能快速定位特定广告块：

5.1 筛选操作

5.1.1 打开筛选器

页面顶部有广告块筛选下拉框：

• 默认显示「全部」
• 显示所有可筛选的块配置
• 支持搜索关键词

5.1.2 筛选选项

每个选项显示：

• 块 ID（如 A1）
• 块大小（如 4x4）
• 块价格（如 ¥200）

格式： A1 (4x4 - ¥200)

5.1.3 选择筛选

1. 点击筛选下拉框
2. 输入关键词搜索（可选）
3. 选择需要查看的广告块
4. 页面自动定位并高亮该块

5.1.4 清除筛选

点击筛选框的清除图标 (×)，恢复显示全部块。

5.2 炫酷高亮效果

选中的广告块会展示炫酷的高亮动画：

选中的广告块会有明显的金色发光边框和浮起效果，非常容易识别。边框会有呼吸动画和渐变旋转效果，帮助你快速定位到目标广告块。

6. 查看悬停信息

鼠标悬停在任何广告块上，会显示详细信息面板：

6.1 信息面板位置

• 位置：画布左上角
• 样式：白色半透明背景，毛玻璃效果
• 层级：悬浮在广告块之上
• 大小：最大宽度 384px，自动高度

6.2 面板内容

6.2.1 基本信息（所有块）

• 块 ID：大字体显示（如 A1）
• 块 ID 副本：紫色小字显示完整 ID
• 网格位置：x, y 坐标（如 0, 0）
• 网格大小：宽×高（如 4 × 4）
• 容器占比：百分比大小（如 12.5% × 20.0%）

6.2.2 有广告时

• 广告标题：蓝色显示
• 广告描述：灰色显示
• 过期时间：紫色显示，带时钟图标
  • 格式："X天后过期" / "X小时后过期" / "即将过期" / "已过期"
• 链接提示：绿色显示，带链接图标："点击访问链接"

6.2.3 空闲块时

• 可用提示："此块可用，点击可模拟上传广告"（带星星图标）
• 价格信息："价格: ¥100"（带美元符号图标）

6.3 图片广告的悬停效果

有图片的广告块悬停时：

• 图片上方显示半透明黑色覆盖层
• 覆盖层显示块 ID 和广告标题
• 渐变过渡效果（200ms）

7. 模拟上传广告

点击空闲块可模拟上传广告图片，查看效果：

7.1 打开上传弹框

触发条件：

• 点击空闲块（无广告或已过期的块）
• 不能点击已占用的广告块

弹框内容：

• 侧拉抽屉样式（从右侧滑出）
• 显示选中块的详细信息
• 提供图片上传区域

7.2 上传操作流程

7.2.1 选择图片

• 点击上传区域或拖拽图片
• 支持的格式：JPG、PNG、GIF、WebP
• 文件大小限制：根据块大小建议合适尺寸

7.2.2 预览图片

• 上传区域显示图片预览
• 可重新选择其他图片

7.2.3 填写信息（可选）

• 广告标题：自动生成"模拟广告 - 块ID"
• 广告链接：默认 "#"
• 其他信息根据需要填写

7.2.4 确认上传

• 点击「上传」按钮
• 显示成功提示：模拟上传到块 XX 成功！价格: ¥XXX
• 关闭弹框

7.2.5 查看效果

• 画布立即显示上传的图片
• 图片完全填充块，无缝拼接
• 悬停可查看详情

7.3 临时数据说明

重要提示：

• 模拟上传的数据是临时数据，仅保存在浏览器内存中
• 刷新页面后会消失
• 不会保存到数据库
• 仅用于预览效果

7.4 取消上传

点击弹框的「关闭」按钮或遮罩层，取消上传操作。

8. 全屏浏览模式

使用全屏模式沉浸式浏览广告位：

8.1 进入全屏

方法 1：点击按钮

• 点击页面顶部的绿色「全屏」按钮
• 按钮图标：放大图标 (ArrowsPointingOutIcon)

方法 2：快捷键

• 按下 Ctrl+F（Windows/Linux）
• 按下 Cmd+F（macOS）

8.2 全屏界面

变化：

• 控制工具栏隐藏
• 广告画布完全铺满屏幕
• 退出按钮显示在右上角（红色圆形）
• 操作指南和状态图例依然可用（悬浮层）

保留功能：

• 悬停信息面板
• 广告块点击
• 筛选高亮（需退出全屏才能操作）
• 操作指南和状态图例

8.3 退出全屏

方法 1：点击退出按钮

• 点击右上角的红色圆形按钮
• 按钮图标：X 图标 (XMarkIcon)

方法 2：快捷键

• 按下 Esc 键
• 再次按下 Ctrl+F / Cmd+F

方法 3：浏览器全屏退出

• 使用浏览器自带的全屏退出功能

9. 刷新数据

手动刷新广告位数据：

9.1 刷新方法

点击刷新按钮：

• 位置：页面顶部工具栏右侧
• 图标：蓝色旋转箭头 (ArrowPathIcon)
• 文字：「刷新」

刷新操作：

1. 重新从服务器获取活跃广告列表
2. 重新获取块配置数据
3. 重新初始化广告块布局
4. 清空临时上传的数据（如有）
5. 显示最新状态

自动刷新场景：

• 页面首次加载
• 模拟上传成功后（仅更新临时数据）

10. 操作指南

页面左下角的操作指南（可折叠）：

10.1 指南内容

• 点击空闲块进行模拟上传（图片图标）
• 点击广告块访问链接（链接图标）
• 悬停查看详细信息（眼睛图标）
• Ctrl+F 全屏模式（全屏图标）

10.2 折叠控制

• 点击「操作指南」标题可折叠/展开
• 展开：显示四条操作提示
• 折叠：仅显示标题和向下箭头图标
• 半透明背景，不影响查看广告

11. 常见问题

11.1 问题 1：为什么看不到某个广告块？

可能原因：

1. 广告块被其他块遮挡（z-index 层级问题）
2. 广告图片加载失败
3. 块配置数据异常

解决方法：

1. 使用筛选功能定位该块，高亮显示
2. 悬停查看该块的详细信息
3. 检查浏览器控制台是否有图片加载错误
4. 刷新页面重新加载数据

11.2 问题 2：模拟上传的图片刷新后消失了？

原因：

• 模拟上传功能仅存储在浏览器内存中
• 不会保存到后端数据库
• 刷新页面会清空临时数据

解决方法：

• 这是预期行为，模拟上传仅用于预览效果
• 正式上传需要在「广告管理」页面进行
• 建议在模拟上传前截图保存效果

11.3 问题 3：图片显示不完整或变形？

可能原因：

1. 图片尺寸与块大小不匹配
2. 图片比例与块比例差异过大
3. 浏览器缩放比例不是 100%

解决方法：

1. 使用 object-fit: cover 确保图片填充（默认已设置）
2. 准备符合块比例的图片（如 4×4 块使用 1:1 比例图片）
3. 重置浏览器缩放为 100%（Ctrl+0）

11.4 问题 4：点击广告块没有反应？

可能原因：

1. 广告没有配置链接 URL
2. 浏览器阻止弹出窗口
3. 网络连接问题

解决方法：

1. 悬停查看是否有「点击访问链接」提示
2. 检查浏览器弹出窗口设置，允许来自本站的弹窗
3. 检查网络连接是否正常
4. 查看浏览器控制台是否有错误

11.5 问题 5：全屏模式下无法筛选广告块？

原因：

• 全屏模式下工具栏被隐藏
• 筛选下拉框位于工具栏中

解决方法：

1. 退出全屏模式（按 Esc 或点击退出按钮）
2. 在正常模式下使用筛选功能
3. 筛选高亮后再进入全屏模式查看

11.6 问题 6：高亮动画卡顿或不流畅？

可能原因：

1. 设备性能较低
2. 浏览器硬件加速未启用
3. 页面广告块过多

解决方法：

1. 关闭其他占用资源的浏览器标签
2. 启用浏览器硬件加速（Chrome: 设置 > 系统 > 使用硬件加速）
3. 升级浏览器到最新版本
4. 使用性能更好的设备

12. 使用技巧

12.1 快速定位感兴趣的广告

使用筛选功能：

1. 点击页面顶部的筛选下拉框
2. 输入关键词搜索特定的广告块
3. 选择后自动高亮并定位到该广告
4. 观察炫酷的高亮动画效果

使用悬停查看详情：

• 鼠标移动到任何广告块上
• 左上角会显示详细信息面板
• 查看广告标题、描述、过期时间等信息
• 了解广告块的位置、大小、价格

12.2 获得最佳浏览体验

使用全屏模式：

1. 按下 Ctrl+F（Windows）或 Cmd+F（macOS）
2. 或点击顶部的绿色「全屏」按钮
3. 广告画布完全铺满屏幕
4. 沉浸式浏览所有广告内容
5. 按 Esc 键退出全屏

调整浏览器窗口：

• 最大化浏览器窗口可以看到更大的画布
• 保持浏览器缩放为 100% 获得最佳显示效果
• 使用高分辨率显示器可以看到更清晰的广告图片

12.3 探索模拟上传功能

如果你好奇广告是如何展示的，可以尝试模拟上传：

操作步骤：

1. 找到空闲的广告块（灰色显示的块）
2. 点击该块打开上传弹框
3. 选择一张图片上传
4. 查看图片在画布上的展示效果
5. 刷新页面清空临时数据

注意事项：

• 模拟上传的数据仅保存在浏览器内存中
• 刷新页面后会自动消失
• 不会实际投放广告
• 仅用于预览和体验功能

12.4 了解广告块的状态

三种状态识别：

• 灰色块：空闲可用，可以模拟上传
• 蓝色块：已占用，点击可访问广告链接
• 红色块：已过期，视为可用状态

查看过期信息：

• 悬停在已占用的广告块上
• 查看过期时间提示（如"3天后过期"）
• 了解广告的有效期

13. 使用场景

13.1 浏览广告内容

通过像素广告位页面，你可以：

• 查看所有广告的展示效果
• 点击感兴趣的广告访问链接
• 了解不同位置和大小的广告布局
• 使用全屏模式获得更好的浏览体验

13.2 模拟广告效果

如果你想投放广告，可以使用模拟上传功能：

1. 查看空闲的广告位
2. 选择合适的位置和大小
3. 上传你的广告图片预览效果
4. 对比不同位置的展示效果
5. 决定是否投放广告

注意： 模拟上传的数据仅保存在浏览器中，刷新页面后会消失，不会实际投放广告。

13.3 发现感兴趣的内容

通过筛选和高亮功能：

• 快速定位特定的广告块
• 查看广告的详细信息
• 了解广告的过期时间
• 发现新的广告内容

相关页面

• 广告管理：创建、编辑、管理广告
• 块配置管理：配置广告块的位置、大小和价格
• 数据统计：查看广告点击和曝光数据