OpenFlare/frontend/app/(main)/admin/demo/page.tsx

// Copyright 2026 Arctel.net
// SPDX-License-Identifier: Apache-2.0

'use client';

import * as React from 'react';
import { Code } from 'lucide-react';

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

// 引入模块化拆分后的 Tab 子组件
import { DashboardTab } from './tabs/dashboard-tab';
import { TableTab } from './tabs/table-tab';
import { ControlsTab } from './tabs/controls-tab';

export default function HeaderDemoPage() {
  const [activeTab, setActiveTab] = React.useState('dashboard');

  return (
    <div className='py-6 px-1 space-y-6'>
      {/* 1. 标准页面标题 */}
      <div className='flex items-center gap-2'>
        <Code className='size-5 text-primary' />
        <div>
          <h1 className='text-2xl font-semibold tracking-tight'>
            开发规范示例
          </h1>
        </div>
      </div>

      {/* 说明区域 */}
      <Card className='border-dashed shadow-none'>
        <CardHeader className='pb-3'>
          <div className='flex items-center gap-2'>
            <Code className='size-4 text-primary' />
            <CardTitle className='text-base font-semibold'>规范说明</CardTitle>
          </div>
          <CardDescription>
            此页面展示了后台 Sidebar 关联页面的标准标题栏布局，供开发参考。
          </CardDescription>
        </CardHeader>
        <CardContent className='space-y-4'>
          <div className='space-y-2'>
            <h3 className='text-xs font-semibold uppercase tracking-wider text-muted-foreground'>
              核心规范细节与编写原则：
            </h3>
            <ul className='list-disc pl-4 text-xs text-muted-foreground space-y-1.5'>
              <li>
                <strong>结构专注</strong>
                ：页面标题区必须保持绝对干净。请不要在标题下方放置任何描述段落或小字副标题，让页面在视线进入时保持极简与信息纯粹。
              </li>
              <li>
                <strong>容器与上边距对齐</strong>：使用{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  flex items-center gap-2
                </code>{' '}
                作为标题行基础容器（不含下边框），外层统一使用{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  py-6 px-1
                </code>{' '}
                (或{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  py-6
                </code>
                ) 进行上边距的视觉对齐，确保切换菜单时顶部高度感一致。
              </li>
              <li>
                <strong>图标呈现</strong>：直接将 Lucide
                图标组件嵌套于标题容器中，应用{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  size-5 text-primary
                </code>{' '}
                样式。禁止为图标包裹任何背景色小卡片、圆角或装饰性边框。
              </li>
              <li>
                <strong>文本样式标准</strong>：文本使用且仅使用{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  {'h1 className="text-2xl font-semibold tracking-tight"'}
                </code>
                ，禁用字重加粗（如{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  font-bold
                </code>
                ）或任何渐变色，保证全站字体一致性。
              </li>
              <li>
                <strong>Tabs 模块化拆分</strong>：凡是带有多个 Tab
                页切换的页面，**禁止**将所有 Tab
                的渲染代码堆积在同一个物理页面主文件内。每个 Tab 页对应的
                Content 必须单独拆分为独立组件文件（如{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  tabs/events-tab.tsx
                </code>{' '}
                或就近放在{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  components/
                </code>{' '}
                下），主页面文件只负责维护当前 Tab 的激活状态及外层骨架布局。
              </li>
              <li>
                <strong>复杂度驱动的区块拆分</strong>：不仅是 Tabs
                切换，当一个页面代码行数超过 600
                行时，必须将高密度区块拆分为子组件。路由专属、不复用的子组件应放在对应路由的特征目录中（如{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  app/(main)/admin/database/components/
                </code>
                ），只有真正跨页面复用的组件才进入全局{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  components/common/
                </code>
                。典型标杆案例参考“数据管理” (
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  /admin/database
                </code>
                ) 的{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  table-browser.tsx
                </code>
                、
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  cache-manager.tsx
                </code>{' '}
                与{' '}
                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                  sql-console.tsx
                </code>
                。
              </li>
            </ul>
          </div>
        </CardContent>
      </Card>

      {/* Tabs 切换 */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className='w-full'>
        <TabsList variant='line' className='w-fit inline-flex gap-8 mb-6'>
          <TabsTrigger
            value='dashboard'
            className='px-0 pb-2 text-xs font-semibold'
          >
            仪表盘与指标卡片
          </TabsTrigger>
          <TabsTrigger
            value='table'
            className='px-0 pb-2 text-xs font-semibold'
          >
            数据表格规范
          </TabsTrigger>
          <TabsTrigger
            value='controls'
            className='px-0 pb-2 text-xs font-semibold'
          >
            输入控件与表单
          </TabsTrigger>
        </TabsList>

        <TabsContent value='dashboard' className='focus-visible:outline-none'>
          <DashboardTab />
        </TabsContent>
        <TabsContent value='table' className='focus-visible:outline-none'>
          <TableTab />
        </TabsContent>
        <TabsContent value='controls' className='focus-visible:outline-none'>
          <ControlsTab />
        </TabsContent>
      </Tabs>
    </div>
  );
}