admin/docs/www/proposal.md

乐笙 Luxsin 官网 CMS 配置需求文档

版本: v1.0
关联文档: web-design.md、tech-stack.md
目标: 定义 Web 端哪些页面和功能可通过 Admin 后台配置管理

---

1. 全局配置

控制全站共享的基础信息，修改后所有页面即时生效。

1.1 站点基础信息

配置项	类型	必填	说明
站点标题 (title)	文本	是	全站 <title> 前缀，如"乐笙 Luxsin"
Favicon	图片上传	是	SVG / PNG / ICO 格式，建议上传 SVG
Logo（导航栏）	图片上传	是	支持 SVG / PNG，需上传浅色版（深色区块用）和深色版（浅色区块用）两种
Logo 深色版	图片上传	是	浅色区块和 Page Hero 上显示
Logo 浅色版	图片上传	是	深色区块上显示

1.2 页脚配置

配置项	类型	必填	说明
公司名称	文本	是	如"深圳市乐笙科技有限公司"
公司地址	文本	否	公司地址，显示在页脚
联系电话	文本	否	客服电话
联系邮箱	文本	否	客服/商务邮箱
版权信息	文本	是	如"© 2026 Luxsin. All rights reserved."
ICP 备案号	文本	否	如"粤ICP备XXXXXXXX号"
公安备案号	文本	否	如"粤公网安备XXXXXXXXXXXXX号"

1.3 社交媒体链接

配置项	类型	必填	说明
微信公众号	图片上传	否	上传微信二维码图片
微博链接	URL	否	微博主页 URL
B站链接	URL	否	Bilibili 主页 URL
YouTube 链接	URL	否	YouTube 频道 URL
Facebook 链接	URL	否	Facebook 主页 URL
Instagram 链接	URL	否	Instagram 主页 URL

• 仅显示已填写的社交媒体，未填写的不显示
• 社交媒体图标由系统内置，admin 只需填入链接或上传二维码

1.4 全站 SEO 默认值

配置项	类型	必填	说明
默认 Meta Description	文本（≤160字符）	是	各页面未单独配置时的默认描述
默认 Meta Keywords	文本（逗号分隔）	否	各页面未单独配置时的默认关键词
默认 OG 图片	图片上传	否	社交分享时的默认预览图（1200×630px）

各页面可单独覆盖 SEO 配置，详见第 7 节。

---

2. 导航栏配置

全站固定顶置导航栏，支持灵活的入口管理和显示形式。

2.1 导航入口管理

Admin 可对导航栏中的每个入口进行以下配置：

配置项	类型	说明
入口名称（中文）	文本	导航显示的中文文案
入口名称（英文）	文本	导航显示的英文文案
链接地址	URL / 路由	点击跳转目标（站内路由或外部 URL）
显示状态	开关	是否在导航栏中显示
排列顺序	数字排序	入口在导航栏中的位置，支持拖拽排序
显示形式	枚举选择	纯文本 / 图标+文本 / 纯图片 / 图片+文本
图标	图标选择器	显示形式含"图标"时，选择内置图标
图片	图片上传	显示形式含"图片"时，上传自定义图片
新窗口打开	开关	是否 target="_blank" 在新标签页打开

默认导航入口：

入口	链接	默认显示	默认形式
产品	/products	是	纯文本
新闻	/news	是	纯文本
关于我们	/about	是	纯文本
技术支持	/support	是	纯文本

2.2 导航悬浮展开（Mega Menu）

"产品"入口在鼠标悬浮时，展开显示产品系列和产品列表（参考理想汽车官网导航）：

┌──────────────────────────────────────────────────────────┐
│  [Logo]   产品▾  新闻  关于我们  技术支持        🌐 语言 │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  DMP 流媒体系列              DAC 解码器系列              │
│  ┌─────┐ ┌─────┐ ┌─────┐   ┌─────┐ ┌─────┐           │
│  │产品图│ │产品图│ │产品图│   │产品图│ │产品图│           │
│  │型号  │ │型号  │ │型号  │   │型号  │ │型号  │           │
│  └─────┘ └─────┘ └─────┘   └─────┘ └─────┘           │
│                                                          │
└──────────────────────────────────────────────────────────┘

