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,410 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ArrowUpRight, Code, BarChart3, Lightbulb, Puzzle, type LucideIcon } from 'lucide-react';
+import type { Service } from '@/lib/constants/services';
+
+const EASE_OUT = [0.22, 1, 0.36, 1] as const;
+
+/** Icon name-to-component mapping for CMS string-based icons */
+const ICON_MAP: Record<string, LucideIcon> = {
+  Lightbulb,
+  Code,
+  BarChart3,
+  Puzzle,
+};
+
+/** UI metadata keyed by service ID — presentation-only fields not stored in CMS */
+const SERVICE_UI_META: Record<string, { subtitle: string; metrics: { value: string; label: string }[] }> = {
+  consulting: { subtitle: 'Strategy Consulting', metrics: [{ value: '90%+', label: '方案落地率' }, { value: '50+', label: '咨询项目' }] },
+  software: { subtitle: 'Enterprise Software', metrics: [{ value: '95%+', label: '准时交付率' }, { value: 'A+', label: '代码质量' }] },
+  data: { subtitle: 'Technology Services', metrics: [{ value: '100+', label: '技术方案' }, { value: '24/7', label: '运维支持' }] },
+  solutions: { subtitle: 'AI Empowerment', metrics: [{ value: '30+', label: 'AI 场景' }, { value: '85%', label: '效率提升' }] },
+};
+
+function mapServicesToCards(services: Service[]) {
+  return services.map((svc, i) => {
+    const uiMeta = SERVICE_UI_META[svc.id];
+    return {
+      number: String(i + 1).padStart(2, '0'),
+      title: svc.title,
+      subtitle: uiMeta?.subtitle ?? '',
+      desc: svc.description,
+      href: `/services/${svc.id}`,
+      icon: ICON_MAP[svc.icon] ?? Lightbulb,
+      highlights: svc.features?.slice(0, 4) ?? [],
+      metrics: uiMeta?.metrics ?? [],
+    };
+  });
+}
+
+const SERVICE_PROCESS = [
+  { step: '01', title: '需求分析', desc: '深入了解业务场景与真实痛点，而非凭空假设' },
+  { step: '02', title: '方案设计', desc: '量身定制技术路线，拒绝千篇一律的模板' },
+  { step: '03', title: '敏捷交付', desc: '快速迭代，每个冲刺周期都有可交付成果' },
+  { step: '04', title: '持续支持', desc: '上线不是终点，长期陪伴才是真正的承诺' },
+];
+
+const SERVICE_MODES = [
+  {
+    title: '项目制',
+    description: '针对明确的需求和交付目标，以项目为单位进行合作。适合有清晰边界的一次性建设类项目。',
+    highlight: '固定范围 · 固定周期',
+  },
+  {
+    title: '订阅制',
+    description: '按月或按年持续提供技术支持和迭代优化。适合需要长期维护、持续演进的产品和系统。',
+    highlight: '持续迭代 · 弹性调整',
+  },
+  {
+    title: '长期陪跑',
+    description: '以合作伙伴身份深度参与您的数字化进程，从规划到执行全程陪伴。适合正在系统性转型的企业。',
+    highlight: '深度参与 · 共同成长',
+  },
+];
+
+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"
+          >
+            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">从规划到运维</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">
+                4<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">
+                3<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 ServicesGridSection({ services }: { services?: Service[] }) {
+  const displayServices = services?.length ? mapServicesToCards(services) : [];
+  if (displayServices.length === 0) {
+    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 text-center">
+          <p className="text-text-muted text-lg">暂无服务数据</p>
+        </div>
+      </section>
+    );
+  }
+  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">
+            Service Capabilities
+          </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">
+          {displayServices.map((service, i) => {
+            const Icon = service.icon;
+            return (
+              <motion.a
+                key={i}
+                href={service.href}
+                initial={{ opacity: 0, y: 30 }}
+                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 md:p-12 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-start justify-between mb-8">
+                    <div className={`w-12 h-12 flex items-center justify-center ${
+                      i === 0 ? 'text-brand' : 'text-text-secondary'
+                    }`}>
+                      <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">
+                      {service.number}
+                    </span>
+                  </div>
+
+                  <div className="mb-6">
+                    <div className="text-[11px] tracking-[0.3em] uppercase text-text-muted mb-3 font-semibold">
+                      {service.subtitle}
+                    </div>
+                    <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-ink group-hover:text-brand transition-colors duration-300">
+                      {service.title}
+                    </h3>
+                  </div>
+
+                  <p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
+                    {service.desc}
+                  </p>
+
+                  <div className="flex flex-wrap gap-2 mb-6">
+                    {service.highlights.map((h, j) => (
+                      <span
+                        key={j}
+                        className="px-3 py-1 text-xs text-text-secondary border border-border-primary group-hover:border-ink/20 group-hover:text-ink transition-all duration-300 font-medium"
+                      >
+                        {h}
+                      </span>
+                    ))}
+                  </div>
+
+                  <div className="flex items-center gap-8 pt-5 border-t border-border-primary mb-6">
+                    {service.metrics.map((m, j) => (
+                      <div key={j}>
+                        <div className="text-xl font-bold text-ink">{m.value}</div>
+                        <div className="text-xs text-text-muted mt-1">{m.label}</div>
+                      </div>
+                    ))}
+                  </div>
+
+                  <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 ProcessModesSection() {
+  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">
+        <div className="grid lg:grid-cols-12 gap-12 sm:gap-16 md:gap-20">
+          {/* Process */}
+          <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-7"
+          >
+            <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
+              Our Process
+            </div>
+            <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-ink tracking-tight leading-[0.95] mb-10 sm:mb-14">
+              我们的做事方式
+            </h2>
+
+            <div className="space-y-0">
+              {SERVICE_PROCESS.map((item, idx) => (
+                <div
+                  key={item.step}
+                  className="relative pl-8 sm:pl-12 pb-8 sm:pb-10 last:pb-0"
+                >
+                  <div className="absolute left-0 top-3 bottom-0 w-px bg-border-primary last:hidden" />
+                  <div className={`absolute left-0 top-3 w-2.5 h-2.5 rounded-full -translate-x-1/2 ${
+                    idx === 0 ? 'bg-brand' : 'bg-text-muted'
+                  }`} />
+
+                  <div className="flex items-start gap-6">
+                    <div className="text-2xl sm:text-3xl font-black text-ink/[0.06] font-mono shrink-0 leading-none w-14">
+                      {item.step}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-lg sm:text-xl font-bold text-ink mb-2">{item.title}</h3>
+                      <p className="text-text-secondary leading-relaxed text-sm sm:text-base">{item.desc}</p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* Modes */}
+          <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-5"
+          >
+            <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
+              Engagement Models
+            </div>
+            <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-ink tracking-tight leading-[0.95] mb-10 sm:mb-14">
+              合作方式
+            </h2>
+
+            <div className="space-y-4 sm:space-y-5">
+              {SERVICE_MODES.map((mode) => (
+                <div
+                  key={mode.title}
+                  className="group relative p-6 sm:p-7 border border-border-primary bg-white hover:bg-bg-secondary hover:border-ink/20 transition-all duration-300"
+                >
+                  <div className="absolute top-0 left-0 w-1 h-0 bg-brand group-hover:h-full transition-all duration-500" />
+
+                  <div className="relative z-10">
+                    <h3 className="text-xl font-bold text-ink mb-3 group-hover:text-brand transition-colors duration-300">
+                      {mode.title}
+                    </h3>
+                    <p className="text-text-secondary leading-relaxed text-sm sm:text-[15px] mb-4">{mode.description}</p>
+                    <div className="text-sm font-medium text-ink">{mode.highlight}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+        </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="/team"
+              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 ServicesContentV3({ services }: { services?: Service[] }) {
+  return (
+    <main className="bg-white text-ink">
+      <HeroSection />
+      <ServicesGridSection services={services} />
+      <ProcessModesSection />
+      <CTASection />
+    </main>
+  );
+}