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,152 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/admin/auth-context';
+import { adminApi } from '@/lib/admin-api';
+import { Save } from 'lucide-react';
+
+interface ZoneItem {
+  itemId: string;
+  sortOrder: number;
+  variant: string;
+}
+
+interface Zone {
+  id: string;
+  code: string;
+  name: string;
+  pageCode: string;
+  zoneKey: string;
+  allowedModels: string[];
+  items: ZoneItem[];
+  settings: Record<string, unknown>;
+}
+
+export default function ZonesPage() {
+  const { user, loading: authLoading } = useAuth();
+  const router = useRouter();
+  const [zones, setZones] = useState<Zone[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [editingZone, setEditingZone] = useState<Zone | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      router.push('/admin/login');
+      return;
+    }
+    if (user) {
+      adminApi.getZones().then((res) => {
+        setZones((res as Zone[]) || []);
+      }).catch(console.error).finally(() => setLoading(false));
+    }
+  }, [user, authLoading, router]);
+
+  const handleSave = async () => {
+    if (!editingZone) return;
+    setSaving(true);
+    try {
+      await adminApi.saveZone({
+        id: editingZone.id,
+        code: editingZone.code,
+        name: editingZone.name,
+        pageCode: editingZone.pageCode,
+        zoneKey: editingZone.zoneKey,
+        allowedModels: editingZone.allowedModels,
+        items: editingZone.items,
+        settings: editingZone.settings,
+      });
+      setEditingZone(null);
+      // 重新加载
+      const res = await adminApi.getZones();
+      setZones((res as Zone[]) || []);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : '保存失败');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (authLoading || loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin w-8 h-8 border-2 border-gray-900 border-t-transparent rounded-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-xl font-bold text-gray-900">页面区域配置</h1>
+        <p className="text-sm text-gray-500 mt-1">管理系统各页面的内容区域布局</p>
+      </div>
+
+      <div className="grid gap-4">
+        {zones.map((zone) => (
+          <div key={zone.id} className="bg-white rounded-lg border border-gray-200 p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="text-sm font-semibold text-gray-900">{zone.name}</h3>
+                <p className="text-xs text-gray-500 mt-0.5">
+                  Code: {zone.code} | 页面: {zone.pageCode || '-'} | 区域: {zone.zoneKey || '-'}
+                </p>
+                <p className="text-xs text-gray-400 mt-0.5">
+                  允许模型: {zone.allowedModels?.join(', ') || '-'} | 内容数: {zone.items?.length || 0}
+                </p>
+              </div>
+              <button
+                onClick={() => setEditingZone(editingZone?.id === zone.id ? null : zone)}
+                className="text-sm text-gray-600 hover:text-gray-900 px-3 py-1.5 rounded border border-gray-300 hover:border-gray-400 transition-colors"
+              >
+                {editingZone?.id === zone.id ? '取消编辑' : '编辑'}
+              </button>
+            </div>
+
+            {editingZone?.id === zone.id && (
+              <div className="mt-4 pt-4 border-t border-gray-100 space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">名称</label>
+                    <input
+                      type="text"
+                      value={editingZone.name}
+                      onChange={(e) => setEditingZone({ ...editingZone, name: e.target.value })}
+                      className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700 mb-1">页面标识</label>
+                    <input
+                      type="text"
+                      value={editingZone.pageCode}
+                      onChange={(e) => setEditingZone({ ...editingZone, pageCode: e.target.value })}
+                      className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm"
+                    />
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2">
+                  <button
+                    onClick={() => setEditingZone(null)}
+                    className="text-sm text-gray-600 px-4 py-1.5 rounded border border-gray-300 hover:bg-gray-50"
+                  >
+                    取消
+                  </button>
+                  <button
+                    onClick={handleSave}
+                    disabled={saving}
+                    className="flex items-center gap-1.5 text-sm bg-gray-900 text-white px-4 py-1.5 rounded hover:bg-gray-800 disabled:opacity-50"
+                  >
+                    <Save className="w-3.5 h-3.5" />
+                    保存
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}