53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import { useState } from "react"
|
|
import { ThemeProvider } from "next-themes"
|
|
import { MatchTester } from "@/components/MatchTester"
|
|
import { RuleEditor } from "@/components/RuleEditor"
|
|
import { Toaster } from "@/components/ui/sonner"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
|
|
export default function App() {
|
|
const [version, setVersion] = useState<number | null>(null)
|
|
const [tab, setTab] = useState("rules")
|
|
|
|
return (
|
|
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
|
|
<div className="bg-background min-h-svh">
|
|
<header className="border-b">
|
|
<div className="mx-auto flex w-full max-w-5xl items-center justify-between gap-4 px-6 py-4">
|
|
<div>
|
|
<h1 className="text-xl font-semibold tracking-tight">
|
|
ASR 事件监控配置
|
|
</h1>
|
|
<p className="text-muted-foreground text-sm">
|
|
编辑潜在转接规则并立即生效
|
|
</p>
|
|
</div>
|
|
<div className="text-muted-foreground text-sm">
|
|
{version == null ? "版本加载中…" : `当前生效版本 V${version}`}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="mx-auto w-full max-w-5xl px-6 py-6">
|
|
<Tabs value={tab} onValueChange={setTab}>
|
|
<TabsList>
|
|
<TabsTrigger value="rules">规则配置</TabsTrigger>
|
|
<TabsTrigger value="demo">匹配验证</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="rules" className="mt-6">
|
|
<RuleEditor
|
|
onVersionChange={setVersion}
|
|
onSaved={() => setTab("demo")}
|
|
/>
|
|
</TabsContent>
|
|
<TabsContent value="demo" className="mt-6">
|
|
<MatchTester activeVersion={version} />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</main>
|
|
</div>
|
|
<Toaster richColors position="top-center" />
|
|
</ThemeProvider>
|
|
)
|
|
}
|