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,287 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ArrowUpRight, Factory, ShoppingCart, Heart, GraduationCap, Sparkles, Shield, Truck, type LucideIcon } from 'lucide-react';
+import { type Solution } from '@/lib/constants/solutions';
+import type { Product } from '@/lib/constants/products';
+
+const EASE_OUT = [0.22, 1, 0.36, 1] as const;
+
+const INDUSTRY_ICONS: Record<string, LucideIcon> = {
+  制造业: Factory,
+  贸易零售: ShoppingCart,
+  医疗健康: Heart,
+  教育培训: GraduationCap,
+  金融服务: Shield,
+  物流运输: Truck,
+};
+
+function HeroSection() {
+  return (
+    <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
+        <div className="max-w-4xl">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
+            className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
+          >
+            Industry Solutions
+          </motion.div>
+
+          <motion.h1
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
+            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
+          >
+            <div className="block">深耕行业场景的</div>
+            <div className="block mt-4 sm:mt-6">
+              <span className="relative inline-block">
+                <span className="relative text-brand font-black">
+                  解决方案
+                  <motion.span
+                    className="absolute -bottom-2 left-0 w-full h-[3px] bg-brand"
+                    style={{ transformOrigin: 'left' }}
+                    initial={{ scaleX: 0 }}
+                    animate={{ scaleX: 1 }}
+                    transition={{ duration: 0.8, delay: 1.2, ease: EASE_OUT }}
+                  />
+                </span>
+              </span>
+            </div>
+          </motion.h1>
+
+          <motion.p
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.5, ease: EASE_OUT }}
+            className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-12 sm:mb-16"
+          >
+            端到端交付，推荐套装组合 + 配套服务包。
+            <br className="hidden sm:block" />
+            基于自研产品矩阵，为制造、零售、教育、医疗、金融、物流六大行业量身定制最佳实践。
+          </motion.p>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.7, ease: EASE_OUT }}
+            className="flex flex-col sm:flex-row gap-4 sm:gap-6"
+          >
+            <a
+              href="/contact"
+              className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
+            >
+              立即咨询
+              <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+            </a>
+            <a
+              href="/products"
+              className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
+            >
+              浏览产品
+            </a>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.9, ease: EASE_OUT }}
+            className="grid grid-cols-3 gap-8 mt-20 pt-12 border-t border-border-primary max-w-xl"
+          >
+            <div>
+              <div className="text-3xl sm:text-4xl font-black text-ink tracking-tight leading-none mb-2">
+                6<span className="text-brand">大</span>
+              </div>
+              <div className="text-sm text-text-muted">行业覆盖</div>
+            </div>
+            <div>
+              <div className="text-3xl sm:text-4xl font-black text-ink tracking-tight leading-none mb-2">
+                端到<span className="text-brand">端</span>
+              </div>
+              <div className="text-sm text-text-muted">交付模式</div>
+            </div>
+            <div>
+              <div className="text-3xl sm:text-4xl font-black text-ink tracking-tight leading-none mb-2">
+                定制<span className="text-brand">化</span>
+              </div>
+              <div className="text-sm text-text-muted">方案特点</div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function SolutionCard({ solution, index, products }: { solution: Solution; index: number; products?: Product[] }) {
+  const productLookup = products ?? [];
+  const Icon = INDUSTRY_ICONS[solution.industry] || Factory;
+
+  return (
+    <motion.a
+      href={`/solutions/${solution.id}`}
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-60px' }}
+      transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
+      className="group relative block transition-all duration-500 hover:bg-bg-secondary bg-white border border-border-primary hover:border-ink/20"
+    >
+      <div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
+
+      <div className="relative z-10 p-8 sm:p-10 md:p-12">
+        <div className="flex items-start justify-between mb-8">
+          <div className="w-12 h-12 flex items-center justify-center text-text-secondary group-hover:text-brand transition-colors duration-300">
+            <Icon className="w-6 h-6" strokeWidth={1.5} />
+          </div>
+          <span className="text-5xl sm:text-6xl font-black text-ink/[0.04] tracking-tighter leading-none">
+            {String(index + 1).padStart(2, '0')}
+          </span>
+        </div>
+
+        <div className="mb-6">
+          <span className="inline-block px-3 py-1 text-[11px] font-bold mb-4 text-brand border border-brand/20 bg-brand/[0.05]">
+            {solution.industry}
+          </span>
+          <div className="text-text-muted text-sm tracking-widest uppercase mb-2">
+            {solution.subtitle}
+          </div>
+          <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-ink group-hover:text-brand transition-colors duration-300 leading-tight">
+            {solution.title}
+          </h3>
+        </div>
+
+        <p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
+          {solution.description}
+        </p>
+
+        <div className="flex flex-col gap-2 mb-6">
+          {solution.challenges.slice(0, 2).map((challenge, idx) => (
+            <div key={idx} className="flex items-start gap-2.5 text-sm text-text-secondary">
+              <span className="text-brand mt-0.5 font-bold">•</span>
+              <span>{challenge}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className="pt-6 border-t border-border-primary">
+          <p className="text-[11px] text-text-muted mb-3 uppercase tracking-widest font-bold flex items-center gap-2">
+            <Sparkles className="w-3.5 h-3.5 text-brand" />
+            推荐产品组合
+          </p>
+          <div className="flex flex-wrap gap-2 mb-4">
+            {solution.suiteCombination.primaryProducts.map(pid => {
+              const prod = productLookup.find(p => p.id === pid);
+              return prod ? (
+                <span
+                  key={pid}
+                  className="px-3 py-1.5 text-xs font-medium text-ink bg-bg-secondary border border-border-primary"
+                >
+                  {prod.title.replace('睿新', '').replace('睿视 ', '')}
+                </span>
+              ) : null;
+            })}
+            <span className="px-3 py-1.5 text-xs font-bold text-brand border border-brand/20 bg-brand/[0.05]">
+              + 配套服务
+            </span>
+          </div>
+          <p className="text-sm text-text-muted leading-relaxed">
+            {solution.suiteCombination.rationale}
+          </p>
+        </div>
+
+        <div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300 mt-6">
+          <span>了解详情</span>
+          <ArrowUpRight className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" />
+        </div>
+      </div>
+    </motion.a>
+  );
+}
+
+function SolutionsGridSection({ solutions, products }: { solutions: Solution[]; products?: Product[] }) {
+  return (
+    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
+      <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
+
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-80px' }}
+          transition={{ duration: 0.8, ease: EASE_OUT }}
+          className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
+        >
+          <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
+            Industry Expertise
+          </div>
+          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
+            行业解决方案
+          </h2>
+          <p className="mt-6 text-lg text-text-secondary leading-relaxed">
+            每个方案都明确推荐产品组合和服务包，确保落地效果
+          </p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 gap-px bg-border-primary">
+          {solutions.map((solution, index) => (
+            <SolutionCard key={solution.id} solution={solution} index={index} products={products} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CTASection() {
+  return (
+    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-80px' }}
+          transition={{ duration: 0.8, ease: EASE_OUT }}
+          className="max-w-3xl"
+        >
+          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95] mb-8">
+            告诉我们您的<br className="sm:hidden" />行业场景
+          </h2>
+          <p className="text-lg text-text-secondary leading-relaxed mb-10">
+            无论您处于哪个行业、哪个数字化阶段，我们都能为您推荐最合适的产品组合和服务包。
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
+            <a
+              href="/contact"
+              className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
+            >
+              获取定制方案
+              <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+            </a>
+            <a
+              href="/products"
+              className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
+            >
+              浏览产品
+            </a>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
+
+export default function SolutionsContentV3({ solutions: solutionsProp, products }: { solutions?: Solution[]; products?: Product[] }) {
+  const solutions = solutionsProp ?? [];
+
+  return (
+    <main className="bg-white text-ink">
+      <HeroSection />
+      <SolutionsGridSection solutions={solutions} products={products} />
+      <CTASection />
+    </main>
+  );
+}