多列表格展示测试#
这篇文章用于测试博客在展示复杂 Markdown 表格时的效果,包括多列、长文本、长链接、中文换行、状态标签和移动端适配。
基础多列表格#
| 序号 | 名称 | 类型 | 状态 | 优先级 | 负责人 | 更新时间 | 备注 |
|---|
| 1 | Markdown 表格 | 内容组件 | 已完成 | 高 | Сер basa | 2026-01-08 | 用于测试普通多列表格展示 |
| 2 | 图片 Lightbox | 图片组件 | 已完成 | 高 | Сер basa | 2026-01-08 | 点击图片后可以在站内弹层预览 |
| 3 | ArtPlayer | 视频组件 | 已完成 | 高 | Сер basa | 2026-01-08 | 支持 MP4 直链播放、倍速、全屏和播放进度记忆 |
| 4 | APlayer | 音乐组件 | 已完成 | 中 | Сер basa | 2026-01-08 | 用于测试音乐卡片和移动端播放体验 |
| 5 | 404 页面 | 页面组件 | 已完成 | 中 | Сер basa | 2026-01-08 | 独立错误页,支持深浅色切换和快速跳转 |
长文本表格#
| 功能模块 | 当前表现 | 需要观察的问题 | 移动端期望 |
|---|
| 搜索页面 | 已经支持搜索按钮、清空按钮、推荐关键词、无结果状态和关键词附近摘要展示 | 需要观察长关键词、长摘要和 HTML 清理后的文本是否会撑破页面 | 搜索结果卡片应该自动换行,不能出现横向滚动 |
| 文章正文 | 支持标题、段落、引用、列表、代码块、表格、图片、视频和附件下载 | 需要观察不同组件组合在同一篇文章内是否会互相影响 | 内容应该自然垂直排列,卡片和按钮不能溢出屏幕 |
| 音乐卡片 | 已经使用 APlayer,本地化资源加载,支持封面、进度条和拖动 | 需要观察歌曲标题、作者、专辑信息在小屏幕下是否完整显示 | 歌曲信息应该完整展示,不被进度条遮挡 |
| 视频播放器 | 已经使用本地化 ArtPlayer,支持直链视频播放 | 需要观察控制栏、设置面板、长按菜单和播放进度记忆是否正常 | 播放器宽度应适配屏幕,不应超出文章容器 |
长链接表格#
多状态表格#
| 编号 | 组件 | 桌面端 | 手机端 | 深色模式 | 浅色模式 | 是否需要继续优化 |
|---|
| A001 | Markdown 表格 | 正常 | 待观察 | 正常 | 正常 | 否 |
| A002 | 下载按钮 | 正常 | 正常 | 正常 | 正常 | 否 |
| A003 | 图片 Lightbox | 正常 | 正常 | 正常 | 正常 | 否 |
| A004 | 搜索页面 | 正常 | 正常 | 正常 | 正常 | 可继续观察 |
| A005 | 音乐卡片 | 正常 | 正常 | 正常 | 正常 | 可继续观察 |
| A006 | 视频播放器 | 正常 | 正常 | 正常 | 正常 | 可继续观察 |
极端宽表格#
| 第一列 | 第二列 | 第三列 | 第四列 | 第五列 | 第六列 | 第七列 | 第八列 | 第九列 | 第十列 |
|---|
| 中文内容测试 | English text test | 1234567890 | 已完成 | 高优先级 | Сер basa | 2026-01-08 | 自动换行测试 | 深色模式 | 浅色模式 |
| 这是一段比较长的中文内容,用来测试单元格能否自然换行,而不是把页面撑宽。 | This is a relatively long English sentence used to test whether table cells can wrap naturally on small screens. | 9876543210 | 进行中 | 中优先级 | 测试人员 | 2026-01-09 | 多列表格测试 | Dark mode | Light mode |
| aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa | bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb | cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc | 超长字符串 | 自动换行 | 不应溢出 | 手机端检查 | 桌面端检查 | 表格测试 | 完成 |
结论观察#
如果这篇文章在手机端和桌面端都没有明显横向溢出,说明当前表格样式已经基本可以应对普通复杂数据展示。
如果极端宽表格仍然不舒服,可以后续再考虑为超宽表格单独增加可横向滚动容器,但普通表格应优先保持可读和自动换行。