From 22d518b5c9665fda68f9ab94bfc70f8034af2f9a Mon Sep 17 00:00:00 2001
From: root <root@Sora39.localdomain>
Date: Sun, 26 Apr 2026 00:09:37 +0800
Subject: [PATCH] fix: show user quick import dropdown

---
 ...26-04-26-fix-user-quick-import-dropdown.md | 31 +++++++++++++++++++
 web/html/user.html                            | 22 ++++++++++---
 2 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 docs/Tasktracking/2026-04-26-fix-user-quick-import-dropdown.md

diff --git a/docs/Tasktracking/2026-04-26-fix-user-quick-import-dropdown.md b/docs/Tasktracking/2026-04-26-fix-user-quick-import-dropdown.md
new file mode 100644
index 00000000..e17c27a9
--- /dev/null
+++ b/docs/Tasktracking/2026-04-26-fix-user-quick-import-dropdown.md
@@ -0,0 +1,31 @@
+Task Record: Fix User Quick Import Dropdown
+
+Date: 2026-04-26
+Related Module: User panel
+Change Type: Fix
+
+Background
+
+The `/panel/user` quick import dropdown had three menu entries for Android, iOS, and Desktop. The entries were clickable, but the frontend did not render them visibly in the dropdown.
+
+Changes
+
+Updated the quick import dropdown menu to use Ant Design Vue's menu `theme` prop instead of applying the current theme as a plain CSS class.
+Added a dedicated dropdown overlay class so the detached popup layer can inherit page theme styles.
+Added scoped sizing and alignment styles for the quick import menu icons and items.
+
+Impact
+
+Affected file: `web/html/user.html`.
+No API, database, configuration, build, or compatibility changes were made.
+The existing Android, iOS, and Desktop click handlers are unchanged.
+
+Verification
+
+Ran `go test ./web/...`; it failed because the default Go build cache path `/root/.cache/go-build` is read-only in this environment.
+Ran `GOCACHE=/tmp/go-build go test ./web/...`; it passed.
+No local browser runtime verification was performed, following the project constraint to avoid local panel startup and integration runs.
+
+Risks And Follow-Up
+
+The fix targets the dropdown rendering path only. A remote browser check on `/panel/user` is recommended after deployment to confirm the dropdown is visible in both light and dark themes.
diff --git a/web/html/user.html b/web/html/user.html
index ccfd492d..7a88ccdd 100644
--- a/web/html/user.html
+++ b/web/html/user.html
@@ -131,21 +131,21 @@
             <!-- Quick Import Button -->
             <a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
               <div class="text-center">
-                <a-dropdown :trigger="['click']">
+                <a-dropdown :trigger="['click']" :overlay-class-name="themeSwitcher.currentTheme + ' user-quick-import-dropdown'">
                   <a-button type="primary" icon="import" size="large" block>
                     {{ i18n "pages.user.quickImport" }} <a-icon type="down" />
                   </a-button>
-                  <a-menu slot="overlay" :class="themeSwitcher.currentTheme">
+                  <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
                     <a-menu-item key="android" @click="quickImportAndroid">
-                      <a-icon type="android" style="margin-right: 8px; font-size: 16px;" />
+                      <a-icon type="android" class="quick-import-icon" />
                       <span>{{ i18n "pages.user.android" }}</span>
                     </a-menu-item>
                     <a-menu-item key="ios" @click="quickImportIOS">
-                      <a-icon type="apple" style="margin-right: 8px; font-size: 16px;" />
+                      <a-icon type="apple" class="quick-import-icon" />
                       <span>{{ i18n "pages.user.ios" }}</span>
                     </a-menu-item>
                     <a-menu-item key="desktop" @click="quickImportDesktop">
-                      <a-icon type="laptop" style="margin-right: 8px; font-size: 16px;" />
+                      <a-icon type="laptop" class="quick-import-icon" />
                       <span>{{ i18n "pages.user.desktop" }}</span>
                     </a-menu-item>
                   </a-menu>
@@ -300,5 +300,17 @@
   .user-card .ant-card-body {
     padding: 16px;
   }
+  .user-quick-import-dropdown .ant-dropdown-menu {
+    min-width: 160px;
+  }
+  .user-quick-import-dropdown .ant-dropdown-menu-item {
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+  }
+  .user-quick-import-dropdown .quick-import-icon {
+    width: 16px;
+    font-size: 16px;
+  }
 </style>
 {{ template "page/body_end" .}}