chengmaandClaude Opus 5
f0d7da37cf
原来的采购任务页是骨架：var rows []gin.H 从不查库，页面永远为空； TODO 写的还是只查 task_type = 'purchase'。所以 #18 建出来的采集任务 在界面上哪儿都看不到——用户点完「创建采集任务」只能盯着 collect_status 猜。 模块名定为「采集采购」（用户指定），直接点出这页装的是哪两类任务， 比泛称「任务」更能让人一眼知道点进去看什么。路由 /tasks 不变， 改路由会让已有书签和文档链接全失效，没有收益。 列不按类型并列——两种任务字段完全不同，并列会让采集任务行一半是空列。 改成固定列 + 一列「目标」把业务信息概括成一句话： 采集 PDD 737116531267 采购 SO-001 · M/黑色 · 2件 · ≤¥42.00 拼接逻辑在 service 层，模板只负责显示。 统计和列表共用同一个筛选条件拼装函数。分开写的话总有一天会忘了 给统计也加条件，数字和表格对不上，操作员会以为页面坏了。 无主任务的客户端列显示「—」。#17 之后采集任务默认无主，这列会大量为空。 详情弹窗只读，采购专有字段（数量、价格上限、目标规格）在采集任务里 整段不出现，不显示空行。复用 #18 的弹窗机制，app.js 无需改动。 顺带清掉 PDD 页加进来之后一直没跟上的模块计数：多处「四个模块/四个页面」 改成五个。其中 06-quality-security.md 那两处是验证清单， 照着做的人只会测四个页面，PDD 页永远不在回归范围里。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
261 lines
6.8 KiB
CSS
261 lines
6.8 KiB
CSS
/* Admin 样式表。手写 CSS，不引入框架、不引入构建流程。
|
|
见 admin/AGENTS.md 前端约束。
|
|
|
|
五个模块共用同一套三段式布局的样式：
|
|
.toolbar（顶部工具条）/ .table-wrap（中间表格）/ .statusbar（底部状态条）。
|
|
改这里会同时影响五个页面，这是有意的——不要为某个页面复制一份。 */
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
|
|
font-size: 14px;
|
|
color: #222;
|
|
background: #f5f6f8;
|
|
/* 底部状态条是固定的，给它留出空间 */
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
/* ── 导航 ─────────────────────────────── */
|
|
.nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: #2b3440;
|
|
padding: 0 16px;
|
|
}
|
|
.nav-brand {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
margin-right: 24px;
|
|
padding: 12px 0;
|
|
}
|
|
.nav a {
|
|
color: #c8cdd4;
|
|
text-decoration: none;
|
|
padding: 12px 16px;
|
|
}
|
|
.nav a:hover { background: #3a4552; color: #fff; }
|
|
.nav a.active { background: #1f6feb; color: #fff; }
|
|
|
|
/* ── 页面主体 ─────────────────────────── */
|
|
.page { padding: 16px; }
|
|
|
|
/* ── 第一段：顶部工具条 ───────────────── */
|
|
.toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #fff;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 4px;
|
|
padding: 10px 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.toolbar .inline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 0;
|
|
}
|
|
/* 搜索表单占据剩余空间，把删除按钮挤到右边 */
|
|
.toolbar .grow { flex: 1; }
|
|
.toolbar label { color: #555; white-space: nowrap; }
|
|
/* 搜索框收窄到 30%（目前只有 PDD 页用）。
|
|
这样搜索表单里就没有会伸展的元素了，多余空间留在按钮之后，
|
|
「搜索」按钮自然贴着输入框，不会被顶到很右边。
|
|
用 flex 而不是 width：工具条是 flex 布局，width 会被 flex-grow 盖掉。
|
|
min-width 由下面那条继承，窄屏时不会缩到没法输入。 */
|
|
.toolbar input[type="text"].search-narrow { flex: 0 0 30%; }
|
|
|
|
.toolbar input[type="text"] {
|
|
flex: 1;
|
|
min-width: 160px;
|
|
padding: 5px 8px;
|
|
border: 1px solid #ccd1d6;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
button {
|
|
padding: 5px 14px;
|
|
border: 1px solid #ccd1d6;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
button:hover { background: #f0f2f4; }
|
|
button.danger { color: #b42318; border-color: #f0b4ae; }
|
|
button.danger:hover { background: #fdf1f0; }
|
|
button:disabled { opacity: .5; cursor: not-allowed; }
|
|
|
|
/* ── 第二段：表格 ─────────────────────── */
|
|
/* 列多了横向滚动，不要压缩列宽把字挤成两行 */
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
background: #fff;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 4px;
|
|
}
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td {
|
|
padding: 8px 10px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #eef0f2;
|
|
white-space: nowrap;
|
|
}
|
|
th { background: #fafbfc; font-weight: 600; color: #444; }
|
|
tbody tr:hover { background: #f7f9fb; }
|
|
.col-check { width: 36px; }
|
|
|
|
/* 解析失败的行标黄，提示需要人工补 */
|
|
tr.row-warn { background: #fffbe6; }
|
|
tr.row-warn:hover { background: #fff6d0; }
|
|
|
|
/* PDD 链接未填写，标红提醒 */
|
|
.missing { color: #b42318; font-weight: 600; }
|
|
|
|
/* 空状态：文案要分情况，不要都写"暂无数据" */
|
|
tr.empty td {
|
|
text-align: center;
|
|
color: #888;
|
|
padding: 40px 10px;
|
|
white-space: normal;
|
|
}
|
|
tr.empty small { color: #aaa; }
|
|
|
|
.hint {
|
|
color: #777;
|
|
font-size: 13px;
|
|
margin: 12px 2px;
|
|
}
|
|
|
|
/* ── 第三段：底部状态条 ───────────────── */
|
|
.statusbar {
|
|
position: fixed;
|
|
left: 0; right: 0; bottom: 0;
|
|
background: #2b3440;
|
|
color: #c8cdd4;
|
|
padding: 10px 16px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 链接和标题这类长内容截断显示，鼠标悬停看全文（title 属性）。
|
|
不截断的话一列能把表格撑到屏幕外面去。 */
|
|
.truncate {
|
|
max-width: 280px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* ── 弹窗 ─────────────────────────────── */
|
|
/* 用 hidden 属性控制显示隐藏，JS 只改这一个属性，不拼样式 */
|
|
.modal-backdrop[hidden] { display: none; }
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(20, 24, 30, .45);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 40px 16px;
|
|
overflow-y: auto;
|
|
z-index: 10;
|
|
}
|
|
.modal {
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
|
|
width: 100%;
|
|
max-width: 720px;
|
|
}
|
|
.modal-head {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #e1e4e8;
|
|
}
|
|
.modal-head h2 { margin: 0; font-size: 16px; flex: 1; }
|
|
.modal-x {
|
|
border: none;
|
|
background: none;
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
padding: 0 6px;
|
|
color: #666;
|
|
}
|
|
.modal-body { padding: 16px; }
|
|
.modal-body h3 { font-size: 14px; margin: 20px 0 8px; }
|
|
.modal-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
padding: 12px 16px;
|
|
border-top: 1px solid #e1e4e8;
|
|
background: #fafbfc;
|
|
}
|
|
/* 把左边的按钮和右边的按钮推开 */
|
|
.modal-foot .grow { flex: 1; }
|
|
button.primary {
|
|
background: #1f6feb;
|
|
border-color: #1f6feb;
|
|
color: #fff;
|
|
}
|
|
button.primary:hover { background: #1a5fd0; }
|
|
|
|
/* 详情弹窗里折叠展开的完整结果（result_data），见任务详情弹窗 */
|
|
.result-data {
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
background: #f5f6f8;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* 弹窗里的字段表：左边标签，右边值 */
|
|
.detail {
|
|
display: grid;
|
|
grid-template-columns: 88px 1fr;
|
|
gap: 8px 12px;
|
|
margin: 0;
|
|
align-items: baseline;
|
|
}
|
|
.detail dt { color: #555; }
|
|
.detail dd { margin: 0; word-break: break-all; }
|
|
.detail dd small { color: #999; margin-left: 6px; }
|
|
|
|
/* 创建弹窗里的单个字段，标签在输入框上面 */
|
|
.field { display: flex; flex-direction: column; gap: 6px; }
|
|
.field label { color: #555; }
|
|
input[type="text"] {
|
|
padding: 5px 8px;
|
|
border: 1px solid #ccd1d6;
|
|
border-radius: 3px;
|
|
}
|
|
input.wide { width: 100%; }
|
|
|
|
select {
|
|
padding: 5px 8px;
|
|
border: 1px solid #ccd1d6;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
}
|
|
|
|
/* ── 错误页 ───────────────────────────── */
|
|
.error-box {
|
|
background: #fff;
|
|
border: 1px solid #f0b4ae;
|
|
border-left: 4px solid #b42318;
|
|
border-radius: 4px;
|
|
padding: 16px 20px;
|
|
max-width: 720px;
|
|
}
|
|
.error-box h2 { margin-top: 0; color: #b42318; font-size: 16px; }
|