[重构] 前端改造v1

atsf_server/web/components/feedback/empty-state.tsx

@@ -0,0 +1,13 @@
+interface EmptyStateProps {
+  title: string;
+  description: string;
+}
+
+export function EmptyState({ title, description }: EmptyStateProps) {
+  return (
+    <div className='rounded-2xl border border-dashed border-white/10 bg-white/5 px-5 py-6 text-sm'>
+      <p className='text-base font-semibold text-white'>{title}</p>
+      <p className='mt-2 leading-6 text-[var(--foreground-secondary)]'>{description}</p>
+    </div>
+  );
+}

atsf_server/web/components/feedback/error-state.tsx

@@ -0,0 +1,13 @@
+interface ErrorStateProps {
+  title: string;
+  description: string;
+}
+
+export function ErrorState({ title, description }: ErrorStateProps) {
+  return (
+    <div className='rounded-2xl border border-rose-400/20 bg-rose-500/10 px-5 py-6 text-sm'>
+      <p className='text-base font-semibold text-rose-100'>{title}</p>
+      <p className='mt-2 leading-6 text-rose-100/80'>{description}</p>
+    </div>
+  );
+}

atsf_server/web/components/feedback/feature-placeholder.tsx

@@ -0,0 +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-sky-400' />
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </AppCard>
+  );
+}

atsf_server/web/components/feedback/loading-state.tsx

@@ -0,0 +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-white/10' />
+      <div className='h-24 animate-pulse rounded-2xl bg-white/5' />
+      <div className='h-24 animate-pulse rounded-2xl bg-white/5' />
+    </div>
+  );
+}