真机反馈「手机上还是要左右滑」,两个根因: 1. 上一版把堆叠判据写成了 @container。它按卡片自己的宽度判断更准,但要 iOS 16 / Chrome 105 才支持——旧手机把整块规则当不认识的东西丢掉,表格 完全不堆叠、退化成横滑 328~388px,比改之前还糟。改回 @media,阈值从 620 抬到 800:卡片内容宽 ≈ 视口 − 93,最宽的表 min-width 700,视口 793 以上才放得下,620 那档会让 621~792 两头不靠。 2. /admin/edit 的地点/到访/行程三张表压根没加 tb-stack。它们默认折叠在 data-card 里,探针在默认态量到的是 display:none,前两轮审计都没扫到。 顺带修掉三处被这次改动顶出来的问题: - 宽表卡片不放 g2:/stats /report 有几张表被塞进半宽卡片,视口 1440 时 卡片只有 494px,桌面端照样要横滑 100+px。改成整行(只动含表的那些网格, 「推荐 & 踩雷」「类型分布 + 一天中的分布」这类没有表的仍保持两列)。 - 操作格的 inline white-space:nowrap 会继承进行内编辑表单,堆叠态下 「已选:#403 …」那一行不换行、把卡片顶破。挪成 .ops 类,窄屏放开。 - 行内编辑表单的 min-width 改成 --efw 变量(inline 的 min-width 压不过 CSS 覆盖),堆叠态置 0 让它自然铺满。 导航装不下时右缘渐隐一下,提示还能往右滑;滑到末端自动收掉。用 mask 而不是 盖一层渐变伪元素——伪元素会把链接文字一起遮住。 回归:tb_stack_test.go 补 /admin/edit(12 张表),表头为空的列(如末尾操作格) 不再要求 data-label;新增 wide_table_layout_test.go 守住「宽表卡片必须整行」+ 「凡被 .tw 包住的表必须带 tb-stack」+「堆叠规则必须在 max-width≥792 的 @media 里」。
110 lines
3.9 KiB
Go
110 lines
3.9 KiB
Go
package web
|
|
|
|
import (
|
|
"context"
|
|
"net/http"
|
|
"net/http/httptest"
|
|
"regexp"
|
|
"strconv"
|
|
"strings"
|
|
"testing"
|
|
)
|
|
|
|
// TestStackedTablesHaveLabels 守住「窄屏宽表变一屏一行」这条改动的核心不变量:
|
|
// 每张打了 tb-stack 的表,窄屏会把表头藏起来、改成「字段名 + 值」竖排,字段名只能取自
|
|
// td 的 data-label。少写一个标签,那一格在手机上就是没有名字的裸值——而桌面端一切正常,
|
|
// 很难发现(这轮就漏过两次:一张表的中间几行、后台两张表的「状态 / 对访客 / 操作」)。
|
|
// 顺带钉住每行格子数 == 表头列数,否则说明模板结构歪了。
|
|
//
|
|
// ROND_TEST_CONF=conf/app-test.ini ROND_SRC=data/xxx.rondbackup go test ./internal/web -run StackedTables -v
|
|
func TestStackedTablesHaveLabels(t *testing.T) {
|
|
f := newMovementFixture(t)
|
|
|
|
var topicID int64
|
|
if err := f.pg.QueryRowContext(f.ctx, `SELECT id FROM topics WHERE dataset_id=$1 ORDER BY id LIMIT 1`,
|
|
f.dsID).Scan(&topicID); err != nil {
|
|
topicID = 0 // 这个数据集没有专题,就少查一页
|
|
}
|
|
|
|
type target struct {
|
|
path string
|
|
h http.HandlerFunc
|
|
admin bool
|
|
}
|
|
targets := []target{
|
|
{"/places", f.srv.placesPage, false},
|
|
{"/stats", f.srv.statsPage, false},
|
|
{"/", f.srv.home, false},
|
|
{"/report", f.srv.reportPage, false},
|
|
{"/admin", f.srv.adminHome, true},
|
|
{"/admin/topics", f.srv.topicsAdminPage, true},
|
|
// 数据编辑页的三张表默认折叠在卡片里(探针量到的是 display:none),最容易漏标
|
|
{"/admin/edit", f.srv.editPage, true},
|
|
}
|
|
if topicID > 0 {
|
|
targets = append(targets, target{"/topics/" + strconv.FormatInt(topicID, 10), f.srv.topicPage, false})
|
|
}
|
|
|
|
tableRe := regexp.MustCompile(`(?s)<table[^>]*class="[^"]*tb-stack[^"]*"[^>]*>.*?</table>`)
|
|
rowRe := regexp.MustCompile(`(?s)<tr[^>]*>(.*?)</tr>`)
|
|
tdRe := regexp.MustCompile(`(?s)<td([^>]*)>`)
|
|
thRe := regexp.MustCompile(`<th[\s>]`)
|
|
thTextRe := regexp.MustCompile(`(?s)<th[^>]*>(.*?)</th>`)
|
|
tagStripRe := regexp.MustCompile(`<[^>]*>`)
|
|
|
|
total := 0
|
|
for _, tg := range targets {
|
|
ctx := context.Background()
|
|
if tg.admin {
|
|
ctx = f.ctx // 夹具的 ctx 里已经注入登录态
|
|
}
|
|
w := httptest.NewRecorder()
|
|
tg.h(w, httptest.NewRequest("GET", tg.path, nil).WithContext(ctx))
|
|
if w.Code != 200 {
|
|
t.Logf("%s 渲染 code=%d,跳过", tg.path, w.Code)
|
|
continue
|
|
}
|
|
for ti, tb := range tableRe.FindAllString(w.Body.String(), -1) {
|
|
total++
|
|
head := ""
|
|
if i, j := strings.Index(tb, "<thead>"), strings.Index(tb, "</thead>"); i >= 0 && j > i {
|
|
head = tb[i:j]
|
|
}
|
|
cols := len(thRe.FindAllString(head, -1))
|
|
// 表头为空的列(如三张表末尾那个只放「编辑」的操作格)不需要名字:窄屏堆叠时
|
|
// 它整行铺开,硬加个标签反而把按钮/表单挤窄。判据跟着表头走,两边自然一致。
|
|
blank := make([]bool, cols)
|
|
if ths := thTextRe.FindAllStringSubmatch(head, -1); len(ths) == cols {
|
|
for i, th := range ths {
|
|
blank[i] = strings.TrimSpace(tagStripRe.ReplaceAllString(th[1], "")) == ""
|
|
}
|
|
}
|
|
for ri, row := range rowRe.FindAllString(tb, -1) {
|
|
if !strings.Contains(row, "<td") {
|
|
continue
|
|
}
|
|
cells := tdRe.FindAllStringSubmatch(row, -1)
|
|
if cols > 0 && len(cells) != cols {
|
|
t.Errorf("%s 第 %d 张表第 %d 行有 %d 格,表头 %d 列", tg.path, ti+1, ri+1, len(cells), cols)
|
|
}
|
|
for ci, c := range cells {
|
|
if ci == 0 {
|
|
continue // 首格是这一行的主角,故意不带标签
|
|
}
|
|
if ci < len(blank) && blank[ci] {
|
|
continue // 表头本来就是空的
|
|
}
|
|
if !strings.Contains(c[1], "data-label=") {
|
|
t.Errorf("%s 第 %d 张表第 %d 行第 %d 格没有 data-label(窄屏会变成没有名字的裸值)",
|
|
tg.path, ti+1, ri+1, ci+1)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if total == 0 {
|
|
t.Fatal("一页 tb-stack 表都没找到:模板里的类名是不是被改掉了")
|
|
}
|
|
t.Logf("检查了 %d 张 tb-stack 表", total)
|
|
}
|