.claude/launch.json

@@ -7,6 +7,13 @@
       "runtimeArgs": ["run", "dev"],
       "cwd": "web",
       "port": 5173
+    },
+    {
+      "name": "admin",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "cwd": "admin",
+      "port": 5174
     }
   ]
 }

.env.production.example

@@ -2,8 +2,8 @@
 # 一次性手动放置，CI 不覆盖它（敏感信息不进流水线）
 # compose 的 env_file 读取本文件
 
-# 内网 MySQL（127 那台），库名 sundynix_site
+# 内网 MySQL（127 那台，MySQL root 密码是 root，注意不是机器 SSH 密码），库名 sundynix_site
-SUNDYNIX_DB=root:sundynix@tcp(192.168.100.127:3307)/sundynix_site?charset=utf8mb4&parseTime=True&loc=Local
+SUNDYNIX_DB=root:root@tcp(192.168.100.127:3307)/sundynix_site?charset=utf8mb4&parseTime=True&loc=Local
 
 # 监听地址（容器内固定 8090，勿改，与 compose ports 对应）
 SUNDYNIX_ADDR=:8090

.gitea/workflows/deploy.yml

@@ -7,7 +7,6 @@ on:
   workflow_dispatch:
 
 env:
-  IMAGE: sundynix-site:latest
   REMOTE_DIR: /home/workspace/sundynix-site
 
 jobs:
@@ -15,23 +14,23 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 检出代码
-        uses: actions/checkout@v4
+        run: |
-
+          git config --global --add safe.directory '*'
-      - name: 构建镜像
+          git clone "http://token:${{ github.token }}@192.168.100.125:3000/${{ github.repository }}.git" .
-        run: docker build -t "$IMAGE" .
+          git checkout "${{ github.sha }}"
-
-      - name: 导出镜像为压缩包
-        run: docker save "$IMAGE" | gzip > image.tar.gz
 
       - name: 安装 ssh 工具
         run: |
           if command -v apt-get >/dev/null; then
             apt-get update && apt-get install -y sshpass openssh-client
-          elif command -v apk >/dev/null; then
+          else
-            apk add --no-cache sshpass openssh-client
+            apk add --no-cache sshpass openssh-client tar
           fi
 
-      - name: 传输镜像与 compose 到部署机
+      - name: 打包源码
+        run: tar czf /tmp/src.tar.gz --exclude=./.git --exclude=node_modules .
+
+      - name: 传输源码到部署机
         env:
           SSHPASS: ${{ secrets.DEPLOY_PASSWORD }}
         run: |
@@ -39,20 +38,23 @@ jobs:
           U="${{ secrets.DEPLOY_USER }}"
           sshpass -e ssh -o StrictHostKeyChecking=no "$U@$H" "mkdir -p $REMOTE_DIR"
           sshpass -e scp -o StrictHostKeyChecking=no \
-            image.tar.gz docker-compose.yml "$U@$H:$REMOTE_DIR/"
+            /tmp/src.tar.gz docker-compose.yml "$U@$H:$REMOTE_DIR/"
 
-      - name: 部署机加载镜像并重启
+      - name: 部署机构建并重启
         env:
           SSHPASS: ${{ secrets.DEPLOY_PASSWORD }}
         run: |
           H="${{ secrets.DEPLOY_HOST }}"
           U="${{ secrets.DEPLOY_USER }}"
-          sshpass -e ssh -o StrictHostKeyChecking=no "$U@$H" "\
+          sshpass -e ssh -o StrictHostKeyChecking=no "$U@$H" '
-            cd $REMOTE_DIR && \
+            set -e
-            gunzip -c image.tar.gz | docker load && \
+            cd /home/workspace/sundynix-site
-            rm -f image.tar.gz && \
+            rm -rf build && mkdir build
-            docker compose up -d && \
+            tar xzf src.tar.gz -C build
-            docker image prune -f"
+            docker build -t sundynix-site:latest build
+            docker compose up -d
+            rm -rf build src.tar.gz
+            docker image prune -f'
 
       - name: 健康检查
         env:
@@ -60,9 +62,9 @@ jobs:
         run: |
           H="${{ secrets.DEPLOY_HOST }}"
           U="${{ secrets.DEPLOY_USER }}"
-          sshpass -e ssh -o StrictHostKeyChecking=no "$U@$H" "\
+          sshpass -e ssh -o StrictHostKeyChecking=no "$U@$H" '
-            for i in \$(seq 1 15); do \
+            for i in $(seq 1 20); do
-              wget -qO- http://127.0.0.1:8090/api/healthz && exit 0; \
+              curl -sf http://127.0.0.1:8090/api/healthz && exit 0
-              sleep 2; \
+              sleep 3
-            done; \
+            done
-            echo '健康检查失败'; docker logs --tail 50 sundynix-site; exit 1"
+            echo "健康检查失败"; docker logs --tail 50 sundynix-site; exit 1'

Dockerfile

@@ -2,20 +2,21 @@
 FROM node:20-alpine AS web
 WORKDIR /app/web
 COPY web/package*.json ./
