DNF 官方壁纸站 - 产品需求文档 (PRD)

文档属性	内容
产品名称	DNF 官方壁纸站
文档版本	v1.6.0
涉及端	前台展示页 + 后台管理页
创建日期	2026-04-14
更新日期	2026-04-16 10:40:00

DNF 官方壁纸站是地下城与勇士（DNF）游戏官方的高清壁纸展示与分发平台，面向全平台用户提供：

1.1 TDK 要求

1.2 需要兼容的壁纸分辨率

二、前台功能

2.1 导航栏

项目	内容
Title	`地下城与勇士壁纸站-地下城与勇士:创新世纪-DNF-官方网站-腾讯游戏`
Description	`《地下城与勇士:创新世纪》是全球2D横版格斗网络游戏（MMOACT）的先行者。无限连击的动作特性、极富多样化的职业分支、精准的操作与多样化副本体验，让玩家全方位体验打击爽快感。`
Keywords	`地下城与勇士:创新世纪,DNF,Dungeon&Fighter,DF,D&F,地下城,勇士,名将,三国志,横版,2D,腾讯游戏,免费,ACT,转职,觉醒,冒险家,鬼剑士,格斗,格斗家,神枪手,枪手,圣职,红眼,白手,鬼气,阿修罗,气功师,大枪,漫游,阿拉德`

类型	分辨率	说明
横版	1920×1080	1080P，PC 主流
1920×1200	16:10 显示器
2560×1440	2K
3840×2160	4K
竖版	750×1334	iPhone SE / 8
1080×1920	Android 通用竖屏
1080×2340	Android 水滴屏 / 挖孔屏
1125×2436	iPhone X / XS / 11 Pro
1179×2556	iPhone 14 / 15 Pro

用户角色	说明	核心需求
C端玩家	DNF 游戏玩家 / 壁纸爱好者	浏览、预览、下载多分辨率壁纸
运营人员	官网内容运营	管理Banner、分类、壁纸、公告、活动、投稿规则

功能说明

页面顶部固定显示，滚动时不消失
左侧：站点名称 Logo
中间：一级分类导航（点击切换分类）
右侧：搜索框（输入关键词检索壁纸）

分类类型差异

类型	行为差异
官方壁纸 (normal)	下方展示二级分类 Tab 栏；壁纸使用分组 Grid 布局（每5张一组，1大+4小交替）；每页20条分页
同人作品 (ugc)	不展示二级分类 Tab；显示投稿入口横幅+公告活动区；壁纸使用瀑布流布局（column-count:4，横竖混排）；不分页全展示

跳转链接（一级/二级分类通用）

一级分类和二级分类均支持配置跳转链接（link）字段
link 为空：点击正常切换分类/筛选壁纸（默认行为）
link 有值：点击后新窗口打开该 URL（target="_blank"），不切换分类
此功能用于运营将某个分类 Tab 指向外部专题页、活动页等

DNF 壁纸站WALLPAPER GALLERY

📁 官方壁纸

⭐ 同人作品

搜索...

↓ Banner 轮播区

2.2 Banner 走马灯轮播

功能说明

页面首屏核心区域，走马灯式轮播
布局：16:9 比例，中间大图占 60% 宽度 + 左右各露出半张小图（缩小到 82%，半透明+暗化）
切换动效：cubic-bezier(.4,0,.2,1) 缓动，0.5s 平滑滑动
自动播放：5 秒间隔自动切换
手动控制：底部圆点指示器 + 左右箭头按钮
Banner 上的文字、排版由运营自行 P 到图片上，系统只负责展示图片

运营需要填写的内容

字段	说明
图片	Banner 展示图（文字内容由运营P在图上）
标签	内部标记，不对外展示（如「版本KV」「同人精选」，方便运营管理区分）
跳转链接	可选，点击后跳转地址
排序 / 启用状态	控制展示顺序和是否显示

DNF 壁纸站

搜索...

运营 Banner 图（含文字）

2.3 二级分类 Tab 栏

功能说明

位于 Banner 下方，仅当一级分类为「官方壁纸」时出现
默认有「全部」选项，展示当前一级分类下所有子分类的壁纸
其余 Tab 由后台二级分类配置动态生成
点击不同 Tab 筛选对应分类的壁纸

