<h2>操作列布局优化</h2>
|
<p class="subtitle">按钮在同一排显示，设置固定宽度防止界面变形</p>
|
|
<div class="section">
|
<h3>1. 库存信息页面 - 托盘级别操作</h3>
|
<p class="subtitle">操作列固定宽度，按钮横向排列</p>
|
|
<div class="mockup">
|
<div class="mockup-header">预览：库存信息表格</div>
|
<div class="mockup-body">
|
<table class="mock-table">
|
<thead>
|
<tr>
|
<th style="width: 120px;">托盘编号</th>
|
<th style="width: 150px;">货位编号</th>
|
<th style="width: 100px;">仓库</th>
|
<th style="width: 90px;">创建人</th>
|
<th style="width: 200px;">操作</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>P001</td>
|
<td>A01-01-01</td>
|
<td>一号仓</td>
|
<td>张三</td>
|
<td>
|
<button class="mock-btn-inline mock-btn-primary">进站</button>
|
<button class="mock-btn-inline mock-btn-success">出站</button>
|
</td>
|
</tr>
|
<tr>
|
<td>P002</td>
|
<td>A01-01-02</td>
|
<td>一号仓</td>
|
<td>李四</td>
|
<td>
|
<button class="mock-btn-inline mock-btn-primary">进站</button>
|
<button class="mock-btn-inline mock-btn-success">出站</button>
|
</td>
|
</tr>
|
<tr>
|
<td>P003</td>
|
<td>B01-01-01</td>
|
<td>二号仓</td>
|
<td>王五</td>
|
<td>
|
<button class="mock-btn-inline mock-btn-primary">进站</button>
|
<button class="mock-btn-inline mock-btn-success">出站</button>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<h3>2. 库存明细页面 - 电芯级别操作</h3>
|
<p class="subtitle">三个按钮横向排列，操作列固定宽度</p>
|
|
<div class="mockup">
|
<div class="mockup-header">预览：库存明细表格</div>
|
<div class="mockup-body">
|
<table class="mock-table">
|
<thead>
|
<tr>
|
<th style="width: 100px;">物料编号</th>
|
<th style="width: 140px;">物料名称</th>
|
<th style="width: 150px;">电芯码</th>
|
<th style="width: 90px;">数量</th>
|
<th style="width: 80px;">状态</th>
|
<th style="width: 280px;">操作</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>M001</td>
|
<td>三元锂电池</td>
|
<td>SN20240101001</td>
|
<td>100</td>
|
<td><span class="mock-tag mock-tag-success">正常</span></td>
|
<td>
|
<button class="mock-btn-inline mock-btn-primary">绑定</button>
|
<button class="mock-btn-inline mock-btn-warning">解绑</button>
|
<button class="mock-btn-inline mock-btn-danger">NG上报</button>
|
</td>
|
</tr>
|
<tr>
|
<td>M001</td>
|
<td>三元锂电池</td>
|
<td>SN20240101002</td>
|
<td>100</td>
|
<td><span class="mock-tag mock-tag-warning">异常</span></td>
|
<td>
|
<button class="mock-btn-inline mock-btn-primary">绑定</button>
|
<button class="mock-btn-inline mock-btn-warning">解绑</button>
|
<button class="mock-btn-inline mock-btn-danger">NG上报</button>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<h3>弹窗确认交互流程</h3>
|
<p class="subtitle">点击按钮 → 弹出确认对话框 → 确认后调用MES接口</p>
|
|
<div class="mockup">
|
<div class="mockup-header">预览：确认对话框示例</div>
|
<div class="mockup-body">
|
<div class="mock-dialog">
|
<div class="mock-dialog-header">
|
<span class="mock-dialog-title">确认操作</span>
|
<span class="mock-dialog-close">✕</span>
|
</div>
|
<div class="mock-dialog-body">
|
<p class="mock-dialog-text">您即将执行 <strong>托盘进站</strong> 操作</p>
|
<div class="mock-dialog-info">
|
<div class="mock-info-row">
|
<span class="mock-info-label">托盘码：</span>
|
<span class="mock-info-value">P001</span>
|
</div>
|
<div class="mock-info-row">
|
<span class="mock-info-label">设备编码：</span>
|
<span class="mock-info-value">WCS_001</span>
|
</div>
|
<div class="mock-info-row">
|
<span class="mock-info-label">资源编码：</span>
|
<span class="mock-info-value">RESOURCE_001</span>
|
</div>
|
</div>
|
</div>
|
<div class="mock-dialog-footer">
|
<button class="mock-btn-inline mock-btn-default">取消</button>
|
<button class="mock-btn-inline mock-btn-primary">确认执行</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<h3>下一个问题</h3>
|
<p class="subtitle">关于MES接口调用的参数获取方式</p>
|
|
<div class="options">
|
<div class="option" data-choice="config" onclick="toggleSelect(this)">
|
<div class="letter">A</div>
|
<div class="content">
|
<h3>系统配置</h3>
|
<p>设备编码、资源编码等参数从系统配置中读取，用户无需输入</p>
|
<div class="pros-cons">
|
<div class="pros"><h4>优点</h4><ul><li>操作简单</li><li>减少人为错误</li></ul></div>
|
</div>
|
</div>
|
</div>
|
<div class="option" data-choice="input" onclick="toggleSelect(this)">
|
<div class="letter">B</div>
|
<div class="content">
|
<h3>弹窗输入</h3>
|
<p>在确认对话框中显示参数输入框，允许用户修改默认值</p>
|
<div class="pros-cons">
|
<div class="pros"><h4>优点</h4><ul><li>灵活性高</li><li>适应不同场景</li></ul></div>
|
</div>
|
</div>
|
</div>
|
<div class="option" data-choice="hybrid" onclick="toggleSelect(this)">
|
<div class="letter">C</div>
|
<div class="content">
|
<h3>混合模式</h3>
|
<p>关键参数从配置读取，可选参数在弹窗中提供输入</p>
|
<div class="pros-cons">
|
<div class="pros"><h4>优点</h4><ul><li>平衡简便性和灵活性</li><li>常见操作快速，特殊场景可调整</li></ul></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<style>
|
.mock-table {
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 13px;
|
table-layout: fixed;
|
}
|
.mock-table th, .mock-table td {
|
border: 1px solid #e0e0e0;
|
padding: 10px 12px;
|
text-align: left;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.mock-table th {
|
background: #f5f5f5;
|
font-weight: 600;
|
color: #333;
|
}
|
.mock-table tbody tr:nth-child(even) {
|
background: #fafafa;
|
}
|
.mock-table tbody tr:hover {
|
background: #f0f7ff;
|
}
|
.mock-btn-inline {
|
padding: 6px 14px;
|
font-size: 13px;
|
border: 1px solid #dcdfe6;
|
background: white;
|
border-radius: 4px;
|
cursor: pointer;
|
margin-right: 8px;
|
transition: all 0.2s;
|
}
|
.mock-btn-inline:last-child {
|
margin-right: 0;
|
}
|
.mock-btn-inline:hover {
|
opacity: 0.85;
|
}
|
.mock-btn-primary {
|
background: #1f5eff;
|
color: white;
|
border-color: #1f5eff;
|
}
|
.mock-btn-success {
|
background: #67c23a;
|
color: white;
|
border-color: #67c23a;
|
}
|
.mock-btn-warning {
|
background: #e6a23c;
|
color: white;
|
border-color: #e6a23c;
|
}
|
.mock-btn-danger {
|
background: #f56c6c;
|
color: white;
|
border-color: #f56c6c;
|
}
|
.mock-btn-default {
|
background: white;
|
color: #606266;
|
border-color: #dcdfe6;
|
}
|
.mock-tag {
|
display: inline-block;
|
padding: 3px 8px;
|
border-radius: 4px;
|
font-size: 12px;
|
}
|
.mock-tag-success {
|
background: #e1f5e1;
|
color: #4caf50;
|
}
|
.mock-tag-warning {
|
background: #fff3e0;
|
color: #ff9800;
|
}
|
.mock-dialog {
|
width: 420px;
|
margin: 20px auto;
|
border: 1px solid #e0e0e0;
|
border-radius: 8px;
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
background: white;
|
}
|
.mock-dialog-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px 20px;
|
border-bottom: 1px solid #e0e0e0;
|
background: #f8fafc;
|
}
|
.mock-dialog-title {
|
font-weight: 600;
|
font-size: 16px;
|
color: #303133;
|
}
|
.mock-dialog-close {
|
cursor: pointer;
|
color: #909399;
|
font-size: 18px;
|
}
|
.mock-dialog-body {
|
padding: 20px;
|
}
|
.mock-dialog-text {
|
margin: 0 0 16px 0;
|
font-size: 14px;
|
color: #606266;
|
}
|
.mock-dialog-info {
|
background: #f8fafc;
|
border-radius: 6px;
|
padding: 12px 16px;
|
}
|
.mock-info-row {
|
display: flex;
|
margin-bottom: 10px;
|
font-size: 13px;
|
}
|
.mock-info-row:last-child {
|
margin-bottom: 0;
|
}
|
.mock-info-label {
|
color: #909399;
|
width: 80px;
|
}
|
.mock-info-value {
|
color: #303133;
|
font-weight: 500;
|
}
|
.mock-dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
gap: 12px;
|
padding: 16px 20px;
|
border-top: 1px solid #e0e0e0;
|
background: #f8fafc;
|
}
|
.pros-cons {
|
display: flex;
|
gap: 16px;
|
margin-top: 12px;
|
}
|
.pros, .cons {
|
flex: 1;
|
font-size: 13px;
|
}
|
.pros h4 {
|
color: #4caf50;
|
margin: 0 0 6px 0;
|
}
|
.pros ul {
|
margin: 0;
|
padding-left: 16px;
|
}
|
.pros li {
|
margin-bottom: 4px;
|
}
|
</style>
|
