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

- 新增 Prisma + SQLite 数据库模型 (Category, Content, Media, User 等)
- 新增 Admin 管理后台 (认证、内容管理、媒体管理)
- 新增 CMS API 路由 (CRUD, 草稿/发布, 重新验证)
- 新增 CMS 内容版本的历史归档页面
- 新增 components/cms 内容渲染组件
- 新增 components/admin 管理后台 UI 组件
- 更新 Contact API 路由

src/app/(marketing)/services/service-detail-content-v4.tsx

@@ -0,0 +1,394 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ArrowUpRight, CheckCircle2 } from 'lucide-react';
+import type { Service, CaseStudy } from '@/lib/constants/services';
+
+const EASE_OUT = [0.22, 1, 0.36, 1] as const;
+
+const FEATURE_ICONS = ['⚡', '⏱', '👥', '🏆', '📈', '🛡'];
+
+function DetailHero({ service }: { service: Service }) {
+  const firstBenefit = service.benefits?.[0] || '效率提升 40%';
+
+  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"
+          >
+            Professional Services
+          </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">{service.title}</div>
+            <div className="block mt-4 sm:mt-6">
+              <span className="relative inline-block">
+                <span className="relative text-brand font-black">
+                  {firstBenefit}
+                  <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"
+          >
+            {service.description}
+          </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="grid grid-cols-3 gap-8 mb-12 sm:mb-16 max-w-xl"
+          >
+            <div>
+              <div className="text-3xl sm:text-4xl font-black text-brand tracking-tight leading-none mb-2">
+                12年
+              </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">
+                95%+
+              </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">
+                98%
+              </div>
+              <div className="text-sm text-text-muted">客户续约</div>
+            </div>
+          </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="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="#cases"
+              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>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function OverviewSection({ service }: { service: Service }) {
+  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">
+        <div className="grid lg:grid-cols-12 gap-12 sm:gap-16 md:gap-20 items-start">
+          <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="lg:col-span-5"
+          >
+            <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
+              Overview
+            </div>
+            <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
+              解决什么问题
+            </h2>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-80px' }}
+            transition={{ duration: 0.8, delay: 0.15, ease: EASE_OUT }}
+            className="lg:col-span-7"
+          >
+            <p className="text-text-secondary leading-relaxed text-lg mb-8">
+              {service.overview}
+            </p>
+            <div className="flex flex-wrap gap-3">
+              {service.benefits?.slice(0, 4).map((benefit, i) => (
+                <div
+                  key={i}
+                  className="inline-flex items-center gap-2 px-4 py-2 text-sm border border-border-primary text-ink"
+                >
+                  <CheckCircle2 className="w-4 h-4 shrink-0 text-brand" />
+                  <span className="font-medium">{benefit}</span>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function FeaturesSection({ service }: { service: Service }) {
+  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">
+        <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">
+            Capabilities
+          </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">
+            每一项都经过 500+ 项目实战打磨
+          </p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary">
+          {service.features.map((feature, index) => {
+            const [title, desc] = feature.split('：');
+            const icon = FEATURE_ICONS[index % FEATURE_ICONS.length];
+
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-60px' }}
+                transition={{ duration: 0.6, delay: index * 0.06, ease: EASE_OUT }}
+                className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary bg-white"
+              >
+                <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">
+                  <div className="text-3xl mb-6">{icon}</div>
+                  <h3 className="text-lg sm:text-xl font-bold mb-3 text-ink group-hover:text-brand transition-colors duration-300">
+                    {desc ? title : feature.slice(0, 10)}
+                  </h3>
+                  <p className="text-sm leading-relaxed text-text-secondary">
+                    {desc || feature}
+                  </p>
+                </div>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ProcessSection({ service }: { service: Service }) {
+  if (!service.process || service.process.length === 0) return null;
+
+  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">
+            Process
+          </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 lg:grid-cols-5 gap-px bg-border-primary">
+          {service.process.slice(0, 5).map((step, index) => {
+            const [title, desc] = step.split('：');
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-60px' }}
+                transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
+                className="relative group p-6 sm:p-8 bg-white"
+              >
+                <div className={`text-4xl sm:text-5xl font-black font-mono mb-6 ${
+                  index === 0 ? 'text-brand' : 'text-ink/[0.06]'
+                }`}>
+                  0{index + 1}
+                </div>
+                <h3 className="text-lg font-bold mb-2 text-ink group-hover:text-brand transition-colors duration-300">
+                  {desc ? title : step.slice(0, 6)}
+                </h3>
+                <p className="text-sm leading-relaxed text-text-secondary">
+                  {desc || step}
+                </p>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] }) {
+  if (caseStudies.length === 0) return null;
+
+  return (
+    <section id="cases" 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">
+        <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">
+            Case Studies
+          </div>
+          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
+            真实案例，<br className="sm:hidden" />可衡量的成果
+          </h2>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 gap-px bg-border-primary">
+          {caseStudies.slice(0, 4).map((cs, i) => (
+            <motion.a
+              key={i}
+              href={`/cases/${cs.client.toLowerCase().replace(/\s+/g, '-')}`}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-60px' }}
+              transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
+              className="group relative block p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary bg-white border border-transparent hover:border-border-primary"
+            >
+              <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">
+                <div className="flex items-center gap-3 mb-5">
+                  <span className="text-[11px] tracking-[0.25em] uppercase font-medium text-brand">
+                    {cs.industry}
+                  </span>
+                  <span className="text-border-primary">•</span>
+                  <span className="text-sm text-text-secondary">{cs.client}</span>
+                </div>
+
+                <h3 className="text-xl sm:text-2xl font-bold mb-6 text-ink leading-tight group-hover:text-brand transition-colors duration-300">
+                  {cs.challenge.slice(0, 30)}
+                </h3>
+
+                <p className="text-sm leading-relaxed mb-6 text-text-secondary">
+                  {cs.solution}
+                </p>
+
+                <div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300">
+                  <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>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CTASection() {
+  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="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">
+            准备好开始了吗？
+          </h2>
+          <p className="text-lg text-text-secondary leading-relaxed mb-10">
+            无论是一个明确的项目，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。
+            <br className="hidden sm:block" />
+            首次咨询免费，没有任何销售压力。
+          </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="/services"
+              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 ServiceDetailContentV4({ service }: { service: Service }) {
+  return (
+    <main className="min-h-screen bg-white text-ink">
+      <DetailHero service={service} />
+      <OverviewSection service={service} />
+      <FeaturesSection service={service} />
+      <ProcessSection service={service} />
+      <CaseStudiesSection caseStudies={service.caseStudies} />
+      <CTASection />
+    </main>
+  );
+}