SmartElderlyCare/src/views/Whitepaper.vue

<template>
  <div class="min-h-screen bg-slate-50">
    <!-- Navigation Bar -->
    <nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16 items-center">
          <div class="flex items-center space-x-3 cursor-pointer" @click="router.push('/')">
            <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">智</div>
            <span class="text-xl font-black text-slate-900 tracking-tight">智护链 <span class="text-blue-600">Technical Whitepaper</span></span>
          </div>
          <button @click="router.push('/')" class="text-sm font-bold text-slate-500 hover:text-blue-600 transition-colors">返回首页</button>
        </div>
      </div>
    </nav>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
        
        <!-- Sidebar Navigation -->
        <div class="hidden lg:block lg:col-span-1">
          <div class="sticky top-28 space-y-1">
            <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4 px-3">目录</h3>
            <a v-for="section in sections" :key="section.id" :href="'#' + section.id"
               class="block px-3 py-2 text-sm font-bold rounded-lg transition-all"
               :class="activeSection === section.id ? 'bg-blue-50 text-blue-600' : 'text-slate-600 hover:bg-slate-100'">
              {{ section.title }}
            </a>
          </div>
        </div>

        <!-- Main Content -->
        <div class="lg:col-span-3 space-y-24 pb-24">
          
          <!-- Introduction -->
          <section id="abstract" class="scroll-mt-24">
            <h1 class="text-4xl font-black text-slate-900 mb-6">1. 摘要 (Abstract)</h1>
            <div class="prose prose-slate prose-lg max-w-none text-slate-600 leading-relaxed">
              <p>
                随着全球人口老龄化的加剧，传统的养老服务模式面临着信任成本高、隐私保护难、资源分配不均等严峻挑战。
                <strong>智护链 (SmartCare Chain)</strong> 是一套基于区块链、边缘计算与隐私计算技术的下一代智慧养老协作网络。
              </p>
              <p>
                本白皮书详细阐述了智护链的技术架构、核心算法及其在实际养老场景中的应用逻辑，旨在构建一个“以人为中心，以行为为存证”的可信养老生态。
              </p>
            </div>
          </section>

          <!-- Architecture -->
          <section id="architecture" class="scroll-mt-24">
            <h2 class="text-3xl font-black text-slate-900 mb-8 flex items-center">
              <span class="w-8 h-8 bg-slate-900 text-white rounded-lg flex items-center justify-center mr-4 text-sm">2</span>
              技术架构 (Technical Architecture)
            </h2>
            <div class="bg-white rounded-3xl border border-slate-200 p-8 shadow-sm">
              <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div v-for="layer in architectureLayers" :key="layer.name" class="p-6 rounded-2xl bg-slate-50 border border-slate-100">
                  <div class="text-blue-600 font-black mb-2">{{ layer.layer }}</div>
                  <h4 class="text-lg font-bold text-slate-900 mb-4">{{ layer.name }}</h4>
                  <ul class="space-y-2 text-sm text-slate-600 font-medium">
                    <li v-for="item in layer.items" :key="item" class="flex items-center">
                      <span class="w-1.5 h-1.5 bg-blue-400 rounded-full mr-2"></span>
                      {{ item }}
                    </li>
                  </ul>
                </div>
              </div>
              <div class="mt-8 p-6 bg-blue-600 rounded-2xl text-white">
                <h4 class="font-bold mb-2">架构核心逻辑：</h4>
                <p class="text-sm opacity-90 leading-relaxed">
                  系统采用“云-边-端”协同架构。前端采集设备（端）进行数据脱敏，边缘网关（边）执行实时AI识别与决策，云端区块链（云）进行确权与审计。
                </p>
              </div>
            </div>
          </section>

          <!-- Blockchain -->
          <section id="blockchain" class="scroll-mt-24">
            <h2 class="text-3xl font-black text-slate-900 mb-8 flex items-center">
              <span class="w-8 h-8 bg-slate-900 text-white rounded-lg flex items-center justify-center mr-4 text-sm">3</span>
              区块链核心 (Blockchain Core)
            </h2>
            <div class="space-y-6">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                  <h4 class="font-black text-slate-900 mb-4 flex items-center">
                    <span class="mr-2">⛓️</span> 共识机制与底层
                  </h4>
                  <p class="text-sm text-slate-600 leading-relaxed">
                    智护链底层基于 <strong>FISCO BCOS</strong> 企业级协作平台，采用 PBFT (Practical Byzantine Fault Tolerance) 共识算法，
                    实现秒级区块确认，确保养老记录的高可用性与强一致性。
                  </p>
                </div>
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                  <h4 class="font-black text-slate-900 mb-4 flex items-center">
                    <span class="mr-2">📜</span> 智能合约治理
                  </h4>
                  <p class="text-sm text-slate-600 leading-relaxed">
                    所有业务逻辑通过 Solidity 编写的智能合约执行。包括：身份认证 (DID)、服务质量对赌 (SLA)、时间银行通证分发等，
                    实现“法典即代码 (Code is Law)”。
                  </p>
                </div>
              </div>
              <div class="bg-slate-900 rounded-2xl p-8 text-white font-mono text-sm overflow-hidden relative">
                <div class="absolute top-0 right-0 p-4 opacity-10 text-6xl">{}</div>
                <div class="text-blue-400 mb-4">// 核心合约：养老服务存证</div>
                <div class="space-y-1 opacity-80">
                  <div><span class="text-purple-400">contract</span> <span class="text-yellow-400">CareRecord</span> {</div>
                  <div class="pl-4"><span class="text-purple-400">struct</span> <span class="text-yellow-400">Record</span> {</div>
                  <div class="pl-8">address elder;</div>
                  <div class="pl-8">uint256 timestamp;</div>
                  <div class="pl-8">bytes32 dataHash; <span class="text-slate-500">// 加密后的护理数据哈希</span></div>
                  <div class="pl-8">uint8 level; <span class="text-slate-500">// 紧急程度 L1-L4</span></div>
                  <div class="pl-4">}</div>
                  <div class="pl-4"><span class="text-purple-400">mapping</span>(uint256 => Record) <span class="text-purple-400">public</span> records;</div>
                  <div>}</div>
                </div>
              </div>
            </div>
          </section>

          <!-- Privacy -->
          <section id="privacy" class="scroll-mt-24">
            <h2 class="text-3xl font-black text-slate-900 mb-8 flex items-center">
              <span class="w-8 h-8 bg-slate-900 text-white rounded-lg flex items-center justify-center mr-4 text-sm">4</span>
              隐私计算 (Privacy Computing)
            </h2>
            <div class="prose prose-slate prose-lg max-w-none text-slate-600">
              <p>
                智护链解决的核心痛点是“既要数据协同，又要隐私安全”。我们引入了以下关键技术：
              </p>
              <ul class="list-none p-0 grid grid-cols-1 md:grid-cols-2 gap-4">
                <li class="bg-white p-6 rounded-2xl border border-slate-200">
                  <strong class="text-slate-900 block mb-2">1. 零知识证明 (ZKP)</strong>
                  家属在不泄露老人具体健康指标的前提下，通过 ZKP 向保险机构证明老人符合理赔条件。
                </li>
                <li class="bg-white p-6 rounded-2xl border border-slate-200">
                  <strong class="text-slate-900 block mb-2">2. 可信执行环境 (TEE)</strong>
                  敏感的 AI 识别逻辑运行在边缘侧的硬件安全隔离区，原始视频流不离开设备，仅输出识别结果。
                </li>
              </ul>
            </div>
          </section>

          <!-- Edge AI -->
          <section id="edge-ai" class="scroll-mt-24">
            <h2 class="text-3xl font-black text-slate-900 mb-8 flex items-center">
              <span class="w-8 h-8 bg-slate-900 text-white rounded-lg flex items-center justify-center mr-4 text-sm">5</span>
              边缘 AI 决策 (Edge AI Logic)
            </h2>
            <div class="bg-slate-50 rounded-3xl p-8 border border-slate-200">
              <h4 class="font-bold text-slate-900 mb-6">告警分级决策模型 (L1-L4)</h4>
              <div class="space-y-4">
                <div v-for="level in aiLevels" :key="level.id" class="flex items-start space-x-6 p-4 rounded-xl bg-white border border-slate-100 transition-all hover:shadow-md">
                  <div class="w-12 h-12 rounded-lg flex items-center justify-center font-black shrink-0" :class="level.color">
                    {{ level.id }}
                  </div>
                  <div>
                    <div class="font-bold text-slate-900">{{ level.title }}</div>
                    <p class="text-sm text-slate-500 mt-1">{{ level.desc }}</p>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <!-- Tokenomics -->
          <section id="tokenomics" class="scroll-mt-24">
            <h2 class="text-3xl font-black text-slate-900 mb-8 flex items-center">
              <span class="w-8 h-8 bg-slate-900 text-white rounded-lg flex items-center justify-center mr-4 text-sm">6</span>
              通证经济：时间银行 (Time Bank)
            </h2>
            <div class="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-3xl p-10 text-white shadow-xl relative overflow-hidden">
              <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32 blur-3xl"></div>
              <div class="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div>
                  <h4 class="text-2xl font-black mb-6">双通证治理模型</h4>
                  <div class="space-y-6">
                    <div class="flex items-start space-x-4">
                      <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center text-xl shrink-0">🪙</div>
                      <div>
                        <div class="font-bold">智护通证 (Care Token)</div>
                        <p class="text-sm opacity-80 mt-1">激励层。用户通过提供互助服务获得，可兑换专业护理服务或耗材。</p>
                      </div>
                    </div>
                    <div class="flex items-start space-x-4">
                      <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center text-xl shrink-0">⚖️</div>
                      <div>
                        <div class="font-bold">治理积分 (Gov Point)</div>
                        <p class="text-sm opacity-80 mt-1">权益层。基于信用评价体系，影响节点在协作网络中的决策权重。</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20">
                  <div class="text-center mb-6">
                    <div class="text-sm opacity-60 uppercase tracking-widest">通证循环路径</div>
                  </div>
                  <div class="space-y-4">
                    <div class="flex justify-between items-center bg-white/5 p-3 rounded-lg border border-white/10">
                      <span>提供互助服务</span>
                      <span class="text-green-300 font-bold">+Token</span>
                    </div>
                    <div class="flex justify-center py-2">⬇️</div>
                    <div class="flex justify-between items-center bg-white/5 p-3 rounded-lg border border-white/10">
                      <span>链上共识确认</span>
                      <span class="text-blue-300 font-bold">Audit</span>
                    </div>
                    <div class="flex justify-center py-2">⬇️</div>
                    <div class="flex justify-between items-center bg-white/5 p-3 rounded-lg border border-white/10">
                      <span>兑换专业服务</span>
                      <span class="text-orange-300 font-bold">-Token</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <!-- Conclusion -->
          <section id="conclusion" class="scroll-mt-24">
            <h2 class="text-3xl font-black text-slate-900 mb-8 flex items-center">
              <span class="w-8 h-8 bg-slate-900 text-white rounded-lg flex items-center justify-center mr-4 text-sm">7</span>
              未来展望 (Future Roadmap)
            </h2>
            <div class="prose prose-slate prose-lg max-w-none text-slate-600">
              <p>
                智护链不仅是一个技术平台，更是一个社会化治理实验。未来我们将持续探索：
              </p>
              <ul>
                <li><strong>多模态大模型集成</strong>：实现更自然的老人情感陪护。</li>
                <li><strong>跨链互操作性</strong>：与医疗机构、社区民政系统的区块链实现底层互通。</li>
                <li><strong>硬件标准开源</strong>：联合更多硬件厂商共同构建可信养老硬件标准。</li>
              </ul>
            </div>
          </section>

        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class="bg-slate-900 text-slate-400 py-12">
      <div class="max-w-7xl mx-auto px-4 text-center">
        <div class="text-white font-black text-xl mb-4">SmartCare Chain</div>
        <p class="text-sm">© 2026 智护链技术委员会. All Rights Reserved.</p>
        <div class="mt-6 flex justify-center space-x-6 text-xs font-bold uppercase tracking-widest">
          <a href="#" class="hover:text-white transition-colors">隐私政策</a>
          <a href="#" class="hover:text-white transition-colors">服务条款</a>
          <a href="#" class="hover:text-white transition-colors">开源协议</a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeSection = ref('abstract')

