Add visitor phone lookup flow

2026-07-15 11:26:37 +08:00
parent 331e30894b
commit 7f751bebae
21 changed files with 971 additions and 104 deletions
--- a/README.md
+++ b/README.md
@@ -69,6 +69,8 @@ docker compose up -d postgres
 - `/staff`：员工 H5 叫号页，聚焦当前批次与叫下一批。
 - `/staff/tickets`：员工 H5 取号页与等待队列核对。
 - 员工端每次“叫下一批”会自动结束上一批，再按 FIFO 叫出固定数量的连续号码。
+- `/visitor`：游客运营测试手机号查询入口；查询成功后跳转到号码状态页；正式上线前需替换为验证码或外部身份接口。
+- `/visitor/phone`：手机号查询后的游客号码状态页，不再显示手机号输入框。
 - `/visitor/:token`：游客私密状态页。
 - `/display/:token`：单项目只读公示屏。
 - `/admin`：管理端运营概览。
--- a/progress.md
+++ b/progress.md
@@ -465,3 +465,17 @@
 - 补充创建页移动端操作区换行规则，避免取消/创建双按钮在窄屏下挤压。
 - 验证通过：前端 TypeScript、11 个文件 38 项 Vitest、Vite 生产构建、Go 全量测试、`go vet`、缺失系统时区文件场景回归测试和 `git diff --check`。
 - 本地浏览器连接验证时无可用管理端登录会话，未代填账号密码；未登录页面正确显示管理端登录入口，页面业务布局由组件测试和构建验证覆盖。
+
+# Session: 2026-07-15（游客手机号运营测试查询）
+
+- 新增 `POST /api/public/status/search`，使用现有手机号 HMAC 索引匹配所有项目当前 `WAITING/CALLED/ARRIVED` 活动号码；生产环境返回 404，后续替换为验证码或外部身份接口。
+- 新增 `/visitor` 页面：手机号输入、无结果/错误/限流提示、同手机号多号码按项目/票号选择、复用游客状态卡片和自动刷新；现有 `/visitor/:token` 保持兼容。
+- 增加临时内存查询限流、API/页面测试、真实烟测中的单号与重复活动号码查询，以及 README/服务端接口说明。
+- 验证通过：Go 全量测试、`go vet`、前端 41 项 Vitest、TypeScript 检查、Vite 生产构建、`make test-db`、`make smoke-real`、`git diff --check`。
+
+# Session: 2026-07-15（手机号查询后跳转号码页）
+
+- `/visitor` 现在只负责提交手机号；查询成功后 replace 导航到 `/visitor/phone`。
+- 新增无手机号输入框的号码状态页，复用游客状态卡片和自动刷新；同手机号多个活动号码仍可在号码页选择。
+- 增加“查询其他手机号”返回入口，保持旧的 `/visitor/:token` 私密状态页兼容。
+- 验证通过：前端 13 个测试文件共 43 项测试、TypeScript 检查、Vite 生产构建和 `git diff --check`。
--- a/scripts/smoke.py
+++ b/scripts/smoke.py
@@ -219,6 +219,14 @@ def main() -> None:
    assert public["ticket_number"] == first_ticket["ticket_number"]
    assert_public_phone_projection(public, phone, "public status")

+    phone_lookup = client.request(
+        "POST", "/api/public/status/search", {"phone": phone}
+    )
+    assert len(phone_lookup.get("tickets", [])) == 1
+    phone_lookup_ticket = phone_lookup["tickets"][0]
+    assert phone_lookup_ticket["ticket_number"] == first_ticket["ticket_number"]
+    assert_public_phone_projection(phone_lookup_ticket, phone, "phone lookup")
+
    client.request(
        "POST",
        "/api/admin/auth/login",
@@ -266,6 +274,18 @@ def main() -> None:
        source="confirmed duplicate create response",
    )

