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/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)]',