From 326d7f2eba9f4019d157e36a328888986ac3a083 Mon Sep 17 00:00:00 2001
From: ShukeBta <272197458+ShukeBta@users.noreply.github.com>
Date: Wed, 24 Jun 2026 23:47:51 +0800
Subject: [PATCH] refactor: reuse notify config controls

---
 web/src/pages/NotifyChannelConfigControls.tsx |  97 +++++
 web/src/pages/NotifyChannelProviderFields.tsx | 334 +++++++++---------
 2 files changed, 255 insertions(+), 176 deletions(-)
 create mode 100644 web/src/pages/NotifyChannelConfigControls.tsx

diff --git a/web/src/pages/NotifyChannelConfigControls.tsx b/web/src/pages/NotifyChannelConfigControls.tsx
new file mode 100644
index 0000000..35d8350
--- /dev/null
+++ b/web/src/pages/NotifyChannelConfigControls.tsx
@@ -0,0 +1,97 @@
+import { Field } from './NotifyChannelFormField'
+
+type ConfigControlProps = {
+  config: Record<string, string>
+  updateConfig: (key: string, value: string) => void
+}
+
+type ConfigInputProps = ConfigControlProps & {
+  label: string
+  name: string
+  placeholder?: string
+  required?: boolean
+  type?: string
+}
+
+export function ConfigInput({
+  config,
+  updateConfig,
+  label,
+  name,
+  placeholder,
+  required,
+  type,
+}: ConfigInputProps) {
+  return (
+    <Field label={label}>
+      <input
+        required={required}
+        type={type}
+        className="input-base"
+        placeholder={placeholder}
+        value={config[name] ?? ''}
+        onChange={(event) => updateConfig(name, event.target.value)}
+      />
+    </Field>
+  )
+}
+
+type ConfigSelectProps = ConfigControlProps & {
+  label: string
+  name: string
+  options: Array<{ value: string; label: string }>
+  defaultValue?: string
+}
+
+export function ConfigSelect({
+  config,
+  updateConfig,
+  label,
+  name,
+  options,
+  defaultValue = '',
+}: ConfigSelectProps) {
+  return (
+    <Field label={label}>
+      <select
+        className="input-base"
+        value={config[name] ?? defaultValue}
+        onChange={(event) => updateConfig(name, event.target.value)}
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </Field>
+  )
+}
+
+type ConfigTextareaProps = ConfigControlProps & {
+  label: string
+  name: string
+  placeholder?: string
+  rows: number
+}
+
+export function ConfigTextarea({
+  config,
+  updateConfig,
+  label,
+  name,
+  placeholder,
+  rows,
+}: ConfigTextareaProps) {
+  return (
+    <Field label={label}>
+      <textarea
+        rows={rows}
+        className="input-base font-mono text-xs"
+        placeholder={placeholder}
+        value={config[name] ?? ''}
+        onChange={(event) => updateConfig(name, event.target.value)}
+      />
+    </Field>
+  )
+}
diff --git a/web/src/pages/NotifyChannelProviderFields.tsx b/web/src/pages/NotifyChannelProviderFields.tsx
index 2b61a3d..68154b8 100644
--- a/web/src/pages/NotifyChannelProviderFields.tsx
+++ b/web/src/pages/NotifyChannelProviderFields.tsx
@@ -1,63 +1,67 @@
-import { Field } from './NotifyChannelFormField'
+import {
+  ConfigInput,
+  ConfigSelect,
+  ConfigTextarea,
+} from './NotifyChannelConfigControls'
 
 type ProviderFieldsProps = {
   config: Record<string, string>
   updateConfig: (key: string, value: string) => void
 }
 
