优化

上游评论页按 page=N 翻页，但列表接口 /para_review 早已改成游标分页（响应给
next_cursor，请求要带 cursor=）。接口不认识 page，于是每次「加载更多」都原样
返回第一页：一条新评论都加不进去，has_more 又始终是 true，评论页便一遍遍触发
加载更多、反复闪骨架屏——用户看到的就是段评往下滑一闪一闪，评论一条没多。

评论页是上游 HTML 改不了，于是在承载页面的接口代理里做最小适配：
  - 请求带 page=N（N>1）且有上一页给的游标时，换成 cursor= 请求；
  - 某页返回的 comment_id 全是已经见过的，就把 has_more 改成 false 收尾，
    避免页面在「加载更多 → 没有新内容」之间空转。

只认路径以 /para_review 结尾、带 page 且不带 cursor 的请求，其余原样透传。

internal/service/reader/browser_comment_page.go

@@ -0,0 +1,239 @@
+package reader
+
+import (
+	"encoding/json"
+	"net/url"
+	"sort"
+	"strconv"
+	"strings"
+	"sync"
+)
+
+// 本文件：段落评论接口（/para_review）的分页适配。
+//
+// 上游聚合站自带的评论页按 page=N 翻页（滑到底请求 page=2、page=3…），但它的列表
+// 接口早就改成了游标分页：响应里给 next_cursor，请求时要带 cursor=。接口不认识
+// page，于是每次「加载更多」都原样返回第一页——一条新评论都加不进去，has_more 又
+// 始终是 true，评论页就一遍遍触发加载更多、反复闪骨架屏。用户看到的就是「段评往
+// 下滑一闪一闪」，其实评论一条没多。
+//
+// 评论页是上游 HTML，改不了，于是在代理层做最小适配：
+//   - 请求带 page=N（N>1）且有上一页给的游标时，换成 cursor= 请求；
+//   - 某页返回的 comment_id 全是已经见过的，就把 has_more 改成 false 收尾，
+//     免得页面在「加载更多 → 没有新内容」之间空转。
+//
+// 只认路径以 /para_review 结尾、带 page 且不带 cursor 的请求；对不上就原样透传，
+// 不影响别的书源。
+
+// commentPageState 一个评论列表（同一段落 + 同一排序）的翻页状态。
+type commentPageState struct {
+	// cursor 上一页响应给的游标：下一页请求用它代替 page。
+	cursor string
+	// seen 已经下发给页面的 comment_id：整页重复时据此收尾。
+	seen map[string]struct{}
+}
+
+// commentPager 承载页面里评论接口的翻页适配器（每个承载页面一份）。
+type commentPager struct {
+	mu     sync.Mutex
+	states map[string]*commentPageState
+}
+
+func newCommentPager() *commentPager {
+	return &commentPager{states: map[string]*commentPageState{}}
+}
+
+// rewriteRequest 按需把 page=N 改写成 cursor=<上一页游标>。
+//
+// 返回改写后的地址与状态键（空串表示这个请求不需要适配，调用方也不必观察响应）。
+func (p *commentPager) rewriteRequest(target string) (string, string) {
+	if p == nil {
+		return target, ""
+	}
+	parsed, err := url.Parse(target)
+	if err != nil || !isCommentListPath(parsed.Path) {
+		return target, ""
+	}
+	query := parsed.Query()
+	pageRaw := strings.TrimSpace(query.Get("page"))
+	if pageRaw == "" || strings.TrimSpace(query.Get("cursor")) != "" {
+		return target, ""
+	}
+	page, err := strconv.Atoi(pageRaw)
+	if err != nil || page < 1 {
+		return target, ""
+	}
+	key := commentPageKey(parsed.Path, query)
+	if page == 1 {
+		// 重新加载 / 换了排序：游标与去重表都从头来。
+		p.mu.Lock()
+		delete(p.states, key)
+		p.mu.Unlock()
+		return target, key
+	}
+	p.mu.Lock()
+	cursor := ""
+	if st := p.states[key]; st != nil {
+		cursor = st.cursor
+	}
+	p.mu.Unlock()
+	if cursor == "" {
+		// 不是从第一页翻过来的（没有游标可用）：原样透传，仍然观察响应，
+		// 靠下面的「整页重复」判断让页面停下来。
+		return target, key
+	}
+	query.Set("cursor", cursor)
+	query.Del("page")
+	parsed.RawQuery = query.Encode()
+	return parsed.String(), key
+}
+
+// observeResponse 观察评论列表响应：记下游标，并在整页重复时把 has_more 改成 false。
+func (p *commentPager) observeResponse(key, body string) string {
+	if p == nil || key == "" {
+		return body
+	}
+	trimmed := strings.TrimSpace(body)
+	if !strings.HasPrefix(trimmed, "{") {
+		return body
+	}
+	var env commentListEnvelope
+	if err := json.Unmarshal([]byte(trimmed), &env); err != nil {
+		return body
+	}
+	if env.Data.Comments == nil && env.Data.HasMore == nil {
+		return body
+	}
+	ids := make([]string, 0, len(env.Data.Comments))
+	for _, c := range env.Data.Comments {
+		if id := strings.TrimSpace(c.CommentID); id != "" {
+			ids = append(ids, id)
+		}
+	}
+
+	p.mu.Lock()
+	defer p.mu.Unlock()
+	if p.states == nil {
+		p.states = map[string]*commentPageState{}
+	}
+	st := p.states[key]
+	if st == nil {
+		st = &commentPageState{seen: map[string]struct{}{}}
+		p.states[key] = st
+	}
+	repeated := len(ids) > 0
+	for _, id := range ids {
+		if _, ok := st.seen[id]; !ok {
+			repeated = false
+			break
+		}
+	}
+	if repeated && env.Data.HasMore != nil && *env.Data.HasMore {
+		// 整页都是老评论：接口不认 page，再翻下去也只会拿到同一页。
+		// 改掉 has_more，让页面显示「没有更多了」，别再反复拉取闪骨架屏。
+		if replaced, ok := setFirstJSONBoolFalse(trimmed, "has_more"); ok {
+			return replaced
+		}
+		return body
+	}
+	for _, id := range ids {
+		st.seen[id] = struct{}{}
+	}
+	if env.Data.HasMore != nil && !*env.Data.HasMore {
+		// 已经是最后一页：游标链到头，清掉它，页面万一再要一页也别拿旧游标
+		// 去请求（那种请求会落在下面的「整页重复」判断上收尾）。
+		st.cursor = ""
+		return body
+	}
+	// 游标只在拿到新内容时前进：请求失败/重复时页面会重试同一页，
+	// 游标也跟着重试同一个。
+	if cursor := rawJSONScalar(env.Data.Cursor); cursor != "" {
+		st.cursor = cursor
+	}
+	return body
+}
+
+// commentListEnvelope 评论列表响应里我们关心的字段。
+type commentListEnvelope struct {
+	Data struct {
+		Comments []struct {
+			CommentID string `json:"comment_id"`
+		} `json:"comments"`
+		HasMore *bool           `json:"has_more"`
+		Cursor  json.RawMessage `json:"next_cursor"`
+	} `json:"data"`
+}
+
+// isCommentListPath 判断是否是段落评论列表接口（/para_review）。
+func isCommentListPath(path string) bool {
+	p := strings.TrimSuffix(strings.ToLower(strings.TrimSpace(path)), "/")
+	return strings.HasSuffix(p, "/para_review")
+}
+
+// commentPageKey 生成翻页状态键：接口路径 + 除 page/cursor 之外的查询参数。
+// 同一段落的不同排序（sort_by）各自一套状态，互不干扰。
+func commentPageKey(path string, query url.Values) string {
+	rest := make(url.Values, len(query))
+	for k, v := range query {
+		if k == "page" || k == "cursor" {
+			continue
+		}
+		rest[k] = v
+	}
+	keys := make([]string, 0, len(rest))
+	for k := range rest {
+		keys = append(keys, k)
+	}
+	sort.Strings(keys)
+	var b strings.Builder
+	b.WriteString(path)
+	for _, k := range keys {
+		for _, v := range rest[k] {
+			b.WriteString("|" + k + "=" + v)
+		}
+	}
+	return b.String()
+}
+
+// rawJSONScalar 取一个 JSON 标量的字面量（游标是毫秒时间戳，可能被上游写成数字）。
+func rawJSONScalar(raw json.RawMessage) string {
+	s := strings.TrimSpace(string(raw))
+	if s == "" || s == "null" {
+		return ""
+	}
+	if strings.HasPrefix(s, `"`) {
+		var out string
+		if json.Unmarshal(raw, &out) == nil {
+			return strings.TrimSpace(out)
+		}
+		return ""
+	}
+	return s
+}
+
+// setFirstJSONBoolFalse 把 JSON 里第一个 `"key":true` 改成 `"key":false`。
+//
+// 只做这一处等长替换，不重新序列化整份响应：评论里的 user_id、时间戳动辄十几位，
+// 走一遍 float64 会变成科学计数法，页面再解析就废了。
+func setFirstJSONBoolFalse(body, key string) (string, bool) {
+	token := `"` + key + `"`
+	idx := strings.Index(body, token)
+	if idx < 0 {
+		return body, false
+	}
+	i := idx + len(token)
+	for i < len(body) && (body[i] == ' ' || body[i] == '\t' || body[i] == '\n' || body[i] == '\r') {
+		i++
+	}
+	if i >= len(body) || body[i] != ':' {
+		return body, false
+	}
+	i++
+	for i < len(body) && (body[i] == ' ' || body[i] == '\t' || body[i] == '\n' || body[i] == '\r') {
+		i++
+	}
+	if !strings.HasPrefix(body[i:], "true") {
+		return body, false
+	}
+	return body[:i] + "false" + body[i+len("true"):], true
+}

