Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-06 21:24:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix: show user quick import dropdown

Browse source
This commit is contained in:
root 2026-04-26 00:09:37 +08:00
parent 3ba7e43bc3
commit 22d518b5c9
2 changed files with 48 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
docs/Tasktracking/2026-04-26-fix-user-quick-import-dropdown.md Normal file
View file

@ -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.

22
web/html/user.html
View file

@ -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" .}}