默认二级分类：版本KV · 活动/节日壁纸 · 角色立绘（跳转外部链接）

全部

版本KV

活动·节日壁纸

角色立绘 ↗

↓ 瀑布流壁纸列表

2.4 投稿入口横幅（仅同人作品）

功能说明

仅在选择同人作品分类且投稿配置已启用时显示
横幅包含：引导文案 + 投稿按钮（固定文案"我要投稿"）
点击按钮弹出投稿说明弹窗（显示投稿邮箱 + 完整投稿说明文本）

运营可配置项

配置项	说明
关联分类	投稿入口归属于哪个UGC分类
投稿邮箱	收稿邮箱地址
投稿说明	一个完整的大文本，包含所有规则、格式要求、邮件标题格式等
启用/停用	是否展示

全部

⭐ 同人作品

投稿你的作品

欢迎 DNF 创作者投稿原创同人作品

2.5 壁纸列表（双布局模式）

布局模式一：官方壁纸（type='normal'）— 分组 Grid 布局

每 5 张壁纸为一组，渲染为一个 .grid-row（display:grid; grid-template-columns:repeat(4,1fr); height:280px）
每组第 1 张为大图（占 2 列 × 2 行），第 2~5 张为小图（各占 1 格）
大图左右交替：奇数组大图在左侧（grid-column 1~2），偶数组大图在右侧（grid-column 3~4），形成视觉节奏感
不足 5 张时全部等大排列，4 列单行（高度 150px）
每页 20 条（PAGE_SIZE=20），底部显示分页器（页码按钮 + 前后翻页 + 范围提示）

布局模式二：同人作品（type='ugc'）— CSS 瀑布流

column-count:4 多列瀑布流（平板 3 列，手机 2 列），column-gap:12px
壁纸含 orient 字段区分横版(h，缩略图 400×225)和竖版(v，缩略图 400×700)，渲染时按"2横+1竖+1横"节奏交替插入，保证横竖图均匀分布
竖版图 max-height:360px; object-fit:cover 防止过长
不分页，全部展示。底部显示"海量作品"提示卡片（蓝紫渐变背景，内容"✨ 海量作品持续更新中 + 共收录 XX 幅同人佳作"）

搜索结果布局

按 Enter 触发全局搜索，匹配标题/日期/扩展字段值（大小写不敏感子串匹配）
搜索结果按一级分类分组显示，每组有独立标题头（分类图标 + 分类名 + 结果计数标签）+ 底部分割线
每组内统一使用 4 列等高 Grid 平铺（卡片高 160px），不分页
清空搜索框按 Enter 或点击导航分类按钮退出搜索模式

通用卡片结构

元素	说明
角标	左上角蓝色标签，显示 badge 字段（NEW/HOT/精选），可选
缩略图	`object-fit:cover` 填满，`loading="lazy"` 懒加载，hover 微放大 5%
信息遮罩	底部渐变黑色遮罩：标题（白色12px加粗单行省略）+ 日期·元数据 + 作者头像昵称（仅UGC）

官方壁纸 — 分组 Grid 布局（每5张一组，1大+4小，大图左右交替）

NEW大图（2列×2行）

小图1

小图2

小图3

小图4

小图5

小图6

HOT大图（右侧交替）

小图7

小图8

同人作品 — CSS 瀑布流（column-count:4，横竖混排，不分页）

横版

竖版

横版

竖版

横版

搜索结果 — 按一级分类分组 + 4列Grid平铺

📁官方壁纸2 条结果

⭐同人作品2 条结果

2.6 公告 + 活动区（仅同人作品）

功能说明

仅在同人作品分类下，投稿横幅和壁纸列表之间显示
左右两栏并排：左栏公告、右栏活动
每栏最多展示 4 条（按 sort 字段升序排列），每条有彩色圆点（公告蓝色/活动橙色）+ 标题文本 + 可选标签（NEW/HOT）+ 右侧日期
右上角「更多 →」按钮：公告跳转 #/notice，活动跳转 #/activity
点击每条公告/活动项跳转对应详情页（#/notice/{id} 或 #/activity/{id}）

