Home-Care/hss-home-service/website/IMPLEMENTATION.md

# 智慧医养居家上门服务平台 — 官网前端实现方案

> 基于：`官网设计方案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，严格按此执行。
```