dsh-repeat-guard 0.1.2 → 0.1.3

package/lib/client.d.ts

@@ -1,8 +1,9 @@
 /**
  * 客户端设置页：在设置窗口左侧加一项"复读打断"。
  *
- * 面板里编辑两样东西——拦截短句表（一行一句）与连续命中阈值，两者都写宿主侧
- * 注册的 settings 命名空间，保存后宿主侧立即按新配置判定。
+ * 版式照着官方设置页来：顶部一行"左标题 + 右保存"，下面每项是一行
+ * （左标题与描述、右控件），样式全部用 dsh 的设计令牌 `--dsw-*`，
+ * 由本模块自己注入 `<style>`，与官方 feature（如 theme 的字号行）同款做法。
  *
  * 本文件由 scripts/build-client.mjs 用 esbuild 单独打包成单文件 bundle
  * （`lib/client.js`），不走 tsc 的 lib 输出。

package/lib/client.js

@@ -34,58 +34,235 @@ var __dshClientBundle = (() => {
   var import_react = __require("react");
   var import_jsx_runtime = __require("react/jsx-runtime");
   var SETTINGS_NS = "repeat-guard";
-  var inject = ["slots", "settingsScope"];
-  function apply(ctx) {
-    const scope = ctx.settingsScope.bind({ namespace: SETTINGS_NS });
-    function Form({ initial }) {
-      const [fragments, setFragments] = (0, import_react.useState)(() => (initial.fragments ?? []).join("\n"));
-      const [threshold, setThreshold] = (0, import_react.useState)(() => String(initial.threshold ?? 1));
-      const [message, setMessage] = (0, import_react.useState)("");
-      function save() {
-        const list = fragments.split("\n").map((line) => line.trim()).filter((line) => line !== "");
-        const count = Number(threshold);
-        setMessage("\u4FDD\u5B58\u4E2D\u2026");
-        scope.set("fragments", list).then(() => scope.set("threshold", count)).then(() => {
-          setMessage("\u5DF2\u4FDD\u5B58");
-        }).catch((error) => {
-          setMessage(`\u4FDD\u5B58\u5931\u8D25\uFF1A${String(error)}`);
-        });
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u8FDE\u7EED\u547D\u4E2D\u6B21\u6570" }),
+  var THRESHOLD_MIN = 1;
+  var THRESHOLD_MAX = 9;
+  var CSS = `
+.rg-root{display:flex;flex-direction:column;width:100%}
+.rg-head{display:flex;align-items:center;gap:12px;padding:2px 0 14px}
+.rg-headTitle{flex:1;min-width:0;color:var(--dsw-alias-label-primary);font-size:16px;font-weight:500;line-height:24px}
+.rg-headNote{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;white-space:nowrap}
+.rg-save{cursor:pointer;flex:none;height:32px;padding:0 16px;border:none;border-radius:16px;background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground);font-family:inherit;font-size:14px;line-height:22px}
+.rg-save:hover{background:var(--dsw-alias-button-primary-hover)}
+.rg-row{display:flex;align-items:center;gap:8px;padding:16px 0;border-bottom:.5px solid var(--dsw-alias-border-l2)}
+.rg-row--stack{flex-direction:column;align-items:stretch;gap:10px}
+.rg-rowText{display:flex;flex-direction:column;flex:1;gap:4px;min-width:0;padding-right:48px}
+.rg-rowTitle{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px}
+.rg-rowDesc{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px}
+.rg-control{display:inline-flex;align-items:center;gap:8px}
+.rg-stepper{position:relative;display:inline-flex;justify-content:center;align-items:center;min-width:72px;height:36px;border-radius:18px;background:var(--dsw-alias-bg-module-platform)}
+.rg-stepperValue{min-width:18px;text-align:center;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
+.rg-stepperUnit{color:var(--dsw-alias-label-secondary);font-size:14px;line-height:22px}
+.rg-arrows{position:absolute;right:8px;display:flex;flex-direction:column;gap:2px;opacity:0}
+.rg-stepper:hover .rg-arrows,.rg-stepper:focus-within .rg-arrows{opacity:1}
+.rg-arrow{display:inline-flex;justify-content:center;align-items:center;width:17px;height:12px;padding:0;border:none;border-radius:3px;cursor:pointer;color:var(--dsw-alias-label-primary);background:color-mix(in srgb, var(--dsw-alias-bg-layer-1) 75%, transparent)}
+.rg-arrow:hover:not(:disabled){background:var(--dsw-alias-bg-layer-1)}
+.rg-arrow:disabled{color:var(--dsw-alias-label-caption);cursor:default}
+.rg-list{display:flex;flex-direction:column;gap:2px;width:100%;max-height:300px;overflow-y:auto;padding:4px;border-radius:12px;background:var(--dsw-alias-bg-module-platform);box-sizing:border-box}
+.rg-item{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 12px;border-radius:8px;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary)}
+.rg-item:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.rg-itemText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rg-remove{flex:none;display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;padding:0;border:none;border-radius:12px;cursor:pointer;background:transparent;color:var(--dsw-alias-label-tertiary)}
+.rg-remove:hover{background:var(--dsw-alias-interactive-bg-hover-danger);color:var(--dsw-alias-state-error-primary)}
+.rg-empty{padding:10px 12px;color:var(--dsw-alias-label-caption);font-size:13px;line-height:20px}
+.rg-addRow{display:flex;align-items:center;gap:8px;width:100%}
+.rg-input{flex:1;min-width:0;height:36px;box-sizing:border-box;padding:0 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:transparent;color:var(--dsw-alias-label-primary);font-family:inherit;font-size:14px;line-height:22px}
+.rg-input:focus{outline:none;border-color:var(--dsw-alias-border-l4)}
+.rg-button{cursor:pointer;flex:none;height:32px;padding:0 14px;border:none;border-radius:16px;background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);font-family:inherit;font-size:14px;line-height:22px}
+.rg-button:hover{background:var(--dsw-alias-interactive-bg-active)}
+`;
+  var STYLE_TAG = "dsh-repeat-guard/panel.css";
+  function injectStyle() {
+    if (typeof document === "undefined" || document.querySelector(`style[data-plugin-css="${STYLE_TAG}"]`) !== null) {
+      return;
+    }
+    const tag = document.createElement("style");
+    tag.dataset.plugin = "dsh-repeat-guard";
+    tag.dataset.pluginCss = STYLE_TAG;
+    tag.textContent = CSS;
+    document.head.appendChild(tag);
+  }
+  function Stepper({ value, min, max, unit, label, onChange }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "rg-control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "rg-stepper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rg-stepperValue", children: value }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "rg-arrows", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
+            "button",
             {
-              type: "number",
-              value: threshold,
-              onChange: (event) => {
-                setThreshold(event.target.value);
-              }
+              type: "button",
+              className: "rg-arrow",
+              "aria-label": `\u589E\u5927${label}`,
+              disabled: value >= max,
+              onClick: () => {
+                onChange(value + 1);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "9", height: "9", viewBox: "0 0 9 9", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "path",
+                {
+                  d: "M1.4 6.2 4.5 3.1l3.1 3.1",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.4",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u586B 1 \u8868\u793A\u547D\u4E2D\u5373\u62E6\uFF1B\u586B n \u8868\u793A\u8FDE\u7740 n \u884C\u90FD\u547D\u4E2D\u624D\u62E6\u3002" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u62E6\u622A\u77ED\u53E5\uFF08\u4E00\u884C\u4E00\u53E5\uFF0C\u8FDE\u6807\u70B9\u4E00\u8D77\u5199\uFF09" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "textarea",
+            "button",
             {
-              rows: 16,
-              style: { width: "100%", fontFamily: "monospace" },
-              value: fragments,
-              onChange: (event) => {
-                setFragments(event.target.value);
-              }
+              type: "button",
+              className: "rg-arrow",
+              "aria-label": `\u51CF\u5C0F${label}`,
+              disabled: value <= min,
+              onClick: () => {
+                onChange(value - 1);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "9", height: "9", viewBox: "0 0 9 9", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "path",
+                {
+                  d: "M1.4 2.8 4.5 5.9l3.1-3.1",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.4",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
             }
           )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: save, children: "\u4FDD\u5B58" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: message })
         ] })
-      ] });
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rg-stepperUnit", children: unit })
+    ] });
+  }
+  function FragmentList({ items, draft, onDraft, onAdd, onRemove }) {
+    function handleKey(event) {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onAdd();
+      }
     }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rg-list", children: [
+        items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rg-empty", children: "\u8868\u662F\u7A7A\u7684\uFF0C\u4E0D\u4F1A\u62E6\u622A\u4EFB\u4F55\u77ED\u53E5\u3002" }) : null,
+        items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rg-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rg-itemText", children: item }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rg-remove",
+              "aria-label": `\u5220\u9664 ${item}`,
+              onClick: () => {
+                onRemove(index);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "path",
+                {
+                  d: "M3 3l6 6M9 3l-6 6",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.4",
+                  strokeLinecap: "round"
+                }
+              ) })
+            }
+          )
+        ] }, `${item}#${String(index)}`))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rg-addRow", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            className: "rg-input",
+            value: draft,
+            placeholder: "\u65B0\u589E\u77ED\u53E5\uFF0C\u8FDE\u6807\u70B9\u4E00\u8D77\u5199\uFF0C\u56DE\u8F66\u6DFB\u52A0",
+            onChange: (event) => {
+              onDraft(event.target.value);
+            },
+            onKeyDown: handleKey
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "rg-button", onClick: onAdd, children: "\u6DFB\u52A0" })
+      ] })
+    ] });
+  }
+  function Form({ initial, onSave }) {
+    const [items, setItems] = (0, import_react.useState)(() => initial.fragments ?? []);
+    const [count, setCount] = (0, import_react.useState)(() => initial.threshold ?? 1);
+    const [draft, setDraft] = (0, import_react.useState)("");
+    const [note, setNote] = (0, import_react.useState)("");
+    function add() {
+      const value = draft.trim();
+      if (value === "") {
+        return;
+      }
+      setItems([...items, value]);
+      setDraft("");
+      setNote("");
+    }
+    function remove(index) {
+      setItems(items.filter((_, at) => at !== index));
+      setNote("");
+    }
+    function save() {
+      setNote("\u4FDD\u5B58\u4E2D\u2026");
+      onSave(items, count).then(() => {
+        setNote("\u5DF2\u4FDD\u5B58");
+      }).catch((error) => {
+        setNote(`\u4FDD\u5B58\u5931\u8D25\uFF1A${String(error)}`);
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rg-root", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rg-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rg-headTitle", children: "\u590D\u8BFB\u6253\u65AD" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rg-headNote", children: note }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "rg-save", onClick: save, children: "\u4FDD\u5B58" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rg-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rg-rowText", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rg-rowTitle", children: "\u8FDE\u7EED\u547D\u4E2D\u6B21\u6570" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rg-rowDesc", children: "\u8FDE\u7740\u51E0\u4E2A\u77ED\u53E5\u884C\u547D\u4E2D\u624D\u62E6\u622A\uFF1B\u586B 1 \u8868\u793A\u53D1\u73B0\u5373\u62E6" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Stepper,
+          {
+            value: count,
+            min: THRESHOLD_MIN,
+            max: THRESHOLD_MAX,
+            unit: "\u6B21",
+            label: "\u8FDE\u7EED\u547D\u4E2D\u6B21\u6570",
+            onChange: (next) => {
+              setCount(next);
+              setNote("");
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rg-row rg-row--stack", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rg-rowText", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rg-rowTitle", children: "\u62E6\u622A\u77ED\u53E5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rg-rowDesc", children: "\u4E00\u884C\u4E00\u53E5\uFF0C\u8FDE\u6807\u70B9\u4E00\u8D77\u5199\uFF1B\u53EA\u7B97\u72EC\u5360\u4E00\u884C\u7684\u6574\u884C\u5339\u914D" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          FragmentList,
+          {
+            items,
+            draft,
+            onDraft: setDraft,
+            onAdd: add,
+            onRemove: remove
+          }
+        )
+      ] })
+    ] });
+  }
+  var inject = ["slots", "settingsScope"];
+  function apply(ctx) {
+    injectStyle();
+    const scope = ctx.settingsScope.bind({ namespace: SETTINGS_NS });
     function Panel() {
       const [snapshot, setSnapshot] = (0, import_react.useState)(() => scope.getSnapshot());
       (0, import_react.useEffect)(
@@ -96,9 +273,18 @@ var __dshClientBundle = (() => {
       );
       const value = snapshot.value;
       if (snapshot.status !== "ready" || value === void 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: `\u914D\u7F6E\u5C1A\u672A\u5C31\u7EEA\uFF08${snapshot.status}\uFF09` });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rg-empty", children: `\u914D\u7F6E\u5C1A\u672A\u5C31\u7EEA\uFF08${snapshot.status}\uFF09` });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Form, { initial: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Form,
+        {
+          initial: value,
+          onSave: async (fragments, threshold) => {
+            await scope.set("fragments", [...fragments]);
+            await scope.set("threshold", threshold);
+          }
+        }
+      );
     }
     ctx.slots.inject(
       "settings.section",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-repeat-guard",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "流式输出退化拦截：检测碎片复读，掐断本次生成并提醒模型直接执行工具调用",
   "type": "module",
   "main": "lib/index.js",

package/src/client.tsx

@@ -1,8 +1,9 @@
 /**
  * 客户端设置页：在设置窗口左侧加一项"复读打断"。
  *
- * 面板里编辑两样东西——拦截短句表（一行一句）与连续命中阈值，两者都写宿主侧
- * 注册的 settings 命名空间，保存后宿主侧立即按新配置判定。
+ * 版式照着官方设置页来：顶部一行"左标题 + 右保存"，下面每项是一行
+ * （左标题与描述、右控件），样式全部用 dsh 的设计令牌 `--dsw-*`，
+ * 由本模块自己注入 `<style>`，与官方 feature（如 theme 的字号行）同款做法。
  *
  * 本文件由 scripts/build-client.mjs 用 esbuild 单独打包成单文件 bundle
  * （`lib/client.js`），不走 tsc 的 lib 输出。
@@ -13,11 +14,15 @@ import type { Context } from '@deepseek-ai/cordis';
 // slots 与 settingsScope 两个客户端服务）。
 import type {} from '@deepseek-ai/dsh-client-ui-renderer/client';
 import type {} from '@deepseek-ai/dsh-client-ui-settings/client';
-import { useEffect, useState, type ReactElement } from 'react';
+import { useEffect, useState, type KeyboardEvent, type ReactElement } from 'react';
 
 /** settings 命名空间，必须与宿主侧 config.ts 的 SETTINGS_NS 逐字一致。 */
 const SETTINGS_NS = 'repeat-guard';
 
