DNF 官方壁纸站 — 前端开发需求文档

提取自 PRD v1.6.0 · 2026-05-29 整理
涉及：前台展示页（index.html）+ 后台管理页（admin.html）

一、项目基础信息

项	内容
产品名称	DNF 官方壁纸站
架构	纯前端单页应用（SPA），前台和后台各一个 HTML 入口
数据存储	EdgeOne KV（通过 Edge Functions API 读写）
部署方式	EdgeOne Pages（fullstack，含 edge-functions）
路由方案	Hash 路由（`#/notice`、`#/notice/{id}`、`#/activity`、`#/activity/{id}`）

TDK

<title>地下城与勇士壁纸站-地下城与勇士:创新世纪-DNF-官方网站-腾讯游戏</title>
<meta name="description" content="《地下城与勇士:创新世纪》是全球2D横版格斗网络游戏（MMOACT）的先行者。无限连击的动作特性、极富多样化的职业分支、精准的操作与多样化副本体验，让玩家全方位体验打击爽快感。">
<meta name="keywords" content="地下城与勇士:创新世纪,DNF,Dungeon&Fighter,DF,D&F,地下城,勇士,...">

二、前台展示页功能清单

2.1 导航栏（Header）

需求项	描述
定位	`position: fixed; top: 0`，滚动不消失
左侧	站点 Logo（文字 Logo："DNF 壁纸站" + 副标"WALLPAPER GALLERY"）
中间	一级分类导航按钮（由后台数据驱动）
右侧	搜索输入框
分类切换逻辑	点击一级分类时：若 `link` 字段有值 → `window.open(link, '_blank')`；否则 → 切换当前分类，重新渲染页面内容
分类类型差异	type=`normal`：显示二级Tab + 分组Grid + 分页；type=`ugc`：不显示二级Tab，显示投稿横幅+公告活动区+瀑布流，不分页

2.2 Banner 走马灯

需求项	描述
布局	中间大图占 60% 宽度 + 左右各露出半张（缩小至 `scale(0.82)`，`opacity: 0.5` + 暗化）
比例	16:9
动效	`transition: transform 0.5s cubic-bezier(.4,0,.2,1)`
自动播放	5s 间隔
手动控制	底部圆点指示器 + 左右箭头按钮
点击跳转	若 Banner 配置了跳转链接，点击中间大图跳转该 URL
数据源	后台 Banner 列表，按 sort 升序、仅 status=on 的数据

2.3 二级分类 Tab 栏

需求项	描述
显示条件	仅当一级分类 type=`normal` 时展示
默认项	第一个固定为「全部」（展示该一级分类下所有壁纸）
动态 Tab	由后台二级分类配置生成
点击行为	link 为空 → 筛选当前分类壁纸；link 有值 → `window.open(link, '_blank')`（Tab 显示 `↗` 图标提示）
样式	胶囊按钮形态（`border-radius: 15px`），选中态填充主色

2.4 投稿入口横幅

需求项	描述
显示条件	当前分类为 UGC 类型且投稿配置 enabled=true
内容	渐变背景卡片：引导标题 + 描述文案 + 「我要投稿」按钮
按钮行为	弹出投稿说明弹窗：显示投稿邮箱 + 投稿说明全文（纯文本换行保留）

2.5 壁纸列表 — 双布局模式

布局A：官方壁纸（type=normal） — 分组 Grid

需求项	描述
分组规则	每 5 张壁纸为一组
Grid 定义	`display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; height: 280px; gap: 8px`
大图位置	第 1 张占 2列×2行；奇数组大图在左（column 1-2），偶数组大图在右（column 3-4）
不足5张	该组全部等大排列，4列单行，高度 150px
分页	`PAGE_SIZE = 20`，底部分页器（页码按钮 + 前/后翻页 + "第X-X条/共X条"范围提示）

布局B：同人作品（type=ugc） — CSS 瀑布流