+const METHOD_OPTIONS = [
+  { value: 'POST', label: 'POST' },
+  { value: 'GET', label: 'GET' },
+]
+
+const TLS_OPTIONS = [
+  { value: 'true', label: '启用' },
+  { value: 'false', label: '关闭' },
+]
+
 export function TelegramFields({ config, updateConfig }: ProviderFieldsProps) {
+  const control = { config, updateConfig }
+
   return (
     <>
-      <Field label="Bot Token">
-        <input
-          required
-          className="input-base"
-          placeholder="123456:ABC-DEF…"
-          value={config.bot_token ?? ''}
-          onChange={(e) => updateConfig('bot_token', e.target.value)}
-        />
-      </Field>
-      <Field label="管理员 Telegram ID">
-        <input
-          required
-          className="input-base"
-          placeholder="多个用逗号分隔，如 123456789,987654321"
-          value={config.admin_user_ids ?? ''}
-          onChange={(e) => updateConfig('admin_user_ids', e.target.value)}
-        />
-      </Field>
-      <Field label="绑定群组 ID">
-        <input
-          className="input-base"
-          placeholder="选填，如 -1001234567890；填写后群组成员可唤醒/绑定"
-          value={config.group_chat_id ?? ''}
-          onChange={(e) => updateConfig('group_chat_id', e.target.value)}
-        />
-      </Field>
-      <Field label="绑定频道 ID">
-        <input
-          className="input-base"
-          placeholder="选填，如 -1009876543210；填写后频道成员可唤醒/绑定"
-          value={config.channel_chat_id ?? ''}
-          onChange={(e) => updateConfig('channel_chat_id', e.target.value)}
-        />
-      </Field>
-      <Field label="Telegram API 地址 (可选)">
-        <input
-          className="input-base"
-          placeholder="默认 https://api.telegram.org；反代可填 https://tg.example.com"
-          value={config.api_base_url ?? ''}
-          onChange={(e) => updateConfig('api_base_url', e.target.value)}
-        />
-      </Field>
-      <Field label="Telegram 代理 (可选)">
-        <input
-          className="input-base"
-          placeholder="如 http://172.17.0.1:7890 或 socks5://172.17.0.1:1080"
-          value={config.proxy_url ?? ''}
-          onChange={(e) => updateConfig('proxy_url', e.target.value)}
-        />
-      </Field>
+      <ConfigInput
+        {...control}
+        required
+        label="Bot Token"
+        name="bot_token"
+        placeholder="123456:ABC-DEF…"
+      />
+      <ConfigInput
+        {...control}
+        required
+        label="管理员 Telegram ID"
+        name="admin_user_ids"
+        placeholder="多个用逗号分隔，如 123456789,987654321"
+      />
+      <ConfigInput
+        {...control}
+        label="绑定群组 ID"
+        name="group_chat_id"
+        placeholder="选填，如 -1001234567890；填写后群组成员可唤醒/绑定"
+      />
+      <ConfigInput
+        {...control}
+        label="绑定频道 ID"
+        name="channel_chat_id"
+        placeholder="选填，如 -1009876543210；填写后频道成员可唤醒/绑定"
+      />
+      <ConfigInput
+        {...control}
+        label="Telegram API 地址 (可选)"
+        name="api_base_url"
+        placeholder="默认 https://api.telegram.org；反代可填 https://tg.example.com"
+      />
+      <ConfigInput
+        {...control}
+        label="Telegram 代理 (可选)"
+        name="proxy_url"
+        placeholder="如 http://172.17.0.1:7890 或 socks5://172.17.0.1:1080"
+      />
       <div className="rounded-2xl border border-primary-400/15 bg-primary-400/5 px-4 py-3 text-xs leading-6 text-ink-50">
         群组 ID、频道 ID 均为选填，可填一个、两个都填，也可以不填。管理功能始终仅管理员 Telegram ID 或已绑定的本地管理员可用；普通用户需要在已配置的群组或频道中，才能使用 <code>/start 用户名 密码</code> 绑定账号、切换隐藏成人媒体库和目录。不配置群组/频道时，普通用户不会被放行。若测试通知超时，可填写反代 API 地址或代理地址。
       </div>
@@ -66,156 +70,134 @@ export function TelegramFields({ config, updateConfig }: ProviderFieldsProps) {
 }
 
 export function WechatFields({ config, updateConfig }: ProviderFieldsProps) {
+  const control = { config, updateConfig }
+
   return (
-    <Field label="SendKey">
-      <input
-        required
-        className="input-base"
-        placeholder="SCT…"
-        value={config.sendkey ?? ''}
-        onChange={(e) => updateConfig('sendkey', e.target.value)}
-      />
-    </Field>
+    <ConfigInput
+      {...control}
+      required
+      label="SendKey"
+      name="sendkey"
+      placeholder="SCT…"
+    />
   )
 }
 
 export function BarkFields({ config, updateConfig }: ProviderFieldsProps) {
+  const control = { config, updateConfig }
+
   return (
     <>
-      <Field label="设备 Key">
-        <input
-          required
-          className="input-base"
-          value={config.device_key ?? ''}
-          onChange={(e) => updateConfig('device_key', e.target.value)}
-        />
-      </Field>
-      <Field label="服务器地址 (可选)">
-        <input
-          className="input-base"
-          placeholder="https://api.day.app"
-          value={config.server ?? ''}
-          onChange={(e) => updateConfig('server', e.target.value)}
-        />
-      </Field>
+      <ConfigInput
+        {...control}
+        required
+        label="设备 Key"
+        name="device_key"
+      />
+      <ConfigInput
+        {...control}
+        label="服务器地址 (可选)"
+        name="server"
+        placeholder="https://api.day.app"
+      />
     </>
   )
 }
 
 export function WebhookFields({ config, updateConfig }: ProviderFieldsProps) {
+  const control = { config, updateConfig }
+
   return (
     <>
-      <Field label="URL">
-        <input
-          required
-          className="input-base"
-          placeholder="https://example.com/notify"
-          value={config.url ?? ''}
-          onChange={(e) => updateConfig('url', e.target.value)}
-        />
-      </Field>
-      <Field label="Method">
-        <select
-          className="input-base"
-          value={config.method ?? 'POST'}
-          onChange={(e) => updateConfig('method', e.target.value)}
-        >
-          <option value="POST">POST</option>
-          <option value="GET">GET</option>
-        </select>
-      </Field>
-      <Field label="Headers (JSON)">
-        <textarea
-          rows={2}
-          className="input-base font-mono text-xs"
-          placeholder='{"Content-Type":"application/json"}'
-          value={config.headers ?? ''}
-          onChange={(e) => updateConfig('headers', e.target.value)}
-        />
-      </Field>
-      <Field label="Body 模板 (支持 {{title}} {{message}})">
-        <textarea
-          rows={3}
-          className="input-base font-mono text-xs"
-          placeholder='{"title":"{{title}}","message":"{{message}}"}'
-          value={config.body_template ?? ''}
-          onChange={(e) => updateConfig('body_template', e.target.value)}
-        />
-      </Field>
+      <ConfigInput
+        {...control}
+        required
+        label="URL"
+        name="url"
+        placeholder="https://example.com/notify"
+      />
+      <ConfigSelect
+        {...control}
+        label="Method"
+        name="method"
+        options={METHOD_OPTIONS}
+        defaultValue="POST"
+      />
+      <ConfigTextarea
+        {...control}
+        label="Headers (JSON)"
+        name="headers"
+        rows={2}
+        placeholder='{"Content-Type":"application/json"}'
+      />
+      <ConfigTextarea
+        {...control}
+        label="Body 模板 (支持 {{title}} {{message}})"
+        name="body_template"
+        rows={3}
+        placeholder='{"title":"{{title}}","message":"{{message}}"}'
+      />
     </>
   )
 }
 
 export function EmailFields({ config, updateConfig }: ProviderFieldsProps) {
+  const control = { config, updateConfig }
+
   return (
     <>
-      <Field label="SMTP 地址">
-        <input
-          required
-          className="input-base"
-          placeholder="smtp.gmail.com"
-          value={config.smtp_host ?? ''}
-          onChange={(e) => updateConfig('smtp_host', e.target.value)}
-        />
-      </Field>
+      <ConfigInput
+        {...control}
+        required
+        label="SMTP 地址"
+        name="smtp_host"
+        placeholder="smtp.gmail.com"
+      />
       <div className="grid grid-cols-2 gap-3">
-        <Field label="SMTP 端口">
-          <input
-            required
-            className="input-base"
-            placeholder="465"
-            value={config.smtp_port ?? ''}
-            onChange={(e) => updateConfig('smtp_port', e.target.value)}
-          />
-        </Field>
-        <Field label="TLS">
-          <select
-            className="input-base"
-            value={config.tls ?? 'true'}
-            onChange={(e) => updateConfig('tls', e.target.value)}
-          >
-            <option value="true">启用</option>
-            <option value="false">关闭</option>
-          </select>
-        </Field>
+        <ConfigInput
+          {...control}
+          required
+          label="SMTP 端口"
+          name="smtp_port"
+          placeholder="465"
+        />
+        <ConfigSelect
+          {...control}
+          label="TLS"
+          name="tls"
+          options={TLS_OPTIONS}
+          defaultValue="true"
+        />
       </div>
       <div className="grid grid-cols-2 gap-3">
-        <Field label="用户名">
-          <input
-            required
-            className="input-base"
-            value={config.username ?? ''}
-            onChange={(e) => updateConfig('username', e.target.value)}
-          />
-        </Field>
-        <Field label="密码">
-          <input
-            type="password"
-            required
-            className="input-base"
-            value={config.password ?? ''}
-            onChange={(e) => updateConfig('password', e.target.value)}
-          />
-        </Field>
+        <ConfigInput
+          {...control}
+          required
+          label="用户名"
+          name="username"
+        />
+        <ConfigInput
+          {...control}
+          required
+          label="密码"
+          name="password"
+          type="password"
+        />
       </div>
-      <Field label="发件人">
-        <input
-          required
-          className="input-base"
-          placeholder="noreply@example.com"
-          value={config.from ?? ''}
-          onChange={(e) => updateConfig('from', e.target.value)}
-        />
-      </Field>
-      <Field label="收件人 (多个用逗号分隔)">
-        <input
-          required
-          className="input-base"
-          placeholder="user@example.com"
-          value={config.to ?? ''}
-          onChange={(e) => updateConfig('to', e.target.value)}
-        />
-      </Field>
+      <ConfigInput
+        {...control}
+        required
+        label="发件人"
+        name="from"
+        placeholder="noreply@example.com"
+      />
+      <ConfigInput
+        {...control}
+        required
+        label="收件人 (多个用逗号分隔)"
+        name="to"
+        placeholder="user@example.com"
+      />
     </>
   )
 }