You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
2.3 KiB
52 lines
2.3 KiB
15 hours ago
|
<h2>操作日志管理页（拟）</h2>
|
||
|
|
<p class="subtitle">这是基于你现有风格的一版布局草图：筛选区 + 表格分页 + 详情弹窗（不在此页展示）。看完告诉我是否需要调整筛选项/列。</p>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<div class="mockup">
|
||
|
|
<div class="mockup-header">筛选区</div>
|
||
|
|
<div class="mockup-body">
|
||
|
|
<div style="display:flex;flex-wrap:wrap;gap:12px;align-items:center">
|
||
|
|
<div class="mock-input" style="width:220px">用户名/账号（模糊）</div>
|
||
|
|
<div class="mock-input" style="width:220px">操作模块（下拉）</div>
|
||
|
|
<div class="mock-input" style="width:220px">操作类型（下拉）</div>
|
||
|
|
<div class="mock-input" style="width:280px">时间范围（起止）</div>
|
||
|
|
<div class="mock-input" style="width:260px">请求关键字（URL/内容）</div>
|
||
|
|
<button class="mock-button">查询</button>
|
||
|
|
<button class="mock-button" style="opacity:.8">重置</button>
|
||
|
|
</div>
|
||
|
|
<p class="subtitle" style="margin-top:10px">自动脱敏：password/token/authorization；超长参数截断；异常请求也记录。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<div class="mockup">
|
||
|
|
<div class="mockup-header">表格列（可配置）</div>
|
||
|
|
<div class="mockup-body">
|
||
|
|
<div class="placeholder" style="height:180px">
|
||
|
|
列建议：时间｜账号(loginName)｜姓名(actualName)｜角色｜模块｜类型｜URL｜方法｜IP｜地区｜结果｜操作(详情)
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;justify-content:flex-end;margin-top:10px">
|
||
|
|
<div class="placeholder" style="width:260px;height:34px">分页：pageNum / pageSize / total</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="options">
|
||
|
|
<div class="option" data-choice="ok" onclick="toggleSelect(this)">
|
||
|
|
<div class="letter">A</div>
|
||
|
|
<div class="content">
|
||
|
|
<h3>就按这个布局做</h3>
|
||
|
|
<p>如果你更偏向现有 `support/operate-log` 的样式，我也可以完全复用那一套组件结构。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="option" data-choice="adjust" onclick="toggleSelect(this)">
|
||
|
|
<div class="letter">B</div>
|
||
|
|
<div class="content">
|
||
|
|
<h3>需要调整筛选项/列</h3>
|
||
|
|
<p>你告诉我必须要的筛选与列，我按你的习惯改到位。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|