1
/**
2
 * 阅读进度（顶部细条 + 右下角圆环百分比）。
3
 *
4
 * 进度语义：正文进入视口底边为 0%，正文底边到达视口底边为 100%，
5
 * 即 p = clamp((viewportHeight - rect.top) / rect.height, 0, 1)——
6
 * 横幅、评论区、推荐文章不计入。
7
 *
8
 * 每帧成本：一次 getBoundingClientRect + 算术。scrollFunction 先读 scrollTop
9
 *（布局脏时已在此强制计算），随后本函数的 rect 读取命中同一次新鲜布局，不触发额外回流。
10
 * 百分比文字仅在整数变化时写入，且 badge 带 contain:content，文字变更的布局失效
11
 * 被限制在 badge 子树内，不污染正文布局；圆环 dashoffset 走 SVG 属性（不触发布局）。
12
 * 正文元素被 Swup 替换后靠 isConnected 自愈重新查询，非文章页每帧仅一次
13
 * getElementById 哈希查找（与 scrollFunction 中已有的 navbar 查询同量级）。
14
 */
15

16
let initialized = false;
17
let enabled = false;
18

19
let bar: HTMLElement | null = null;
20
let badge: HTMLElement | null = null;
21
let pctEl: HTMLElement | null = null;
22
let ringEl: SVGCircleElement | null = null;
23

24
let article: HTMLElement | null = null;
25
let observer: ResizeObserver | null = null;
26
let active = false;
27
let lastP = -1;
28
let lastPct = -1;
29

30
/** 圆环周长 2πr（r=15，与 SVG viewBox 一致） */
31
const RING_C = 2 * Math.PI * 15;
32

33
/** Swup 换页/解密后旧引用断开 → 重查并重绑 ResizeObserver；非文章页 null===null 直接短路 */
34
function resolveArticle(): void {
35
  if (article?.isConnected) return;
36
  const next = document.getElementById("post-container");
37
  if (next === article) return;
38
  article = next;
39
  lastPct = -1;
40
  if (observer) {
41
    observer.disconnect();
42
    if (article) observer.observe(article);
43
  }
44
}
45

46
function setActive(next: boolean): void {
47
  if (active === next) return;
48
  active = next;
49
  lastPct = -1;
50
  bar?.classList.toggle("visible", next);
51
  badge?.classList.toggle("show", next);
52
}
53

54
export function initReadingProgress(): void {
55
  if (initialized) return;
56
  initialized = true;
57

58
  // 配置关闭时 DOM 不渲染；查询不到即永久空转
59
  bar = document.getElementById("reading-progress-bar");
60
  badge = document.getElementById("reading-progress-badge");
61
  pctEl = document.getElementById("reading-progress-pct");
62
  ringEl = document.getElementById(
63
    "reading-progress-ring",
64
  ) as SVGCircleElement | null;
65
  if (!bar || !badge || !pctEl || !ringEl) return;
66

67
  enabled = true;
68

69
  if (typeof ResizeObserver !== "undefined") {
70
    // 正文高度变化（图片加载、代码块展开、解密）后无滚动也能重算
71
    observer = new ResizeObserver(() => updateReadingProgress());
72
  }
73

74
  // 移动端地址栏收起只改视口高度、不改正文尺寸 → 单独听 resize
75
  window.addEventListener("resize", updateReadingProgress, { passive: true });
76
  // 沉浸阅读切换改变正文位置且可能落在同一滚动位置（无 scroll 事件）→ 立即 + 过渡结束后各算一次
77
  document.addEventListener("immersiveReadingChange", () => {
78
    updateReadingProgress();
79
    window.setTimeout(updateReadingProgress, 400);
80
  });
81

82
  updateReadingProgress();
83
}
84

85
/** 由 scrollFunction 每帧调用；页面过渡期间 scrollFunction 提前返回，不会执行到这里 */
86
export function updateReadingProgress(): void {
87
  // enabled 为 true 时下列元素必然存在，显式判空仅为满足 TS 收窄
88
  if (!enabled || !bar || !badge || !pctEl || !ringEl) return;
89

90
  resolveArticle();
91
  if (!article) {
92
    setActive(false);
93
    return;
94
  }
95

96
  const rect = article.getBoundingClientRect();
97
  if (rect.height <= 0) return;
98

99
  const p = Math.min(
100
    1,
101
    Math.max(0, (window.innerHeight - rect.top) / rect.height),
102
  );
103
  setActive(true);
104

105
  // transform/dashoffset 只影响合成与绘制，不触发布局，逐帧写入开销可忽略
106
  if (p !== lastP) {
107
    lastP = p;
108
    bar.style.transform = `scaleX(${p})`;
109
    ringEl.style.strokeDashoffset = String(RING_C * (1 - p));
110
  }
111

112
  // 百分比文字仅整数变化时写，配合 contain:content 把回流限制在徽章内
113
  const pct = Math.round(p * 100);
114
  if (pct !== lastPct) {
115
    lastPct = pct;
116
    pctEl.textContent = `${pct}%`;
117
  }
118
}

