From 190ffa34f9c8a7223f6212b84e571035d1e891cf Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Mon, 25 May 2026 11:50:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20Token=20=E6=8C=87?=
 =?UTF-8?q?=E5=AE=9A=E6=97=A5=E6=9C=9F=E8=BE=93=E5=85=A5=E4=B8=8D=E5=8F=AF?=
 =?UTF-8?q?=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                     |  6 ++++
 frontend/src/components/ApiTokenManager.vue | 32 +++++++++++++++++----
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index 8950d06..c6bbf53 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -1,5 +1,11 @@
 # 项目上下文记录
 
+## 2026-05-25：修复 API Token 指定日期输入不可见
+
+- `frontend/src/components/ApiTokenManager.vue` 中创建/编辑 Token 的到期日期控件从 `n-date-picker` 改为原生 `input[type=date]`，避免日期选择组件在弹窗内出现占位但输入框不可见的问题。
+- 原生日期输入继续使用 `YYYY-MM-DD` 字符串绑定到 `tokenForm.expires_at`，后端 `/api/tokens/create` 和 `/api/tokens/update` 请求体不变；仅补充本地样式以匹配当前主题和 Naive UI 表单尺寸。
+- 已验证：`npm run build` 和 `.venv\Scripts\python.exe -m compileall app` 通过；浏览器实测 `系统设置 > API Token > 生成 Token > 指定日期` 下日期输入框可见，并可输入 `2026-12-31`。
+
 ## 2026-05-25：拆分 API Token 管理和 API 文档
 
 - 前端删除旧 `frontend/src/components/ApiCenter.vue`，拆为 `ApiTokenManager.vue` 和 `ApiDocs.vue`：API Token 管理迁入 `系统设置 > API Token` 独立分页，左侧菜单“API 中心”改为“API 文档”，只展示 Swagger 文档。
diff --git a/frontend/src/components/ApiTokenManager.vue b/frontend/src/components/ApiTokenManager.vue
index caf45b1..ff8a971 100644
--- a/frontend/src/components/ApiTokenManager.vue
+++ b/frontend/src/components/ApiTokenManager.vue
@@ -65,12 +65,11 @@
           </n-radio-group>
         </n-form-item>
         <n-form-item v-if="!tokenForm.permanent" label="到期日期">
-          <n-date-picker
-            v-model:formatted-value="tokenForm.expires_at"
+          <input
+            v-model="tokenForm.expires_at"
+            class="api-token-date-input"
             type="date"
-            value-format="yyyy-MM-dd"
-            clearable
-            class="full-width"
+            :disabled="savingToken"
           />
         </n-form-item>
         <n-form-item label="启用">
@@ -387,6 +386,29 @@ function formatDateTime(value?: string | null): string {
   gap: 6px;
 }
 
+.api-token-date-input {
+  width: 100%;
+  height: 34px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  border: 1px solid var(--td-border-color);
+  border-radius: var(--td-radius-default);
+  background: var(--td-card-bg);
+  color: var(--td-text-color-primary);
+  font: inherit;
+  outline: none;
+}
+
+.api-token-date-input:focus {
+  border-color: var(--n-primary-color, #18a058);
+  box-shadow: 0 0 0 2px rgba(24, 160, 88, 0.12);
+}
+
+.api-token-date-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .raw-token-input {
   margin-top: 12px;
 }