chengmaandClaude Opus 5
6a7cde2ca6
跟上 #23 给 PDD 页做的：搜索框收到 30%，「搜索」按钮紧挨输入框。 蝦皮数据页和客户端列表页按用户要求暂不动。 复用 #23 已有的 .search-narrow 类，没有为这两页新写 CSS 规则—— 多写一条就多一处将来要同步的地方。全局规则 .toolbar input[type="text"] 一字未动，它被五个页面共用。 搜索按钮靠左没有加对齐样式，是收窄的自然结果：输入框不再伸展之后， 多余空间留在按钮之后。额外加 margin-right:auto 之类会和 grow 叠加出 难预料的结果。两个表单的 grow 都保留，它负责把删除按钮顶到最右侧。 /tasks 的 placeholder 从「任务编号 / 订单号 / PDD 商品 ID」缩成 「任务编号 / 订单号 / 商品 ID」——收到 30% 之后原文案装不下， 会被截断成看不出意思的半截。缩文案而不是调回宽度。 文档把这条规则从 §5.1 提到 §3.1 表格通用规则里，三个页面都指向它。 原来写在 PDD 页那一节，另外两页要用时看不到。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
74 lines
2.5 KiB
HTML
74 lines
2.5 KiB
HTML
{{define "syb/list"}}
|
|
{{template "header" .}}
|
|
|
|
<div class="toolbar">
|
|
<form class="inline" method="post" action="/syb/sync">
|
|
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
|
<button type="submit">同步</button>
|
|
</form>
|
|
|
|
<form class="inline" method="post" action="/syb/create-task">
|
|
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
|
<button type="submit" data-need-checked>创建采购任务</button>
|
|
</form>
|
|
|
|
<form class="inline grow" method="get" action="/syb">
|
|
<label for="q">订单号</label>
|
|
{{/* search-narrow 把搜索框收到 30%，让「搜索」按钮紧挨着它。
|
|
用类名而不是改 .toolbar input[type="text"]——那条被五个页面共用。 */}}
|
|
<input id="q" type="text" name="order_no" value="{{.Keyword}}"
|
|
class="search-narrow" placeholder="订单号">
|
|
<button type="submit">搜索</button>
|
|
</form>
|
|
|
|
<form class="inline" method="post" action="/syb/delete" data-confirm-delete>
|
|
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
|
<button type="submit" class="danger" data-need-checked>删除</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="col-check"><input type="checkbox" data-check-all></th>
|
|
<th>货运单 ID</th>
|
|
<th>订单号</th>
|
|
<th>商品标题</th>
|
|
<th>蝦皮商品 ID</th>
|
|
<th>规格 SKU</th>
|
|
<th>数量</th>
|
|
<th>价格</th>
|
|
<th>图片</th>
|
|
<th>匹配状态</th>
|
|
<th>更新时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Rows}}
|
|
{{/* TODO(骨架): 行渲染。价格是台币，显示成 NT$xx.xx，
|
|
要和人民币一眼分得清。图片显示小缩略图，存的是 URL。
|
|
双击行打开匹配弹窗。 */}}
|
|
{{else}}
|
|
<tr class="empty">
|
|
<td colspan="11">
|
|
还没有货运单。<br>
|
|
<small>顺运宝同步方式尚未确定，当前可先手工录入用于联调。</small>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{/* TODO(骨架): 匹配弹窗 templates/syb/match_modal.html
|
|
左边蝦皮规格，右边该商品 pdd_data 里的 PDD 规格下拉。
|
|
三条硬规则：
|
|
1. 右侧下拉选项来自 pdd_data.dimensions，不要写死"颜色/尺码"两个维度；
|
|
2. 打开时先查 sku_mappings，有记录就自动带出并提示"已自动带出"；
|
|
3. 该商品还没采集时，直接提示"请先到蝦皮数据模块采集"并给跳转链接，
|
|
不要显示一个空下拉让人困惑。 */}}
|
|
|
|
{{template "footer" .}}
|
|
{{end}}
|