From 962cbc8df3c30564871c6e53ccc515706e101254 Mon Sep 17 00:00:00 2001
From: William <admin@meshel.cc>
Date: Mon, 29 Jun 2026 18:14:06 +0600
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B4=A6=E5=8F=B7=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 支持修改名称、AccessKey ID/Secret、Region、Endpoint

- 编辑时 Secret 留空表示不修改
---
 apps/web/src/pages/Accounts.tsx | 65 +++++++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/pages/Accounts.tsx b/apps/web/src/pages/Accounts.tsx
index 9243376..464eed3 100644
--- a/apps/web/src/pages/Accounts.tsx
+++ b/apps/web/src/pages/Accounts.tsx
@@ -10,10 +10,11 @@ import {
   Tag,
   Popconfirm,
 } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined, EditOutlined } from '@ant-design/icons';
 import {
   listAccounts,
   createAccount,
+  updateAccount,
   deleteAccount,
   switchAccount,
   Account,
@@ -24,6 +25,7 @@ export default function AccountsPage() {
   const [accounts, setAccounts] = useState<Account[]>([]);
   const [loading, setLoading] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
+  const [editingAccount, setEditingAccount] = useState<Account | null>(null);
   const [form] = Form.useForm();
 
   const fetchAccounts = async () => {
@@ -40,15 +42,46 @@ export default function AccountsPage() {
     fetchAccounts();
   }, []);
 
+  const openCreateModal = () => {
+    setEditingAccount(null);
+    form.resetFields();
+    setModalOpen(true);
+  };
+
+  const openEditModal = (record: Account) => {
+    setEditingAccount(record);
+    form.setFieldsValue({
+      name: record.name,
+      accessKeyId: record.accessKeyId,
+      region: record.region,
+      endpoint: record.endpoint,
+    });
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalOpen(false);
+    setEditingAccount(null);
+    form.resetFields();
+  };
+
   const handleSubmit = async (values: AccountInput) => {
     try {
-      await createAccount(values);
-      message.success('账号添加成功');
-      setModalOpen(false);
-      form.resetFields();
+      if (editingAccount) {
+        const payload: Partial<AccountInput> = { ...values };
+        if (!payload.accessKeySecret) {
+          delete payload.accessKeySecret;
+        }
+        await updateAccount(editingAccount.id, payload);
+        message.success('账号更新成功');
+      } else {
+        await createAccount(values);
+        message.success('账号添加成功');
+      }
+      closeModal();
       fetchAccounts();
     } catch (error) {
-      message.error('添加失败');
+      message.error(editingAccount ? '更新失败' : '添加失败');
     }
   };
 
@@ -92,6 +125,9 @@ export default function AccountsPage() {
               切换
             </Button>
           )}
+          <Button type="link" icon={<EditOutlined />} onClick={() => openEditModal(record)}>
+            编辑
+          </Button>
           <Popconfirm title="确认删除？" onConfirm={() => handleDelete(record.id)}>
             <Button type="link" danger>
               删除
@@ -102,10 +138,12 @@ export default function AccountsPage() {
     },
   ];
 
+  const modalTitle = editingAccount ? '编辑阿里云 VOD 账号' : '添加阿里云 VOD 账号';
+
   return (
     <div>
       <div style={{ marginBottom: 16 }}>
-        <Button type="primary" icon={<PlusOutlined />} onClick={() => setModalOpen(true)}>
+        <Button type="primary" icon={<PlusOutlined />} onClick={openCreateModal}>
           添加账号
         </Button>
       </div>
@@ -113,9 +151,9 @@ export default function AccountsPage() {
       <Table rowKey="id" columns={columns} dataSource={accounts} loading={loading} />
 
       <Modal
-        title="添加阿里云 VOD 账号"
+        title={modalTitle}
         open={modalOpen}
-        onCancel={() => setModalOpen(false)}
+        onCancel={closeModal}
         footer={null}
       >
         <Form form={form} layout="vertical" onFinish={handleSubmit}>
@@ -134,9 +172,14 @@ export default function AccountsPage() {
             <Input />
           </Form.Item>
           <Form.Item
-            label="AccessKey Secret"
+            label={editingAccount ? 'AccessKey Secret（留空则不修改）' : 'AccessKey Secret'}
             name="accessKeySecret"
-            rules={[{ required: true, message: '请输入 AccessKey Secret' }]}
+            rules={[
+              {
+                required: !editingAccount,
+                message: '请输入 AccessKey Secret',
+              },
+            ]}
           >
             <Input.Password />
           </Form.Item>