From 0a603bca6990f1b03fc845033e3d2629e7d67288 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 17 Mar 2026 21:35:47 +0000
Subject: [PATCH 1/5] Improve no-layout diagnostics and default feasible
 diameter

Co-authored-by: TaylorHere <TaylorHere@users.noreply.github.com>
---
 archery/functions/api/layout.ts |  4 +--
 archery/shared/layout.ts        | 51 +++++++++++++++++++++++++++++++++
 archery/src/main.ts             |  5 ++--
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/archery/functions/api/layout.ts b/archery/functions/api/layout.ts
index ca919be..42ef975 100644
--- a/archery/functions/api/layout.ts
+++ b/archery/functions/api/layout.ts
@@ -1,4 +1,4 @@
-import { solveOptimalLayout, validateInput, type LayoutInput } from '../../shared/layout';
+import { diagnoseNoLayoutReason, solveOptimalLayout, validateInput, type LayoutInput } from '../../shared/layout';
 
 interface JsonPayload {
   pageWidthMm?: unknown;
@@ -34,7 +34,7 @@ export const onRequestPost: PagesFunction = async (context) => {
       return json({
         ok: false,
         layout: null,
-        reason: '当前参数不存在满足严格对称约束的 (n, m, s) 组合',
+        reason: diagnoseNoLayoutReason(input),
       });
     }
 
diff --git a/archery/shared/layout.ts b/archery/shared/layout.ts
index e1132d2..40ad722 100644
--- a/archery/shared/layout.ts
+++ b/archery/shared/layout.ts
@@ -114,6 +114,57 @@ export function solveOptimalLayout(input: LayoutInput): LayoutSolution | null {
   return best;
 }
 
+export function diagnoseNoLayoutReason(input: LayoutInput): string {
+  const validation = validateInput(input);
+  if (!validation.ok) {
+    return validation.reason ?? '参数无效';
+  }
+
+  const W = input.pageWidthMm;
+  const H = input.pageHeightMm;
+  const D = input.targetDiameterMm;
+  const sMin = input.minSpacingMm;
+
+  // s > 0 时，必须满足 n·D < W 且 m·D < H。
+  const maxColumnsWithPositiveSpacing = Math.floor((W - EPS) / D);
+  const maxRowsWithPositiveSpacing = Math.floor((H - EPS) / D);
+  if (maxColumnsWithPositiveSpacing < 1 || maxRowsWithPositiveSpacing < 1) {
+    return '标靶直径过大：页面至少有一个方向连 1 个标靶都无法留出正间距。';
+  }
+
+  let hasExactSymmetricPair = false;
+  let maxFeasibleSpacing = -Infinity;
+
+  for (let n = 1; n <= maxColumnsWithPositiveSpacing; n += 1) {
+    for (let m = 1; m <= maxRowsWithPositiveSpacing; m += 1) {
+      const spacingFromWidth = (W - n * D) / (n + 1);
+      const spacingFromHeight = (H - m * D) / (m + 1);
+
+      if (spacingFromWidth <= EPS || spacingFromHeight <= EPS) {
+        continue;
+      }
+
+      if (Math.abs(spacingFromWidth - spacingFromHeight) > EPS) {
+        continue;
+      }
+
+      hasExactSymmetricPair = true;
+      const spacingMm = (spacingFromWidth + spacingFromHeight) / 2;
+      if (spacingMm > maxFeasibleSpacing) {
+        maxFeasibleSpacing = spacingMm;
+      }
+    }
+  }
+
+  if (!hasExactSymmetricPair) {
+    return '当前页面尺寸与直径组合不存在“同一 s 同时满足宽高公式”的严格对称解（与 s_min 无关）。请优先调整直径 D 或页面尺寸。';
+  }
+
+  return `存在严格对称解，但可行间距上限约为 ${maxFeasibleSpacing.toFixed(4)} mm，小于当前 s_min=${sMin.toFixed(
+    4,
+  )} mm。请减小 s_min。`;
+}
+
 export function getTargetCenterMm(
   col: number,
   row: number,
diff --git a/archery/src/main.ts b/archery/src/main.ts
index 5682a07..d1b3806 100644
--- a/archery/src/main.ts
+++ b/archery/src/main.ts
@@ -1,6 +1,7 @@
 import './style.css';
 import { exportArcheryPdf } from './pdf';
 import {
+  diagnoseNoLayoutReason,
   PAGE_PRESETS_MM,
   getTargetCenterMm,
   ringColorByIndex,
@@ -46,7 +47,7 @@ app.innerHTML = `
 
         <label>
           标靶直径 D (mm)
-          <input id="diameter" type="number" step="0.1" min="1" value="28" />
+          <input id="diameter" type="number" step="0.1" min="1" value="22" />
         </label>
 
         <label>
@@ -196,7 +197,7 @@ function recalculate(): void {
     refs.outM.textContent = '-';
     refs.outS.textContent = '-';
     refs.outTotal.textContent = '0';
-    refs.status.textContent = '当前参数无可行排布。可尝试减小 D、减小 s_min 或增大页面尺寸。';
+    refs.status.textContent = diagnoseNoLayoutReason(input);
     renderSvgPreview(null, input);
     return;
   }

From bdb7b7586653e344a56a121aad7812b630ba6e16 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 17 Mar 2026 21:45:09 +0000
Subject: [PATCH 2/5] Suggest nearby feasible parameters on no-layout

Co-authored-by: TaylorHere <TaylorHere@users.noreply.github.com>
---
 archery/shared/layout.ts | 82 ++++++++++++++++++++++++++++++++++++++++
 archery/src/main.ts      | 20 +++++++++-
 2 files changed, 101 insertions(+), 1 deletion(-)

diff --git a/archery/shared/layout.ts b/archery/shared/layout.ts
index 40ad722..553511e 100644
--- a/archery/shared/layout.ts
+++ b/archery/shared/layout.ts
@@ -14,6 +14,11 @@ export interface LayoutSolution {
   totalTargets: number;
 }
 
+export interface NearbyLayoutSuggestion {
+  diameterMm: number;
+  layout: LayoutSolution;
+}
+
 export interface ValidationResult {
   ok: boolean;
   reason?: string;
@@ -165,6 +170,83 @@ export function diagnoseNoLayoutReason(input: LayoutInput): string {
   )} mm。请减小 s_min。`;
 }
 
+export function suggestNearbyFeasibleLayouts(
+  input: LayoutInput,
+  options?: {
+    limit?: number;
+    stepMm?: number;
+    maxDeltaMm?: number;
+    minDiameterMm?: number;
+  },
+): NearbyLayoutSuggestion[] {
+  const pageValidation: Array<number> = [input.pageWidthMm, input.pageHeightMm, input.minSpacingMm];
+  for (const value of pageValidation) {
+    if (!Number.isFinite(value) || value <= 0) {
+      return [];
+    }
+  }
+
+  const limit = Math.max(1, Math.round(options?.limit ?? 3));
+  const stepMm = Math.max(0.01, options?.stepMm ?? 0.1);
+  const maxDeltaMm = Math.max(stepMm, options?.maxDeltaMm ?? 20);
+  const minDiameterMm = Math.max(0.1, options?.minDiameterMm ?? 1);
+  const maxDiameterMm = Math.min(input.pageWidthMm, input.pageHeightMm) - input.minSpacingMm - EPS;
+  if (maxDiameterMm < minDiameterMm) {
+    return [];
+  }
+
+  const baseDiameter = Number.isFinite(input.targetDiameterMm) ? input.targetDiameterMm : minDiameterMm;
+  const visited = new Set<string>();
+  const results: NearbyLayoutSuggestion[] = [];
+
+  const tryDiameter = (diameterMm: number): void => {
+    const normalized = Number(diameterMm.toFixed(4));
+    if (normalized < minDiameterMm - EPS || normalized > maxDiameterMm + EPS) {
+      return;
+    }
+    const key = normalized.toFixed(4);
+    if (visited.has(key)) {
+      return;
+    }
+    visited.add(key);
+
+    const layout = solveOptimalLayout({
+      ...input,
+      targetDiameterMm: normalized,
+    });
+    if (layout) {
+      results.push({ diameterMm: normalized, layout });
+    }
+  };
+
+  const stepCount = Math.ceil(maxDeltaMm / stepMm);
+  for (let i = 0; i <= stepCount && results.length < limit; i += 1) {
+    if (i === 0) {
+      tryDiameter(baseDiameter);
+      continue;
+    }
+
+    const delta = i * stepMm;
+    tryDiameter(baseDiameter - delta);
+    if (results.length >= limit) {
+      break;
+    }
+    tryDiameter(baseDiameter + delta);
+  }
+
+  return results.sort((a, b) => {
+    const deltaA = Math.abs(a.diameterMm - baseDiameter);
+    const deltaB = Math.abs(b.diameterMm - baseDiameter);
+    if (Math.abs(deltaA - deltaB) > EPS) {
+      return deltaA - deltaB;
+    }
+    if (a.layout.totalTargets !== b.layout.totalTargets) {
+      return b.layout.totalTargets - a.layout.totalTargets;
+    }
+    return b.layout.spacingMm - a.layout.spacingMm;
+  });
+}
+
 export function getTargetCenterMm(
   col: number,
   row: number,
diff --git a/archery/src/main.ts b/archery/src/main.ts
index d1b3806..c8d9372 100644
--- a/archery/src/main.ts
+++ b/archery/src/main.ts
@@ -6,6 +6,7 @@ import {
   getTargetCenterMm,
   ringColorByIndex,
   solveOptimalLayout,
+  suggestNearbyFeasibleLayouts,
   type LayoutInput,
   type LayoutSolution,
   type PagePreset,
@@ -197,7 +198,24 @@ function recalculate(): void {
     refs.outM.textContent = '-';
     refs.outS.textContent = '-';
     refs.outTotal.textContent = '0';
-    refs.status.textContent = diagnoseNoLayoutReason(input);
+    const reason = diagnoseNoLayoutReason(input);
+    const suggestions = suggestNearbyFeasibleLayouts(input, {
+      limit: 3,
+      stepMm: 0.1,
+      maxDeltaMm: 20,
+      minDiameterMm: 1,
+    });
+    if (suggestions.length > 0) {
+      const formatted = suggestions
+        .map(
+          (item, idx) =>
+            `${idx + 1}) D=${item.diameterMm.toFixed(1)}mm（n=${item.layout.columns}, m=${item.layout.rows}, s=${item.layout.spacingMm.toFixed(2)}mm）`,
+        )
+        .join('；');
+      refs.status.textContent = `${reason} 附近可行参数建议：${formatted}`;
+    } else {
+      refs.status.textContent = `${reason} 附近 ±20mm 未找到可行直径，建议切换页面尺寸后重试。`;
+    }
     renderSvgPreview(null, input);
     return;
   }

From d7607b130f90195ec1424cd65b7deb14dc5c0cfc Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 17 Mar 2026 21:48:06 +0000
Subject: [PATCH 3/5] Auto-adjust related parameters to nearest feasible layout

Co-authored-by: TaylorHere <TaylorHere@users.noreply.github.com>
---
 archery/src/main.ts | 165 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 159 insertions(+), 6 deletions(-)

diff --git a/archery/src/main.ts b/archery/src/main.ts
index c8d9372..16ab3b4 100644
--- a/archery/src/main.ts
+++ b/archery/src/main.ts
@@ -14,6 +14,7 @@ import {
 
 const PX_PER_MM = 96 / 25.4;
 const DEFAULT_PAGE_PRESET: PagePreset = 'A4';
+const EPS = 1e-7;
 
 const app = document.querySelector<HTMLDivElement>('#app');
 if (!app) {
@@ -119,6 +120,8 @@ refs.pagePreset.value = DEFAULT_PAGE_PRESET;
 toggleCustomSizeInputs();
 recalculate();
 
+type EditedField = 'page' | 'customWidth' | 'customHeight' | 'diameter' | 'minSpacing' | 'other';
+
 for (const el of [
   refs.pagePreset,
   refs.customWidth,
@@ -130,11 +133,12 @@ for (const el of [
   refs.zoom,
 ]) {
   el.addEventListener('input', () => {
+    const editedField = resolveEditedField(el);
     if (el === refs.pagePreset) {
       applyPresetToCustomInputs();
       toggleCustomSizeInputs();
     }
-    recalculate();
+    recalculate(editedField);
   });
 }
 
@@ -184,11 +188,22 @@ refs.verifyApiBtn.addEventListener('click', async () => {
   }
 });
 
-function recalculate(): void {
-  const pageSize = getPageSize();
-  const input = buildLayoutInput();
-  const layout = solveOptimalLayout(input);
+function recalculate(editedField: EditedField = 'other'): void {
+  let input = buildLayoutInput();
+  let layout = solveOptimalLayout(input);
+  let autoAdjustMessage = '';
+
+  if (!layout && editedField !== 'other') {
+    const adjusted = autoAdjustToFeasible(input, editedField);
+    if (adjusted) {
+      autoAdjustMessage = adjusted;
+      input = buildLayoutInput();
+      layout = solveOptimalLayout(input);
+    }
+  }
+
   currentLayout = layout;
+  const pageSize = getPageSize();
 
   refs.zoomLabel.textContent = `${Math.round(getPositiveNumber(refs.zoom))}%`;
   refs.outPage.textContent = `${pageSize.widthMm.toFixed(1)} × ${pageSize.heightMm.toFixed(1)} mm`;
@@ -224,10 +239,148 @@ function recalculate(): void {
   refs.outM.textContent = `${layout.rows}`;
   refs.outS.textContent = layout.spacingMm.toFixed(4);
   refs.outTotal.textContent = `${layout.totalTargets}`;
-  refs.status.textContent = '已完成本地最优排布计算。';
+  refs.status.textContent = autoAdjustMessage ? `${autoAdjustMessage} 已自动完成可行排布。` : '已完成本地最优排布计算。';
   renderSvgPreview(layout, input);
 }
 
+function autoAdjustToFeasible(input: LayoutInput, editedField: EditedField): string | null {
+  if (editedField !== 'minSpacing') {
+    const maxSpacing = getMaxStrictSpacingForCurrentDiameter(input);
+    if (maxSpacing !== null && maxSpacing + EPS < input.minSpacingMm) {
+      const newMinSpacing = Math.max(0.1, Number(maxSpacing.toFixed(4)));
+      refs.minSpacing.value = `${newMinSpacing}`;
+      return `已自动将 s_min 调整为 ${newMinSpacing.toFixed(4)} mm。`;
+    }
+  }
+
+  if (editedField !== 'diameter') {
+    const [nearest] = suggestNearbyFeasibleLayouts(input, {
+      limit: 1,
+      stepMm: 0.1,
+      maxDeltaMm: 40,
+      minDiameterMm: 1,
+    });
+    if (nearest) {
+      refs.diameter.value = `${nearest.diameterMm.toFixed(1)}`;
+      return `已自动将 D 调整为 ${nearest.diameterMm.toFixed(1)} mm。`;
+    }
+  }
+
+  const customPage = suggestNearestCustomPageForFixedDiameter(input);
+  if (!customPage) {
+    return null;
+  }
+
+  refs.pagePreset.value = 'custom';
+  refs.customWidth.value = `${customPage.widthMm.toFixed(1)}`;
+  refs.customHeight.value = `${customPage.heightMm.toFixed(1)}`;
+  toggleCustomSizeInputs();
+
+  return `已自动切换为自定义页面 ${customPage.widthMm.toFixed(1)} × ${customPage.heightMm.toFixed(1)} mm。`;
+}
+
+function getMaxStrictSpacingForCurrentDiameter(input: LayoutInput): number | null {
+  const W = input.pageWidthMm;
+  const H = input.pageHeightMm;
+  const D = input.targetDiameterMm;
+  if (!Number.isFinite(W) || !Number.isFinite(H) || !Number.isFinite(D) || W <= 0 || H <= 0 || D <= 0) {
+    return null;
+  }
+
+  const maxColumns = Math.floor((W - EPS) / D);
+  const maxRows = Math.floor((H - EPS) / D);
+  if (maxColumns < 1 || maxRows < 1) {
+    return null;
+  }
+
+  let maxSpacing = -Infinity;
+  for (let n = 1; n <= maxColumns; n += 1) {
+    for (let m = 1; m <= maxRows; m += 1) {
+      const spacingFromWidth = (W - n * D) / (n + 1);
+      const spacingFromHeight = (H - m * D) / (m + 1);
+      if (spacingFromWidth <= EPS || spacingFromHeight <= EPS) {
+        continue;
+      }
+      if (Math.abs(spacingFromWidth - spacingFromHeight) > EPS) {
+        continue;
+      }
+      const spacingMm = (spacingFromWidth + spacingFromHeight) / 2;
+      if (spacingMm > maxSpacing) {
+        maxSpacing = spacingMm;
+      }
+    }
+  }
+
+  return Number.isFinite(maxSpacing) ? maxSpacing : null;
+}
+
+function suggestNearestCustomPageForFixedDiameter(
+  input: LayoutInput,
+): { widthMm: number; heightMm: number } | null {
+  const W = input.pageWidthMm;
+  const H = input.pageHeightMm;
+  const D = input.targetDiameterMm;
+  const s = input.minSpacingMm;
+  if (!Number.isFinite(W) || !Number.isFinite(H) || !Number.isFinite(D) || !Number.isFinite(s)) {
+    return null;
+  }
+  if (W <= 0 || H <= 0 || D <= 0 || s <= 0) {
+    return null;
+  }
+
+  const nApprox = Math.max(1, Math.round((W - s) / (D + s)));
+  const mApprox = Math.max(1, Math.round((H - s) / (D + s)));
+  const nMin = Math.max(1, nApprox - 8);
+  const nMax = nApprox + 8;
+  const mMin = Math.max(1, mApprox - 8);
+  const mMax = mApprox + 8;
+
+  let best: { widthMm: number; heightMm: number; score: number; total: number } | null = null;
+  for (let n = nMin; n <= nMax; n += 1) {
+    for (let m = mMin; m <= mMax; m += 1) {
+      const widthMm = n * D + (n + 1) * s;
+      const heightMm = m * D + (m + 1) * s;
+      if (widthMm <= 0 || heightMm <= 0) {
+        continue;
+      }
+
+      const score = Math.abs(widthMm - W) + Math.abs(heightMm - H);
+      const total = n * m;
+      if (
+        !best ||
+        score < best.score - EPS ||
+        (Math.abs(score - best.score) <= EPS && total > best.total)
+      ) {
+        best = { widthMm, heightMm, score, total };
+      }
+    }
+  }
+
+  if (!best) {
+    return null;
+  }
+  return { widthMm: best.widthMm, heightMm: best.heightMm };
+}
+
+function resolveEditedField(el: HTMLElement): EditedField {
+  if (el === refs.pagePreset) {
+    return 'page';
+  }
+  if (el === refs.customWidth) {
+    return 'customWidth';
+  }
+  if (el === refs.customHeight) {
+    return 'customHeight';
+  }
+  if (el === refs.diameter) {
+    return 'diameter';
+  }
+  if (el === refs.minSpacing) {
+    return 'minSpacing';
+  }
+  return 'other';
+}
+
 function renderSvgPreview(layout: LayoutSolution | null, input: LayoutInput): void {
   const zoom = getPositiveNumber(refs.zoom) / 100;
   const widthPx = input.pageWidthMm * PX_PER_MM * zoom;

From 71ca8bde67b54577680cea70fbaf4fae1c80426c Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 17 Mar 2026 21:51:19 +0000
Subject: [PATCH 4/5] Add color target mode and ring score display options

Co-authored-by: TaylorHere <TaylorHere@users.noreply.github.com>
---
 archery/shared/layout.ts | 41 +++++++++++++++++++++++
 archery/src/main.ts      | 71 ++++++++++++++++++++++++++++++++++++----
 archery/src/pdf.ts       | 67 ++++++++++++++++++++++++++++++++-----
 3 files changed, 164 insertions(+), 15 deletions(-)

diff --git a/archery/shared/layout.ts b/archery/shared/layout.ts
index 553511e..cff5b8b 100644
--- a/archery/shared/layout.ts
+++ b/archery/shared/layout.ts
@@ -1,4 +1,5 @@
 export type PagePreset = 'A4' | 'A3' | 'custom';
+export type TargetColorMode = 'bw' | 'color';
 
 export interface LayoutInput {
   pageWidthMm: number;
@@ -263,3 +264,43 @@ export function ringColorByIndex(ringIndexFromOuter: number, startWithBlack: boo
   const isBlack = startWithBlack ? ringIndexFromOuter % 2 === 0 : ringIndexFromOuter % 2 !== 0;
   return isBlack ? '#000000' : '#FFFFFF';
 }
+
+export function ringScoreByIndex(ringIndexFromOuter: number, ringCount: number): number {
+  const safeRingCount = Math.max(1, Math.round(ringCount));
+  return safeRingCount - ringIndexFromOuter;
+}
+
+export function ringFillColor(
+  ringIndexFromOuter: number,
+  ringCount: number,
+  colorMode: TargetColorMode,
+  startWithBlack: boolean,
+): string {
+  if (colorMode === 'bw') {
+    return ringColorByIndex(ringIndexFromOuter, startWithBlack);
+  }
+
+  // 经典环靶配色（按分值分段）：1-2 白，3-4 黑，5-6 蓝，7-8 红，9+ 黄
+  const score = ringScoreByIndex(ringIndexFromOuter, ringCount);
+  if (score >= 9) {
+    return '#facc15';
+  }
+  if (score >= 7) {
+    return '#dc2626';
+  }
+  if (score >= 5) {
+    return '#2563eb';
+  }
+  if (score >= 3) {
+    return '#000000';
+  }
+  return '#ffffff';
+}
+
+export function ringScoreTextColor(fillHex: string): '#000000' | '#FFFFFF' {
+  const hex = fillHex.toLowerCase();
+  if (hex === '#000000' || hex === '#2563eb' || hex === '#dc2626') {
+    return '#FFFFFF';
+  }
+  return '#000000';
+}
diff --git a/archery/src/main.ts b/archery/src/main.ts
index 16ab3b4..e99fad4 100644
--- a/archery/src/main.ts
+++ b/archery/src/main.ts
@@ -4,12 +4,15 @@ import {
   diagnoseNoLayoutReason,
   PAGE_PRESETS_MM,
   getTargetCenterMm,
-  ringColorByIndex,
+  ringFillColor,
+  ringScoreByIndex,
+  ringScoreTextColor,
   solveOptimalLayout,
   suggestNearbyFeasibleLayouts,
   type LayoutInput,
   type LayoutSolution,
   type PagePreset,
+  type TargetColorMode,
 } from '../shared/layout';
 
 const PX_PER_MM = 96 / 25.4;
@@ -66,6 +69,19 @@ app.innerHTML = `
           <input id="checkerboard" type="checkbox" checked />
           黑白棋盘交替模式
         </label>
+
+        <label>
+          靶面颜色
+          <select id="target-color-mode">
+            <option value="bw">黑白靶</option>
+            <option value="color">彩色靶</option>
+          </select>
+        </label>
+
+        <label class="inline">
+          <input id="show-ring-scores" type="checkbox" />
+          显示环分数
+        </label>
       </form>
 
       <div class="controls">
@@ -102,6 +118,8 @@ const refs = {
   minSpacing: getEl<HTMLInputElement>('min-spacing'),
   ringCount: getEl<HTMLInputElement>('ring-count'),
   checkerboard: getEl<HTMLInputElement>('checkerboard'),
+  targetColorMode: getEl<HTMLSelectElement>('target-color-mode'),
+  showRingScores: getEl<HTMLInputElement>('show-ring-scores'),
   zoom: getEl<HTMLInputElement>('zoom'),
   zoomLabel: getEl<HTMLSpanElement>('zoom-label'),
   previewStage: getEl<HTMLDivElement>('preview-stage'),
@@ -117,7 +135,9 @@ const refs = {
 
 let currentLayout: LayoutSolution | null = null;
 refs.pagePreset.value = DEFAULT_PAGE_PRESET;
+refs.targetColorMode.value = 'bw';
 toggleCustomSizeInputs();
+toggleCheckerboardAvailability();
 recalculate();
 
 type EditedField = 'page' | 'customWidth' | 'customHeight' | 'diameter' | 'minSpacing' | 'other';
@@ -130,6 +150,8 @@ for (const el of [
   refs.minSpacing,
   refs.ringCount,
   refs.checkerboard,
+  refs.targetColorMode,
+  refs.showRingScores,
   refs.zoom,
 ]) {
   el.addEventListener('input', () => {
@@ -138,6 +160,9 @@ for (const el of [
       applyPresetToCustomInputs();
       toggleCustomSizeInputs();
     }
+    if (el === refs.targetColorMode) {
+      toggleCheckerboardAvailability();
+    }
     recalculate(editedField);
   });
 }
@@ -155,6 +180,8 @@ refs.downloadBtn.addEventListener('click', async () => {
     diameterMm: getPositiveNumber(refs.diameter),
     ringCount: getPositiveInteger(refs.ringCount),
     checkerboardEnabled: refs.checkerboard.checked,
+    colorMode: getTargetColorMode(),
+    showRingScores: refs.showRingScores.checked,
     layout: currentLayout,
   });
   refs.status.textContent = 'PDF 已生成：矢量图可直接打印，请使用 100% 缩放。';
@@ -396,8 +423,11 @@ function renderSvgPreview(layout: LayoutSolution | null, input: LayoutInput): vo
   }
 
   const ringCount = getPositiveInteger(refs.ringCount);
-  const checkerboardEnabled = refs.checkerboard.checked;
+  const colorMode = getTargetColorMode();
+  const checkerboardEnabled = colorMode === 'bw' && refs.checkerboard.checked;
+  const showRingScores = refs.showRingScores.checked;
   const circles: string[] = [];
+  const scoreLabels: string[] = [];
 
   for (let row = 0; row < layout.rows; row += 1) {
     for (let col = 0; col < layout.columns; col += 1) {
@@ -405,11 +435,30 @@ function renderSvgPreview(layout: LayoutSolution | null, input: LayoutInput): vo
       const startWithBlack = checkerboardEnabled ? (row + col) % 2 === 0 : true;
 
       for (let ringIndex = 0; ringIndex < ringCount; ringIndex += 1) {
-        const radiusMm = (input.targetDiameterMm / 2) * ((ringCount - ringIndex) / ringCount);
-        const fill = ringColorByIndex(ringIndex, startWithBlack);
-        const outerStroke = ringIndex === 0 ? ' stroke="#000" stroke-width="0.15"' : '';
+        const outerRadiusMm = (input.targetDiameterMm / 2) * ((ringCount - ringIndex) / ringCount);
+        const innerRadiusMm =
+          ringIndex === ringCount - 1 ? 0 : (input.targetDiameterMm / 2) * ((ringCount - ringIndex - 1) / ringCount);
+        const fill = ringFillColor(ringIndex, ringCount, colorMode, startWithBlack);
         circles.push(
-          `<circle cx="${center.x}" cy="${center.y}" r="${radiusMm}" fill="${fill}"${outerStroke} vector-effect="non-scaling-stroke" />`,
+          `<circle cx="${center.x}" cy="${center.y}" r="${outerRadiusMm}" fill="${fill}" stroke="#000" stroke-width="0.1" vector-effect="non-scaling-stroke" />`,
+        );
+
+        if (!showRingScores) {
+          continue;
+        }
+
+        const bandThicknessMm = outerRadiusMm - innerRadiusMm;
+        if (bandThicknessMm < 0.9) {
+          continue;
+        }
+
+        const score = ringScoreByIndex(ringIndex, ringCount);
+        const labelRadiusMm = (outerRadiusMm + innerRadiusMm) / 2;
+        const fontSizeMm = Math.min(3.2, Math.max(1.2, bandThicknessMm * 0.9));
+        const labelY = center.y - labelRadiusMm + fontSizeMm * 0.35;
+        const textColor = ringScoreTextColor(fill);
+        scoreLabels.push(
+          `<text x="${center.x}" y="${labelY}" text-anchor="middle" font-size="${fontSizeMm}" fill="${textColor}" font-weight="600">${score}</text>`,
         );
       }
     }
@@ -431,6 +480,7 @@ function renderSvgPreview(layout: LayoutSolution | null, input: LayoutInput): vo
     >
       <rect x="0" y="0" width="${input.pageWidthMm}" height="${input.pageHeightMm}" fill="#fff" stroke="#999" stroke-width="0.3"/>
       ${circles.join('')}
+      ${scoreLabels.join('')}
       <line x1="${rulerStart}" y1="${rulerY}" x2="${rulerStart + rulerLength}" y2="${rulerY}" stroke="#1d4ed8" stroke-width="0.25" />
       <line x1="${rulerStart}" y1="${rulerY - 1}" x2="${rulerStart}" y2="${rulerY + 1}" stroke="#1d4ed8" stroke-width="0.25" />
       <line x1="${rulerStart + rulerLength}" y1="${rulerY - 1}" x2="${rulerStart + rulerLength}" y2="${rulerY + 1}" stroke="#1d4ed8" stroke-width="0.25" />
@@ -468,6 +518,11 @@ function toggleCustomSizeInputs(): void {
   refs.customHeight.disabled = !isCustom;
 }
 
+function toggleCheckerboardAvailability(): void {
+  const isColorMode = getTargetColorMode() === 'color';
+  refs.checkerboard.disabled = isColorMode;
+}
+
 function applyPresetToCustomInputs(): void {
   const preset = refs.pagePreset.value as PagePreset;
   if (preset === 'custom') {
@@ -490,6 +545,10 @@ function getPositiveInteger(input: HTMLInputElement): number {
   return Math.max(1, Math.round(getPositiveNumber(input)));
 }
 
+function getTargetColorMode(): TargetColorMode {
+  return refs.targetColorMode.value === 'color' ? 'color' : 'bw';
+}
+
 function getEl<T extends HTMLElement>(id: string): T {
   const el = document.getElementById(id);
   if (!el) {
diff --git a/archery/src/pdf.ts b/archery/src/pdf.ts
index c12f633..cb14d46 100644
--- a/archery/src/pdf.ts
+++ b/archery/src/pdf.ts
@@ -1,5 +1,12 @@
 import { PDFDocument, rgb } from 'pdf-lib';
-import { getTargetCenterMm, ringColorByIndex, type LayoutSolution } from '../shared/layout';
+import {
+  getTargetCenterMm,
+  ringFillColor,
+  ringScoreByIndex,
+  ringScoreTextColor,
+  type LayoutSolution,
+  type TargetColorMode,
+} from '../shared/layout';
 
 export interface PdfRenderInput {
   pageWidthMm: number;
@@ -7,6 +14,8 @@ export interface PdfRenderInput {
   diameterMm: number;
   ringCount: number;
   checkerboardEnabled: boolean;
+  colorMode: TargetColorMode;
+  showRingScores: boolean;
   layout: LayoutSolution;
 }
 
@@ -40,20 +49,42 @@ export async function exportArcheryPdf(input: PdfRenderInput): Promise<void> {
       const centerXPt = mmToPt(center.x);
       const centerYPt = pageHeightPt - mmToPt(center.y);
 
-      const startWithBlack = input.checkerboardEnabled ? (row + col) % 2 === 0 : true;
+      const checkerboardEnabled = input.colorMode === 'bw' && input.checkerboardEnabled;
+      const startWithBlack = checkerboardEnabled ? (row + col) % 2 === 0 : true;
       for (let ringIndex = 0; ringIndex < input.ringCount; ringIndex += 1) {
-        const radiusMm = (input.diameterMm / 2) * ((input.ringCount - ringIndex) / input.ringCount);
-        const colorHex = ringColorByIndex(ringIndex, startWithBlack);
-        const isBlack = colorHex === '#000000';
-        const color = isBlack ? rgb(0, 0, 0) : rgb(1, 1, 1);
+        const outerRadiusMm = (input.diameterMm / 2) * ((input.ringCount - ringIndex) / input.ringCount);
+        const innerRadiusMm =
+          ringIndex === input.ringCount - 1 ? 0 : (input.diameterMm / 2) * ((input.ringCount - ringIndex - 1) / input.ringCount);
+        const colorHex = ringFillColor(ringIndex, input.ringCount, input.colorMode, startWithBlack);
+        const color = hexToRgbColor(colorHex);
 
         page.drawCircle({
           x: centerXPt,
           y: centerYPt,
-          size: mmToPt(radiusMm),
+          size: mmToPt(outerRadiusMm),
           color,
-          borderColor: ringIndex === 0 ? rgb(0, 0, 0) : undefined,
-          borderWidth: ringIndex === 0 ? mmToPt(0.15) : 0,
+          borderColor: rgb(0, 0, 0),
+          borderWidth: mmToPt(0.1),
+        });
+
+        if (!input.showRingScores) {
+          continue;
+        }
+
+        const bandThicknessMm = outerRadiusMm - innerRadiusMm;
+        if (bandThicknessMm < 0.9) {
+          continue;
+        }
+
+        const score = ringScoreByIndex(ringIndex, input.ringCount);
+        const labelRadiusMm = (outerRadiusMm + innerRadiusMm) / 2;
+        const fontSizeMm = Math.min(3.2, Math.max(1.2, bandThicknessMm * 0.9));
+        const labelColorHex = ringScoreTextColor(colorHex);
+        page.drawText(`${score}`, {
+          x: centerXPt - mmToPt(fontSizeMm * 0.35),
+          y: centerYPt + mmToPt(labelRadiusMm) - mmToPt(fontSizeMm * 0.35),
+          size: mmToPt(fontSizeMm),
+          color: hexToRgbColor(labelColorHex),
         });
       }
     }
@@ -63,3 +94,21 @@ export async function exportArcheryPdf(input: PdfRenderInput): Promise<void> {
   const fileName = `archery-${input.pageWidthMm}x${input.pageHeightMm}-${input.diameterMm}mm.pdf`;
   triggerBrowserDownload(bytes, fileName);
 }
+
+function hexToRgbColor(hex: string): ReturnType<typeof rgb> {
+  const normalized = hex.trim().toLowerCase();
+  switch (normalized) {
+    case '#000000':
+      return rgb(0, 0, 0);
+    case '#ffffff':
+      return rgb(1, 1, 1);
+    case '#2563eb':
+      return rgb(37 / 255, 99 / 255, 235 / 255);
+    case '#dc2626':
+      return rgb(220 / 255, 38 / 255, 38 / 255);
+    case '#facc15':
+      return rgb(250 / 255, 204 / 255, 21 / 255);
+    default:
+      return rgb(0, 0, 0);
+  }
+}

From 93c0097925c0056094b12ae27bb8d90159c7855d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 17 Mar 2026 21:54:35 +0000
Subject: [PATCH 5/5] Add auto-fill and target-count layout interaction

Co-authored-by: TaylorHere <TaylorHere@users.noreply.github.com>
---
 archery/functions/api/layout.ts |  4 ++
 archery/shared/layout.ts        | 97 +++++++++++++++++++++++++++------
 archery/src/main.ts             | 52 +++++++++++++++++-
 3 files changed, 135 insertions(+), 18 deletions(-)

diff --git a/archery/functions/api/layout.ts b/archery/functions/api/layout.ts
index 42ef975..67b32da 100644
--- a/archery/functions/api/layout.ts
+++ b/archery/functions/api/layout.ts
@@ -5,6 +5,8 @@ interface JsonPayload {
   pageHeightMm?: unknown;
   targetDiameterMm?: unknown;
   minSpacingMm?: unknown;
+  layoutMode?: unknown;
+  desiredTargets?: unknown;
 }
 
 export const onRequestPost: PagesFunction = async (context) => {
@@ -15,6 +17,8 @@ export const onRequestPost: PagesFunction = async (context) => {
       pageHeightMm: Number(payload.pageHeightMm),
       targetDiameterMm: Number(payload.targetDiameterMm),
       minSpacingMm: Number(payload.minSpacingMm),
+      layoutMode: payload.layoutMode === 'target_count' ? 'target_count' : 'auto_fill',
+      desiredTargets: payload.desiredTargets === undefined ? undefined : Number(payload.desiredTargets),
     };
 
     const validation = validateInput(input);
diff --git a/archery/shared/layout.ts b/archery/shared/layout.ts
index cff5b8b..f29c56d 100644
--- a/archery/shared/layout.ts
+++ b/archery/shared/layout.ts
@@ -1,11 +1,14 @@
 export type PagePreset = 'A4' | 'A3' | 'custom';
 export type TargetColorMode = 'bw' | 'color';
+export type LayoutMode = 'auto_fill' | 'target_count';
 
 export interface LayoutInput {
   pageWidthMm: number;
   pageHeightMm: number;
   targetDiameterMm: number;
   minSpacingMm: number;
+  layoutMode?: LayoutMode;
+  desiredTargets?: number;
 }
 
 export interface LayoutSolution {
@@ -46,6 +49,14 @@ export function validateInput(input: LayoutInput): ValidationResult {
     }
   }
 
+  const mode = normalizeLayoutMode(input.layoutMode);
+  if (mode === 'target_count') {
+    const desiredTargets = Number(input.desiredTargets);
+    if (!Number.isFinite(desiredTargets) || desiredTargets <= 0) {
+      return { ok: false, reason: '指定数量模式下 desiredTargets 必须是大于 0 的数字' };
+    }
+  }
+
   return { ok: true };
 }
 
@@ -66,7 +77,7 @@ export function solveOptimalLayout(input: LayoutInput): LayoutSolution | null {
     return null;
   }
 
-  let best: LayoutSolution | null = null;
+  const candidates: LayoutSolution[] = [];
 
   // 穷举整数列数 n、行数 m，严格约束同一个 s 同时满足宽高公式：
   // W = nD + (n+1)s
@@ -99,25 +110,20 @@ export function solveOptimalLayout(input: LayoutInput): LayoutSolution | null {
         totalTargets,
       };
 
-      if (!best) {
-        best = candidate;
-        continue;
-      }
-
-      // 主目标：最大化数量。并列时优先更大间距，再优先更多列（使预览更“横向密集”）。
-      if (
-        candidate.totalTargets > best.totalTargets ||
-        (candidate.totalTargets === best.totalTargets && candidate.spacingMm > best.spacingMm + EPS) ||
-        (candidate.totalTargets === best.totalTargets &&
-          Math.abs(candidate.spacingMm - best.spacingMm) <= EPS &&
-          candidate.columns > best.columns)
-      ) {
-        best = candidate;
-      }
+      candidates.push(candidate);
     }
   }
 
-  return best;
+  if (candidates.length === 0) {
+    return null;
+  }
+
+  const mode = normalizeLayoutMode(input.layoutMode);
+  if (mode === 'target_count') {
+    return pickClosestByDesiredTargets(candidates, Math.max(1, Math.round(Number(input.desiredTargets))));
+  }
+
+  return pickAutoFillBest(candidates);
 }
 
 export function diagnoseNoLayoutReason(input: LayoutInput): string {
@@ -304,3 +310,60 @@ export function ringScoreTextColor(fillHex: string): '#000000' | '#FFFFFF' {
   }
   return '#000000';
 }
+
+function normalizeLayoutMode(mode?: LayoutMode): LayoutMode {
+  return mode === 'target_count' ? 'target_count' : 'auto_fill';
+}
+
+function pickAutoFillBest(candidates: LayoutSolution[]): LayoutSolution {
+  let best = candidates[0];
+  for (let i = 1; i < candidates.length; i += 1) {
+    const candidate = candidates[i];
+    if (
+      candidate.totalTargets > best.totalTargets ||
+      (candidate.totalTargets === best.totalTargets && candidate.spacingMm > best.spacingMm + EPS) ||
+      (candidate.totalTargets === best.totalTargets &&
+        Math.abs(candidate.spacingMm - best.spacingMm) <= EPS &&
+        candidate.columns > best.columns)
+    ) {
+      best = candidate;
+    }
+  }
+  return best;
+}
+
+function pickClosestByDesiredTargets(candidates: LayoutSolution[], desiredTargets: number): LayoutSolution {
+  let best = candidates[0];
+  for (let i = 1; i < candidates.length; i += 1) {
+    const candidate = candidates[i];
+    const candidateDiff = Math.abs(candidate.totalTargets - desiredTargets);
+    const bestDiff = Math.abs(best.totalTargets - desiredTargets);
+    if (candidateDiff < bestDiff - EPS) {
+      best = candidate;
+      continue;
+    }
+    if (Math.abs(candidateDiff - bestDiff) > EPS) {
+      continue;
+    }
+
+    // 差距相同，优先不低于目标数量。
+    const candidateMeetsTarget = candidate.totalTargets >= desiredTargets;
+    const bestMeetsTarget = best.totalTargets >= desiredTargets;
+    if (candidateMeetsTarget && !bestMeetsTarget) {
+      best = candidate;
+      continue;
+    }
+    if (!candidateMeetsTarget && bestMeetsTarget) {
+      continue;
+    }
+
+    // 再并列时优先更大间距和更多列。
+    if (
+      candidate.spacingMm > best.spacingMm + EPS ||
+      (Math.abs(candidate.spacingMm - best.spacingMm) <= EPS && candidate.columns > best.columns)
+    ) {
+      best = candidate;
+    }
+  }
+  return best;
+}
diff --git a/archery/src/main.ts b/archery/src/main.ts
index e99fad4..8097641 100644
--- a/archery/src/main.ts
+++ b/archery/src/main.ts
@@ -2,6 +2,7 @@ import './style.css';
 import { exportArcheryPdf } from './pdf';
 import {
   diagnoseNoLayoutReason,
+  type LayoutMode,
   PAGE_PRESETS_MM,
   getTargetCenterMm,
   ringFillColor,
@@ -60,6 +61,19 @@ app.innerHTML = `
           <input id="min-spacing" type="number" step="0.1" min="0.1" value="3" />
         </label>
 
+        <label>
+          排布模式
+          <select id="layout-mode">
+            <option value="auto_fill">自动填满（最大数量）</option>
+            <option value="target_count">指定数量（尽量接近）</option>
+          </select>
+        </label>
+
+        <label>
+          目标数量
+          <input id="desired-targets" type="number" step="1" min="1" value="70" />
+        </label>
+
         <label>
           圆环数量
           <input id="ring-count" type="number" step="1" min="1" value="3" />
@@ -116,6 +130,8 @@ const refs = {
   customHeight: getEl<HTMLInputElement>('custom-height'),
   diameter: getEl<HTMLInputElement>('diameter'),
   minSpacing: getEl<HTMLInputElement>('min-spacing'),
+  layoutMode: getEl<HTMLSelectElement>('layout-mode'),
+  desiredTargets: getEl<HTMLInputElement>('desired-targets'),
   ringCount: getEl<HTMLInputElement>('ring-count'),
   checkerboard: getEl<HTMLInputElement>('checkerboard'),
   targetColorMode: getEl<HTMLSelectElement>('target-color-mode'),
@@ -135,8 +151,10 @@ const refs = {
 
 let currentLayout: LayoutSolution | null = null;
 refs.pagePreset.value = DEFAULT_PAGE_PRESET;
+refs.layoutMode.value = 'auto_fill';
 refs.targetColorMode.value = 'bw';
 toggleCustomSizeInputs();
+toggleDesiredTargetsInput();
 toggleCheckerboardAvailability();
 recalculate();
 
@@ -148,6 +166,8 @@ for (const el of [
   refs.customHeight,
   refs.diameter,
   refs.minSpacing,
+  refs.layoutMode,
+  refs.desiredTargets,
   refs.ringCount,
   refs.checkerboard,
   refs.targetColorMode,
@@ -163,6 +183,9 @@ for (const el of [
     if (el === refs.targetColorMode) {
       toggleCheckerboardAvailability();
     }
+    if (el === refs.layoutMode) {
+      toggleDesiredTargetsInput();
+    }
     recalculate(editedField);
   });
 }
@@ -266,7 +289,10 @@ function recalculate(editedField: EditedField = 'other'): void {
   refs.outM.textContent = `${layout.rows}`;
   refs.outS.textContent = layout.spacingMm.toFixed(4);
   refs.outTotal.textContent = `${layout.totalTargets}`;
-  refs.status.textContent = autoAdjustMessage ? `${autoAdjustMessage} 已自动完成可行排布。` : '已完成本地最优排布计算。';
+  const modeStatus = getLayoutModeStatus(layout);
+  refs.status.textContent = autoAdjustMessage
+    ? `${autoAdjustMessage} 已自动完成可行排布。${modeStatus}`
+    : `已完成本地最优排布计算。${modeStatus}`;
   renderSvgPreview(layout, input);
 }
 
@@ -504,11 +530,14 @@ function getPageSize(): { widthMm: number; heightMm: number } {
 
 function buildLayoutInput(): LayoutInput {
   const page = getPageSize();
+  const layoutMode = getLayoutMode();
   return {
     pageWidthMm: page.widthMm,
     pageHeightMm: page.heightMm,
     targetDiameterMm: getPositiveNumber(refs.diameter),
     minSpacingMm: getPositiveNumber(refs.minSpacing),
+    layoutMode,
+    desiredTargets: layoutMode === 'target_count' ? getPositiveInteger(refs.desiredTargets) : undefined,
   };
 }
 
@@ -518,6 +547,11 @@ function toggleCustomSizeInputs(): void {
   refs.customHeight.disabled = !isCustom;
 }
 
+function toggleDesiredTargetsInput(): void {
+  const isTargetCountMode = getLayoutMode() === 'target_count';
+  refs.desiredTargets.disabled = !isTargetCountMode;
+}
+
 function toggleCheckerboardAvailability(): void {
   const isColorMode = getTargetColorMode() === 'color';
   refs.checkerboard.disabled = isColorMode;
@@ -549,6 +583,22 @@ function getTargetColorMode(): TargetColorMode {
   return refs.targetColorMode.value === 'color' ? 'color' : 'bw';
 }
 
+function getLayoutMode(): LayoutMode {
+  return refs.layoutMode.value === 'target_count' ? 'target_count' : 'auto_fill';
+}
+
+function getLayoutModeStatus(layout: LayoutSolution): string {
+  if (getLayoutMode() !== 'target_count') {
+    return '';
+  }
+
+  const desired = getPositiveInteger(refs.desiredTargets);
+  if (layout.totalTargets === desired) {
+    return `已满足指定数量 ${desired}。`;
+  }
+  return `指定数量=${desired}，当前可行最接近数量=${layout.totalTargets}。`;
+}
+
 function getEl<T extends HTMLElement>(id: string): T {
   const el = document.getElementById(id);
   if (!el) {