畫素廣告位

1. 概述

畫素廣告位頁面是一個基於網格佈局的廣告展示系統，採用 32×20 畫素網格（16:10 比例），將整個畫布分割成多個不同大小的廣告塊。透過直觀的視覺化介面，你可以檢視所有廣告位的佔用情況、點選空閒塊進行模擬上傳，以及訪問已釋出的廣告連結。想要投送廣告的可以聯絡 CueMate 團隊， 廣告到時候可以內建在使用者的安裝包裡展示。

核心特性：

• 畫素網格系統：32×20 網格佈局，精確控制廣告位大小和位置
• 無縫廣告拼接：廣告圖片完全填充塊，實現無縫視覺效果
• 智慧篩選高亮：快速定位特定廣告塊，炫酷高亮動畫
• 模擬上傳功能：點選空閒塊即可模擬上傳廣告圖片
• 全屏展示模式：Ctrl+F 快捷鍵，沉浸式瀏覽體驗
• 實時狀態顯示：空閒、已佔用、已過期三種狀態一目瞭然

NOTE

關於畫素廣告位

CueMate 是一個個人開發者專案，畫素廣告位模組用於賺取生活費用以維持專案的持續開發和運營。如果你覺得 CueMate 對你有幫助，歡迎透過購買廣告位來支援專案發展。感謝你的理解和支援！ 詳情請檢視 廣告定價。

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 瀏覽廣告內容

透過畫素廣告位頁面，你可以：

• 檢視所有廣告的展示效果
• 點選感興趣的廣告訪問連結
• 瞭解不同位置和大小的廣告佈局
• 使用全屏模式獲得更好的瀏覽體驗

11.2 模擬廣告效果

如果你想投放廣告，可以使用模擬上傳功能：

1. 檢視空閒的廣告位
2. 選擇合適的位置和大小
3. 上傳你的廣告圖片預覽效果
4. 對比不同位置的展示效果
5. 決定是否投放廣告

注意： 模擬上傳的資料僅儲存在瀏覽器中，重新整理頁面後會消失，不會實際投放廣告。

11.3 發現感興趣的內容

透過篩選和高亮功能：

• 快速定位特定的廣告塊
• 檢視廣告的詳細資訊
• 瞭解廣告的過期時間
• 發現新的廣告內容

12. 廣告定價

12.1 價格說明

廣告位價格根據塊的尺寸（網格單元數）計算，尺寸越大價格越高。相同面積的橫向和縱向塊價格相同。以下價格均為一年計費（≈ 365 天）。

12.2 價格表

尺寸	網格單元數	年費 (¥)	塊型別
1×1	1	100	正方形
1×2 / 2×1	2	180	長條形
1×3 / 3×1	3	250	長條形
2×2	4	300	正方形
1×4 / 4×1	4	350	長條形
2×3 / 3×2	6	450	長條形
3×3	9	600	正方形
2×4 / 4×2	8	650	長條形
3×4 / 4×3	12	950	長條形
4×4	16	1200	正方形

12.3 投放廣告

如果你想在 CueMate 投放廣告，請聯絡開發者。廣告由開發者親自發布，釋出後會內建到後續的開源版本中，所有下載使用 CueMate 的使用者都將看到你的廣告。

聯絡方式：

• 郵箱：nuneatonhydroplane@gmail.com

建立廣告需要提供的資訊：

欄位	必填	說明
廣告標題	是	廣告的標題名稱
廣告描述	是	廣告的一句話詳細描述（建議控制 100 字以內）
跳轉連結	是	點選廣告後跳轉的 URL
廣告塊	是	從可用的廣告塊中選擇塊的序號（顯示尺寸和價格）
廣告圖片	是	支援 JPG、PNG、GIF、WebP 格式，最大 5MB
聯絡方式	否	電話、微信、QQ、郵箱等
投放時長	否	廣告的到期日期（自動議定為一年後）
備註資訊	否	其他需要說明的資訊

TIP

廣告投放後，開發者會在下一個版本中內建你的廣告，屆時所有新下載或更新的使用者都將看到廣告展示。

關於價格：後續不排除漲價的可能性，CueMate 團隊並不保證您購買的價格是歷史最低，但永遠保證您購買的時間節點一定是後續時間裡最低的。混口飯吃，望理解。

13. 使用技巧

13.1 快速定位感興趣的廣告

使用篩選功能：

1. 點選頁面頂部的篩選下拉框
2. 輸入關鍵詞搜尋特定的廣告塊
3. 選擇後自動高亮並定位到該廣告
4. 觀察炫酷的高亮動畫效果

使用懸停檢視詳情：