1
/* --------------------------------------------------------------------------
2
   4b. Reading Progress Bar (post pages)
3
   -------------------------------------------------------------------------- */
4

5
#reading-progress-bar {
6
    --reading-progress-height: 3px;
7

8
    position: fixed;
9
    top: 0;
10
    left: 0;
11
    width: 100%;
12
    height: var(--reading-progress-height);
13
    /* 低于 #progress-bar(9999)：切页时由导航进度条覆盖，同色无缝衔接 */
14
    z-index: 9998;
15
    pointer-events: none;
16
    background: var(--primary);
17
    transform-origin: left center;
18
    transform: scaleX(0);
19
    opacity: 0;
20
    transition: opacity 0.3s ease;
21
    will-change: transform;
22
}
23

24
#reading-progress-bar.visible {
25
    opacity: 1;
26
}
27

28
/* 切页期间隐藏阅读进度条，避免旧页残值与导航进度条混显；visit:end 移除类后淡入 */
29
html.is-page-transitioning #reading-progress-bar {
30
    opacity: 0;
31
}

1
  /*
2
   * 阅读进度圆环：与 .floating-btn 同规格的方框。背景/圆角/overflow 交给 card-base——
3
   * 卡片透明度、卡片边框等全局设置都通过 .card-base 类挂钩，必须带上才能跟随这些设置。
4
   * 本组件只补尺寸、毛玻璃、边框与内容布局。不可交互（pointer-events: none），无 hover。
5
   */
6
  #reading-progress-badge {
7
    display: none;
8
    place-items: center;
9
    position: relative;
10
    width: 3rem;
11
    height: 3rem;
12
    flex-shrink: 0;
13
    border: 1px solid rgba(0, 0, 0, 0.1);
14
    backdrop-filter: blur(12px);
15
    -webkit-backdrop-filter: blur(12px);
16
    color: var(--primary);
17
    pointer-events: none;
18
    user-select: none;
19
    /* 环与文字的布局失效限制在徽章子树内，不污染正文布局 */
20
    contain: content;
21
  }
22

23
  #reading-progress-badge.show {
24
    display: grid;
25
  }
26

27
  /* 切页期间隐藏，visit:end 移除类并刷新后重新显示，避免旧页百分比残值闪现 */
28
  :global(html.is-page-transitioning) #reading-progress-badge {
29
    display: none;
30
  }
31

32
  /* SVG 与数字叠放（同 FloatingButton 双图标的手法：grid 同格） */
33
  #reading-progress-badge .rp-ring,
34
  #reading-progress-badge #reading-progress-pct {
35
    grid-area: 1 / 1;
36
  }
37

38
  .rp-ring {
39
    width: 83%;
40
    height: 83%;
41
    /* 从 12 点方向起笔 */
42
    transform: rotate(-90deg);
43
  }
44

45
  .rp-ring-track,
46
  .rp-ring-value {
47
    fill: none;
48
    stroke-width: 3;
49
  }
50

51
  .rp-ring-track {
52
    stroke: rgba(0, 0, 0, 0.1);
53
  }
54

55
  .rp-ring-value {
56
    stroke: var(--primary);
57
    stroke-linecap: round;
58
    /* 周长 2πr（r=15）≈ 94.2478；初始 dashoffset = 周长 = 0% */
59
    stroke-dasharray: 94.2478;
60
    stroke-dashoffset: 94.2478;
61
  }
62

63
  #reading-progress-pct {
64
    font-size: 0.6875rem;
65
    font-weight: 600;
66
    line-height: 1;
67
    font-variant-numeric: tabular-nums;
68
  }
69

70
  :global(.dark) #reading-progress-badge {
71
    border-color: rgba(255, 255, 255, 0.15);
72
  }
73

74
  :global(.dark) .rp-ring-track {
75
    stroke: rgba(255, 255, 255, 0.15);
76
  }
77

78
  /* 尺寸断点跟随 FloatingButton（480 → 2.5rem，360 → 2rem，320 → 1.75rem） */
79
  @media (max-width: 480px) {
80
    #reading-progress-badge {
81
      width: 2.5rem;
82
      height: 2.5rem;
83
    }
84

85
    #reading-progress-pct {
86
      font-size: 0.625rem;
87
    }
88
  }
89

90
  @media (max-width: 360px) {
91
    #reading-progress-badge {
92
      width: 2rem;
93
      height: 2rem;
94
    }
95

96
    #reading-progress-pct {
97
      font-size: 0.5625rem;
98
    }
99
  }
100

101
  @media (max-width: 320px) {
102
    #reading-progress-badge {
103
      width: 1.75rem;
104
      height: 1.75rem;
105
    }
106

107
    #reading-progress-pct {
108
      font-size: 0.5rem;
109
    }
110
  }