Skip to content

Commit e2a40c0

Browse files
Wesley-YoungWesley-Young
committed
Switch frontend design to Vercel-like
1 parent a3e2826 commit e2a40c0

4 files changed

Lines changed: 39 additions & 39 deletions

File tree

‎AGENTS.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ Method names should express domain intent, not merely translate implementation i
4343

4444
## Frontend Design
4545

46-
Prefer a restrained, Stripe-like visual language: clear hierarchy, precise spacing, strong typography, subtle borders and shadows, and a small purposeful color palette. Interfaces should feel polished through proportion and alignment rather than through decoration.
46+
Prefer a restrained, Vercel-like visual language: monochrome-first surfaces, high contrast, crisp borders, precise spacing, strong typography, and minimal shadows. Use color sparingly for status and emphasis, and keep motion subtle and functional. Interfaces should feel polished through proportion, alignment, and clarity rather than decoration.
4747

4848
Remove copy and visual elements that do not help the user complete the current task. Avoid explanatory panels, feature callouts, ornamental backgrounds, oversized headings, redundant security text, and decorative footer content in focused application flows. Do not turn a simple form into a marketing page.
4949

‎plugins/webui-gateway/webui/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta name="theme-color" content="#0a2540" />
6+
<meta name="theme-color" content="#171717" />
77
<meta name="description" content="Fraq WebUI 统一鉴权入口" />
88
<title>登录到 Fraq</title>
99
</head>

‎plugins/webui-gateway/webui/src/app.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -98,15 +98,15 @@ export function App() {
9898
}
9999

