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:
root 2026-04-25 21:31:02 +08:00
parent 1d57d5d1c4
commit aa775a111f
7 changed files with 215 additions and 14 deletions

View file

@ -1 +1 @@
v1.7.2.4
v1.7.2.5

View file

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

View file

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

View file

@ -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)
}

View file

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

View file

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

View file

@ -333,6 +333,13 @@
"lastOnline" = "上次在线"
"remained" = "剩余流量"
"status" = "状态"
"clashUrl" = "Clash 链接"
"quickImport" = "一键添加"
"android" = "安卓"
"ios" = "iOS"
"desktop" = "桌面端"
"copied" = "已复制"
"noSubscription" = "暂无订阅"
[pages.users]
"title" = "用户管理"