internal/service/reader/browser_comment_page_test.go

@@ -0,0 +1,187 @@
+package reader
+
+import (
+	"encoding/json"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"sync"
+	"testing"
+
+	"github.com/truewhile/MeBox/internal/service/reader/rule"
+)
+
+// 本文件：段落评论翻页适配（browser_comment_page.go）的测试。
+//
+// 覆盖两件事：
+//  1. page=N（N>1）被换成上一页响应给的 cursor；
+//  2. 整页重复（接口不认 page 时的表现）时把 has_more 改成 false，页面才会收尾。
+
+const commentParaBase = "https://cmt.example.com/para_review?item_id=X&para=1&source=QQ"
+
+func TestCommentPagerRewritesPageToCursor(t *testing.T) {
+	p := newCommentPager()
+
+	// 第一页：原样请求，响应里的游标被记下
+	target, key := p.rewriteRequest(commentParaBase + "&page=1")
+	if key == "" {
+		t.Fatal("段落评论接口应被识别")
+	}
+	if target != commentParaBase+"&page=1" {
+		t.Fatalf("第一页不该改写: %q", target)
+	}
+	p.observeResponse(key, `{"code":0,"data":{"comments":[{"comment_id":"c1"}],"has_more":true,"next_cursor":"1500000000000"}}`)
+
+	// 第二页：改成带 cursor 的请求，page 不再出现
+	target, key2 := p.rewriteRequest(commentParaBase + "&page=2")
+	if key2 != key {
+		t.Fatalf("同一段落的状态键应一致: %q vs %q", key2, key)
+	}
+	if !strings.Contains(target, "cursor=1500000000000") || strings.Contains(target, "page=") {
+		t.Fatalf("第二页应换成 cursor 请求: %q", target)
+	}
+
+	// 拿到新评论：游标前进到下一页
+	p.observeResponse(key, `{"code":0,"data":{"comments":[{"comment_id":"c2"}],"has_more":true,"next_cursor":"1400000000000"}}`)
+	target, _ = p.rewriteRequest(commentParaBase + "&page=3")
+	if !strings.Contains(target, "cursor=1400000000000") {
+		t.Fatalf("第三页应使用新的游标: %q", target)
+	}
+
+	// 重新加载（page=1）会把整轮状态清掉：没有游标就原样透传
+	p.rewriteRequest(commentParaBase + "&page=1")
+	target, _ = p.rewriteRequest(commentParaBase + "&page=2")
+	if strings.Contains(target, "cursor=") {
+		t.Fatalf("重置后不该还带着旧游标: %q", target)
+	}
+}
+
+func TestCommentPagerStopsOnRepeatedPage(t *testing.T) {
+	p := newCommentPager()
+	_, key := p.rewriteRequest(commentParaBase + "&page=1")
+	first := `{"code":0,"data":{"comments":[{"comment_id":"c1","like_count":562,"user":{"user_id":601948729051219}}],"has_more":true,"next_cursor":"1500000000000"}}`
+	if got := p.observeResponse(key, first); got != first {
+		t.Fatalf("第一页不该被改写: %q", got)
+	}
+
+	// 同一页又被返回一次（接口忽略 page）：改 has_more，让页面显示「没有更多了」
+	repeat := `{"code":0,"data":{"comments":[{"comment_id":"c1","like_count":562,"user":{"user_id":601948729051219}}],"has_more":true,"next_cursor":"1500000000000"}}`
+	got := p.observeResponse(key, repeat)
+	if !strings.Contains(got, `"has_more":false`) {
+		t.Fatalf("重复页应把 has_more 改成 false: %q", got)
+	}
+	// 只动 has_more 一处，其它字段（尤其是大整数）保持原样
+	if strings.Replace(got, `"has_more":false`, `"has_more":true`, 1) != first {
+		t.Fatalf("除 has_more 外不应改动响应: %q", got)
+	}
+	// 重复页不再推进游标
+	target, _ := p.rewriteRequest(commentParaBase + "&page=2")
+	if !strings.Contains(target, "cursor=1500000000000") {
+		t.Fatalf("游标不该被重复页顶掉: %q", target)
+	}
+}
+
+func TestCommentPagerIgnoresOtherRequests(t *testing.T) {
+	p := newCommentPager()
+	cases := []string{
+		"https://cmt.example.com/book/detail?page=2",               // 不是评论接口
+		"https://cmt.example.com/para_review?item_id=X",            // 没有 page
+		"https://cmt.example.com/para_review?item_id=X&cursor=1",   // 已经在用游标
+		"https://cmt.example.com/para_review?item_id=X&page=0",     // page 非法
+		"https://cmt.example.com/para_review?item_id=X&sort_by=1&", // 没有 page
+	}
+	for _, target := range cases {
+		got, key := p.rewriteRequest(target)
+		if got != target || key != "" {
+			t.Fatalf("不该改写的请求被处理了: %q -> %q (key=%q)", target, got, key)
+		}
+	}
+	// 非 JSON 响应原样返回
+	if got := p.observeResponse("k", "<html></html>"); got != "<html></html>" {
+		t.Fatalf("非 JSON 响应被改动: %q", got)
+	}
+}
+
+// TestBrowserXHRCommentPagerFollowsCursor 端到端：页面按 page 翻页，
+// 代理层换成 cursor，接口给出新评论，最后一页重复时收尾。
+func TestBrowserXHRCommentPagerFollowsCursor(t *testing.T) {
+	svc, _ := newLoginTestService(t)
+
+	var mu sync.Mutex
+	seenCursors := []string{}
+	seenPages := []string{}
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		switch r.URL.Path {
+		case "/page":
+			w.Header().Set("Content-Type", "text/html; charset=utf-8")
+			_, _ = io.WriteString(w, `<html><body>comment page</body></html>`)
+		case "/para_review":
+			q := r.URL.Query()
+			mu.Lock()
+			seenCursors = append(seenCursors, q.Get("cursor"))
+			seenPages = append(seenPages, q.Get("page"))
+			mu.Unlock()
+			w.Header().Set("Content-Type", "application/json; charset=utf-8")
+			// 上游只认 cursor：不认识 page，靠 next_cursor 一页页往前。
+			switch q.Get("cursor") {
+			case "":
+				_, _ = io.WriteString(w, `{"code":0,"data":{"comments":[{"comment_id":"c1"}],"has_more":true,"next_cursor":"1500000000000"}}`)
+			case "1500000000000":
+				_, _ = io.WriteString(w, `{"code":0,"data":{"comments":[{"comment_id":"c2"}],"has_more":true,"next_cursor":"1400000000000"}}`)
+			case "1400000000000":
+				_, _ = io.WriteString(w, `{"code":0,"data":{"comments":[{"comment_id":"c3"}],"has_more":false,"next_cursor":""}}`)
+			default:
+				// 兜底分支：上游把同一页又给了一遍（页面的 page 循环就会走到这里）
+				_, _ = io.WriteString(w, `{"code":0,"data":{"comments":[{"comment_id":"c3"}],"has_more":true,"next_cursor":"1300000000000"}}`)
+			}
+		default:
+			http.NotFound(w, r)
+		}
+	}))
+	defer srv.Close()
+
+	entry, err := svc.registerBrowser(t.Context(), srv.URL, "src-1", readerTestUserID,
+		browserCookieTarget{}, rule.BrowserTask{URL: srv.URL + "/page", Title: "段评"}, browserModeOpen)
+	if err != nil {
+		t.Fatalf("登记承载页面失败: %v", err)
+	}
+	call := func(page string) string {
+		t.Helper()
+		res, err := svc.ProxyBrowserXHR(t.Context(), entry.id, http.MethodGet,
+			srv.URL+"/para_review?item_id=X&para=1&source=QQ&page="+page, nil, "")
+		if err != nil {
+			t.Fatalf("代理请求失败: %v", err)
+		}
+		return res.Body
+	}
+
+	if body := call("1"); !strings.Contains(body, `"has_more":true`) || !strings.Contains(body, "c1") {
+		t.Fatalf("第一页响应异常: %q", body)
+	}
+	if body := call("2"); !strings.Contains(body, "c2") {
+		t.Fatalf("第二页应拿到下一页评论: %q", body)
+	}
+	if body := call("3"); !strings.Contains(body, "c3") || !strings.Contains(body, `"has_more":false`) {
+		t.Fatalf("第三页应是真正的最后一页: %q", body)
+	}
+	// 页面不知道已经到底，还可能再要一页：上游又把最后一页给了一遍，
+	// 适配层要把 has_more 改成 false，页面才会显示「没有更多了」并停下。
+	last := call("4")
+	if !strings.Contains(last, `"has_more":false`) {
+		t.Fatalf("整页重复时应收尾（has_more=false）: %q", last)
+	}
+
+	mu.Lock()
+	defer mu.Unlock()
+	if strings.Join(seenPages, ",") != "1,,,4" {
+		t.Fatalf("page 参数只应出现在没有游标可用的请求上: %v", seenPages)
+	}
+	if strings.Join(seenCursors, ",") != ",1500000000000,1400000000000," {
+		t.Fatalf("游标传递不符预期: %v", seenCursors)
+	}
+	var env map[string]any
+	if err := json.Unmarshal([]byte(last), &env); err != nil {
+		t.Fatalf("收尾后的响应不是合法 JSON: %v", err)
+	}
+}