• 滑鼠移動到任何廣告塊上
• 左上角會顯示詳細資訊面板
• 檢視廣告標題、描述、過期時間等資訊
• 瞭解廣告塊的位置、大小、價格

13.2 獲得最佳瀏覽體驗

使用全屏模式：

1. 按下 Ctrl+F（Windows）或 Cmd+F（macOS）
2. 或點選頂部的綠色「全屏」按鈕
3. 廣告畫布完全鋪滿螢幕
4. 沉浸式瀏覽所有廣告內容
5. 按 Esc 鍵退出全屏

調整瀏覽器視窗：

• 最大化瀏覽器視窗可以看到更大的畫布
• 保持瀏覽器縮放為 100% 獲得最佳顯示效果
• 使用高解析度顯示器可以看到更清晰的廣告圖片

13.3 探索模擬上傳功能

如果你好奇廣告是如何展示的，可以嘗試模擬上傳：

操作步驟：

1. 找到空閒的廣告塊（灰色顯示的塊）
2. 點選該塊開啟上傳彈框
3. 選擇一張圖片上傳
4. 檢視圖片在畫布上的展示效果
5. 重新整理頁面清空臨時資料

注意事項：

• 模擬上傳的資料僅儲存在瀏覽器記憶體中
• 重新整理頁面後會自動消失
• 不會實際投放廣告
• 僅用於預覽和體驗功能

13.4 瞭解廣告塊的狀態

三種狀態識別：

• 灰色塊：空閒可用，可以模擬上傳
• 藍色塊：已佔用，點選可訪問廣告連結
• 紅色塊：已過期，視為可用狀態

檢視過期資訊：

• 懸停在已佔用的廣告塊上
• 檢視過期時間提示（如"3天后過期"）
• 瞭解廣告的有效期

14. 常見問題

14.1 廣告塊不可見

問題：為什麼看不到某個廣告塊？

可能原因：

1. 廣告塊被其他塊遮擋（z-index 層級問題）
2. 廣告圖片載入失敗
3. 塊配置資料異常

解決方案：

1. 使用篩選功能定位該塊，高亮顯示
2. 懸停檢視該塊的詳細資訊
3. 檢查瀏覽器控制檯是否有圖片載入錯誤
4. 重新整理頁面重新載入資料

14.2 模擬上傳圖片消失

問題：模擬上傳的圖片重新整理後消失了？

可能原因：

• 模擬上傳功能僅儲存在瀏覽器記憶體中
• 不會儲存到後端資料庫
• 重新整理頁面會清空臨時資料

解決方案：

• 這是預期行為，模擬上傳僅用於預覽效果
• 正式上傳需要在「廣告管理」頁面進行
• 建議在模擬上傳前截圖儲存效果

14.3 圖片顯示異常

問題：圖片顯示不完整或變形？

可能原因：

1. 圖片尺寸與塊大小不匹配
2. 圖片比例與塊比例差異過大
3. 瀏覽器縮放比例不是 100%

解決方案：

1. 使用 object-fit: cover 確保圖片填充（預設已設定）
2. 準備符合塊比例的圖片（如 4×4 塊使用 1:1 比例圖片）
3. 重置瀏覽器縮放為 100%（Ctrl+0）

14.4 點選廣告塊無反應

問題：點選廣告塊沒有反應？

可能原因：

1. 廣告沒有配置連結 URL
2. 瀏覽器阻止彈出視窗
3. 網路連線問題

解決方案：

1. 懸停檢視是否有「點選訪問連結」提示
2. 檢查瀏覽器彈出視窗設定，允許來自本站的彈窗
3. 檢查網路連線是否正常
4. 檢視瀏覽器控制檯是否有錯誤

14.5 全屏模式無法篩選

問題：全屏模式下無法篩選廣告塊？

可能原因：

• 全屏模式下工具欄被隱藏
• 篩選下拉框位於工具欄中

解決方案：

1. 退出全屏模式（按 Esc 或點選退出按鈕）
2. 在正常模式下使用篩選功能
3. 篩選高亮後再進入全屏模式檢視

14.6 高亮動畫卡頓

問題：高亮動畫卡頓或不流暢？

可能原因：

1. 裝置效能較低
2. 瀏覽器硬體加速未啟用
3. 頁面廣告塊過多

解決方案：

1. 關閉其他佔用資源的瀏覽器標籤
2. 啟用瀏覽器硬體加速（Chrome: 設定 > 系統 > 使用硬體加速）
3. 升級瀏覽器到最新版本
4. 使用效能更好的裝置

相關頁面

• 廣告管理：建立、編輯、管理廣告
• 塊配置管理：配置廣告塊的位置、大小和價格
• 資料統計：檢視廣告點選和曝光資料