From a6787ac30dd9d2dd289e5e515068fc83aa9c5f38 Mon Sep 17 00:00:00 2001 From: ryan Date: Fri, 20 Mar 2026 23:15:35 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=8A=9F=E8=83=BD]=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=96=B0=E7=9A=84=E8=BE=93=E5=85=A5=E3=80=81=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E3=80=81=E6=A0=87=E7=AD=BE=E5=92=8C=E5=BC=80?= =?UTF-8?q?=E5=85=B3=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=92=8C=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- openflare_server/web/app/globals.css | 144 +- openflare_server/web/app/layout.tsx | 10 +- openflare_server/web/components.json | 25 + openflare_server/web/components/ui/input.tsx | 22 + openflare_server/web/components/ui/label.tsx | 21 + .../web/components/ui/separator.tsx | 28 + openflare_server/web/components/ui/switch.tsx | 70 + .../web/components/ui/textarea.tsx | 22 + .../components/proxy-routes-page.tsx | 265 +- openflare_server/web/lib/utils.ts | 6 + openflare_server/web/package.json | 8 +- openflare_server/web/pnpm-lock.yaml | 5483 ++++++++++++++++- 12 files changed, 5948 insertions(+), 156 deletions(-) create mode 100644 openflare_server/web/components.json create mode 100644 openflare_server/web/components/ui/input.tsx create mode 100644 openflare_server/web/components/ui/label.tsx create mode 100644 openflare_server/web/components/ui/separator.tsx create mode 100644 openflare_server/web/components/ui/switch.tsx create mode 100644 openflare_server/web/components/ui/textarea.tsx create mode 100644 openflare_server/web/lib/utils.ts diff --git a/openflare_server/web/app/globals.css b/openflare_server/web/app/globals.css index 3578abea..12f66431 100644 --- a/openflare_server/web/app/globals.css +++ b/openflare_server/web/app/globals.css @@ -1,22 +1,26 @@ @import '../styles/tokens.css'; @import 'tailwindcss'; - +@import "tw-animate-css"; +@import "shadcn/tailwind.css"; + +@custom-variant dark (&:is(.dark *)); + * { box-sizing: border-box; } - + html { background: var(--surface-canvas); } - + html[data-theme='light'] { color-scheme: light; } - + html[data-theme='dark'] { color-scheme: dark; } - + body { min-height: 100vh; background: var(--body-background); @@ -28,17 +32,141 @@ body { background 0.2s ease, color 0.2s ease; } - + a { color: inherit; text-decoration: none; } - + button { cursor: pointer; } - + ::selection { background: var(--selection-background); color: var(--selection-foreground); } + +@theme inline { + --font-heading: var(--font-sans); + --font-sans: var(--font-sans); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --color-foreground: var(--foreground); + --color-background: var(--background); + --radius-sm: calc(var(--radius) * 0.6); + --radius-md: calc(var(--radius) * 0.8); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) * 1.4); + --radius-2xl: calc(var(--radius) * 1.8); + --radius-3xl: calc(var(--radius) * 2.2); + --radius-4xl: calc(var(--radius) * 2.6); +} + +:root { + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.87 0 0); + --chart-2: oklch(0.556 0 0); + --chart-3: oklch(0.439 0 0); + --chart-4: oklch(0.371 0 0); + --chart-5: oklch(0.269 0 0); + --radius: 0.625rem; + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.87 0 0); + --chart-2: oklch(0.556 0 0); + --chart-3: oklch(0.439 0 0); + --chart-4: oklch(0.371 0 0); + --chart-5: oklch(0.269 0 0); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } + html { + @apply font-sans; + } +} \ No newline at end of file diff --git a/openflare_server/web/app/layout.tsx b/openflare_server/web/app/layout.tsx index 81a53ea8..13700121 100644 --- a/openflare_server/web/app/layout.tsx +++ b/openflare_server/web/app/layout.tsx @@ -5,8 +5,12 @@ import type { ReactNode } from 'react'; import { AppProviders } from '@/components/providers/app-providers'; import { getThemeInitScript } from '@/lib/theme/theme'; -import './globals.css'; - +import './globals.css'; +import { Geist } from "next/font/google"; +import { cn } from "@/lib/utils"; + +const geist = Geist({subsets:['latin'],variable:'--font-sans'}); + export const metadata: Metadata = { title: { default: 'OpenFlare 控制台', @@ -22,7 +26,7 @@ interface RootLayoutProps { export default function RootLayout({ children }: RootLayoutProps) { return ( - +