feat: 全站评论开关，并统一后台表单控件

关闭评论后前台隐藏评论能力；外观/设置/公告改用 AdminField 与 Stepper。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/components/admin/AdminField.tsx

@@ -0,0 +1,81 @@
+import type { ChangeEvent, ReactNode } from "react";
+
+/** 后台文本框：与聊天搜索同款壳层，聚焦只画外框一圈 */
+export default function AdminField({
+  id,
+  label,
+  hint,
+  value,
+  onChange,
+  placeholder,
+  maxLength,
+  as = "input",
+  type = "text",
+  autoComplete,
+  disabled,
+  className = "",
+  minHeight,
+}: {
+  id: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  maxLength?: number;
+  as?: "input" | "textarea";
+  type?: string;
+  autoComplete?: string;
+  disabled?: boolean;
+  className?: string;
+  minHeight?: string;
+}) {
+  const handle = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+    onChange(e.target.value);
+
+  return (
+    <div className={className}>
+      <div className="admin-field-head">
+        <label className="field-label" htmlFor={id}>
+          {label}
+        </label>
+        {maxLength != null && (
+          <span className="admin-field-count" aria-hidden>
+            {value.length}/{maxLength}
+          </span>
+        )}
+      </div>
+      {hint != null && hint !== "" && (
+        <p className="meta text-[12.5px] mb-2.5 leading-relaxed">{hint}</p>
+      )}
+      {as === "textarea" ? (
+        <div className="admin-field-shell is-area">
+          <textarea
+            id={id}
+            className="admin-field-input"
+            style={minHeight ? { minHeight } : undefined}
+            maxLength={maxLength}
+            value={value}
+            onChange={handle}
+            placeholder={placeholder}
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <div className="admin-field-shell">
+          <input
+            id={id}
+            type={type}
+            className="admin-field-input"
+            maxLength={maxLength}
+            value={value}
+            onChange={handle}
+            placeholder={placeholder}
+            autoComplete={autoComplete}
+            disabled={disabled}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/admin/AdminSearchField.tsx

@@ -3,7 +3,7 @@
 import { Search, X } from "lucide-react";
 import type { FormEvent } from "react";
 
-/** 左图标、可清除、Enter 提交；不要再并排「搜索」按钮 */
+/** 左图标、可清除、Enter 提交；壳层聚焦与聊天搜索一致 */
 export default function AdminSearchField({
   value,
   onChange,
@@ -30,11 +30,11 @@ export default function AdminSearchField({
   };
 
   return (
-    <form onSubmit={handleSubmit} className="relative flex-1 min-w-0" role="search">
+    <form onSubmit={handleSubmit} className="admin-field-shell admin-search-shell relative flex-1 min-w-0" role="search">
       <Search
         size={15}
-        className="absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none"
-        style={{ color: "var(--ink-3)" }}
+        className="shrink-0 pointer-events-none"
+        style={{ color: value ? "var(--accent)" : "var(--ink-3)" }}
         aria-hidden
       />
       <input
@@ -43,14 +43,14 @@ export default function AdminSearchField({
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
         aria-label={ariaLabel}
-        className="field pl-10 pr-9 py-2.5"
+        className="admin-field-input"
       />
       {value ? (
         <button
           type="button"
           onClick={clear}
           aria-label="清除搜索"
-          className="absolute right-2.5 top-1/2 -translate-y-1/2 w-6 h-6 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
+          className="w-6 h-6 inline-flex items-center justify-center rounded-full shrink-0 transition-colors hover:bg-[var(--accent-soft)]"
           style={{ color: "var(--ink-3)" }}
         >
           <X size={14} />

frontend/components/admin/AdminStepper.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Minus, Plus } from "lucide-react";
+import { useEffect, useState, type KeyboardEvent } from "react";
+
+/** 后台数字步进器：0 是合法值；加减与手输都会提交数字 */
+export default function AdminStepper({
+  id,
+  value,
+  onChange,
+  min = 0,
+  max = 999,
+  step = 1,
+  unit,
+  ariaLabel,
+  disabled,
+}: {
+  id?: string;
+  value: number;
+  onChange: (n: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+  ariaLabel: string;
+  disabled?: boolean;
+}) {
+  const clamp = (n: number) => Math.min(max, Math.max(min, Math.round(n)));
+  const [text, setText] = useState(() => String(value));
+
+  useEffect(() => {
+    setText(String(value));
+  }, [value]);
+
+  const emit = (n: number) => {
+    const next = clamp(Number.isFinite(n) ? n : min);
+    onChange(next);
+    setText(String(next));
+  };
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      emit(value + step);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      emit(value - step);
+    }
+  };
+
+  return (
+    <div className={`admin-stepper${disabled ? " is-disabled" : ""}`}>
+      <button
+        type="button"
+        className="admin-stepper-btn"
+        onClick={() => emit(value - step)}
+        disabled={disabled || value <= min}
+        aria-label="减少"
+        tabIndex={-1}
+      >
+        <Minus size={14} />
+      </button>
+      <input
+        id={id}
+        className="admin-stepper-input"
+        type="text"
+        inputMode="numeric"
+        value={text}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        onFocus={(e) => e.target.select()}
+        onChange={(e) => {
+          const raw = e.target.value.replace(/[^\d]/g, "");
+          setText(raw);
+          if (raw === "") return;
+          onChange(clamp(Number(raw)));
+        }}
+        onBlur={() => emit(text === "" ? min : Number(text))}
+        onKeyDown={onKeyDown}
+      />
+      {unit ? <span className="admin-stepper-unit">{unit}</span> : null}
+      <button
+        type="button"
+        className="admin-stepper-btn"
+        onClick={() => emit(value + step)}
+        disabled={disabled || value >= max}
+        aria-label="增加"
+        tabIndex={-1}
+      >
+        <Plus size={14} />
+      </button>
+    </div>
+  );
+}

frontend/components/admin/index.ts

@@ -5,6 +5,8 @@ export { default as AdminSettingRow } from "./AdminSettingRow";
 export { default as AdminSegmented } from "./AdminSegmented";
 export type { AdminSegmentOption } from "./AdminSegmented";
 export { default as AdminSearchField } from "./AdminSearchField";
+export { default as AdminField } from "./AdminField";
+export { default as AdminStepper } from "./AdminStepper";
 export { default as AdminPager } from "./AdminPager";
 export { default as AdminEmpty } from "./AdminEmpty";
 export { default as AdminStatCard } from "./AdminStatCard";