feat: 官网 + 管理端 + Gin/GORM 后端首个完整版本 #1

Merged
Blizzard merged 9 commits from main into dev 2026-07-17 06:07:34 +00:00
13 changed files with 260 additions and 90 deletions
Showing only changes of commit 7e21036faf - Show all commits
+26 -4
View File
@@ -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

+3 -1
View File
@@ -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">
+57
View File
@@ -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
View File
@@ -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;
}
}
+3 -1
View File
@@ -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]">
+26 -4
View File
@@ -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

+3 -1
View File
@@ -1,5 +1,6 @@
import { Link } from 'react-router-dom'
import { SITE } from '@/content/site'
import { LogoMark } from '@/components/logo'
const COLUMNS = [
{
@@ -25,7 +26,8 @@ export function SiteFooter() {
<footer className="border-t border-hairline">
<div className="mx-auto grid max-w-6xl gap-10 px-6 py-12 md:grid-cols-[1.5fr_1fr_1fr] lg:px-10">
<div>
<p className="font-mono text-[15px] font-semibold">
<p className="flex items-center gap-2.5 font-mono text-[15px] font-semibold">
<LogoMark size={30} />
sundynix <em className="not-italic text-accent">agentix</em>
</p>
<p className="mt-2 text-[14px] text-ink-2">{SITE.tagline}</p>
+3 -1
View File
@@ -2,6 +2,7 @@ import { useState } from 'react'
import { Link, NavLink } from 'react-router-dom'
import { Menu, Moon, Sun, X } from 'lucide-react'
import { useTheme } from '@/components/theme-provider'
import { LogoMark } from '@/components/logo'
import { cn } from '@/lib/utils'
const NAV_ITEMS = [
@@ -63,7 +64,8 @@ export function SiteHeader() {
return (
<header className="sticky top-0 z-40 border-b border-hairline bg-ground/85 backdrop-blur">
<div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6 lg:px-10">
<Link to="/" className="font-mono text-[15px] font-semibold">
<Link to="/" className="flex items-center gap-2.5 font-mono text-[15px] font-semibold">
<LogoMark size={26} />
sundynix <em className="not-italic text-accent">agentix</em>
</Link>
+57
View File
@@ -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>
)
}
+3 -3
View File
@@ -14,7 +14,7 @@ export function TerminalDemo() {
</div>
<div className="overflow-x-auto px-5 pb-6 pt-5 font-mono text-[13.5px] leading-[2.05] text-term-ink">
<div className="term-line">
<span className="font-semibold text-[#3ecdad]"> </span>
<span className="font-semibold text-[#22d3ee]"> </span>
{TERMINAL_DEMO.prompt}
</div>
<div className="term-line text-white/35" style={{ animationDelay: '0.35s' }}>
@@ -26,12 +26,12 @@ export function TerminalDemo() {
className="term-line whitespace-nowrap"
style={{ animationDelay: `${0.7 + i * 0.45}s` }}
>
<span className={ev.ok ? 'text-[#a6d96a]' : 'text-[#7fb8e8]'}>
<span className={ev.ok ? 'text-[#a6d96a]' : 'text-[#60a5fa]'}>
[{ev.tag}]
</span>{' '}
{ev.text}
{i === TERMINAL_DEMO.events.length - 1 && (
<span className="caret-blink ml-1 inline-block h-[15px] w-2 translate-y-0.5 bg-[#3ecdad]" />
<span className="caret-blink ml-1 inline-block h-[15px] w-2 translate-y-0.5 bg-[#22d3ee]" />
)}
</div>
))}
+48 -28
View File
@@ -3,39 +3,46 @@
@custom-variant dark (&:is(.dark *));
/* ── 设计 token设计稿 v0.2)────────────────────────────
青瓷绿单强调色;中性色整体向青绿偏移
终端窗双主题共用深色。 */
/* ── 设计 token品牌改版 v2:跟随 logo────────────────
霓虹数据流 logo:青 #34E5E0 → 蓝 #3B82F6 → 紫 #A855F7
强调色取青蓝段,紫色只在 logo 与品牌渐变里出现;
中性色向冷蓝偏移,终端窗为深岩蓝底。 */
: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;
--brand-g1: #0891b2;
--brand-g2: #2563eb;
--brand-g3: #9333ea;
}
.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;
--brand-g1: #22d3ee;
--brand-g2: #60a5fa;
--brand-g3: #c084fc;
}
@theme inline {
@@ -75,6 +82,19 @@ body {
color: var(--accent-ink);
}
/* 品牌渐变文字(logo 同源:青→蓝→紫),克制使用 */
.text-brand-gradient {
background: linear-gradient(
92deg,
var(--brand-g1),
var(--brand-g2) 55%,
var(--brand-g3)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 文章排版 — prose 对齐设计 token */
.prose-site {
--tw-prose-body: var(--ink-2);
+2 -1
View File
@@ -18,7 +18,8 @@ export function Hero() {
<h1 className="mx-auto max-w-[17em] text-balance text-4xl font-[650] leading-[1.18] tracking-[-0.028em] md:text-[52px] lg:text-[58px]">
<br />
AI Agent <span className="text-ink-3"></span>
<span className="text-brand-gradient">AI Agent </span>
<span className="text-ink-3"></span>
</h1>
</Reveal>
+3 -3
View File
@@ -23,13 +23,13 @@ export function Quickstart() {
<code>
<span className="text-white/35"># NATS</span>
{'\n'}
<span className="text-[#3ecdad]">$</span> git clone
<span className="text-[#22d3ee]">$</span> git clone
https://github.com/sundynix/agentix{'\n'}
<span className="text-[#3ecdad]">$</span> make demo{'\n'}
<span className="text-[#22d3ee]">$</span> make demo{'\n'}
{'\n'}
<span className="text-white/35"># </span>
{'\n'}
<span className="text-[#3ecdad]">$</span> docker compose up -d
<span className="text-[#22d3ee]">$</span> docker compose up -d
</code>
</pre>