v2.5.1: 邮件详情抽屉去掉 邮箱/Message-ID;添加账号窗口去切换控件,OAuth 按钮 + API Token 表单平铺同窗

console/frontend/src/pages/Accounts.tsx

@@ -1,4 +1,4 @@
-/** 账号页:添加账号(Cloudflare OAuth / API Token 同窗切换),授权后自动接入并同步域名;搜索、详情、凭据管理 */
+/** 账号页:添加账号(Cloudflare OAuth / API Token 同窗平铺),授权后自动接入并同步域名;搜索、详情、凭据管理 */
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import {
@@ -9,7 +9,6 @@ import {
   Form,
   Input,
   Modal,
-  Radio,
   Space,
   Table,
   Tag,
@@ -123,8 +122,6 @@ export function AccountsPage() {
 
   /** 添加账号:OAuth 与 API Token 两种方式都收在同一个模态窗口里 */
   const [addOpen, setAddOpen] = useState(false);
-  /** 当前选中的授权方式 **/
-  const [addMode, setAddMode] = useState<"oauth" | "token">("oauth");
   /** API Token 提交的 loading(要防重复点击,一次接入要走好几次 Cloudflare 调用) **/
   const [adding, setAdding] = useState(false);
   const [tokenForm] = Form.useForm();
@@ -270,10 +267,8 @@ export function AccountsPage() {
 
       <AddAccountModal
         open={addOpen}
-        mode={addMode}
         loading={adding}
         form={tokenForm}
-        onModeChange={setAddMode}
         onCancel={() => {
           if (adding) return;
           setAddOpen(false);
@@ -299,22 +294,20 @@ export function AccountsPage() {
 /** # 成员变量: 添加账号模态窗口的属性 **/
 interface AddAccountModalProps {
   open: boolean;
-  mode: "oauth" | "token";
   loading: boolean;
   form: ReturnType<typeof Form.useForm>[0];
-  onModeChange: (mode: "oauth" | "token") => void;
   onCancel: () => void;
   onOAuth: () => void;
   onTokenSubmit: () => void;
 }
 
 /** # 函数
- * 「添加 Cloudflare 账号」模态窗口:Cloudflare OAuth 授权与 API Token 授权在同一个窗口,
- * 顶部按钮组切换方式,字段随方式变化 —— OAuth 只要一个「前往授权」按钮,
- * API Token 填账户名称 + Token 即可(账户 ID 由 Token 在 Cloudflare 侧实际所属账户自动确定)。
+ * 「添加 Cloudflare 账号」模态窗口:两种授权方式平铺展示、无需切换 ——
+ * 顶部「Cloudflare OAuth 授权」一键跳转授权,分隔线下方是 API Token 表单
+ * (账户名称 + Token,账户 ID 由 Token 在 Cloudflare 侧实际所属账户自动确定)。
  */
 function AddAccountModal(props: AddAccountModalProps) {
-  const { open, mode, loading, form, onModeChange, onCancel, onOAuth, onTokenSubmit } = props;
+  const { open, loading, form, onCancel, onOAuth, onTokenSubmit } = props;
   return (
     <Modal
       title="添加 Cloudflare 账号"
@@ -326,37 +319,21 @@ function AddAccountModal(props: AddAccountModalProps) {
       footer={null}
       destroyOnHidden
     >
-      <Radio.Group
-        block
-        value={mode}
-        onChange={(e) => onModeChange(e.target.value as "oauth" | "token")}
-        style={{ marginBottom: 4 }}
-      >
-        <Radio.Button value="oauth" style={{ width: "50%" }}>
-          <SafetyOutlined /> Cloudflare OAuth 授权
-        </Radio.Button>
-        <Radio.Button value="token" style={{ width: "50%" }}>
-          <ApiOutlined /> API Token 授权
-        </Radio.Button>
-      </Radio.Group>
+      <Button type="primary" icon={<SafetyOutlined />} onClick={onOAuth} block>
+        Cloudflare OAuth 授权
+      </Button>
       <Divider style={{ margin: "16px 0" }} />
-      {mode === "oauth" ? (
-        <Button type="primary" icon={<SafetyOutlined />} onClick={onOAuth} block>
-          前往 Cloudflare 授权
+      <Form form={form} layout="vertical" requiredMark="optional">
+        <Form.Item name="name" label="账户名称" rules={[{ required: true, message: "请输入账户名称" }]}>
+          <Input placeholder="我的主账号" />
+        </Form.Item>
+        <Form.Item name="token" label="API Token" rules={[{ required: true, message: "请输入 API Token" }]}>
+          <Input.Password placeholder="粘贴 Cloudflare API Token" autoComplete="new-password" />
+        </Form.Item>
+        <Button type="primary" icon={<ApiOutlined />} onClick={onTokenSubmit} loading={loading} block>
+          {loading ? "正在校验并接入…" : "API Token 授权"}
         </Button>
-      ) : (
-        <Form form={form} layout="vertical" requiredMark="optional">
-          <Form.Item name="name" label="账户名称" rules={[{ required: true, message: "请输入账户名称" }]}>
-            <Input placeholder="我的主账号" />
-          </Form.Item>
-          <Form.Item name="token" label="API Token" rules={[{ required: true, message: "请输入 API Token" }]}>
-            <Input.Password placeholder="粘贴 Cloudflare API Token" autoComplete="new-password" />
-          </Form.Item>
-          <Button type="primary" icon={<ApiOutlined />} onClick={onTokenSubmit} loading={loading} block>
-            {loading ? "正在校验并接入…" : "用 API Token 接入"}
-          </Button>
-        </Form>
-      )}
+      </Form>
     </Modal>
   );
 }