需求项	描述
布局	`column-count: 4; column-gap: 12px`（平板 3 列，手机 2 列）
横竖交替	按 `orient` 字段（`h`=横/`v`=竖），以 "2横+1竖+1横" 节奏交替插入
竖版限高	`max-height: 360px; object-fit: cover`
不分页	全量展示
底部提示	蓝紫渐变卡片："✨ 海量作品持续更新中 · 共收录 XX 幅同人佳作"

搜索结果布局

需求项	描述
触发	输入框按 Enter 触发搜索
匹配规则	标题/日期/扩展字段值，大小写不敏感子串匹配
结果展示	按一级分类分组，每组：分类标题头（图标+名称+计数标签）+ 4列等高Grid平铺（卡片高 160px）+ 底部分割线
退出搜索	清空搜索框按 Enter，或点击导航分类按钮

通用卡片组件

元素	实现
角标	绝对定位左上角，蓝色圆角标签，显示 `badge` 字段（NEW/HOT/精选）
缩略图	`object-fit: cover; loading="lazy"`；hover 时 `transform: scale(1.05)` 带 transition
信息遮罩	底部 `background: linear-gradient(transparent, rgba(0,0,0,0.7))`：标题（12px 加粗白色单行省略）+ 日期·元数据 + 作者头像+昵称（仅 UGC）

2.6 公告 + 活动区

需求项	描述
显示条件	仅 UGC 分类，位于投稿横幅与壁纸列表之间
布局	左右两栏并排（flex 等分）
左栏「公告」	最多 4 条，按 sort 升序。蓝色圆点 + 标题（单行省略）+ 可选标签（NEW/HOT）+ 右侧日期
右栏「活动」	同上，橙色圆点
「更多 →」	公告 → `#/notice`；活动 → `#/activity`
点击条目	跳转 `#/notice/{id}` 或 `#/activity/{id}`

Hash 路由页面

路由	页面内容
`#/notice`	公告列表页（卡片式），「← 返回壁纸站」按钮 → `location.hash=''`
`#/notice/{id}`	公告详情页（标题+日期+标签+HTML正文），「← 返回」→ `history.back()`
`#/activity`	活动列表页
`#/activity/{id}`	活动详情页

路由切换时：隐藏主页所有区块（Banner/Tab/投稿/公告活动区/壁纸列表），显示路由页面容器（max-width: 900px; margin: 0 auto）。

详情富文本：直接渲染 HTML（支持标题/加粗/列表/引用/图片）；兼容旧纯文本（\n → <br>）。

2.7 壁纸预览弹窗

功能	实现要求
触发	点击任意壁纸卡片
预览区	加载 `originalImg`（有则用），否则缩略图；暗色背景全屏覆盖
左右切换	箭头按钮 + 键盘 ← → 方向键
缩放	底部 `- 100% +` 控件；范围 25%~300%，步进 25%
键盘快捷键	`+/=` 放大，`-/_` 缩小，`0` 重置 100%，`ESC` 关闭
信息面板	右侧固定宽度面板：标题、日期、分类路径、扩展字段（key-value 列表）
分辨率区	按横版/竖版分组列出各尺寸
官方壁纸	每行显示分辨率 + 下载图标；点击文字 → 切换预览图为该尺寸；点击下载图标 → `<a download>` 触发下载
同人作品	仅显示分辨率文字（可切换预览），不显示下载图标；底部固定展示版权声明："该作品为非官方二次创作，与官方剧情、设定无关。同人作者独立创作，不得对作品内容进行复制和转载。"

三、后台管理页功能清单

3.0 通用框架

需求项	描述
布局	左侧 sidebar（固定 170px）+ 右侧主内容区
侧边栏模块	Banner管理、分类管理、壁纸管理、公告管理、活动管理、投稿配置
操作反馈	Toast 提示（"已保存""已删除"等）
删除确认	所有删除操作需二次确认弹窗
预览入口	顶部栏「预览前台」链接，新窗口打开前台页

3.1 Banner 管理

列表页

列	说明
图片	缩略图预览
标签	内部标记文本
跳转链接	URL 或 "—"
排序	sort 值
状态	上线 / 下线
操作	编辑 / 删除

编辑弹窗字段