行为规则：

• 悬浮展开面板由系统根据产品数据自动生成，无需 admin 手动配置展开内容
• 按"产品系列"分组展示，每个系列下列出该系列下的所有产品
• 产品卡片显示：产品缩略图 + 型号名，点击跳转产品详情页
• 产品系列分组和排序复用「产品管理」中的系列配置（详见第 4 节）
• 展开面板使用毛玻璃背景（backdrop-filter: blur），与导航栏风格统一
• 鼠标移出导航区域后自动收起

移动端行为：

• 手机竖屏下导航栏收缩为汉堡菜单按钮（☰）
• 点击后从顶部或右侧滑出全屏抽屉，入口竖向排列
• 每个入口点击后跳转对应页面，不做悬浮展开
• "产品"入口点击后直接跳转产品列表页（/products）
• 抽屉内底部显示语言切换按钮

2.3 导航栏外观

配置项	类型	说明
首页导航栏风格	枚举	透明（叠加在首屏上）/ 毛玻璃（始终有背景）
非首页导航栏风格	枚举	透明（叠加在 Page Hero 上）/ 毛玻璃
滚动后导航栏风格	枚举	固定为毛玻璃（不可改，确保可读性）

• 首页首屏为深色区块时，导航栏 Logo 使用浅色版、文字为白色
• 首页首屏为浅色区块时，导航栏 Logo 使用深色版、文字为深色
• 滚动后统一使用毛玻璃背景 + 深色 Logo/文字

---

3. 页面内容配置

3.1 首页（灵活配置）

首页由多个 Section 区块纵向堆叠而成，每个区块可独立配置布局模式和内容。

区块列表管理：

操作	说明
新增区块	在首页末尾添加一个新的 Section 区块
拖拽排序	通过拖拽调整区块的上下顺序
显示/隐藏	单独控制某个区块是否显示
复制区块	复制一个已有区块的配置
删除区块	删除区块（二次确认）

单个区块配置项：

配置项	类型	说明
布局模式	枚举选择	9 种预置布局（见 web-design.md 第 5 节）
主题	枚举	light（浅色）/ dark（深色）
背景类型	枚举	纯色 / 图片 / 视频
背景值	素材选择/颜色选择	根据背景类型从素材库选取
遮罩层	开关 + 透明度	是否在背景上叠加半透明遮罩
Overline 文本（中/英）	文本	区块上方的分类标签
标题（中/英）	文本	区块主标题
副标题（中/英）	文本	区块副标题
正文内容（中/英）	富文本	区块描述段落
主 CTA（中/英）	文本 + 链接	主要按钮文案和跳转地址
次 CTA（中/英）	文本 + 链接	次要按钮文案和跳转地址
图片/媒体（中/英）	素材选择	布局需要的产品图、功能图等
数据指标列表	子表单	布局 6（Spec Showcase）专用：数值 + 单位 + 标签
特性列表	子表单	布局 5（Feature Grid）专用：图标 + 标题 + 描述
步骤列表	子表单	布局 8（Scroll Narrative）专用：步骤标题 + 描述 + 配图
视频地址	素材选择	布局 7（Video Showcase）专用
参数分组列表	子表单	布局 10（Spec Table）专用：分组标题 + 参数项列表（详见 4.3 节）

不同布局模式下，仅显示该布局所需的配置字段，无关字段自动隐藏。

3.2 产品详情页（灵活配置）

产品详情页与首页结构相同，由多个 Section 区块纵向堆叠，配置方式一致。

与首页的区别：

• 顶部使用 Page Hero 横幅（标题自动取产品名称，背景图可配置）
• 区块配置挂载在具体产品下，每个产品独立配置自己的 Section 列表
• 面包屑导航自动生成：首页 > 产品中心 > [系列] > [产品名]

3.3 产品列表页（固定结构）

产品列表页结构固定，不可自由添加/删除 Section，但以下元素可配置：

配置项	类型	说明
Page Hero 标题（中/英）	文本	默认"产品中心"，可修改
Page Hero 副标题（中/英）	文本	默认"探索高保真音频设备，寻找您的理想之声"
Page Hero Overline（中/英）	文本	默认"LUXSIN PRODUCTS"
Page Hero 背景图	图片上传	横幅背景图
产品系列排序	拖拽排序	系列在页面中的显示顺序
每行最大产品数	枚举	2 / 3 / 4（默认 3）

