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

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:17:45 +08:00
parent 08e61ce833
commit e0eb4e5975
334 changed files with 17212 additions and 12321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/(main)/admin/demo/page.tsx
+131 -37
View File
@@ -1,82 +1,176 @@
// Copyright 2026 Arctel.net
// SPDX-License-Identifier: Apache-2.0
"use client"
'use client';
import * as React from "react"
import {Code} from "lucide-react"
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"
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"
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")
const [activeTab, setActiveTab] = React.useState('dashboard');
return (
<div className="py-6 px-1 space-y-6">
<div className='py-6 px-1 space-y-6'>
{/* 1. 标准页面标题 */}
<div className="flex items-center gap-2">
<Code className="size-5 text-primary" />
<div className='flex items-center gap-2'>
<Code className='size-5 text-primary' />
<div>
<h1 className="text-2xl font-semibold tracking-tight">开发规范示例</h1>
<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>
<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>
<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">
<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
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
value='controls'
className='px-0 pb-2 text-xs font-semibold'
>
输入控件与表单
</TabsTrigger>
</TabsList>
<TabsContent value="dashboard" className="focus-visible:outline-none">
<TabsContent value='dashboard' className='focus-visible:outline-none'>
<DashboardTab />
</TabsContent>
<TabsContent value="table" className="focus-visible:outline-none">
<TabsContent value='table' className='focus-visible:outline-none'>
<TableTab />
</TabsContent>
<TabsContent value="controls" className="focus-visible:outline-none">
<TabsContent value='controls' className='focus-visible:outline-none'>
<ControlsTab />
</TabsContent>
</Tabs>
</div>
)
);
}