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

fix: replace user quick import dropdown with direct action buttons

Browse source
This commit is contained in:
root 2026-04-26 00:26:20 +08:00
parent 7b24a8d704
commit 18bba12ef1
2 changed files with 57 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
docs/Tasktracking/2026-04-26-user-quick-import-buttons.md Normal file
View file

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

52
web/html/user.html
View file

@ -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">
<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" />
<div class="quick-import-section">
<div class="quick-import-title">{{ i18n "pages.user.quickImport" }}</div>
<a-space direction="vertical" size="small" class="quick-import-actions">
<a-button type="primary" block @click="quickImportAndroid">
{{ i18n "pages.user.android" }}
</a-button>
<a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
<a-menu-item key="android" @click="quickImportAndroid">
<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" class="quick-import-icon" />
<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>
<a-button type="primary" block @click="quickImportIOS">
{{ i18n "pages.user.ios" }}
</a-button>
<a-button type="primary" block @click="quickImportDesktop">
{{ i18n "pages.user.desktop" }}
</a-button>
</a-space>
</div>
</a-card>
@ -300,17 +293,20 @@
.user-card .ant-card-body {
padding: 16px;
}
.user-quick-import-dropdown .ant-dropdown-menu {
min-width: 160px;
.quick-import-section {
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;
column-gap: 8px;
width: 100%;
}
.user-quick-import-dropdown .quick-import-icon {
width: 16px;
font-size: 16px;
.quick-import-actions .ant-space-item {
width: 100%;
}
</style>
{{ template "page/body_end" .}}