From 1a00aa49a8d43c8ec9688ab200b46f445485edf7 Mon Sep 17 00:00:00 2001
From: Test User <wang@auto.ml>
Date: Sat, 6 Jun 2026 01:56:21 +0800
Subject: [PATCH] fix: use fixed web duration choices

---
 README.md             |  2 +-
 web/assets_test.go    | 14 +++++++++
 web/static/app.js     |  7 ++++-
 web/static/index.html | 15 ++++++++--
 web/static/styles.css | 68 +++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 101 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 1ca3e0a..cbd952e 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ NetStable 是一个独立的 Go Web 测速项目，用于测试“打开网页
 - 其他用户发起请求时返回“有其他用户正在测速，请稍等”。
 - 启动时可设置程序理论最高带宽，例如 `-bandwidth-limit-mbps 30` 将测试流量限制到 30 Mbps。
 - 页面展示当前设置的理论最高限值。
-- 一次测试按阶段执行：先连续下载指定时长，再连续上传同样时长。例如页面填 `30`，就是下载 30 秒、上传 30 秒。
+- 一次测试按阶段执行：先连续下载指定时长，再连续上传同样时长。页面固定提供 `15s` 和 `30s` 两档，默认 `30s`。
 - 保存每次测试的完整样本曲线、摘要、脱敏后的用户 IP、地区和运营商信息；ISP 缺失时显示“未知运营商”。
 - 所有历史测试用户数据通过网页和 `/api/records` 提供。
 - 历史时序图展示不同时段的平均下载速度变化。
diff --git a/web/assets_test.go b/web/assets_test.go
index 538d527..180df5e 100644
--- a/web/assets_test.go
+++ b/web/assets_test.go
@@ -32,6 +32,20 @@ func TestStaticAssetsIncludeMobileRecordLayout(t *testing.T) {
 	}
 }
 
+func TestStaticAssetsUseFixedDurationChoices(t *testing.T) {
+	html, err := readAsset("index.html")
+	if err != nil {
+		t.Fatalf("read index.html: %v", err)
+	}
+	if !contains(html, `name="durationSeconds" type="radio" value="15"`) ||
+		!contains(html, `name="durationSeconds" type="radio" value="30"`) {
+		t.Fatalf("index.html missing fixed 15s/30s duration choices")
+	}
+	if contains(html, `id="durationSeconds" name="durationSeconds" type="number"`) {
+		t.Fatalf("index.html should not expose free-form duration number input")
+	}
+}
+
 func contains(text, pattern string) bool {
 	return strings.Contains(text, pattern)
 }
diff --git a/web/static/app.js b/web/static/app.js
index e5aae80..125038d 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -510,7 +510,12 @@ function value(id) {
 }
 
 function numberValue(id) {
-  return Number(document.getElementById(id).value);
+  const field = document.getElementById(id);
+  if (field) {
+    return Number(field.value);
+  }
+  const selected = document.querySelector(`input[name="${id}"]:checked`);
+  return selected ? Number(selected.value) : 0;
 }
 
 function average(values) {
diff --git a/web/static/index.html b/web/static/index.html
index 791c6c4..7c4f72e 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -28,10 +28,19 @@
           <input id="httpUrl" name="httpUrl" placeholder="可选，例如 https://example.com/">
         </label>
         <div class="grid-2">
-          <label>
+          <fieldset class="choice-field">
             <span>每阶段时长（秒）</span>
-            <input id="durationSeconds" name="durationSeconds" type="number" min="1" max="600" value="30">
-          </label>
+            <div class="segmented-control" role="radiogroup" aria-label="每阶段时长">
+              <label>
+                <input name="durationSeconds" type="radio" value="15">
+                <span>15s</span>
+              </label>
+              <label>
+                <input name="durationSeconds" type="radio" value="30" checked>
+                <span>30s</span>
+              </label>
+            </div>
+          </fieldset>
           <label>
             <span>超时（毫秒）</span>
             <input id="timeoutMillis" name="timeoutMillis" type="number" min="100" max="30000" value="3000">
diff --git a/web/static/styles.css b/web/static/styles.css
index 62da92b..1b8f66c 100644
--- a/web/static/styles.css
+++ b/web/static/styles.css
@@ -112,6 +112,12 @@ label {
   gap: 6px;
 }
 
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
 input {
   width: 100%;
   min-height: 40px;
@@ -128,6 +134,60 @@ input:focus {
   border-color: var(--blue);
 }
 
+.choice-field {
+  display: grid;
+  gap: 6px;
+}
+
+.choice-field > span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.segmented-control {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px;
+  min-height: 40px;
+  padding: 4px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fbfdff;
+}
+
+.segmented-control label {
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+
+.segmented-control input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.segmented-control span {
+  display: grid;
+  min-height: 32px;
+  place-items: center;
+  border-radius: 6px;
+  color: var(--muted);
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.segmented-control input:checked + span {
+  color: #ffffff;
+  background: var(--blue);
+}
+
+.segmented-control input:focus-visible + span {
+  outline: 2px solid rgba(37, 99, 235, 0.3);
+  outline-offset: 1px;
+}
+
 .grid-2 {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -332,6 +392,14 @@ tr:last-child td {
     min-height: 44px;
   }
 
+  .segmented-control {
+    min-height: 44px;
+  }
+
+  .segmented-control span {
+    min-height: 36px;
+  }
+
   .metrics {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 8px;