chengmaandClaude Opus 5
799ee33045
可运行的骨架：四个页面能打开、数据库自动建表、给 Client 的三个接口
按契约响应。业务逻辑留 35 处 TODO(骨架)，每处标明要点和文档章节。
结构（对应 docs/admin/02-architecture.md §2/§3）
- handler/web + handler/api 分开：页面要 CSRF、出错渲染错误页；
接口要认证、出错返回 JSON。混在一起迟早写错
- service 不认识 *gin.Context，方便不起服务器直接单测
- 只有 repository 能写 SQL
- 模板用 {{define "目录/名字"}}，一次全部 ParseFS 进来不冲突
- 模板和静态资源用 //go:embed 打进二进制
已实测（Go 1.23.0，本机验证）
- go build / go vet / gofmt 全部通过
- 单文件产物 34MB，无需 cgo
- 四个页面 + 静态资源均 200，/ 正确 302 到 /shopee
- 建表 7 张 + 索引 10 个，user_version=1，二次启动不重复建表
- claim 带 X-Client-Id 返回 204（无任务可领），
缺 X-Client-Id 返回 400 + 契约格式的 JSON 错误体
依赖版本被 Go 1.23.0 卡死，已钉住并写进文档
- gin v1.11.0 （v1.12.0 起要求 Go >= 1.25.0）
- modernc.org/sqlite v1.38.0（v1.40.0 起要求 >= 1.24.0，v1.48.0 起 >= 1.25.0）
- excelize v2.9.1 （尚未入 go.mod，写导入功能时再加）
直接 go get 不带版本会拉到最新版并报 requires go >= 1.25.0，
所以文档里的命令一律带版本号。要升依赖就得先升 Go。
一处主动调整：迁移语句从「一个字符串装多条 SQL」改成 [][]string 逐条执行。
database/sql 的 Exec 对一次多条语句的支持因驱动而异，拆开最稳妥，
报错还能精确到第几条。
说明：Gitea 尚未配置，本次无对应工单号。
admin/testdata/ 只有 README，脱敏小样本需人工制作。
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
148 lines
3.8 KiB
CSS
148 lines
3.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; }
|
|
.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;
|
|
}
|
|
|
|
/* ── 错误页 ───────────────────────────── */
|
|
.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; }
|