产品数据（名称、图片、简介）来自「产品管理」模块（第 4 节），不在此处配置。

3.4 新闻列表页（固定结构）

与产品列表页类似，结构固定，可配置元素：

配置项	类型	说明
Page Hero 标题（中/英）	文本	默认"新闻中心"
Page Hero 副标题（中/英）	文本	默认"获取乐笙最新资讯与行业动态"
Page Hero 背景图	图片上传	横幅背景图
每页显示数量	数字	默认 9 条/页
分页方式	枚举	分页器 / 加载更多按钮

新闻文章数据来自「新闻管理」模块（第 5 节）。

3.5 新闻详情页（固定布局 + 富文本编辑）

新闻详情页布局完全固定（单栏排版，最大宽度 720px），内容通过新闻管理模块的富文本编辑器维护。

可配置项仅限新闻文章本身的编辑字段（详见第 5 节）。

3.6 关于我们（固定布局，文本可配）

关于我们页面布局固定（Page Hero + 3 个 Section），不可新增/删除/调整 Section 布局模式，但每个 Section 内的文本内容和超链接可配置：

配置项	类型	说明
Page Hero 标题（中/英）	文本	默认"关于我们"
Page Hero 副标题（中/英）	文本	默认值可修改
Page Hero 背景图	图片上传	横幅背景图
Section 1 - 标题（中/英）	文本	品牌故事标题
Section 1 - 正文（中/英）	富文本	品牌故事内容
Section 1 - 配图	素材选择	品牌照片
Section 1 - CTA（中/英）	文本 + 链接	按钮文案和链接
Section 2 - 标题（中/英）	文本	价值观/团队标题
Section 2 - 特性列表	子表单	图标 + 标题 + 描述（多项）
Section 3 - 标题（中/英）	文本	CTA 区块标题
Section 3 - CTA（中/英）	文本 + 链接	行动召唤按钮

3.7 技术支持（固定布局，文本可配）

与关于我们类似，布局固定，文本和超链接可配置：

配置项	类型	说明
Page Hero 标题（中/英）	文本	默认"技术支持"
Page Hero 副标题（中/英）	文本	默认值可修改
Page Hero 背景图	图片上传	横幅背景图
Section 1 - 常见问题分类	子表单	分类名称 + 描述 + 图标
Section 2 - 下载中心	子表单	资源名称 + 文件上传 + 版本号
Section 3 - 联系方式	子表单	标题 + 联系信息 + 配图
Section 4 - CTA	文本 + 链接	在线客服引导按钮

---

4. 产品管理

管理所有产品数据，产品数据同时供产品列表页、导航悬浮面板、首页 Section 引用。

4.1 产品系列管理

配置项	类型	说明
系列名称（中/英）	文本	如"DMP 流媒体系列"
系列英文名（Overline）	文本	如"DMP SERIES"，用于 Page Hero Overline
系列副标题（中/英）	文本	如"数字流媒体播放与系统控制中枢"
系列封面图	图片上传	系列展示用的封面图
排列顺序	数字排序	系列在产品列表页和导航面板中的排序
显示状态	开关	是否在网站显示该系列

4.2 产品管理（CRUD）

配置项	类型	必填	说明
产品名称（中/英）	文本	是	如"DMP-A8"
产品 Slug	文本	是	URL 路径标识，如 dmp-a8，生成路由 /products/dmp-a8
所属系列	下拉选择	是	关联一个产品系列
产品简介（中/英）	文本	是	列表页卡片显示的简短描述（≤50字）
产品封面图	图片上传	是	列表页卡片显示的产品图（4:3 比例）
排列顺序	数字排序	否	产品在同系列内的排序
显示状态	开关	是	是否在网站显示该产品
创建时间	自动	—	系统自动生成
更新时间	自动	—	系统自动更新

产品详情页 Section 配置：

每个产品可独立配置详情页的 Section 区块列表，配置方式与首页完全一致（详见第 3.1 节区块配置项）。

