fix(web): 病历快读分页点窗口化,病历多时不再横向溢出

每个病历一个点 → 病历多(13+)时溢出。改窗口化:最多 9 个点跟随当前居中,
首尾小点暗示更多,容器 overflow-hidden 兜底;精确位置由"第 N/M 次"文字给出。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/pac-web/src/components/plan-detail/emr-soap-view.tsx

@@ -50,6 +50,17 @@ export function EmrSoapView({ facts }: { facts: AdaptedFact[] }) {
   const prev = () => setIdx((i) => (i - 1 + total) % total);
   const next = () => setIdx((i) => (i + 1) % total);
 
+  // 圆点窗口化:病历再多也只显示最多 MAX_DOTS 个点(跟随当前居中),避免横向溢出。
+  const MAX_DOTS = 9;
+  const dotIdxs: number[] =
+    total <= MAX_DOTS
+      ? emrs.map((_, i) => i)
+      : Array.from({ length: MAX_DOTS }, (_, k) => {
+          const half = Math.floor(MAX_DOTS / 2);
+          const start = Math.max(0, Math.min(idx - half, total - MAX_DOTS));
+          return start + k;
+        });
+
   return (
     <div ref={containerRef} className="space-y-3">
       {/* 顶部 carousel 导航条 — 圆点 + N/M + 箭头 */}
@@ -65,19 +76,28 @@ export function EmrSoapView({ facts }: { facts: AdaptedFact[] }) {
             </svg>
           </button>
 
-          {/* 圆点 indicator */}
-          <div className="flex items-center gap-1.5 flex-1 justify-center">
-            {emrs.map((emr, i) => (
-              <button
-                key={emr.id}
-                onClick={() => setIdx(i)}
-                aria-label={`第 ${i + 1} 次接诊`}
-                className={cn(
-                  'h-1.5 rounded-full transition-all',
-                  i === idx ? 'w-6 bg-indigo-500' : 'w-1.5 bg-slate-300 hover:bg-slate-400',
-                )}
-              />
-            ))}
+          {/* 圆点 indicator(窗口化,最多 MAX_DOTS 个,首尾小点暗示还有更多) */}
+          <div className="flex items-center gap-1.5 flex-1 justify-center min-w-0 overflow-hidden">
+            {dotIdxs.map((i) => {
+              const moreEdge =
+                (i === dotIdxs[0] && i > 0) ||
+                (i === dotIdxs[dotIdxs.length - 1] && i < total - 1);
+              return (
+                <button
+                  key={emrs[i]!.id}
+                  onClick={() => setIdx(i)}
+                  aria-label={`第 ${i + 1} 次接诊`}
+                  className={cn(
+                    'h-1.5 rounded-full transition-all flex-none',
+                    i === idx
+                      ? 'w-6 bg-indigo-500'
+                      : moreEdge
+                        ? 'w-1 bg-slate-200'
+                        : 'w-1.5 bg-slate-300 hover:bg-slate-400',
+                  )}
+                />
+              );
+            })}
           </div>
 
           <div className="flex items-center gap-2 flex-none">