fix: bound formatter memory and improve operations workflows

2026-09-08 12:46:15 +08:00
parent 50ae37242b
commit 2c228a94e1
27 changed files with 4013 additions and 1230 deletions
@@ -32,9 +32,13 @@ export function ChannelFormModal({
  const [flowLimit, setFlowLimit] = useState(String(channel?.rateLimitPerSecond ?? 100));
  const [desiredConnections, setDesiredConnections] = useState(String(channel?.desiredConnections ?? 1));
  const [windowSize, setWindowSize] = useState(String(channel?.windowSize ?? 16));
-  const [heartbeatIntervalSeconds, setHeartbeatIntervalSeconds] = useState(String(channel?.heartbeatIntervalSeconds ?? 30));
+  const [heartbeatIntervalSeconds, setHeartbeatIntervalSeconds] = useState(
+    String(channel?.heartbeatIntervalSeconds ?? 30),
+  );
  const [heartbeatMissThreshold, setHeartbeatMissThreshold] = useState(String(channel?.heartbeatMissThreshold ?? 3));
-  const [longMessageReceiptMode, setLongMessageReceiptMode] = useState<LongMessageReceiptMode>(channel?.longMessageReceiptMode ?? 'per_segment');
+  const [longMessageReceiptMode, setLongMessageReceiptMode] = useState<LongMessageReceiptMode>(
+    channel?.longMessageReceiptMode ?? 'per_segment',
+  );

  function submit() {
    if (carriers.length === 0) {
@@ -82,34 +86,74 @@ export function ChannelFormModal({

  return (
    <Modal
-      footer={(
+      closeOnBackdrop={modal.mode === 'edit'}
+      closeOnEscape={modal.mode === 'edit'}
+      footer={
        <>
-          <Button onClick={onClose} variant="ghost">取消</Button>
+          <Button onClick={onClose} variant="ghost">
+            关闭
+          </Button>
          <Button onClick={submit}>确认</Button>
        </>
-      )}
+      }
      onClose={onClose}
      open
      size="xl"
-      title={<div className="template-modal-title"><h2>{modal.mode === 'edit' ? '编辑通道' : '创建通道'}</h2></div>}
+      title={
+        <div className="template-modal-title">
+          <h2>{modal.mode === 'edit' ? '编辑通道' : '创建通道'}</h2>
+        </div>
+      }
    >
      <div className="sms-channel-form">
        <section>
          <h3>业务信息</h3>
          <div className="sms-channel-form-grid">
-            <Input label="* 通道名称" onChange={(event) => setName(event.target.value)} placeholder="请输入通道名称" value={name} />
+            <Input
+              label="* 通道名称"
+              onChange={(event) => setName(event.target.value)}
+              placeholder="请输入通道名称"
+              value={name}
+            />
            <div className="sms-channel-radio-row">
              <span>* 运营商</span>
              {baseCarrierOptions.map((item) => (
                <label key={item.value}>
-                  <input checked={carriers.includes(item.value)} onChange={() => { setCarriers((current) => current.includes(item.value) ? current.filter((carrier) => carrier !== item.value) : [...current, item.value]); setCarrierError(''); }} type="checkbox" />
+                  <input
+                    checked={carriers.includes(item.value)}
+                    onChange={() => {
+                      setCarriers((current) =>
+                        current.includes(item.value)
+                          ? current.filter((carrier) => carrier !== item.value)
+                          : [...current, item.value],
+                      );
+                      setCarrierError('');
+                    }}
+                    type="checkbox"
+                  />
                  {item.label}
                </label>
              ))}
              {carrierError ? <small className="form-error">{carrierError}</small> : null}
            </div>
-            <Input error={unitPriceError} label="* 单价（元）" min="0" onChange={(event) => { setUnitPrice(event.target.value); setUnitPriceError(''); }} step="0.0001" type="number" value={unitPrice} />
-            <Select label="* 发送地区" onChange={(event) => setRegion(event.target.value)} options={regionOptions} value={region} />
+            <Input
+              error={unitPriceError}
+              label="* 单价（元）"
+              min="0"
+              onChange={(event) => {
+                setUnitPrice(event.target.value);
+                setUnitPriceError('');
+              }}
+              step="0.0001"
+              type="number"
+              value={unitPrice}
+            />
+            <Select
+              label="* 发送地区"
+              onChange={(event) => setRegion(event.target.value)}
+              options={regionOptions}
+              value={region}
+            />
          </div>
        </section>

@@ -118,13 +162,39 @@ export function ChannelFormModal({
          <div className="sms-channel-form-grid">
            <Input disabled label="* 协议选择" value="CMPP" />
            <div className="sms-channel-inline-field">
-              <Input label="* 网关地址" onChange={(event) => setGatewayHost(event.target.value)} placeholder="请输入网关地址" value={gatewayHost} />
+              <Input
+                label="* 网关地址"
+                onChange={(event) => setGatewayHost(event.target.value)}
+                placeholder="请输入网关地址"
+                value={gatewayHost}
+              />
              <Input label="端口" onChange={(event) => setGatewayPort(event.target.value)} value={gatewayPort} />
            </div>
-            <Input hint="对应 CMPP Service_Id，最多 10 个 ASCII 字符。" label="* 业务代码" maxLength={10} onChange={(event) => setBusinessCode(event.target.value.toUpperCase())} value={businessCode} />
-            <Input label="* 企业代码" onChange={(event) => setCorpCode(event.target.value)} placeholder="请输入企业代码" value={corpCode} />
-            <Input label="* 网关账号" onChange={(event) => setAccount(event.target.value)} placeholder="请输入网关账号" value={account} />
-            <Select label="* CMPP版本" onChange={(event) => setCmppVersion(event.target.value as '2.0' | '3.0')} options={cmppVersionOptions} value={cmppVersion} />
+            <Input
+              hint="对应 CMPP Service_Id，最多 10 个 ASCII 字符。"
+              label="* 业务代码"
+              maxLength={10}
+              onChange={(event) => setBusinessCode(event.target.value.toUpperCase())}
+              value={businessCode}
+            />
+            <Input
+              label="* 企业代码"
+              onChange={(event) => setCorpCode(event.target.value)}
+              placeholder="请输入企业代码"
+              value={corpCode}
+            />
+            <Input
+              label="* 网关账号"
+              onChange={(event) => setAccount(event.target.value)}
+              placeholder="请输入网关账号"
+              value={account}
+            />
+            <Select
+              label="* CMPP版本"
+              onChange={(event) => setCmppVersion(event.target.value as '2.0' | '3.0')}
+              options={cmppVersionOptions}
+              value={cmppVersion}
+            />
            <Input
              hint={modal.mode === 'edit' ? '已配置的密码不会回显；留空保持不变，填写新密码才更新。' : undefined}
              label="网关密码"
@@ -137,14 +207,62 @@ export function ChannelFormModal({
              value={password}
            />
            <div className="sms-channel-inline-field">
-              <Input autoComplete="off" label="* 接入号" name="cmpp-access-number" onChange={(event) => setAccessNo(event.target.value)} placeholder="请输入通道接入号" value={accessNo} />
-              <Input label="扩展位数" max="20" min="0" onChange={(event) => setExtensionDigits(event.target.value)} type="number" value={extensionDigits} />
+              <Input
+                autoComplete="off"
+                label="* 接入号"
+                name="cmpp-access-number"
+                onChange={(event) => setAccessNo(event.target.value)}
+                placeholder="请输入通道接入号"
+                value={accessNo}
+              />
+              <Input
+                label="扩展位数"
+                max="20"
+                min="0"
+                onChange={(event) => setExtensionDigits(event.target.value)}
+                type="number"
+                value={extensionDigits}
+              />
            </div>
-            <Input label="* 通道流速" max="2000" min="1" onChange={(event) => setFlowLimit(event.target.value)} suffix="条/秒" type="number" value={flowLimit} />
-            <Input label="* 期望连接数" onChange={(event) => setDesiredConnections(event.target.value)} placeholder="1" value={desiredConnections} />
-            <Input label="* 提交窗口" onChange={(event) => setWindowSize(event.target.value)} placeholder="16" value={windowSize} />
-            <Input hint="平台主动向供应商发送 ACTIVE_TEST 的间隔" label="* 心跳间隔" min="1" onChange={(event) => setHeartbeatIntervalSeconds(event.target.value)} suffix="秒" type="number" value={heartbeatIntervalSeconds} />
-            <Input hint="连续未收到心跳响应达到该次数后重连" label="* 心跳失败阈值" min="1" onChange={(event) => setHeartbeatMissThreshold(event.target.value)} suffix="次" type="number" value={heartbeatMissThreshold} />
+            <Input
+              label="* 通道流速"
+              max="2000"
+              min="1"
+              onChange={(event) => setFlowLimit(event.target.value)}
+              suffix="条/秒"
+              type="number"
+              value={flowLimit}
+            />
+            <Input
+              label="* 期望连接数"
+              onChange={(event) => setDesiredConnections(event.target.value)}
+              placeholder="1"
+              value={desiredConnections}
+            />
+            <Input
+              label="* 提交窗口"
+              onChange={(event) => setWindowSize(event.target.value)}
+              placeholder="16"
+              value={windowSize}
+            />
+            <Input
+              hint="平台主动向供应商发送 ACTIVE_TEST 的间隔"
+              label="* 心跳间隔"
+              min="1"
+              onChange={(event) => setHeartbeatIntervalSeconds(event.target.value)}
+              suffix="秒"
+              type="number"
+              value={heartbeatIntervalSeconds}
+            />
+            <Input
+              hint="连续未收到心跳响应达到该次数后重连"
+              label="* 心跳失败阈值"
+              min="1"
+              onChange={(event) => setHeartbeatMissThreshold(event.target.value)}
+              suffix="次"
+              type="number"
+              value={heartbeatMissThreshold}
+            />
            <Select
              label="* 长短信成功回执口径"
              onChange={(event) => setLongMessageReceiptMode(event.target.value as LongMessageReceiptMode)}
@@ -154,7 +272,9 @@ export function ChannelFormModal({
              ]}
              value={longMessageReceiptMode}
            />
-            <p className="page-inline-hint">仅在供应商明确约定长短信成功只返回一条整条级回执时选择“整条级”，否则保持逐分片。</p>
+            <p className="page-inline-hint">
+              仅在供应商明确约定长短信成功只返回一条整条级回执时选择“整条级”，否则保持逐分片。
+            </p>
          </div>
        </section>
      </div>