internal/service/reader/browser_panel.go

@@ -103,6 +103,9 @@ type pendingBrowser struct {
 	finalURL string
 	mode     string
 	expires  time.Time
+	// comments 段落评论接口的翻页适配（上游页面按 page 翻页，接口只认 cursor，
+	// 见 browser_comment_page.go）。
+	comments *commentPager
 
 	done     chan struct{}
 	mu       sync.Mutex
@@ -218,6 +221,7 @@ func (s *ReaderService) registerBrowser(ctx context.Context, sourceURL, sourceID
 		mode:      mode,
 		expires:   time.Now().Add(browserPageTTL),
 		done:      make(chan struct{}),
+		comments:  newCommentPager(),
 	}
 
 	s.browserMu.Lock()
@@ -511,6 +515,13 @@ func (s *ReaderService) ProxyBrowserXHR(ctx context.Context, id, method, target
 	if method == "" {
 		method = http.MethodGet
 	}
+	// 段落评论接口：评论页按 page=N 翻页，而接口只认 cursor（见
+	// browser_comment_page.go）。改写发生在补书源凭据之前，Cookie/Referer
+	// 仍然按目标站点选取。
+	pagerKey := ""
+	if entry.comments != nil {
+		target, pagerKey = entry.comments.rewriteRequest(target)
+	}
 	reqCtx, cancel := context.WithTimeout(ctx, browserFetchTimeout)
 	defer cancel()
 	// 挂上 sink：页面自己发起的请求（如扫码登录的轮询/取票跳转）下发的
@@ -577,6 +588,9 @@ func (s *ReaderService) ProxyBrowserXHR(ctx context.Context, id, method, target
 	out := &BrowserXHRResult{Status: resp.StatusCode, ContentType: contentType}
 	if isTextualContent(contentType) {
 		out.Body = string(data)
+		if entry.comments != nil && pagerKey != "" {
+			out.Body = entry.comments.observeResponse(pagerKey, out.Body)
+		}
 	} else {
 		out.Body = base64.StdEncoding.EncodeToString(data)
 		out.Base64 = true

web/src/components/MediaCard.tsx

@@ -41,10 +41,10 @@ export const MediaCard = memo(function MediaCard({
   const card = (
       <div
         ref={ref}
-        className="relative overflow-hidden rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel)] shadow-[0_1px_3px_rgba(0,0,0,0.01),0_1px_2px_rgba(0,0,0,0.015)] transition-all duration-300 hover:scale-[1.04] hover:-translate-y-1.5 hover:border-brand-500/40 hover:shadow-[0_12px_32px_var(--app-shadow)]"
+        className="relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel)] shadow-[0_1px_3px_rgba(0,0,0,0.01),0_1px_2px_rgba(0,0,0,0.015)] transition-all duration-300 hover:scale-[1.04] hover:-translate-y-1.5 hover:border-brand-500/40 hover:shadow-[0_12px_32px_var(--app-shadow)]"
       >
         {/* Poster Wrapper */}
-        <div className="relative aspect-[2/3] w-full overflow-hidden bg-[var(--app-panel-soft)]">
+        <div className="relative aspect-[2/3] w-full shrink-0 overflow-hidden bg-[var(--app-panel-soft)]">
           {media.poster_url ? (
             <>
               {posterFit === 'contain' && (
@@ -120,26 +120,34 @@ export const MediaCard = memo(function MediaCard({
 
         {/* Media Metadata Info */}
         <div className={`space-y-1 border-t border-[var(--app-border)] bg-[var(--app-panel)] ${
-          compact ? 'p-2' : 'p-4'
+          compact ? 'p-2' : 'p-2.5 sm:p-4'
         }`}>
-          <p className={`truncate font-bold text-[var(--app-text)] transition-colors duration-200 group-hover:text-brand-500 ${
-            compact ? 'text-xs' : 'text-sm'
+          {/* 手机端一张卡只有 ~100px 宽：标题放开到两行，并预留两行高度，
+              这样同一行的卡片不会因为标题行数不同而参差不齐。 */}
+          <p className={`font-bold text-[var(--app-text)] transition-colors duration-200 group-hover:text-brand-500 ${
+            compact
+              ? 'truncate text-xs'
+              : 'line-clamp-2 min-h-[2.75em] text-[13px] leading-snug sm:line-clamp-none sm:min-h-0 sm:truncate sm:text-sm sm:leading-normal'
           }`}>
             {media.title}
           </p>
-          <div className="flex items-center justify-between gap-2 text-[11px] font-bold uppercase tracking-wider text-[var(--app-muted)]">
-            <span>{media.year > 0 ? media.year : "未知年份"}</span>
-            <span className="flex items-center gap-1.5">
+          {/* 单行、不折行：年份可截断，徽标永不压缩。折行会让同一行里各卡片的
+              徽标落位高低不一，看起来就是「错位」，所以宁可极窄屏上截断年份。
+              min-h 统一行高，避免有/无徽标的卡片年份基线差几像素。 */}
+          <div className="flex min-h-[21px] items-center text-[10px] font-bold uppercase text-[var(--app-muted)] sm:min-h-0 sm:gap-x-2 sm:text-[11px] sm:tracking-wider">
+            <span className="truncate">{media.year > 0 ? media.year : "未知年份"}</span>
+            <span className="ml-auto flex shrink-0 items-center gap-0.5 sm:gap-1.5">
               {/* 集数/版本数徽标：放在海报下方的信息行而不是压在画面上。海报底部通常
                   自带片名，角标会盖住它（Game of Thrones / Breaking Bad 都很明显）。 */}
               {(count !== undefined && count > 1) || (count === undefined && versionCount > 1) ? (
-                <span className="inline-flex items-center gap-1 rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-1.5 py-0.5 text-[var(--app-subtle)]">
+                <span className="inline-flex items-center gap-0.5 whitespace-nowrap rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-1 py-0.5 text-[var(--app-subtle)] sm:gap-1 sm:px-1.5">
                   <Layers size={10} className="shrink-0 text-[#c9954a]" />
                   <span>{count !== undefined && count > 1 ? `${count} 集` : `${versionCount} 版本`}</span>
                 </span>
               ) : null}
+              {/* 编码格式在小卡片上没有信息价值，手机上直接隐藏，避免挤掉集数徽标。 */}
               {media.video_codec && (
-                <span className="rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-1.5 py-0.5 text-[var(--app-subtle)]">
+                <span className="hidden whitespace-nowrap rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-1.5 py-0.5 text-[var(--app-subtle)] sm:inline-block">
                   {media.video_codec}
                 </span>
               )}
@@ -151,8 +159,8 @@ export const MediaCard = memo(function MediaCard({
 
   if (onClick) {
     return (
-      <div className="group relative block w-full">
-        <button type="button" onClick={onClick} className="block w-full text-left">
+      <div className="group relative block h-full w-full">
+        <button type="button" onClick={onClick} className="block h-full w-full text-left">
           {card}
         </button>
         {actionContent && (
@@ -166,8 +174,8 @@ export const MediaCard = memo(function MediaCard({
 
   if (actionContent) {
     return (
-      <div className="group relative block">
-        <Link to={href} state={linkState} className="block">
+      <div className="group relative block h-full">
+        <Link to={href} state={linkState} className="block h-full">
           {card}
         </Link>
         <div className={ACTION_OVERLAY_CLASS}>
@@ -178,7 +186,7 @@ export const MediaCard = memo(function MediaCard({
   }
 
   return (
-    <Link to={href} state={linkState} className="group block">
+    <Link to={href} state={linkState} className="group block h-full">
         {card}
     </Link>
   )

web/src/components/VirtualMediaGrid.tsx

@@ -3,8 +3,9 @@ import { Virtuoso } from 'react-virtuoso'
 import clsx from 'clsx'
 
 // 与 LibraryMediaSections 等处的海报网格保持同一套响应式列配置。
+// 手机上单卡只有约 100px 宽，间距收到 gap-3 给标题和徽标多留一点宽度。
 export const MEDIA_GRID_CLASS =
-  'grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8'
+  'grid grid-cols-3 gap-3 sm:gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8'
 
 function getFallbackColumns(width: number): number {
   if (width >= 1536) return 8
@@ -105,7 +106,7 @@ export function VirtualMediaGrid({
           itemContent={(rowIndex) => {
             const start = rowIndex * columns
             return (
-              <div className={clsx(MEDIA_GRID_CLASS, rowIndex < rowCount - 1 && 'pb-4')}>
+              <div className={clsx(MEDIA_GRID_CLASS, rowIndex < rowCount - 1 && 'pb-3 sm:pb-4')}>
                 {Array.from({ length: columns }, (_, colIndex) => {
                   const itemIndex = start + colIndex
                   if (itemIndex >= totalCount) {

web/src/pages/reader/readerAudioEngine.ts

@@ -64,6 +64,14 @@ class ReaderAudioEngine {
   private detaching = false
   /** 加载批次号：动态 import hls.js 期间被新的加载打断时用来丢弃旧结果。 */
   private loadToken = 0
+  /** 预取缓存：章序号 → 已解析的音轨。命中的切章可以同步开播，不用等网络。 */
+  private prefetched = new Map<number, { track: string; transcoding: boolean }>()
+  /** 预取在途的章序号，避免同一章重复请求。 */
+  private prefetching = new Set<number>()
+  /** 预热下一章字节的隐藏播放器（只下载，从不 play()）。 */
+  private warmer: HTMLAudioElement | null = null
+  /** warmer 当前装载的音轨，避免重复赋值。 */
+  private warmedTrack = ''
 
   constructor() {
     const audio = new Audio()
@@ -93,7 +101,13 @@ class ReaderAudioEngine {
     }
     // 换章前把上一章的最后位置补报掉（此时 store 里还是上一章的上下文）
     this.commitProgress()
+    // 换书：预取的音轨属于上一本，全部作废
+    if (s.bookId !== input.bookId) this.clearPrefetch()
+    this.applyChapter(input)
+  }
 
+  /** 真正把一章装上播放器（同步部分）：预取命中的续播也走这里。 */
+  private applyChapter(input: LoadChapterInput): void {
     const chapterTitle = input.chapters[input.chapterIndex]?.title ?? ''
     useReaderAudioStore.setState({
       bookId: input.bookId,
@@ -128,6 +142,9 @@ class ReaderAudioEngine {
     }
 
     void this.attachSource(input.track)
+    // 提前解析下一章的音轨并在后台预热字节：息屏自动续播时才能立刻接上
+    const nextIndex = this.neighborChapterIndex(1)
+    if (nextIndex !== null) this.prefetchChapter(nextIndex)
   }
 
   play(): void {
@@ -222,6 +239,7 @@ class ReaderAudioEngine {
   stop(): void {
     this.commitProgress()
     this.detachSource()
+    this.clearPrefetch()
     this.timerDeadline = 0
     this.pausedAt = 0
     // 下一次开播重新套用「上次的定时设置」，否则关掉再听一本书时定时不会自动开
@@ -242,12 +260,22 @@ class ReaderAudioEngine {
 
   private async attachSource(src: string): Promise<void> {
     const token = ++this.loadToken
-    this.detachSource()
-    this.setSessionMetadata(src)
+    // 只销毁上一章的 hls，不再 removeAttribute('src') + load()。load() 会把媒体
+    // 元素彻底卸载、释放系统音频会话，息屏时紧接着的 play() 就会被浏览器当成
+    // 「无用户手势」拦下——表现正是切章卡住、解锁后必须手动点播放。直接覆盖 src，
+    // 元素始终持有媒体，会话才接得上。
+    this.hls?.destroy()
+    this.hls = null
     if (!src) {
+      this.audio.removeAttribute('src')
+      this.audio.load()
+      this.setSessionMetadata(null)
       this.fail('本章没有可播放的音频')
       return
     }
+    // 先停住上一章：HLS 分支要 await 动态 import，不先停会有一小段两章叠播
+    if (!this.audio.paused) this.audio.pause()
+    this.setSessionMetadata(src)
     if (src.includes('.m3u8')) {
       const mod = await import('hls.js')
       // 动态 import 期间可能已经切到别的章：丢弃这次结果
@@ -270,6 +298,7 @@ class ReaderAudioEngine {
     this.audio.src = src
   }
 
+  /** 彻底卸载音源（停止播放时用）。换章不走这里，见 attachSource 的说明。 */
   private detachSource(): void {
     this.detaching = true
     this.hls?.destroy()
@@ -279,9 +308,117 @@ class ReaderAudioEngine {
     this.detaching = false
   }
 
+  // ─── 预取与续播 ───────────────────────────────────────────────────────
+
+  /**
+   * 提前解析某章的音轨并预热字节。息屏时 ended 与 play() 之间不能有网络空档，
+   * 否则系统收走音频会话、标签页被冻结，浏览器就拒绝自动播放了。
+   */
+  private prefetchChapter(index: number): void {
+    const { bookId, chapters } = useReaderAudioStore.getState()
+    if (!bookId || index < 0 || index >= chapters.length || chapters[index].is_volume) return
+    if (this.prefetched.has(index) || this.prefetching.has(index)) return
+    // 反复跳章时旧的预取会变成垃圾，做个上限兜底
+    if (this.prefetched.size > 32) this.prefetched.clear()
+    this.prefetching.add(index)
+    const forBook = bookId
+    readerAPI
+      .bookContent(bookId, index)
+      .then((ct) => {
+        // 期间换了书：结果作废
+        if (useReaderAudioStore.getState().bookId !== forBook) return
+        const track = ct.tracks?.[0]
+        if (ct.type !== 'audio' || !track) return
+        this.prefetched.set(index, { track, transcoding: ct.transcoding ?? false })
+        // 要服务端转码的音轨立刻预热（把转码提前跑掉）；直链等到本章快播完再拉字节，
+        // 避免用户中途停下时白下整章的流量。
+        if (ct.transcoding) this.warmNextBytes(track)
+      })
+      .catch(() => undefined)
+      .finally(() => this.prefetching.delete(index))
+  }
+
+  /** 用隐藏播放器把下一章的字节（以及服务端转码）提前拉起来，减少切章等待。 */
+  private warmNextBytes(track: string): void {
+    // HLS 交给 hls.js 按需拉流，二次下载没有意义
+    if (!track || track.includes('.m3u8') || this.warmedTrack === track) return
+    this.warmedTrack = track
+    if (!this.warmer) {
+      const a = new Audio()
+      a.preload = 'auto'
+      this.warmer = a
+    }
+    this.warmer.src = track
+  }
+
+  /** 本章快播完时把下一章的字节预热起来（30 秒足够开头缓冲）。 */
+  private maybeWarmNext(): void {
+    const audio = this.audio
+    if (!Number.isFinite(audio.duration) || audio.duration <= 0) return
+    if (audio.duration - audio.currentTime > 30) return
+    const nextIndex = this.neighborChapterIndex(1)
+    if (nextIndex === null) return
+    const hit = this.prefetched.get(nextIndex)
+    if (hit) this.warmNextBytes(hit.track)
+  }
+
+  /** 用预取结果接续下一章；命中返回 true（未命中由调用方走异步加载兜底）。 */
+  private playPrefetched(index: number): boolean {
+    const hit = this.prefetched.get(index)
+    if (!hit) return false
+    this.prefetched.delete(index)
+    const s = useReaderAudioStore.getState()
+    this.applyChapter({
+      bookId: s.bookId,
+      bookName: s.bookName,
+      cover: s.cover,
+      chapters: s.chapters,
+      chapterIndex: index,
+      track: hit.track,
+      transcoding: hit.transcoding,
+      openCredits: s.openCredits,
+      closeCredits: s.closeCredits,
+      initialPos: 0,
+    })
+    // 立刻在 ended 的同一次事件里发起 play()，保证没有空档。片头跳转由
+    // loadedmetadata 处理器完成：音频在 loadedmetadata 之前不会出声，所以
+    // 先 play() 也不会漏出片头。HLS 交给 hls.js 承载，无法同帧开播。
+    if (!hit.track.includes('.m3u8')) this.play()
+    return true
+  }
+
+  private clearPrefetch(): void {
+    this.prefetched.clear()
+    this.prefetching.clear()
+    this.warmedTrack = ''
+    if (this.warmer) {
+      this.warmer.removeAttribute('src')
+      this.warmer.load()
+    }
+  }
+
   private async goToChapter(index: number, initialPos: number): Promise<void> {
     const { bookId, chapters } = useReaderAudioStore.getState()
     if (!bookId || index < 0 || index >= chapters.length || chapters[index].is_volume) return
+    // 命中预取：直接装，不等网络（片尾自动续播大多走这里）
+    const hit = this.prefetched.get(index)
+    if (hit) {
+      useReaderAudioStore.setState({ status: 'loading', error: '' })
+      const s = useReaderAudioStore.getState()
+      this.loadChapter({
+        bookId,
+        bookName: s.bookName,
+        cover: s.cover,
+        chapters,
+        chapterIndex: index,
+        track: hit.track,
+        transcoding: hit.transcoding,
+        openCredits: s.openCredits,
+        closeCredits: s.closeCredits,
+        initialPos,
+      })
+      return
+    }
     useReaderAudioStore.setState({ status: 'loading', error: '' })
     try {
       const ct = await readerAPI.bookContent(bookId, index)
@@ -344,6 +481,10 @@ class ReaderAudioEngine {
       this.lastTime = Number.isFinite(audio.duration) ? audio.duration : this.lastTime
       this.commitProgress()
       if (useReaderAudioStore.getState().hasNext) {
+        // 预取命中：在 ended 的同一次事件里同步接上下一章。息屏时这段「零空档」
+        // 很关键——空太久系统会收走音频会话、冻结标签页，浏览器随后拒绝自动播放。
+        const nextIndex = this.neighborChapterIndex(1)
+        if (nextIndex !== null && this.playPrefetched(nextIndex)) return
         this.next()
         return
       }
@@ -389,6 +530,7 @@ class ReaderAudioEngine {
       this.checkCreditsEnd()
       // 后台播放时 timeupdate 仍会触发，这是「到点暂停」最可靠的位置
       this.checkTimer()
+      this.maybeWarmNext()
     })
 
     audio.addEventListener('error', () => {

web/tailwind.config.js

@@ -1,6 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  future: {
+    // hover 样式只对真正能悬停的设备（鼠标/触控板）生效。触屏点击会让浏览器
+    // 保留 :hover 状态，导致海报墙上的卡片被放大、上移、盖上「立即观影」遮罩，
+    // 看起来像是整行错位、海报显示不全。
+    hoverOnlyWhenSupported: true,
+  },
   theme: {
     extend: {
       fontFamily: {