[重构] 前端改造v1

atsf_server/web/components/ui/app-card.tsx

@@ -0,0 +1,41 @@
+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-white'>{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>
+  );
+}

atsf_server/web/components/ui/status-badge.tsx

@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils/cn';
+
+const variantClasses = {
+  success: 'border-emerald-400/25 bg-emerald-500/15 text-emerald-200',
+  warning: 'border-amber-400/25 bg-amber-500/15 text-amber-200',
+  danger: 'border-rose-400/25 bg-rose-500/15 text-rose-200',
+  info: 'border-sky-400/25 bg-sky-500/15 text-sky-200',
+} as const;
+
+interface StatusBadgeProps {
+  label: string;
+  variant?: keyof typeof variantClasses;
+  className?: string;
+}
+
+export function StatusBadge({
+  label,
+  variant = 'info',
+  className,
+}: StatusBadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium tracking-wide',
+        variantClasses[variant],
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+}