100100
return (
101-
<main className="flex min-h-dvh items-center justify-center bg-[#f6f9fc] px-6 py-12">
102-
<section className="w-full max-w-[23rem]" aria-labelledby="login-title">
103-
<h1 id="login-title" className="mb-8 text-center text-2xl font-semibold text-[#0a2540]">
104-
登录 WebUI
101+
<main className="flex min-h-dvh items-center justify-center bg-white px-6 py-12 text-[#171717]">
102+
<section className="w-full max-w-[22.5rem]" aria-labelledby="login-title">
103+
<h1 id="login-title" className="mb-8 text-center text-xl font-semibold text-[#171717]">
104+
登录 Fraq WebUI
105105
</h1>
106106

107107
<form className="space-y-5" onSubmit={submit}>
108108
<div className="space-y-2.5">
109-
<Label htmlFor="access-token" className="text-[0.8125rem] font-semibold text-[#0a2540]">
109+
<Label htmlFor="access-token" className="text-sm font-medium text-[#171717]">
110110
访问令牌
111111
</Label>
112112
<div className="relative">
@@ -119,13 +119,13 @@ export function App() {
119119
value={accessToken}
120120
onChange={(event) => setAccessToken(event.target.value)}
121121
aria-invalid={Boolean(error)}
122-
className="h-11 rounded-md border border-[#cfd7df] bg-white px-3 pr-11 font-mono text-sm text-[#0a2540] shadow-[0_1px_2px_rgba(10,37,64,0.08)] focus-visible:border-[#635bff] focus-visible:ring-2 focus-visible:ring-[#635bff]/20"
122+
className="h-11 rounded-md border border-[#d4d4d4] bg-white px-3 pr-11 font-mono text-sm text-[#171717] transition-colors duration-150 focus-visible:border-[#171717] focus-visible:ring-1 focus-visible:ring-[#171717] aria-invalid:border-[#e5484d] aria-invalid:ring-1 aria-invalid:ring-[#e5484d]"
123123
/>
124124
<Button
125125
type="button"
126126
variant="ghost"
127127
size="icon"
128-
className="absolute right-0.5 top-0.5 size-10 rounded-md text-[#697386] hover:bg-[#f6f9fc] hover:text-[#0a2540]"
128+
className="absolute right-0.5 top-0.5 size-10 rounded-md text-[#737373] transition-colors duration-150 hover:bg-[#f5f5f5] hover:text-[#171717] focus-visible:border-transparent focus-visible:ring-1 focus-visible:ring-[#171717]"
129129
disabled={status !== 'idle'}
130130
onClick={() => setShowToken((visible) => !visible)}
131131
title={showToken ? '隐藏访问令牌' : '显示访问令牌'}
@@ -137,14 +137,14 @@ export function App() {
137137
</div>
138138

139139
{error ? (
140-
<Alert variant="destructive" className="rounded-md border-[#f5a3b3] bg-[#fff5f7] px-3.5 py-3">
140+
<Alert variant="destructive" className="rounded-md border-[#f1aeb1] bg-[#fff8f8] px-3.5 py-3">
141141
<CircleAlertIcon className="size-4" aria-hidden="true" />
142-
<AlertDescription className="text-[#a51736]">{error}</AlertDescription>
142+
<AlertDescription className="text-[#b4232a]">{error}</AlertDescription>
143143
</Alert>
144144
) : null}
145145

146146
<Button
147-
className="h-11 w-full rounded-md bg-[#635bff] text-sm font-semibold text-white shadow-[0_2px_5px_rgba(50,50,93,0.18)] hover:bg-[#5851e1]"
147+
className="h-11 w-full rounded-md border border-[#171717] bg-[#171717] text-sm font-medium text-white transition-colors duration-150 hover:border-[#333333] hover:bg-[#333333] focus-visible:border-[#171717] focus-visible:ring-2 focus-visible:ring-[#171717]/25 disabled:border-[#e5e5e5] disabled:bg-[#e5e5e5] disabled:text-[#a3a3a3] disabled:opacity-100"
148148
type="submit"
149149
disabled={!accessToken || status !== 'idle'}
150150
>

‎plugins/webui-gateway/webui/src/style.css‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -50,37 +50,37 @@
5050

5151
:root {
5252
--background: oklch(1 0 0);
53-
--foreground: oklch(0.268 0.056 249.2);
53+
--foreground: oklch(0.205 0 0);
5454
--card: oklch(1 0 0);
55-
--card-foreground: oklch(0.268 0.056 249.2);
55+
--card-foreground: oklch(0.205 0 0);
5656
--popover: oklch(1 0 0);
57-
--popover-foreground: oklch(0.268 0.056 249.2);
58-
--primary: oklch(0.574 0.218 285.1);
57+
--popover-foreground: oklch(0.205 0 0);
58+
--primary: oklch(0.205 0 0);
5959
--primary-foreground: oklch(1 0 0);
60-
--secondary: oklch(0.977 0.007 247.9);
61-
--secondary-foreground: oklch(0.268 0.056 249.2);
62-
--muted: oklch(0.977 0.007 247.9);
63-
--muted-foreground: oklch(0.554 0.025 250.3);
64-
--accent: oklch(0.95 0.013 249.1);
65-
--accent-foreground: oklch(0.268 0.056 249.2);
66-
--destructive: oklch(0.55 0.213 16.5);
67-
--border: oklch(0.923 0.011 248.1);
68-
--input: oklch(0.86 0.018 247.5);
69-
--ring: oklch(0.574 0.218 285.1);
70-
--chart-1: oklch(0.574 0.218 285.1);
71-
--chart-2: oklch(0.77 0.154 209.5);
72-
--chart-3: oklch(0.72 0.145 166.4);
73-
--chart-4: oklch(0.268 0.056 249.2);
74-
--chart-5: oklch(0.657 0.165 280.4);
75-
--radius: 0.625rem;
76-
--sidebar: oklch(0.977 0.007 247.9);
77-
--sidebar-foreground: oklch(0.268 0.056 249.2);
78-
--sidebar-primary: oklch(0.574 0.218 285.1);
60+
--secondary: oklch(0.97 0 0);
61+
--secondary-foreground: oklch(0.205 0 0);
62+
--muted: oklch(0.97 0 0);
63+
--muted-foreground: oklch(0.556 0 0);
64+
--accent: oklch(0.97 0 0);
65+
--accent-foreground: oklch(0.205 0 0);
66+
--destructive: oklch(0.577 0.245 27.325);
67+
--border: oklch(0.922 0 0);
68+
--input: oklch(0.87 0 0);
69+
--ring: oklch(0.205 0 0);
70+
--chart-1: oklch(0.205 0 0);
71+
--chart-2: oklch(0.439 0 0);
72+
--chart-3: oklch(0.556 0 0);
73+
--chart-4: oklch(0.708 0 0);
74+
--chart-5: oklch(0.87 0 0);
75+
--radius: 0.5rem;
76+
--sidebar: oklch(0.985 0 0);
77+
--sidebar-foreground: oklch(0.205 0 0);
78+
--sidebar-primary: oklch(0.205 0 0);
7979
--sidebar-primary-foreground: oklch(1 0 0);
80-
--sidebar-accent: oklch(0.95 0.013 249.1);
81-
--sidebar-accent-foreground: oklch(0.268 0.056 249.2);
82-
--sidebar-border: oklch(0.923 0.011 248.1);
83-
--sidebar-ring: oklch(0.574 0.218 285.1);
80+
--sidebar-accent: oklch(0.97 0 0);
81+
--sidebar-accent-foreground: oklch(0.205 0 0);
82+
--sidebar-border: oklch(0.922 0 0);
83+
--sidebar-ring: oklch(0.205 0 0);
8484
}
8585

8686
@layer base {

0 commit comments

Comments
 (0)