字段	必填	类型	说明
图片 URL	*	文本输入	Banner 展示图地址
标签		文本输入	内部管理标记
跳转链接		URL 输入	点击 Banner 后跳转地址
排序	*	数字输入	数字越小越靠前
状态	*	开关/下拉	上线/下线

3.2 分类管理

列表页

列	说明
名称	分类名称
类型	normal / ugc
排序	sort 值
状态	启用/禁用
子分类	二级分类名称列表预览
操作	编辑 / 删除

一级分类编辑弹窗

字段	必填	说明
分类名称	*
类型	*	下拉：普通(normal) / UGC投稿类(ugc)
跳转链接		留空=正常切换，有值=新窗口跳转
排序	*
启用状态	*
二级分类列表		仅 type=normal 时显示，动态增删行（每行：名称 + 跳转链接）

3.3 壁纸管理

列表页

顶部分类筛选下拉，标题显示「筛选数/总数」
表格列：缩略图、标题、所属分类路径、方向(横/竖)、日期、角标、状态、操作(编辑/删除)

编辑弹窗字段

字段	必填	类型/说明
壁纸标题	*	文本
所属分类	*	下拉，显示「一级 / 二级」路径
缩略图 URL	*	URL
原图 URL		URL，预览弹窗用
作者头像		URL，UGC 卡片头像
发布时间	*	日期选择器，格式 YYYY/MM/DD
角标文字		文本（NEW/HOT/精选等）
图片方向	*	下拉：h=横版 / v=竖版
排序	*	数字
状态	*	上线/下线
扩展字段		动态 key-value 对列表（含"是否前台展示"勾选）
多分辨率图片		动态行列表：分辨率标签 + 横/竖版类型 + 图片URL；内置 9 个预设快捷按钮（1920×1080 / 1920×1200 / 2560×1440 / 3840×2160 / 750×1334 / 1080×1920 / 1080×2340 / 1125×2436 / 1179×2556）

3.4 公告管理

字段	必填	说明
标题	*
日期	*	YYYY/MM/DD
标签		new/hot 等
排序	*	数字越小越靠前
状态	*	上线/下线
详情内容	*	富文本编辑器（加粗/斜体/标题/列表/引用/图片/链接）

3.5 活动管理

字段	必填	说明
标题	*
日期	*	YYYY/MM/DD
标签		hot/new 等
排序	*
状态	*	上线/下线
详情内容	*	富文本编辑器

3.6 投稿配置

字段	必填	说明
关联分类	*	选择 UGC 类型的一级分类
投稿邮箱	*	邮箱地址
投稿说明	*	大文本（多行），包含投稿方式、邮件标题格式、作品要求、授权说明等
启用状态	*	启用/禁用

四、埋点需求

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

所有事件均上报 open_id（用户标识）。

事件名称	evcode	触发时机	参数
页面访问	`pv_wallpaper_homepage`	进入壁纸站/切换路由页	`number`(int): 1=首页 2=公告列表 3=活动列表 4=公告详情 5=活动详情
一级分类点击	`click_category_l1`	点击导航栏一级分类	`number`(int): 分类排列序号(从1开始)
二级分类点击	`click_category_l2`	点击二级 Tab	`number`(int): Tab序号(从1开始，含"全部")
壁纸预览	`click_wallpaper_preview`	打开预览弹窗	`wallpaper_id`(int)
壁纸下载	`click_wallpaper_download`	点击下载按钮	`wallpaper_id`(int), `resolution`(string)
搜索	`search_wallpaper`	搜索框按 Enter	`keyword`(string)
Banner 点击	`click_banner`	点击 Banner	`number`(int): 位置序号(从1开始)
投稿按钮	`click_submit_entry`	点击「我要投稿」	—
公告条目点击	`click_notice_item`	点击公告条目	`notice_id`(int)
公告更多	`click_notice_more`	点击「更多 →」	—
活动条目点击	`click_activity_item`	点击活动条目	`activity_id`(int)
活动更多	`click_activity_more`	点击「更多 →」	—

DNF 官方壁纸站 — 前端开发需求文档 · 2026-05-29