lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: unify settings dark mode and layout

Browse Source
This commit is contained in:
134 2026-07-10 22:20:28 +08:00
parent 2ce64dd49b
commit 5636b2789e
7 changed files with 138 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/(admin)/settings/_components/access-security-dashboard.tsx
View File

@ -117,10 +117,14 @@ const severityLabels: Record<Severity, string> = {
};
const severityClassNames: Record<Severity, string> = {
info: "border-emerald-200 bg-emerald-50 text-emerald-700",
watch: "border-amber-200 bg-amber-50 text-amber-700",
high: "border-orange-200 bg-orange-50 text-orange-700",
critical: "border-red-200 bg-red-50 text-red-700",
info:
"border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800/70 dark:bg-emerald-950/45 dark:text-emerald-300",
watch:
"border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800/70 dark:bg-amber-950/45 dark:text-amber-300",
high:
"border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-800/70 dark:bg-orange-950/45 dark:text-orange-300",
critical:
"border-red-200 bg-red-50 text-red-700 dark:border-red-800/70 dark:bg-red-950/45 dark:text-red-300",
};
function formatNumber(value: number | null | undefined) {
@ -145,10 +149,10 @@ function formatTime(value: string | null | undefined) {
function getStatusClassName(statusCode: number | null) {
if (!statusCode) return "text-muted-foreground";
if (statusCode >= 500) return "text-red-700";
if (statusCode >= 400) return "text-orange-700";
if (statusCode >= 300) return "text-sky-700";
return "text-emerald-700";
if (statusCode >= 500) return "text-red-700 dark:text-red-300";
if (statusCode >= 400) return "text-orange-700 dark:text-orange-300";
if (statusCode >= 300) return "text-sky-700 dark:text-sky-300";
return "text-emerald-700 dark:text-emerald-300";
}
function AccessSeverityBadge({ severity }: { severity: Severity }) {
@ -260,7 +264,8 @@ export function AccessSecurityDashboard() {
value: formatNumber(data?.overview.totalEvents),
note: `${hours} 小时窗口`,
icon: Activity,
className: "border-slate-200 bg-slate-50 text-slate-900",
className:
"border-slate-200 bg-slate-50 text-slate-900 dark:border-slate-700/70 dark:bg-slate-900/70 dark:text-slate-100",
},
{
key: "ips",
@ -268,7 +273,8 @@ export function AccessSecurityDashboard() {
value: formatNumber(data?.overview.uniqueIps),
note: `${formatNumber(data?.overview.abnormalIps)} 个异常标注`,
icon: Globe2,
className: "border-sky-200 bg-sky-50 text-sky-900",
className:
"border-sky-200 bg-sky-50 text-sky-900 dark:border-sky-800/70 dark:bg-sky-950/45 dark:text-sky-100",
},
{
key: "abnormal",
@ -276,7 +282,8 @@ export function AccessSecurityDashboard() {
value: formatNumber(data?.overview.abnormalEvents),
note: `${formatNumber(data?.overview.manualBlockedEvents)} 次手动阻断`,
icon: ShieldAlert,
className: "border-orange-200 bg-orange-50 text-orange-900",
className:
"border-orange-200 bg-orange-50 text-orange-900 dark:border-orange-800/70 dark:bg-orange-950/45 dark:text-orange-100",
},
{
key: "login",
@ -284,7 +291,8 @@ export function AccessSecurityDashboard() {
value: formatNumber(data?.overview.loginSuccessEvents),
note: `${formatNumber(data?.overview.unauthorizedEvents)} 次未授权`,
icon: LogIn,
className: "border-emerald-200 bg-emerald-50 text-emerald-900",
className:
"border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-800/70 dark:bg-emerald-950/45 dark:text-emerald-100",
},
];
@ -395,7 +403,7 @@ export function AccessSecurityDashboard() {
: 0;
return (
<div
className="group relative flex min-w-[10px] flex-1 items-end overflow-hidden rounded bg-slate-200"
className="group relative flex min-w-[10px] flex-1 items-end overflow-hidden rounded bg-slate-200 dark:bg-slate-800"
key={item.hour}
style={{ height: `${height}%` }}
>
@ -455,26 +463,26 @@ export function AccessSecurityDashboard() {
<div className="grid gap-2 md:grid-cols-2 xl:grid-cols-3">
{activeBlocklistEntries.map((entry) => (
<div
className="rounded-lg border border-red-100 bg-red-50/60 px-3 py-3"
className="rounded-lg border border-red-100 bg-red-50/60 px-3 py-3 dark:border-red-900/60 dark:bg-red-950/30"
key={entry.id}
>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<div className="flex items-center gap-2">
<Ban className="h-4 w-4 text-red-600" />
<span className="truncate font-mono font-semibold text-sm text-red-900">
<Ban className="h-4 w-4 text-red-600 dark:text-red-400" />
<span className="truncate font-mono font-semibold text-sm text-red-900 dark:text-red-200">
{entry.ip}
</span>
</div>
<div className="mt-1 line-clamp-2 text-red-800/75 text-xs">
<div className="mt-1 line-clamp-2 text-red-800/75 text-xs dark:text-red-300/75">
{entry.reason || "未填写原因"}
</div>
<div className="mt-2 text-red-700/70 text-xs">
<div className="mt-2 text-red-700/70 text-xs dark:text-red-400/70">
{formatTime(entry.updatedAt)}
</div>
</div>
<Button
className="h-8 shrink-0 gap-1 border-red-200 bg-white text-red-700 hover:bg-red-50"
className="h-8 shrink-0 gap-1 border-red-200 bg-white text-red-700 hover:bg-red-50 dark:border-red-800 dark:bg-red-950/30 dark:text-red-300 dark:hover:bg-red-950/60"
onClick={() => updateBlockEntry(entry, false)}
size="sm"
variant="outline"
@ -528,7 +536,7 @@ export function AccessSecurityDashboard() {
{(item.reasons.length > 0 ? item.reasons : ["正常访问"]).map(
(reason) => (
<Badge
className="border-zinc-200 bg-zinc-50 text-zinc-700"
className="border-zinc-200 bg-zinc-50 text-zinc-700 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300"
key={reason}
variant="outline"
>
@ -584,9 +592,9 @@ export function AccessSecurityDashboard() {
{formatNumber(item.count)}
</span>
</div>
<div className="mt-2 h-2 overflow-hidden rounded-full bg-zinc-100">
<div className="mt-2 h-2 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
<div
className="h-full rounded-full bg-zinc-900"
className="h-full rounded-full bg-zinc-900 dark:bg-zinc-200"
style={{
width: `${Math.max(4, (item.count / maxPathCount) * 100)}%`,
}}
@ -621,7 +629,7 @@ export function AccessSecurityDashboard() {
<div className="flex flex-wrap gap-2">
{(data?.rules || []).map((rule) => (
<Badge
className="border-zinc-200 bg-zinc-50 text-zinc-600"
className="border-zinc-200 bg-zinc-50 text-zinc-600 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300"
key={rule}
variant="outline"
>
@ -634,7 +642,7 @@ export function AccessSecurityDashboard() {
<CardContent>
<div className="overflow-x-auto rounded-lg border">
<div className="min-w-[980px]">
<div className="grid grid-cols-[138px_132px_86px_minmax(220px,1fr)_140px_120px] border-b bg-zinc-50 px-4 py-2 font-medium text-muted-foreground text-xs">
<div className="grid grid-cols-[138px_132px_86px_minmax(220px,1fr)_140px_120px] border-b bg-zinc-50 px-4 py-2 font-medium text-muted-foreground text-xs dark:bg-zinc-900/70">
<div>时间</div>
<div>IP</div>
<div>状态</div>

16
app/(admin)/settings/_components/admin-settings-navigation.tsx
View File

@ -11,11 +11,9 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { ADMIN_SETTINGS_NAV_GROUPS } from "../_lib/settings-navigation";
import { ADMIN_SETTINGS_NAV_ITEMS } from "../_lib/settings-navigation";
import type { AdminSettingsNavItem } from "../_lib/types";
const ALL_SETTINGS_ITEMS = ADMIN_SETTINGS_NAV_GROUPS.flatMap((group) => group.items);
function SettingsQuickAction({
activeTab,
item,
@ -73,9 +71,13 @@ export function AdminSettingsNavigation({
onTabChange: (value: string) => void;
}) {
const router = useRouter();
const activeItem = ALL_SETTINGS_ITEMS.find((item) => item.value === activeTab);
const activeItem = ADMIN_SETTINGS_NAV_ITEMS.find(
(item) => item.value === activeTab
);
const handleSelectChange = (value: string) => {
const nextItem = ALL_SETTINGS_ITEMS.find((item) => item.value === value);
const nextItem = ADMIN_SETTINGS_NAV_ITEMS.find(
(item) => item.value === value
);
if (nextItem?.href) {
router.push(nextItem.href);
return;
@ -95,7 +97,7 @@ export function AdminSettingsNavigation({
<SelectValue placeholder={activeItem?.label || "选择设置项"} />
</SelectTrigger>
<SelectContent>
{ALL_SETTINGS_ITEMS.map((item) => (
{ADMIN_SETTINGS_NAV_ITEMS.map((item) => (
<SelectItem key={item.value} value={item.value}>
{item.label}
</SelectItem>
@ -119,7 +121,7 @@ export function AdminSettingsNavigation({
</div>
<div className="hidden min-w-0 grid-cols-7 gap-1 md:grid xl:grid-cols-[repeat(13,minmax(78px,1fr))_auto]">
{ALL_SETTINGS_ITEMS.map((item) => (
{ADMIN_SETTINGS_NAV_ITEMS.map((item) => (
<SettingsQuickAction
activeTab={activeTab}
item={item}

4
app/(admin)/settings/_lib/settings-navigation.ts
View File

@ -114,3 +114,7 @@ export const ADMIN_SETTINGS_NAV_GROUPS: AdminSettingsNavGroup[] = [
],
},
];
export const ADMIN_SETTINGS_NAV_ITEMS = ADMIN_SETTINGS_NAV_GROUPS.flatMap(
(group) => group.items
);

24
app/(admin)/settings/admin-settings-client.tsx
View File

@ -318,6 +318,7 @@ import {
DEFAULT_LOCAL_AI_EXPANDED_SECTIONS,
LOCAL_AI_EXPANDED_STORAGE_KEY,
} from "./_lib/local-ai-sections";
import { ADMIN_SETTINGS_NAV_ITEMS } from "./_lib/settings-navigation";
import type {
LocalAiOverviewItem,
LocalAiPlanningSectionsProps,
@ -1710,6 +1711,25 @@ function isMoonshotOfficialBaseUrl(value?: string | null) {
export function AdminSettingsClient() {
const [activeTab, setActiveTab] = useState("users");
useEffect(() => {
const requestedTab = new URLSearchParams(window.location.search).get("tab");
if (
requestedTab &&
ADMIN_SETTINGS_NAV_ITEMS.some(
(item) => item.value === requestedTab && !item.href
)
) {
setActiveTab(requestedTab);
}
}, []);
const handleActiveTabChange = (value: string) => {
setActiveTab(value);
const url = new URL(window.location.href);
url.searchParams.set("tab", value);
window.history.replaceState(null, "", url);
};
// 用户管理状态
const [userSearch, setUserSearch] = useState("");
const [userPage, setUserPage] = useState(1);
@ -8657,10 +8677,10 @@ export function AdminSettingsClient() {
return (
<div className="settings-workspace w-full px-3 py-3 sm:px-4 xl:px-5">
<Tabs onValueChange={setActiveTab} value={activeTab}>
<Tabs onValueChange={handleActiveTabChange} value={activeTab}>
<AdminSettingsNavigation
activeTab={activeTab}
onTabChange={setActiveTab}
onTabChange={handleActiveTabChange}
/>
{/* 用户管理 */}

29
app/(admin)/settings/style-pro/style-pro-settings-client.tsx
View File

@ -1,7 +1,7 @@
"use client";
import Link from "next/link";
import { ArrowLeft, Plus, Save, Trash2, Wand2 } from "lucide-react";
import { Plus, Save, Trash2, Wand2 } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import useSWR from "swr";
import { toast } from "sonner";
@ -25,6 +25,7 @@ import {
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { fetcher } from "@/lib/utils";
import { AdminSettingsNavigation } from "../_components/admin-settings-navigation";
import {
STYLE_PRO_CONFIG_KEY,
defaultStyleProConfig,
@ -322,6 +323,7 @@ function CustomFieldEditor({
}
export function StyleProSettingsClient() {
const router = useRouter();
const { data, mutate } = useSWR<SettingsResponse>(
`/api/admin/settings?key=${STYLE_PRO_CONFIG_KEY}`,
fetcher
@ -561,17 +563,15 @@ export function StyleProSettingsClient() {
};
return (
<main className="settings-workspace mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-5 sm:px-5">
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div className="settings-workspace w-full px-3 py-3 sm:px-4 xl:px-5">
<AdminSettingsNavigation
activeTab="style-pro"
onTabChange={(value) => router.push(`/settings?tab=${value}`)}
/>
<main className="mt-6 flex w-full flex-col gap-4">
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div>
<div className="mb-2">
<Button asChild size="sm" variant="outline">
<Link href="/settings">
<ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
返回设置
</Link>
</Button>
</div>
<h1 className="font-semibold text-xl">风格化 PRO 设置</h1>
<p className="mt-1 max-w-2xl text-muted-foreground text-xs leading-5">
配置无限画布里的风格化 PRO 子页面。用户只看到分类和按钮名称，隐藏提示词和模型只在服务端生成时使用。
@ -592,7 +592,7 @@ export function StyleProSettingsClient() {
{saving ? "保存中" : "保存配置"}
</Button>
</div>
</div>
</div>
<Card>
<CardHeader>
@ -1193,6 +1193,7 @@ export function StyleProSettingsClient() {
))}
</CardContent>
</Card>
</main>
</main>
</div>
);
}

1
playwright.helpers.config.ts
View File

@ -9,6 +9,7 @@ export default defineConfig({
/routes\/image-message-contracts\.test\.ts/,
/routes\/production-local-fallbacks\.test\.ts/,
/routes\/canvas-entry-performance\.test\.ts/,
/routes\/settings-visual-consistency\.test\.ts/,
],
fullyParallel: true,
forbidOnly: !!process.env.CI,

55
tests/routes/settings-visual-consistency.test.ts Normal file
View File

@ -0,0 +1,55 @@
import { expect, test } from "@playwright/test";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
function readSource(path: string) {
return readFileSync(resolve(process.cwd(), path), "utf8");
}
test.describe("settings visual consistency", () => {
test("keeps access security surfaces readable in dark mode", () => {
const source = readSource(
"app/(admin)/settings/_components/access-security-dashboard.tsx"
);
expect(source).toContain("dark:bg-slate-900/70");
expect(source).toContain("dark:bg-sky-950/45");
expect(source).toContain("dark:bg-orange-950/45");
expect(source).toContain("dark:bg-emerald-950/45");
expect(source).toContain("dark:bg-slate-800");
expect(source).toContain("dark:bg-zinc-900/70");
expect(source).toContain("dark:bg-red-950/30");
});
test("keeps Style Pro inside the shared settings shell", () => {
const mainSource = readSource(
"app/(admin)/settings/admin-settings-client.tsx"
);
const styleProSource = readSource(
"app/(admin)/settings/style-pro/style-pro-settings-client.tsx"
);
const sharedShell =
"settings-workspace w-full px-3 py-3 sm:px-4 xl:px-5";
expect(mainSource).toContain(sharedShell);
expect(styleProSource).toContain(sharedShell);
expect(styleProSource).toContain("<AdminSettingsNavigation");
expect(styleProSource).toContain('activeTab="style-pro"');
expect(styleProSource).toContain("router.push(");
expect(styleProSource).toContain("/settings?tab=");
expect(styleProSource).not.toContain("max-w-7xl");
expect(styleProSource).not.toContain("返回设置");
});
test("restores the requested settings tab after cross-page navigation", () => {
const source = readSource(
"app/(admin)/settings/admin-settings-client.tsx"
);
expect(source).toContain(
'new URLSearchParams(window.location.search).get("tab")'
);
expect(source).toContain("ADMIN_SETTINGS_NAV_ITEMS.some");
expect(source).toContain('url.searchParams.set("tab", value)');
});
});