Hash 路由跳转

路由	页面
`#/notice`	公告列表页（展示所有公告，卡片式列表）
`#/notice/{id}`	公告详情页（标题 + 日期 + 标签 + 正文）
`#/activity`	活动列表页
`#/activity/{id}`	活动详情页

详情页「← 返回」按钮使用 history.back() 导航，确保从列表页进入时能正确返回列表而非主页
列表页「← 返回壁纸站」按钮使用 location.hash='' 返回主页
路由切换时隐藏主页所有区块（Banner/Tab/投稿横幅/公告活动区/壁纸列表），显示路由页面容器（最大宽度 900px 居中）
详情内容支持 HTML 富文本渲染（加粗、标题、列表、引用、图片等），兼容旧纯文本（自动将 \n 转为 <br>）

📢 公告更多 →

壁纸站全新上线公告04/10

同人投稿规则更新04/08

4月壁纸更新计划04/01

🎉 活动更多 →

18周年庆壁纸征集04/12

春日限定壁纸投票03/20

最佳同人作品评选03/01

2.7 壁纸预览与下载

功能说明

点击任意壁纸卡片后弹出预览弹窗：

能力	描述
大图预览	直接加载 originalImg（有则用），否则缩略图放大版
左右切换	箭头按钮 + 键盘方向键
缩放查看	底部 `- 100% +`，范围 25%~300%，步进 25%
键盘快捷键	`+/=` 放大，`-/_` 缩小，`0` 重置，ESC 关闭
信息面板	标题、日期、分类路径、扩展字段
多分辨率展示	按横版/竖版分组列出各尺寸；官方壁纸显示下载入口，同人作品仅支持切换预览，不显示下载按钮

下载区交互

点击分辨率文字区域 → 切换预览图为该分辨率的图
官方壁纸：显示下载图标，点击触发下载（<a download> 方式）
同人作品：关闭全部下载入口，不展示下载图标，仅保留分辨率预览切换
同人作品统一声明：尺寸列表下方固定展示「该作品为非官方二次创作，与官方剧情、设定无关。同人作者独立创作，不得对作品内容进行复制和转载。」

三、后台管理功能

后台供运营人员管理所有前台展示内容，分为六个管理模块。所有编辑操作通过弹窗表单进行，保存后即时生效。带 * 的为必填项。

3.1 后台整体框架

模块总览

Banner 管理 — 首屏走马灯轮播图的增删改查、排序、上下线控制
分类管理 — 一级分类（官方壁纸/同人作品等）及其下属二级分类的管理
壁纸管理 — 所有壁纸内容的增删改查，包含扩展字段和多分辨率下载资源
公告管理 — 同人作品公告的增删改查，含富文本详情内容
活动管理 — 同人作品活动的增删改查，含富文本详情内容
投稿配置 — 同人作品投稿入口的邮箱和说明文案配置

通用能力

每个模块均支持：新增、编辑、删除操作
编辑通过弹窗表单进行，必填项用红色 * 标记
操作完成后 Toast 提示反馈（如"已保存""已删除"）
删除操作需二次确认弹窗

标签(内部)	跳转链接	排序	状态	操作
版本KV	—	1	●	编辑 / 删除
同人精选	—	2	●	编辑 / 删除
周年庆典	—	3	●	编辑 / 删除

3.2 分类管理

一级分类

可新增、编辑、删除一级分类
编辑弹窗内容：分类名称*、类型*（普通/UGC投稿类）、跳转链接、排序*、启用状态*
跳转链接：可选字段。留空时前台点击正常切换分类；填写 URL 后前台点击该分类将新窗口打开链接而非切换分类
类型为「普通」的分类支持在弹窗内直接添加/管理二级子分类
类型为「UGC投稿类」的分类，前台会自动显示投稿入口横幅
删除一级分类时提示"关联壁纸将失去分类"的确认弹窗

二级分类

在一级分类的编辑弹窗内嵌管理，支持动态增删行
每个二级分类填写名称和跳转链接（可选），排序按添加顺序自动生成
跳转链接：留空时前台点击 Tab 正常筛选壁纸；填写 URL 后前台点击该 Tab 将新窗口打开链接
不配置二级分类时，壁纸直接挂在一级分类下