+/** 阈值步进器的取值边界。 */
+const THRESHOLD_MIN = 1;
+const THRESHOLD_MAX = 9;
+
 /** 本插件配置节选。 */
 interface RepeatGuardSettings {
   /** 拦截短句表。 */
@@ -26,6 +31,263 @@ interface RepeatGuardSettings {
   threshold?: number;
 }
 
+/** 样式。令牌名取自 dsh 前端已发布的设计令牌表。 */
+const CSS = `
+.rg-root{display:flex;flex-direction:column;width:100%}
+.rg-head{display:flex;align-items:center;gap:12px;padding:2px 0 14px}
+.rg-headTitle{flex:1;min-width:0;color:var(--dsw-alias-label-primary);font-size:16px;font-weight:500;line-height:24px}
+.rg-headNote{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;white-space:nowrap}
+.rg-save{cursor:pointer;flex:none;height:32px;padding:0 16px;border:none;border-radius:16px;background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground);font-family:inherit;font-size:14px;line-height:22px}
+.rg-save:hover{background:var(--dsw-alias-button-primary-hover)}
+.rg-row{display:flex;align-items:center;gap:8px;padding:16px 0;border-bottom:.5px solid var(--dsw-alias-border-l2)}
+.rg-row--stack{flex-direction:column;align-items:stretch;gap:10px}
+.rg-rowText{display:flex;flex-direction:column;flex:1;gap:4px;min-width:0;padding-right:48px}
+.rg-rowTitle{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px}
+.rg-rowDesc{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px}
+.rg-control{display:inline-flex;align-items:center;gap:8px}
+.rg-stepper{position:relative;display:inline-flex;justify-content:center;align-items:center;min-width:72px;height:36px;border-radius:18px;background:var(--dsw-alias-bg-module-platform)}
+.rg-stepperValue{min-width:18px;text-align:center;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
+.rg-stepperUnit{color:var(--dsw-alias-label-secondary);font-size:14px;line-height:22px}
+.rg-arrows{position:absolute;right:8px;display:flex;flex-direction:column;gap:2px;opacity:0}
+.rg-stepper:hover .rg-arrows,.rg-stepper:focus-within .rg-arrows{opacity:1}
+.rg-arrow{display:inline-flex;justify-content:center;align-items:center;width:17px;height:12px;padding:0;border:none;border-radius:3px;cursor:pointer;color:var(--dsw-alias-label-primary);background:color-mix(in srgb, var(--dsw-alias-bg-layer-1) 75%, transparent)}
+.rg-arrow:hover:not(:disabled){background:var(--dsw-alias-bg-layer-1)}
+.rg-arrow:disabled{color:var(--dsw-alias-label-caption);cursor:default}
+.rg-list{display:flex;flex-direction:column;gap:2px;width:100%;max-height:300px;overflow-y:auto;padding:4px;border-radius:12px;background:var(--dsw-alias-bg-module-platform);box-sizing:border-box}
+.rg-item{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 12px;border-radius:8px;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary)}
+.rg-item:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.rg-itemText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rg-remove{flex:none;display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;padding:0;border:none;border-radius:12px;cursor:pointer;background:transparent;color:var(--dsw-alias-label-tertiary)}
+.rg-remove:hover{background:var(--dsw-alias-interactive-bg-hover-danger);color:var(--dsw-alias-state-error-primary)}
+.rg-empty{padding:10px 12px;color:var(--dsw-alias-label-caption);font-size:13px;line-height:20px}
+.rg-addRow{display:flex;align-items:center;gap:8px;width:100%}
+.rg-input{flex:1;min-width:0;height:36px;box-sizing:border-box;padding:0 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:transparent;color:var(--dsw-alias-label-primary);font-family:inherit;font-size:14px;line-height:22px}
+.rg-input:focus{outline:none;border-color:var(--dsw-alias-border-l4)}
+.rg-button{cursor:pointer;flex:none;height:32px;padding:0 14px;border:none;border-radius:16px;background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);font-family:inherit;font-size:14px;line-height:22px}
+.rg-button:hover{background:var(--dsw-alias-interactive-bg-active)}
+`;
+
+const STYLE_TAG = 'dsh-repeat-guard/panel.css';
+
+/** 注入一次本插件的样式；重复挂载不重复插。 */
+function injectStyle(): void {
+  if (typeof document === 'undefined' || document.querySelector(`style[data-plugin-css="${STYLE_TAG}"]`) !== null) {
+    return;
+  }
+  const tag = document.createElement('style');
+  tag.dataset.plugin = 'dsh-repeat-guard';
+  tag.dataset.pluginCss = STYLE_TAG;
+  tag.textContent = CSS;
+  document.head.appendChild(tag);
+}
+
+interface StepperProps {
+  value: number;
+  min: number;
+  max: number;
+  unit: string;
+  label: string;
+  onChange: (next: number) => void;
+}
+
+/** 数字步进器：数值居中，悬停或聚焦时右侧浮出上下箭头。 */
+function Stepper({ value, min, max, unit, label, onChange }: StepperProps): ReactElement {
+  return (
+    <span className="rg-control">
+      <span className="rg-stepper">
+        <span className="rg-stepperValue">{value}</span>
+        <span className="rg-arrows">
+          <button
+            type="button"
+            className="rg-arrow"
+            aria-label={`增大${label}`}
+            disabled={value >= max}
+            onClick={() => {
+              onChange(value + 1);
+            }}
+          >
+            <svg width="9" height="9" viewBox="0 0 9 9" aria-hidden="true">
+              <path
+                d="M1.4 6.2 4.5 3.1l3.1 3.1"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+          <button
+            type="button"
+            className="rg-arrow"
+            aria-label={`减小${label}`}
+            disabled={value <= min}
+            onClick={() => {
+              onChange(value - 1);
+            }}
+          >
+            <svg width="9" height="9" viewBox="0 0 9 9" aria-hidden="true">
+              <path
+                d="M1.4 2.8 4.5 5.9l3.1-3.1"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        </span>
+      </span>
+      <span className="rg-stepperUnit">{unit}</span>
+    </span>
+  );
+}
+
+interface FragmentListProps {
+  items: readonly string[];
+  draft: string;
+  onDraft: (next: string) => void;
+  onAdd: () => void;
+  onRemove: (index: number) => void;
+}
+
+/** 短句表：可滚动的列表，逐条删除，底部一行新增。 */
+function FragmentList({ items, draft, onDraft, onAdd, onRemove }: FragmentListProps): ReactElement {
+  function handleKey(event: KeyboardEvent<HTMLInputElement>): void {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      onAdd();
+    }
+  }
+
+  return (
+    <>
+      <div className="rg-list">
+        {items.length === 0 ? <div className="rg-empty">表是空的，不会拦截任何短句。</div> : null}
+        {items.map((item, index) => (
+          <div className="rg-item" key={`${item}#${String(index)}`}>
+            <span className="rg-itemText">{item}</span>
+            <button
+              type="button"
+              className="rg-remove"
+              aria-label={`删除 ${item}`}
+              onClick={() => {
+                onRemove(index);
+              }}
+            >
+              <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
+                <path
+                  d="M3 3l6 6M9 3l-6 6"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.4"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+      <div className="rg-addRow">
+        <input
+          className="rg-input"
+          value={draft}
+          placeholder="新增短句，连标点一起写，回车添加"
+          onChange={(event) => {
+            onDraft(event.target.value);
+          }}
+          onKeyDown={handleKey}
+        />
+        <button type="button" className="rg-button" onClick={onAdd}>
+          添加
+        </button>
+      </div>
+    </>
+  );
+}
+
+interface FormProps {
+  initial: RepeatGuardSettings;
+  onSave: (fragments: readonly string[], threshold: number) => Promise<void>;
+}
+
+/** 设置表单：标题行 + 阈值行 + 短句表行；改动先留在本地，点保存才写。 */
+function Form({ initial, onSave }: FormProps): ReactElement {
+  const [items, setItems] = useState<readonly string[]>(() => initial.fragments ?? []);
+  const [count, setCount] = useState(() => initial.threshold ?? 1);
+  const [draft, setDraft] = useState('');
+  const [note, setNote] = useState('');
+
+  function add(): void {
+    const value = draft.trim();
+    if (value === '') {
+      return;
+    }
+    setItems([...items, value]);
+    setDraft('');
+    setNote('');
+  }
+
+  function remove(index: number): void {
+    setItems(items.filter((_, at) => at !== index));
+    setNote('');
+  }
+
+  function save(): void {
+    setNote('保存中…');
+    onSave(items, count)
+      .then(() => {
+        setNote('已保存');
+      })
+      .catch((error: unknown) => {
+        setNote(`保存失败：${String(error)}`);
+      });
+  }
+
+  return (
+    <div className="rg-root">
+      <div className="rg-head">
+        <span className="rg-headTitle">复读打断</span>
+        <span className="rg-headNote">{note}</span>
+        <button type="button" className="rg-save" onClick={save}>
+          保存
+        </button>
+      </div>
+      <div className="rg-row">
+        <div className="rg-rowText">
+          <div className="rg-rowTitle">连续命中次数</div>
+          <div className="rg-rowDesc">连着几个短句行命中才拦截；填 1 表示发现即拦</div>
+        </div>
+        <Stepper
+          value={count}
+          min={THRESHOLD_MIN}
+          max={THRESHOLD_MAX}
+          unit="次"
+          label="连续命中次数"
+          onChange={(next) => {
+            setCount(next);
+            setNote('');
+          }}
+        />
+      </div>
+      <div className="rg-row rg-row--stack">
+        <div className="rg-rowText">
+          <div className="rg-rowTitle">拦截短句</div>
+          <div className="rg-rowDesc">一行一句，连标点一起写；只算独占一行的整行匹配</div>
+        </div>
+        <FragmentList
+          items={items}
+          draft={draft}
+          onDraft={setDraft}
+          onAdd={add}
+          onRemove={remove}
+        />
+      </div>
+    </div>
+  );
+}
+
 /** 注册设置页需要的服务；这两个是 cordis 服务名，不是包名。 */
 export const inject = ['slots', 'settingsScope'];
 
@@ -34,65 +296,9 @@ export const inject = ['slots', 'settingsScope'];
  * @param ctx - 浏览器侧 cordis 上下文。
  */
 export function apply(ctx: Context): void {
+  injectStyle();
   const scope = ctx.settingsScope.bind<RepeatGuardSettings>({ namespace: SETTINGS_NS });
 
-  function Form({ initial }: { initial: RepeatGuardSettings }): ReactElement {
-    const [fragments, setFragments] = useState(() => (initial.fragments ?? []).join('\n'));
-    const [threshold, setThreshold] = useState(() => String(initial.threshold ?? 1));
-    const [message, setMessage] = useState('');
-
-    function save(): void {
-      const list = fragments
-        .split('\n')
-        .map((line) => line.trim())
-        .filter((line) => line !== '');
-      const count = Number(threshold);
-      setMessage('保存中…');
-      scope
-        .set('fragments', list)
-        .then(() => scope.set('threshold', count))
-        .then(() => {
-          setMessage('已保存');
-        })
-        .catch((error: unknown) => {
-          setMessage(`保存失败：${String(error)}`);
-        });
-    }
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-        <label>
-          <span>连续命中次数</span>
-          <input
-            type="number"
-            value={threshold}
-            onChange={(event) => {
-              setThreshold(event.target.value);
-            }}
-          />
-          <span>填 1 表示命中即拦；填 n 表示连着 n 行都命中才拦。</span>
-        </label>
-        <label>
-          <span>拦截短句（一行一句，连标点一起写）</span>
-          <textarea
-            rows={16}
-            style={{ width: '100%', fontFamily: 'monospace' }}
-            value={fragments}
-            onChange={(event) => {
-              setFragments(event.target.value);
-            }}
-          />
-        </label>
-        <div>
-          <button type="button" onClick={save}>
-            保存
-          </button>
-          <span>{message}</span>
-        </div>
-      </div>
-    );
-  }
-
   function Panel(): ReactElement {
     const [snapshot, setSnapshot] = useState(() => scope.getSnapshot());
     useEffect(
@@ -104,9 +310,17 @@ export function apply(ctx: Context): void {
     );
     const value = snapshot.value;
     if (snapshot.status !== 'ready' || value === undefined) {
-      return <p>{`配置尚未就绪（${snapshot.status}）`}</p>;
+      return <div className="rg-empty">{`配置尚未就绪（${snapshot.status}）`}</div>;
     }
-    return <Form initial={value} />;
+    return (
+      <Form
+        initial={value}
+        onSave={async (fragments, threshold) => {
+          await scope.set('fragments', [...fragments]);
+          await scope.set('threshold', threshold);
+        }}
+      />
+    );
   }
 
   ctx.slots.inject('settings.section', () =>