【需求】宝鸡文理学院文章栏目word导入页面显示优化
需求管理元信息
**邮件ID**: 3129
**发件人**: 康武红
**发件邮箱**: kangwh@bibibi.net
**邮件时间**: 2026-07-22 09:28+08:00
**是否需求**: 是
**产品**: 云就业
**优先级**: 3
**来源**: 宝鸡文理学院
**关键词**: 需求, 优化, 反馈
**判定原因**: 标题包含【需求】
一、背景与来源
近期宝鸡文理学院就业中心张老师反馈，在文章栏目进行Word文档导入或发布时，页面显示效果存在体验问题。
此前产品侧为保留Word复制的原格式，避免格式错乱，调整了导入/编辑页面的布局，导致页面呈现为“窄条条”样式。虽然格式保留较好，但视觉上不美观，且可能影响用户阅读和编辑体验。客户明确反馈“窄条条也不好看”，要求优化显示效果。
二、需求/事项概述
**核心诉求**：优化文章栏目Word导入/编辑页面的UI布局与显示效果。
**具体目标**：
1. 解决当前“窄条条”布局带来的视觉不佳问题。
2. 在保持Word原格式兼容性的前提下，提升页面的美观度和易用性。
3. 确保优化后的页面在PC端及不同分辨率下显示正常。
三、详细说明
1. 问题现状
根据聊天记录及截图分析，当前Word导入或富文本编辑界面存在以下问题：
**布局过窄**：内容区域宽度受限，形成“窄条条”视觉效果，不符合常规网页阅读习惯。
**视觉体验差**：虽然保留了格式，但整体页面留白、边距或容器宽度设置不合理，导致页面显得局促。
2. 优化方向建议
*注：具体UI方案需设计团队评估，以下为基于产品视角的功能性描述*
**调整容器宽度**：适当增加内容编辑区或预览区的最大宽度，使其更符合A4纸或常规网页阅读比例，或提供“自适应宽度”选项。
**优化边距与留白**：调整编辑器内部及外部的Padding/Margin，使页面呼吸感更强。
**保持格式兼容**：优化过程中需确保Word导入后的字体、段落、表格等格式不丢失、不乱码。
3. 参考界面
**当前问题界面**：参考附件中的截图，显示为窄条状的文章详情页或编辑页。
**正常参考界面**：参考标准网页公告详情页（如图片1、图片2所示），内容区域应占据合理宽度，布局清晰。
四、验收标准
1. **视觉优化**：Word导入/编辑页面的内容区域宽度不再呈现“窄条条”状态，整体布局美观、协调。
2. **格式保留**：导入Word文档后，原文档的标题、正文、列表、表格等格式保持正确，无错乱。
3. **功能正常**：编辑、保存、发布功能正常，无因布局调整导致的功能异常。
4. **兼容性**：在主流浏览器（Chrome, Edge等）及不同屏幕分辨率下显示正常。
五、待确认问题
1. **具体UI方案**：是否需要设计新的UI稿？还是仅调整CSS样式（如最大宽度、边距）？
2. **移动端适配**：此次优化是否仅针对PC端？移动端（如有）是否需要同步调整？
3. **历史数据兼容**：已发布的文章是否受此UI调整影响？（通常不影响已发布内容，仅影响编辑/导入界面）
六、附件与截图说明
本次需求涉及以下截图，将作为PMS附件上传，供开发和设计参考：
1. **image_001__dbb917b3d7.png**
- **类型**: 界面截图
- **描述**: 网页公告详情页截图，展示正常宽度的文章显示效果（标题、正文、侧边栏等），可作为布局参考。
- **文件名**: `/tmp/41CE97B0@AC8FC453.D71C606A00000000.png`
2. **image_002__0cec027cc6.png**
- **类型**: 界面截图
- **描述**: 网页公告详情页截图，展示另一篇招聘启事的正常显示效果，包含标题、发布时间、正文等。
- **文件名**: `/tmp/680935B6@2AEA935E.D71C606A00000000.png`
3. **image_003__5869f920ed.png**
- **类型**: 界面截图
- **描述**: 富文本编辑器界面截图，展示当前编辑状态，包含警示语、正文内容、底部按钮等，用于定位“窄条条”问题的具体组件。
- **文件名**: `/tmp/6C356584@AC3C9C79.D71C606A00000000.png`
界面截图附录
图 1: image_001__dbb917b3d7.png
图 2: image_002__0cec027cc6.png
图 3: image_003__5869f920ed.png
