你当前使用的是 Ant Design 的 `Collapse
.Panel` 来展示“审批履历”信息，在移动端上，直接使用 `<p>` 标签堆叠内容虽然功能正常，但样式可能显得拥挤、不美观或响应式不佳。下面是对该代码的 **移动端样式优化方案**，包括结构优化、CSS 增强和可读性提升。
---
### ✅ 优化后的代码（带样式增强）
```jsx
import React from 'react';
import { Collapse } from 'antd';
import '
./ApprovalHistory
.css'; // 自定义样式文件
const { Panel } = Collapse;
const ApprovalHistoryPanel = ({ historyList }) => {
return (
<Collapse
.Panel key="7" header="审批履历">
{historyList
.length === 0 ? (
<div className="no-data">暂无审批记录</div>
)
: (
historyList
.map((item) => (
<div className="approval-item" key={item
.id || item
.createTime}>
<div className="approval-row">
<span className="label">节点名：</span>
<span className="value">{item
.taskName}</span>
</div>
<div className="approval-row">
<span className="label">审批人：</span>
<span className="value">{item
.assigneeName || '未指定'}</span>
</div>
<div className="approval-row">
<span className="label">审批时间：</span>
<span className="value">{item
.createTime}</span>
</div>
<div className="approval-row">
<span className="label">审批状态：</span>
<span className={`value status ${item
.state ? 'approved'
: '
pending'}`}>
{item
.state ? '已审批'
: '待审批'}
</span>
</div>
</div>
))
)}
</Collapse
.Panel>
);
};
export default ApprovalHistoryPanel;
```
---
### 🎨 对应的 CSS 样式文件：`ApprovalHistory
.css`
```css
.approval-item {
border
: 1px solid #e8e8e8;
border-radius
: 8px;
padd
ing
: 1
2px;
marg
in-bottom
: 1
2px;
background-color
: #fafafa;
font-size
: 14px;
l
ine-height
: 1
.6;
}
.approval-row {
display
: flex;
marg
in-bottom
: 6px;
}
.label {
font-weight
: 600;
color
: #333;
width
: 70px;
flex-shr
ink
: 0;
}
.value {
color
: #595959;
flex
: 1;
word-break
: break-word;
}
.status {
font-weight
: 500;
padd
ing
: 2px 6px;
border-radius
: 4px;
display
: inl
ine-block;
}
.status
.approved {
background-color
: #f6ffed;
color
: #5
2c41a;
}
.status
.pending {
background-color
: #fffbe6;
color
: #faad14;
}
.no-data {
text-align
: center;
color
: #999;
font-style
: italic;
padd
ing
: 16px;
}
```
---
### 🔍 优化说明：
| 优化点 | 说明 |
|-------|------|
| ✅ 使用 `
.approval-item` 包裹每条记录 | 每个审批项独立卡片化，视觉清晰 |
| ✅ Flex 布局实现标签对齐 | `
.label` 固定宽度 + 左右布局，避免文字错位 |
| ✅ 响应式文本与间距 | 字号 `14px` 适合移动端阅读，`padd
ing` 和 `marg
in` 提升呼吸感 |
| ✅ 状态高亮显示 | “已审批”绿色，“待审批”黄色，提升可读性 |
| ✅ 支持空数据提示 | 避免空白区域让用户困惑 |
| ✅ `word-break
: break-word` | 防止长文本溢出容器 |
| ✅ 圆角边框 + 背景色差 | 提升 UI 层级和美观度 |
---
### 💡 进阶建议（可选）：
1
. **添加时间轴效果**：
可替换为 `Timel
ine` 组件，更符合“履历”的语义。
```jsx
import { Timel
ine } from 'antd';
```
2. **动态适配横屏/竖屏**：
使用 CSS Media Query 动态调整 `
.label` 宽度：
```css
@media (max-width
: 480px) {
.label {
width
: 60px;
font-size
: 13px;
}
.approval-item {
padd
ing
: 10px;
}
}
```
3
. **点击展开详情**（复杂字段）：
如果某条审批有更多字段（如意见），可用嵌套 `Collapse` 实现二级展开。
---
当遇到Pendingjobthresholdreached错误时，用户应检查LSF作业队列状态、作业提交参数、系统资源使用和日志文件，可能需要调整队列参数、资源限制或联系系统管理员。
最低0.47元/天 解锁文章
扫一扫
3378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
