优化ui
This commit is contained in:
+10
-38
@@ -1,6 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { formatLocalDateTime } from "@/lib/datetime";
|
||||
import { getRequestOrigin } from "@/lib/request-origin";
|
||||
import { buildSubscriptionUrl, describeRemainingTraffic } from "@/lib/subscription";
|
||||
import { requireUserSession } from "@/lib/session";
|
||||
@@ -31,20 +32,11 @@ export default async function MePage() {
|
||||
|
||||
return (
|
||||
<main className="me-shell">
|
||||
<div aria-hidden="true" className="me-backdrop">
|
||||
<span className="me-glow me-glow--warm" />
|
||||
<span className="me-glow me-glow--cool" />
|
||||
<span className="me-glow me-glow--light" />
|
||||
</div>
|
||||
<section className="me-stage">
|
||||
<article className="me-panel me-hero">
|
||||
<div className="me-hero-copy">
|
||||
<span className="eyebrow">FEIEPROXY SELF SERVICE</span>
|
||||
<span className="eyebrow">账户中心</span>
|
||||
<h1>{user.username}</h1>
|
||||
<p className="page-lede">
|
||||
鹅梯 FeieProxy 用户面板。这里可以查看配额状态、获取订阅链接,并通过
|
||||
Clash URL Scheme 一键导入当前配置。
|
||||
</p>
|
||||
<div className="badge-row">
|
||||
<span
|
||||
className={`status-pill ${
|
||||
@@ -54,7 +46,7 @@ export default async function MePage() {
|
||||
{user.enabled ? "账号已启用" : "账号已禁用"}
|
||||
</span>
|
||||
<span className="status-pill status-pill--neutral">
|
||||
{user.expires_at ?? "长期有效"}
|
||||
{formatLocalDateTime(user.expires_at, "长期有效")}
|
||||
</span>
|
||||
<span className="status-pill status-pill--warm">
|
||||
{describeRemainingTraffic(user)}
|
||||
@@ -62,7 +54,7 @@ export default async function MePage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="me-identity-card">
|
||||
<span className="feature-kicker">ACCOUNT SNAPSHOT</span>
|
||||
<span className="feature-kicker">用户 ID</span>
|
||||
<strong className="mono break-all">{user.auth_id}</strong>
|
||||
<p className="muted">
|
||||
订阅名称:{user.subscription_label || user.username}
|
||||
@@ -74,18 +66,15 @@ export default async function MePage() {
|
||||
<article className="me-panel me-subscription-card">
|
||||
<div className="section-title section-title--top">
|
||||
<div>
|
||||
<span className="feature-kicker">SUBSCRIPTION</span>
|
||||
<h2>一键导入配置</h2>
|
||||
<span className="feature-kicker">订阅</span>
|
||||
<h2>订阅</h2>
|
||||
</div>
|
||||
<span className="status-pill status-pill--ink">Clash / Mihomo</span>
|
||||
</div>
|
||||
<p className="muted">
|
||||
推荐直接通过按钮唤起支持 `clash://` 的客户端导入。若浏览器拦截了自定义协议,允许一次即可。
|
||||
</p>
|
||||
<div className="me-action-row">
|
||||
{clashImportUrl ? (
|
||||
<a className="primary-button me-action-button" href={clashImportUrl}>
|
||||
一键导入 Clash
|
||||
一键导入
|
||||
</a>
|
||||
) : (
|
||||
<span className="status-pill status-pill--off">订阅暂不可用</span>
|
||||
@@ -102,21 +91,9 @@ export default async function MePage() {
|
||||
) : null}
|
||||
</div>
|
||||
<div className="me-link-card">
|
||||
<span className="feature-kicker">SUBSCRIPTION URL</span>
|
||||
<span className="feature-kicker">订阅链接</span>
|
||||
<p className="mono break-all">{subscriptionUrl ?? "暂不可用"}</p>
|
||||
</div>
|
||||
<div className="me-tip-grid">
|
||||
<div className="me-tip-card">
|
||||
<span className="feature-kicker">TIP 01</span>
|
||||
<strong>客户端未唤起时</strong>
|
||||
<p className="muted">确认已安装支持 `clash://` 的客户端,并允许浏览器打开外部应用。</p>
|
||||
</div>
|
||||
<div className="me-tip-card">
|
||||
<span className="feature-kicker">TIP 02</span>
|
||||
<strong>手动导入也可用</strong>
|
||||
<p className="muted">复制上方订阅链接,在 Clash / Mihomo 客户端中粘贴导入即可。</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div className="me-side-stack">
|
||||
@@ -145,13 +122,8 @@ export default async function MePage() {
|
||||
</article>
|
||||
|
||||
<article className="me-panel me-support-card">
|
||||
<span className="feature-kicker">ACCESS</span>
|
||||
<h2>使用说明</h2>
|
||||
<ul className="me-note-list">
|
||||
<li>域名入口适合网页登录与获取订阅。</li>
|
||||
<li>现有节点鉴权仍可继续使用原来的 `IP:3000` 直连地址。</li>
|
||||
<li>如果订阅内容更新,重新点击导入按钮即可刷新客户端配置。</li>
|
||||
</ul>
|
||||
<span className="feature-kicker">账户</span>
|
||||
<h2>账户</h2>
|
||||
<form action="/logout" method="post">
|
||||
<button className="ghost-button me-action-button me-action-button--full" type="submit">
|
||||
退出登录
|
||||
|
||||
Reference in New Issue
Block a user