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

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

一、产品概述

DNF 官方壁纸站是地下城与勇士(DNF)游戏官方的高清壁纸展示与分发平台,面向全平台用户提供:

1.1 TDK 要求

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

1.2 需要兼容的壁纸分辨率

类型分辨率说明
横版1920×10801080P,PC 主流
1920×120016:10 显示器
2560×14402K
3840×21604K
竖版750×1334iPhone SE / 8
1080×1920Android 通用竖屏
1080×2340Android 水滴屏 / 挖孔屏
1125×2436iPhone X / XS / 11 Pro
1179×2556iPhone 14 / 15 Pro
后台壁纸编辑弹窗内置以上 9 个预设分辨率快捷按钮,运营也可自定义添加其他尺寸。
用户角色说明核心需求
C端玩家DNF 游戏玩家 / 壁纸爱好者浏览、预览、下载多分辨率壁纸
运营人员官网内容运营管理Banner、分类、壁纸、公告、活动、投稿规则

系统组成:前台展示页 + 后台管理页,数据互通。


二、前台功能

2.1 导航栏

功能说明

分类类型差异

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

跳转链接(一级/二级分类通用)

WALLPAPER GALLERY
📁 官方壁纸
⭐ 同人作品
↓ Banner 轮播区

2.2 Banner 走马灯轮播

功能说明

运营需要填写的内容

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

2.3 二级分类 Tab 栏

功能说明

默认二级分类:版本KV · 活动/节日壁纸 · 角色立绘(跳转外部链接)
全部
版本KV
活动·节日壁纸
角色立绘 ↗
↓ 瀑布流壁纸列表

2.4 投稿入口横幅(仅同人作品)

功能说明

运营可配置项

配置项说明
关联分类投稿入口归属于哪个UGC分类
投稿邮箱收稿邮箱地址
投稿说明一个完整的大文本,包含所有规则、格式要求、邮件标题格式等
启用/停用是否展示
全部
⭐ 同人作品
投稿你的作品
欢迎 DNF 创作者投稿原创同人作品

2.5 壁纸列表(双布局模式)

布局模式一:官方壁纸(type='normal')— 分组 Grid 布局

布局模式二:同人作品(type='ugc')— CSS 瀑布流

搜索结果布局

通用卡片结构

元素说明
角标左上角蓝色标签,显示 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 公告 + 活动区(仅同人作品)

功能说明

Hash 路由跳转

路由页面
#/notice公告列表页(展示所有公告,卡片式列表)
#/notice/{id}公告详情页(标题 + 日期 + 标签 + 正文)
#/activity活动列表页
#/activity/{id}活动详情页
📢 公告 更多 →
壁纸站全新上线公告04/10
同人投稿规则更新04/08
4月壁纸更新计划04/01
🎉 活动 更多 →
18周年庆壁纸征集04/12
春日限定壁纸投票03/20
最佳同人作品评选03/01

2.7 壁纸预览与下载

功能说明

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

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

下载区交互

预览区域
100%
赛利亚的日常
2026/03/01
分类同人作品
创作者画师小A
来源COLG社区
选择尺寸
横版(同人作品仅预览)
1920×1080
2560×1440
竖版(同人作品仅预览)
1080×1920
该作品为非官方二次创作,与官方剧情、设定无关。
同人作者独立创作,不得对作品内容进行复制和转载。

三、后台管理功能

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

3.1 后台整体框架

模块总览

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

通用能力

内容管理
📺 Banner管理
📂 分类管理
🖼️ 壁纸管理
📢 公告管理
🎉 活动管理
系统配置
✉️ 投稿配置
Banner管理
🔗 预览前台
+ 新增
图片标签(内部)跳转链接排序状态操作
版本KV1编辑 / 删除
同人精选2编辑 / 删除
周年庆典3编辑 / 删除

3.2 分类管理

一级分类

二级分类

内容管理
📺 Banner管理
📂 分类管理
🖼️ 壁纸管理
📢 公告管理
🎉 活动管理
系统配置
✉️ 投稿配置
分类管理
+ 新增
名称类型排序状态子分类操作
官方壁纸normal1版本KV · 活动·节日编辑
同人作品ugc2编辑

3.3 壁纸管理

功能说明

编辑弹窗

