feat(cms): 添加 CMS 内容管理系统与 Admin 管理后台

- 新增 Prisma + SQLite 数据库模型 (Category, Content, Media, User 等) - 新增 Admin 管理后台 (认证、内容管理、媒体管理) - 新增 CMS API 路由 (CRUD, 草稿/发布, 重新验证) - 新增 CMS 内容版本的历史归档页面 - 新增 components/cms 内容渲染组件 - 新增 components/admin 管理后台 UI 组件 - 更新 Contact API 路由
2026-07-07 06:53:58 +08:00
parent 829d83522c
commit b5245f9aa2
87 changed files with 25659 additions and 0 deletions
@@ -0,0 +1,223 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { useAuth } from './auth-context';
+import {
+  LayoutDashboard,
+  FileText,
+  Briefcase,
+  Box,
+  Layers,
+  Image,
+  BarChart3,
+  Newspaper,
+  LogOut,
+  Menu,
+  X,
+  ChevronDown,
+  Settings,
+  Users,
+  Phone,
+  Shield,
+} from 'lucide-react';
+
+const menuItems = [
+  {
+    label: '内容管理',
+    icon: FileText,
+    children: [
+      { label: '新闻资讯', href: '/admin/content/news', icon: Newspaper },
+      { label: '案例研究', href: '/admin/content/case-study', icon: Briefcase },
+      { label: '服务管理', href: '/admin/content/service', icon: Settings },
+      { label: '产品管理', href: '/admin/content/product', icon: Box },
+      { label: '解决方案', href: '/admin/content/solution', icon: Layers },
+      { label: 'Hero Banner', href: '/admin/content/hero-banner', icon: Image },
+      { label: '数据指标', href: '/admin/content/stat-item', icon: BarChart3 },
+    ],
+  },
+  {
+    label: '页面管理',
+    icon: FileText,
+    children: [
+      { label: '关于我们', href: '/admin/content/about-page', icon: Users },
+      { label: '团队介绍', href: '/admin/content/team-page', icon: Users },
+      { label: '联系我们', href: '/admin/content/contact-page', icon: Phone },
+      { label: '法律页面', href: '/admin/content/legal-page', icon: Shield },
+    ],
+  },
+  {
+    label: '页面配置',
+    icon: Layers,
+    children: [
+      { label: '首页区域', href: '/admin/zones', icon: LayoutDashboard },
+    ],
+  },
+  {
+    label: '资源管理',
+    icon: Image,
+    children: [
+      { label: '媒体库', href: '/admin/media', icon: Image },
+    ],
+  },
+];
+
+export function AdminLayout({ children }: { children: React.ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [expandedMenus, setExpandedMenus] = useState<Set<string>>(new Set(['内容管理']));
+  const { user, logout } = useAuth();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const toggleMenu = (label: string) => {
+    setExpandedMenus((prev) => {
+      const next = new Set(prev);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      return next;
+    });
+  };
+
+  const handleLogout = () => {
+    logout();
+    router.push('/admin/login');
+  };
+
+  const isActive = (href: string) => pathname === href || pathname?.startsWith(href + '/');
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform duration-200 ease-in-out lg:translate-x-0 ${
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200">
+          <Link href="/admin" className="flex items-center gap-2">
+            <span className="text-lg font-bold text-gray-900">Novalon CMS</span>
+          </Link>
+          <button
+            onClick={() => setSidebarOpen(false)}
+            className="lg:hidden p-1 rounded hover:bg-gray-100"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <nav className="flex-1 overflow-y-auto p-3 space-y-1">
+          {/* Dashboard */}
+          <Link
+            href="/admin"
+            className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+              pathname === '/admin'
+                ? 'bg-gray-900 text-white'
+                : 'text-gray-600 hover:bg-gray-100'
+            }`}
+          >
+            <LayoutDashboard className="w-4 h-4" />
+            仪表盘
+          </Link>
+
+          {/* Menu groups */}
+          {menuItems.map((group) => (
+            <div key={group.label}>
+              <button
+                onClick={() => toggleMenu(group.label)}
+                className="flex items-center justify-between w-full px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-100 transition-colors"
+              >
+                <span className="flex items-center gap-3">
+                  <group.icon className="w-4 h-4" />
+                  {group.label}
+                </span>
+                <ChevronDown
+                  className={`w-4 h-4 transition-transform ${
+                    expandedMenus.has(group.label) ? 'rotate-180' : ''
+                  }`}
+                />
+              </button>
+
+              {expandedMenus.has(group.label) && (
+                <div className="ml-4 mt-1 space-y-1">
+                  {group.children.map((item) => (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
+                        isActive(item.href)
+                          ? 'bg-gray-900 text-white'
+                          : 'text-gray-500 hover:bg-gray-100'
+                      }`}
+                    >
+                      <item.icon className="w-3.5 h-3.5" />
+                      {item.label}
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </nav>
+
+        {/* User info */}
+        <div className="border-t border-gray-200 p-3">
+          <div className="flex items-center gap-3 px-3 py-2">
+            <div className="w-8 h-8 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-medium">
+              {user?.nickname?.charAt(0) || 'A'}
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-gray-900 truncate">
+                {user?.nickname || user?.username}
+              </p>
+              <p className="text-xs text-gray-500">{user?.role === 'admin' ? '管理员' : '编辑'}</p>
+            </div>
+            <button
+              onClick={handleLogout}
+              className="p-1.5 rounded hover:bg-gray-100 text-gray-400 hover:text-red-500 transition-colors"
+              title="退出登录"
+            >
+              <LogOut className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      {/* Main content */}
+      <div className="lg:pl-64">
+        {/* Top bar */}
+        <header className="sticky top-0 z-30 h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 lg:px-6">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="lg:hidden p-2 rounded hover:bg-gray-100"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+
+          <div className="flex-1" />
+
+          <div className="flex items-center gap-4">
+            <Link
+              href="/"
+              target="_blank"
+              className="text-sm text-gray-500 hover:text-gray-700 transition-colors"
+            >
+              查看网站
+            </Link>
+          </div>
+        </header>
+
+        {/* Page content */}
+        <main className="p-4 lg:p-6">{children}</main>
+      </div>
+    </div>
+  );
+}