feat: 品牌改版 v2 — 跟随霓虹数据流 logo
- logo 矢量化：青→蓝→紫渐变 S 数据流（logo.tsx + favicon.svg，web/admin 共用） - 全站配色跟随 logo：强调色青瓷绿 → 青蓝（浅 #0284C7 / 暗 #38BDF8），中性色转冷蓝，终端窗深岩蓝底 - 紫色克制使用：仅 logo 与 .text-brand-gradient（Hero 标题"AI Agent 工作台"渐变字） - 导航/页脚/admin 顶栏/登录页挂载 logo 标记 - 终端窗与代码块的提示符、光标、事件标签同步换色 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blizzard
@@ -1,5 +1,27 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="7" fill="#10201b"/>
|
||||
<path d="M9 20.5 15 10l3.2 5.6L21 11l2.5 4.3" fill="none" stroke="#3ecdad" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="23.5" cy="15.3" r="1.6" fill="#3ecdad"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#34E5E0"/>
|
||||
<stop offset="0.5" stop-color="#3B82F6"/>
|
||||
<stop offset="1" stop-color="#A855F7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="14" fill="#0B1117"/>
|
||||
<g fill="none" stroke-linecap="round">
|
||||
<path d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49" stroke="url(#g)" stroke-width="9" opacity="0.22"/>
|
||||
<path d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49" stroke="url(#g)" stroke-width="6" opacity="0.45"/>
|
||||
<path d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49" stroke="url(#g)" stroke-width="3.6"/>
|
||||
</g>
|
||||
<g fill="#34E5E0">
|
||||
<circle cx="15" cy="13" r="1.4"/>
|
||||
<circle cx="10" cy="17" r="1"/>
|
||||
<circle cx="14" cy="20" r="0.8"/>
|
||||
</g>
|
||||
<g stroke="#A855F7" stroke-width="0.9" opacity="0.75">
|
||||
<path d="M42 49 L50 46 M42 49 L53 51 M50 46 L53 51" fill="none"/>
|
||||
</g>
|
||||
<g fill="#C084FC">
|
||||
<circle cx="50" cy="46" r="1.5"/>
|
||||
<circle cx="53" cy="51" r="1.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 323 B After Width: | Height: | Size: 1.1 KiB |
@@ -2,6 +2,7 @@ import { Link, Outlet, useNavigate } from 'react-router-dom'
|
||||
import { LogOut, Moon, Sun } from 'lucide-react'
|
||||
import { logout } from '@/api/auth'
|
||||
import { useTheme } from '@/components/theme-provider'
|
||||
import { LogoMark } from '@/components/logo'
|
||||
|
||||
export function AdminLayout() {
|
||||
const navigate = useNavigate()
|
||||
@@ -11,7 +12,8 @@ export function AdminLayout() {
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<header className="sticky top-0 z-40 border-b border-hairline bg-ground/85 backdrop-blur">
|
||||
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
|
||||
<Link to="/" className="font-mono text-[14px] font-semibold">
|
||||
<Link to="/" className="flex items-center gap-2.5 font-mono text-[14px] font-semibold">
|
||||
<LogoMark size={24} />
|
||||
sundynix <em className="not-italic text-accent">admin</em>
|
||||
</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
interface LogoMarkProps {
|
||||
size?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
/** 品牌 Logo：霓虹数据流 S（青→蓝→紫），深岩底方形 */
|
||||
export function LogoMark({ size = 28, className }: LogoMarkProps) {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 64 64"
|
||||
className={className}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="logo-g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stopColor="#34E5E0" />
|
||||
<stop offset="0.5" stopColor="#3B82F6" />
|
||||
<stop offset="1" stopColor="#A855F7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="14" fill="#0B1117" />
|
||||
<g fill="none" strokeLinecap="round">
|
||||
<path
|
||||
d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49"
|
||||
stroke="url(#logo-g)"
|
||||
strokeWidth="9"
|
||||
opacity="0.22"
|
||||
/>
|
||||
<path
|
||||
d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49"
|
||||
stroke="url(#logo-g)"
|
||||
strokeWidth="6"
|
||||
opacity="0.45"
|
||||
/>
|
||||
<path
|
||||
d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49"
|
||||
stroke="url(#logo-g)"
|
||||
strokeWidth="3.6"
|
||||
/>
|
||||
</g>
|
||||
<g fill="#34E5E0">
|
||||
<circle cx="15" cy="13" r="1.4" />
|
||||
<circle cx="10" cy="17" r="1" />
|
||||
<circle cx="14" cy="20" r="0.8" />
|
||||
</g>
|
||||
<g stroke="#A855F7" strokeWidth="0.9" opacity="0.75">
|
||||
<path d="M42 49 L50 46 M42 49 L53 51 M50 46 L53 51" fill="none" />
|
||||
</g>
|
||||
<g fill="#C084FC">
|
||||
<circle cx="50" cy="46" r="1.5" />
|
||||
<circle cx="53" cy="51" r="1.2" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
+26
-43
@@ -2,39 +2,37 @@
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* ── 设计 token（设计稿 v0.2）────────────────────────────
|
||||
青瓷绿单强调色；中性色整体向青绿偏移；
|
||||
终端窗双主题共用深色。 */
|
||||
/* ── 设计 token（品牌改版 v2：跟随 logo，与 web 保持一致）── */
|
||||
:root {
|
||||
--ground: #f6f8f7;
|
||||
--ground: #f5f7f9;
|
||||
--surface: #ffffff;
|
||||
--ink: #16211d;
|
||||
--ink-2: #55665f;
|
||||
--ink-3: #8a9891;
|
||||
--hairline: #e1e8e4;
|
||||
--hairline-strong: #c9d4cf;
|
||||
--accent: #0e7c6b;
|
||||
--accent-ink: #0a5a4e;
|
||||
--accent-soft: #e3f1ec;
|
||||
--code-bg: #edf2f0;
|
||||
--term-bg: #10201b;
|
||||
--term-ink: #c7e8de;
|
||||
--ink: #151c24;
|
||||
--ink-2: #526069;
|
||||
--ink-3: #8595a0;
|
||||
--hairline: #e0e7ec;
|
||||
--hairline-strong: #c6d2da;
|
||||
--accent: #0284c7;
|
||||
--accent-ink: #075985;
|
||||
--accent-soft: #e0f2fe;
|
||||
--code-bg: #ebf1f5;
|
||||
--term-bg: #0e1620;
|
||||
--term-ink: #c9e4f5;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--ground: #0d1311;
|
||||
--surface: #131b18;
|
||||
--ink: #e7efeb;
|
||||
--ink-2: #93a69f;
|
||||
--ink-3: #64756e;
|
||||
--hairline: #22302b;
|
||||
--hairline-strong: #35453f;
|
||||
--accent: #3ecdad;
|
||||
--accent-ink: #6fdfc6;
|
||||
--accent-soft: #12352d;
|
||||
--code-bg: #182420;
|
||||
--term-bg: #0a1512;
|
||||
--term-ink: #a9d8cb;
|
||||
--ground: #0b1117;
|
||||
--surface: #111925;
|
||||
--ink: #e6edf3;
|
||||
--ink-2: #93a6b4;
|
||||
--ink-3: #62737f;
|
||||
--hairline: #1f2c38;
|
||||
--hairline-strong: #32434f;
|
||||
--accent: #38bdf8;
|
||||
--accent-ink: #7dd3fc;
|
||||
--accent-soft: #0b3049;
|
||||
--code-bg: #14202b;
|
||||
--term-bg: #0a121b;
|
||||
--term-ink: #bfe3f7;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -73,18 +71,3 @@ body {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-ink);
|
||||
}
|
||||
|
||||
/* 终端光标 */
|
||||
@keyframes caret-blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.caret-blink {
|
||||
animation: caret-blink 1.1s steps(1) infinite;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.caret-blink {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useState, type FormEvent } from 'react'
|
||||
import { Navigate, useNavigate } from 'react-router-dom'
|
||||
import { getToken } from '@/api/client'
|
||||
import { login } from '@/api/auth'
|
||||
import { LogoMark } from '@/components/logo'
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate()
|
||||
@@ -32,7 +33,8 @@ export default function LoginPage() {
|
||||
onSubmit={onSubmit}
|
||||
className="w-full max-w-[360px] rounded-xl border border-hairline bg-surface p-8"
|
||||
>
|
||||
<p className="mb-1 font-mono text-[13px] font-semibold">
|
||||
<p className="mb-1 flex items-center gap-2 font-mono text-[13px] font-semibold">
|
||||
<LogoMark size={22} />
|
||||
sundynix <em className="not-italic text-accent">admin</em>
|
||||
</p>
|
||||
<h1 className="mb-6 text-[20px] font-[650] tracking-[-0.01em]">
|
||||
|
||||
Reference in New Issue
Block a user