-RUN npm ci
+RUN npm config set registry https://registry.npmmirror.com && npm ci
 COPY web/ ./
 RUN npm run build
 
 FROM node:20-alpine AS admin
 WORKDIR /app/admin
 COPY admin/package*.json ./
-RUN npm ci
+RUN npm config set registry https://registry.npmmirror.com && npm ci
 COPY admin/ ./
 RUN npm run build
 
 # ── 2. 编译 Go（embed 两份前端产物）──
 FROM golang:1.26-alpine AS server
 WORKDIR /app/server
+ENV GOPROXY=https://goproxy.cn,direct
 COPY server/go.mod server/go.sum ./
 RUN go mod download
 COPY server/ ./

admin/package.json

@@ -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"
   },

admin/src/App.tsx

@@ -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 />} />

admin/src/api/client.ts

@@ -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')) {

admin/src/api/posts.ts

@@ -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')
+}

admin/src/api/visits.ts

@@ -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}`)
+}

admin/src/components/admin-layout.tsx

@@ -1,52 +1,37 @@
-import { Link, Outlet, useNavigate } from 'react-router-dom'
+import { useState } from 'react'
-import { LogOut, Moon, Sun } from 'lucide-react'
+import { Outlet } from 'react-router-dom'
-import { logout } from '@/api/auth'
+import { Menu } from 'lucide-react'
-import { useTheme } from '@/components/theme-provider'
+import { AdminSidebar } from '@/components/admin-sidebar'
 import { LogoMark } from '@/components/logo'
 
 export function AdminLayout() {
-  const navigate = useNavigate()
+  const [open, setOpen] = useState(false)
-  const { resolved, setTheme } = useTheme()
 
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="min-h-screen">
-      <header className="sticky top-0 z-40 border-b border-hairline bg-ground/85 backdrop-blur">
+      <AdminSidebar open={open} onClose={() => setOpen(false)} />
-        <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">
+      <div className="md:pl-[220px]">
-            <LogoMark size={24} />
+        {/* 移动端顶部条 */}
-            sundynix <em className="not-italic text-accent">admin</em>
+        <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">
-          </Link>
+          <button
-          <div className="flex items-center gap-3">
+            type="button"
-            <button
+            onClick={() => setOpen(true)}
-              type="button"
+            aria-label="打开菜单"
-              aria-label={
+            className="text-ink-2"
-                resolved === 'dark' ? '切换到浅色主题' : '切换到深色主题'
+          >
-              }
+            <Menu className="size-5" />
-              onClick={() => setTheme(resolved === 'dark' ? 'light' : 'dark')}
+          </button>
-              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"
+          <span className="flex items-center gap-2 font-mono text-[14px] font-semibold">
-            >
+            <LogoMark size={20} /> sundynix{' '}
-              {resolved === 'dark' ? (
+            <em className="not-italic text-accent">admin</em>
-                <Sun className="size-4" />
+          </span>
-              ) : (
+        </header>
-                <Moon className="size-4" />
+
-              )}
+        <main className="mx-auto w-full max-w-5xl px-6 py-8">
-            </button>
+          <Outlet />
-            <button
+        </main>
-              type="button"
+      </div>
-              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>
   )
 }

admin/src/components/admin-sidebar.tsx

@@ -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>
+    </>
+  )
+}

admin/src/components/confirm-dialog.tsx

@@ -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>
+  )
+}

admin/src/components/login/ai-banner.tsx

@@ -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>
+  )
+}

admin/src/components/login/ai-core-effect.tsx

@@ -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>
+  )
+}

admin/src/components/login/login-characters.tsx

@@ -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>
+  )
+}

admin/src/components/toast.tsx

@@ -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)
+}

admin/src/index.css

@@ -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;
+}

admin/src/main.tsx

@@ -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">
+      <ToastProvider>
-        <App />
+        <BrowserRouter basename="/admin">
-      </BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </ToastProvider>
     </ThemeProvider>
   </StrictMode>,
 )

admin/src/pages/dashboard.tsx

@@ -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>
+  )
+}

admin/src/pages/login.tsx

@@ -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">
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#080d17] p-6">
-      <form
+      <div className="absolute inset-0 z-0">
-        onSubmit={onSubmit}
+        <AIBanner />
-        className="w-full max-w-[360px] rounded-xl border border-hairline bg-surface p-8"
+      </div>
-      >
-        <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>
 
-        <label className="mb-4 block">
+      {/* boot 过渡动画，完成后解锁进入登录表单 */}
-          <span className="mb-1.5 block text-[13px] text-ink-2">用户名</span>
+      {!booted && <AICoreEffect onUnlock={() => setBooted(true)} />}
-          <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>
 
-        <label className="mb-5 block">
+      <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">
-          <span className="mb-1.5 block text-[13px] text-ink-2">密码</span>
+        {/* 左：品牌 + 角色 */}
-          <input
+        <div className="relative hidden flex-col justify-between overflow-hidden bg-slate-900/40 p-10 text-white backdrop-blur-md lg:flex">
-            type="password"
+          <div className="relative z-20 flex items-center gap-2.5">
-            value={password}
+            <img
-            onChange={(e) => setPassword(e.target.value)}
+              src={`${import.meta.env.BASE_URL}logo-mark.webp`}
-            autoComplete="current-password"
+              alt=""
-            required
+              width={28}
-            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"
+              height={28}
-          />
+              style={{ borderRadius: '22%' }}
-        </label>
+            />
+            <span className="font-mono text-[15px] font-semibold tracking-tight">
+              sundynix <em className="not-italic text-[#38bdf8]">admin</em>
+            </span>
+          </div>
 
-        {error && (
+          <div
-          <p className="mb-4 text-[13px] text-red-600 dark:text-red-400">
+            className="relative z-20 mt-auto flex items-end justify-center"
-            {error}
+            style={{ height: 300 }}
-          </p>
+          >
-        )}
+            <LoginCharacters
+              isTyping={pwdFocused}
+              showPassword={showPwd}
+              passwordLength={password.length}
+            />
+          </div>
 
-        <button
+          <div className="relative z-20 mt-10 font-mono text-[11px] tracking-wide text-white/35">
-          type="submit"
+            © 2026 SUNDYNIX AGENTIX
-          disabled={loading}
+          </div>
-          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"
+
-        >
+          <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]" />
-          {loading ? '登录中…' : '登录'}
+          <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]" />
-        </button>
+        </div>
-      </form>
+
+        {/* 右：登录表单 */}
+        <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>
   )
 }

admin/src/pages/post-edit.tsx

@@ -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,
+  ArrowLeft,
-  fetchPost,
+  Bold,
-  updatePost,
+  Code,
-  type PostForm,
+  Heading2,
-} from '@/api/posts'
+  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
+            <div className="overflow-hidden rounded-lg border border-hairline-strong">
-              value={form.content}
+              {/* 工具栏 */}
-              onChange={(e) => set('content', e.target.value)}
+              <div className="flex items-center gap-0.5 border-b border-hairline bg-ground px-2 py-1.5">
-              rows={18}
+                {tools.map((t) => (
-              spellCheck={false}
+                  <button
-              className={`${inputCls} resize-y font-mono text-[13.5px] leading-relaxed`}
+                    key={t.label}
-            />
+                    type="button"
-          </label>
+                    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]">

admin/src/pages/posts-list.tsx

@@ -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) => {
+  const confirmDelete = async () => {
-    if (!window.confirm(`确认删除「${post.title}」？此操作不可恢复。`)) return
+    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>
   )
 }

admin/src/pages/visits.tsx

@@ -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>
+  )
+}

deploy/README.md

@@ -6,11 +6,11 @@
 push/merge main ─▶ Gitea(192.168.100.125:3000)
                   │ 触发 .gitea/workflows/deploy.yml
                   ▼
-          act_runner(192.168.100.128)
+          act_runner(192.168.100.128, docker 模式)
-                  │ docker build → save → scp
+                  │ 打包源码 → scp
                   ▼
           部署机(192.168.100.132)  /home/workspace/sundynix-site
-                  │ docker load → compose up  →  容器 :8090
+                  │ docker build → compose up  →  容器 :8090
                   │                                  │ 连
                   │                          MySQL(192.168.100.127:3307)
                   ▼
@@ -39,10 +39,24 @@ vi .env          # 改 admin 密码、JWT 密钥
 
 `.env` 关键项见 [.env.production.example](../.env.production.example)。数据库指向内网 `192.168.100.127:3307/sundynix_site`（库不存在会自动建表 + 种子）。
 
-### 3. act_runner 128 要求
+### 3. act_runner 128 要求（docker 模式，非 host）
 
-- 能访问 docker daemon（`docker build/save` 可用）
+runner 必须用 **docker 模式** + 挂 docker.sock + 持久化 /data，标签用带 node 的镜像：
-- 能 ssh 到 132（workflow 用 sshpass 走密码）
+
+```bash
+docker run -d --name act_runner --restart unless-stopped \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  -v /root/act_runner_data:/data \
+  -e GITEA_INSTANCE_URL=http://192.168.100.125:3000 \
+  -e GITEA_RUNNER_REGISTRATION_TOKEN=<在 gitea 运行器页创建新运行器获取> \
+  -e GITEA_RUNNER_NAME=Auto-CICD \
+  -e "GITEA_RUNNER_LABELS=ubuntu-latest:docker://catthehacker/ubuntu:act-22.04" \
+  gitea/act_runner:0.6.1
+```
+
+- job 在 catthehacker 镜像里跑（含 node/git/apt，checkout 与 sshpass 可用）
+- 真正的 `docker build` 在 132 上执行，128 只需能 ssh 到 132
+- 部署机 132 需装 docker + compose 插件
 
 ### 4. 公网服务器 nginx
 

server/internal/handler/admin_post.go

@@ -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,
+	})
+}

server/internal/handler/visit.go

@@ -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,
+	})
+}

server/internal/model/visit.go

@@ -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"`
+}

server/internal/router/router.go

@@ -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)

server/internal/store/db.go

@@ -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 {

web/src/App.tsx

@@ -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 />}>

web/src/index.css

@@ -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(