名称	类型	排序	状态	子分类	操作
官方壁纸	normal	1	●	版本KV · 活动·节日	编辑
同人作品	ugc	2	●	—	编辑

3.3 壁纸管理

功能说明

列表顶部有分类筛选下拉，可按分类快速定位壁纸，标题显示「筛选数 / 总数」
每条记录显示：缩略图、标题、所属分类路径、扩展信息摘要、角标、上下线状态
点击编辑打开弹窗表单

编辑弹窗

编辑项	必填	说明
壁纸标题	*	壁纸名称，如"雾岚黄昏战"
所属分类	*	下拉选择，显示「一级 / 二级」完整路径
缩略图URL	*	列表页卡片展示用的图片
原图URL（高清大图）		预览弹窗用，留空则使用缩略图放大版
作者头像		同人画廊专用，卡片上显示的圆形头像
发布时间	*	格式 YYYY/MM/DD，前台卡片和详情面板展示
角标文字		卡片左上角标记，如 NEW、HOT、精选
图片方向(orient)	*	下拉选择：`h`=横版（16:9）或 `v`=竖版。影响同人作品瀑布流中的横竖交替排列算法
排序	*	数字越小越靠前
状态	*	上线/下线，下线后前台不可见
扩展字段		自由添加任意 key-value 对（如版本名称、创作者、来源等），可控制是否在前台展示
多分辨率图片		内置9个常用分辨率预设快捷按钮，也可自定义添加；每行填写分辨率标签、横/竖版类型、对应图片URL

标题	分类	方向	日期	角标	状态	操作
雾岚黄昏战	版本KV	横版	2025/09	NEW	●	编辑 / 删
暗夜裁决者	版本KV	横版	2025/06	—	●	编辑 / 删
DNF 18周年庆	活动·节日	横版	2026/06	HOT	●	编辑 / 删
赛利亚的日常	同人作品	竖版	2026/03	精选	●	编辑 / 删

3.4 公告管理 NEW

功能说明

管理同人作品页面显示的公告信息
前台同人作品左栏展示最新 4 条，"更多"跳转完整列表页
每条公告有详情内容，前台通过 hash 路由 #/notice/{id} 查看

编辑弹窗字段

字段	必填	说明
标题	*	公告标题
日期	*	格式 YYYY/MM/DD
标签		可选：new 等
排序	*	数字越小越靠前
状态	*	上线/下线
详情内容	*	富文本编辑器，支持加粗/斜体/标题/列表/插入图片/链接等，前台渲染HTML

标题	日期	标签	排序	状态
壁纸站全新上线公告	2026/04/10	new	●	编辑 / 删
同人投稿规则更新	2026/04/08	—	●	编辑 / 删
4月壁纸更新计划	2026/04/01	—	●	编辑 / 删

3.5 活动管理 NEW

功能说明

管理同人作品页面显示的活动信息
前台同人作品右栏展示最新 4 条，"更多"跳转完整列表页
每条活动有详情内容，前台通过 hash 路由 #/activity/{id} 查看

编辑弹窗字段

字段	必填	说明
标题	*	活动标题
日期	*	格式 YYYY/MM/DD
标签		可选：hot、new 等
排序	*	数字越小越靠前
状态	*	上线/下线
详情内容	*	富文本编辑器，支持加粗/斜体/标题/列表/插入图片/链接等，前台渲染HTML

标题	日期	标签	状态	操作
18周年庆壁纸征集	2026/04/12	hot	●	编辑 / 删
春日限定壁纸投票	2026/03/20	—	●	编辑 / 删
最佳同人作品评选	2026/03/01	new	●	编辑 / 删

3.6 投稿配置

功能说明

集中管理前台同人作品的投稿入口，配置项精简为三个核心内容
前台点击"我要投稿"按钮后，弹窗展示投稿邮箱和完整投稿说明
投稿按钮文案固定为"我要投稿"，不可修改

可配置项