const sections = [
  { id: 'abstract', title: '1. 摘要' },
  { id: 'architecture', title: '2. 技术架构' },
  { id: 'blockchain', title: '3. 区块链核心' },
  { id: 'privacy', title: '4. 隐私计算' },
  { id: 'edge-ai', title: '5. 边缘AI决策' },
  { id: 'tokenomics', title: '6. 通证经济' },
  { id: 'conclusion', title: '7. 未来展望' },
]

const architectureLayers = [
  { 
    layer: 'L1', 
    name: '感知层 (Perception)', 
    items: ['多模态视觉采集', '毫米波雷达感应', '环境传感器网格', '穿戴式生理监测'] 
  },
  { 
    layer: 'L2', 
    name: '计算层 (Computing)', 
    items: ['边缘计算节点 (Edge)', 'Pose Estimation 算法', '行为意图识别', '隐私计算 TEE 隔离'] 
  },
  { 
    layer: 'L3', 
    name: '信任层 (Trust)', 
    items: ['FISCO BCOS 底层链', '智能合约业务逻辑', '跨机构分布式账本', 'DID 身份体系'] 
  }
]

const aiLevels = [
  { id: 'L1', title: '日常监测', desc: '正常行为识别，心跳、步态数据定期脱敏上链。', color: 'bg-blue-100 text-blue-600' },
  { id: 'L2', title: '异常趋势', desc: '识别久坐、食欲减退等负面趋势，通过智能合约触发家属提醒。', color: 'bg-yellow-100 text-yellow-600' },
  { id: 'L3', title: '即时告警', desc: '识别剧烈咳嗽、迷路等行为，立即激活就近机器人前往。', color: 'bg-orange-100 text-orange-600' },
  { id: 'L4', title: '紧急响应', desc: '确认跌倒、昏迷。系统自动锁定链上证据，调度救护资源与护理端。', color: 'bg-red-100 text-red-600' },
]

const handleScroll = () => {
  const sectionElements = sections.map(s => document.getElementById(s.id))
  const scrollPosition = window.scrollY + 100

  for (let i = sectionElements.length - 1; i >= 0; i--) {
    const el = sectionElements[i]
    if (el && el.offsetTop <= scrollPosition) {
      activeSection.value = sections[i].id
      break
    }
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.prose blockquote {
  border-left-color: #3b82f6;
  font-style: normal;
  font-weight: 500;
  background: #eff6ff;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
}
html {
  scroll-behavior: smooth;
}
</style>