Merge pull request 'Merge pull request 'feat: 官网 + 管理端 + Gin/GORM 后端首个完整版本' (#1) from main into dev' (#2) from dev into main
build-and-deploy / deploy (push) Successful in 2m12s
build-and-deploy / deploy (push) Successful in 2m12s
Reviewed-on: #2
This commit was merged in pull request #2.
This commit is contained in:
@@ -7,6 +7,13 @@
|
||||
"runtimeArgs": ["run", "dev"],
|
||||
"cwd": "web",
|
||||
"port": 5173
|
||||
},
|
||||
{
|
||||
"name": "admin",
|
||||
"runtimeExecutable": "npm",
|
||||
"runtimeArgs": ["run", "dev"],
|
||||
"cwd": "admin",
|
||||
"port": 5174
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
# 一次性手动放置，CI 不覆盖它（敏感信息不进流水线）
|
||||
# compose 的 env_file 读取本文件
|
||||
|
||||
# 内网 MySQL（127 那台），库名 sundynix_site
|
||||
SUNDYNIX_DB=root:sundynix@tcp(192.168.100.127:3307)/sundynix_site?charset=utf8mb4&parseTime=True&loc=Local
|
||||
# 内网 MySQL（127 那台，MySQL root 密码是 root，注意不是机器 SSH 密码），库名 sundynix_site
|
||||
SUNDYNIX_DB=root:root@tcp(192.168.100.127:3307)/sundynix_site?charset=utf8mb4&parseTime=True&loc=Local
|
||||
|
||||
# 监听地址（容器内固定 8090，勿改，与 compose ports 对应）
|
||||
SUNDYNIX_ADDR=:8090
|
||||
|
||||
Generated
+1586
-4
File diff suppressed because it is too large
Load Diff
@@ -10,12 +10,16 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/typography": "^0.5.20",
|
||||
"@tailwindcss/vite": "^4.3.3",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.42.2",
|
||||
"lucide-react": "^1.24.0",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-router-dom": "^7.18.1",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"tailwindcss": "^4.3.3"
|
||||
},
|
||||
|
||||
+5
-1
@@ -2,8 +2,10 @@ import { Navigate, Outlet, Route, Routes } from 'react-router-dom'
|
||||
import { getToken } from '@/api/client'
|
||||
import { AdminLayout } from '@/components/admin-layout'
|
||||
import LoginPage from '@/pages/login'
|
||||
import DashboardPage from '@/pages/dashboard'
|
||||
import PostsListPage from '@/pages/posts-list'
|
||||
import PostEditPage from '@/pages/post-edit'
|
||||
import VisitsPage from '@/pages/visits'
|
||||
|
||||
function RequireAuth() {
|
||||
if (!getToken()) return <Navigate to="/login" replace />
|
||||
@@ -16,9 +18,11 @@ export default function App() {
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route element={<RequireAuth />}>
|
||||
<Route element={<AdminLayout />}>
|
||||
<Route index element={<PostsListPage />} />
|
||||
<Route index element={<DashboardPage />} />
|
||||
<Route path="posts" element={<PostsListPage />} />
|
||||
<Route path="posts/new" element={<PostEditPage />} />
|
||||
<Route path="posts/:id" element={<PostEditPage />} />
|
||||
<Route path="visits" element={<VisitsPage />} />
|
||||
</Route>
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
|
||||
@@ -42,7 +42,9 @@ export async function request<T>(
|
||||
|
||||
const res = await fetch(path, { ...init, headers })
|
||||
|
||||
if (res.status === 401) {
|
||||
// 登录接口的 401 是「凭据错误」，交给下方按后端 message 处理；
|
||||
// 其它接口的 401 才视为会话过期：清 token 并跳登录页
|
||||
if (res.status === 401 && !path.includes('/admin/login')) {
|
||||
clearToken()
|
||||
// basename=/admin，登录路由实际是 /admin/login
|
||||
if (!window.location.pathname.endsWith('/login')) {
|
||||
|
||||
@@ -61,3 +61,14 @@ export function updatePost(id: string, form: PostForm) {
|
||||
export function deletePost(id: string) {
|
||||
return request<null>(`/api/admin/posts/${id}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
export interface Stats {
|
||||
total: number
|
||||
published: number
|
||||
draft: number
|
||||
recent: PostListItem[]
|
||||
}
|
||||
|
||||
export function fetchStats() {
|
||||
return request<Stats>('/api/admin/stats')
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import { request } from '@/api/client'
|
||||
|
||||
export interface DailyVisit {
|
||||
date: string
|
||||
uv: number
|
||||
pv: number
|
||||
}
|
||||
|
||||
export interface VisitStats {
|
||||
daily: DailyVisit[]
|
||||
total_uv: number
|
||||
total_pv: number
|
||||
today_uv: number
|
||||
today_pv: number
|
||||
days: number
|
||||
}
|
||||
|
||||
export function fetchVisits(days: number) {
|
||||
return request<VisitStats>(`/api/admin/visits?days=${days}`)
|
||||
}
|
||||
@@ -1,52 +1,37 @@
|
||||
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 { useState } from 'react'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
import { Menu } from 'lucide-react'
|
||||
import { AdminSidebar } from '@/components/admin-sidebar'
|
||||
import { LogoMark } from '@/components/logo'
|
||||
|
||||
export function AdminLayout() {
|
||||
const navigate = useNavigate()
|
||||
const { resolved, setTheme } = useTheme()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<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="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">
|
||||
<button
|
||||
type="button"
|
||||
aria-label={
|
||||
resolved === 'dark' ? '切换到浅色主题' : '切换到深色主题'
|
||||
}
|
||||
onClick={() => setTheme(resolved === 'dark' ? 'light' : 'dark')}
|
||||
className="flex size-8 items-center justify-center rounded-full border border-hairline-strong text-ink-2 transition-colors hover:border-accent hover:text-accent-ink"
|
||||
>
|
||||
{resolved === 'dark' ? (
|
||||
<Sun className="size-4" />
|
||||
) : (
|
||||
<Moon className="size-4" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
logout()
|
||||
navigate('/login')
|
||||
}}
|
||||
className="flex items-center gap-1.5 rounded-[7px] border border-hairline-strong px-3 py-1.5 text-[13px] text-ink-2 transition-colors hover:border-accent hover:text-accent-ink"
|
||||
>
|
||||
<LogOut className="size-3.5" /> 退出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main className="mx-auto w-full max-w-5xl flex-1 px-6 py-8">
|
||||
<Outlet />
|
||||
</main>
|
||||
<div className="min-h-screen">
|
||||
<AdminSidebar open={open} onClose={() => setOpen(false)} />
|
||||
|
||||
<div className="md:pl-[220px]">
|
||||
{/* 移动端顶部条 */}
|
||||
<header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-hairline bg-ground/85 px-4 backdrop-blur md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
aria-label="打开菜单"
|
||||
className="text-ink-2"
|
||||
>
|
||||
<Menu className="size-5" />
|
||||
</button>
|
||||
<span className="flex items-center gap-2 font-mono text-[14px] font-semibold">
|
||||
<LogoMark size={20} /> sundynix{' '}
|
||||
<em className="not-italic text-accent">admin</em>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto w-full max-w-5xl px-6 py-8">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
import { Link, NavLink, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
BarChart3,
|
||||
FileText,
|
||||
Home,
|
||||
LayoutDashboard,
|
||||
LogOut,
|
||||
Moon,
|
||||
Sun,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
import { logout } from '@/api/auth'
|
||||
import { useTheme } from '@/components/theme-provider'
|
||||
import { LogoMark } from '@/components/logo'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const NAV = [
|
||||
{ to: '/', label: '仪表盘', icon: LayoutDashboard, end: true },
|
||||
{ to: '/posts', label: '文章', icon: FileText, end: false },
|
||||
{ to: '/visits', label: '访问统计', icon: BarChart3, end: false },
|
||||
]
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function AdminSidebar({ open, onClose }: Props) {
|
||||
const navigate = useNavigate()
|
||||
const { resolved, setTheme } = useTheme()
|
||||
|
||||
const itemCls = ({ isActive }: { isActive: boolean }) =>
|
||||
cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2.5 text-[14px] transition-colors',
|
||||
isActive
|
||||
? 'bg-accent-soft font-medium text-accent-ink'
|
||||
: 'text-ink-2 hover:bg-ground hover:text-ink',
|
||||
)
|
||||
|
||||
const bottomBtnCls =
|
||||
'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-[14px] text-ink-2 transition-colors hover:bg-ground hover:text-ink'
|
||||
|
||||
return (
|
||||
<>
|
||||
{open && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/40 md:hidden"
|
||||
onClick={onClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
<aside
|
||||
className={cn(
|
||||
'fixed inset-y-0 left-0 z-50 flex w-[220px] flex-col border-r border-hairline bg-surface transition-transform md:translate-x-0',
|
||||
open ? 'translate-x-0' : '-translate-x-full',
|
||||
)}
|
||||
>
|
||||
<div className="flex h-16 items-center justify-between border-b border-hairline px-5">
|
||||
<Link
|
||||
to="/"
|
||||
onClick={onClose}
|
||||
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>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="关闭菜单"
|
||||
className="text-ink-2 md:hidden"
|
||||
>
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-1 px-3 py-4">
|
||||
{NAV.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
end={item.end}
|
||||
onClick={onClose}
|
||||
className={itemCls}
|
||||
>
|
||||
<item.icon className="size-[18px]" />
|
||||
{item.label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="space-y-1 border-t border-hairline p-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTheme(resolved === 'dark' ? 'light' : 'dark')}
|
||||
className={bottomBtnCls}
|
||||
>
|
||||
{resolved === 'dark' ? (
|
||||
<Sun className="size-[18px]" />
|
||||
) : (
|
||||
<Moon className="size-[18px]" />
|
||||
)}
|
||||
{resolved === 'dark' ? '浅色模式' : '深色模式'}
|
||||
</button>
|
||||
{/* 整页跳转回用户端官网首页（生产同源） */}
|
||||
<a href="/" onClick={onClose} className={bottomBtnCls}>
|
||||
<Home className="size-[18px]" /> 返回主页
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
logout()
|
||||
navigate('/login')
|
||||
}}
|
||||
className={bottomBtnCls}
|
||||
>
|
||||
<LogOut className="size-[18px]" /> 退出登录
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
title: string
|
||||
description?: string
|
||||
confirmText?: string
|
||||
danger?: boolean
|
||||
loading?: boolean
|
||||
onConfirm: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export function ConfirmDialog({
|
||||
open,
|
||||
title,
|
||||
description,
|
||||
confirmText = '确认',
|
||||
danger,
|
||||
loading,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: Props) {
|
||||
if (!open) return null
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[90] flex items-center justify-center bg-black/40 p-4"
|
||||
onClick={onCancel}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-sm rounded-xl border border-hairline bg-surface p-6"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="text-[16px] font-semibold">{title}</h3>
|
||||
{description && (
|
||||
<p className="mt-2 text-[13.5px] leading-relaxed text-ink-2">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-5 flex justify-end gap-2.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="rounded-lg border border-hairline-strong px-4 py-2 text-[13.5px] text-ink-2 transition-colors hover:bg-ground"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
className={cn(
|
||||
'rounded-lg px-4 py-2 text-[13.5px] font-medium text-ground transition-opacity hover:opacity-90 disabled:opacity-60',
|
||||
danger ? 'bg-red-600' : 'bg-accent',
|
||||
)}
|
||||
>
|
||||
{loading ? '处理中…' : confirmText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
/** 登录背景：左青色数据流 + 右紫色神经网络 + 中央连线（呼应 logo）。搬自参考项目。 */
|
||||
export default function AIBanner() {
|
||||
const dataParticles = Array.from({ length: 100 }).map((_, i) => ({
|
||||
id: `dp-${i}`,
|
||||
y: 10 + Math.random() * 80,
|
||||
size: Math.random() > 0.8 ? 6 : Math.random() * 3 + 1.5,
|
||||
isSquare: Math.random() > 0.6,
|
||||
duration: Math.random() * 2 + 1.5,
|
||||
delay: Math.random() * 3,
|
||||
opacity: Math.random() * 0.7 + 0.3,
|
||||
}))
|
||||
|
||||
const neuralNodes = [
|
||||
{ x: 10, y: 50 }, { x: 30, y: 25 }, { x: 35, y: 75 },
|
||||
{ x: 55, y: 45 }, { x: 75, y: 15 }, { x: 70, y: 85 },
|
||||
{ x: 90, y: 55 }, { x: 80, y: 40 }, { x: 50, y: 90 },
|
||||
{ x: 20, y: 95 }, { x: 95, y: 20 }, { x: 45, y: 10 },
|
||||
{ x: 85, y: 75 }, { x: 15, y: 20 },
|
||||
]
|
||||
const neuralLines = [
|
||||
[0, 1], [0, 2], [1, 3], [2, 3], [1, 4], [3, 4],
|
||||
[3, 6], [2, 5], [3, 5], [5, 6], [4, 7], [6, 7],
|
||||
[2, 8], [5, 8], [0, 9], [2, 9], [4, 10], [7, 10],
|
||||
[1, 11], [4, 11], [6, 12], [5, 12], [0, 13], [1, 13],
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 h-full w-full overflow-hidden bg-[#080d17]">
|
||||
<div className="pointer-events-none absolute left-[15%] top-1/2 h-[800px] w-[800px] -translate-y-1/2 rounded-full bg-cyan-600/15 blur-[150px] mix-blend-screen" />
|
||||
<div className="pointer-events-none absolute right-[15%] top-1/2 h-[800px] w-[800px] -translate-y-1/2 rounded-full bg-fuchsia-600/15 blur-[150px] mix-blend-screen" />
|
||||
|
||||
<div
|
||||
className="pointer-events-none absolute inset-y-0 left-0 w-[65%]"
|
||||
style={{
|
||||
maskImage:
|
||||
'linear-gradient(to right, black 0%, black 60%, transparent 100%)',
|
||||
WebkitMaskImage:
|
||||
'linear-gradient(to right, black 0%, black 60%, transparent 100%)',
|
||||
}}
|
||||
>
|
||||
{dataParticles.map((p) => (
|
||||
<motion.div
|
||||
key={p.id}
|
||||
className={`absolute bg-cyan-400 ${p.isSquare ? 'rounded-sm' : 'rounded-full'}`}
|
||||
style={{
|
||||
width: p.size,
|
||||
height: p.size,
|
||||
top: `${p.y}%`,
|
||||
boxShadow: p.isSquare
|
||||
? '0 0 12px 3px rgba(6,182,212,0.9)'
|
||||
: '0 0 8px 2px rgba(6,182,212,0.6)',
|
||||
}}
|
||||
initial={{ x: '-10vw', opacity: 0 }}
|
||||
animate={{ x: '75vw', opacity: [0, p.opacity, p.opacity, 0] }}
|
||||
transition={{
|
||||
duration: p.duration * 3.5,
|
||||
repeat: Infinity,
|
||||
delay: p.delay,
|
||||
ease: 'linear',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div className="absolute left-0 top-1/2 flex h-[80%] w-full -translate-y-1/2 flex-col justify-between opacity-70">
|
||||
{Array.from({ length: 20 }).map((_, i) => (
|
||||
<motion.div
|
||||
key={`streak-${i}`}
|
||||
className="h-[2px] bg-gradient-to-r from-transparent via-cyan-400 to-transparent"
|
||||
style={{
|
||||
width: `${Math.random() * 40 + 20}%`,
|
||||
filter: 'drop-shadow(0 0 5px rgba(6,182,212,0.8))',
|
||||
}}
|
||||
initial={{ x: '-50%', opacity: 0 }}
|
||||
animate={{ x: '150%', opacity: [0, 1, 1, 0] }}
|
||||
transition={{
|
||||
duration: 7 + Math.random() * 6,
|
||||
repeat: Infinity,
|
||||
delay: Math.random() * 4,
|
||||
ease: 'linear',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex w-[45%] items-center justify-end pr-[5%]">
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className="h-[80%] w-full max-w-[500px] overflow-visible"
|
||||
style={{ filter: 'drop-shadow(0 0 10px rgba(217,70,239,0.6))' }}
|
||||
>
|
||||
{neuralLines.map((line, i) => {
|
||||
const n1 = neuralNodes[line[0]]
|
||||
const n2 = neuralNodes[line[1]]
|
||||
return (
|
||||
<motion.line
|
||||
key={`line-${i}`}
|
||||
x1={n1.x}
|
||||
y1={n1.y}
|
||||
x2={n2.x}
|
||||
y2={n2.y}
|
||||
stroke="rgba(217,70,239,0.5)"
|
||||
strokeWidth="0.5"
|
||||
initial={{ pathLength: 0, opacity: 0 }}
|
||||
animate={{ pathLength: [0, 1, 1, 0], opacity: [0, 1, 1, 0] }}
|
||||
transition={{
|
||||
duration: 10,
|
||||
repeat: Infinity,
|
||||
ease: 'easeInOut',
|
||||
delay: i * 0.3,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{neuralNodes.map((node, i) => (
|
||||
<motion.circle
|
||||
key={`node-${i}`}
|
||||
cx={node.x}
|
||||
cy={node.y}
|
||||
r="1.5"
|
||||
fill="#d946ef"
|
||||
animate={{ r: [1.5, 2.5, 1.5], opacity: [0.4, 0.9, 0.4] }}
|
||||
transition={{ duration: 4.5, repeat: Infinity, delay: i * 0.4 }}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="pointer-events-none absolute left-0 top-1/2 flex h-[600px] w-full -translate-y-1/2 items-center justify-center opacity-60 mix-blend-screen">
|
||||
<svg
|
||||
viewBox="0 0 200 100"
|
||||
preserveAspectRatio="none"
|
||||
className="h-full w-full overflow-visible"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="elegant-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#06b6d4" stopOpacity="0" />
|
||||
<stop offset="25%" stopColor="#06b6d4" stopOpacity="0.8" />
|
||||
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.5" />
|
||||
<stop offset="75%" stopColor="#d946ef" stopOpacity="0.8" />
|
||||
<stop offset="100%" stopColor="#d946ef" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<motion.path
|
||||
key={`line-${i}`}
|
||||
d={`M -20 ${30 + i * 10} C 60 ${10 + i * 5}, 140 ${90 - i * 5}, 220 ${70 - i * 10}`}
|
||||
fill="none"
|
||||
stroke="url(#elegant-grad)"
|
||||
strokeWidth={0.2 + i * 0.05}
|
||||
animate={{
|
||||
strokeDasharray: ['0, 400', '400, 0'],
|
||||
opacity: [0.3, 0.7, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: 16 + i * 4,
|
||||
repeat: Infinity,
|
||||
ease: 'easeInOut',
|
||||
delay: i * 2,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,305 @@
|
||||
import { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { Cpu, ArrowRight } from 'lucide-react'
|
||||
import AIBanner from './ai-banner'
|
||||
|
||||
/** 登录前的 boot 过渡：点击芯片 → 神经链接进度 → 解锁。搬自参考项目。 */
|
||||
export default function AICoreEffect({ onUnlock }: { onUnlock: () => void }) {
|
||||
const [synced, setSynced] = useState(false)
|
||||
const [progress, setProgress] = useState(0)
|
||||
|
||||
const handleSync = () => {
|
||||
if (synced || progress > 0) return
|
||||
let p = 0
|
||||
const interval = setInterval(() => {
|
||||
p += 1
|
||||
setProgress(p)
|
||||
if (p >= 100) {
|
||||
clearInterval(interval)
|
||||
setSynced(true)
|
||||
setTimeout(() => onUnlock(), 800)
|
||||
}
|
||||
}, 25)
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{!synced && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden bg-[#080d17]"
|
||||
exit={{ opacity: 0, scale: 1.05 }}
|
||||
transition={{ duration: 0.8, ease: 'easeInOut' }}
|
||||
>
|
||||
<div className="absolute inset-0 opacity-50">
|
||||
<AIBanner />
|
||||
</div>
|
||||
<div className="absolute inset-0 z-10 bg-[#080d17]/70 backdrop-blur-sm" />
|
||||
|
||||
<div
|
||||
className={`pointer-events-none absolute left-1/2 top-1/2 z-[15] flex h-[800px] w-[800px] -translate-x-1/2 -translate-y-1/2 items-center justify-center mix-blend-screen transition-all duration-1000 ${progress > 0 ? 'scale-[1.05] opacity-100' : 'scale-100 opacity-90'}`}
|
||||
>
|
||||
<svg viewBox="-20 0 140 100" className="h-full w-full overflow-visible">
|
||||
<defs>
|
||||
<linearGradient id="logo-cyan" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#06b6d4" />
|
||||
<stop offset="100%" stopColor="#3b82f6" />
|
||||
</linearGradient>
|
||||
<linearGradient id="logo-purple" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#8b5cf6" />
|
||||
<stop offset="100%" stopColor="#d946ef" />
|
||||
</linearGradient>
|
||||
<linearGradient id="logo-s" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#06b6d4" />
|
||||
<stop offset="40%" stopColor="#ffffff" />
|
||||
<stop offset="60%" stopColor="#ffffff" />
|
||||
<stop offset="100%" stopColor="#d946ef" />
|
||||
</linearGradient>
|
||||
<filter id="logo-glow">
|
||||
<feGaussianBlur stdDeviation="1.2" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<g opacity="0.7">
|
||||
<path
|
||||
d="M 50 10 L 20 25 L 20 75 L 50 90"
|
||||
fill="none"
|
||||
stroke="url(#logo-cyan)"
|
||||
strokeWidth="0.5"
|
||||
opacity="0.8"
|
||||
/>
|
||||
{Array.from({ length: 60 }).map((_, i) => {
|
||||
const x = 22 + Math.random() * 25
|
||||
const y = 25 + Math.random() * 50
|
||||
return (
|
||||
<motion.circle
|
||||
key={`dot-${i}`}
|
||||
cx={x}
|
||||
cy={y}
|
||||
r={Math.random() > 0.7 ? 1 : 0.5}
|
||||
fill="#06b6d4"
|
||||
animate={{ opacity: [0.2, 1, 0.2] }}
|
||||
transition={{
|
||||
duration: 1 + Math.random() * 2,
|
||||
repeat: Infinity,
|
||||
delay: Math.random() * 2,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{Array.from({ length: 40 }).map((_, i) => (
|
||||
<motion.circle
|
||||
key={`inc-${i}`}
|
||||
cx={-20}
|
||||
cy={30 + Math.random() * 40}
|
||||
r={Math.random() > 0.5 ? 1.5 : 0.8}
|
||||
fill="#06b6d4"
|
||||
animate={{ x: [0, 45], opacity: [0, 1, 0] }}
|
||||
transition={{
|
||||
duration: 1.5 + Math.random() * 1.5,
|
||||
repeat: Infinity,
|
||||
ease: 'linear',
|
||||
delay: Math.random() * 2,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
<g opacity="0.7">
|
||||
<path
|
||||
d="M 50 10 L 80 25 L 80 75 L 50 90"
|
||||
fill="none"
|
||||
stroke="url(#logo-purple)"
|
||||
strokeWidth="0.5"
|
||||
opacity="0.8"
|
||||
/>
|
||||
{Array.from({ length: 20 }).map((_, i) => {
|
||||
const x = 52 + Math.random() * 25
|
||||
const y = 25 + Math.random() * 50
|
||||
return (
|
||||
<g key={`n-${i}`}>
|
||||
<motion.circle
|
||||
cx={x}
|
||||
cy={y}
|
||||
r="0.8"
|
||||
fill="#d946ef"
|
||||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||||
transition={{
|
||||
duration: 1.5 + Math.random() * 2,
|
||||
repeat: Infinity,
|
||||
delay: Math.random() * 2,
|
||||
}}
|
||||
/>
|
||||
<line
|
||||
x1={x}
|
||||
y1={y}
|
||||
x2={50}
|
||||
y2={50}
|
||||
stroke="#d946ef"
|
||||
strokeWidth="0.1"
|
||||
opacity="0.4"
|
||||
/>
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
{Array.from({ length: 20 }).map((_, i) => {
|
||||
const startY = 30 + Math.random() * 40
|
||||
const endY = 20 + Math.random() * 60
|
||||
return (
|
||||
<motion.g
|
||||
key={`out-${i}`}
|
||||
animate={{ x: [0, 35], opacity: [0, 1, 0] }}
|
||||
transition={{
|
||||
duration: 2 + Math.random() * 2,
|
||||
repeat: Infinity,
|
||||
ease: 'linear',
|
||||
delay: Math.random() * 2,
|
||||
}}
|
||||
>
|
||||
<circle cx={80} cy={endY} r="1.2" fill="#d946ef" />
|
||||
<line
|
||||
x1={50}
|
||||
y1={startY}
|
||||
x2={80}
|
||||
y2={endY}
|
||||
stroke="#d946ef"
|
||||
strokeWidth="0.2"
|
||||
opacity="0.5"
|
||||
/>
|
||||
</motion.g>
|
||||
)
|
||||
})}
|
||||
</g>
|
||||
|
||||
<g filter="url(#logo-glow)">
|
||||
{Array.from({ length: 80 }).map((_, i) => {
|
||||
const offset = (i - 40) * 0.25
|
||||
const isCenter = Math.abs(offset) < 3
|
||||
return (
|
||||
<motion.path
|
||||
key={`s-${i}`}
|
||||
d={`M ${70 + offset} 25 L ${45 + offset} 25 C ${25 + offset} 25, ${25 + offset} 45, ${45 + offset} 50 C ${75 + offset} 60, ${75 + offset} 80, ${55 + offset} 80 L ${30 + offset} 80`}
|
||||
fill="none"
|
||||
stroke="url(#logo-s)"
|
||||
strokeWidth={isCenter ? '0.8' : '0.3'}
|
||||
animate={{
|
||||
strokeDasharray: ['0, 300', '300, 0'],
|
||||
opacity: [0.1, isCenter ? 1 : 0.5, 0.1],
|
||||
}}
|
||||
transition={{
|
||||
duration:
|
||||
progress > 0
|
||||
? 0.6 + Math.random() * 0.5
|
||||
: 2.5 + Math.random() * 2,
|
||||
repeat: Infinity,
|
||||
delay: Math.random() * 3,
|
||||
ease: 'linear',
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 z-20 opacity-10"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'repeating-linear-gradient(transparent, transparent 2px, #000 2px, #000 4px)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-30 mt-[450px] flex flex-col items-center">
|
||||
<div className="relative flex h-32 w-32 items-center justify-center">
|
||||
<svg className="absolute inset-0 h-full w-full -rotate-90">
|
||||
<circle
|
||||
cx="64"
|
||||
cy="64"
|
||||
r="60"
|
||||
fill="none"
|
||||
stroke="rgba(6,182,212,0.1)"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<motion.circle
|
||||
cx="64"
|
||||
cy="64"
|
||||
r="60"
|
||||
fill="none"
|
||||
stroke="#06b6d4"
|
||||
strokeWidth="2"
|
||||
strokeDasharray={377}
|
||||
strokeDashoffset={377 - (377 * progress) / 100}
|
||||
style={{ filter: 'drop-shadow(0 0 10px rgba(6,182,212,0.8))' }}
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<motion.svg
|
||||
viewBox="0 0 100 100"
|
||||
className={`absolute inset-2 h-[calc(100%-16px)] w-[calc(100%-16px)] transition-colors duration-500 ${progress > 0 ? 'text-fuchsia-500' : 'text-cyan-500/30'}`}
|
||||
animate={{ rotate: progress > 0 ? 360 : 0 }}
|
||||
transition={{ duration: 10, repeat: Infinity, ease: 'linear' }}
|
||||
>
|
||||
<polygon
|
||||
points="50 5, 95 25, 95 75, 50 95, 5 75, 5 25"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
</motion.svg>
|
||||
|
||||
<button
|
||||
onClick={handleSync}
|
||||
disabled={progress > 0}
|
||||
className="group relative z-10 flex h-16 w-16 cursor-pointer items-center justify-center rounded-full border border-cyan-500/50 bg-slate-900 text-cyan-400 shadow-[0_0_15px_rgba(6,182,212,0.2)] transition-all hover:scale-110 hover:bg-cyan-950 hover:shadow-[0_0_30px_rgba(6,182,212,0.6)] disabled:cursor-not-allowed disabled:opacity-100"
|
||||
>
|
||||
<Cpu
|
||||
className={`h-8 w-8 transition-transform ${progress > 0 && progress < 100 ? 'animate-pulse text-fuchsia-400' : ''} ${progress === 100 ? 'text-white drop-shadow-[0_0_10px_white]' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 text-center font-mono">
|
||||
<div className="mb-4 text-sm uppercase tracking-[0.4em] text-cyan-400 drop-shadow-md">
|
||||
{progress === 0
|
||||
? 'Core Synchronization Required'
|
||||
: progress < 100
|
||||
? 'Establishing Neural Link...'
|
||||
: 'Link Established'}
|
||||
</div>
|
||||
|
||||
{progress === 0 && (
|
||||
<motion.div
|
||||
className="flex items-center justify-center gap-2 text-xs tracking-widest text-slate-400"
|
||||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
>
|
||||
<ArrowRight className="h-3 w-3 text-fuchsia-400" /> INITIATE BOOT
|
||||
SEQUENCE
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{progress > 0 && (
|
||||
<div className="text-3xl font-bold tabular-nums tracking-[0.2em] text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">
|
||||
{progress}%
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{synced && (
|
||||
<motion.div
|
||||
className="pointer-events-none fixed inset-0 z-[110] bg-gradient-to-r from-cyan-400 to-fuchsia-400 mix-blend-screen"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: [0, 1, 0] }}
|
||||
transition={{ duration: 1, ease: 'easeOut' }}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,424 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
|
||||
interface PupilProps {
|
||||
size?: number
|
||||
maxDistance?: number
|
||||
pupilColor?: string
|
||||
forceLookX?: number
|
||||
forceLookY?: number
|
||||
}
|
||||
|
||||
const Pupil = ({
|
||||
size = 12,
|
||||
maxDistance = 5,
|
||||
pupilColor = 'black',
|
||||
forceLookX,
|
||||
forceLookY,
|
||||
}: PupilProps) => {
|
||||
const [mouseX, setMouseX] = useState(0)
|
||||
const [mouseY, setMouseY] = useState(0)
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const h = (e: MouseEvent) => {
|
||||
setMouseX(e.clientX)
|
||||
setMouseY(e.clientY)
|
||||
}
|
||||
window.addEventListener('mousemove', h)
|
||||
return () => window.removeEventListener('mousemove', h)
|
||||
}, [])
|
||||
|
||||
const calc = () => {
|
||||
if (!ref.current) return { x: 0, y: 0 }
|
||||
if (forceLookX !== undefined && forceLookY !== undefined)
|
||||
return { x: forceLookX, y: forceLookY }
|
||||
const r = ref.current.getBoundingClientRect()
|
||||
const cx = r.left + r.width / 2
|
||||
const cy = r.top + r.height / 2
|
||||
const dx = mouseX - cx
|
||||
const dy = mouseY - cy
|
||||
const dist = Math.min(Math.sqrt(dx * dx + dy * dy), maxDistance)
|
||||
const a = Math.atan2(dy, dx)
|
||||
return { x: Math.cos(a) * dist, y: Math.sin(a) * dist }
|
||||
}
|
||||
const p = calc()
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="rounded-full"
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
backgroundColor: pupilColor,
|
||||
transform: `translate(${p.x}px, ${p.y}px)`,
|
||||
transition: 'transform 0.1s ease-out',
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
interface EyeBallProps {
|
||||
size?: number
|
||||
pupilSize?: number
|
||||
maxDistance?: number
|
||||
eyeColor?: string
|
||||
pupilColor?: string
|
||||
isBlinking?: boolean
|
||||
forceLookX?: number
|
||||
forceLookY?: number
|
||||
}
|
||||
|
||||
const EyeBall = ({
|
||||
size = 48,
|
||||
pupilSize = 16,
|
||||
maxDistance = 10,
|
||||
eyeColor = 'white',
|
||||
pupilColor = 'black',
|
||||
isBlinking = false,
|
||||
forceLookX,
|
||||
forceLookY,
|
||||
}: EyeBallProps) => {
|
||||
const [mouseX, setMouseX] = useState(0)
|
||||
const [mouseY, setMouseY] = useState(0)
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const h = (e: MouseEvent) => {
|
||||
setMouseX(e.clientX)
|
||||
setMouseY(e.clientY)
|
||||
}
|
||||
window.addEventListener('mousemove', h)
|
||||
return () => window.removeEventListener('mousemove', h)
|
||||
}, [])
|
||||
|
||||
const calc = () => {
|
||||
if (!ref.current) return { x: 0, y: 0 }
|
||||
if (forceLookX !== undefined && forceLookY !== undefined)
|
||||
return { x: forceLookX, y: forceLookY }
|
||||
const r = ref.current.getBoundingClientRect()
|
||||
const cx = r.left + r.width / 2
|
||||
const cy = r.top + r.height / 2
|
||||
const dx = mouseX - cx
|
||||
const dy = mouseY - cy
|
||||
const dist = Math.min(Math.sqrt(dx * dx + dy * dy), maxDistance)
|
||||
const a = Math.atan2(dy, dx)
|
||||
return { x: Math.cos(a) * dist, y: Math.sin(a) * dist }
|
||||
}
|
||||
const p = calc()
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="flex items-center justify-center rounded-full transition-all duration-150"
|
||||
style={{
|
||||
width: size,
|
||||
height: isBlinking ? 2 : size,
|
||||
backgroundColor: eyeColor,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{!isBlinking && (
|
||||
<div
|
||||
className="rounded-full"
|
||||
style={{
|
||||
width: pupilSize,
|
||||
height: pupilSize,
|
||||
backgroundColor: pupilColor,
|
||||
transform: `translate(${p.x}px, ${p.y}px)`,
|
||||
transition: 'transform 0.1s ease-out',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface Props {
|
||||
isTyping?: boolean
|
||||
showPassword?: boolean
|
||||
passwordLength?: number
|
||||
}
|
||||
|
||||
export default function LoginCharacters({
|
||||
isTyping = false,
|
||||
showPassword = false,
|
||||
passwordLength = 0,
|
||||
}: Props) {
|
||||
const [mouseX, setMouseX] = useState(0)
|
||||
const [mouseY, setMouseY] = useState(0)
|
||||
const [isPrimaryBlink, setIsPrimaryBlink] = useState(false)
|
||||
const [isDarkBlink, setIsDarkBlink] = useState(false)
|
||||
const [isLooking, setIsLooking] = useState(false)
|
||||
const [isPrimaryPeek, setIsPrimaryPeek] = useState(false)
|
||||
const primaryRef = useRef<HTMLDivElement>(null)
|
||||
const darkRef = useRef<HTMLDivElement>(null)
|
||||
const yellowRef = useRef<HTMLDivElement>(null)
|
||||
const orangeRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const h = (e: MouseEvent) => {
|
||||
setMouseX(e.clientX)
|
||||
setMouseY(e.clientY)
|
||||
}
|
||||
window.addEventListener('mousemove', h)
|
||||
return () => window.removeEventListener('mousemove', h)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const schedule = (): ReturnType<typeof setTimeout> =>
|
||||
setTimeout(
|
||||
() => {
|
||||
setIsPrimaryBlink(true)
|
||||
setTimeout(() => {
|
||||
setIsPrimaryBlink(false)
|
||||
schedule()
|
||||
}, 150)
|
||||
},
|
||||
Math.random() * 4000 + 3000,
|
||||
)
|
||||
const t = schedule()
|
||||
return () => clearTimeout(t)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const schedule = (): ReturnType<typeof setTimeout> =>
|
||||
setTimeout(
|
||||
() => {
|
||||
setIsDarkBlink(true)
|
||||
setTimeout(() => {
|
||||
setIsDarkBlink(false)
|
||||
schedule()
|
||||
}, 150)
|
||||
},
|
||||
Math.random() * 4000 + 3000,
|
||||
)
|
||||
const t = schedule()
|
||||
return () => clearTimeout(t)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (isTyping) {
|
||||
setIsLooking(true)
|
||||
const t = setTimeout(() => setIsLooking(false), 800)
|
||||
return () => clearTimeout(t)
|
||||
} else setIsLooking(false)
|
||||
}, [isTyping])
|
||||
|
||||
useEffect(() => {
|
||||
if (passwordLength > 0 && showPassword) {
|
||||
const t = setTimeout(
|
||||
() => {
|
||||
setIsPrimaryPeek(true)
|
||||
setTimeout(() => setIsPrimaryPeek(false), 800)
|
||||
},
|
||||
Math.random() * 3000 + 2000,
|
||||
)
|
||||
return () => clearTimeout(t)
|
||||
} else setIsPrimaryPeek(false)
|
||||
}, [passwordLength, showPassword, isPrimaryPeek])
|
||||
|
||||
const calcPos = (ref: React.RefObject<HTMLDivElement | null>) => {
|
||||
if (!ref.current) return { faceX: 0, faceY: 0, bodySkew: 0 }
|
||||
const r = ref.current.getBoundingClientRect()
|
||||
const cx = r.left + r.width / 2
|
||||
const cy = r.top + r.height / 3
|
||||
const dx = mouseX - cx
|
||||
const dy = mouseY - cy
|
||||
return {
|
||||
faceX: Math.max(-15, Math.min(15, dx / 20)),
|
||||
faceY: Math.max(-10, Math.min(10, dy / 30)),
|
||||
bodySkew: Math.max(-6, Math.min(6, -dx / 120)),
|
||||
}
|
||||
}
|
||||
|
||||
const pp = calcPos(primaryRef)
|
||||
const bp = calcPos(darkRef)
|
||||
const yp = calcPos(yellowRef)
|
||||
const op = calcPos(orangeRef)
|
||||
const hiding = passwordLength > 0 && !showPassword
|
||||
const showing = passwordLength > 0 && showPassword
|
||||
|
||||
return (
|
||||
<div className="relative w-full" style={{ height: 300 }}>
|
||||
<div
|
||||
ref={primaryRef}
|
||||
className="absolute bottom-0 transition-all duration-700 ease-in-out"
|
||||
style={{
|
||||
left: '12%',
|
||||
width: '33%',
|
||||
height: isTyping || hiding ? '110%' : '100%',
|
||||
backgroundColor: '#10b981',
|
||||
borderRadius: '10px 10px 0 0',
|
||||
zIndex: 1,
|
||||
transform: showing
|
||||
? 'skewX(0deg)'
|
||||
: isTyping || hiding
|
||||
? `skewX(${(pp.bodySkew || 0) - 12}deg) translateX(40px)`
|
||||
: `skewX(${pp.bodySkew || 0}deg)`,
|
||||
transformOrigin: 'bottom center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute flex gap-8 transition-all duration-700 ease-in-out"
|
||||
style={{
|
||||
left: showing ? 20 : isLooking ? 55 : 45 + pp.faceX,
|
||||
top: showing ? 35 : isLooking ? 65 : 40 + pp.faceY,
|
||||
}}
|
||||
>
|
||||
<EyeBall
|
||||
size={18}
|
||||
pupilSize={7}
|
||||
maxDistance={5}
|
||||
eyeColor="white"
|
||||
pupilColor="#064e3b"
|
||||
isBlinking={isPrimaryBlink}
|
||||
forceLookX={showing ? (isPrimaryPeek ? 4 : -4) : isLooking ? 3 : undefined}
|
||||
forceLookY={showing ? (isPrimaryPeek ? 5 : -4) : isLooking ? 4 : undefined}
|
||||
/>
|
||||
<EyeBall
|
||||
size={18}
|
||||
pupilSize={7}
|
||||
maxDistance={5}
|
||||
eyeColor="white"
|
||||
pupilColor="#064e3b"
|
||||
isBlinking={isPrimaryBlink}
|
||||
forceLookX={showing ? (isPrimaryPeek ? 4 : -4) : isLooking ? 3 : undefined}
|
||||
forceLookY={showing ? (isPrimaryPeek ? 5 : -4) : isLooking ? 4 : undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={darkRef}
|
||||
className="absolute bottom-0 transition-all duration-700 ease-in-out"
|
||||
style={{
|
||||
left: '44%',
|
||||
width: '22%',
|
||||
height: '77%',
|
||||
backgroundColor: '#0f766e',
|
||||
borderRadius: '8px 8px 0 0',
|
||||
zIndex: 2,
|
||||
transform: showing
|
||||
? 'skewX(0deg)'
|
||||
: isLooking
|
||||
? `skewX(${(bp.bodySkew || 0) * 1.5 + 10}deg) translateX(20px)`
|
||||
: isTyping || hiding
|
||||
? `skewX(${(bp.bodySkew || 0) * 1.5}deg)`
|
||||
: `skewX(${bp.bodySkew || 0}deg)`,
|
||||
transformOrigin: 'bottom center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute flex gap-6 transition-all duration-700 ease-in-out"
|
||||
style={{
|
||||
left: showing ? 10 : isLooking ? 32 : 26 + bp.faceX,
|
||||
top: showing ? 28 : isLooking ? 12 : 32 + bp.faceY,
|
||||
}}
|
||||
>
|
||||
<EyeBall
|
||||
size={16}
|
||||
pupilSize={6}
|
||||
maxDistance={4}
|
||||
eyeColor="white"
|
||||
pupilColor="#042f2e"
|
||||
isBlinking={isDarkBlink}
|
||||
forceLookX={showing ? -4 : isLooking ? 0 : undefined}
|
||||
forceLookY={showing ? -4 : isLooking ? -4 : undefined}
|
||||
/>
|
||||
<EyeBall
|
||||
size={16}
|
||||
pupilSize={6}
|
||||
maxDistance={4}
|
||||
eyeColor="white"
|
||||
pupilColor="#042f2e"
|
||||
isBlinking={isDarkBlink}
|
||||
forceLookX={showing ? -4 : isLooking ? 0 : undefined}
|
||||
forceLookY={showing ? -4 : isLooking ? -4 : undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={orangeRef}
|
||||
className="absolute bottom-0 transition-all duration-700 ease-in-out"
|
||||
style={{
|
||||
left: '0%',
|
||||
width: '44%',
|
||||
height: '50%',
|
||||
backgroundColor: '#f59e0b',
|
||||
borderRadius: '120px 120px 0 0',
|
||||
zIndex: 3,
|
||||
transform: showing ? 'skewX(0deg)' : `skewX(${op.bodySkew || 0}deg)`,
|
||||
transformOrigin: 'bottom center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute flex gap-8 transition-all duration-200 ease-out"
|
||||
style={{
|
||||
left: showing ? '20%' : `calc(34% + ${op.faceX || 0}px)`,
|
||||
top: showing ? '42%' : `calc(45% + ${op.faceY || 0}px)`,
|
||||
}}
|
||||
>
|
||||
<Pupil
|
||||
size={12}
|
||||
maxDistance={5}
|
||||
pupilColor="#78350f"
|
||||
forceLookX={showing ? -5 : undefined}
|
||||
forceLookY={showing ? -4 : undefined}
|
||||
/>
|
||||
<Pupil
|
||||
size={12}
|
||||
maxDistance={5}
|
||||
pupilColor="#78350f"
|
||||
forceLookX={showing ? -5 : undefined}
|
||||
forceLookY={showing ? -4 : undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={yellowRef}
|
||||
className="absolute bottom-0 transition-all duration-700 ease-in-out"
|
||||
style={{
|
||||
left: '56%',
|
||||
width: '26%',
|
||||
height: '58%',
|
||||
backgroundColor: '#84cc16',
|
||||
borderRadius: '70px 70px 0 0',
|
||||
zIndex: 4,
|
||||
transform: showing ? 'skewX(0deg)' : `skewX(${yp.bodySkew || 0}deg)`,
|
||||
transformOrigin: 'bottom center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute flex gap-6 transition-all duration-200 ease-out"
|
||||
style={{
|
||||
left: showing ? '14%' : `calc(37% + ${yp.faceX || 0}px)`,
|
||||
top: showing ? '15%' : `calc(17% + ${yp.faceY || 0}px)`,
|
||||
}}
|
||||
>
|
||||
<Pupil
|
||||
size={12}
|
||||
maxDistance={5}
|
||||
pupilColor="#3f6212"
|
||||
forceLookX={showing ? -5 : undefined}
|
||||
forceLookY={showing ? -4 : undefined}
|
||||
/>
|
||||
<Pupil
|
||||
size={12}
|
||||
maxDistance={5}
|
||||
pupilColor="#3f6212"
|
||||
forceLookX={showing ? -5 : undefined}
|
||||
forceLookY={showing ? -4 : undefined}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="absolute h-[4px] w-16 rounded-full bg-[#3f6212] transition-all duration-200 ease-out"
|
||||
style={{
|
||||
left: showing ? '7%' : `calc(28% + ${yp.faceX || 0}px)`,
|
||||
top: showing ? '38%' : `calc(38% + ${yp.faceY || 0}px)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from 'react'
|
||||
import { CheckCircle2, XCircle } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
type ToastType = 'success' | 'error'
|
||||
interface ToastItem {
|
||||
id: number
|
||||
message: string
|
||||
type: ToastType
|
||||
}
|
||||
|
||||
const ToastCtx = createContext<(message: string, type?: ToastType) => void>(
|
||||
() => {},
|
||||
)
|
||||
|
||||
let seq = 0
|
||||
|
||||
export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
const [items, setItems] = useState<ToastItem[]>([])
|
||||
|
||||
const toast = useCallback((message: string, type: ToastType = 'success') => {
|
||||
const id = ++seq
|
||||
setItems((l) => [...l, { id, message, type }])
|
||||
setTimeout(() => setItems((l) => l.filter((t) => t.id !== id)), 3000)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ToastCtx.Provider value={toast}>
|
||||
{children}
|
||||
<div className="fixed right-4 top-4 z-[100] flex flex-col gap-2">
|
||||
{items.map((t) => (
|
||||
<div
|
||||
key={t.id}
|
||||
role="status"
|
||||
className={cn(
|
||||
'flex items-center gap-2.5 rounded-lg border bg-surface px-4 py-2.5 text-[13.5px] shadow-md',
|
||||
t.type === 'success' ? 'border-hairline' : 'border-red-500/40',
|
||||
)}
|
||||
>
|
||||
{t.type === 'success' ? (
|
||||
<CheckCircle2 className="size-[17px] text-accent" />
|
||||
) : (
|
||||
<XCircle className="size-[17px] text-red-500" />
|
||||
)}
|
||||
<span className="text-ink">{t.message}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ToastCtx.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
return useContext(ToastCtx)
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@@ -71,3 +72,43 @@ body {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-ink);
|
||||
}
|
||||
|
||||
/* 全局隐藏滚动条（保留滚动功能） */
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Markdown 预览排版 — 对齐设计 token */
|
||||
.prose-site {
|
||||
--tw-prose-body: var(--ink-2);
|
||||
--tw-prose-headings: var(--ink);
|
||||
--tw-prose-links: var(--accent-ink);
|
||||
--tw-prose-bold: var(--ink);
|
||||
--tw-prose-counters: var(--ink-3);
|
||||
--tw-prose-bullets: var(--hairline-strong);
|
||||
--tw-prose-hr: var(--hairline);
|
||||
--tw-prose-quotes: var(--ink-2);
|
||||
--tw-prose-quote-borders: var(--accent);
|
||||
--tw-prose-code: var(--accent-ink);
|
||||
--tw-prose-pre-bg: var(--term-bg);
|
||||
--tw-prose-pre-code: var(--term-ink);
|
||||
--tw-prose-th-borders: var(--hairline-strong);
|
||||
--tw-prose-td-borders: var(--hairline);
|
||||
--tw-prose-captions: var(--ink-3);
|
||||
}
|
||||
.prose-site :where(code):not(:where(pre code))::before,
|
||||
.prose-site :where(code):not(:where(pre code))::after {
|
||||
content: none;
|
||||
}
|
||||
.prose-site :where(code):not(:where(pre code)) {
|
||||
background: var(--code-bg);
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
+6
-3
@@ -2,15 +2,18 @@ import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import { ThemeProvider } from '@/components/theme-provider'
|
||||
import { ToastProvider } from '@/components/toast'
|
||||
import App from '@/App'
|
||||
import '@/index.css'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<ThemeProvider>
|
||||
<BrowserRouter basename="/admin">
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
<ToastProvider>
|
||||
<BrowserRouter basename="/admin">
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</ToastProvider>
|
||||
</ThemeProvider>
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { CheckCircle2, FileEdit, FileText, Plus } from 'lucide-react'
|
||||
import { fetchStats, type Stats } from '@/api/posts'
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [stats, setStats] = useState<Stats | null>(null)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
fetchStats()
|
||||
.then((s) => {
|
||||
if (!cancelled) setStats(s)
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
if (!cancelled) setError(e.message)
|
||||
})
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [])
|
||||
|
||||
const cards = [
|
||||
{ label: '文章总数', value: stats?.total, icon: FileText },
|
||||
{ label: '已发布', value: stats?.published, icon: CheckCircle2 },
|
||||
{ label: '草稿', value: stats?.draft, icon: FileEdit },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-[22px] font-[650] tracking-[-0.01em]">仪表盘</h1>
|
||||
<p className="mt-1 text-[13.5px] text-ink-2">内容概览</p>
|
||||
</div>
|
||||
<Link
|
||||
to="/posts/new"
|
||||
className="flex shrink-0 items-center gap-1.5 rounded-lg bg-accent px-4 py-2 text-[13.5px] font-medium text-ground transition-opacity hover:opacity-90"
|
||||
>
|
||||
<Plus className="size-4" /> 新建文章
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="mb-4 rounded-lg border border-hairline bg-surface px-4 py-3 text-[13.5px] text-ink-2">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{cards.map((c) => (
|
||||
<div
|
||||
key={c.label}
|
||||
className="rounded-xl border border-hairline bg-surface p-5"
|
||||
>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="text-[13px] text-ink-2">{c.label}</span>
|
||||
<c.icon className="size-[18px] text-ink-3" />
|
||||
</div>
|
||||
<div className="text-[28px] font-[650] tabular-nums">
|
||||
{c.value ?? '—'}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h2 className="text-[15px] font-semibold">最近更新</h2>
|
||||
<Link
|
||||
to="/posts"
|
||||
className="font-mono text-[12.5px] text-accent-ink hover:underline"
|
||||
>
|
||||
全部文章 →
|
||||
</Link>
|
||||
</div>
|
||||
<div className="overflow-hidden rounded-xl border border-hairline bg-surface">
|
||||
{stats && stats.recent.length > 0 ? (
|
||||
stats.recent.map((post) => (
|
||||
<Link
|
||||
key={post.id}
|
||||
to={`/posts/${post.id}`}
|
||||
className="flex items-center justify-between gap-4 border-b border-hairline px-5 py-3.5 transition-colors last:border-b-0 hover:bg-ground"
|
||||
>
|
||||
<span className="truncate text-[14px] font-medium">
|
||||
{post.title}
|
||||
</span>
|
||||
<span className="flex shrink-0 items-center gap-3">
|
||||
{post.published_at ? (
|
||||
<span className="rounded-full bg-accent-soft px-2.5 py-0.5 text-[12px] text-accent-ink">
|
||||
已发布
|
||||
</span>
|
||||
) : (
|
||||
<span className="rounded-full bg-code px-2.5 py-0.5 text-[12px] text-ink-3">
|
||||
草稿
|
||||
</span>
|
||||
)}
|
||||
<span className="font-mono text-[12px] tabular-nums text-ink-3">
|
||||
{post.updated_at.slice(0, 10)}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
))
|
||||
) : (
|
||||
<p className="px-5 py-10 text-center text-[13.5px] text-ink-3">
|
||||
{stats ? '还没有文章，点右上角新建' : '加载中…'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+150
-48
@@ -1,13 +1,19 @@
|
||||
import { useState, type FormEvent } from 'react'
|
||||
import { Navigate, useNavigate } from 'react-router-dom'
|
||||
import { Eye, EyeOff, Loader2 } from 'lucide-react'
|
||||
import { getToken } from '@/api/client'
|
||||
import { login } from '@/api/auth'
|
||||
import { LogoMark } from '@/components/logo'
|
||||
import AIBanner from '@/components/login/ai-banner'
|
||||
import AICoreEffect from '@/components/login/ai-core-effect'
|
||||
import LoginCharacters from '@/components/login/login-characters'
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate()
|
||||
const [booted, setBooted] = useState(false)
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [showPwd, setShowPwd] = useState(false)
|
||||
const [pwdFocused, setPwdFocused] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
@@ -15,6 +21,10 @@ export default function LoginPage() {
|
||||
|
||||
const onSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!username || !password) {
|
||||
setError('请输入账号和密码')
|
||||
return
|
||||
}
|
||||
setError('')
|
||||
setLoading(true)
|
||||
try {
|
||||
@@ -27,58 +37,150 @@ export default function LoginPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const fieldCls =
|
||||
'h-12 w-full rounded-xl border border-slate-200 bg-slate-50/50 px-3.5 text-[14px] text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-[#22d3ee] focus:bg-white focus:ring-2 focus:ring-cyan-500/20'
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center px-6">
|
||||
<form
|
||||
onSubmit={onSubmit}
|
||||
className="w-full max-w-[360px] rounded-xl border border-hairline bg-surface p-8"
|
||||
>
|
||||
<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]">
|
||||
登录内容管理
|
||||
</h1>
|
||||
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#080d17] p-6">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<AIBanner />
|
||||
</div>
|
||||
|
||||
<label className="mb-4 block">
|
||||
<span className="mb-1.5 block text-[13px] text-ink-2">用户名</span>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
autoComplete="username"
|
||||
required
|
||||
className="w-full rounded-lg border border-hairline-strong bg-ground px-3.5 py-2 text-[14.5px] outline-none transition-colors focus:border-accent"
|
||||
/>
|
||||
</label>
|
||||
{/* boot 过渡动画，完成后解锁进入登录表单 */}
|
||||
{!booted && <AICoreEffect onUnlock={() => setBooted(true)} />}
|
||||
|
||||
<label className="mb-5 block">
|
||||
<span className="mb-1.5 block text-[13px] text-ink-2">密码</span>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
required
|
||||
className="w-full rounded-lg border border-hairline-strong bg-ground px-3.5 py-2 text-[14.5px] outline-none transition-colors focus:border-accent"
|
||||
/>
|
||||
</label>
|
||||
<div className="relative z-10 grid w-full max-w-[900px] overflow-hidden rounded-[2rem] shadow-[0_0_50px_rgba(0,0,0,0.5)] ring-1 ring-white/10 lg:grid-cols-2">
|
||||
{/* 左：品牌 + 角色 */}
|
||||
<div className="relative hidden flex-col justify-between overflow-hidden bg-slate-900/40 p-10 text-white backdrop-blur-md lg:flex">
|
||||
<div className="relative z-20 flex items-center gap-2.5">
|
||||
<img
|
||||
src={`${import.meta.env.BASE_URL}logo-mark.webp`}
|
||||
alt=""
|
||||
width={28}
|
||||
height={28}
|
||||
style={{ borderRadius: '22%' }}
|
||||
/>
|
||||
<span className="font-mono text-[15px] font-semibold tracking-tight">
|
||||
sundynix <em className="not-italic text-[#38bdf8]">admin</em>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="mb-4 text-[13px] text-red-600 dark:text-red-400">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<div
|
||||
className="relative z-20 mt-auto flex items-end justify-center"
|
||||
style={{ height: 300 }}
|
||||
>
|
||||
<LoginCharacters
|
||||
isTyping={pwdFocused}
|
||||
showPassword={showPwd}
|
||||
passwordLength={password.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full rounded-lg bg-accent py-2.5 text-[14.5px] font-medium text-ground transition-opacity hover:opacity-90 disabled:opacity-60"
|
||||
>
|
||||
{loading ? '登录中…' : '登录'}
|
||||
</button>
|
||||
</form>
|
||||
<div className="relative z-20 mt-10 font-mono text-[11px] tracking-wide text-white/35">
|
||||
© 2026 SUNDYNIX AGENTIX
|
||||
</div>
|
||||
|
||||
<div className="pointer-events-none absolute right-0 top-0 h-[400px] w-[400px] -translate-y-1/2 translate-x-1/4 rounded-full bg-cyan-500/10 blur-[80px]" />
|
||||
<div className="pointer-events-none absolute bottom-0 left-0 h-[300px] w-[300px] -translate-x-1/4 translate-y-1/4 rounded-full bg-fuchsia-500/10 blur-[60px]" />
|
||||
</div>
|
||||
|
||||
{/* 右：登录表单 */}
|
||||
<div className="relative flex flex-col items-center justify-center bg-white/95 px-8 py-16 backdrop-blur-2xl sm:px-12">
|
||||
<div className="w-full max-w-[340px]">
|
||||
<div className="mb-8 flex items-center justify-center gap-2.5 lg:hidden">
|
||||
<img
|
||||
src={`${import.meta.env.BASE_URL}logo-mark.webp`}
|
||||
alt=""
|
||||
width={28}
|
||||
height={28}
|
||||
style={{ borderRadius: '22%' }}
|
||||
/>
|
||||
<span className="font-mono text-[15px] font-semibold text-slate-900">
|
||||
sundynix admin
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-9 text-center">
|
||||
<h1 className="mb-2 text-[28px] font-bold tracking-tight text-slate-900">
|
||||
欢迎回来！
|
||||
</h1>
|
||||
<p className="text-[13.5px] text-slate-500">
|
||||
请输入管理员账号与密码
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} className="space-y-5">
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-[13px] text-red-600">
|
||||
<span className="size-1.5 rounded-full bg-red-500" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-[13px] font-semibold text-slate-700">
|
||||
账号
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
autoComplete="username"
|
||||
disabled={loading}
|
||||
placeholder="请输入管理员账号"
|
||||
className={fieldCls}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-[13px] font-semibold text-slate-700">
|
||||
密码
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPwd ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
onFocus={() => setPwdFocused(true)}
|
||||
onBlur={() => setPwdFocused(false)}
|
||||
autoComplete="current-password"
|
||||
disabled={loading}
|
||||
placeholder="••••••••"
|
||||
className={`${fieldCls} pr-11`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPwd((v) => !v)}
|
||||
tabIndex={-1}
|
||||
aria-label={showPwd ? '隐藏密码' : '显示密码'}
|
||||
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 transition-colors hover:text-slate-600"
|
||||
>
|
||||
{showPwd ? (
|
||||
<Eye className="h-5 w-5" />
|
||||
) : (
|
||||
<EyeOff className="h-5 w-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="mt-2 flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#22d3ee] to-[#3b82f6] text-[15px] font-bold text-white shadow-lg shadow-cyan-600/20 transition-all hover:opacity-90 disabled:opacity-60"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="h-5 w-5 animate-spin" /> 登录中…
|
||||
</>
|
||||
) : (
|
||||
'登 录'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
import { useEffect, useState, type FormEvent } from 'react'
|
||||
import { useEffect, useRef, useState, type FormEvent } from 'react'
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import { ArrowLeft } from 'lucide-react'
|
||||
import Markdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import {
|
||||
createPost,
|
||||
fetchPost,
|
||||
updatePost,
|
||||
type PostForm,
|
||||
} from '@/api/posts'
|
||||
ArrowLeft,
|
||||
Bold,
|
||||
Code,
|
||||
Heading2,
|
||||
Italic,
|
||||
Link2,
|
||||
List,
|
||||
Quote,
|
||||
} from 'lucide-react'
|
||||
import { createPost, fetchPost, updatePost, type PostForm } from '@/api/posts'
|
||||
import { useToast } from '@/components/toast'
|
||||
|
||||
const EMPTY: PostForm = {
|
||||
slug: '',
|
||||
@@ -20,12 +27,14 @@ const EMPTY: PostForm = {
|
||||
export default function PostEditPage() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const toast = useToast()
|
||||
const isEdit = Boolean(id)
|
||||
|
||||
const [form, setForm] = useState<PostForm>(EMPTY)
|
||||
const [loading, setLoading] = useState(isEdit)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const contentRef = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
@@ -56,19 +65,57 @@ export default function PostEditPage() {
|
||||
const set = <K extends keyof PostForm>(key: K, value: PostForm[K]) =>
|
||||
setForm((f) => ({ ...f, [key]: value }))
|
||||
|
||||
// 在光标选区两侧插入标记（加粗/斜体/代码/链接）
|
||||
const wrap = (before: string, after = before) => {
|
||||
const ta = contentRef.current
|
||||
if (!ta) return
|
||||
const { selectionStart: s, selectionEnd: e, value } = ta
|
||||
const selected = value.slice(s, e)
|
||||
const next = value.slice(0, s) + before + selected + after + value.slice(e)
|
||||
set('content', next)
|
||||
requestAnimationFrame(() => {
|
||||
ta.focus()
|
||||
ta.setSelectionRange(s + before.length, e + before.length)
|
||||
})
|
||||
}
|
||||
|
||||
// 在当前行首插入前缀（标题/列表/引用）
|
||||
const prefix = (pre: string) => {
|
||||
const ta = contentRef.current
|
||||
if (!ta) return
|
||||
const { selectionStart: s, value } = ta
|
||||
const lineStart = value.lastIndexOf('\n', s - 1) + 1
|
||||
const next = value.slice(0, lineStart) + pre + value.slice(lineStart)
|
||||
set('content', next)
|
||||
requestAnimationFrame(() => {
|
||||
ta.focus()
|
||||
ta.setSelectionRange(s + pre.length, s + pre.length)
|
||||
})
|
||||
}
|
||||
|
||||
const tools = [
|
||||
{ icon: Heading2, label: '标题', fn: () => prefix('## ') },
|
||||
{ icon: Bold, label: '加粗', fn: () => wrap('**') },
|
||||
{ icon: Italic, label: '斜体', fn: () => wrap('*') },
|
||||
{ icon: Code, label: '行内代码', fn: () => wrap('`') },
|
||||
{ icon: Link2, label: '链接', fn: () => wrap('[', '](https://)') },
|
||||
{ icon: List, label: '列表', fn: () => prefix('- ') },
|
||||
{ icon: Quote, label: '引用', fn: () => prefix('> ') },
|
||||
]
|
||||
|
||||
const onSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSaving(true)
|
||||
setError('')
|
||||
try {
|
||||
if (isEdit && id) {
|
||||
await updatePost(id, form)
|
||||
} else {
|
||||
await createPost(form)
|
||||
}
|
||||
navigate('/')
|
||||
toast('已保存')
|
||||
navigate('/posts')
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '保存失败')
|
||||
toast(err instanceof Error ? err.message : '保存失败', 'error')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
@@ -80,7 +127,7 @@ export default function PostEditPage() {
|
||||
return (
|
||||
<div>
|
||||
<Link
|
||||
to="/"
|
||||
to="/posts"
|
||||
className="mb-6 inline-flex items-center gap-1.5 font-mono text-[12.5px] tracking-[0.08em] text-ink-3 transition-colors hover:text-accent-ink"
|
||||
>
|
||||
<ArrowLeft className="size-3.5" /> 文章列表
|
||||
@@ -93,7 +140,7 @@ export default function PostEditPage() {
|
||||
{loading ? (
|
||||
<div className="space-y-4">
|
||||
<div className="h-10 animate-pulse rounded-lg bg-code" />
|
||||
<div className="h-64 animate-pulse rounded-lg bg-code" />
|
||||
<div className="h-96 animate-pulse rounded-lg bg-code" />
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={onSubmit} className="space-y-5">
|
||||
@@ -144,18 +191,48 @@ export default function PostEditPage() {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="block">
|
||||
<div>
|
||||
<span className="mb-1.5 block text-[13px] text-ink-2">
|
||||
正文（Markdown）
|
||||
正文（Markdown，左侧编辑 · 右侧实时预览）
|
||||
</span>
|
||||
<textarea
|
||||
value={form.content}
|
||||
onChange={(e) => set('content', e.target.value)}
|
||||
rows={18}
|
||||
spellCheck={false}
|
||||
className={`${inputCls} resize-y font-mono text-[13.5px] leading-relaxed`}
|
||||
/>
|
||||
</label>
|
||||
<div className="overflow-hidden rounded-lg border border-hairline-strong">
|
||||
{/* 工具栏 */}
|
||||
<div className="flex items-center gap-0.5 border-b border-hairline bg-ground px-2 py-1.5">
|
||||
{tools.map((t) => (
|
||||
<button
|
||||
key={t.label}
|
||||
type="button"
|
||||
title={t.label}
|
||||
aria-label={t.label}
|
||||
onClick={t.fn}
|
||||
className="flex size-8 items-center justify-center rounded-md text-ink-2 transition-colors hover:bg-surface hover:text-accent-ink"
|
||||
>
|
||||
<t.icon className="size-[17px]" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{/* 分栏：左写右预览 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2">
|
||||
<textarea
|
||||
ref={contentRef}
|
||||
value={form.content}
|
||||
onChange={(e) => set('content', e.target.value)}
|
||||
spellCheck={false}
|
||||
placeholder="# 从这里开始写…"
|
||||
className="min-h-[440px] resize-y bg-surface p-4 font-mono text-[13.5px] leading-relaxed outline-none placeholder:text-ink-3 md:border-r md:border-hairline"
|
||||
/>
|
||||
<div className="prose prose-site min-h-[440px] max-w-none overflow-auto bg-ground p-4 text-[14px]">
|
||||
{form.content.trim() ? (
|
||||
<Markdown remarkPlugins={[remarkGfm]}>
|
||||
{form.content}
|
||||
</Markdown>
|
||||
) : (
|
||||
<p className="text-ink-3">预览区</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border-t border-hairline pt-5">
|
||||
<label className="flex cursor-pointer items-center gap-2.5 text-[14px]">
|
||||
|
||||
@@ -7,15 +7,20 @@ import {
|
||||
type PageResult,
|
||||
type PostListItem,
|
||||
} from '@/api/posts'
|
||||
import { useToast } from '@/components/toast'
|
||||
import { ConfirmDialog } from '@/components/confirm-dialog'
|
||||
|
||||
const PAGE_SIZE = 10
|
||||
|
||||
export default function PostsListPage() {
|
||||
const toast = useToast()
|
||||
const [page, setPage] = useState(1)
|
||||
const [keyword, setKeyword] = useState('')
|
||||
const [input, setInput] = useState('')
|
||||
const [result, setResult] = useState<PageResult<PostListItem> | null>(null)
|
||||
const [error, setError] = useState('')
|
||||
const [target, setTarget] = useState<PostListItem | null>(null)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
|
||||
const load = useCallback(() => {
|
||||
fetchPosts(page, PAGE_SIZE, keyword)
|
||||
@@ -30,13 +35,18 @@ export default function PostsListPage() {
|
||||
load()
|
||||
}, [load])
|
||||
|
||||
const onDelete = async (post: PostListItem) => {
|
||||
if (!window.confirm(`确认删除「${post.title}」？此操作不可恢复。`)) return
|
||||
const confirmDelete = async () => {
|
||||
if (!target) return
|
||||
setDeleting(true)
|
||||
try {
|
||||
await deletePost(post.id)
|
||||
await deletePost(target.id)
|
||||
toast('已删除')
|
||||
setTarget(null)
|
||||
load()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '删除失败')
|
||||
toast(err instanceof Error ? err.message : '删除失败', 'error')
|
||||
} finally {
|
||||
setDeleting(false)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -130,7 +140,7 @@ export default function PostsListPage() {
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`删除 ${post.title}`}
|
||||
onClick={() => onDelete(post)}
|
||||
onClick={() => setTarget(post)}
|
||||
className="rounded p-1.5 text-ink-3 transition-colors hover:text-red-600 dark:hover:text-red-400"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
@@ -174,6 +184,19 @@ export default function PostsListPage() {
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ConfirmDialog
|
||||
open={!!target}
|
||||
title="删除文章"
|
||||
description={
|
||||
target ? `确认删除「${target.title}」？此操作不可恢复。` : ''
|
||||
}
|
||||
confirmText="删除"
|
||||
danger
|
||||
loading={deleting}
|
||||
onConfirm={confirmDelete}
|
||||
onCancel={() => setTarget(null)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Eye, Users } from 'lucide-react'
|
||||
import { fetchVisits, type VisitStats } from '@/api/visits'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const RANGES = [7, 30, 90]
|
||||
|
||||
export default function VisitsPage() {
|
||||
const [days, setDays] = useState(30)
|
||||
const [data, setData] = useState<VisitStats | null>(null)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
fetchVisits(days)
|
||||
.then((d) => {
|
||||
if (!cancelled) setData(d)
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
if (!cancelled) setError(e.message)
|
||||
})
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [days])
|
||||
|
||||
// 补全连续日期，缺失天补 0，趋势图才连贯
|
||||
const map = new Map((data?.daily ?? []).map((r) => [r.date, r]))
|
||||
const series = Array.from({ length: days }, (_, i) => {
|
||||
const d = new Date()
|
||||
d.setDate(d.getDate() - (days - 1 - i))
|
||||
const date = d.toISOString().slice(0, 10)
|
||||
return map.get(date) ?? { date, uv: 0, pv: 0 }
|
||||
})
|
||||
const maxUv = Math.max(1, ...series.map((s) => s.uv))
|
||||
|
||||
const cards = [
|
||||
{ label: '今日访客 UV', value: data?.today_uv, icon: Users },
|
||||
{ label: '今日访问 PV', value: data?.today_pv, icon: Eye },
|
||||
{ label: `近 ${days} 天访客`, value: data?.total_uv, icon: Users },
|
||||
{ label: `近 ${days} 天访问`, value: data?.total_pv, icon: Eye },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-[22px] font-[650] tracking-[-0.01em]">访问统计</h1>
|
||||
<p className="mt-1 text-[13.5px] text-ink-2">
|
||||
用户端访问足迹，按 IP 去重
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-0.5 rounded-lg border border-hairline-strong p-0.5">
|
||||
{RANGES.map((r) => (
|
||||
<button
|
||||
key={r}
|
||||
type="button"
|
||||
onClick={() => setDays(r)}
|
||||
className={cn(
|
||||
'rounded-md px-3 py-1.5 text-[13px] transition-colors',
|
||||
days === r
|
||||
? 'bg-accent text-ground'
|
||||
: 'text-ink-2 hover:text-ink',
|
||||
)}
|
||||
>
|
||||
{r} 天
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="mb-4 rounded-lg border border-hairline bg-surface px-4 py-3 text-[13.5px] text-ink-2">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
{cards.map((c) => (
|
||||
<div
|
||||
key={c.label}
|
||||
className="rounded-xl border border-hairline bg-surface p-5"
|
||||
>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="text-[12.5px] text-ink-2">{c.label}</span>
|
||||
<c.icon className="size-[16px] text-ink-3" />
|
||||
</div>
|
||||
<div className="text-[26px] font-[650] tabular-nums">
|
||||
{c.value ?? '—'}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-hairline bg-surface p-5">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-[14px] font-semibold">每日访客趋势</h2>
|
||||
<span className="font-mono text-[11.5px] text-ink-3">UV</span>
|
||||
</div>
|
||||
<div className="flex h-[180px] items-end gap-[3px]">
|
||||
{series.map((s) => (
|
||||
<div
|
||||
key={s.date}
|
||||
title={`${s.date} · UV ${s.uv} · PV ${s.pv}`}
|
||||
className="flex-1 rounded-t bg-accent-soft transition-colors hover:bg-accent"
|
||||
style={{ height: `${Math.max(2, (s.uv / maxUv) * 100)}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 flex justify-between font-mono text-[11px] text-ink-3">
|
||||
<span>{series[0]?.date.slice(5)}</span>
|
||||
<span>{series[series.length - 1]?.date.slice(5)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -156,3 +156,23 @@ func (h *AdminPostHandler) Delete(c *gin.Context) {
|
||||
}
|
||||
resp.OK(c, nil)
|
||||
}
|
||||
|
||||
// Stats GET /api/admin/stats — 概览统计（总数 / 已发布 / 草稿 / 最近文章）
|
||||
func (h *AdminPostHandler) Stats(c *gin.Context) {
|
||||
var total, published int64
|
||||
if err := h.db.Model(&model.Post{}).Count(&total).Error; err != nil {
|
||||
resp.ServerError(c, "查询失败")
|
||||
return
|
||||
}
|
||||
h.db.Model(&model.Post{}).Where("published_at IS NOT NULL").Count(&published)
|
||||
|
||||
var recent []model.PostListItem
|
||||
h.db.Model(&model.Post{}).Order("updated_at DESC").Limit(5).Find(&recent)
|
||||
|
||||
resp.OK(c, gin.H{
|
||||
"total": total,
|
||||
"published": published,
|
||||
"draft": total - published,
|
||||
"recent": recent,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
package handler
|
||||
|
||||
import (
|
||||
"strconv"
|
||||
"time"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"gorm.io/gorm"
|
||||
"gorm.io/gorm/clause"
|
||||
|
||||
"git.sundynix.cn/Blizzard/sundynix-site/server/internal/model"
|
||||
"git.sundynix.cn/Blizzard/sundynix-site/server/internal/pkg/resp"
|
||||
)
|
||||
|
||||
// VisitHandler 访问足迹：用户端埋点 + 管理端统计。
|
||||
type VisitHandler struct {
|
||||
db *gorm.DB
|
||||
}
|
||||
|
||||
func NewVisitHandler(db *gorm.DB) *VisitHandler {
|
||||
return &VisitHandler{db: db}
|
||||
}
|
||||
|
||||
// Track POST /api/track — 用户端埋点上报（免登录）。
|
||||
// 按 (今天, ClientIP) upsert：已存在则 pv+1，否则插入 pv=1。
|
||||
func (h *VisitHandler) Track(c *gin.Context) {
|
||||
ip := c.ClientIP()
|
||||
if ip == "" {
|
||||
ip = "unknown"
|
||||
}
|
||||
visit := model.Visit{
|
||||
Date: time.Now().Format("2006-01-02"),
|
||||
IP: ip,
|
||||
PV: 1,
|
||||
}
|
||||
h.db.Clauses(clause.OnConflict{
|
||||
Columns: []clause.Column{{Name: "date"}, {Name: "ip"}},
|
||||
DoUpdates: clause.Assignments(map[string]any{
|
||||
"pv": gorm.Expr("pv + 1"),
|
||||
"updated_at": time.Now(),
|
||||
}),
|
||||
}).Create(&visit)
|
||||
resp.OK(c, nil)
|
||||
}
|
||||
|
||||
type dailyRow struct {
|
||||
Date string `json:"date"`
|
||||
UV int64 `json:"uv"`
|
||||
PV int64 `json:"pv"`
|
||||
}
|
||||
|
||||
// Stats GET /api/admin/visits?days=30 — 近 N 天每日 UV/PV。
|
||||
func (h *VisitHandler) Stats(c *gin.Context) {
|
||||
days := 30
|
||||
if v := c.Query("days"); v != "" {
|
||||
if n, err := strconv.Atoi(v); err == nil && n > 0 && n <= 365 {
|
||||
days = n
|
||||
}
|
||||
}
|
||||
since := time.Now().AddDate(0, 0, -(days - 1)).Format("2006-01-02")
|
||||
today := time.Now().Format("2006-01-02")
|
||||
|
||||
var rows []dailyRow
|
||||
h.db.Model(&model.Visit{}).
|
||||
Select("date, count(*) as uv, coalesce(sum(pv), 0) as pv").
|
||||
Where("date >= ?", since).
|
||||
Group("date").
|
||||
Order("date").
|
||||
Scan(&rows)
|
||||
|
||||
var totalUV, totalPV, todayUV, todayPV int64
|
||||
for _, r := range rows {
|
||||
totalUV += r.UV
|
||||
totalPV += r.PV
|
||||
if r.Date == today {
|
||||
todayUV = r.UV
|
||||
todayPV = r.PV
|
||||
}
|
||||
}
|
||||
|
||||
resp.OK(c, gin.H{
|
||||
"daily": rows,
|
||||
"total_uv": totalUV,
|
||||
"total_pv": totalPV,
|
||||
"today_uv": todayUV,
|
||||
"today_pv": todayPV,
|
||||
"days": days,
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
package model
|
||||
|
||||
// Visit 用户端访问记录，按 (date, ip) 去重：每行代表某 IP 某天来过（UV）；
|
||||
// pv 记该 IP 当天访问次数。表名 sundynix_visit。
|
||||
type Visit struct {
|
||||
BaseModel
|
||||
Date string `gorm:"size:10;uniqueIndex:uk_date_ip" json:"date"`
|
||||
IP string `gorm:"size:64;uniqueIndex:uk_date_ip" json:"ip"`
|
||||
PV int64 `json:"pv"`
|
||||
}
|
||||
@@ -30,6 +30,8 @@ func New(db *gorm.DB) (*gin.Engine, error) {
|
||||
api.GET("/posts/:slug", posts.Get)
|
||||
|
||||
api.GET("/releases/latest", handler.NewReleaseHandler().Latest)
|
||||
|
||||
api.POST("/track", handler.NewVisitHandler(db).Track)
|
||||
}
|
||||
|
||||
// RSS 订阅源（页脚 RSS 链接指向这里）
|
||||
@@ -42,6 +44,8 @@ func New(db *gorm.DB) (*gin.Engine, error) {
|
||||
adminAPI := api.Group("/admin", middleware.Auth())
|
||||
{
|
||||
posts := handler.NewAdminPostHandler(db)
|
||||
adminAPI.GET("/stats", posts.Stats)
|
||||
adminAPI.GET("/visits", handler.NewVisitHandler(db).Stats)
|
||||
adminAPI.GET("/posts", posts.List)
|
||||
adminAPI.POST("/posts", posts.Create)
|
||||
adminAPI.GET("/posts/:id", posts.Get)
|
||||
|
||||
@@ -34,7 +34,7 @@ func Open(dsn string) (*gorm.DB, error) {
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
if err := db.AutoMigrate(&model.Post{}); err != nil {
|
||||
if err := db.AutoMigrate(&model.Post{}, &model.Visit{}); err != nil {
|
||||
return nil, err
|
||||
}
|
||||
if err := seed(db); err != nil {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useEffect } from 'react'
|
||||
import { Route, Routes } from 'react-router-dom'
|
||||
import { SiteLayout } from '@/components/layout/site-layout'
|
||||
import HomePage from '@/pages/home'
|
||||
@@ -7,6 +8,13 @@ import DownloadPage from '@/pages/download'
|
||||
import NotFoundPage from '@/pages/not-found'
|
||||
|
||||
export default function App() {
|
||||
// 访问埋点：每个会话上报一次（按 IP 在后端去重）
|
||||
useEffect(() => {
|
||||
if (sessionStorage.getItem('sundynix-tracked')) return
|
||||
sessionStorage.setItem('sundynix-tracked', '1')
|
||||
fetch('/api/track', { method: 'POST' }).catch(() => {})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Routes>
|
||||
<Route element={<SiteLayout />}>
|
||||
|
||||
@@ -82,6 +82,17 @@ body {
|
||||
color: var(--accent-ink);
|
||||
}
|
||||
|
||||
/* 全局隐藏滚动条（保留滚动功能） */
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 品牌渐变文字（logo 同源：青→蓝→紫），克制使用 */
|
||||
.text-brand-gradient {
|
||||
background: linear-gradient(
|
||||
|
||||
Reference in New Issue
Block a user