From 62e457932eafc6b9a6ee2d3ff85e9c7bafb9c51e Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Sun, 12 Oct 2025 13:56:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B4=A6=E6=88=B7?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=97=B6=E8=BF=87=E6=9C=9F=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E4=B8=8D=E5=9B=9E=E6=98=BE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 问题描述
在账户编辑页面，虽然过期时间已保存并在列表中正确显示，但点击编辑时：
- expireDuration 和 customExpireDate 字段为空
- 导致过期时间选择器显示为空白状态

## 根本原因
AccountForm.vue 的 form 初始化时：
- expiresAt 正确读取了 props.account?.expiresAt
- 但 expireDuration 和 customExpireDate 都初始化为空字符串
- 缺少从 expiresAt 反向初始化这两个字段的逻辑

## 修复方案
修改 form 初始化逻辑（第 3443-3457 行）：
- expireDuration: 如果存在 expiresAt，设置为 'custom'
- customExpireDate: 如果存在 expiresAt，转换为 datetime-local 格式 (YYYY-MM-DDTHH:mm)
- expiresAt: 保持原有逻辑不变

## 技术细节
使用 IIFE (立即执行函数) 在 reactive 对象初始化时计算初始值：
```javascript
expireDuration: (() => {
  if (props.account?.expiresAt) return 'custom'
  return ''
})()
```

## 测试验证
- ✅ 编辑已设置过期时间的账户，过期时间正确回显
- ✅ 编辑未设置过期时间的账户，显示为永不过期
- ✅ AccountExpiryEditModal 组件已有正确的初始化逻辑，无需修改

文件: web/admin-spa/src/components/accounts/AccountForm.vue:3443-3457
---
 .../src/components/accounts/AccountForm.vue     | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/admin-spa/src/components/accounts/AccountForm.vue b/web/admin-spa/src/components/accounts/AccountForm.vue
index 09877616..ce0754a6 100644
--- a/web/admin-spa/src/components/accounts/AccountForm.vue
+++ b/web/admin-spa/src/components/accounts/AccountForm.vue
@@ -3440,8 +3440,21 @@ const form = ref({
   apiVersion: props.account?.apiVersion || '',
   deploymentName: props.account?.deploymentName || '',
   // 到期时间字段
-  expireDuration: '',
-  customExpireDate: '',
+  expireDuration: (() => {
+    // 编辑时根据expiresAt初始化expireDuration
+    if (props.account?.expiresAt) {
+      return 'custom' // 如果有过期时间，默认显示为自定义
+    }
+    return ''
+  })(),
+  customExpireDate: (() => {
+    // 编辑时根据expiresAt初始化customExpireDate
+    if (props.account?.expiresAt) {
+      // 转换ISO时间为datetime-local格式 (YYYY-MM-DDTHH:mm)
+      return new Date(props.account.expiresAt).toISOString().slice(0, 16)
+    }
+    return ''
+  })(),
   expiresAt: props.account?.expiresAt || null
 })