refactor: reuse notify config controls

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>
+  )
+}

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">
+      <ConfigInput
-        <input
+        {...control}
         required
-          className="input-base"
+        label="Bot Token"
+        name="bot_token"
         placeholder="123456:ABC-DEF…"
-          value={config.bot_token ?? ''}
-          onChange={(e) => updateConfig('bot_token', e.target.value)}
       />
-      </Field>
+      <ConfigInput
-      <Field label="管理员 Telegram ID">
+        {...control}
-        <input
         required
-          className="input-base"
+        label="管理员 Telegram ID"
+        name="admin_user_ids"
         placeholder="多个用逗号分隔，如 123456789,987654321"
-          value={config.admin_user_ids ?? ''}
-          onChange={(e) => updateConfig('admin_user_ids', e.target.value)}
       />
-      </Field>
+      <ConfigInput
-      <Field label="绑定群组 ID">
+        {...control}
-        <input
+        label="绑定群组 ID"
-          className="input-base"
+        name="group_chat_id"
         placeholder="选填，如 -1001234567890；填写后群组成员可唤醒/绑定"
-          value={config.group_chat_id ?? ''}
-          onChange={(e) => updateConfig('group_chat_id', e.target.value)}
       />
-      </Field>
+      <ConfigInput
-      <Field label="绑定频道 ID">
+        {...control}
-        <input
+        label="绑定频道 ID"
-          className="input-base"
+        name="channel_chat_id"
         placeholder="选填，如 -1009876543210；填写后频道成员可唤醒/绑定"
-          value={config.channel_chat_id ?? ''}
-          onChange={(e) => updateConfig('channel_chat_id', e.target.value)}
       />
-      </Field>
+      <ConfigInput
-      <Field label="Telegram API 地址 (可选)">
+        {...control}
-        <input
+        label="Telegram API 地址 (可选)"
-          className="input-base"
+        name="api_base_url"
         placeholder="默认 https://api.telegram.org；反代可填 https://tg.example.com"
-          value={config.api_base_url ?? ''}
-          onChange={(e) => updateConfig('api_base_url', e.target.value)}
       />
-      </Field>
+      <ConfigInput
-      <Field label="Telegram 代理 (可选)">
+        {...control}
-        <input
+        label="Telegram 代理 (可选)"
-          className="input-base"
+        name="proxy_url"
         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>
       <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">
+    <ConfigInput
-      <input
+      {...control}
       required
-        className="input-base"
+      label="SendKey"
+      name="sendkey"
       placeholder="SCT…"
-        value={config.sendkey ?? ''}
-        onChange={(e) => updateConfig('sendkey', e.target.value)}
     />
-    </Field>
   )
 }
 
 export function BarkFields({ config, updateConfig }: ProviderFieldsProps) {
+  const control = { config, updateConfig }
+
   return (
     <>
-      <Field label="设备 Key">
+      <ConfigInput
-        <input
+        {...control}
         required
-          className="input-base"
+        label="设备 Key"
-          value={config.device_key ?? ''}
+        name="device_key"
-          onChange={(e) => updateConfig('device_key', e.target.value)}
       />
-      </Field>
+      <ConfigInput
-      <Field label="服务器地址 (可选)">
+        {...control}
-        <input
+        label="服务器地址 (可选)"
-          className="input-base"
+        name="server"
         placeholder="https://api.day.app"
-          value={config.server ?? ''}
-          onChange={(e) => updateConfig('server', e.target.value)}
       />
-      </Field>
     </>
   )
 }
 
 export function WebhookFields({ config, updateConfig }: ProviderFieldsProps) {
+  const control = { config, updateConfig }
+
   return (
     <>
-      <Field label="URL">
+      <ConfigInput
-        <input
+        {...control}
         required
-          className="input-base"
+        label="URL"
+        name="url"
         placeholder="https://example.com/notify"
-          value={config.url ?? ''}
-          onChange={(e) => updateConfig('url', e.target.value)}
       />
-      </Field>
+      <ConfigSelect
-      <Field label="Method">
+        {...control}
-        <select
+        label="Method"
-          className="input-base"
+        name="method"
-          value={config.method ?? 'POST'}
+        options={METHOD_OPTIONS}
-          onChange={(e) => updateConfig('method', e.target.value)}
+        defaultValue="POST"
-        >
+      />
-          <option value="POST">POST</option>
+      <ConfigTextarea
-          <option value="GET">GET</option>
+        {...control}
-        </select>
+        label="Headers (JSON)"
-      </Field>
+        name="headers"
-      <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>
+      <ConfigTextarea
-      <Field label="Body 模板 (支持 {{title}} {{message}})">
+        {...control}
-        <textarea
+        label="Body 模板 (支持 {{title}} {{message}})"
+        name="body_template"
         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>
     </>
   )
 }
 
 export function EmailFields({ config, updateConfig }: ProviderFieldsProps) {
+  const control = { config, updateConfig }
+
   return (
     <>
-      <Field label="SMTP 地址">
+      <ConfigInput
-        <input
+        {...control}
         required
-          className="input-base"
+        label="SMTP 地址"
+        name="smtp_host"
         placeholder="smtp.gmail.com"
-          value={config.smtp_host ?? ''}
-          onChange={(e) => updateConfig('smtp_host', e.target.value)}
       />
-      </Field>
       <div className="grid grid-cols-2 gap-3">
-        <Field label="SMTP 端口">
+        <ConfigInput
-          <input
+          {...control}
           required
-            className="input-base"
+          label="SMTP 端口"
+          name="smtp_port"
           placeholder="465"
-            value={config.smtp_port ?? ''}
-            onChange={(e) => updateConfig('smtp_port', e.target.value)}
         />
-        </Field>
+        <ConfigSelect
-        <Field label="TLS">
+          {...control}
-          <select
+          label="TLS"
-            className="input-base"
+          name="tls"
-            value={config.tls ?? 'true'}
+          options={TLS_OPTIONS}
-            onChange={(e) => updateConfig('tls', e.target.value)}
+          defaultValue="true"
-          >
+        />
-            <option value="true">启用</option>
-            <option value="false">关闭</option>
-          </select>
-        </Field>
       </div>
       <div className="grid grid-cols-2 gap-3">
-        <Field label="用户名">
+        <ConfigInput
-          <input
+          {...control}
           required
-            className="input-base"
+          label="用户名"
-            value={config.username ?? ''}
+          name="username"
-            onChange={(e) => updateConfig('username', e.target.value)}
         />
-        </Field>
+        <ConfigInput
-        <Field label="密码">
+          {...control}
-          <input
+          required
+          label="密码"
+          name="password"
           type="password"
-            required
-            className="input-base"
-            value={config.password ?? ''}
-            onChange={(e) => updateConfig('password', e.target.value)}
         />
-        </Field>
       </div>
-      <Field label="发件人">
+      <ConfigInput
-        <input
+        {...control}
         required
-          className="input-base"
+        label="发件人"
+        name="from"
         placeholder="noreply@example.com"
-          value={config.from ?? ''}
-          onChange={(e) => updateConfig('from', e.target.value)}
       />
-      </Field>
+      <ConfigInput
-      <Field label="收件人 (多个用逗号分隔)">
+        {...control}
-        <input
         required
-          className="input-base"
+        label="收件人 (多个用逗号分隔)"
+        name="to"
         placeholder="user@example.com"
-          value={config.to ?? ''}
-          onChange={(e) => updateConfig('to', e.target.value)}
       />
-      </Field>
     </>
   )
 }