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

This commit is contained in:
bigcode
2026-10-01 01:11:06 +08:00
parent 8b255ef2e0
commit 830ca85ebd
4 changed files with 36 additions and 64 deletions
+18 -41
View File
@@ -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>
);
}
-4
View File
@@ -340,10 +340,6 @@ export function InboxPage() {
<Descriptions.Item label="收件人">
{safeArr(detail.email.to_addresses).join(", ") || "-"}
</Descriptions.Item>
<Descriptions.Item label="邮箱">{detail.email.mailbox_address ?? "(未匹配)"}</Descriptions.Item>
<Descriptions.Item label="Message-ID">
<span className="mono">{detail.email.message_id ?? "-"}</span>
</Descriptions.Item>
<Descriptions.Item label="接收 / 过期">
{new Date(detail.email.received_at).toLocaleString()} →{" "}
{detail.email.retained ? (