Improve ops monitoring and chart loading
This commit is contained in:
2569718930@qq.com
@@ -0,0 +1,182 @@
|
||||
.root {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at 18% 10%, rgba(37, 99, 235, 0.08), transparent 28%),
|
||||
linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
margin-left: 14rem;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.content :global(h1) {
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.content :global([class~="text-white"]),
|
||||
.content :global([class~="text-slate-100"]),
|
||||
.content :global([class~="text-slate-200"]),
|
||||
.content :global([class~="text-slate-300"]) {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.content :global([class~="text-slate-400"]) {
|
||||
color: #52637a;
|
||||
}
|
||||
|
||||
.content :global([class~="text-slate-500"]),
|
||||
.content :global([class~="text-slate-600"]) {
|
||||
color: #6b7a91;
|
||||
}
|
||||
|
||||
.content :global([class*="border-white/"]),
|
||||
.content :global([class*="divide-white/"]),
|
||||
.content :global([class*="border-black/"]) {
|
||||
border-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
.content :global([class*="border-slate-7"]),
|
||||
.content :global([class*="border-slate-8"]) {
|
||||
border-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
.content :global([class*="bg-card"]),
|
||||
.content :global([class*="bg-slate-900"]),
|
||||
.content :global([class*="bg-slate-950"]),
|
||||
.content :global([class*="bg-[#0f172a]"]),
|
||||
.content :global([class*="bg-black/"]),
|
||||
.content :global([class*="bg-white/5"]),
|
||||
.content :global([class*="bg-white/10"]) {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.content :global([class~="rounded-2xl"]),
|
||||
.content :global([class~="rounded-xl"]),
|
||||
.content :global([class~="rounded-3xl"]) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.content :global([class*="shadow-xl"]),
|
||||
.content :global([class*="shadow-2xl"]) {
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.content :global([class*="backdrop-blur"]) {
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.content :global([class*="hover:bg-white/"]:hover) {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.content :global([class*="hover:bg-slate-"]:hover),
|
||||
.content :global([class*="hover:bg-black/"]:hover) {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.content :global([class*="hover:text-white"]:hover),
|
||||
.content :global([class*="hover:text-slate-2"]:hover),
|
||||
.content :global([class*="hover:text-slate-3"]:hover) {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.content :global(code),
|
||||
.content :global(pre),
|
||||
.content :global(.font-mono) {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.content :global(input),
|
||||
.content :global(select),
|
||||
.content :global(textarea) {
|
||||
border-color: var(--color-border-default);
|
||||
background: #ffffff;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.content :global(input::placeholder),
|
||||
.content :global(textarea::placeholder) {
|
||||
color: #8ba0b7;
|
||||
}
|
||||
|
||||
.content :global(input:focus),
|
||||
.content :global(select:focus),
|
||||
.content :global(textarea:focus) {
|
||||
border-color: #60a5fa;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.content :global(button[class*="border"]) {
|
||||
border-color: #cbd7e6;
|
||||
}
|
||||
|
||||
.content :global(button[class*="bg-transparent"]),
|
||||
.content :global(button[class*="outline"]) {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.content :global(table) {
|
||||
color: #1e293b;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.content :global(thead),
|
||||
.content :global(thead tr),
|
||||
.content :global([class*="bg-slate-800"]) {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.content :global(th) {
|
||||
color: #52637a;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.content :global(td) {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.content :global(tbody tr) {
|
||||
border-color: #e5edf6;
|
||||
}
|
||||
|
||||
.content :global(tbody tr:hover) {
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.content :global(.recharts-cartesian-grid line) {
|
||||
stroke: #dbe7f3;
|
||||
}
|
||||
|
||||
.content :global(.recharts-cartesian-axis-line),
|
||||
.content :global(.recharts-cartesian-axis-tick-line) {
|
||||
stroke: #cbd7e6;
|
||||
}
|
||||
|
||||
.content :global(.recharts-cartesian-axis-tick-value) {
|
||||
fill: #64748b;
|
||||
}
|
||||
|
||||
.content :global(.recharts-legend-item-text) {
|
||||
color: #475569 !important;
|
||||
}
|
||||
|
||||
.content :global([class*="animate-pulse"]) {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.main {
|
||||
margin-left: 0;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
import { AdminSidebar } from "./AdminSidebar";
|
||||
import styles from "./AdminShell.module.css";
|
||||
|
||||
export function AdminShell({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-slate-100">
|
||||
<div className={styles.root}>
|
||||
<AdminSidebar />
|
||||
<main className="ml-56 min-h-screen p-6">
|
||||
{children}
|
||||
<main className={styles.main}>
|
||||
<div className={styles.content}>{children}</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -57,17 +57,17 @@ export function AdminSidebar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<aside className="fixed left-0 top-0 z-40 h-screen w-56 border-r border-white/10 bg-slate-950 flex flex-col">
|
||||
<div className="flex h-14 items-center gap-2 border-b border-white/10 px-4">
|
||||
<LayoutDashboard className="h-5 w-5 text-cyan-400" />
|
||||
<Link href="/ops/system" className="text-sm font-bold text-white">
|
||||
<aside className="fixed left-0 top-0 z-40 flex h-screen w-56 flex-col border-r border-slate-200 bg-white shadow-[1px_0_2px_rgba(15,23,42,0.04)]">
|
||||
<div className="flex h-14 items-center gap-2 border-b border-slate-200 px-4">
|
||||
<LayoutDashboard className="h-5 w-5 text-blue-600" />
|
||||
<Link href="/ops/system" className="text-sm font-extrabold text-slate-950">
|
||||
PolyWeather Ops
|
||||
</Link>
|
||||
</div>
|
||||
<nav className="flex-1 overflow-y-auto py-4 space-y-6">
|
||||
<nav className="flex-1 space-y-6 overflow-y-auto py-4">
|
||||
{navGroups.map((group) => (
|
||||
<div key={group.label} className="px-3">
|
||||
<h4 className="mb-2 px-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500">
|
||||
<h4 className="mb-2 px-2 text-[11px] font-bold uppercase tracking-wider text-slate-500">
|
||||
{group.label}
|
||||
</h4>
|
||||
<ul className="space-y-0.5">
|
||||
@@ -78,10 +78,10 @@ export function AdminSidebar() {
|
||||
<Link
|
||||
href={item.href}
|
||||
className={
|
||||
"flex items-center gap-2.5 rounded-lg px-2 py-2 text-sm transition-colors " +
|
||||
"flex items-center gap-2.5 rounded-md border border-transparent px-2 py-2 text-sm transition-colors " +
|
||||
(isActive
|
||||
? "bg-white/10 text-white font-medium"
|
||||
: "text-slate-400 hover:bg-white/5 hover:text-slate-200")
|
||||
? "border-blue-200 bg-blue-50 text-blue-700 font-semibold shadow-[inset_3px_0_0_#2563eb]"
|
||||
: "text-slate-600 hover:border-slate-200 hover:bg-slate-50 hover:text-slate-950")
|
||||
}
|
||||
>
|
||||
<item.icon className="h-4 w-4 shrink-0" />
|
||||
@@ -94,10 +94,10 @@ export function AdminSidebar() {
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
<div className="border-t border-white/10 px-4 py-3">
|
||||
<div className="border-t border-slate-200 px-4 py-3">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 text-xs text-slate-500 hover:text-slate-300 transition-colors"
|
||||
className="flex items-center gap-2 text-xs font-semibold text-slate-500 transition-colors hover:text-blue-700"
|
||||
>
|
||||
← 返回前台
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user