HI-VPN/hi-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

merge: 同步 upstream/main 新功能到定制版本
Build and Release / Build (push) Has been cancelled
Details
Issue Close Require / issue-close-require (push) Has been cancelled
Details

Browse Source 
- 分流规则 + 用户流量统计
- 验证码功能
- 节点分组管理 UI
- 重构用户分组组件
This commit is contained in:
shanshanzhong
2026-03-19 03:16:59 -07:00
parent 830430645c f8fbf5529f
commit 3806264343
89 changed files with 7036 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/package.json
+1 -1
View File
@@ -16,7 +16,7 @@
"@faker-js/faker": "^10.0.0",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"@lottiefiles/dotlottie-react": "^0.17.7",
"@lottiefiles/dotlottie-react": "^0.17.15",
"@stripe/react-stripe-js": "^5.4.0",
"@stripe/stripe-js": "^8.5.2",
"@tailwindcss/vite": "^4.0.6",
apps/user/public/assets/locales.zip
BIN
View File
Binary file not shown.
apps/user/public/assets/locales/en-US/auth.json
+18
View File
@@ -1,12 +1,21 @@
{
"authenticating": "Authenticating...",
"binding": "Binding account...",
"captcha": {
"clickToRefresh": "Click to refresh",
"noImage": "No Image",
"placeholder": "Enter captcha code...",
"refresh": "Refresh captcha",
"required": "Please enter captcha code"
},
"get": "Get Code",
"login": {
"codeLogin": "Login with Code",
"email": "Please enter a valid email address",
"emailPlaceholder": "Enter your email...",
"forgotPassword": "Forgot Password?",
"passwordLogin": "Login with Password",
"passwordPlaceholder": "Enter your password...",
"registerAccount": "Register Account",
"success": "Login successful!",
"title": "Login"
@@ -17,19 +26,28 @@
},
"privacyPolicy": "Privacy Policy",
"register": {
"areaCodePlaceholder": "Area code...",
"codePlaceholder": "Enter code...",
"email": "Please enter a valid email address",
"emailPlaceholder": "Enter your email...",
"existingAccount": "Already have an account?",
"invite": "Invitation Code (Optional)",
"message": "Registration is currently disabled",
"passwordMismatch": "Passwords do not match",
"passwordPlaceholder": "Enter your password...",
"repeatPasswordPlaceholder": "Enter password again...",
"success": "Registration successful!",
"switchToLogin": "Login",
"telephonePlaceholder": "Enter your telephone...",
"title": "Register",
"whitelist": "This email domain is not in the whitelist"
},
"reset": {
"codePlaceholder": "Enter code...",
"email": "Please enter a valid email address",
"emailPlaceholder": "Enter your email...",
"existingAccount": "Remember your password?",
"passwordPlaceholder": "Enter your new password...",
"success": "Password reset successful!",
"switchToLogin": "Login",
"title": "Reset Password"
apps/user/public/assets/locales/en-US/components.json
+1
View File
@@ -76,6 +76,7 @@
"server": "Server Management",
"subscribe": "Subscribe",
"ticket": "Ticket Management",
"traffic": "Traffic Statistics",
"wallet": "Balance"
},
"pagination": {
apps/user/public/assets/locales/en-US/traffic.json
+16
View File
@@ -0,0 +1,16 @@
{
"title": "Traffic Statistics",
"selectSubscription": "Select Subscription",
"days7": "7 Days",
"days30": "30 Days",
"totalTraffic": "Total Traffic",
"uploadTraffic": "Upload Traffic",
"downloadTraffic": "Download Traffic",
"trafficTrend": "Traffic Trend",
"trafficRatio": "Upload/Download Ratio",
"upload": "Upload",
"download": "Download",
"noData": "No traffic data available",
"date": "Date",
"traffic": "Traffic (MB)"
}
apps/user/public/assets/locales/zh-CN/auth.json
+18
View File
@@ -1,12 +1,21 @@
{
"authenticating": "正在认证...",
"binding": "正在绑定账号...",
"captcha": {
"clickToRefresh": "点击刷新",
"noImage": "无图片",
"placeholder": "请输入验证码...",
"refresh": "刷新验证码",
"required": "请输入验证码"
},
"get": "获取验证码",
"login": {
"codeLogin": "验证码登录",
"email": "请输入有效的邮箱地址",
"emailPlaceholder": "请输入邮箱...",
"forgotPassword": "忘记密码？",
"passwordLogin": "密码登录",
"passwordPlaceholder": "请输入密码...",
"registerAccount": "注册账号",
"success": "登录成功！",
"title": "登录"
@@ -17,19 +26,28 @@
},
"privacyPolicy": "隐私政策",
"register": {
"areaCodePlaceholder": "区号...",
"codePlaceholder": "请输入验证码...",
"email": "请输入有效的邮箱地址",
"emailPlaceholder": "请输入邮箱...",
"existingAccount": "已有账号？",
"invite": "邀请码（可选）",
"message": "注册功能暂时不可用",
"passwordMismatch": "两次密码输入不一致",
"passwordPlaceholder": "请输入密码...",
"repeatPasswordPlaceholder": "请再次输入密码...",
"success": "注册成功！",
"switchToLogin": "登录",
"telephonePlaceholder": "请输入手机号...",
"title": "注册",
"whitelist": "该邮箱域名不在白名单中"
},
"reset": {
"codePlaceholder": "请输入验证码...",
"email": "请输入有效的邮箱地址",
"emailPlaceholder": "请输入邮箱...",
"existingAccount": "记得密码了？",
"passwordPlaceholder": "请输入新密码...",
"success": "密码重置成功！",
"switchToLogin": "登录",
"title": "重置密码"
apps/user/public/assets/locales/zh-CN/components.json
+1
View File
@@ -76,6 +76,7 @@
"server": "服务器管理",
"subscribe": "订阅管理",
"ticket": "工单管理",
"traffic": "流量统计",
"wallet": "余额管理"
},
"pagination": {
apps/user/public/assets/locales/zh-CN/traffic.json
+16
View File
@@ -0,0 +1,16 @@
{
"title": "流量统计",
"selectSubscription": "选择订阅",
"days7": "7 天",
"days30": "30 天",
"totalTraffic": "总流量",
"uploadTraffic": "上传流量",
"downloadTraffic": "下载流量",
"trafficTrend": "流量趋势",
"trafficRatio": "上传/下载占比",
"upload": "上传",
"download": "下载",
"noData": "暂无流量数据",
"date": "日期",
"traffic": "流量 (MB)"
}
apps/user/src/layout/navs.ts
+5
View File
@@ -40,6 +40,11 @@ export function useNavs() {
icon: "uil:shop",
title: t("menu.subscribe", "Subscribe"),
},
{
url: "/traffic",
icon: "uil:chart-line",
title: t("menu.traffic", "Traffic Statistics"),
},
],
},
{
apps/user/src/routeTree.gen.ts
+27
View File
@@ -28,6 +28,9 @@ const mainPurchasingIndexLazyRouteImport = createFileRoute(
'/(main)/purchasing/',
)()
const mainuserWalletLazyRouteImport = createFileRoute('/(main)/(user)/wallet')()
const mainuserTrafficLazyRouteImport = createFileRoute(
'/(main)/(user)/traffic',
)()
const mainuserTicketLazyRouteImport = createFileRoute('/(main)/(user)/ticket')()
const mainuserSubscribeLazyRouteImport = createFileRoute(
'/(main)/(user)/subscribe',
@@ -126,6 +129,15 @@ const mainuserWalletLazyRoute = mainuserWalletLazyRouteImport
getParentRoute: () => mainuserRouteLazyRoute,
} as any)
.lazy(() => import('./routes/(main)/(user)/wallet.lazy').then((d) => d.Route))
const mainuserTrafficLazyRoute = mainuserTrafficLazyRouteImport
.update({
id: '/traffic',
path: '/traffic',
getParentRoute: () => mainuserRouteLazyRoute,
} as any)
.lazy(() =>
import('./routes/(main)/(user)/traffic.lazy').then((d) => d.Route),
)
const mainuserTicketLazyRoute = mainuserTicketLazyRouteImport
.update({
id: '/ticket',
@@ -220,6 +232,7 @@ export interface FileRoutesByFullPath {
'/profile': typeof mainuserProfileLazyRoute
'/subscribe': typeof mainuserSubscribeLazyRoute
'/ticket': typeof mainuserTicketLazyRoute
'/traffic': typeof mainuserTrafficLazyRoute
'/wallet': typeof mainuserWalletLazyRoute
'/purchasing': typeof mainPurchasingIndexLazyRoute
'/purchasing/order': typeof mainPurchasingOrderIndexRoute
@@ -240,6 +253,7 @@ export interface FileRoutesByTo {
'/profile': typeof mainuserProfileLazyRoute
'/subscribe': typeof mainuserSubscribeLazyRoute
'/ticket': typeof mainuserTicketLazyRoute
'/traffic': typeof mainuserTrafficLazyRoute
'/wallet': typeof mainuserWalletLazyRoute
'/purchasing': typeof mainPurchasingIndexLazyRoute
'/purchasing/order': typeof mainPurchasingOrderIndexRoute
@@ -263,6 +277,7 @@ export interface FileRoutesById {
'/(main)/(user)/profile': typeof mainuserProfileLazyRoute
'/(main)/(user)/subscribe': typeof mainuserSubscribeLazyRoute
'/(main)/(user)/ticket': typeof mainuserTicketLazyRoute
'/(main)/(user)/traffic': typeof mainuserTrafficLazyRoute
'/(main)/(user)/wallet': typeof mainuserWalletLazyRoute
'/(main)/purchasing/': typeof mainPurchasingIndexLazyRoute
'/(main)/purchasing/order/': typeof mainPurchasingOrderIndexRoute
@@ -285,6 +300,7 @@ export interface FileRouteTypes {
| '/profile'
| '/subscribe'
| '/ticket'
| '/traffic'
| '/wallet'
| '/purchasing'
| '/purchasing/order'
@@ -305,6 +321,7 @@ export interface FileRouteTypes {
| '/profile'
| '/subscribe'
| '/ticket'
| '/traffic'
| '/wallet'
| '/purchasing'
| '/purchasing/order'
@@ -327,6 +344,7 @@ export interface FileRouteTypes {
| '/(main)/(user)/profile'
| '/(main)/(user)/subscribe'
| '/(main)/(user)/ticket'
| '/(main)/(user)/traffic'
| '/(main)/(user)/wallet'
| '/(main)/purchasing/'
| '/(main)/purchasing/order/'
@@ -418,6 +436,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof mainuserWalletLazyRouteImport
parentRoute: typeof mainuserRouteLazyRoute
}
'/(main)/(user)/traffic': {
id: '/(main)/(user)/traffic'
path: '/traffic'
fullPath: '/traffic'
preLoaderRoute: typeof mainuserTrafficLazyRouteImport
parentRoute: typeof mainuserRouteLazyRoute
}
'/(main)/(user)/ticket': {
id: '/(main)/(user)/ticket'
path: '/ticket'
@@ -493,6 +518,7 @@ interface mainuserRouteLazyRouteChildren {
mainuserProfileLazyRoute: typeof mainuserProfileLazyRoute
mainuserSubscribeLazyRoute: typeof mainuserSubscribeLazyRoute
mainuserTicketLazyRoute: typeof mainuserTicketLazyRoute
mainuserTrafficLazyRoute: typeof mainuserTrafficLazyRoute
mainuserWalletLazyRoute: typeof mainuserWalletLazyRoute
}
@@ -505,6 +531,7 @@ const mainuserRouteLazyRouteChildren: mainuserRouteLazyRouteChildren = {
mainuserProfileLazyRoute: mainuserProfileLazyRoute,
mainuserSubscribeLazyRoute: mainuserSubscribeLazyRoute,
mainuserTicketLazyRoute: mainuserTicketLazyRoute,
mainuserTrafficLazyRoute: mainuserTrafficLazyRoute,
mainuserWalletLazyRoute: mainuserWalletLazyRoute,
}
apps/user/src/routes/(main)/(user)/traffic.lazy.tsx
+6
View File
@@ -0,0 +1,6 @@
import { createLazyFileRoute } from "@tanstack/react-router";
import TrafficStatistics from "@/sections/user/traffic-statistics";
export const Route = createLazyFileRoute("/(main)/(user)/traffic")({
component: TrafficStatistics,
});
apps/user/src/sections/auth/email/login-form.tsx
+39 -5
View File
@@ -10,13 +10,14 @@ import {
import { Input } from "@workspace/ui/components/input";
import { Icon } from "@workspace/ui/composed/icon";
import type { Dispatch, SetStateAction } from "react";
import { useRef } from "react";
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { z } from "zod";
import { useGlobalStore } from "@/stores/global";
import type { TurnstileRef } from "../turnstile";
import CloudFlareTurnstile from "../turnstile";
import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
export default function LoginForm({
loading,
@@ -34,14 +35,23 @@ export default function LoginForm({
const { t } = useTranslation("auth");
const { common } = useGlobalStore();
const { verify } = common;
const [captchaId, setCaptchaId] = useState("");
const isTurnstile = verify.captcha_type === "turnstile";
const isLocal = verify.captcha_type === "local";
const captchaEnabled = verify.enable_user_login_captcha;
const formSchema = z.object({
email: z.email(t("login.email", "Please enter a valid email address")),
password: z.string(),
cf_token:
verify.enable_login_verify && verify.turnstile_site_key
captchaEnabled && isTurnstile && verify.turnstile_site_key
? z.string()
: z.string().optional(),
captcha_code:
captchaEnabled && isLocal
? z.string().min(1, t("captcha.required", "Please enter captcha code"))
: z.string().optional(),
});
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
@@ -49,11 +59,17 @@ export default function LoginForm({
});
const turnstile = useRef<TurnstileRef>(null);
const localCaptcha = useRef<LocalCaptchaRef>(null);
const handleSubmit = form.handleSubmit((data) => {
try {
// Add captcha_id for local captcha
if (isLocal && captchaEnabled) {
(data as any).captcha_id = captchaId;
}
onSubmit(data);
} catch (_error) {
turnstile.current?.reset();
localCaptcha.current?.reset();
}
});
@@ -68,7 +84,7 @@ export default function LoginForm({
<FormItem>
<FormControl>
<Input
placeholder="Enter your email..."
placeholder={t("login.emailPlaceholder", "Enter your email...")}
type="email"
{...field}
/>
@@ -84,7 +100,7 @@ export default function LoginForm({
<FormItem>
<FormControl>
<Input
placeholder="Enter your password..."
placeholder={t("login.passwordPlaceholder", "Enter your password...")}
type="password"
{...field}
/>
@@ -93,7 +109,7 @@ export default function LoginForm({
</FormItem>
)}
/>
{verify.enable_login_verify && (
{captchaEnabled && isTurnstile && (
<FormField
control={form.control}
name="cf_token"
@@ -111,6 +127,24 @@ export default function LoginForm({
)}
/>
)}
{captchaEnabled && isLocal && (
<FormField
control={form.control}
name="captcha_code"
render={({ field }) => (
<FormItem>
<FormControl>
<LocalCaptcha
{...field}
ref={localCaptcha}
onCaptchaIdChange={setCaptchaId}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<Button disabled={loading} type="submit">
{loading && <Icon className="animate-spin" icon="mdi:loading" />}
{t("login.title", "Login")}
apps/user/src/sections/auth/email/register-form.tsx
+41 -7
View File
@@ -11,7 +11,7 @@ import { Input } from "@workspace/ui/components/input";
import { Icon } from "@workspace/ui/composed/icon";
import { Markdown } from "@workspace/ui/composed/markdown";
import type { Dispatch, SetStateAction } from "react";
import { useRef } from "react";
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { z } from "zod";
@@ -19,6 +19,7 @@ import { useGlobalStore } from "@/stores/global";
import SendCode from "../send-code";
import type { TurnstileRef } from "../turnstile";
import CloudFlareTurnstile from "../turnstile";
import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
export default function RegisterForm({
loading,
@@ -36,6 +37,11 @@ export default function RegisterForm({
const { t } = useTranslation("auth");
const { common } = useGlobalStore();
const { verify, auth, invite } = common;
const [captchaId, setCaptchaId] = useState("");
const isTurnstile = verify.captcha_type === "turnstile";
const isLocal = verify.captcha_type === "local";
const captchaEnabled = verify.enable_user_register_captcha;
const handleCheckUser = async (email: string) => {
try {
@@ -67,9 +73,13 @@ export default function RegisterForm({
code: auth.email.enable_verify ? z.string() : z.string().nullish(),
invite: invite.forced_invite ? z.string().min(1) : z.string().nullish(),
cf_token:
verify.enable_register_verify && verify.turnstile_site_key
captchaEnabled && isTurnstile && verify.turnstile_site_key
? z.string()
: z.string().nullish(),
captcha_code:
captchaEnabled && isLocal
? z.string().min(1, t("captcha.required", "Please enter captcha code"))
: z.string().nullish(),
})
.superRefine(({ password, repeat_password }, ctx) => {
if (password !== repeat_password) {
@@ -90,11 +100,17 @@ export default function RegisterForm({
});
const turnstile = useRef<TurnstileRef>(null);
const localCaptcha = useRef<LocalCaptchaRef>(null);
const handleSubmit = form.handleSubmit((data) => {
try {
// Add captcha_id for local captcha
if (isLocal && captchaEnabled) {
(data as any).captcha_id = captchaId;
}
onSubmit(data);
} catch (_error) {
turnstile.current?.reset();
localCaptcha.current?.reset();
}
});
@@ -114,7 +130,7 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<Input
placeholder="Enter your email..."
placeholder={t("register.emailPlaceholder", "Enter your email...")}
type="email"
{...field}
/>
@@ -130,7 +146,7 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<Input
placeholder="Enter your password..."
placeholder={t("register.passwordPlaceholder", "Enter your password...")}
type="password"
{...field}
/>
@@ -147,7 +163,7 @@ export default function RegisterForm({
<FormControl>
<Input
disabled={loading}
placeholder="Enter password again..."
placeholder={t("register.repeatPasswordPlaceholder", "Enter password again...")}
type="password"
{...field}
/>
@@ -166,7 +182,7 @@ export default function RegisterForm({
<div className="flex items-center gap-2">
<Input
disabled={loading}
placeholder="Enter code..."
placeholder={t("register.codePlaceholder", "Enter code...")}
type="text"
{...field}
value={field.value as string}
@@ -205,7 +221,7 @@ export default function RegisterForm({
</FormItem>
)}
/>
{verify.enable_register_verify && (
{captchaEnabled && isTurnstile && (
<FormField
control={form.control}
name="cf_token"
@@ -223,6 +239,24 @@ export default function RegisterForm({
)}
/>
)}
{captchaEnabled && isLocal && (
<FormField
control={form.control}
name="captcha_code"
render={({ field }) => (
<FormItem>
<FormControl>
<LocalCaptcha
{...field}
ref={localCaptcha}
onCaptchaIdChange={setCaptchaId}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<Button disabled={loading} type="submit">
{loading && <Icon className="animate-spin" icon="mdi:loading" />}
{t("register.title", "Register")}
apps/user/src/sections/auth/email/reset-form.tsx
+40 -6
View File
@@ -10,7 +10,7 @@ import {
import { Input } from "@workspace/ui/components/input";
import { Icon } from "@workspace/ui/composed/icon";
import type { Dispatch, SetStateAction } from "react";
import { useRef } from "react";
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { z } from "zod";
@@ -18,6 +18,7 @@ import { useGlobalStore } from "@/stores/global";
import SendCode from "../send-code";
import type { TurnstileRef } from "../turnstile";
import CloudFlareTurnstile from "../turnstile";
import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
export default function ResetForm({
loading,
@@ -36,6 +37,11 @@ export default function ResetForm({
const { common } = useGlobalStore();
const { verify, auth } = common;
const [captchaId, setCaptchaId] = useState("");
const isTurnstile = verify.captcha_type === "turnstile";
const isLocal = verify.captcha_type === "local";
const captchaEnabled = verify.enable_user_reset_password_captcha;
const formSchema = z.object({
email: z
@@ -44,9 +50,13 @@ export default function ResetForm({
password: z.string(),
code: auth?.email?.enable_verify ? z.string() : z.string().nullish(),
cf_token:
verify.enable_register_verify && verify.turnstile_site_key
captchaEnabled && isTurnstile && verify.turnstile_site_key
? z.string()
: z.string().nullish(),
captcha_code:
captchaEnabled && isLocal
? z.string().min(1, t("captcha.required", "Please enter captcha code"))
: z.string().nullish(),
});
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
@@ -54,11 +64,17 @@ export default function ResetForm({
});
const turnstile = useRef<TurnstileRef>(null);
const localCaptcha = useRef<LocalCaptchaRef>(null);
const handleSubmit = form.handleSubmit((data) => {
try {
// Add captcha_id for local captcha
if (isLocal && captchaEnabled) {
(data as any).captcha_id = captchaId;
}
onSubmit(data);
} catch (_error) {
turnstile.current?.reset();
localCaptcha.current?.reset();
}
});
@@ -73,7 +89,7 @@ export default function ResetForm({
<FormItem>
<FormControl>
<Input
placeholder="Enter your email..."
placeholder={t("reset.emailPlaceholder", "Enter your email...")}
type="email"
{...field}
/>
@@ -91,7 +107,7 @@ export default function ResetForm({
<div className="flex items-center gap-2">
<Input
disabled={loading}
placeholder="Enter code..."
placeholder={t("reset.codePlaceholder", "Enter code...")}
type="text"
{...field}
value={field.value as string}
@@ -116,7 +132,7 @@ export default function ResetForm({
<FormItem>
<FormControl>
<Input
placeholder="Enter your new password..."
placeholder={t("reset.passwordPlaceholder", "Enter your new password...")}
type="password"
{...field}
/>
@@ -125,7 +141,7 @@ export default function ResetForm({
</FormItem>
)}
/>
{verify.enable_reset_password_verify && (
{captchaEnabled && isTurnstile && (
<FormField
control={form.control}
name="cf_token"
@@ -143,6 +159,24 @@ export default function ResetForm({
)}
/>
)}
{captchaEnabled && isLocal && (
<FormField
control={form.control}
name="captcha_code"
render={({ field }) => (
<FormItem>
<FormControl>
<LocalCaptcha
{...field}
ref={localCaptcha}
onCaptchaIdChange={setCaptchaId}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<Button disabled={loading} type="submit">
{loading && <Icon className="animate-spin" icon="mdi:loading" />}
{t("reset.title", "Reset Password")}
apps/user/src/sections/auth/local-captcha.tsx
+95
View File
@@ -0,0 +1,95 @@
import { Button } from "@workspace/ui/components/button";
import { Input } from "@workspace/ui/components/input";
import { Icon } from "@workspace/ui/composed/icon";
import { generateCaptcha } from "@workspace/ui/services/common/auth";
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import { useTranslation } from "react-i18next";
export interface LocalCaptchaRef {
reset: () => void;
}
interface LocalCaptchaProps {
value?: string | null;
onChange?: (value: string) => void;
onCaptchaIdChange?: (id: string) => void;
}
const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
({ value, onChange, onCaptchaIdChange }, ref) => {
const { t } = useTranslation("auth");
const [captchaImage, setCaptchaImage] = useState("");
const [loading, setLoading] = useState(false);
const fetchCaptcha = async () => {
setLoading(true);
try {
const res = await generateCaptcha();
const captchaData = res.data?.data;
if (captchaData) {
setCaptchaImage(captchaData.image);
onCaptchaIdChange?.(captchaData.id);
}
} catch (error) {
console.error("Failed to generate captcha:", error);
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchCaptcha();
}, []);
useImperativeHandle(ref, () => ({
reset: () => {
onChange?.("");
fetchCaptcha();
},
}));
return (
<div className="flex gap-2">
<Input
placeholder={t("captcha.placeholder", "Enter captcha code...")}
value={value || ""}
onChange={(e) => onChange?.(e.target.value)}
className="flex-1"
/>
<div className="relative h-10 w-32 flex-shrink-0">
{loading ? (
<div className="flex h-full items-center justify-center bg-muted">
<Icon className="animate-spin" icon="mdi:loading" />
</div>
) : captchaImage ? (
<img
src={captchaImage}
alt="captcha"
className="h-full w-full cursor-pointer object-contain"
onClick={fetchCaptcha}
title={t("captcha.clickToRefresh", "Click to refresh")}
/>
) : (
<div className="flex h-full items-center justify-center bg-muted text-xs text-muted-foreground">
{t("captcha.noImage", "No Image")}
</div>
)}
</div>
<Button
type="button"
variant="outline"
size="icon"
onClick={fetchCaptcha}
disabled={loading}
title={t("captcha.refresh", "Refresh captcha")}
>
<Icon icon="mdi:refresh" />
</Button>
</div>
);
}
);
LocalCaptcha.displayName = "LocalCaptcha";
export default LocalCaptcha;
apps/user/src/sections/auth/phone/login-form.tsx
+41 -5
View File
@@ -19,6 +19,7 @@ import { useGlobalStore } from "@/stores/global";
import SendCode from "../send-code";
import type { TurnstileRef } from "../turnstile";
import CloudFlareTurnstile from "../turnstile";
import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
export default function LoginForm({
loading,
@@ -34,6 +35,11 @@ export default function LoginForm({
const { t } = useTranslation("auth");
const { common } = useGlobalStore();
const { verify } = common;
const [captchaId, setCaptchaId] = useState("");
const isTurnstile = verify.captcha_type === "turnstile";
const isLocal = verify.captcha_type === "local";
const captchaEnabled = verify.enable_user_login_captcha;
const formSchema = z.object({
telephone_area_code: z.string(),
@@ -41,9 +47,13 @@ export default function LoginForm({
telephone_code: z.string().optional(),
password: z.string().optional(),
cf_token:
verify.enable_login_verify && verify.turnstile_site_key
captchaEnabled && isTurnstile && verify.turnstile_site_key
? z.string()
: z.string().optional(),
captcha_code:
captchaEnabled && isLocal
? z.string().min(1, t("captcha.required", "Please enter captcha code"))
: z.string().optional(),
});
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
@@ -53,11 +63,17 @@ export default function LoginForm({
const [mode, setMode] = useState<"password" | "code">("password");
const turnstile = useRef<TurnstileRef>(null);
const localCaptcha = useRef<LocalCaptchaRef>(null);
const handleSubmit = form.handleSubmit((data) => {
try {
// Add captcha_id for local captcha
if (isLocal && captchaEnabled) {
(data as any).captcha_id = captchaId;
}
onSubmit(data);
} catch (_error) {
turnstile.current?.reset();
localCaptcha.current?.reset();
}
});
@@ -88,7 +104,7 @@ export default function LoginForm({
);
}
}}
placeholder="Area code..."
placeholder={t("register.areaCodePlaceholder", "Area code...")}
simple
value={field.value}
/>
@@ -99,7 +115,7 @@ export default function LoginForm({
/>
<Input
className="rounded-l-none"
placeholder="Enter your telephone..."
placeholder={t("register.telephonePlaceholder", "Enter your telephone...")}
type="tel"
{...field}
/>
@@ -119,7 +135,9 @@ export default function LoginForm({
<div className="flex gap-2">
<Input
placeholder={
mode === "code" ? "Enter code..." : "Enter password..."
mode === "code"
? t("register.codePlaceholder", "Enter code...")
: t("login.passwordPlaceholder", "Enter your password...")
}
type={mode === "code" ? "text" : "password"}
{...field}
@@ -157,7 +175,7 @@ export default function LoginForm({
</FormItem>
)}
/>
{verify.enable_login_verify && (
{captchaEnabled && isTurnstile && (
<FormField
control={form.control}
name="cf_token"
@@ -175,6 +193,24 @@ export default function LoginForm({
)}
/>
)}
{captchaEnabled && isLocal && (
<FormField
control={form.control}
name="captcha_code"
render={({ field }) => (
<FormItem>
<FormControl>
<LocalCaptcha
{...field}
ref={localCaptcha}
onCaptchaIdChange={setCaptchaId}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<Button disabled={loading} type="submit">
{loading && <Icon className="animate-spin" icon="mdi:loading" />}
{t("login.title", "Login")}
apps/user/src/sections/auth/phone/register-form.tsx
+42 -8
View File
@@ -12,7 +12,7 @@ import { AreaCodeSelect } from "@workspace/ui/composed/area-code-select";
import { Icon } from "@workspace/ui/composed/icon";
import { Markdown } from "@workspace/ui/composed/markdown";
import type { Dispatch, SetStateAction } from "react";
import { useRef } from "react";
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { z } from "zod";
@@ -20,6 +20,7 @@ import { useGlobalStore } from "@/stores/global";
import SendCode from "../send-code";
import type { TurnstileRef } from "../turnstile";
import CloudFlareTurnstile from "../turnstile";
import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
export default function RegisterForm({
loading,
@@ -36,6 +37,11 @@ export default function RegisterForm({
const { common } = useGlobalStore();
const { verify, auth, invite } = common;
const { enable_whitelist, whitelist } = auth.mobile;
const [captchaId, setCaptchaId] = useState("");
const isTurnstile = verify.captcha_type === "turnstile";
const isLocal = verify.captcha_type === "local";
const captchaEnabled = verify.enable_user_register_captcha;
const formSchema = z
.object({
@@ -46,9 +52,13 @@ export default function RegisterForm({
code: z.string(),
invite: invite.forced_invite ? z.string().min(1) : z.string().nullish(),
cf_token:
verify.enable_register_verify && verify.turnstile_site_key
captchaEnabled && isTurnstile && verify.turnstile_site_key
? z.string()
: z.string().nullish(),
captcha_code:
captchaEnabled && isLocal
? z.string().min(1, t("captcha.required", "Please enter captcha code"))
: z.string().nullish(),
})
.superRefine(({ password, repeat_password }, ctx) => {
if (password !== repeat_password) {
@@ -70,11 +80,17 @@ export default function RegisterForm({
});
const turnstile = useRef<TurnstileRef>(null);
const localCaptcha = useRef<LocalCaptchaRef>(null);
const handleSubmit = form.handleSubmit((data) => {
try {
// Add captcha_id for local captcha
if (isLocal && captchaEnabled) {
(data as any).captcha_id = captchaId;
}
onSubmit(data);
} catch (_error) {
turnstile.current?.reset();
localCaptcha.current?.reset();
}
});
@@ -110,7 +126,7 @@ export default function RegisterForm({
);
}
}}
placeholder="Area code..."
placeholder={t("register.areaCodePlaceholder", "Area code...")}
simple
value={field.value}
whitelist={enable_whitelist ? whitelist : []}
@@ -122,7 +138,7 @@ export default function RegisterForm({
/>
<Input
className="rounded-l-none"
placeholder="Enter your telephone..."
placeholder={t("register.telephonePlaceholder", "Enter your telephone...")}
type="tel"
{...field}
/>
@@ -139,7 +155,7 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<Input
placeholder="Enter your password..."
placeholder={t("register.passwordPlaceholder", "Enter your password...")}
type="password"
{...field}
/>
@@ -156,7 +172,7 @@ export default function RegisterForm({
<FormControl>
<Input
disabled={loading}
placeholder="Enter password again..."
placeholder={t("register.repeatPasswordPlaceholder", "Enter password again...")}
type="password"
{...field}
/>
@@ -174,7 +190,7 @@ export default function RegisterForm({
<div className="flex items-center gap-2">
<Input
disabled={loading}
placeholder="Enter code..."
placeholder={t("register.codePlaceholder", "Enter code...")}
type="text"
{...field}
value={field.value as string}
@@ -216,7 +232,7 @@ export default function RegisterForm({
</FormItem>
)}
/>
{verify.enable_register_verify && (
{captchaEnabled && isTurnstile && (
<FormField
control={form.control}
name="cf_token"
@@ -234,6 +250,24 @@ export default function RegisterForm({
)}
/>
)}
{captchaEnabled && isLocal && (
<FormField
control={form.control}
name="captcha_code"
render={({ field }) => (
<FormItem>
<FormControl>
<LocalCaptcha
{...field}
ref={localCaptcha}
onCaptchaIdChange={setCaptchaId}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<Button disabled={loading} type="submit">
{loading && <Icon className="animate-spin" icon="mdi:loading" />}
{t("register.title", "Register")}
apps/user/src/sections/auth/phone/reset-form.tsx
+41 -7
View File
@@ -11,7 +11,7 @@ import { Input } from "@workspace/ui/components/input";
import { AreaCodeSelect } from "@workspace/ui/composed/area-code-select";
import { Icon } from "@workspace/ui/composed/icon";
import type { Dispatch, SetStateAction } from "react";
import { useRef } from "react";
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { z } from "zod";
@@ -19,6 +19,7 @@ import { useGlobalStore } from "@/stores/global";
import SendCode from "../send-code";
import type { TurnstileRef } from "../turnstile";
import CloudFlareTurnstile from "../turnstile";
import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
export default function ResetForm({
loading,
@@ -36,6 +37,11 @@ export default function ResetForm({
const { common } = useGlobalStore();
const { verify, auth } = common;
const [captchaId, setCaptchaId] = useState("");
const isTurnstile = verify.captcha_type === "turnstile";
const isLocal = verify.captcha_type === "local";
const captchaEnabled = verify.enable_user_reset_password_captcha;
const formSchema = z.object({
telephone_area_code: z.string(),
@@ -43,9 +49,13 @@ export default function ResetForm({
password: z.string(),
code: auth?.email?.enable_verify ? z.string() : z.string().nullish(),
cf_token:
verify.enable_register_verify && verify.turnstile_site_key
captchaEnabled && isTurnstile && verify.turnstile_site_key
? z.string()
: z.string().nullish(),
captcha_code:
captchaEnabled && isLocal
? z.string().min(1, t("captcha.required", "Please enter captcha code"))
: z.string().nullish(),
});
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
@@ -53,11 +63,17 @@ export default function ResetForm({
});
const turnstile = useRef<TurnstileRef>(null);
const localCaptcha = useRef<LocalCaptchaRef>(null);
const handleSubmit = form.handleSubmit((data) => {
try {
// Add captcha_id for local captcha
if (isLocal && captchaEnabled) {
(data as any).captcha_id = captchaId;
}
onSubmit(data);
} catch (_error) {
turnstile.current?.reset();
localCaptcha.current?.reset();
}
});
@@ -88,7 +104,7 @@ export default function ResetForm({
);
}
}}
placeholder="Area code..."
placeholder={t("register.areaCodePlaceholder", "Area code...")}
simple
value={field.value}
/>
@@ -99,7 +115,7 @@ export default function ResetForm({
/>
<Input
className="rounded-l-none"
placeholder="Enter your telephone..."
placeholder={t("register.telephonePlaceholder", "Enter your telephone...")}
type="tel"
{...field}
/>
@@ -117,7 +133,7 @@ export default function ResetForm({
<FormControl>
<div className="flex items-center gap-2">
<Input
placeholder="Enter code..."
placeholder={t("register.codePlaceholder", "Enter code...")}
type="text"
{...field}
value={field.value as string}
@@ -143,7 +159,7 @@ export default function ResetForm({
<FormItem>
<FormControl>
<Input
placeholder="Enter your new password..."
placeholder={t("reset.passwordPlaceholder", "Enter your new password...")}
type="password"
{...field}
/>
@@ -152,7 +168,7 @@ export default function ResetForm({
</FormItem>
)}
/>
{verify.enable_reset_password_verify && (
{captchaEnabled && isTurnstile && (
<FormField
control={form.control}
name="cf_token"
@@ -170,6 +186,24 @@ export default function ResetForm({
)}
/>
)}
{captchaEnabled && isLocal && (
<FormField
control={form.control}
name="captcha_code"
render={({ field }) => (
<FormItem>
<FormControl>
<LocalCaptcha
{...field}
ref={localCaptcha}
onCaptchaIdChange={setCaptchaId}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<Button disabled={loading} type="submit">
{loading && <Icon className="animate-spin" icon="mdi:loading" />}
{t("reset.title", "Reset Password")}
apps/user/src/sections/user/traffic-statistics/index.tsx
+132
View File
@@ -0,0 +1,132 @@
import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@workspace/ui/components/select";
import { Tabs, TabsList, TabsTrigger } from "@workspace/ui/components/tabs";
import { Icon } from "@workspace/ui/composed/icon";
import { queryUserSubscribe } from "@workspace/ui/services/user/user";
import { getUserTrafficStats } from "@workspace/ui/services/user/traffic";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import TrafficTrendChart from "./traffic-trend-chart";
import TrafficRatioChart from "./traffic-ratio-chart";
import TrafficStatsCards from "./traffic-stats-cards";
export default function TrafficStatistics() {
const { t } = useTranslation("traffic");
const [days, setDays] = useState<7 | 30>(7);
const [selectedSubscribeId, setSelectedSubscribeId] = useState<string | null>(null);
// 查询用户订阅列表
const { data: userSubscribe = [] } = useQuery({
queryKey: ["queryUserSubscribe"],
queryFn: async () => {
const { data } = await queryUserSubscribe();
return data.data?.list || [];
},
});
// 使用 id_str 字段，避免 JavaScript 精度丢失
const activeSubscribeId = selectedSubscribeId || (userSubscribe[0]?.id_str || null);
// 查询流量统计数据
const { data: trafficStats, isLoading } = useQuery({
queryKey: ["getUserTrafficStats", activeSubscribeId, days],
queryFn: async () => {
if (!activeSubscribeId) return null;
const { data } = await getUserTrafficStats({
user_subscribe_id: activeSubscribeId,
days,
});
return data.data;
},
enabled: !!activeSubscribeId,
});
return (
<div className="flex min-h-[calc(100vh-64px-58px-32px-114px)] w-full flex-col gap-4">
{/* 标题和控制栏 */}
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<h2 className="flex items-center gap-1.5 font-semibold">
<Icon className="size-5" icon="uil:chart-line" />
{t("title", "Traffic Statistics")}
</h2>
<div className="flex flex-col gap-2 md:flex-row md:items-center">
{/* 订阅选择 */}
{userSubscribe.length > 1 && (
<Select
value={activeSubscribeId || undefined}
onValueChange={(value) => setSelectedSubscribeId(value)}
>
<SelectTrigger className="w-full md:w-[200px]">
<SelectValue placeholder={t("selectSubscription", "Select Subscription")} />
</SelectTrigger>
<SelectContent>
{userSubscribe.map((sub) => (
<SelectItem key={sub.id} value={sub.id_str}>
{sub.subscribe.name}
</SelectItem>
))}
</SelectContent>
</Select>
)}
{/* 时间范围切换 */}
<Tabs value={String(days)} onValueChange={(value) => setDays(Number(value) as 7 | 30)}>
<TabsList>
<TabsTrigger value="7">{t("days7", "7 Days")}</TabsTrigger>
<TabsTrigger value="30">{t("days30", "30 Days")}</TabsTrigger>
</TabsList>
</Tabs>
</div>
</div>
{/* 统计卡片 */}
{trafficStats && <TrafficStatsCards stats={trafficStats} />}
{/* 图表区域 */}
<div className="grid gap-4 md:grid-cols-2">
{/* 流量趋势图 */}
<Card>
<CardHeader>
<CardTitle className="text-base">{t("trafficTrend", "Traffic Trend")}</CardTitle>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="flex h-[300px] items-center justify-center">
<Icon className="size-8 animate-spin" icon="uil:spinner" />
</div>
) : trafficStats && trafficStats.list.length > 0 ? (
<TrafficTrendChart data={trafficStats.list} />
) : (
<div className="flex h-[300px] items-center justify-center text-muted-foreground">
{t("noData", "No traffic data available")}
</div>
)}
</CardContent>
</Card>
{/* 流量占比图 */}
<Card>
<CardHeader>
<CardTitle className="text-base">{t("trafficRatio", "Upload/Download Ratio")}</CardTitle>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="flex h-[300px] items-center justify-center">
<Icon className="size-8 animate-spin" icon="uil:spinner" />
</div>
) : trafficStats && (trafficStats.total_upload > 0 || trafficStats.total_download > 0) ? (
<TrafficRatioChart
upload={trafficStats.total_upload}
download={trafficStats.total_download}
/>
) : (
<div className="flex h-[300px] items-center justify-center text-muted-foreground">
{t("noData", "No traffic data available")}
</div>
)}
</CardContent>
</Card>
</div>
</div>
);
}
apps/user/src/sections/user/traffic-statistics/traffic-ratio-chart.tsx
+55
View File
@@ -0,0 +1,55 @@
import { useTranslation } from "react-i18next";
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts";
interface TrafficRatioChartProps {
upload: number;
download: number;
}
export default function TrafficRatioChart({ upload, download }: TrafficRatioChartProps) {
const { t } = useTranslation("traffic");
const data = [
{ name: t("upload", "Upload"), value: upload },
{ name: t("download", "Download"), value: download },
];
const COLORS = ["#10b981", "#3b82f6"];
// 格式化流量显示
const formatTraffic = (value: number) => {
if (value >= 1024 * 1024 * 1024) {
return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GB`;
}
if (value >= 1024 * 1024) {
return `${(value / (1024 * 1024)).toFixed(2)} MB`;
}
if (value >= 1024) {
return `${(value / 1024).toFixed(2)} KB`;
}
return `${value} B`;
};
return (
<ResponsiveContainer width="100%" height={300}>
<PieChart>
<Pie
data={data}
cx="50%"
cy="50%"
labelLine={false}
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(1)}%`}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{data.map((_, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip formatter={(value: number) => formatTraffic(value)} />
<Legend />
</PieChart>
</ResponsiveContainer>
);
}
apps/user/src/sections/user/traffic-statistics/traffic-stats-cards.tsx
+52
View File
@@ -0,0 +1,52 @@
import { Card, CardContent } from "@workspace/ui/components/card";
import { Icon } from "@workspace/ui/composed/icon";
import type { GetUserTrafficStatsResponse } from "@workspace/ui/services/user/traffic";
import { useTranslation } from "react-i18next";
import { Display } from "@/components/display";
interface TrafficStatsCardsProps {
stats: GetUserTrafficStatsResponse;
}
export default function TrafficStatsCards({ stats }: TrafficStatsCardsProps) {
const { t } = useTranslation("traffic");
const cards = [
{
title: t("totalTraffic", "Total Traffic"),
value: stats.total_traffic,
icon: "uil:chart-line",
color: "text-blue-500",
},
{
title: t("uploadTraffic", "Upload Traffic"),
value: stats.total_upload,
icon: "uil:upload",
color: "text-green-500",
},
{
title: t("downloadTraffic", "Download Traffic"),
value: stats.total_download,
icon: "uil:download",
color: "text-purple-500",
},
];
return (
<div className="grid gap-4 md:grid-cols-3">
{cards.map((card) => (
<Card key={card.title}>
<CardContent className="flex items-center justify-between p-6">
<div className="flex flex-col gap-1">
<span className="text-muted-foreground text-sm">{card.title}</span>
<span className="font-bold text-2xl">
<Display type="traffic" value={card.value} />
</span>
</div>
<Icon className={`size-10 ${card.color}`} icon={card.icon} />
</CardContent>
</Card>
))}
</div>
);
}
apps/user/src/sections/user/traffic-statistics/traffic-trend-chart.tsx
+81
View File
@@ -0,0 +1,81 @@
import type { GetUserTrafficStatsResponse } from "@workspace/ui/services/user/traffic";
import { format } from "date-fns";
import { useTranslation } from "react-i18next";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
} from "recharts";
interface TrafficTrendChartProps {
data: GetUserTrafficStatsResponse["list"];
}
export default function TrafficTrendChart({ data }: TrafficTrendChartProps) {
const { t } = useTranslation("traffic");
// 转换数据格式，将字节转换为 MB（保持为数字）
const chartData = data.map((item) => ({
date: format(new Date(item.date), "MM-dd"),
upload: Number((item.upload / (1024 * 1024)).toFixed(2)),
download: Number((item.download / (1024 * 1024)).toFixed(2)),
}));
// 格式化流量显示
const formatTraffic = (value: number | string) => {
const numValue = typeof value === "string" ? parseFloat(value) : value;
if (numValue >= 1024) {
return `${(numValue / 1024).toFixed(2)} GB`;
}
return `${numValue.toFixed(2)} MB`;
};
return (
<ResponsiveContainer width="100%" height={300}>
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="date"
label={{ value: t("date", "Date"), position: "insideBottom", offset: -5 }}
/>
<YAxis
label={{ value: t("traffic", "Traffic (MB)"), angle: -90, position: "insideLeft" }}
/>
<Tooltip
formatter={(value: number | string) => formatTraffic(value)}
labelStyle={{ color: "#000" }}
/>
<Legend
verticalAlign="bottom"
height={36}
wrapperStyle={{
position: "absolute",
width: "444px",
height: "36px",
left: "5px",
bottom: "-5px"
}}
/>
<Line
type="monotone"
dataKey="upload"
stroke="#10b981"
name={t("upload", "Upload")}
strokeWidth={2}
/>
<Line
type="monotone"
dataKey="download"
stroke="#3b82f6"
name={t("download", "Download")}
strokeWidth={2}
/>
</LineChart>
</ResponsiveContainer>
);
}
apps/user/src/stores/global.tsx
+5
View File
@@ -49,9 +49,14 @@ export const useGlobalStore = create<GlobalStore>((set, get) => ({
},
verify: {
turnstile_site_key: "",
captcha_type: "turnstile",
enable_login_verify: false,
enable_register_verify: false,
enable_reset_password_verify: false,
enable_user_login_captcha: false,
enable_user_register_captcha: false,
enable_user_reset_password_captcha: false,
enable_admin_login_captcha: false,
},
auth: {
mobile: {