• 未配置任何 Section 的产品，详情页仅显示 Page Hero（标题为产品名）+ 产品简介
• 建议为每个产品至少配置 3-5 个 Section 区块

4.3 产品参数规格（Spec Table 布局）

参数规格作为一种 Section 布局类型（布局 10），在产品详情页中与其他 Section 一起拖拽排序、显示/隐藏。

前端展示效果：

• 每个分组以卡片形式展示，左侧为分组标题（如“基本规格”“输入 / 输出”）
• 卡片内以「标签: 值」列表形式排列参数项，细线分隔
• 每个分组默认显示前 N 项，超出部分收起，显示“查看全部参数 ∨”按钮展开
• 展开后按钮变为“收起参数 ∧”

后台配置结构：

每个产品可独立配置多个参数分组，每个分组包含多个参数项：

层级	配置项	类型	必填	说明
分组	分组标题（中/英）	文本	是	如“基本规格”“输入 / 输出”“XLR 输出音频特性”
分组	排列顺序	数字排序	否	分组在产品页中的显示顺序
分组	默认显示数量	数字	否	收起状态下默认显示前 N 项，默认 5
参数项	参数名称（中/英）	文本	是	如“信噪比”“尺寸”“重量”
参数项	参数值（中/英）	文本	是	如“≥129.5dB”“236mm × 236.8mm × 64mm”
参数项	排列顺序	数字排序	否	参数在分组内的显示顺序

配置示例：

产品：Luxsin X8
├── 分组 1：基本规格（默认显示 5 项）
│   ├── 型号: Luxsin X8
│   ├── 尺寸: 236mm (长) × 236.8mm (宽) × 64mm (高)
│   ├── 重量: 2750g
│   ├── 电源输入: AC 100–120V/220–240V–50/60Hz
│   └── 屏幕: 4英寸 LCD (480×960) 触摸屏
├── 分组 2：输入 / 输出（默认显示 5 项）
│   ├── USB-A 输入: 用于本地固件升级
│   ├── USB-B 输入: 最高支持 PCM 768kHz/32bit；DSD512(Native)
│   ├── USB-C 输入: 最高支持 PCM 768kHz/32bit；DSD512(Native)
│   ├── IIS 输入: 最高支持 PCM 768kHz/32bit；DSD512(Native)
│   └── 同轴输入: 最高支持 PCM 192kHz/24bit
└── 分组 3：XLR 输出音频特性（默认显示 5 项）
    ├── 信噪比: ≥129.5dB
    ├── 总谐波失真: ＜−121.8dB @不加权
    ├── 声道分离度: ≥133dB (1kHz@200kΩ)
    ├── 底噪: ＜1.1uVrms
    └── 线路输出电平: 4.2Vrms (1kHz@200kΩ)

Admin 端操作：

• 在产品详情页 Section 配置中，添加布局类型为「参数规格」的区块
• 区块内可添加多个分组，每个分组内可添加多个参数项
• 分组和参数项均支持拖拽排序
• 若参数项≤默认显示数量，前端不显示“查看全部参数”按钮

---

5. 新闻管理

管理新闻文章内容，文章数据供新闻列表页和相关推荐使用。

5.1 新闻文章（CRUD）

配置项	类型	必填	说明
文章标题（中/英）	文本	是	新闻标题
文章 Slug	文本	是	URL 路径标识，如 new-product-launch
文章摘要（中/英）	文本	是	列表页卡片显示的摘要（≤100字，最多 2 行截断）
封面图	图片上传	是	列表页卡片封面（16:9 比例）
正文内容（中/英）	富文本编辑器	是	文章正文，支持标题(h2-h4)、段落、配图、引用、列表、嵌入视频
发布状态	枚举	是	草稿 / 已发布 / 已下线
发布时间	日期时间	是	可设置定时发布（未来时间）
创建时间	自动	—	系统自动生成
更新时间	自动	—	系统自动更新

富文本编辑器能力：

• 标题（h2 / h3 / h4）
• 段落文字（自动应用 body-lg 字号）
• 插入图片（从素材库选取，全宽显示，自动圆角）
• 插入视频（嵌入 YouTube / Bilibili iframe）
• 有序列表 / 无序列表
• 引用块（blockquote）
• 表格
• 分割线

5.2 相关推荐

