tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-01 06:36:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

[优化] 格式化

Browse Source
This commit is contained in:
ryan
2026-05-30 13:15:20 +08:00
parent 28b1305906
commit 9ec3d5b42d
110 changed files with 29155 additions and 7642 deletions
Download Patch File Download Diff File Expand all files Collapse all files
openflare_server/web/components/data/rank-chart.tsx
+83 -82
View File
@@ -31,101 +31,102 @@ function getChartValue(params: unknown) {
}
export function RankChart({
items,
color,
valueFormatter = defaultFormatter,
emptyMessage = '暂无分布数据',
}: RankChartProps) {
items,
color,
valueFormatter = defaultFormatter,
emptyMessage = '暂无分布数据',
}: RankChartProps) {
const option = useMemo<EChartsOption>(
() => ({
animationDuration: 400,
grid: {
left: 16,
right: 24,
top: 12,
bottom: 12,
containLabel: true,
() => ({
animationDuration: 400,
grid: {
left: 16,
right: 24,
top: 12,
bottom: 12,
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
backgroundColor: 'rgba(15, 23, 42, 0.92)',
borderWidth: 0,
textStyle: {
color: '#e2e8f0',
fontSize: 12,
},
formatter: (params: unknown) => {
const item = Array.isArray(params) ? params[0] : params;
const data = item as { name?: string; value?: number };
return `${data.name ?? ''}<br/>${valueFormatter(data.value ?? 0)}`;
},
},
xAxis: {
type: 'value',
axisLabel: {
color: '#94a3b8',
},
splitLine: {
lineStyle: {
color: 'rgba(148, 163, 184, 0.16)',
type: 'dashed',
},
backgroundColor: 'rgba(15, 23, 42, 0.92)',
borderWidth: 0,
textStyle: {
},
},
yAxis: {
type: 'category',
data: items.map((item) => item.label),
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: '#cbd5e1',
width: 120,
overflow: 'truncate',
},
},
series: [
{
type: 'bar',
data: items.map((item) => item.value),
barWidth: 12,
showBackground: true,
backgroundStyle: {
color: 'rgba(148, 163, 184, 0.12)',
borderRadius: 999,
},
itemStyle: {
color,
borderRadius: 999,
},
label: {
show: true,
position: 'right',
color: '#e2e8f0',
fontSize: 12,
},
formatter: (params: unknown) => {
const item = Array.isArray(params) ? params[0] : params;
const data = item as { name?: string; value?: number };
return `${data.name ?? ''}<br/>${valueFormatter(data.value ?? 0)}`;
formatter: (params: unknown) =>
valueFormatter(getChartValue(params)),
},
},
xAxis: {
type: 'value',
axisLabel: {
color: '#94a3b8',
},
splitLine: {
lineStyle: {
color: 'rgba(148, 163, 184, 0.16)',
type: 'dashed',
},
},
},
yAxis: {
type: 'category',
data: items.map((item) => item.label),
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: '#cbd5e1',
width: 120,
overflow: 'truncate',
},
},
series: [
{
type: 'bar',
data: items.map((item) => item.value),
barWidth: 12,
showBackground: true,
backgroundStyle: {
color: 'rgba(148, 163, 184, 0.12)',
borderRadius: 999,
},
itemStyle: {
color,
borderRadius: 999,
},
label: {
show: true,
position: 'right',
color: '#e2e8f0',
formatter: (params: unknown) => valueFormatter(getChartValue(params)),
},
},
],
}),
[color, items, valueFormatter],
],
}),
[color, items, valueFormatter],
);
if (items.length === 0) {
return (
<div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
{emptyMessage}
</div>
<div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
{emptyMessage}
</div>
);
}
return (
<ReactECharts
option={option}
notMerge
lazyUpdate
style={{ height: Math.max(220, items.length * 44), width: '100%' }}
/>
<ReactECharts
option={option}
notMerge
lazyUpdate
style={{ height: Math.max(220, items.length * 44), width: '100%' }}
/>
);
}
openflare_server/web/components/data/trend-chart.tsx
+54 -54
View File
@@ -32,15 +32,15 @@ type TooltipParam = {
const defaultFormatter = (value: number) => formatCompactNumber(value);
export function TrendChart({
labels,
series,
height = 220,
yAxisValueFormatter,
}: TrendChartProps) {
labels,
series,
height = 220,
yAxisValueFormatter,
}: TrendChartProps) {
const option = useMemo<EChartsOption>(() => {
const axisFormatter = yAxisValueFormatter ?? defaultFormatter;
const maxValue = calculateNiceAxisMax(
series.flatMap((item) => item.values),
series.flatMap((item) => item.values),
);
return {
@@ -70,17 +70,17 @@ export function TrendChart({
const header = items[0]?.axisValueLabel ?? '';
const rows = items.map((item) => {
const matchedSeries = series.find(
(seriesItem) => seriesItem.label === item.seriesName,
(seriesItem) => seriesItem.label === item.seriesName,
);
const formatter =
matchedSeries?.valueFormatter ??
yAxisValueFormatter ??
defaultFormatter;
matchedSeries?.valueFormatter ??
yAxisValueFormatter ??
defaultFormatter;
const rawValue = Array.isArray(item.value)
? item.value[1]
: item.value;
? item.value[1]
: item.value;
const numericValue =
typeof rawValue === 'number' ? rawValue : Number(rawValue ?? 0);
typeof rawValue === 'number' ? rawValue : Number(rawValue ?? 0);
return [
'<span style="display:inline-flex;align-items:center;gap:8px;">',
@@ -145,11 +145,11 @@ export function TrendChart({
color: item.color,
},
areaStyle:
item.variant === 'area'
? {
color: item.fillColor ?? `${item.color}33`,
}
: undefined,
item.variant === 'area'
? {
color: item.fillColor ?? `${item.color}33`,
}
: undefined,
emphasis: {
focus: 'series',
scale: true,
@@ -161,48 +161,48 @@ export function TrendChart({
if (labels.length === 0 || series.length === 0) {
return (
<div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
暂无趋势数据
</div>
<div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
暂无趋势数据
</div>
);
}
return (
<div className="space-y-4">
<div className="flex flex-wrap gap-3">
{series.map((item) => {
const latestValue = item.values[item.values.length - 1] ?? 0;
const formatter = item.valueFormatter ?? defaultFormatter;
return (
<div
key={item.label}
className="min-w-[140px] rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3"
>
<div className="flex items-center gap-2">
<div className="space-y-4">
<div className="flex flex-wrap gap-3">
{series.map((item) => {
const latestValue = item.values[item.values.length - 1] ?? 0;
const formatter = item.valueFormatter ?? defaultFormatter;
return (
<div
key={item.label}
className="min-w-[140px] rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3"
>
<div className="flex items-center gap-2">
<span
className="h-2.5 w-2.5 rounded-full"
style={{ backgroundColor: item.color }}
className="h-2.5 w-2.5 rounded-full"
style={{ backgroundColor: item.color }}
/>
<p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
{item.label}
</p>
</div>
<p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
{formatter(latestValue)}
</p>
</div>
);
})}
</div>
<div className="overflow-hidden rounded-[28px] border border-[var(--border-default)] bg-[linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0))] px-4 py-4">
<ReactECharts
option={option}
notMerge
lazyUpdate
style={{ height, width: '100%' }}
/>
</div>
<p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
{item.label}
</p>
</div>
<p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
{formatter(latestValue)}
</p>
</div>
);
})}
</div>
<div className="overflow-hidden rounded-[28px] border border-[var(--border-default)] bg-[linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0))] px-4 py-4">
<ReactECharts
option={option}
notMerge
lazyUpdate
style={{ height, width: '100%' }}
/>
</div>
</div>
);
}
openflare_server/web/components/feedback/empty-state.tsx
+19 -17
View File
@@ -1,17 +1,19 @@
interface EmptyStateProps {
title: string;
description?: string;
}
export function EmptyState({title, description}: EmptyStateProps) {
return (
<div
className='rounded-2xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] px-5 py-6 text-sm'>
<p className='text-base font-semibold text-[var(--foreground-primary)]'>{title}</p>
{description ?
<p className='mt-2 leading-6 text-[var(--foreground-secondary)]'>{description}</p> : null
}
</div>
);
}
interface EmptyStateProps {
title: string;
description?: string;
}
export function EmptyState({ title, description }: EmptyStateProps) {
return (
<div className="rounded-2xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] px-5 py-6 text-sm">
<p className="text-base font-semibold text-[var(--foreground-primary)]">
{title}
</p>
{description ? (
<p className="mt-2 leading-6 text-[var(--foreground-secondary)]">
{description}
</p>
) : null}
</div>
);
}
openflare_server/web/components/feedback/error-state.tsx
+17 -13
View File
@@ -1,13 +1,17 @@
interface ErrorStateProps {
title: string;
description: string;
}
export function ErrorState({ title, description }: ErrorStateProps) {
return (
<div className='rounded-2xl border border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] px-5 py-6 text-sm'>
<p className='text-base font-semibold text-[var(--status-danger-foreground)]'>{title}</p>
<p className='mt-2 leading-6 text-[var(--status-danger-foreground)]/80'>{description}</p>
</div>
);
}
interface ErrorStateProps {
title: string;
description: string;
}
export function ErrorState({ title, description }: ErrorStateProps) {
return (
<div className="rounded-2xl border border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] px-5 py-6 text-sm">
<p className="text-base font-semibold text-[var(--status-danger-foreground)]">
{title}
</p>
<p className="mt-2 leading-6 text-[var(--status-danger-foreground)]/80">
{description}
</p>
</div>
);
}
openflare_server/web/components/feedback/feature-placeholder.tsx
+31 -31
View File
@@ -1,31 +1,31 @@
import { AppCard } from '@/components/ui/app-card';
import { StatusBadge } from '@/components/ui/status-badge';
interface FeaturePlaceholderProps {
title: string;
description: string;
milestones: string[];
}
export function FeaturePlaceholder({
title,
description,
milestones,
}: FeaturePlaceholderProps) {
return (
<AppCard
title={title}
description={description}
action={<StatusBadge label='阶段 1 骨架完成' variant='success' />}
>
<ul className='space-y-3 text-sm leading-6 text-[var(--foreground-secondary)]'>
{milestones.map((item) => (
<li key={item} className='flex gap-3'>
<span className='mt-2 h-2 w-2 shrink-0 rounded-full bg-[var(--brand-primary)]' />
<span>{item}</span>
</li>
))}
</ul>
</AppCard>
);
}
import { AppCard } from '@/components/ui/app-card';
import { StatusBadge } from '@/components/ui/status-badge';
interface FeaturePlaceholderProps {
title: string;
description: string;
milestones: string[];
}
export function FeaturePlaceholder({
title,
description,
milestones,
}: FeaturePlaceholderProps) {
return (
<AppCard
title={title}
description={description}
action={<StatusBadge label="阶段 1 骨架完成" variant="success" />}
>
<ul className="space-y-3 text-sm leading-6 text-[var(--foreground-secondary)]">
{milestones.map((item) => (
<li key={item} className="flex gap-3">
<span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-[var(--brand-primary)]" />
<span>{item}</span>
</li>
))}
</ul>
</AppCard>
);
}
openflare_server/web/components/feedback/inline-message.tsx
+35 -35
View File
@@ -1,35 +1,35 @@
import { cn } from '@/lib/utils/cn';
type InlineMessageTone = 'info' | 'success' | 'danger';
const toneClasses: Record<InlineMessageTone, string> = {
info: 'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
success:
'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
danger:
'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
};
interface InlineMessageProps {
tone?: InlineMessageTone;
message: string;
className?: string;
}
export function InlineMessage({
tone = 'info',
message,
className,
}: InlineMessageProps) {
return (
<div
className={cn(
'rounded-2xl border px-4 py-3 text-sm leading-6',
toneClasses[tone],
className,
)}
>
{message}
</div>
);
}
import { cn } from '@/lib/utils/cn';
type InlineMessageTone = 'info' | 'success' | 'danger';
const toneClasses: Record<InlineMessageTone, string> = {
info: 'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
success:
'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
danger:
'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
};
interface InlineMessageProps {
tone?: InlineMessageTone;
message: string;
className?: string;
}
export function InlineMessage({
tone = 'info',
message,
className,
}: InlineMessageProps) {
return (
<div
className={cn(
'rounded-2xl border px-4 py-3 text-sm leading-6',
toneClasses[tone],
className,
)}
>
{message}
</div>
);
}
openflare_server/web/components/feedback/loading-state.tsx
+15 -15
View File
@@ -1,15 +1,15 @@
import { cn } from '@/lib/utils/cn';
interface LoadingStateProps {
className?: string;
}
export function LoadingState({ className }: LoadingStateProps) {
return (
<div className={cn('space-y-3', className)}>
<div className='h-4 w-32 animate-pulse rounded bg-[var(--control-background-hover)]' />
<div className='h-24 animate-pulse rounded-2xl bg-[var(--surface-muted)]' />
<div className='h-24 animate-pulse rounded-2xl bg-[var(--surface-muted)]' />
</div>
);
}
import { cn } from '@/lib/utils/cn';
interface LoadingStateProps {
className?: string;
}
export function LoadingState({ className }: LoadingStateProps) {
return (
<div className={cn('space-y-3', className)}>
<div className="h-4 w-32 animate-pulse rounded bg-[var(--control-background-hover)]" />
<div className="h-24 animate-pulse rounded-2xl bg-[var(--surface-muted)]" />
<div className="h-24 animate-pulse rounded-2xl bg-[var(--surface-muted)]" />
</div>
);
}
openflare_server/web/components/forms/turnstile-widget.tsx
+101 -96
View File
@@ -1,96 +1,101 @@
'use client';
import { useEffect, useId, useRef } from 'react';
declare global {
interface Window {
turnstile?: {
render: (
container: string | HTMLElement,
options: {
sitekey: string;
callback: (token: string) => void;
'expired-callback'?: () => void;
'error-callback'?: () => void;
theme?: 'auto' | 'light' | 'dark';
},
) => string;
remove: (widgetId: string) => void;
reset: (widgetId?: string) => void;
};
}
}
const TURNSTILE_SCRIPT_ID = 'cloudflare-turnstile-script';
const TURNSTILE_SCRIPT_SRC = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
interface TurnstileWidgetProps {
siteKey: string;
onVerify: (token: string) => void;
onExpire?: () => void;
onError?: () => void;
}
export function TurnstileWidget({
siteKey,
onVerify,
onExpire,
onError,
}: TurnstileWidgetProps) {
const containerRef = useRef<HTMLDivElement | null>(null);
const widgetIdRef = useRef<string | null>(null);
const elementId = useId().replace(/:/g, '-');
useEffect(() => {
let cancelled = false;
const mountWidget = () => {
if (cancelled || !containerRef.current || !window.turnstile) {
return;
}
if (widgetIdRef.current) {
window.turnstile.remove(widgetIdRef.current);
widgetIdRef.current = null;
}
widgetIdRef.current = window.turnstile.render(containerRef.current, {
sitekey: siteKey,
callback: onVerify,
'expired-callback': onExpire,
'error-callback': onError,
theme: 'auto',
});
};
const existingScript = document.getElementById(TURNSTILE_SCRIPT_ID) as HTMLScriptElement | null;
if (window.turnstile) {
mountWidget();
} else if (existingScript) {
existingScript.addEventListener('load', mountWidget);
} else {
const script = document.createElement('script');
script.id = TURNSTILE_SCRIPT_ID;
script.src = TURNSTILE_SCRIPT_SRC;
script.async = true;
script.defer = true;
script.addEventListener('load', mountWidget);
document.head.appendChild(script);
}
return () => {
cancelled = true;
const script = document.getElementById(TURNSTILE_SCRIPT_ID) as HTMLScriptElement | null;
if (script) {
script.removeEventListener('load', mountWidget);
}
if (widgetIdRef.current && window.turnstile) {
window.turnstile.remove(widgetIdRef.current);
widgetIdRef.current = null;
}
};
}, [onError, onExpire, onVerify, siteKey]);
return <div id={elementId} ref={containerRef} className='min-h-16' />;
}
'use client';
import { useEffect, useId, useRef } from 'react';
declare global {
interface Window {
turnstile?: {
render: (
container: string | HTMLElement,
options: {
sitekey: string;
callback: (token: string) => void;
'expired-callback'?: () => void;
'error-callback'?: () => void;
theme?: 'auto' | 'light' | 'dark';
},
) => string;
remove: (widgetId: string) => void;
reset: (widgetId?: string) => void;
};
}
}
const TURNSTILE_SCRIPT_ID = 'cloudflare-turnstile-script';
const TURNSTILE_SCRIPT_SRC =
'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
interface TurnstileWidgetProps {
siteKey: string;
onVerify: (token: string) => void;
onExpire?: () => void;
onError?: () => void;
}
export function TurnstileWidget({
siteKey,
onVerify,
onExpire,
onError,
}: TurnstileWidgetProps) {
const containerRef = useRef<HTMLDivElement | null>(null);
const widgetIdRef = useRef<string | null>(null);
const elementId = useId().replace(/:/g, '-');
useEffect(() => {
let cancelled = false;
const mountWidget = () => {
if (cancelled || !containerRef.current || !window.turnstile) {
return;
}
if (widgetIdRef.current) {
window.turnstile.remove(widgetIdRef.current);
widgetIdRef.current = null;
}
widgetIdRef.current = window.turnstile.render(containerRef.current, {
sitekey: siteKey,
callback: onVerify,
'expired-callback': onExpire,
'error-callback': onError,
theme: 'auto',
});
};
const existingScript = document.getElementById(
TURNSTILE_SCRIPT_ID,
) as HTMLScriptElement | null;
if (window.turnstile) {
mountWidget();
} else if (existingScript) {
existingScript.addEventListener('load', mountWidget);
} else {
const script = document.createElement('script');
script.id = TURNSTILE_SCRIPT_ID;
script.src = TURNSTILE_SCRIPT_SRC;
script.async = true;
script.defer = true;
script.addEventListener('load', mountWidget);
document.head.appendChild(script);
}
return () => {
cancelled = true;
const script = document.getElementById(
TURNSTILE_SCRIPT_ID,
) as HTMLScriptElement | null;
if (script) {
script.removeEventListener('load', mountWidget);
}
if (widgetIdRef.current && window.turnstile) {
window.turnstile.remove(widgetIdRef.current);
widgetIdRef.current = null;
}
};
}, [onError, onExpire, onVerify, siteKey]);
return <div id={elementId} ref={containerRef} className="min-h-16" />;
}
openflare_server/web/components/layout/dashboard-shell.tsx
+20 -20
View File
@@ -1,20 +1,20 @@
import type { ReactNode } from 'react';
import { DashboardSidebar } from '@/components/layout/dashboard-sidebar';
import { DashboardTopbar } from '@/components/layout/dashboard-topbar';
interface DashboardShellProps {
children: ReactNode;
}
export function DashboardShell({ children }: DashboardShellProps) {
return (
<div className='flex min-h-screen bg-transparent text-[var(--foreground-primary)]'>
<DashboardSidebar />
<div className='flex min-w-0 flex-1 flex-col'>
<DashboardTopbar />
<main className='flex-1 px-4 py-6 md:px-8 md:py-8'>{children}</main>
</div>
</div>
);
}
import type { ReactNode } from 'react';
import { DashboardSidebar } from '@/components/layout/dashboard-sidebar';
import { DashboardTopbar } from '@/components/layout/dashboard-topbar';
interface DashboardShellProps {
children: ReactNode;
}
export function DashboardShell({ children }: DashboardShellProps) {
return (
<div className="flex min-h-screen bg-transparent text-[var(--foreground-primary)]">
<DashboardSidebar />
<div className="flex min-w-0 flex-1 flex-col">
<DashboardTopbar />
<main className="flex-1 px-4 py-6 md:px-8 md:py-8">{children}</main>
</div>
</div>
);
}
openflare_server/web/components/layout/page-header.tsx
+24 -20
View File
@@ -1,26 +1,30 @@
import type {ReactNode} from 'react';
import type { ReactNode } from 'react';
interface PageHeaderProps {
title: string;
description?: string;
action?: ReactNode;
title: string;
description?: string;
action?: ReactNode;
}
export function PageHeader({title, description, action}: PageHeaderProps) {
return (
<div className='flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between'>
<div className='space-y-3'>
<p className='text-sm font-medium uppercase tracking-[0.24em] text-[var(--brand-primary)]'>OpenFlare</p>
<div className='space-y-2'>
<h1 className='text-3xl font-semibold tracking-tight text-[var(--foreground-primary)]'>{title}</h1>
{description ? (
<p className='max-w-3xl text-sm leading-7 text-[var(--foreground-secondary)]'>
{description}
</p>
) : null}
</div>
</div>
{action ? <div className='flex flex-wrap gap-3'>{action}</div> : null}
export function PageHeader({ title, description, action }: PageHeaderProps) {
return (
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
<div className="space-y-3">
<p className="text-sm font-medium tracking-[0.24em] text-[var(--brand-primary)] uppercase">
OpenFlare
</p>
<div className="space-y-2">
<h1 className="text-3xl font-semibold tracking-tight text-[var(--foreground-primary)]">
{title}
</h1>
{description ? (
<p className="max-w-3xl text-sm leading-7 text-[var(--foreground-secondary)]">
{description}
</p>
) : null}
</div>
);
</div>
{action ? <div className="flex flex-wrap gap-3">{action}</div> : null}
</div>
);
}
openflare_server/web/components/layout/public-shell.tsx
+44 -36
View File
@@ -2,39 +2,47 @@ import Link from 'next/link';
import type { ReactNode } from 'react';
import { publicEnv } from '@/lib/env/public-env';
interface PublicShellProps {
children: ReactNode;
}
export function PublicShell({ children }: PublicShellProps) {
return (
<div className='flex min-h-screen items-center justify-center px-4 py-12'>
<div className='w-full max-w-3xl rounded-[var(--radius-xl)] border border-[var(--border-default)] bg-[var(--surface-panel)]/85 p-8 shadow-[var(--shadow-soft)] backdrop-blur'>
<div className='mb-8 flex flex-col gap-4 border-b border-[var(--border-default)] pb-6 md:flex-row md:items-end md:justify-between'>
<div>
<p className='text-3xl font-medium text-[var(--brand-primary)]'>OpenFlare</p>
</div>
<div className='flex flex-col items-start gap-3 text-sm text-[var(--foreground-secondary)] md:items-end'>
<span className='rounded-full border border-[var(--border-default)] px-3 py-1.5'>
{publicEnv.appVersion}
</span>
</div>
</div>
<div className='space-y-6'>{children}</div>
<div className='mt-8 border-t border-[var(--border-default)] pt-6 text-sm text-[var(--foreground-secondary)]'>
<div className='flex flex-wrap gap-4'>
<Link href='/' className='text-[var(--brand-primary)] transition hover:opacity-80'>
返回
</Link>
<Link href='/about' className='text-[var(--brand-primary)] transition hover:opacity-80'>
关于
</Link>
</div>
</div>
</div>
</div>
);
}
interface PublicShellProps {
children: ReactNode;
}
export function PublicShell({ children }: PublicShellProps) {
return (
<div className="flex min-h-screen items-center justify-center px-4 py-12">
<div className="w-full max-w-3xl rounded-[var(--radius-xl)] border border-[var(--border-default)] bg-[var(--surface-panel)]/85 p-8 shadow-[var(--shadow-soft)] backdrop-blur">
<div className="mb-8 flex flex-col gap-4 border-b border-[var(--border-default)] pb-6 md:flex-row md:items-end md:justify-between">
<div>
<p className="text-3xl font-medium text-[var(--brand-primary)]">
OpenFlare
</p>
</div>
<div className="flex flex-col items-start gap-3 text-sm text-[var(--foreground-secondary)] md:items-end">
<span className="rounded-full border border-[var(--border-default)] px-3 py-1.5">
{publicEnv.appVersion}
</span>
</div>
</div>
<div className="space-y-6">{children}</div>
<div className="mt-8 border-t border-[var(--border-default)] pt-6 text-sm text-[var(--foreground-secondary)]">
<div className="flex flex-wrap gap-4">
<Link
href="/"
className="text-[var(--brand-primary)] transition hover:opacity-80"
>
返回
</Link>
<Link
href="/about"
className="text-[var(--brand-primary)] transition hover:opacity-80"
>
关于
</Link>
</div>
</div>
</div>
</div>
);
}
openflare_server/web/components/providers/app-providers.tsx
+37 -37
View File
@@ -1,37 +1,37 @@
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { type ReactNode, useState } from 'react';
import { AuthProvider } from '@/components/providers/auth-provider';
import { ThemeProvider } from '@/components/providers/theme-provider';
interface AppProvidersProps {
children: ReactNode;
}
export function AppProviders({ children }: AppProvidersProps) {
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 1,
staleTime: 30_000,
},
mutations: {
retry: 0,
},
},
}),
);
return (
<QueryClientProvider client={queryClient}>
<ThemeProvider>
<AuthProvider>{children}</AuthProvider>
</ThemeProvider>
</QueryClientProvider>
);
}
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { type ReactNode, useState } from 'react';
import { AuthProvider } from '@/components/providers/auth-provider';
import { ThemeProvider } from '@/components/providers/theme-provider';
interface AppProvidersProps {
children: ReactNode;
}
export function AppProviders({ children }: AppProvidersProps) {
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 1,
staleTime: 30_000,
},
mutations: {
retry: 0,
},
},
}),
);
return (
<QueryClientProvider client={queryClient}>
<ThemeProvider>
<AuthProvider>{children}</AuthProvider>
</ThemeProvider>
</QueryClientProvider>
);
}
openflare_server/web/components/providers/auth-provider.tsx
+92 -89
View File
@@ -1,89 +1,92 @@
'use client';
import {
createContext,
type ReactNode,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
import { logout as logoutRequest, getCurrentUser } from '@/features/auth/api/auth';
import type { AuthUser } from '@/types/auth';
interface AuthContextValue {
user: AuthUser | null;
isLoading: boolean;
isAuthenticated: boolean;
refreshUser: () => Promise<AuthUser | null>;
setUser: (user: AuthUser | null) => void;
logout: () => Promise<void>;
}
const AuthContext = createContext<AuthContextValue | null>(null);
interface AuthProviderProps {
children: ReactNode;
}
export function AuthProvider({ children }: AuthProviderProps) {
const [user, setUserState] = useState<AuthUser | null>(null);
const [isLoading, setIsLoading] = useState(true);
const refreshUser = useCallback(async () => {
try {
const nextUser = await getCurrentUser();
setUserState(nextUser);
return nextUser;
} catch {
setUserState(null);
return null;
} finally {
setIsLoading(false);
}
}, []);
useEffect(() => {
void refreshUser();
}, [refreshUser]);
const setUser = useCallback((nextUser: AuthUser | null) => {
setUserState(nextUser);
setIsLoading(false);
}, []);
const logout = useCallback(async () => {
try {
await logoutRequest();
} finally {
setUserState(null);
setIsLoading(false);
}
}, []);
const value = useMemo(
() => ({
user,
isLoading,
isAuthenticated: user !== null,
refreshUser,
setUser,
logout,
}),
[isLoading, logout, refreshUser, setUser, user],
);
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
export function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within AuthProvider');
}
return context;
}
'use client';
import {
createContext,
type ReactNode,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
import {
logout as logoutRequest,
getCurrentUser,
} from '@/features/auth/api/auth';
import type { AuthUser } from '@/types/auth';
interface AuthContextValue {
user: AuthUser | null;
isLoading: boolean;
isAuthenticated: boolean;
refreshUser: () => Promise<AuthUser | null>;
setUser: (user: AuthUser | null) => void;
logout: () => Promise<void>;
}
const AuthContext = createContext<AuthContextValue | null>(null);
interface AuthProviderProps {
children: ReactNode;
}
export function AuthProvider({ children }: AuthProviderProps) {
const [user, setUserState] = useState<AuthUser | null>(null);
const [isLoading, setIsLoading] = useState(true);
const refreshUser = useCallback(async () => {
try {
const nextUser = await getCurrentUser();
setUserState(nextUser);
return nextUser;
} catch {
setUserState(null);
return null;
} finally {
setIsLoading(false);
}
}, []);
useEffect(() => {
void refreshUser();
}, [refreshUser]);
const setUser = useCallback((nextUser: AuthUser | null) => {
setUserState(nextUser);
setIsLoading(false);
}, []);
const logout = useCallback(async () => {
try {
await logoutRequest();
} finally {
setUserState(null);
setIsLoading(false);
}
}, []);
const value = useMemo(
() => ({
user,
isLoading,
isAuthenticated: user !== null,
refreshUser,
setUser,
logout,
}),
[isLoading, logout, refreshUser, setUser, user],
);
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
export function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within AuthProvider');
}
return context;
}
openflare_server/web/components/providers/theme-provider.tsx
+109 -107
View File
@@ -1,107 +1,109 @@
'use client';
import {
createContext,
type ReactNode,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
import {
isThemeMode,
resolveTheme,
THEME_MEDIA_QUERY,
THEME_STORAGE_KEY,
type ResolvedTheme,
type ThemeMode,
} from '@/lib/theme/theme';
interface ThemeContextValue {
themeMode: ThemeMode;
resolvedTheme: ResolvedTheme;
setThemeMode: (mode: ThemeMode) => void;
}
const ThemeContext = createContext<ThemeContextValue | null>(null);
interface ThemeProviderProps {
children: ReactNode;
}
function getSystemPreference() {
return window.matchMedia(THEME_MEDIA_QUERY).matches;
}
function applyTheme(mode: ThemeMode) {
const resolvedTheme = resolveTheme(mode, getSystemPreference());
const root = document.documentElement;
root.dataset.themeMode = mode;
root.dataset.theme = resolvedTheme;
root.style.colorScheme = resolvedTheme;
window.localStorage.setItem(THEME_STORAGE_KEY, mode);
return resolvedTheme;
}
export function ThemeProvider({ children }: ThemeProviderProps) {
const [themeMode, setThemeModeState] = useState<ThemeMode>('system');
const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('dark');
useEffect(() => {
const root = document.documentElement;
const domThemeMode = root.dataset.themeMode;
const nextThemeMode = isThemeMode(domThemeMode) ? domThemeMode : 'system';
const nextResolvedTheme = applyTheme(nextThemeMode);
setThemeModeState(nextThemeMode);
setResolvedTheme(nextResolvedTheme);
}, []);
useEffect(() => {
const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
const handleChange = () => {
if (themeMode !== 'system') {
return;
}
setResolvedTheme(applyTheme('system'));
};
mediaQuery.addEventListener('change', handleChange);
return () => {
mediaQuery.removeEventListener('change', handleChange);
};
}, [themeMode]);
const setThemeMode = useCallback((mode: ThemeMode) => {
setThemeModeState(mode);
setResolvedTheme(applyTheme(mode));
}, []);
const value = useMemo(
() => ({
themeMode,
resolvedTheme,
setThemeMode,
}),
[resolvedTheme, setThemeMode, themeMode],
);
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}
export function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within ThemeProvider');
}
return context;
}
'use client';
import {
createContext,
type ReactNode,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
import {
isThemeMode,
resolveTheme,
THEME_MEDIA_QUERY,
THEME_STORAGE_KEY,
type ResolvedTheme,
type ThemeMode,
} from '@/lib/theme/theme';
interface ThemeContextValue {
themeMode: ThemeMode;
resolvedTheme: ResolvedTheme;
setThemeMode: (mode: ThemeMode) => void;
}
const ThemeContext = createContext<ThemeContextValue | null>(null);
interface ThemeProviderProps {
children: ReactNode;
}
function getSystemPreference() {
return window.matchMedia(THEME_MEDIA_QUERY).matches;
}
function applyTheme(mode: ThemeMode) {
const resolvedTheme = resolveTheme(mode, getSystemPreference());
const root = document.documentElement;
root.dataset.themeMode = mode;
root.dataset.theme = resolvedTheme;
root.style.colorScheme = resolvedTheme;
window.localStorage.setItem(THEME_STORAGE_KEY, mode);
return resolvedTheme;
}
export function ThemeProvider({ children }: ThemeProviderProps) {
const [themeMode, setThemeModeState] = useState<ThemeMode>('system');
const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('dark');
useEffect(() => {
const root = document.documentElement;
const domThemeMode = root.dataset.themeMode;
const nextThemeMode = isThemeMode(domThemeMode) ? domThemeMode : 'system';
const nextResolvedTheme = applyTheme(nextThemeMode);
setThemeModeState(nextThemeMode);
setResolvedTheme(nextResolvedTheme);
}, []);
useEffect(() => {
const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
const handleChange = () => {
if (themeMode !== 'system') {
return;
}
setResolvedTheme(applyTheme('system'));
};
mediaQuery.addEventListener('change', handleChange);
return () => {
mediaQuery.removeEventListener('change', handleChange);
};
}, [themeMode]);
const setThemeMode = useCallback((mode: ThemeMode) => {
setThemeModeState(mode);
setResolvedTheme(applyTheme(mode));
}, []);
const value = useMemo(
() => ({
themeMode,
resolvedTheme,
setThemeMode,
}),
[resolvedTheme, setThemeMode, themeMode],
);
return (
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
);
}
export function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within ThemeProvider');
}
return context;
}
openflare_server/web/components/ui/app-card.tsx
+47 -41
View File
@@ -1,41 +1,47 @@
import type { HTMLAttributes, ReactNode } from 'react';
import { cn } from '@/lib/utils/cn';
interface AppCardProps extends HTMLAttributes<HTMLDivElement> {
title?: string;
description?: string;
action?: ReactNode;
}
export function AppCard({
title,
description,
action,
className,
children,
...props
}: AppCardProps) {
return (
<section
className={cn(
'rounded-[var(--radius-xl)] border border-[var(--border-default)] bg-[var(--surface-card)]/90 shadow-[var(--shadow-soft)] backdrop-blur',
className,
)}
{...props}
>
{(title || description || action) && (
<header className='flex flex-col gap-3 border-b border-[var(--border-default)] px-6 py-5 md:flex-row md:items-start md:justify-between'>
<div className='space-y-1'>
{title ? <h2 className='text-lg font-semibold text-[var(--foreground-primary)]'>{title}</h2> : null}
{description ? (
<p className='text-sm leading-6 text-[var(--foreground-secondary)]'>{description}</p>
) : null}
</div>
{action ? <div className='shrink-0'>{action}</div> : null}
</header>
)}
<div className='px-6 py-5'>{children}</div>
</section>
);
}
import type { HTMLAttributes, ReactNode } from 'react';
import { cn } from '@/lib/utils/cn';
interface AppCardProps extends HTMLAttributes<HTMLDivElement> {
title?: string;
description?: string;
action?: ReactNode;
}
export function AppCard({
title,
description,
action,
className,
children,
...props
}: AppCardProps) {
return (
<section
className={cn(
'rounded-[var(--radius-xl)] border border-[var(--border-default)] bg-[var(--surface-card)]/90 shadow-[var(--shadow-soft)] backdrop-blur',
className,
)}
{...props}
>
{(title || description || action) && (
<header className="flex flex-col gap-3 border-b border-[var(--border-default)] px-6 py-5 md:flex-row md:items-start md:justify-between">
<div className="space-y-1">
{title ? (
<h2 className="text-lg font-semibold text-[var(--foreground-primary)]">
{title}
</h2>
) : null}
{description ? (
<p className="text-sm leading-6 text-[var(--foreground-secondary)]">
{description}
</p>
) : null}
</div>
{action ? <div className="shrink-0">{action}</div> : null}
</header>
)}
<div className="px-6 py-5">{children}</div>
</section>
);
}
openflare_server/web/components/ui/app-modal.tsx
+31 -11
View File
@@ -55,32 +55,52 @@ export function AppModal({
}
return (
<div className='fixed inset-0 z-50 flex items-center justify-center bg-slate-950/55 px-4 py-6' role='dialog' aria-modal='true' aria-label={title}>
<button type='button' className='absolute inset-0 cursor-default' onClick={onClose} aria-label='关闭弹窗' />
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/55 px-4 py-6"
role="dialog"
aria-modal="true"
aria-label={title}
>
<button
type="button"
className="absolute inset-0 cursor-default"
onClick={onClose}
aria-label="关闭弹窗"
/>
<div
className={cn(
'relative flex max-h-[calc(100vh-3rem)] w-full flex-col overflow-hidden rounded-[28px] border border-[var(--border-default)] bg-[var(--surface-panel)] shadow-2xl',
sizeClassNameMap[size],
)}
>
<div className='flex items-start justify-between gap-4 border-b border-[var(--border-default)] px-6 py-5'>
<div className='space-y-2'>
<h2 className='text-xl font-semibold text-[var(--foreground-primary)]'>{title}</h2>
<div className="flex items-start justify-between gap-4 border-b border-[var(--border-default)] px-6 py-5">
<div className="space-y-2">
<h2 className="text-xl font-semibold text-[var(--foreground-primary)]">
{title}
</h2>
{description ? (
<p className='max-w-2xl text-sm leading-6 text-[var(--foreground-secondary)]'>{description}</p>
<p className="max-w-2xl text-sm leading-6 text-[var(--foreground-secondary)]">
{description}
</p>
) : null}
</div>
<button
type='button'
type="button"
onClick={onClose}
className='inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] text-lg text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]'
aria-label='关闭弹窗'
className="inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] text-lg text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
aria-label="关闭弹窗"
>
×
</button>
</div>
<div className='min-h-0 flex-1 overflow-y-auto px-6 py-6'>{children}</div>
{footer ? <div className='border-t border-[var(--border-default)] px-6 py-5'>{footer}</div> : null}
<div className="min-h-0 flex-1 overflow-y-auto px-6 py-6">
{children}
</div>
{footer ? (
<div className="border-t border-[var(--border-default)] px-6 py-5">
{footer}
</div>
) : null}
</div>
</div>
);
openflare_server/web/components/ui/drawer.tsx
+29 -5
View File
@@ -261,7 +261,9 @@ function useDrawerMetaContext() {
const context = useContext(DrawerMetaContext);
if (!context) {
throw new Error('Drawer title and description must be used within DrawerContent.');
throw new Error(
'Drawer title and description must be used within DrawerContent.',
);
}
return context;
@@ -271,14 +273,30 @@ export function DrawerHeader({
className,
...props
}: HTMLAttributes<HTMLDivElement>) {
return <div className={cn('border-b border-[var(--border-default)] px-6 py-5', className)} {...props} />;
return (
<div
className={cn(
'border-b border-[var(--border-default)] px-6 py-5',
className,
)}
{...props}
/>
);
}
export function DrawerFooter({
className,
...props
}: HTMLAttributes<HTMLDivElement>) {
return <div className={cn('border-t border-[var(--border-default)] px-6 py-4', className)} {...props} />;
return (
<div
className={cn(
'border-t border-[var(--border-default)] px-6 py-4',
className,
)}
{...props}
/>
);
}
export function DrawerTitle({
@@ -290,7 +308,10 @@ export function DrawerTitle({
return (
<h2
id={titleId}
className={cn('text-xl font-semibold text-[var(--foreground-primary)]', className)}
className={cn(
'text-xl font-semibold text-[var(--foreground-primary)]',
className,
)}
{...props}
/>
);
@@ -305,7 +326,10 @@ export function DrawerDescription({
return (
<p
id={descriptionId}
className={cn('mt-2 text-sm leading-6 text-[var(--foreground-secondary)]', className)}
className={cn(
'mt-2 text-sm leading-6 text-[var(--foreground-secondary)]',
className,
)}
{...props}
/>
);
openflare_server/web/components/ui/input.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
<input
type={type}
className={cn(
'flex h-10 w-full rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-sm text-[var(--foreground-primary)] shadow-none outline-none transition placeholder:text-[var(--foreground-muted)] focus-visible:border-[var(--border-strong)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
'flex h-10 w-full rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-sm text-[var(--foreground-primary)] shadow-none transition outline-none placeholder:text-[var(--foreground-muted)] focus-visible:border-[var(--border-strong)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
ref={ref}
openflare_server/web/components/ui/label.tsx
+12 -13
View File
@@ -2,19 +2,18 @@ import * as React from 'react';
import { cn } from '@/lib/utils/cn';
const Label = React.forwardRef<
HTMLLabelElement,
React.ComponentProps<'label'>
>(({ className, ...props }, ref) => (
<label
ref={ref}
className={cn(
'text-sm font-medium leading-none text-[var(--foreground-primary)] peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
className,
)}
{...props}
/>
));
const Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(
({ className, ...props }, ref) => (
<label
ref={ref}
className={cn(
'text-sm leading-none font-medium text-[var(--foreground-primary)] peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
className,
)}
{...props}
/>
),
);
Label.displayName = 'Label';
openflare_server/web/components/ui/separator.tsx
+9 -9
View File
@@ -1,13 +1,13 @@
"use client"
'use client';
import * as React from "react"
import { Separator as SeparatorPrimitive } from "radix-ui"
import * as React from 'react';
import { Separator as SeparatorPrimitive } from 'radix-ui';
import { cn } from "@/lib/utils"
import { cn } from '@/lib/utils';
function Separator({
className,
orientation = "horizontal",
orientation = 'horizontal',
decorative = true,
...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
@@ -17,12 +17,12 @@ function Separator({
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
className
'bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
className,
)}
{...props}
/>
)
);
}
export { Separator }
export { Separator };
openflare_server/web/components/ui/switch.tsx
+2 -1
View File
@@ -21,7 +21,8 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
},
ref,
) => {
const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
const [internalChecked, setInternalChecked] =
React.useState(defaultChecked);
const isControlled = checked !== undefined;
const isChecked = isControlled ? checked : internalChecked;
openflare_server/web/components/ui/textarea.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
return (
<textarea
className={cn(
'flex min-h-28 w-full rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-sm text-[var(--foreground-primary)] shadow-none outline-none transition placeholder:text-[var(--foreground-muted)] focus-visible:border-[var(--border-strong)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
'flex min-h-28 w-full rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-sm text-[var(--foreground-primary)] shadow-none transition outline-none placeholder:text-[var(--foreground-muted)] focus-visible:border-[var(--border-strong)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
ref={ref}
openflare_server/web/components/ui/theme-toggle.tsx
+35 -29
View File
@@ -11,55 +11,61 @@ interface ThemeToggleProps {
export function ThemeToggle({ className }: ThemeToggleProps) {
const { themeMode, resolvedTheme, setThemeMode } = useTheme();
const currentIndex = themeModes.indexOf(themeMode);
const nextTheme = themeModes[(currentIndex + 1) % themeModes.length] as ThemeMode;
const nextTheme = themeModes[
(currentIndex + 1) % themeModes.length
] as ThemeMode;
const icon =
themeMode === 'light' ? (
<svg
className='h-5 w-5'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='1.8'
strokeLinecap='round'
strokeLinejoin='round'
className="h-5 w-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx='12' cy='12' r='4' />
<path d='M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6M18.7 18.7l-1.6-1.6M6.9 6.9 5.3 5.3' />
<circle cx="12" cy="12" r="4" />
<path d="M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6M18.7 18.7l-1.6-1.6M6.9 6.9 5.3 5.3" />
</svg>
) : themeMode === 'dark' ? (
<svg
className='h-5 w-5'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='1.8'
strokeLinecap='round'
strokeLinejoin='round'
className="h-5 w-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d='M20 15.2A7.8 7.8 0 1 1 8.8 4 6.4 6.4 0 0 0 20 15.2Z' />
<path d="M20 15.2A7.8 7.8 0 1 1 8.8 4 6.4 6.4 0 0 0 20 15.2Z" />
</svg>
) : (
<svg
className='h-5 w-5'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='1.8'
strokeLinecap='round'
strokeLinejoin='round'
className="h-5 w-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect x='3.5' y='4' width='17' height='12' rx='2.5' />
<path d='M8 20h8M12 16v4' />
<rect x="3.5" y="4" width="17" height="12" rx="2.5" />
<path d="M8 20h8M12 16v4" />
</svg>
);
const label =
themeMode === 'light' ? '浅色模式' : themeMode === 'dark' ? '深色模式' : '跟随系统';
themeMode === 'light'
? '浅色模式'
: themeMode === 'dark'
? '深色模式'
: '跟随系统';
return (
<button
type='button'
type="button"
onClick={() => setThemeMode(nextTheme)}
className={cn(
'inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]',