+    phone_lookup = client.request(
+        "POST", "/api/public/status/search", {"phone": phone}
+    )
+    phone_lookup_numbers = {
+        ticket["ticket_number"] for ticket in phone_lookup.get("tickets", [])
+    }
+    assert phone_lookup_numbers == {
+        first_ticket["ticket_number"], confirmed_ticket["ticket_number"]
+    }
+    for ticket in phone_lookup["tickets"]:
+        assert_public_phone_projection(ticket, phone, "phone lookup with duplicate tickets")
+
    snapshot = client.request("GET", f"/api/staff/projects/{project_id}/queue")
    project = snapshot["project"]
    batch_size = int(
--- a/server/README.md
+++ b/server/README.md
@@ -35,6 +35,11 @@ If a phone already has active tickets, ticket creation returns
 `DUPLICATE_PHONE`; repeat with the same request body except
 `allow_duplicate: true` and a new idempotency key after the employee confirms.

+`POST /api/public/status/search` is a temporary non-production operational-test
+endpoint. It accepts `{ "phone": "..." }` and returns all current active
+tickets associated with that phone. It is disabled when `APP_ENV=production`;
+replace it with OTP or an external identity interface before formal launch.
+
 ## Tests

 ```sh
--- a/server/internal/httpapi/limiter.go
+++ b/server/internal/httpapi/limiter.go
@@ -17,6 +17,52 @@ type loginLimiter struct {
 	now      func() time.Time
 }

+type queryLimitEntry struct {
+	windowStart time.Time
+	count       int
+}
+
+// queryLimiter is deliberately small and in-memory for the temporary public
+// phone lookup. The production replacement will be an OTP or external
+// identity provider, so this limiter is only a safety net for the test flow.
+type queryLimiter struct {
+	mu      sync.Mutex
+	entries map[string]queryLimitEntry
+	now     func() time.Time
+	limit   int
+	window  time.Duration
+}
+
+func newQueryLimiter(now func() time.Time, limit int, window time.Duration) *queryLimiter {
+	return &queryLimiter{
+		entries: make(map[string]queryLimitEntry), now: now, limit: limit, window: window,
+	}
+}
+
+func (l *queryLimiter) allow(key string) (bool, time.Duration) {
+	if l == nil || l.limit <= 0 || l.window <= 0 {
+		return true, 0
+	}
+	l.mu.Lock()
+	defer l.mu.Unlock()
+
+	now := l.now()
+	entry, ok := l.entries[key]
+	if !ok || now.Sub(entry.windowStart) >= l.window {
+		entry = queryLimitEntry{windowStart: now}
+	}
+	if entry.count >= l.limit {
+		retry := l.window - now.Sub(entry.windowStart)
+		if retry < 0 {
+			retry = 0
+		}
+		return false, retry
+	}
+	entry.count++
+	l.entries[key] = entry
+	return true, 0
+}
+
 func newLoginLimiter(now func() time.Time) *loginLimiter {
 	return &loginLimiter{attempts: make(map[string]loginAttempt), now: now}
 }
--- a/server/internal/httpapi/limiter_test.go
+++ b/server/internal/httpapi/limiter_test.go
@@ -0,0 +1,26 @@
+package httpapi
+
+import (
+	"testing"
+	"time"
+)
+
+func TestQueryLimiterResetsAfterWindow(t *testing.T) {
+	now := time.Unix(100, 0)
+	limiter := newQueryLimiter(func() time.Time { return now }, 2, time.Minute)
+
+	if allowed, _ := limiter.allow("phone:test"); !allowed {
+		t.Fatal("first query should be allowed")
+	}
+	if allowed, _ := limiter.allow("phone:test"); !allowed {
+		t.Fatal("second query should be allowed")
+	}
+	if allowed, retry := limiter.allow("phone:test"); allowed || retry <= 0 {
+		t.Fatalf("third query should be limited with a retry duration, got allowed=%v retry=%s", allowed, retry)
+	}
+
+	now = now.Add(time.Minute)
+	if allowed, _ := limiter.allow("phone:test"); !allowed {
+		t.Fatal("query should be allowed after the window resets")
+	}
+}
--- a/server/internal/httpapi/public.go
+++ b/server/internal/httpapi/public.go
@@ -27,29 +27,113 @@ func (s *Server) publicStatus(w http.ResponseWriter, r *http.Request) {
 		writeError(w, mapNotFound(err, "STATUS_NOT_FOUND", "排队状态不存在或链接已失效"))
 		return
 	}
-	var project model.Project
-	var session model.QueueSession
-	if err := s.db.WithContext(r.Context()).First(&project, "id = ?", ticket.ProjectID).Error; err != nil {
-		writeError(w, err)
-		return
-	}
-	if err := s.db.WithContext(r.Context()).First(&session, "id = ? AND project_id = ?", ticket.QueueSessionID, ticket.ProjectID).Error; err != nil {
-		writeError(w, err)
-		return
-	}
-	phoneSuffix, err := s.ticketPhoneLast4(ticket)
+	view, err := s.publicStatusView(r.Context(), ticket)
 	if err != nil {
 		writeError(w, err)
 		return
 	}
+	writeJSON(w, http.StatusOK, view)
+}
+
+type publicPhoneQueryRequest struct {
+	Phone string `json:"phone"`
+}
+
+// publicStatusByPhone is a temporary operational-test flow. It must be
+// replaced by OTP or an external identity provider before production use.
+func (s *Server) publicStatusByPhone(w http.ResponseWriter, r *http.Request) {
+	if s.config.Environment == "production" {
+		writeError(w, &apiError{Status: http.StatusNotFound, Code: "STATUS_NOT_FOUND", Message: "排队状态不存在或链接已失效"})
+		return
+	}
+	if s.publicQueryLimiter != nil {
+		if allowed, retry := s.publicQueryLimiter.allow("ip:" + publicQueryClientKey(r)); !allowed {
+			writePublicQueryRateLimit(w, retry)
+			return
+		}
+	}
+
+	var input publicPhoneQueryRequest
+	if err := decodeJSON(r, &input); err != nil {
+		writeError(w, err)
+		return
+	}
+	phone, err := security.NormalizePhone(input.Phone)
+	if err != nil {
+		writeError(w, &apiError{Status: http.StatusUnprocessableEntity, Code: "INVALID_PHONE", Message: "请输入有效的手机号"})
+		return
+	}
+	phoneDigest := s.cipher.Digest(phone)
+	if s.publicQueryLimiter != nil {
+		if allowed, retry := s.publicQueryLimiter.allow("phone:" + phoneDigest); !allowed {
+			writePublicQueryRateLimit(w, retry)
+			return
+		}
+	}
+
+	var tickets []model.QueueTicket
+	if err := s.db.WithContext(r.Context()).Model(&model.QueueTicket{}).
+		Joins("JOIN projects ON projects.id = queue_tickets.project_id").
+		Joins("JOIN queue_sessions ON queue_sessions.id = queue_tickets.queue_session_id AND queue_sessions.project_id = queue_tickets.project_id").
+		Where("queue_tickets.phone_hmac = ? AND queue_tickets.status IN ? AND queue_sessions.status IN ? AND projects.status IN ?",
+			phoneDigest,
+			[]string{model.TicketWaiting, model.TicketCalled, model.TicketArrived},
+			[]string{"RUNNING", "PAUSED"},
+			[]string{model.ProjectRunning, model.ProjectPaused}).
+		Order("projects.name ASC, queue_tickets.ticket_number ASC").
+		Find(&tickets).Error; err != nil {
+		writeError(w, err)
+		return
+	}
+
+	views := make([]map[string]any, 0, len(tickets))
+	for _, ticket := range tickets {
+		view, err := s.publicStatusView(r.Context(), ticket)
+		if err != nil {
+			writeError(w, err)
+			return
+		}
+		views = append(views, view)
+	}
+	writeJSON(w, http.StatusOK, map[string]any{"tickets": views})
+}
+
+func publicQueryClientKey(r *http.Request) string {
+	if ip := remoteIP(r); ip != nil {
+		return *ip
+	}
+	return "unknown"
+}
+
+func writePublicQueryRateLimit(w http.ResponseWriter, retry time.Duration) {
+	seconds := int((retry + time.Second - 1) / time.Second)
+	if seconds < 1 {
+		seconds = 1
+	}
+	w.Header().Set("Retry-After", fmt.Sprintf("%d", seconds))
+	writeError(w, &apiError{Status: http.StatusTooManyRequests, Code: "PUBLIC_QUERY_RATE_LIMITED", Message: "查询次数过多，请稍后再试"})
+}
+
+func (s *Server) publicStatusView(ctx context.Context, ticket model.QueueTicket) (map[string]any, error) {
+	var project model.Project
+	var session model.QueueSession
+	if err := s.db.WithContext(ctx).First(&project, "id = ?", ticket.ProjectID).Error; err != nil {
+		return nil, err
+	}
+	if err := s.db.WithContext(ctx).First(&session, "id = ? AND project_id = ?", ticket.QueueSessionID, ticket.ProjectID).Error; err != nil {
+		return nil, err
+	}
+	phoneSuffix, err := s.ticketPhoneLast4(ticket)
+	if err != nil {
+		return nil, err
+	}
 	peopleAhead := 0
 	if ticket.Status == model.TicketWaiting {
 		var count int64
-		if err := s.db.WithContext(r.Context()).Model(&model.QueueTicket{}).
+		if err := s.db.WithContext(ctx).Model(&model.QueueTicket{}).
 			Where("project_id = ? AND queue_session_id = ? AND status = ? AND ticket_number < ?",
 				ticket.ProjectID, ticket.QueueSessionID, model.TicketWaiting, ticket.TicketNumber).Count(&count).Error; err != nil {
-			writeError(w, err)
-			return
+			return nil, err
 		}
 		peopleAhead = int(count)
 	}
@@ -57,12 +141,11 @@ func (s *Server) publicStatus(w http.ResponseWriter, r *http.Request) {
 		DisplayNumber string `gorm:"column:display_number"`
 	}
 	latestCalledNumber := any(nil)
-	if err := s.db.WithContext(r.Context()).Model(&model.QueueTicket{}).
+	if err := s.db.WithContext(ctx).Model(&model.QueueTicket{}).
 		Select("display_number").
 		Where("project_id = ? AND queue_session_id = ? AND called_at IS NOT NULL", ticket.ProjectID, ticket.QueueSessionID).
 		Order("called_at DESC, ticket_number DESC").First(&latestCalledTicket).Error; err != nil && !errors.Is(err, gorm.ErrRecordNotFound) {
-		writeError(w, err)
-		return
+		return nil, err
 	} else if latestCalledTicket.DisplayNumber != "" {
 		latestCalledNumber = latestCalledTicket.DisplayNumber
 	}
@@ -71,13 +154,12 @@ func (s *Server) publicStatus(w http.ResponseWriter, r *http.Request) {
 		Running: project.Status == model.ProjectRunning && session.Status == "RUNNING" && ticket.Status == model.TicketWaiting,
 	})
 	if err != nil {
-		writeError(w, err)
-		return
+		return nil, err
 	}
 	if ticket.Status != model.TicketWaiting {
 		eta = domain.ETAResult{Available: false, Reason: "ticket_not_waiting"}
 	}
-	writeJSON(w, http.StatusOK, map[string]any{
+	return map[string]any{
 		"ticket_number": ticket.DisplayNumber, "display_number": ticket.DisplayNumber,
 		"project_name": project.Name, "status": ticket.Status, "phone_last4": phoneSuffix, "estimated_wait": eta,
 		"visitor_notice":  project.VisitorNotice,
@@ -90,7 +172,7 @@ func (s *Server) publicStatus(w http.ResponseWriter, r *http.Request) {
 		"people_ahead": peopleAhead, "queue_position": queuePosition(ticket.Status, peopleAhead),
 		"latest_called_number": latestCalledNumber,
 		"eta":                  eta, "revision": session.Revision, "server_time": s.now(),
-	})
+	}, nil
 }

 func queuePosition(status string, peopleAhead int) any {
--- a/server/internal/httpapi/public_test.go
+++ b/server/internal/httpapi/public_test.go
@@ -2,10 +2,12 @@ package httpapi

 import (
 	"encoding/json"
+	"net/http/httptest"
 	"strings"
 	"testing"
 	"time"

+	"calllinesystem/server/internal/config"
 	"calllinesystem/server/internal/model"
 )

@@ -28,3 +30,27 @@ func TestDisplayBatchDTOCannotSerializePersonalFields(t *testing.T) {
 		t.Fatalf("public ticket number missing: %s", encoded)
 	}
 }
+
+func TestPublicPhoneLookupIsDisabledInProduction(t *testing.T) {
+	server := &Server{config: config.Config{Environment: "production"}}
+	recorder := httptest.NewRecorder()
+	request := httptest.NewRequest("POST", "/api/public/status/search", strings.NewReader(`{"phone":"13800138000"}`))
+
+	server.publicStatusByPhone(recorder, request)
+
+	if recorder.Code != 404 {
+		t.Fatalf("production phone lookup status = %d, want 404", recorder.Code)
+	}
+}
+
+func TestPublicPhoneLookupRejectsInvalidPhone(t *testing.T) {
+	server := &Server{config: config.Config{Environment: "development"}}
+	recorder := httptest.NewRecorder()
+	request := httptest.NewRequest("POST", "/api/public/status/search", strings.NewReader(`{"phone":"123"}`))
+
+	server.publicStatusByPhone(recorder, request)
+
+	if recorder.Code != 422 {
+		t.Fatalf("invalid phone lookup status = %d, want 422", recorder.Code)
+	}
+}
--- a/server/internal/httpapi/server.go
+++ b/server/internal/httpapi/server.go
@@ -27,14 +27,15 @@ const (
 )

 type Server struct {
-	db            *gorm.DB
-	config        config.Config
-	cipher        *security.Cipher
-	logger        *slog.Logger
-	hub           eventPublisher
-	loginLimiter  *loginLimiter
-	dummyPassword string
-	now           func() time.Time
+	db                 *gorm.DB
+	config             config.Config
+	cipher             *security.Cipher
+	logger             *slog.Logger
+	hub                eventPublisher
+	loginLimiter       *loginLimiter
+	publicQueryLimiter *queryLimiter
+	dummyPassword      string
+	now                func() time.Time
 }

 func New(db *gorm.DB, cfg config.Config, logger *slog.Logger) (*Server, error) {
@@ -55,14 +56,15 @@ func NewWithEventPublisher(db *gorm.DB, cfg config.Config, logger *slog.Logger,
 	}
 	now := func() time.Time { return time.Now().UTC() }
 	return &Server{
-		db:            db,
-		config:        cfg,
-		cipher:        fieldCipher,
-		logger:        logger,
-		hub:           publisher,
-		loginLimiter:  newLoginLimiter(now),
-		dummyPassword: dummy,
-		now:           now,
+		db:                 db,
+		config:             cfg,
+		cipher:             fieldCipher,
+		logger:             logger,
+		hub:                publisher,
+		loginLimiter:       newLoginLimiter(now),
+		publicQueryLimiter: newQueryLimiter(now, 120, time.Minute),
+		dummyPassword:      dummy,
+		now:                now,
 	}, nil
 }

@@ -81,6 +83,7 @@ func (s *Server) Handler() http.Handler {
 	mux.Handle("POST /api/staff/projects/{id}/tickets", s.requireStaff(http.HandlerFunc(s.createTicket)))
 	mux.Handle("POST /api/staff/projects/{id}/call-next", s.requireStaff(http.HandlerFunc(s.callNext)))
 	mux.HandleFunc("GET /api/public/status/{token}", s.publicStatus)
+	mux.HandleFunc("POST /api/public/status/search", s.publicStatusByPhone)
 	mux.HandleFunc("GET /api/display/{token}/snapshot", s.displaySnapshot)
 	mux.Handle("GET /api/events", s.requireStaff(http.HandlerFunc(s.events)))
 	mux.Handle("GET /api/admin/overview", s.requireAdmin(http.HandlerFunc(s.adminOverview)))
--- a/task_plan.md
+++ b/task_plan.md
@@ -4,7 +4,7 @@
 在已确认的产品、技术与设计基线上，交付可运行的景区排队叫号系统纵向切片，并以自动化测试验证多项目隔离、幂等叫号与隐私边界。

 ## Current Phase
-Phase 28（创建项目与项目维护表单统一）
+Phase 29（游客手机号运营测试查询）

 ## Phases

@@ -15,6 +15,19 @@ Phase 28（创建项目与项目维护表单统一）
 - [x] 补充前后端回归测试并完成类型检查、构建验证
 - **Status:** complete

+### Phase 29: 游客手机号运营测试查询
+- [x] 新增非生产手机号查询 API，复用手机号 HMAC 索引和游客状态投影
+- [x] 支持同一手机号返回多个项目的当前活动排队单，并增加基础限流
+- [x] 新增 `/visitor` 游客手机号查询页面，保留原有 `/visitor/:token` 私密状态页
+- [x] 补充前后端单元测试、真实 PostgreSQL/API 烟测和构建验证
+- **Status:** complete
+
+#### Errors Encountered
+| Error | Attempt | Resolution |
+|---|---|---|
+| 前端查询页面测试把同一项目/号码在列表和详情中的重复文本当成唯一元素 | 1 | 将断言改为允许列表与详情卡同时出现 |
+| 在 `server` 工作目录下使用了带 `server/` 前缀的 gofmt 路径 | 1 | 改用 `internal/httpapi/...` 相对路径后通过 |
+
 ### Phase 27: 生产后端与数据库基础交接
 - [x] 确认独立 PostgreSQL、Kubernetes 业务服务、全景区上线和 3000 峰值在线用户边界
 - [x] 修复真实 PostgreSQL 烟测、管理员/手动叫号/项目筛选契约
@@ -310,6 +323,13 @@ Phase 28（创建项目与项目维护表单统一）
 | 本轮首次连接本地浏览器时运行时尚未初始化 | 1 | 按浏览器技能规范初始化运行时后重新连接，未影响代码验证 |
 | 本轮一次 Go 回归从仓库根目录执行，未找到 `server/go.mod` | 1 | 改在 `server/` 模块目录执行，时区回归测试通过 |

+## Phase 30 — 手机号查询后进入独立号码页（2026-07-15）
+
+- 将 `/visitor` 收敛为手机号提交页，成功查询后使用 replace 导航到 `/visitor/phone`。
+- 新增无输入框的号码状态页，复用游客状态卡片和实时轮询；同手机号多张活动号码仍支持选择。
+- 保留“重新查询其他手机号”按钮，不在号码页内嵌手机号输入表单。
+- 验证通过：前端 13 个测试文件共 43 项测试、TypeScript 检查、Vite 生产构建和 `git diff --check`。
+
 ## Notes
 - 所有网络资料保留来源链接和访问时间（2026-07-10）。
 - 关键架构决策前重读本计划与 findings.md。
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -7,6 +7,8 @@ import { DisplayPage } from "./pages/DisplayPage";
 import { LoginPage } from "./pages/LoginPage";
 import { StaffPage } from "./pages/StaffPage";
 import { VisitorPage } from "./pages/VisitorPage";
+import { VisitorLookupPage } from "./pages/VisitorLookupPage";
+import { VisitorPhonePage } from "./pages/VisitorPhonePage";

 function RequireStaff({ children }: { children: ReactNode }) {
  const { user, loading } = useAuth();
@@ -34,6 +36,8 @@ export function App() {
        <Route path="/staff/tickets" element={<AuthProvider portal="staff"><RequireStaff><StaffPage /></RequireStaff></AuthProvider>} />
        <Route path="/staff/me" element={<AuthProvider portal="staff"><RequireStaff><StaffPage /></RequireStaff></AuthProvider>} />
          <Route path="/staff/verify" element={<Navigate to="/staff" replace />} />
+          <Route path="/visitor" element={<VisitorLookupPage />} />
+          <Route path="/visitor/phone" element={<VisitorPhonePage />} />
          <Route path="/visitor/:token" element={<VisitorPage />} />
          <Route path="/display/:token" element={<DisplayPage />} />
          <Route path="/admin/login" element={<AuthProvider portal="admin"><LoginPage portal="admin" /></AuthProvider>} />
--- a/web/src/api.test.ts
+++ b/web/src/api.test.ts
@@ -65,6 +65,23 @@ describe("mutating queue requests", () => {
  });
 });

+describe("public visitor lookup", () => {
+  it("posts the phone number and normalizes returned ticket numbers", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(jsonResponse({
+      tickets: [{ display_number: "00012", status: "WAITING" }],
+    }));
+    vi.stubGlobal("fetch", fetchMock);
+
+    const response = await api.publicStatusByPhone("13800138000");
+    const [url, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+
+    expect(url).toBe("/api/public/status/search");
+    expect(init.method).toBe("POST");
+    expect(JSON.parse(String(init.body))).toEqual({ phone: "13800138000" });
+    expect(response.tickets[0].ticket_number).toBe("00012");
+  });
+});
+
 describe("isolated portal authentication", () => {
  it("uses different endpoints for staff and admin sessions", async () => {
    const fetchMock = vi.fn().mockResolvedValue(jsonResponse({ user: { id: "u1", role: "STAFF" }, projects: [] }));
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -7,6 +7,7 @@ import type {
  DisplaySnapshotDto,
  ProjectDto,
  PublicStatusDto,
+  PublicStatusSearchDto,
  QueueSnapshotDto,
  QueueTicketDto,
  CallBatchDto,
@@ -137,6 +138,18 @@ export const api = {
      ticket_number: response.ticket_number || response.display_number || "暂无",
    }));
  },
+  publicStatusByPhone(phone: string, signal?: AbortSignal) {
+    return request<PublicStatusSearchDto>("/api/public/status/search", {
+      method: "POST",
+      body: JSON.stringify({ phone }),
+      signal,
+    }).then((response) => ({
+      tickets: (response.tickets ?? []).map((ticket) => ({
+        ...ticket,
+        ticket_number: ticket.ticket_number || ticket.display_number || "暂无",
+      })),
+    }));
+  },
  display(token: string, signal?: AbortSignal) {
    return request<DisplaySnapshotDto>(`/api/display/${encodeURIComponent(token)}/snapshot`, { signal }).then((response) => ({
      ...response,
--- a/web/src/pages/VisitorLookupPage.test.tsx
+++ b/web/src/pages/VisitorLookupPage.test.tsx
@@ -0,0 +1,69 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { usePollingResource } from "../hooks/usePollingResource";
+import { VisitorLookupPage } from "./VisitorLookupPage";
+
+const navigate = vi.fn();
+
+vi.mock("react-router-dom", () => ({ useNavigate: () => navigate }));
+vi.mock("../hooks/usePollingResource", () => ({ usePollingResource: vi.fn() }));
+
+const activeTickets = [
+  {
+    project_name: "云岭漂流",
+    project: { id: "project-a", status: "RUNNING" },
+    ticket_number: "00012",
+    status: "WAITING",
+    phone_last4: "8000",
+    people_ahead: 2,
+    latest_called_number: "00010",
+    estimated_wait: { min: 10, max: 15 },
+    visitor_notice: "请留意现场叫号。",
+  },
+  {
+    project_name: "云顶索道",
+    project: { id: "project-b", status: "PAUSED" },
+    ticket_number: "00003",
+    status: "CALLED",
+    phone_last4: "8000",
+    called_at: "2026-07-15T03:00:00Z",
+  },
+];
+
+const mockedUsePollingResource = vi.mocked(usePollingResource);
+
+beforeEach(() => {
+  navigate.mockReset();
+  mockedUsePollingResource.mockImplementation(((_loader: unknown, options: { enabled?: boolean } = {}) => ({
+    data: options.enabled ? { tickets: activeTickets } : undefined,
+    loading: false,
+    refreshing: false,
+    error: null,
+    offline: false,
+    lastClientSuccessAt: "2026-07-15T03:00:00Z",
+    refresh: vi.fn(),
+  })) as never);
+});
+
+describe("VisitorLookupPage", () => {
+  it("navigates to the number page after a successful phone query", async () => {
+    render(<VisitorLookupPage />);
+
+    fireEvent.change(screen.getByLabelText("手机号"), { target: { value: "13800138000" } });
+    fireEvent.click(screen.getByRole("button", { name: "查询排队状态" }));
+
+    await waitFor(() => expect(navigate).toHaveBeenCalledWith("/visitor/phone", {
+      replace: true,
+      state: { phone: "13800138000" },
+    }));
+  });
+
+  it("rejects an invalid phone before querying", () => {
+    render(<VisitorLookupPage />);
+    fireEvent.change(screen.getByLabelText("手机号"), { target: { value: "123" } });
+    fireEvent.click(screen.getByRole("button", { name: "查询排队状态" }));
+
+    expect(screen.getByRole("alert")).toHaveTextContent("请输入有效的手机号");
+    expect(screen.queryByText("找到 2 张排队单")).not.toBeInTheDocument();
+  });
+});
--- a/web/src/pages/VisitorLookupPage.tsx
+++ b/web/src/pages/VisitorLookupPage.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import type { FormEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import { api } from "../api";
+import { FeedbackBanner, LoadingState } from "../components/Feedback";
+import { usePollingResource } from "../hooks/usePollingResource";
+
+function isPhoneInputValid(value: string): boolean {
+  const digits = value.replace(/\D/g, "");
+  return /^[+\d\s\-()]+$/.test(value) && digits.length >= 7 && digits.length <= 15;
+}
+
+export function VisitorLookupPage() {
+  const navigate = useNavigate();
+  const [phoneInput, setPhoneInput] = useState("");
+  const [submittedPhone, setSubmittedPhone] = useState("");
+  const [formError, setFormError] = useState<string | null>(null);
+  const resource = usePollingResource((signal) => api.publicStatusByPhone(submittedPhone, signal), {
+    enabled: Boolean(submittedPhone),
+    intervalMs: 3_000,
+    resourceKey: submittedPhone,
+  });
+  const data = resource.data;
+
+  useEffect(() => {
+    if (!data || !submittedPhone) return;
+    navigate("/visitor/phone", {
+      replace: true,
+      state: { phone: submittedPhone },
+    });
+  }, [data, navigate, submittedPhone]);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const nextPhone = phoneInput.trim();
+    if (!isPhoneInputValid(nextPhone)) {
+      setFormError("请输入有效的手机号（7-15 位数字）");
+      return;
+    }
+    setFormError(null);
+    if (nextPhone === submittedPhone) {
+      void resource.refresh();
+      return;
+    }
+    setSubmittedPhone(nextPhone);
+  }
+
+  const liveTone = resource.offline ? "offline" : resource.error ? "stale" : "live";
+  const liveLabel = resource.offline ? "连接中断" : resource.error ? "查询延迟" : "手机号查询";
+
+  return (
+    <main className="visitor-page visitor-page--mobile visitor-lookup-page">
+      <header className="public-header visitor-public-header">
+        <div className="brand-lockup">
+          <img className="brand-logo" src="/xiaoqikong-logo.jpg" alt="" aria-hidden="true" />
+          <span><strong>小七孔文旅集团</strong><small>排队服务</small></span>
+        </div>
+        <span className={`visitor-header__meta visitor-header__meta--${liveTone}`}><i aria-hidden="true" />{liveLabel}</span>
+      </header>
+      <div className="visitor-content">
+        <section className="visitor-lookup-card" aria-labelledby="visitor-lookup-title">
+          <div className="visitor-lookup-card__intro">
+            <span>游客查询</span>
+            <h1 id="visitor-lookup-title">输入手机号查看排队情况</h1>
+            <p>请输入取号时登记的手机号，查询当前仍在排队或已叫到的号码。</p>
+          </div>
+          <form className="visitor-lookup-form" onSubmit={submit} noValidate>
+            <label className="field" htmlFor="visitor-phone">
+              <span>手机号</span>
+              <input
+                id="visitor-phone"
+                name="phone"
+                type="tel"
+                inputMode="tel"
+                autoComplete="tel"
+                placeholder="请输入手机号"
+                value={phoneInput}
+                onChange={(event) => {
+                  setPhoneInput(event.target.value);
+                  if (formError) setFormError(null);
+                }}
+                aria-invalid={formError ? "true" : "false"}
+                aria-describedby={formError ? "visitor-phone-error" : "visitor-phone-help"}
+              />
+              {formError ? <small id="visitor-phone-error" className="field-error" role="alert">{formError}</small> : null}
+            </label>
+            <button className="button button--primary button--wide" type="submit" disabled={resource.loading}>
+              {resource.loading ? "正在查询…" : "查询排队状态"}
+            </button>
+          </form>
+          <p id="visitor-phone-help" className="visitor-lookup-card__help">当前为运营测试入口，后续将切换为验证码或正式接口。</p>
+        </section>
+
+        {resource.loading && !data ? <LoadingState label="正在查询您的排队号码" /> : null}
+        {resource.error && !data ? (
+          <FeedbackBanner
+            tone="danger"
+            title="暂时无法查询排队状态"
+            action={<button className="button button--secondary button--small" onClick={resource.refresh}>重试</button>}
+          >
+            {resource.error.status === 429 ? "查询次数过多，请稍后再试。" : resource.error.message}
+          </FeedbackBanner>
+        ) : null}
+      </div>
+    </main>
+  );
+}
--- a/web/src/pages/VisitorPage.tsx
+++ b/web/src/pages/VisitorPage.tsx
@@ -3,8 +3,9 @@ import { useParams } from "react-router-dom";
 import { api } from "../api";
 import { EmptyState, FeedbackBanner, FreshnessBanner } from "../components/Feedback";
 import { usePollingResource } from "../hooks/usePollingResource";
-import { formatDateTime, formatEstimatedWait, isTimestampStale, visitorStatusMeta } from "../lib/format";
+import { isTimestampStale } from "../lib/format";
 import { gsap, useGSAP } from "../motion/gsap";
+import { VisitorTicketCard } from "./VisitorTicketCard";

 function VisitorLoadingState() {
  return (
@@ -27,19 +28,10 @@ export function VisitorPage() {
    resourceKey: token,
  });
  const data = resource.data;
-  const phoneLast4 = data?.phone_last4?.replace(/\D/g, "").slice(-4) || "未知";
  const freshnessTime = resource.lastClientSuccessAt;
  const stale = Boolean(data) && isTimestampStale(freshnessTime, 30_000);
  const status = data?.status?.toUpperCase() ?? "";
-  const statusMeta = data ? visitorStatusMeta(data.status, data.people_ahead) : null;
-  const projectStatus = data?.project?.status?.toUpperCase();
-  const projectPaused = status === "WAITING" && projectStatus === "PAUSED";
-  const displayTone = projectPaused ? "warning" : statusMeta?.tone ?? "neutral";
-  const displayLabel = projectPaused ? "项目暂时暂停" : statusMeta?.label;
  const lastUpdated = data?.last_updated_at || freshnessTime;
-  const visitorNotice = data?.visitor_notice == null
-    ? "请您在景区附近等候，注意听从工作人员指引。"
-    : data.visitor_notice.trim();
  const liveTone = resource.offline ? "offline" : stale || resource.error ? "stale" : "live";
  const liveLabel = resource.offline ? "连接中断" : stale || resource.error ? "更新延迟" : "实时更新";

@@ -91,62 +83,7 @@ export function VisitorPage() {
              errorMessage={resource.error?.message}
              onRetry={resource.refresh}
            />
-            <article className={`visitor-ticket visitor-ticket--${displayTone}`} data-visitor-card>
-              <div className="visitor-ticket__topline" data-visitor-reveal>
-                <div>
-                  <p className="visitor-ticket__project">{data.project_name}</p>
-                  <h1 aria-live="polite">{displayLabel}</h1>
-                </div>
-                <span className="visitor-ticket__status-mark" aria-hidden="true" />
-              </div>
-              <div className="visitor-ticket__number" data-visitor-reveal>
-                <span>我的号码</span>
-                <strong>{data.ticket_number}</strong>
-              </div>
-              <div className="visitor-ticket__metrics" data-visitor-reveal>
-                <div className="visitor-ticket__latest-called">
-                  <span>当前最新到号</span>
-                  <strong>{data.latest_called_number || "暂无"}</strong>
-                </div>
-                {status === "WAITING" && !projectPaused ? (
-                  <>
-                    <div className="visitor-ticket__wait">
-                      <span>预计等待时间</span>
-                      <strong>{formatEstimatedWait(data.estimated_wait)}</strong>
-                    </div>
-                    <div className="visitor-ticket__progress">
-                      <span>前方排队</span>
-                      <strong>{data.people_ahead == null ? "未知" : `${data.people_ahead} 个号码`}</strong>
-                    </div>
-                  </>
-                ) : null}
-              </div>
-              {status === "WAITING" && projectPaused ? (
-                <section className="visitor-ticket__service-status" aria-labelledby="visitor-paused-message" data-visitor-reveal>
-                  <span id="visitor-paused-message">服务状态</span>
-                  <strong>号码已保留，项目恢复后会重新估算预计叫号时间。</strong>
-                </section>
-              ) : null}
-              {status === "CALLED" ? (
-                <div className="call-action" role="alert" aria-live="assertive" data-visitor-reveal>
-                  <span>现在请前往</span>
-                  <strong>{data.entrance || "现场入口"}</strong>
-                  <p>请出示排队号码，叫号时间 {formatDateTime(data.called_at)}</p>
-                </div>
-              ) : null}
-              {status !== "WAITING" && status !== "CALLED" ? <p className="visitor-ticket__guidance" data-visitor-reveal>{statusMeta?.guidance}</p> : null}
-              {data.message ? <p className="visitor-ticket__message" data-visitor-reveal>{data.message}</p> : null}
-              <div className="visitor-ticket__metadata" data-visitor-reveal>
-                <span aria-label={`联系手机号尾号 ${phoneLast4}`}><small>手机号：</small><span>{`尾号 ${phoneLast4}`}</span></span>
-                <span>更新于 {formatDateTime(lastUpdated)}</span>
-              </div>
-            </article>
-            {visitorNotice ? (
-              <aside className="visitor-official-notice" data-visitor-reveal aria-label="官方提示">
-                <strong>官方提示</strong>
-                <p>{visitorNotice}</p>
-              </aside>
-            ) : null}
+            <VisitorTicketCard data={data} lastUpdatedAt={lastUpdated} />
            <button className="button button--secondary visitor-refresh" onClick={resource.refresh}>刷新状态</button>
            <p className="visitor-trust">排队数据会自动更新，现场以工作人员指引为准。</p>
          </>
--- a/web/src/pages/VisitorPhonePage.test.tsx
+++ b/web/src/pages/VisitorPhonePage.test.tsx
@@ -0,0 +1,53 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const navigate = vi.fn();
+
+vi.mock("react-router-dom", () => ({
+  useLocation: () => ({ state: { phone: "13800138000" } }),
+  useNavigate: () => navigate,
+}));
+vi.mock("../hooks/usePollingResource", () => ({
+  usePollingResource: () => ({
+    data: {
+      tickets: [{
+        phone_last4: "8000",
+        project_name: "示范项目",
+        project: { id: "project-1", status: "RUNNING" },
+        ticket_number: "00012",
+        status: "WAITING",
+        people_ahead: 2,
+        latest_called_number: "00010",
+        estimated_wait: { min: 10, max: 15 },
+      }],
+    },
+    loading: false,
+    refreshing: false,
+    error: null,
+    offline: false,
+    lastClientSuccessAt: new Date().toISOString(),
+    refresh: vi.fn(),
+  }),
+}));
+
+import { VisitorPhonePage } from "./VisitorPhonePage";
+
+describe("VisitorPhonePage", () => {
+  it("shows the number page without the phone input", () => {
+    render(<VisitorPhonePage />);
+
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+    expect(screen.getByText("我的号码")).toBeVisible();
+    expect(screen.getByText("00012")).toBeVisible();
+    expect(screen.getByRole("button", { name: "刷新状态" })).toBeVisible();
+    expect(screen.getByRole("button", { name: "查询其他手机号" })).toBeVisible();
+  });
+
+  it("returns to the phone lookup without showing an input on the number page", () => {
+    render(<VisitorPhonePage />);
+
+    fireEvent.click(screen.getByRole("button", { name: "查询其他手机号" }));
+
+    expect(navigate).toHaveBeenCalledWith("/visitor");
+  });
+});
--- a/web/src/pages/VisitorPhonePage.tsx
+++ b/web/src/pages/VisitorPhonePage.tsx
@@ -0,0 +1,168 @@
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { api } from "../api";
+import { EmptyState, FeedbackBanner, FreshnessBanner, LoadingState } from "../components/Feedback";
+import { usePollingResource } from "../hooks/usePollingResource";
+import { isTimestampStale, visitorStatusMeta } from "../lib/format";
+import type { PublicStatusDto } from "../types";
+import { VisitorTicketCard } from "./VisitorTicketCard";
+
+const PHONE_STORAGE_KEY = "scenic-visitor-query-phone";
+
+function ticketKey(ticket: PublicStatusDto): string {
+  return `${ticket.project?.id ?? ticket.project_name}:${ticket.ticket_number}`;
+}
+
+function readStoredPhone(): string {
+  try {
+    return window.sessionStorage.getItem(PHONE_STORAGE_KEY) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+function storePhone(phone: string): void {
+  try {
+    window.sessionStorage.setItem(PHONE_STORAGE_KEY, phone);
+  } catch {
+    // Session storage is only a refresh convenience for this temporary flow.
+  }
+}
+
+function clearStoredPhone(): void {
+  try {
+    window.sessionStorage.removeItem(PHONE_STORAGE_KEY);
+  } catch {
+    // Ignore storage failures; the page can still navigate normally.
+  }
+}
+
+interface VisitorPhoneLocationState {
+  phone?: string;
+}
+
+export function VisitorPhonePage() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const locationPhone = (location.state as VisitorPhoneLocationState | null)?.phone?.trim() ?? "";
+  const [phone] = useState(() => locationPhone || readStoredPhone());
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const resource = usePollingResource((signal) => api.publicStatusByPhone(phone, signal), {
+    enabled: Boolean(phone),
+    intervalMs: 3_000,
+    resourceKey: phone || "visitor-phone",
+  });
+  const data = resource.data;
+  const tickets = data?.tickets ?? [];
+  const selectedTicket = tickets.find((ticket) => ticketKey(ticket) === selectedKey) ?? tickets[0];
+  const freshnessTime = resource.lastClientSuccessAt;
+  const stale = Boolean(data) && isTimestampStale(freshnessTime, 30_000);
+
+  useEffect(() => {
+    if (locationPhone) storePhone(locationPhone);
+  }, [locationPhone]);
+
+  useEffect(() => {
+    if (!tickets.length) {
+      setSelectedKey(null);
+      return;
+    }
+    const currentKey = selectedKey && tickets.some((ticket) => ticketKey(ticket) === selectedKey)
+      ? selectedKey
+      : ticketKey(tickets[0]);
+    if (currentKey !== selectedKey) setSelectedKey(currentKey);
+  }, [selectedKey, tickets]);
+
+  function returnToLookup() {
+    clearStoredPhone();
+    navigate("/visitor");
+  }
+
+  const liveTone = resource.offline ? "offline" : stale || resource.error ? "stale" : "live";
+  const liveLabel = resource.offline ? "连接中断" : stale || resource.error ? "更新延迟" : "实时更新";
+
+  return (
+    <main className="visitor-page visitor-page--mobile visitor-phone-page">
+      <header className="public-header visitor-public-header">
+        <div className="brand-lockup">
+          <img className="brand-logo" src="/xiaoqikong-logo.jpg" alt="" aria-hidden="true" />
+          <span><strong>小七孔文旅集团</strong><small>排队服务</small></span>
+        </div>
+        <span className={`visitor-header__meta visitor-header__meta--${liveTone}`}><i aria-hidden="true" />{liveLabel}</span>
+      </header>
+      <div className="visitor-content">
+        {!phone ? (
+          <FeedbackBanner tone="warning" title="查询会话已失效" action={<button className="button button--secondary button--small" onClick={returnToLookup}>重新查询</button>}>
+            请返回输入手机号后再次查询。
+          </FeedbackBanner>
+        ) : null}
+        {resource.loading && !data ? <LoadingState label="正在读取您的排队号码" /> : null}
+        {resource.error && !data ? (
+          <FeedbackBanner
+            tone="danger"
+            title="暂时无法读取排队状态"
+            action={<button className="button button--secondary button--small" onClick={resource.refresh}>重试</button>}
+          >
+            {resource.error.status === 429 ? "查询次数过多，请稍后再试。" : resource.error.message}
+          </FeedbackBanner>
+        ) : null}
+        {data ? (
+          <>
+            <FreshnessBanner
+              offline={resource.offline}
+              stale={stale}
+              timestamp={freshnessTime}
+              refreshing={resource.refreshing}
+              errorMessage={resource.error?.message}
+              onRetry={resource.refresh}
+            />
+            {tickets.length === 0 ? (
+              <>
+                <EmptyState title="暂未找到活动排队号码" description="请核对手机号，或联系现场工作人员。" />
+                <button className="button button--secondary visitor-refresh" onClick={returnToLookup}>重新输入手机号</button>
+              </>
+            ) : (
+              <>
+                {tickets.length > 1 ? (
+                  <section className="visitor-lookup-results" aria-labelledby="visitor-lookup-results-title">
+                    <div className="visitor-lookup-results__heading">
+                      <div>
+                        <span>当前活动号码</span>
+                        <h2 id="visitor-lookup-results-title">找到 {tickets.length} 张排队单</h2>
+                      </div>
+                      <small>请选择要查看的号码</small>
+                    </div>
+                    <div className="visitor-lookup-options" role="list">
+                      {tickets.map((ticket) => {
+                        const key = ticketKey(ticket);
+                        const statusMeta = visitorStatusMeta(ticket.status, ticket.people_ahead);
+                        return (
+                          <div key={key} role="listitem">
+                            <button
+                              className="visitor-lookup-option"
+                              type="button"
+                              aria-pressed={selectedTicket ? key === ticketKey(selectedTicket) : false}
+                              onClick={() => setSelectedKey(key)}
+                            >
+                              <span>{ticket.project_name}</span>
+                              <strong>{ticket.ticket_number}</strong>
+                              <small>{statusMeta.label}</small>
+                            </button>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </section>
+                ) : null}
+                {selectedTicket ? <VisitorTicketCard data={selectedTicket} lastUpdatedAt={freshnessTime} /> : null}
+                <button className="button button--secondary visitor-refresh" onClick={resource.refresh}>刷新状态</button>
+                <button className="button button--ghost visitor-refresh" onClick={returnToLookup}>查询其他手机号</button>
+                <p className="visitor-trust">排队数据会自动更新，现场以工作人员指引为准。</p>
+              </>
+            )}
+          </>
+        ) : null}
+      </div>
+    </main>
+  );
+}
--- a/web/src/pages/VisitorTicketCard.tsx
+++ b/web/src/pages/VisitorTicketCard.tsx
@@ -0,0 +1,80 @@
+import type { PublicStatusDto } from "../types";
+import { formatDateTime, formatEstimatedWait, visitorStatusMeta } from "../lib/format";
+
+interface VisitorTicketCardProps {
+  data: PublicStatusDto;
+  lastUpdatedAt?: string | null;
+}
+
+export function VisitorTicketCard({ data, lastUpdatedAt }: VisitorTicketCardProps) {
+  const phoneLast4 = data.phone_last4?.replace(/\D/g, "").slice(-4) || "未知";
+  const status = data.status?.toUpperCase() ?? "";
+  const statusMeta = visitorStatusMeta(data.status, data.people_ahead);
+  const projectPaused = status === "WAITING" && data.project?.status?.toUpperCase() === "PAUSED";
+  const displayTone = projectPaused ? "warning" : statusMeta.tone;
+  const displayLabel = projectPaused ? "项目暂时暂停" : statusMeta.label;
+  const visitorNotice = data.visitor_notice == null
+    ? "请您在景区附近等候，注意听从工作人员指引。"
+    : data.visitor_notice.trim();
+
+  return (
+    <>
+      <article className={`visitor-ticket visitor-ticket--${displayTone}`} data-visitor-card>
+        <div className="visitor-ticket__topline" data-visitor-reveal>
+          <div>
+            <p className="visitor-ticket__project">{data.project_name}</p>
+            <h1 aria-live="polite">{displayLabel}</h1>
+          </div>
+          <span className="visitor-ticket__status-mark" aria-hidden="true" />
+        </div>
+        <div className="visitor-ticket__number" data-visitor-reveal>
+          <span>我的号码</span>
+          <strong>{data.ticket_number}</strong>
+        </div>
+        <div className="visitor-ticket__metrics" data-visitor-reveal>
+          <div className="visitor-ticket__latest-called">
+            <span>当前最新到号</span>
+            <strong>{data.latest_called_number || "暂无"}</strong>
+          </div>
+          {status === "WAITING" && !projectPaused ? (
+            <>
+              <div className="visitor-ticket__wait">
+                <span>预计等待时间</span>
+                <strong>{formatEstimatedWait(data.estimated_wait)}</strong>
+              </div>
+              <div className="visitor-ticket__progress">
+                <span>前方排队</span>
+                <strong>{data.people_ahead == null ? "未知" : `${data.people_ahead} 个号码`}</strong>
+              </div>
+            </>
+          ) : null}
+        </div>
+        {status === "WAITING" && projectPaused ? (
+          <section className="visitor-ticket__service-status" aria-label="服务状态" data-visitor-reveal>
+            <span>服务状态</span>
+            <strong>号码已保留，项目恢复后会重新估算预计叫号时间。</strong>
+          </section>
+        ) : null}
+        {status === "CALLED" ? (
+          <div className="call-action" role="alert" aria-live="assertive" data-visitor-reveal>
+            <span>现在请前往</span>
+            <strong>{data.entrance || "现场入口"}</strong>
+            <p>请出示排队号码，叫号时间 {formatDateTime(data.called_at)}</p>
+          </div>
+        ) : null}
+        {status !== "WAITING" && status !== "CALLED" ? <p className="visitor-ticket__guidance" data-visitor-reveal>{statusMeta.guidance}</p> : null}
+        {data.message ? <p className="visitor-ticket__message" data-visitor-reveal>{data.message}</p> : null}
+        <div className="visitor-ticket__metadata" data-visitor-reveal>
+          <span aria-label={`联系手机号尾号 ${phoneLast4}`}><small>手机号：</small><span>{`尾号 ${phoneLast4}`}</span></span>
+          <span>更新于 {formatDateTime(lastUpdatedAt || data.last_updated_at)}</span>
+        </div>
+      </article>
+      {visitorNotice ? (
+        <aside className="visitor-official-notice" data-visitor-reveal aria-label="官方提示">
+          <strong>官方提示</strong>
+          <p>{visitorNotice}</p>
+        </aside>
+      ) : null}
+    </>
+  );
+}
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -4878,6 +4878,177 @@ body:has(.visitor-page--mobile) {
  background: #eaf7f0;
 }

+.visitor-lookup-card {
+  display: grid;
+  gap: 18px;
+  border: 1px solid #c5d3ca;
+  border-radius: 16px;
+  padding: 22px 20px 18px;
+  background: rgba(255, 255, 255, .96);
+  box-shadow: 0 10px 26px rgba(11, 77, 42, .08);
+}
+
+.visitor-lookup-card__intro {
+  display: grid;
+  gap: 6px;
+}
+
+.visitor-lookup-card__intro > span,
+.visitor-lookup-results__heading > div > span {
+  color: #137a4b;
+  font-size: .8rem;
+  font-weight: 800;
+  letter-spacing: .08em;
+}
+
+.visitor-lookup-card__intro h1,
+.visitor-lookup-results__heading h2 {
+  margin: 0;
+  color: #10261d;
+  font-size: clamp(1.4rem, 6vw, 2rem);
+  line-height: 1.25;
+}
+
+.visitor-lookup-card__intro p,
+.visitor-lookup-card__help {
+  margin: 0;
+  color: #56665f;
+  font-size: .88rem;
+  line-height: 1.55;
+}
+
+.visitor-lookup-form {
+  display: grid;
+  gap: 14px;
+}
+
+.visitor-lookup-form input {
+  min-height: 54px;
+  border-color: #aebeb4;
+  border-radius: 9px;
+  padding: 12px 14px;
+  background: #fff;
+  color: #10261d;
+  font-size: 1.05rem;
+  letter-spacing: .04em;
+}
+
+.visitor-lookup-form input:focus {
+  border-color: #137a4b;
+  box-shadow: 0 0 0 3px rgba(19, 122, 75, .14);
+  outline: 0;
+}
+
+.visitor-lookup-form .field-error {
+  display: block;
+  margin-top: 2px;
+}
+
+.visitor-lookup-results {
+  display: grid;
+  gap: 12px;
+}
+
+.visitor-lookup-results__heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 2px 2px 0;
+}
+
+.visitor-lookup-results__heading h2 {
+  margin-top: 4px;
+  font-size: 1.2rem;
+}
+
+.visitor-lookup-results__heading small {
+  color: #68736c;
+  font-size: .8rem;
+  white-space: nowrap;
+}
+
+.visitor-lookup-options {
+  display: grid;
+  gap: 8px;
+}
+
+.visitor-lookup-option {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  width: 100%;
+  gap: 12px;
+  border: 1px solid #d5ded8;
+  border-radius: 10px;
+  padding: 13px 14px;
+  background: #fff;
+  color: #10261d;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), transform var(--motion-press) var(--ease-standard);
+}
+
+.visitor-lookup-option:hover,
+.visitor-lookup-option:focus-visible,
+.visitor-lookup-option[aria-pressed="true"] {
+  border-color: #137a4b;
+  background: #eaf7f0;
+  outline: 0;
+}
+
+.visitor-lookup-option:active {
+  transform: translateY(1px);
+}
+
+.visitor-lookup-option span {
+  min-width: 0;
+  overflow: hidden;
+  color: #56665f;
+  font-size: .86rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.visitor-lookup-option strong {
+  color: #075d31;
+  font-size: 1.3rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: .03em;
+  white-space: nowrap;
+}
+
+.visitor-lookup-option small {
+  min-width: 4.5em;
+  color: #137a4b;
+  font-size: .78rem;
+  font-weight: 800;
+  text-align: right;
+  white-space: nowrap;
+}
+
+@media (max-width: 380px) {
+  .visitor-lookup-results__heading {
+    align-items: start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .visitor-lookup-results__heading small {
+    white-space: normal;
+  }
+
+  .visitor-lookup-option {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .visitor-lookup-option small {
+    grid-column: 1 / -1;
+    justify-self: start;
+    text-align: left;
+  }
+}
+
 .display-page {
  background:
    linear-gradient(145deg, rgba(247, 249, 247, .62) 0%, rgba(238, 246, 240, .7) 58%, rgba(247, 249, 247, .78) 100%),
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -137,6 +137,10 @@ export interface PublicStatusDto {
  visitor_notice?: string | null;
 }

+export interface PublicStatusSearchDto {
+  tickets: PublicStatusDto[];
+}
+
 export interface DisplaySnapshotDto {
  project_name: string;
  status: ProjectStatus;