style: 压缩档口入库码筛选工具栏 (#239)

admin/inner_code_template_test.go

@@ -65,3 +65,57 @@ func TestInnerCodeTemplate_模块状态白名单已登记(t *testing.T) {
 		}
 	}
 }
+
+func TestInnerCodeTemplate_筛选顺序与紧凑宽度(t *testing.T) {
+	raw, err := os.ReadFile("templates/inner_code/list.html")
+	if err != nil {
+		t.Fatal(err)
+	}
+	page := string(raw)
+	parts := []string{
+		`id="inner-code-status"`,
+		`id="inner-code-date" type="date" name="date"`,
+		`id="inner-code-keyword"`,
+		`class="button-link" href="/inner-codes?date={{.BusinessDate}}">清除</a>`,
+		`<button type="submit">搜索</button>`,
+	}
+	lastIndex := -1
+	for _, part := range parts {
+		index := strings.Index(page, part)
+		if index < 0 {
+			t.Fatalf("筛选工具栏缺少 %s", part)
+		}
+		if index <= lastIndex {
+			t.Fatalf("筛选工具栏顺序不正确，%s 没有位于上一控件之后", part)
+		}
+		lastIndex = index
+	}
+	filterStart := strings.Index(page, `<form id="inner-code-filter"`)
+	if filterStart < 0 {
+		t.Fatal("没有找到档口入库码筛选表单")
+	}
+	filterEnd := strings.Index(page[filterStart:], `</form>`)
+	if filterEnd < 0 {
+		t.Fatal("没有找到完整的档口入库码筛选表单")
+	}
+	filter := page[filterStart : filterStart+filterEnd]
+	if strings.Contains(filter, `type="hidden" name="date"`) {
+		t.Fatal("筛选表单应直接提交可见业务日期，不能继续保留重复隐藏字段")
+	}
+
+	css, err := os.ReadFile("static/css/app.css")
+	if err != nil {
+		t.Fatal(err)
+	}
+	styles := string(css)
+	for _, want := range []string{
+		`.inner-code-toolbar input[type="text"].inner-code-search`,
+		`flex: 0 0 150px`, `width: 150px`, `min-width: 150px`,
+		`.inner-code-toolbar .inner-code-filter-form { flex-wrap: wrap; }`,
+		`.inner-code-toolbar .inner-code-filter-form { flex-basis: 100%; }`,
+	} {
+		if !strings.Contains(styles, want) {
+			t.Errorf("筛选工具栏样式缺少 %s", want)
+		}
+	}
+}

admin/static/css/app.css

@@ -624,8 +624,13 @@ input.wide { width: 100%; }
 .inner-code-status-failed { color: #b42318; background: #fff1f0; }
 .inner-code-status-pending { color: #57606a; background: #f3f4f6; }
 .inner-code-toolbar { flex: 0 0 auto; }
-.inner-code-toolbar input[type="date"] { width: 138px; }
-.inner-code-toolbar .inner-code-search { width: 220px; }
+.inner-code-toolbar .inner-code-filter-form { flex-wrap: wrap; }
+.inner-code-toolbar input[type="date"] { width: 138px; min-width: 138px; }
+.inner-code-toolbar input[type="text"].inner-code-search {
+  flex: 0 0 150px;
+  width: 150px;
+  min-width: 150px;
+}
 .inner-code-toolbar .file-field {
   display: inline-block;
   max-width: 150px;
@@ -648,6 +653,10 @@ input.wide { width: 100%; }
 .ai-match-items-wrap { max-height: min(420px, 52vh); overflow: auto; }
 .ai-match-items-wrap th { position: sticky; top: 0; z-index: 1; }
 
+@media (max-width: 760px) {
+  .inner-code-toolbar .inner-code-filter-form { flex-basis: 100%; }
+}
+
 select {
   padding: 5px 8px;
   border: 1px solid #ccd1d6;

admin/templates/inner_code/list.html

@@ -2,11 +2,6 @@
 {{template "header" .}}
 
 <div class="toolbar inner-code-toolbar" data-inner-code-page>
-  <div class="inline">
-    <label for="inner-code-date">业务日期</label>
-    <input id="inner-code-date" type="date" value="{{.BusinessDate}}" data-inner-code-date>
-  </div>
-
   <form class="inline" method="post" action="/inner-codes/import" enctype="multipart/form-data"
         data-upload-form>
     <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
@@ -16,17 +11,18 @@
     <button type="submit" data-upload-submit>导入</button>
   </form>
 
-  <form id="inner-code-filter" class="inline grow" method="get" action="/inner-codes">
-    <input type="hidden" name="date" value="{{.BusinessDate}}" data-inner-code-date-field>
+  <form id="inner-code-filter" class="inline grow inner-code-filter-form" method="get" action="/inner-codes">
     <label for="inner-code-status">状态</label>
     <select id="inner-code-status" name="status">
       {{range .StatusOptions}}<option value="{{.Value}}" {{if eq .Value $.StatusFilter}}selected{{end}}>{{.Text}}</option>{{end}}
     </select>
+    <label for="inner-code-date">业务日期</label>
+    <input id="inner-code-date" type="date" name="date" value="{{.BusinessDate}}" data-inner-code-date>
     <label class="visually-hidden" for="inner-code-keyword">搜索订单号、档口、规格或入库码</label>
     <input id="inner-code-keyword" class="inner-code-search" type="text" name="q" value="{{.Keyword}}"
            placeholder="订单号 / 档口 / 规格 / 入库码">
-    <button type="submit">搜索</button>
     <a class="button-link" href="/inner-codes?date={{.BusinessDate}}">清除</a>
+    <button type="submit">搜索</button>
   </form>
 
   <form id="inner-code-match-form" method="post" action="/inner-codes/match" hidden>