mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-06 21:24:10 +00:00
feat: add Clash link and Quick Import button to user panel
- New API endpoint /panel/api/inbounds/userSubscriptions for non-admin users - Redesigned /panel/user with Clash link card (copy button) and Quick Import dropdown (Android/iOS/Desktop with icons) - Added i18n keys for en_US and zh_CN - Bumped version to v1.7.2.5
This commit is contained in:
parent
1d57d5d1c4
commit
aa775a111f
7 changed files with 215 additions and 14 deletions
|
|
@ -1 +1 @@
|
|||
v1.7.2.4
|
||||
v1.7.2.5
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
# 2026-04-25 — User Panel: Add Clash Link & Quick Import Button
|
||||
|
||||
## Summary
|
||||
Optimized the user panel (`/panel/user`) to show subscription info and add a one-click import dropdown.
|
||||
|
||||
## Changes
|
||||
|
||||
### Backend
|
||||
- Added `settingService` field to `InboundController`
|
||||
- New endpoint `GET /panel/api/inbounds/userSubscriptions` — returns `subId`, `subClashEnable`, `subClashUrl` for the logged-in user
|
||||
- Route registered before `checkAdmin` middleware so non-admin users can access
|
||||
|
||||
### Frontend (`web/html/user.html`)
|
||||
- Redesigned page with 3 cards:
|
||||
1. **User Info** — traffic stats, expiry, status (polished)
|
||||
2. **Clash Link** — shows Clash subscription URL with copy button, or "暂无订阅" if not enabled
|
||||
3. **Quick Import** — dropdown button with Android/iOS/Desktop options with icons (visual only, functionality TBD)
|
||||
- Added copy-to-clipboard via `ClipboardManager`
|
||||
|
||||
### i18n
|
||||
- Added keys to `translate.en_US.toml` and `translate.zh_CN.toml`:
|
||||
- `clashUrl`, `quickImport`, `android`, `ios`, `desktop`, `copied`, `noSubscription`
|
||||
|
||||
## Files Modified
|
||||
- `web/controller/inbound.go` — added settingService, getUserSubscriptions method
|
||||
- `web/controller/api.go` — registered new route
|
||||
- `web/html/user.html` — redesigned user panel page
|
||||
- `web/translation/translate.en_US.toml` — new i18n keys
|
||||
- `web/translation/translate.zh_CN.toml` — new i18n keys
|
||||
- `config/version` — bumped to v1.7.2.5
|
||||
|
|
@ -46,6 +46,7 @@ func (a *APIController) initRouter(g *gin.RouterGroup) {
|
|||
inbounds := api.Group("/inbounds")
|
||||
a.inboundController = &InboundController{}
|
||||
inbounds.GET("/userInfo", a.inboundController.getUserInfo)
|
||||
inbounds.GET("/userSubscriptions", a.inboundController.getUserSubscriptions)
|
||||
inbounds.Use(a.checkAdmin)
|
||||
a.inboundController.initRouter(inbounds)
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import (
|
|||
type InboundController struct {
|
||||
inboundService service.InboundService
|
||||
xrayService service.XrayService
|
||||
settingService service.SettingService
|
||||
}
|
||||
|
||||
// NewInboundController creates a new InboundController and sets up its routes.
|
||||
|
|
@ -479,3 +480,53 @@ func (a *InboundController) getUserInfo(c *gin.Context) {
|
|||
}
|
||||
jsonObj(c, traffic, nil)
|
||||
}
|
||||
|
||||
// getUserSubscriptions returns subscription URLs for the logged-in user.
|
||||
func (a *InboundController) getUserSubscriptions(c *gin.Context) {
|
||||
user := session.GetLoginUser(c)
|
||||
traffic, err := a.inboundService.GetClientTrafficByEmail(user.Username)
|
||||
if err != nil || traffic == nil {
|
||||
jsonObj(c, gin.H{"subClashEnable": false}, nil)
|
||||
return
|
||||
}
|
||||
|
||||
subId := traffic.SubId
|
||||
if subId == "" {
|
||||
jsonObj(c, gin.H{"subClashEnable": false}, nil)
|
||||
return
|
||||
}
|
||||
|
||||
settingsAny, err := a.settingService.GetDefaultSettings(c.Request.Host)
|
||||
if err != nil {
|
||||
jsonObj(c, gin.H{"subClashEnable": false}, nil)
|
||||
return
|
||||
}
|
||||
|
||||
settings, ok := settingsAny.(map[string]any)
|
||||
if !ok {
|
||||
jsonObj(c, gin.H{"subClashEnable": false}, nil)
|
||||
return
|
||||
}
|
||||
|
||||
subClashEnable := false
|
||||
if v, ok := settings["subClashEnable"]; ok {
|
||||
if b, ok2 := v.(bool); ok2 {
|
||||
subClashEnable = b
|
||||
}
|
||||
}
|
||||
|
||||
subClashUrl := ""
|
||||
if subClashEnable {
|
||||
if uri, ok := settings["subClashURI"]; ok {
|
||||
if s, ok2 := uri.(string); ok2 && s != "" {
|
||||
subClashUrl = s + subId
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
jsonObj(c, gin.H{
|
||||
"subId": subId,
|
||||
"subClashEnable": subClashEnable,
|
||||
"subClashUrl": subClashUrl,
|
||||
}, nil)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-card :class="themeSwitcher.currentTheme" class="user-card">
|
||||
<!-- User Info Card -->
|
||||
<a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
|
||||
<div class="setting-section">
|
||||
<a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}'
|
||||
placement="bottomRight" trigger="click">
|
||||
|
|
@ -48,15 +49,12 @@
|
|||
<a-button shape="circle" icon="setting"></a-button>
|
||||
</a-popover>
|
||||
</div>
|
||||
<div class="text-center mb-24">
|
||||
<div class="text-center mb-16">
|
||||
<a-icon type="user" style="font-size: 48px; color: #008771;" />
|
||||
<h2 class="mt-8">[[ username ]]</h2>
|
||||
<h2 class="mt-8 mb-0">[[ username ]]</h2>
|
||||
</div>
|
||||
<a-divider />
|
||||
<a-divider style="margin: 12px 0;" />
|
||||
<a-descriptions :column="1" bordered size="small">
|
||||
<a-descriptions-item label='{{ i18n "pages.user.username" }}'>
|
||||
[[ username ]]
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label='{{ i18n "pages.user.upload" }}'>
|
||||
[[ traffic ? SizeFormatter.sizeFormat(traffic.up) : '-' ]]
|
||||
</a-descriptions-item>
|
||||
|
|
@ -108,12 +106,59 @@
|
|||
<template v-else>-</template>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<div class="mt-24 text-center">
|
||||
<a-button type="primary" icon="logout" @click="logout">
|
||||
{{ i18n "menu.logout" }}
|
||||
</a-button>
|
||||
</a-card>
|
||||
|
||||
<!-- Clash Link Card -->
|
||||
<a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
|
||||
<template #title>
|
||||
<a-icon type="link" style="margin-right: 8px;" />{{ i18n "pages.user.clashUrl" }}
|
||||
</template>
|
||||
<template v-if="subClashEnable && subClashUrl">
|
||||
<div class="clash-link-box" @click="copy(subClashUrl)">
|
||||
<code>[[ subClashUrl ]]</code>
|
||||
</div>
|
||||
<div class="mt-12 text-center">
|
||||
<a-button type="primary" icon="copy" size="small" @click="copy(subClashUrl)">
|
||||
{{ i18n "copy" }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-empty :description='{{ i18n "pages.user.noSubscription" }}' />
|
||||
</template>
|
||||
</a-card>
|
||||
|
||||
<!-- Quick Import Button -->
|
||||
<a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
|
||||
<div class="text-center">
|
||||
<a-dropdown :trigger="['click']">
|
||||
<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-item key="android">
|
||||
<a-icon type="android" style="margin-right: 8px; font-size: 16px;" />
|
||||
<span>{{ i18n "pages.user.android" }}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="ios">
|
||||
<a-icon type="apple" style="margin-right: 8px; font-size: 16px;" />
|
||||
<span>{{ i18n "pages.user.ios" }}</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="desktop">
|
||||
<a-icon type="laptop" style="margin-right: 8px; font-size: 16px;" />
|
||||
<span>{{ i18n "pages.user.desktop" }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<!-- Logout -->
|
||||
<div class="text-center mt-16">
|
||||
<a-button type="danger" icon="logout" @click="logout">
|
||||
{{ i18n "menu.logout" }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -132,10 +177,13 @@
|
|||
username: '',
|
||||
traffic: null,
|
||||
lang: '',
|
||||
subClashEnable: false,
|
||||
subClashUrl: '',
|
||||
},
|
||||
async mounted() {
|
||||
this.lang = LanguageManager.getLanguage();
|
||||
await this.loadUserInfo();
|
||||
await Promise.all([this.loadUserInfo(), this.loadSubscriptions()]);
|
||||
this.loading = false;
|
||||
},
|
||||
methods: {
|
||||
async loadUserInfo() {
|
||||
|
|
@ -148,7 +196,23 @@
|
|||
} catch (e) {
|
||||
console.error("Failed to get user info:", e);
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
async loadSubscriptions() {
|
||||
try {
|
||||
const msg = await HttpUtil.get('/panel/api/inbounds/userSubscriptions');
|
||||
if (msg.success && msg.obj) {
|
||||
this.subClashEnable = msg.obj.subClashEnable || false;
|
||||
this.subClashUrl = msg.obj.subClashUrl || '';
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to get subscriptions:", e);
|
||||
}
|
||||
},
|
||||
copy(text) {
|
||||
ClipboardManager.copyText(text).then(ok => {
|
||||
const messageType = ok ? 'success' : 'error';
|
||||
this.$message[messageType](ok ? '{{ i18n "pages.user.copied" }}' : 'Copy failed');
|
||||
});
|
||||
},
|
||||
formatExpiryTime(timestamp) {
|
||||
if (timestamp <= 0) return '{{ i18n "unlimited" }}';
|
||||
|
|
@ -166,4 +230,45 @@
|
|||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.clash-link-box {
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
word-break: break-all;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.dark .clash-link-box {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
.dark .clash-link-box:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.light .clash-link-box {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.light .clash-link-box:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-color: rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
.user-card .ant-card-head {
|
||||
min-height: auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.user-card .ant-card-head-title {
|
||||
padding: 12px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.user-card .ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
{{ template "page/body_end" .}}
|
||||
|
|
|
|||
|
|
@ -333,6 +333,13 @@
|
|||
"lastOnline" = "Last Online"
|
||||
"remained" = "Remained"
|
||||
"status" = "Status"
|
||||
"clashUrl" = "Clash Link"
|
||||
"quickImport" = "Quick Import"
|
||||
"android" = "Android"
|
||||
"ios" = "iOS"
|
||||
"desktop" = "Desktop"
|
||||
"copied" = "Copied"
|
||||
"noSubscription" = "No subscription available"
|
||||
|
||||
[pages.users]
|
||||
"title" = "User Management"
|
||||
|
|
|
|||
|
|
@ -333,6 +333,13 @@
|
|||
"lastOnline" = "上次在线"
|
||||
"remained" = "剩余流量"
|
||||
"status" = "状态"
|
||||
"clashUrl" = "Clash 链接"
|
||||
"quickImport" = "一键添加"
|
||||
"android" = "安卓"
|
||||
"ios" = "iOS"
|
||||
"desktop" = "桌面端"
|
||||
"copied" = "已复制"
|
||||
"noSubscription" = "暂无订阅"
|
||||
|
||||
[pages.users]
|
||||
"title" = "用户管理"
|
||||
|
|
|
|||
Loading…
Reference in a new issue