test-repo/docs/.vitepress/theme/components/appendix/data/DataModelsDemo.vue

<template>
  <div class="data-models-demo">
    <div class="demo-header">
      <span class="icon">🗂️</span>
      <span class="title">数据模型全景</span>
      <span class="subtitle">四种主流数据模型对比</span>
    </div>

    <div class="intro-text">
      不是所有数据都适合塞进<span class="highlight">关系型表格</span>。社交网络的人脉关系、IoT 设备的时间流水、AI 搜索的语义向量——不同的数据形态需要不同的<span class="highlight">建模方式</span>。
    </div>

    <div v-if="!props.tab" class="tabs">
      <button
        v-for="t in tabs"
        :key="t.id"
        :class="['tab', { active: active === t.id }]"
        @click="active = t.id"
      >
        {{ t.name }}
      </button>
    </div>

    <!-- 文档模型 -->
    <div v-if="active === 'document'" class="model-panel">
      <div class="panel-header">
        <span class="panel-icon">📄</span>
        <span class="panel-title">文档模型 (Document)</span>
        <span class="panel-badge">MongoDB / DynamoDB</span>
      </div>
      <div class="panel-desc">数据以 JSON 文档存储，每条记录可以有不同的字段结构，天然适合<strong>嵌套、半结构化</strong>数据。</div>
      <div class="code-block">
        <pre><code>{
  "_id": "user_1001",
  "name": "张三",
  "tags": ["VIP", "活跃"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  },
  "orders": [
    { "id": "o1", "amount": 299 },
    { "id": "o2", "amount": 599 }
  ]
}</code></pre>
      </div>
      <div class="traits">
        <div class="trait good">无需预定义 Schema，字段随时扩展</div>
        <div class="trait good">嵌套数据一次读取，无需 JOIN</div>
        <div class="trait bad">跨文档关联查询较弱</div>
      </div>
      <div class="use-cases">
        <span class="use-label">典型场景：</span>
        <span class="use-tag">用户画像</span>
        <span class="use-tag">CMS 内容</span>
        <span class="use-tag">商品目录</span>
        <span class="use-tag">配置中心</span>
      </div>
    </div>

    <!-- 图模型 -->
    <div v-if="active === 'graph'" class="model-panel">
      <div class="panel-header">
        <span class="panel-icon">🕸️</span>
        <span class="panel-title">图模型 (Graph)</span>
        <span class="panel-badge">Neo4j / Neptune</span>
      </div>
      <div class="panel-desc">数据由<strong>节点</strong>和<strong>边</strong>组成，专门表达实体之间的复杂关系网络。</div>
      <div class="graph-viz">
        <div class="graph-nodes">
          <div class="g-node user" style="grid-area: a">张三</div>
          <div class="g-node user" style="grid-area: b">李四</div>
          <div class="g-node user" style="grid-area: c">王五</div>
          <div class="g-node item" style="grid-area: d">iPhone</div>
        </div>
        <div class="graph-edges">
          <div class="g-edge">张三 —<span class="edge-label">关注</span>→ 李四</div>
          <div class="g-edge">李四 —<span class="edge-label">关注</span>→ 王五</div>
          <div class="g-edge">张三 —<span class="edge-label">购买</span>→ iPhone</div>
          <div class="g-edge">王五 —<span class="edge-label">购买</span>→ iPhone</div>
        </div>
      </div>
      <div class="traits">
        <div class="trait good">多跳关系查询极快（朋友的朋友）</div>
        <div class="trait good">关系本身可以携带属性</div>
        <div class="trait bad">不擅长大规模聚合统计</div>
      </div>
      <div class="use-cases">
        <span class="use-label">典型场景：</span>
        <span class="use-tag">社交网络</span>
        <span class="use-tag">推荐系统</span>
        <span class="use-tag">知识图谱</span>
        <span class="use-tag">欺诈检测</span>
      </div>
    </div>

    <!-- 时序模型 -->
    <div v-if="active === 'timeseries'" class="model-panel">
      <div class="panel-header">
        <span class="panel-icon">📈</span>
        <span class="panel-title">时序模型 (Time-Series)</span>
        <span class="panel-badge">InfluxDB / TimescaleDB</span>
      </div>
      <div class="panel-desc">以<strong>时间戳</strong>为主轴，针对按时间顺序写入、按时间范围查询的场景深度优化。</div>
      <div class="ts-table">
        <div class="ts-row ts-header">
          <span>timestamp</span>
          <span>device</span>
          <span>cpu_usage</span>
          <span>memory</span>
        </div>
        <div v-for="row in tsData" :key="row.ts" class="ts-row">
          <span class="ts-time">{{ row.ts }}</span>
          <span>{{ row.device }}</span>
          <span :class="row.cpu > 80 ? 'val-high' : 'val-normal'">{{ row.cpu }}%</span>
          <span>{{ row.mem }}GB</span>
        </div>
      </div>
      <div class="traits">
        <div class="trait good">写入吞吐极高（百万点/秒）</div>
        <div class="trait good">内置降采样、自动过期策略</div>
        <div class="trait bad">不支持复杂关联查询</div>
      </div>
      <div class="use-cases">
        <span class="use-label">典型场景：</span>
        <span class="use-tag">服务器监控</span>
        <span class="use-tag">IoT 传感器</span>
        <span class="use-tag">金融行情</span>
        <span class="use-tag">日志分析</span>
      </div>
    </div>

    <!-- 向量模型 -->
    <div v-if="active === 'vector'" class="model-panel">
      <div class="panel-header">
        <span class="panel-icon">🧠</span>
        <span class="panel-title">向量模型 (Vector)</span>
        <span class="panel-badge">Pinecone / Milvus / pgvector</span>
      </div>
      <div class="panel-desc">将文本、图片等非结构化数据转为<strong>高维向量</strong>，通过计算向量距离实现语义相似度搜索。</div>
      <div class="vector-viz">
        <div class="vec-query">
          <div class="vec-label">查询："好吃的日料"</div>
          <div class="vec-arrow">→ Embedding →</div>
          <div class="vec-nums">[0.82, 0.15, 0.91, ...]</div>
        </div>
        <div class="vec-results">
          <div class="vec-result" v-for="r in vecResults" :key="r.text">
            <span class="vec-score" :style="{ opacity: r.score }">{{ (r.score * 100).toFixed(0) }}%</span>
            <span class="vec-text">{{ r.text }}</span>
          </div>
        </div>
      </div>
      <div class="traits">
        <div class="trait good">语义搜索，理解"意思"而非关键词</div>
        <div class="trait good">支持多模态（文本、图片、音频）</div>
        <div class="trait bad">向量生成依赖 Embedding 模型质量</div>
      </div>
      <div class="use-cases">
        <span class="use-label">典型场景：</span>
        <span class="use-tag">RAG 检索增强</span>
        <span class="use-tag">以图搜图</span>
        <span class="use-tag">语义搜索</span>
        <span class="use-tag">推荐系统</span>
      </div>
    </div>

    <div class="info-box">
      <span class="icon">💡</span>
      <strong>选型原则：</strong>没有万能数据库。关系型（MySQL/PostgreSQL）仍是大多数业务的基石，但当数据形态明确偏向文档、图、时序或向量时，选择专用模型能获得<span class="highlight">数量级的性能提升</span>。
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({ tab: { type: String, default: '' } })
const active = ref(props.tab || 'document')

const tabs = [
  { id: 'document', name: '📄 文档' },
  { id: 'graph', name: '🕸️ 图' },
  { id: 'timeseries', name: '📈 时序' },
  { id: 'vector', name: '🧠 向量' }
]

const tsData = [
  { ts: '10:00:01', device: 'server-01', cpu: 45, mem: 12.3 },
  { ts: '10:00:02', device: 'server-01', cpu: 67, mem: 12.5 },
  { ts: '10:00:03', device: 'server-01', cpu: 92, mem: 14.1 },
  { ts: '10:00:04', device: 'server-02', cpu: 23, mem: 8.2 },
  { ts: '10:00:05', device: 'server-02', cpu: 85, mem: 9.7 }
]

const vecResults = [
  { text: '银座寿司之神 — 顶级 omakase', score: 0.96 },
  { text: '新宿拉面一条街 — 浓厚豚骨汤底', score: 0.82 },
  { text: '居酒屋深夜食堂 — 烤串与清酒', score: 0.75 },
  { text: '意大利手工披萨 — 窑烤玛格丽特', score: 0.31 }
]
</script>