配置项	必填	说明
关联分类	*	选择投稿入口归属的UGC类型分类
投稿邮箱	*	用户投稿的收件邮箱地址
投稿说明	*	一个完整的大文本框，包含投稿方式、邮件标题格式、作品要求（格式/分辨率）、授权说明等所有内容，前台弹窗原样展示
启用状态	*	启用/禁用，禁用后前台不显示投稿横幅

关联分类	同人作品 (ugc)
投稿邮箱	dnf-fanart@example.com
启用状态	● 开启
投稿说明	欢迎DNF创作者投稿原创同人作品！【投稿方式】发送邮件至上方邮箱【邮件标题】【DNF投稿】作品名-作者名【作品要求】PNG/JPG · ≥1920×1080 · 原创DNF相关【授权说明】投稿即授权官网展示，审核后上架

四、埋点需求

所有埋点通过 beacon.onDirectUserAction 上报，key 为 gallery_dnf_wallpaper。

事件	evcode	事件类型	参数（除 open_id 外）
进入壁纸站	`pv_wallpaper_homepage`	页面访问	`number` — 页面编号，int 类型。1=壁纸站首页，2=公告列表页，3=活动列表页，4=公告详情页，5=活动详情页
一级分类Tab点击	`click_category_l1`	点击	`number` — 一级分类在导航栏中的排列序号，int 类型，从 1 开始。例：1=官方壁纸，2=同人作品（序号跟随后台分类排序）
二级分类Tab点击	`click_category_l2`	点击	`number` — 二级分类在 Tab 栏中的排列序号，int 类型，从 1 开始。例：1=全部，2=版本KV，3=活动/节日壁纸（序号跟随后台分类排序）
壁纸查看（预览弹窗）	`click_wallpaper_preview`	点击	`wallpaper_id` — 被预览壁纸的唯一标识 ID，int 类型，对应后台壁纸数据的 id 字段
壁纸下载	`click_wallpaper_download`	点击	`wallpaper_id` — 壁纸 ID，int 类型；`resolution` — 用户选择的分辨率文本，string 类型，如 "1920×1080"、"2560×1440"
搜索	`search_wallpaper`	搜索	`keyword` — 用户在搜索框中输入的关键词原文，string 类型，按回车触发时上报
Banner点击	`click_banner`	点击	`number` — 被点击 Banner 在轮播中的位置序号，int 类型，从 1 开始
点击投稿按钮	`click_submit_entry`	点击	— 无额外参数，仅上报 open_id
点击公告项	`click_notice_item`	点击	`notice_id` — 被点击公告的唯一标识 ID，int 类型，对应后台公告数据的 id 字段
点击公告"更多"	`click_notice_more`	点击	— 无额外参数，仅上报 open_id
点击活动项	`click_activity_item`	点击	`activity_id` — 被点击活动的唯一标识 ID，int 类型，对应后台活动数据的 id 字段
点击活动"更多"	`click_activity_more`	点击	— 无额外参数，仅上报 open_id

DNF 官方壁纸站 - 产品需求文档 (PRD)

一、产品概述

1.1 TDK 要求

1.2 需要兼容的壁纸分辨率

二、前台功能

2.1 导航栏

功能说明

分类类型差异

跳转链接（一级/二级分类通用）

2.2 Banner 走马灯轮播

功能说明

运营需要填写的内容

2.3 二级分类 Tab 栏

功能说明

2.4 投稿入口横幅（仅同人作品）

功能说明

运营可配置项

2.5 壁纸列表（双布局模式）

布局模式一：官方壁纸（type='normal'）— 分组 Grid 布局

布局模式二：同人作品（type='ugc'）— CSS 瀑布流

搜索结果布局

通用卡片结构

2.6 公告 + 活动区（仅同人作品）

功能说明

Hash 路由跳转

2.7 壁纸预览与下载

功能说明

下载区交互

三、后台管理功能

3.1 后台整体框架

模块总览

通用能力

3.2 分类管理

一级分类

二级分类

3.3 壁纸管理

功能说明

编辑弹窗

3.4 公告管理 NEW

功能说明

编辑弹窗字段

3.5 活动管理 NEW

功能说明

编辑弹窗字段

3.6 投稿配置

功能说明

可配置项

四、埋点需求