fix: replace user quick import dropdown with direct action buttons

docs/Tasktracking/2026-04-26-user-quick-import-buttons.md

@@ -0,0 +1,33 @@
+Task Record:
+
+Date: 2026-04-26
+Related Module: web/html/user.html
+Change Type: Fix
+
+Background
+
+The quick import entry on `/panel/user` was implemented as an Ant Design dropdown menu. In the current UI state, menu item text failed to display reliably unless SVG-related markup was manually removed, making the one-click import actions unusable.
+
+Changes
+
+Replaced the dropdown-based quick import block with an inline action section inside the existing card body.
+Changed the quick import area to show a small title using `pages.user.quickImport`.
+Added three dedicated buttons for Android, iOS, and Desktop that reuse the existing handlers: `quickImportAndroid`, `quickImportIOS`, and `quickImportDesktop`.
+Removed obsolete dropdown-specific styles and added compact styles for the new button group layout.
+
+Impact
+
+Affected files: `web/html/user.html`.
+No API, database, build pipeline, or backend logic changes.
+User-panel behavior changed from "click dropdown then choose platform" to "direct platform buttons".
+No upstream/downstream interface compatibility impact.
+
+Verification
+
+Command: `go test ./web/...`
+Result: Passed.
+
+Risks And Follow-Up
+
+The change avoids dropdown/menu rendering paths and should be more robust for text visibility.
+If further UX tuning is needed, spacing and button style can be adjusted without changing quick import logic.

web/html/user.html

@@ -128,28 +128,21 @@
               </template>
             </a-card>
 
-            <!-- Quick Import Button -->
+            <!-- Quick Import Actions -->
             <a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
-              <div class="text-center">
+              <div class="quick-import-section">
-                <a-dropdown :trigger="['click']" :overlay-class-name="themeSwitcher.currentTheme + ' user-quick-import-dropdown'">
+                <div class="quick-import-title">{{ i18n "pages.user.quickImport" }}</div>
-                  <a-button type="primary" icon="import" size="large" block>
+                <a-space direction="vertical" size="small" class="quick-import-actions">
-                    {{ i18n "pages.user.quickImport" }} <a-icon type="down" />
+                  <a-button type="primary" block @click="quickImportAndroid">
+                    {{ i18n "pages.user.android" }}
                   </a-button>
-                  <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
+                  <a-button type="primary" block @click="quickImportIOS">
-                    <a-menu-item key="android" @click="quickImportAndroid">
+                    {{ i18n "pages.user.ios" }}
-                      <a-icon type="android" class="quick-import-icon" />
+                  </a-button>
-                      <span>{{ i18n "pages.user.android" }}</span>
+                  <a-button type="primary" block @click="quickImportDesktop">
-                    </a-menu-item>
+                    {{ i18n "pages.user.desktop" }}
-                    <a-menu-item key="ios" @click="quickImportIOS">
+                  </a-button>
-                      <a-icon type="apple" class="quick-import-icon" />
+                </a-space>
-                      <span>{{ i18n "pages.user.ios" }}</span>
-                    </a-menu-item>
-                    <a-menu-item key="desktop" @click="quickImportDesktop">
-                      <a-icon type="laptop" class="quick-import-icon" />
-                      <span>{{ i18n "pages.user.desktop" }}</span>
-                    </a-menu-item>
-                  </a-menu>
-                </a-dropdown>
               </div>
             </a-card>
 
@@ -300,17 +293,20 @@
   .user-card .ant-card-body {
     padding: 16px;
   }
-  .user-quick-import-dropdown .ant-dropdown-menu {
+  .quick-import-section {
-    min-width: 160px;
+    text-align: left;
   }
-  .user-quick-import-dropdown .ant-dropdown-menu-item {
+  .quick-import-title {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .quick-import-actions {
     display: flex;
-    align-items: center;
+    width: 100%;
-    column-gap: 8px;
   }
-  .user-quick-import-dropdown .quick-import-icon {
+  .quick-import-actions .ant-space-item {
-    width: 16px;
+    width: 100%;
-    font-size: 16px;
   }
 </style>
 {{ template "page/body_end" .}}