编辑项必填说明
壁纸标题*壁纸名称,如"雾岚黄昏战"
所属分类*下拉选择,显示「一级 / 二级」完整路径
缩略图URL*列表页卡片展示用的图片
原图URL(高清大图)预览弹窗用,留空则使用缩略图放大版
作者头像同人画廊专用,卡片上显示的圆形头像
发布时间*格式 YYYY/MM/DD,前台卡片和详情面板展示
角标文字卡片左上角标记,如 NEW、HOT、精选
图片方向(orient)*下拉选择:h=横版(16:9)或 v=竖版。影响同人作品瀑布流中的横竖交替排列算法
排序*数字越小越靠前
状态*上线/下线,下线后前台不可见
扩展字段自由添加任意 key-value 对(如版本名称、创作者、来源等),可控制是否在前台展示
多分辨率图片内置9个常用分辨率预设快捷按钮,也可自定义添加;每行填写分辨率标签、横/竖版类型、对应图片URL
内容管理
📺 Banner管理
📂 分类管理
🖼️ 壁纸管理
📢 公告管理
🎉 活动管理
系统配置
✉️ 投稿配置
壁纸管理
+ 新增
缩略图标题分类方向日期角标状态操作
雾岚黄昏战版本KV横版2025/09NEW编辑 / 删
暗夜裁决者版本KV横版2025/06编辑 / 删
DNF 18周年庆活动·节日横版2026/06HOT编辑 / 删
赛利亚的日常同人作品竖版2026/03精选编辑 / 删

3.4 公告管理 NEW

功能说明

编辑弹窗字段

字段必填说明
标题*公告标题
日期*格式 YYYY/MM/DD
标签可选:new 等
排序*数字越小越靠前
状态*上线/下线
详情内容*富文本编辑器,支持加粗/斜体/标题/列表/插入图片/链接等,前台渲染HTML
内容管理
📺 Banner管理
📂 分类管理
🖼️ 壁纸管理
📢 公告管理
🎉 活动管理
系统配置
✉️ 投稿配置
公告管理
+ 新增
标题日期标签排序状态操作
壁纸站全新上线公告2026/04/10new编辑 / 删
同人投稿规则更新2026/04/08编辑 / 删
4月壁纸更新计划2026/04/01编辑 / 删

3.5 活动管理 NEW

功能说明

编辑弹窗字段

字段必填说明
标题*活动标题
日期*格式 YYYY/MM/DD
标签可选:hot、new 等
排序*数字越小越靠前
状态*上线/下线
详情内容*富文本编辑器,支持加粗/斜体/标题/列表/插入图片/链接等,前台渲染HTML
内容管理
📺 Banner管理
📂 分类管理
🖼️ 壁纸管理
📢 公告管理
🎉 活动管理
系统配置
✉️ 投稿配置
活动管理
+ 新增
标题日期标签状态操作
18周年庆壁纸征集2026/04/12hot编辑 / 删
春日限定壁纸投票2026/03/20编辑 / 删
最佳同人作品评选2026/03/01new编辑 / 删

3.6 投稿配置

功能说明

可配置项

配置项必填说明
关联分类*选择投稿入口归属的UGC类型分类
投稿邮箱*用户投稿的收件邮箱地址
投稿说明*一个完整的大文本框,包含投稿方式、邮件标题格式、作品要求(格式/分辨率)、授权说明等所有内容,前台弹窗原样展示
启用状态*启用/禁用,禁用后前台不显示投稿横幅
内容管理
📺 Banner管理
📂 分类管理
🖼️ 壁纸管理
📢 公告管理
🎉 活动管理
系统配置
✉️ 投稿配置
投稿配置
关联分类同人作品 (ugc)
投稿邮箱dnf-fanart@example.com
启用状态● 开启
投稿说明欢迎DNF创作者投稿原创同人作品! 【投稿方式】发送邮件至上方邮箱 【邮件标题】【DNF投稿】作品名-作者名 【作品要求】PNG/JPG · ≥1920×1080 · 原创DNF相关 【授权说明】投稿即授权官网展示,审核后上架

四、埋点需求

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

所有事件均上报 open_id(用户标识)。

事件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 v1.6.0 · 2026-04-16 11:07:00

每个功能模块配有界面原型示意图