• 新闻详情页底部的"相关推荐"由系统自动推荐同系列最新 3 篇已发布文章
• Admin 可手动指定每篇文章的推荐文章（覆盖自动推荐）

配置项	类型	说明
手动推荐文章	多选	从已发布文章中选择最多 3 篇作为推荐

---

6. 素材库

统一管理全站使用的图片、视频和文件资源。

6.1 素材类型

类型	支持格式	说明
图片	JPG, PNG, WebP, SVG, AVIF	产品图、Banner 图、新闻配图等
视频	MP4, WebM	背景视频、产品演示视频
文件	PDF, MD, DOCX	说明书、固件包、技术文档

6.2 素材管理功能

功能	说明
上传	支持拖拽上传、批量上传，显示上传进度
预览	图片缩略图预览，视频播放预览
分类	按用途分类：产品图 / Banner 图 / 新闻配图 / 品牌素材 / 视频 / 文件文档 / 其他
标签	自定义标签（如"DMP-A8"、"2026新品"），支持多标签
搜索	按文件名、标签、分类搜索
编辑	修改文件名、分类、标签
删除	软删除，删除前检查是否有页面引用
图片自动处理	上传时自动生成：缩略图（300px 宽）、WebP 版本（如原图非 WebP）

6.3 存储策略

阶段	存储方式	说明
一期	服务器本地存储	文件上传到服务器本地磁盘，通过 Nginx 静态服务访问
二期	云存储（OSS/S3）	支持上传到阿里云 OSS / AWS S3 等云存储，CDN 加速分发

一期本地存储路径规划：

uploads/
├── images/
│   ├── products/      → 产品图
│   ├── banners/       → Page Hero 横幅图
│   ├── news/          → 新闻配图
│   ├── brand/         → 品牌素材（Logo 等）
│   └── misc/          → 其他图片
├── videos/            → 视频文件
├── files/             → 文档文件
└── thumbnails/        → 自动生成的缩略图和 WebP 版本

6.4 素材引用方式

各页面配置中通过素材选择器从素材库选取资源，不直接输入 URL。选择器支持：

• 按分类浏览
• 按标签/关键词搜索
• 最近上传优先显示
• 显示素材被哪些页面引用（引用计数）

---

7. SEO 配置

7.1 页面级 SEO

每个页面可独立配置 SEO 信息，覆盖全站默认值（第 1.4 节）。

页面	可配置项
首页	title / description / keywords / OG 图片
产品列表页	title / description / keywords / OG 图片
产品详情页（每个产品）	title / description / keywords / OG 图片
新闻列表页	title / description / keywords / OG 图片
新闻详情页（每篇文章）	title / description / keywords / OG 图片（默认取文章封面图）
关于我们	title / description / keywords / OG 图片
技术支持	title / description / keywords / OG 图片

7.2 SEO 规则

• 若页面未配置 SEO 信息，自动继承全站默认值
• <title> 格式：{页面标题} - {站点标题}，如"产品中心 - 乐笙 Luxsin"
• <meta description> 若未配置，自动截取页面首段正文（≤160 字符）
• OG 图片若未配置，新闻详情页自动使用文章封面图，其他页面使用全站默认 OG 图片
• 所有页面自动生成 <link rel="canonical"> 标签
• 所有页面自动生成 <link rel="alternate" hreflang> 标签（中英双语互指）
• 自动生成 sitemap.xml，包含所有已发布页面

---

8. 多语言管理

Admin 端维护全站中英双语翻译内容。

8.1 翻译管理方式

方式	适用范围	说明
内联双语字段	导航入口文案、页面标题、Section 内容、产品/新闻字段	每个文本字段同时提供中文和英文输入框，并排显示
翻译词条管理	系统固定文案（按钮文字、表单标签、错误提示等）	类似 i18n key-value 词条表，admin 可编辑

8.2 内联双语字段

所有涉及文案的配置项均标注"（中/英）"，在 Admin 端以 Tab 切换或并排输入的方式同时维护两种语言：

┌─────────────────────────────────────────┐
│  标题  [ 中文 ] [ English ]              │
│                                         │
│  中文：  聆听，本该如此                   │
│  英文：  Listening, Reimagined           │
└─────────────────────────────────────────┘

