feat: 初始化居家上门服务系统完整项目代码

- Spring Boot 后端服务 (hss-home-service) - delivery-miniapp 配送小程序 - website 官网 (Nuxt) - docs 架构设计文档 - Docker 容器化部署配置 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-19 09:04:49 +08:00
parent 46c7887a18
commit c02029a5f3
471 changed files with 42313 additions and 2 deletions
--- a/hss-home-service/website/IMPLEMENTATION.md
+++ b/hss-home-service/website/IMPLEMENTATION.md
@@ -0,0 +1,714 @@
+# 智慧医养居家上门服务平台 — 官网前端实现方案
+
+> 基于：`官网设计方案Prompt.txt`（7轮需求采集产物）
+> 仓库：`hss-home-service/website/`（独立 Nuxt3 项目）
+> 后端：已有 Spring Boot 后端，运行在 18080 端口，`/api/hss/*` 84 个接口
+
+---
+
+## 1. 需求与约束摘要
+
+| 项 | 内容 |
+|---|---|
+| **任务类型** | 新功能开发（新建项目） |
+| **目标** | 实现完整产品官网：9 页面 + 公共组件，品牌展示 + 获客转化 |
+| **技术栈** | Vue3 + Nuxt3 + Tailwind CSS（严格） |
+| **UI 库** | 不引入 UI 组件库，仅 Tailwind 自定义组件 |
+| **渲染** | SSG / 静态预渲染优先 |
+| **暗色/i18n** | 不做 |
+| **动效** | CSS transition/animation + IntersectionObserver，禁用 GSAP/3D |
+| **表单** | 开发期 mock，正式通过 `/api` 对接已有后端 |
+| **SEO** | 每页 useSeoMeta，百度优先，兼顾 Google |
+| **可访问性** | WCAG 2.2 AA：label、focus、错误提示、键盘可达、对比度 |
+| **性能** | Lighthouse 四项 ≥90，首屏 <2s |
+| **图片** | loremflickr 占位，标注"示意素材，待替换" |
+
+---
+
+## 2. 代码依据
+
+| 文件 | 职责 |
+|---|---|
+| `src/main/java/.../common/ApiResponse.java` | 后端统一响应格式 `{code, message, data, requestId, timestamp}`，code=200 成功 |
+| `docker-compose.yml` | 后端运行在 18080 端口，官网通过 Nginx 反代 `/api` |
+| `delivery-miniapp/common/api.js` | 现有前端请求封装风格参考（BASE_URL, getHeaders, apiGet/apiPost） |
+| `官网设计方案Prompt.txt` | 7 轮需求采集产物：商业目标、用户、内容、结构、功能、视觉、技术 |
+
+---
+
+## 3. 改动范围清单
+
+全部新建，`website/` 目录与现有后端 `src/` 同级。
+
+| 路径 | 增/删/改 | 摘要 |
+|------|----------|------|
+| `website/package.json` | 增 | Nuxt3 项目依赖 |
+| `website/nuxt.config.ts` | 增 | SSG、SEO、Tailwind、API 代理 |
+| `website/tailwind.config.ts` | 增 | 医疗蓝/健康绿/暖橙 色彩体系 |
+| `website/app.vue` | 增 | 根布局 |
+| `website/pages/index.vue` | 增 | 首页（12 段模块） |
+| `website/pages/solution.vue` | 增 | 解决方案页 |
+| `website/pages/capabilities.vue` | 增 | 核心能力页 |
+| `website/pages/scenarios.vue` | 增 | 应用场景页 |
+| `website/pages/service-loop.vue` | 增 | 服务闭环流程图页 |
+| `website/pages/security.vue` | 增 | 安全合规页 |
+| `website/pages/resources.vue` | 增 | 资源中心页 |
+| `website/pages/about.vue` | 增 | 关于我们页 |
+| `website/pages/contact.vue` | 增 | 联系我们页 |
+| `website/components/AppHeader.vue` | 增 | 顶部导航（Logo + 9 栏目 + 登录入口） |
+| `website/components/AppFooter.vue` | 增 | 页脚（栏目链接 + 版权 + ICP 备案） |
+| `website/components/HeroSection.vue` | 增 | Hero 首屏区块 |
+| `website/components/ServiceLoopFlow.vue` | 增 | 8 阶段交互式流程图 |
+| `website/components/CapabilityCard.vue` | 增 | 核心能力卡片 |
+| `website/components/TriEndDisplay.vue` | 增 | 三端协同展示 |
+| `website/components/ScenarioCard.vue` | 增 | 应用场景卡片 |
+| `website/components/DataDashboard.vue` | 增 | 数据看板动效 |
+| `website/components/SecurityGrid.vue` | 增 | 安全合规网格 |
+| `website/components/ValueMetrics.vue` | 增 | 建设价值指标 |
+| `website/components/DemoForm.vue` | 增 | 预约演示表单 |
+| `website/components/DownloadForm.vue` | 增 | 获取方案/白皮书表单 |
+| `website/components/ContactForm.vue` | 增 | 联系我们表单 |
+| `website/components/CtaSection.vue` | 增 | 底部 CTA 区块 |
+| `website/composables/useLeadForm.ts` | 增 | 表单提交封装（mock/API 切换） |
+| `website/composables/useScrollAnim.ts` | 增 | 滚动动效 composable |
+| `website/composables/useSeo.ts` | 增 | SEO meta 配置 |
+| `website/data/siteContent.ts` | 增 | 站点内容数据（文案/栏目/菜单） |
+| `website/data/solutions.ts` | 增 | 解决方案数据 |
+| `website/data/scenarios.ts` | 增 | 应用场景数据 |
+| `website/assets/css/main.css` | 增 | 全局样式 + CSS 变量 |
+| `website/public/robots.txt` | 增 | 爬虫配置 |
+| `website/server/api/lead.post.ts` | 增 | Nuxt server route（开发期 mock，生产反代） |
+
+---
+
+## 4. 方案概述
+
+### 4.1 架构
+
+```
+website/                          # 独立 Nuxt3 项目
+├── pages/                        # 9 个页面（基于文件路由）
+│   ├── index.vue                 # 首页（SSG）
+│   ├── solution.vue              # 解决方案
+│   ├── capabilities.vue          # 核心能力
+│   ├── scenarios.vue             # 应用场景
+│   ├── service-loop.vue          # 服务闭环
+│   ├── security.vue              # 安全合规
+│   ├── resources.vue             # 资源中心
+│   ├── about.vue                 # 关于我们
+│   └── contact.vue               # 联系我们
+├── components/                   # 16 个公共组件
+├── composables/                  # 3 个 composables
+├── data/                         # 站点内容数据
+├── server/api/                   # 开发期 mock（生产反代）
+├── nuxt.config.ts                # SSG + SEO + Tailwind
+└── tailwind.config.ts            # 医疗蓝/健康绿/暖橙
+```
+
+### 4.2 API 对接
+
+```
+开发期：
+  表单提交 → /api/lead → server/api/lead.post.ts (mock 返回 200)
+
+生产期（Nginx）：
+  /api/* → proxy_pass http://hss-app:8080/api/hss/*
+  表单提交到新后端端点 POST /api/hss/leads（待后端新增）
+  或复用现有 POST /api/hss/applications 作为线索入口（字段映射）
+```
+
+### 4.3 数据流
+
+```
+siteContent.ts (静态数据)
+  → pages/*.vue (渲染)
+  → components/*.vue (模块展示)
+
+用户交互（表单提交）
+  → composables/useLeadForm.ts (封装)
+  → server/api/lead.post.ts (mock) | /api/hss/leads (生产)
+```
+
+---
+
+## 5. 代码级修改说明
+
+### 5.1 项目初始化
+
+**文件**：`website/package.json`（新增）
+
+```json
+{
+  "name": "hss-website",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.12.0",
+    "nuxt": "^3.13.0",
+    "vue": "^3.5.0"
+  }
+}
+```
+
+**文件**：`website/nuxt.config.ts`（新增）
+
+```typescript
+export default defineNuxtConfig({
+  ssr: false, // SSG only
+  app: {
+    head: {
+      titleTemplate: '%s | 智慧医养居家上门服务平台',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: '面向政府、医院与养老机构的智慧医养居家上门服务闭环管理平台' }
+      ],
+      link: [
+        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }
+      ]
+    }
+  },
+  nitro: {
+    prerender: {
+      routes: ['/'],
+      crawlLinks: true
+    }
+  },
+  modules: ['@nuxtjs/tailwindcss'],
+  runtimeConfig: {
+    public: {
+      apiBase: process.env.API_BASE || 'http://localhost:18080/api/hss'
+    }
+  }
+})
+```
+
+### 5.2 Tailwind 配置
+
+**文件**：`website/tailwind.config.ts`（新增）
+
+```typescript
+export default {
+  theme: {
+    extend: {
+      colors: {
+        primary: { DEFAULT: '#155EEF', 50: '#EBF0FF', 100: '#D6E0FF', 500: '#155EEF', 700: '#0B4C8C', 900: '#062D5E' },
+        accent: { DEFAULT: '#20C997', 50: '#E6F9F5', 500: '#20C997', 700: '#18A999' },
+        cta: { DEFAULT: '#FF8A3D', 500: '#FF8A3D', 700: '#FF7A1A' },
+        surface: { DEFAULT: '#F5F9FF', white: '#FFFFFF' },
+        text: { primary: '#1F2937', secondary: '#6B7280' }
+      },
+      fontFamily: {
+        sans: ['"Noto Sans SC"', '"Source Han Sans"', '"Alibaba PuHuiTi"', 'system-ui', 'sans-serif'],
+        mono: ['Inter', 'system-ui', 'sans-serif']
+      }
+    }
+  }
+}
+```
+
+### 5.3 全局样式
+
+**文件**：`website/assets/css/main.css`（新增）
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --color-primary: #155EEF;
+    --color-accent: #20C997;
+    --color-cta: #FF8A3D;
+    --color-surface: #F5F9FF;
+    --color-text: #1F2937;
+    --color-text-secondary: #6B7280;
+  }
+
+  html { scroll-behavior: smooth; }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+}
+
+@layer components {
+  .section-container {
+    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
+  }
+  .section-title {
+    @apply text-3xl md:text-4xl font-bold text-text-primary text-center;
+  }
+  .section-subtitle {
+    @apply text-lg text-text-secondary text-center mt-4 max-w-2xl mx-auto;
+  }
+}
+```
+
+### 5.4 根布局
+
+**文件**：`website/app.vue`（新增）
+
+```vue
+<template>
+  <div class="min-h-screen bg-surface-white">
+    <AppHeader />
+    <main>
+      <NuxtPage />
+    </main>
+    <AppFooter />
+    <CtaSection />
+  </div>
+</template>
+```
+
+### 5.5 导航栏组件
+
+**文件**：`website/components/AppHeader.vue`（新增）
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+const mobileOpen = ref(false);
+const menus = [
+  { label: '首页', to: '/' },
+  { label: '解决方案', to: '/solution' },
+  { label: '核心能力', to: '/capabilities' },
+  { label: '应用场景', to: '/scenarios' },
+  { label: '服务闭环', to: '/service-loop' },
+  { label: '安全合规', to: '/security' },
+  { label: '资源中心', to: '/resources' },
+  { label: '关于我们', to: '/about' },
+  { label: '联系我们', to: '/contact' },
+];
+</script>
+
+<template>
+  <header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-gray-100">
+    <div class="section-container flex items-center justify-between h-16">
+      <!-- Logo: 临时文字 Logo -->
+      <NuxtLink to="/" class="flex items-center gap-2 text-primary-700 font-bold text-lg">
+        <span class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm">H</span>
+        智慧医养平台
+      </NuxtLink>
+
+      <!-- Desktop Nav -->
+      <nav class="hidden lg:flex items-center gap-1">
+        <NuxtLink v-for="m in menus" :key="m.to" :to="m.to"
+          class="px-3 py-2 rounded-lg text-sm text-text-secondary hover:text-primary hover:bg-primary-50 transition-colors">
+          {{ m.label }}
+        </NuxtLink>
+      </nav>
+
+      <!-- Right: Login + CTA -->
+      <div class="hidden lg:flex items-center gap-3">
+        <a href="/platform" class="text-sm text-text-secondary hover:text-primary transition-colors">平台登录</a>
+        <NuxtLink to="/contact"
+          class="px-4 py-2 bg-cta text-white rounded-lg text-sm font-medium hover:bg-cta-700 transition-colors">
+          预约演示
+        </NuxtLink>
+      </div>
+
+      <!-- Mobile toggle -->
+      <button @click="mobileOpen = !mobileOpen" class="lg:hidden p-2" aria-label="菜单">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            :d="mobileOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Mobile menu -->
+    <div v-if="mobileOpen" class="lg:hidden border-t bg-white">
+      <div class="section-container py-4 space-y-1">
+        <NuxtLink v-for="m in menus" :key="m.to" :to="m.to"
+          @click="mobileOpen = false"
+          class="block px-3 py-2 rounded-lg text-text-secondary hover:text-primary hover:bg-primary-50">
+          {{ m.label }}
+        </NuxtLink>
+        <div class="pt-3 border-t">
+          <NuxtLink to="/contact"
+            class="block w-full text-center px-4 py-3 bg-cta text-white rounded-lg font-medium">
+            预约演示
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+```
+
+### 5.6 首页
+
+**文件**：`website/pages/index.vue`（新增）
+
+当前逻辑：不存在。
+拟议改动：按 Prompt 第 12 段顺序实现首页模块。
+
+```vue
+<script setup lang="ts">
+import { useSeo } from '~/composables/useSeo';
+useSeo({
+  title: '首页',
+  description: '智慧医养居家上门服务闭环管理平台，覆盖申请、评估、方案、派单、执行、监管、验收、结算全流程'
+});
+</script>
+
+<template>
+  <!-- 1. Hero -->
+  <HeroSection />
+
+  <!-- 2. 行业痛点 -->
+  <section class="py-20 bg-surface">
+    <div class="section-container">
+      <h2 class="section-title">居家上门服务，为什么这么难管？</h2>
+      <p class="section-subtitle">申请流程乱、评估标准不一、派单靠经验、上门难监管、质量难追溯、结算不规范</p>
+      <div class="grid md:grid-cols-3 gap-8 mt-12">
+        <div v-for="p in painPoints" :key="p.title" class="bg-white rounded-2xl p-8 shadow-sm">
+          <h3 class="font-bold text-lg mb-3">{{ p.title }}</h3>
+          <p class="text-text-secondary text-sm">{{ p.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 3. 解决方案概述 -->
+  <section class="py-20 bg-white">
+    <div class="section-container">
+      <h2 class="section-title">一套平台，打通居家服务全流程</h2>
+      <p class="section-subtitle">从服务申请到结算归档，每个环节都可监管、可追溯、可评价</p>
+      <img src="https://loremflickr.com/1024/400/technology" alt="平台概览示意图（示意素材，待替换）"
+        class="mt-12 rounded-2xl shadow-lg w-full" loading="lazy" />
+    </div>
+  </section>
+
+  <!-- 4. 服务闭环流程 -->
+  <section class="py-20 bg-surface">
+    <div class="section-container">
+      <h2 class="section-title">完整服务闭环</h2>
+      <ServiceLoopFlow />
+    </div>
+  </section>
+
+  <!-- 5. 核心能力 -->
+  <section class="py-20 bg-white">
+    <div class="section-container">
+      <h2 class="section-title">八大核心能力</h2>
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
+        <CapabilityCard v-for="c in capabilities" :key="c.title" v-bind="c" />
+      </div>
+    </div>
+  </section>
+
+  <!-- 6. 三端协同 -->
+  <section class="py-20 bg-surface">
+    <div class="section-container">
+      <h2 class="section-title">三端协同，角色分明</h2>
+      <TriEndDisplay />
+    </div>
+  </section>
+
+  <!-- 7. 应用场景 -->
+  <section class="py-20 bg-white">
+    <div class="section-container">
+      <h2 class="section-title">覆盖五大应用场景</h2>
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
+        <ScenarioCard v-for="s in scenarios" :key="s.title" v-bind="s" />
+      </div>
+    </div>
+  </section>
+
+  <!-- 8. 数据监管 -->
+  <section class="py-20 bg-surface">
+    <div class="section-container">
+      <h2 class="section-title">实时监管，数据驱动</h2>
+      <DataDashboard />
+    </div>
+  </section>
+
+  <!-- 9. 安全合规 -->
+  <section class="py-20 bg-white">
+    <div class="section-container">
+      <h2 class="section-title">医疗级安全合规</h2>
+      <SecurityGrid />
+    </div>
+  </section>
+
+  <!-- 10. 建设价值 -->
+  <section class="py-20 bg-surface">
+    <div class="section-container">
+      <h2 class="section-title">平台建设价值</h2>
+      <ValueMetrics />
+    </div>
+  </section>
+
+  <!-- 11. 资源下载 -->
+  <section class="py-20 bg-white">
+    <div class="section-container text-center">
+      <h2 class="section-title">获取完整方案</h2>
+      <p class="section-subtitle">下载解决方案 PDF、白皮书和产品介绍资料</p>
+      <DownloadForm />
+    </div>
+  </section>
+
+  <!-- 12. 底部 CTA 由 app.vue 中的 CtaSection 统一提供 -->
+</template>
+
+<script lang="ts">
+const painPoints = [
+  { title: '申请受理难', desc: '多渠道申请分散，材料收集靠纸质，资格校验靠人工，效率低且容易遗漏。' },
+  { title: '派单调度难', desc: '依赖人工经验派单，不考虑资质、区域、负载匹配，冲突和超时频发。' },
+  { title: '过程监管难', desc: '服务过程不可见，GPS签到、执行记录、证据链缺失，质量无法保证。' },
+];
+const capabilities = [
+  { icon: '📋', title: '需求受理', desc: '多渠道统一接入，自动校验材料/资格/重复申请' },
+  { icon: '🩺', title: '能力评估', desc: '上门评估、GPS签到、护理等级与风险评估' },
+  { icon: '📝', title: '方案制定', desc: '评估驱动、费用透明、签署版本化管理' },
+  { icon: '🚀', title: '智能派单', desc: '硬约束过滤+软约束评分，推荐Top5并解释' },
+  { icon: '✅', title: '上门执行', desc: 'GPS签到、项目级执行记录、证据链留存' },
+  { icon: '👁️', title: '过程监管', desc: '抽查、违规、整改、审计全流程可追溯' },
+  { icon: '⭐', title: '验收评价', desc: '星级评分、标签评价、验收拒绝可重服' },
+  { icon: '💰', title: '结算归档', desc: '方案价→执行→验收→支付→归档全链路' },
+];
+const scenarios = [
+  { title: '政府监管', desc: '为民政/卫健部门提供居家养老服务全流程监管能力', icon: '🏛️' },
+  { title: '医院延续护理', desc: '院后居家照护服务延伸，提升连续照护能力', icon: '🏥' },
+  { title: '养老机构', desc: '规范化派单、服务执行、质量评价和人员管理', icon: '🏠' },
+  { title: '社区服务中心', desc: '社区居家照护派单、上门服务和数据上报', icon: '🏘️' },
+  { title: '长护险管理', desc: '长护险服务过程监管、费用结算和合规审计', icon: '🛡️' },
+];
+</script>
+```
+
+### 5.7 服务闭环流程图
+
+**文件**：`website/components/ServiceLoopFlow.vue`（新增）
+
+```vue
+<script setup lang="ts">
+import { useScrollAnim } from '~/composables/useScrollAnim';
+const steps = [
+  { num: '01', title: '需求受理', desc: '多渠道统一接入\n自动校验与审核', color: 'bg-primary' },
+  { num: '02', title: '能力评估', desc: '上门评估定级\nGPS签到+拍照', color: 'bg-blue-400' },
+  { num: '03', title: '方案制定', desc: '个性化服务方案\n费用透明计算', color: 'bg-accent' },
+  { num: '04', title: '智能派单', desc: '算法匹配推荐\n人工确认兜底', color: 'bg-teal-400' },
+  { num: '05', title: '上门执行', desc: 'GPS签到校验\n项目级执行记录', color: 'bg-orange-400' },
+  { num: '06', title: '过程监管', desc: '抽查违规整改\n审计日志追溯', color: 'bg-purple-400' },
+  { num: '07', title: '验收评价', desc: '星级+标签评价\n评分影响后续派单', color: 'bg-pink-400' },
+  { num: '08', title: '结算归档', desc: '自动汇总结算\n电子台账归档', color: 'bg-cta' },
+];
+
+const { observe } = useScrollAnim();
+onMounted(() => {
+  document.querySelectorAll('.flow-step').forEach((el, i) => {
+    observe(el, { delay: i * 100, class: 'flow-visible' });
+  });
+});
+</script>
+
+<template>
+  <div class="relative">
+    <!-- 连线 -->
+    <div class="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gray-200 -translate-y-1/2 z-0" />
+    <!-- 步骤节点 -->
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 relative z-10">
+      <div v-for="(s, i) in steps" :key="i"
+        class="flow-step bg-white rounded-2xl p-6 text-center shadow-sm opacity-0 translate-y-8 transition-all duration-500"
+        :class="s.color.replace('bg-', 'hover:shadow-')">
+        <span :class="[s.color, 'text-white w-10 h-10 rounded-full inline-flex items-center justify-center font-bold text-sm mb-3']">
+          {{ s.num }}
+        </span>
+        <h4 class="font-bold text-sm mb-1">{{ s.title }}</h4>
+        <p class="text-xs text-text-secondary whitespace-pre-line">{{ s.desc }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.flow-visible { opacity: 1; transform: translateY(0); }
+</style>
+```
+
+### 5.8 公共组件速览
+
+**HeroSection.vue**（新增）— 首屏：左文右图，一句话定位 + 价值说明 + 双 CTA + 组合视觉
+**CapabilityCard.vue**（新增）— 图标 + 标题 + 描述，hover 上浮阴影
+**TriEndDisplay.vue**（新增）— 三列卡片联动：家属端 / delivery 端 / 管理监管端
+**ScenarioCard.vue**（新增）— 场景图标 + 标题 + 描述，可点击跳转
+**DataDashboard.vue**（新增）— 数字跳动 (countUp) + 图表渐入 mock
+**SecurityGrid.vue**（新增）— 权限/审计/隐私/授权/追溯 网格展示
+**ValueMetrics.vue**（新增）— 效率/质量/监管/结算 四指标 + 数据
+**AppFooter.vue**（新增）— 四列链接 + Logo + ICP 备案号
+**CtaSection.vue**（新增）— 全宽蓝底 + "立即预约演示" 主按钮 + "获取方案" 副按钮
+
+### 5.9 表单 Composable
+
+**文件**：`website/composables/useLeadForm.ts`（新增）
+
+```typescript
+import { ref } from 'vue';
+
+interface LeadForm {
+  name: string;
+  orgName: string;
+  phone: string;
+  type: 'demo' | 'download' | 'contact';
+  extra?: Record<string, string>;
+}
+
+export function useLeadForm(type: LeadForm['type']) {
+  const loading = ref(false);
+  const success = ref(false);
+  const error = ref('');
+  const form = ref<LeadForm>({ name: '', orgName: '', phone: '', type });
+
+  async function submit() {
+    loading.value = true; error.value = '';
+    try {
+      const config = useRuntimeConfig();
+      const res = await $fetch<{ code: number; message: string }>('/api/lead', {
+        method: 'POST',
+        body: { ...form.value, timestamp: Date.now() }
+      });
+      if (res.code === 200) {
+        success.value = true;
+      } else {
+        error.value = res.message || '提交失败，请稍后重试';
+      }
+    } catch (e: any) {
+      error.value = e?.message || '网络错误，请稍后重试';
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function reset() { success.value = false; error.value = ''; }
+
+  return { form, loading, success, error, submit, reset };
+}
+```
+
+### 5.10 Mock API（开发期）
+
+**文件**：`website/server/api/lead.post.ts`（新增）
+
+```typescript
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event);
+  // 开发期 mock：直接返回成功
+  console.log('[mock] lead received:', body);
+  return { code: 200, message: 'success', data: { id: Date.now() }, requestId: 'mock-' + Date.now(), timestamp: Date.now() };
+});
+```
+
+---
+
+## 6. 截图与代码对照
+
+本需求无用户提供的界面截图。以下为设计方案 Prompt 中定义的模块与代码映射：
+
+| 设计 Prompt 模块 | 对应组件 | 关键交互 |
+|---|---|---|
+| Hero 首屏（一句话定位+CTA+视觉） | `HeroSection.vue` | 静态展示，CTA 跳转 /contact |
+| 服务闭环流程图（8 阶段） | `ServiceLoopFlow.vue` | IntersectionObserver 逐步点亮 |
+| 核心能力卡片（8 张） | `CapabilityCard.vue` | hover 上浮 + 阴影 |
+| 三端协同展示 | `TriEndDisplay.vue` | 三列卡片联动 |
+| 应用场景卡片 | `ScenarioCard.vue` | 可点击跳转场景详情 |
+| 数据看板 | `DataDashboard.vue` | 数字跳动(countUp) + 渐入 |
+| 安全合规网格 | `SecurityGrid.vue` | 图标+说明网格 |
+| 预约演示表单 | `DemoForm.vue` | useLeadForm('demo')，6 字段 |
+| 获取方案表单 | `DownloadForm.vue` | useLeadForm('download')，4 字段 |
+| 联系我们表单 | `ContactForm.vue` | useLeadForm('contact')，5 字段 |
+
+---
+
+## 7. 类型、接口与 Mock
+
+### 7.1 后端需新增接口
+
+当前后端 84 个接口中无表单/线索相关端点。需新增：
+
+```java
+// POST /api/hss/leads — 接收官网表单提交
+@PostMapping("/leads")
+@Idempotent(prefix = "lead:submit")
+public ApiResponse<Map<String, Object>> submitLead(@RequestBody LeadRequest req) {
+    // 存储表单提交记录到 hss_leads 表（或复用现有通知/审计表记录）
+}
+```
+
+若第一版不新增后端端点，官网表单可：
+- 开发期：用 `server/api/lead.post.ts` mock
+- 过渡期：复用 `POST /api/hss/applications` 作为线索入口（字段映射）
+- 正式期：新增 `POST /api/hss/leads`
+
+### 7.2 响应格式对齐
+
+后端 `ApiResponse`：`{code, message, data, requestId, timestamp}`
+前端 `useLeadForm` 已对齐此格式，检查 `res.code === 200`。
+
+---
+
+## 8. 自测与回归
+
+### 8.1 页面可达性验证
+- [ ] 首页 `/` — 12 段模块完整渲染
+- [ ] 解决方案 `/solution` — 内容卡片 + CTA
+- [ ] 核心能力 `/capabilities` — 8 张卡片 + 详情
+- [ ] 应用场景 `/scenarios` — 5 场景
+- [ ] 服务闭环 `/service-loop` — 8 节点流程图
+- [ ] 安全合规 `/security` — 网格展示
+- [ ] 资源中心 `/resources` — 下载卡片 + 表单
+- [ ] 关于我们 `/about` — 团队/愿景
+- [ ] 联系我们 `/contact` — 完整表单
+
+### 8.2 响应式验证
+- [ ] 桌面 1440px+：全模块正常
+- [ ] 平板 768px：网格变 2 列，流程图竖排
+- [ ] 手机 375px：流程变纵向步骤条，CTA 固定底部
+
+### 8.3 性能验证
+- [ ] `npm run generate` 成功产出静态文件
+- [ ] 首屏 < 2s（空缓存）
+- [ ] Lighthouse ≥ 90（Performance/Accessibility/SEO/Best Practices）
+
+### 8.4 可访问性验证
+- [ ] Tab 键可遍历导航和表单
+- [ ] 表单字段有 label + 错误提示
+- [ ] 颜色对比度满足 AA
+- [ ] `prefers-reduced-motion` 关闭动效
+
+### 8.5 SEO 验证
+- [ ] 每页有独立 title / description
+- [ ] 生成 sitemap.xml / robots.txt
+- [ ] 百度搜索关键词可检索到页面
+
+---
+
+## 9. 短 Prompt
+
+```txt
+在 hss-home-service/website/ 下新建 Nuxt3 项目。
+技术栈：Vue3 + Nuxt3 + Tailwind CSS。不引入 UI 组件库。
+渲染模式：SSG/静态预渲染。不做 SSR、暗色模式、i18n。
+动效：CSS transition/animation + IntersectionObserver，禁用 GSAP/3D。
+表单：用 composables/useLeadForm.ts 封装，开发期 mock (/api/lead)，正式切 /api/hss/leads。
+设计 Token：主色 #155EEF、辅助 #20C997、CTA #FF8A3D、背景 #F5F9FF。
+需交付 9 个页面 + 16 个公共组件，响应式，Lighthouse ≥90，WCAG 2.2 AA。
+具体方案见 IMPLEMENTATION.md，严格按此执行。
+```