8.3 翻译词条管理

管理系统中固定的 UI 文案，admin 可查看和编辑：

词条 Key	中文值	英文值	说明
nav.products	产品	Products	导航入口
nav.news	新闻	News	导航入口
nav.about	关于我们	About Us	导航入口
nav.support	技术支持	Support	导航入口
btn.learn_more	了解更多	Learn More	通用按钮
btn.explore	探索产品	Explore	通用按钮
btn.contact	联系我们	Contact Us	通用按钮
btn.load_more	加载更多	Load More	列表页按钮
label.read_more	阅读更多	Read More	新闻卡片链接
footer.copyright	© {year} 乐笙. 保留所有权利.	© {year} Luxsin. All rights reserved.	页脚版权
...	...	...	更多词条

• 词条 Key 由系统预置，admin 仅可修改中文值和英文值
• 支持搜索和筛选词条
• {year} 等变量在渲染时自动替换

---

9. 联系表单配置

管理官网"联系我们"或"预约试听"等表单的行为。

9.1 表单全局配置

配置项	类型	说明
接收邮箱	邮箱	表单提交后发送通知的目标邮箱
提交成功提示（中/英）	文本	用户提交后的成功提示文案
提交失败提示（中/英）	文本	提交失败时的提示文案
防重复提交间隔	数字（秒）	同一用户两次提交的最小间隔，默认 60 秒

9.2 表单字段配置

Admin 可配置表单包含哪些字段：

配置项	类型	说明
字段名称（中/英）	文本	表单字段的标签文案
字段类型	枚举	单行文本 / 多行文本 / 邮箱 / 电话 / 下拉选择
是否必填	开关	提交时是否校验
占位文本（中/英）	文本	输入框的 placeholder
下拉选项（中/英）	列表	字段类型为"下拉选择"时的选项列表

默认表单字段：

字段	类型	必填
姓名	单行文本	是
邮箱	邮箱	是
电话	电话	否
咨询内容	多行文本	是

---

10. 功能模块总览

模块	类型	优先级	说明
全局配置	Admin 配置	P0	站点信息、页脚、社交链接、SEO 默认值
导航栏配置	Admin 配置	P0	入口管理、显示形式、排序、移动端行为
首页 Section 配置	Admin 配置	P0	灵活增删排序 Section 区块，配置布局和内容
产品管理	Admin CRUD	P0	产品 + 系列增删改查，详情页 Section 配置
新闻管理	Admin CRUD	P0	文章增删改查，富文本编辑，发布状态管理
素材库	Admin 管理	P0	图片/视频/文件上传、分类、标签、搜索
多语言管理	Admin 配置	P0	内联双语字段 + 翻译词条管理
产品列表页配置	Admin 配置	P1	Page Hero 可配，列表结构固定
新闻列表页配置	Admin 配置	P1	Page Hero 可配，列表结构固定
关于我们配置	Admin 配置	P1	布局固定，文本和链接可配
技术支持配置	Admin 配置	P1	布局固定，文本和链接可配
SEO 页面级配置	Admin 配置	P1	各页面独立 SEO 覆盖
联系表单配置	Admin 配置	P2	字段配置、接收邮箱
素材库 - 云存储	二期	P2	一期本地存储，二期支持 OSS/S3

---

附录：Admin 端与 Web 端数据流

Admin 端（配置管理）
│
├── 全局配置 ──────────→ Web 全站（导航栏、页脚、SEO 默认值）
├── 导航栏配置 ────────→ Web 导航栏组件
├── 首页 Section ──────→ Web 首页（动态渲染 Section 列表）
├── 产品管理 ──────────→ Web 产品列表页 + 产品详情页 + 导航悬浮面板
├── 新闻管理 ──────────→ Web 新闻列表页 + 新闻详情页
├── 关于我们配置 ──────→ Web 关于我们页面
├── 技术支持配置 ──────→ Web 技术支持页面
├── 素材库 ────────────→ Web 各页面图片/视频/文件引用
├── 多语言词条 ────────→ Web i18n 翻译
├── SEO 配置 ──────────→ Web 各页面 <head> meta 标签
└── 联系表单配置 ──────→ Web 表单组件