Situation-Awareness-Platform-Frontend/src/views/Jyh/Pricing/component/PricingComparisonTable.vue

<template>
  <div class="comparison-table-container">
    <h2 class="main-title">比较不同套餐的功能</h2>

    <div class="table-scroll-wrapper">
      <table class="features-table">
        <thead>
        <tr>
          <th class="feature-col-header"></th> <th v-for="plan in plans" :key="plan.name" class="plan-col-header">
          <div class="header-content">
            <span class="plan-name">{{ plan.name }}</span>
            <a href="#" class="get-plan-btn">
              {{ plan.btnText }}
              <span class="arrow">↗</span>
            </a>
          </div>
        </th>
        </tr>
        </thead>

        <tbody>

        <template v-for="(section, sIndex) in comparisonData" :key="sIndex">
          <tr
            class="category-row"
            v-if="section.category"
          >
            <td colspan="6" class="category-title">{{ section.category }}</td>
          </tr>

          <tr v-for="(row, rIndex) in section.featureRows" :key="rIndex" class="data-row">
            <td class="feature-name">{{ row.name }}</td>
            <td v-for="(value, vIndex) in row.values" :key="vIndex" class="feature-value">
              <span v-if="value === 'check'" class="check-icon">✓</span>
              <span v-else-if="value === 'dash'" class="dash-icon">—</span>
              <span v-else class="value-text">{{ value }}</span>
            </td>
          </tr>
        </template>

        <tr class="category-row">
          <td colspan="6" class="category-title">安全与行政管理</td>
        </tr>
        <tr v-for="(row, rIndex) in adminFeatures" :key="rIndex" class="data-row">
          <td class="feature-name">{{ row.name }}</td>
          <td v-for="(value, vIndex) in row.values" :key="vIndex" class="feature-value">
            <span v-if="value === 'check'" class="check-icon">✓</span>
            <span v-else-if="value === 'dash'" class="dash-icon">—</span>
            <span v-else class="value-text">{{ value }}</span>
          </td>
        </tr>

        <tr class="category-row">
          <td colspan="6" class="category-title">隐私</td>
        </tr>
        <tr v-for="(row, rIndex) in privacyFeatures" :key="rIndex" class="data-row">
          <td class="feature-name">{{ row.name }}</td>
          <td v-for="(value, vIndex) in row.values" :key="vIndex" class="feature-value">
            <span v-if="value === 'check'" class="check-icon">✓</span>
            <span v-else-if="value === 'dash'" class="dash-icon">—</span>
            <span v-else class="value-text">{{ value }}</span>
          </td>
        </tr>

        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义数据接口
interface PlanHeader {
  name: string;
  btnText: string;
}

interface FeatureRow {
  name: string;
  values: string[];
}

interface FeatureSection {
  category: string;
  featureRows: FeatureRow[];
}

// 表头数据 (从截图 1 中提取)
const plans = ref<PlanHeader[]>([
  { name: '免费版', btnText: '获取免费版' },
  { name: 'Plus 版', btnText: '获取 Plus' },
  { name: 'Pro 版', btnText: '获取 Pro 版本' },
  { name: 'Business 版', btnText: '获取 Business 版' },
  { name: 'Enterprise 版', btnText: '联系销售人员' },
]);

// 隐私分类数据 (来自新截图 4.png)
const privacyFeatures = ref<FeatureRow[]>([
  {
    name: '内容用于训练模型',
    values: ['可选退出', '可选退出', '可选退出', '可选退出', '否，提供定制数据保留选项']
  },
]);

// 安全与行政管理分类数据 (来自新截图 4.png)
const adminFeatures = ref<FeatureRow[]>([
  { name: 'SAML SSO', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: '统一搜索', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: '专属工作空间', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: 'GPT 分析与管理', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: '管理员控制台', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: '批量成员管理', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: '管理员角色', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: 'Soc 2 Type 2 合规认证', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: '已获 ISO 27001, 27017, 27018 和 27701 认证', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: '域验证', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: 'SCIM', values: ['dash', 'dash', 'dash', 'check', 'check'] },
  { name: '企业密钥管理', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
  { name: '基于角色的访问控制', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
  { name: '分析控制面板', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
  { name: '合规 API', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
  { name: 'IP 白名单', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
  { name: '数据驻留地：美国、欧盟、英国、日本、新加坡、韩国、南非、印度、澳大利亚、巴西、阿联酋', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
  { name: '品牌化工作空间', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
  { name: '全局管理员控制台', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
  { name: '连接注册服务', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
]);

// 整合其他所有分类 (核心功能、模型、功能)
const comparisonData = ref<FeatureSection[]>([
  {
    category: '核心功能',
    featureRows: [
      { name: '消息和互动', values: ['无限制', '无限制', '无限制', '无限制', '无限制'] },
      { name: '聊天历史记录', values: ['无限制', '无限制', '无限制', '无限制', '无限制'] },
      { name: '在网页、iOS 和 Android 设备上访问', values: ['check', 'check', 'check', 'check', 'check'] }
    ]
  },
  {
    category: '模型',
    featureRows: [
      { name: 'GPT-5', values: ['check', '扩展', '无限制*', '无限制*', '无限制*'] },
      { name: 'GPT-5 Thinking', values: ['check', '扩展', '无限制*', '灵活**', '灵活**'] },
      { name: 'GPT-5 pro', values: ['dash', 'dash', 'check', '灵活**', '灵活**'] },
      { name: 'GPT-5 Thinking mini', values: ['check', '扩展', '无限制*', '灵活**', '灵活**'] },
      { name: 'GPT-4o', values: ['dash', '标准', '无限制*', '无限制*', '无限制*'] },
      { name: 'GPT-4.1', values: ['dash', '标准', '无限制*', '灵活**', '灵活**'] },
      { name: 'GPT-4.5', values: ['dash', 'dash', 'check', 'dash', '灵活**'] },
      { name: 'OpenAI o3', values: ['dash', '标准', '无限制*', '灵活**', '灵活**'] },
      { name: 'OpenAI o3 pro', values: ['dash', 'dash', '无限制*', 'dash', '灵活**'] },
      { name: 'OpenAI o4-mini', values: ['dash', '无限制*', '无限制*', '灵活**', '灵活**'] },
    ]
  },
  {
    category: '', // 模型下方的无标题部分
    featureRows: [
      { name: '联网访问', values: ['带限制可用性限', '快速', '快速', '快速', '最快'] },
      { name: '上下文窗口处理', values: ['16K', '32K', '128K', '32K', '128K'] },
      { name: '上下文窗口处理', values: ['196K', '196K', '196K', '196K', '196K'] },
      { name: '跨越模型的视觉、跨模态和速度', values: ['check', 'check', 'check', 'check', 'check'] }
    ]
  },
  {
    category: '功能',
    featureRows: [
      { name: '高级语音对话', values: ['带限制', 'check', '无限制*', '标准', '灵活**'] },
      { name: '高级视觉对话', values: ['dash', 'check', 'check', 'check', 'check'] },
      { name: '标准语音对话', values: ['check', 'check', 'check', 'check', 'check'] },
      { name: '应用', values: ['check', 'check', 'check', 'check', 'check'] },
      { name: '记忆', values: ['带限制', '扩展', '扩展', '扩展', '扩展'] },
      { name: '历史聊天记录', values: ['带限制', '随时删除', '随时删除', '随时删除', '随时删除'] },
      { name: '搜索', values: ['check', 'check', 'check', 'check', 'check'] },
      { name: 'Canvas', values: ['check', 'check', 'check', 'check', 'check'] },
      { name: '在 macOS 上进行代码编辑', values: ['check', 'check', 'check', 'check', 'check'] },
      { name: 'ChatGPT 副驾驶', values: ['dash', '带限制', 'check', 'check', 'check'] },
      { name: '项目', values: ['dash', 'dash', 'check', 'check', 'check'] },
      { name: '共享链路', values: ['dash', 'dash', 'dash', 'check', 'check'] },
      { name: '任务', values: ['dash', 'dash', 'check', 'check', 'check'] },
      { name: '数据分析', values: ['带限制', 'check', 'check', 'check', 'check'] },
      { name: '视觉', values: ['带限制', 'check', 'check', 'check', 'check'] },
      { name: '连接内部资源的浏览器', values: ['dash', 'check', 'check', 'check', 'check'] },
      { name: '公司知识库', values: ['dash', 'dash', 'dash', 'check', 'check'] },
      { name: '自定义 GCF（由选定的开发者人员提供）', values: ['dash', 'check', 'check', 'check', 'check'] },
      { name: 'ChatGPT 考试模式', values: ['dash', 'check', 'check', 'check', 'check'] },
      { name: '文件上传', values: ['带限制', 'check', 'check', 'check', 'check'] },
      { name: '发现并使用 GPT', values: ['dash', 'check', 'check', 'check', 'check'] },
      { name: '创建和共享 GPT', values: ['dash', 'check', 'check', 'check', 'check'] },
      { name: '与你的工作空间共享 GPT', values: ['dash', 'dash', 'check', 'check', 'check'] },
      { name: '测试新功能的机会', values: ['带限制', 'check', 'check', 'check', 'check'] },
      { name: '图像生成', values: ['带限制', 'check', 'check', 'check', 'check'] },
      { name: '交互式表格和图表', values: ['带限制', 'check', 'check', 'check', 'check'] },
    ]
  },
]);
</script>

<style scoped>
/* ------------------------------------------- */
/* 样式保持一致性 */
/* ------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.comparison-table-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: 1200px;
  margin: 60px auto;
  padding: 40px 20px;
  background-color: #fff;
  color: #000;
}

/* 主标题 */
.main-title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 60px;
  letter-spacing: -0.01em;
}

/* 表格滚动容器 */
.table-scroll-wrapper {
  overflow-x: auto;
}

.features-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1000px;
  font-size: 0.875rem;
}

/* --- 表头样式 --- */
.plan-col-header {
  padding-bottom: 40px;
  vertical-align: bottom;
  min-width: 140px;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.plan-name {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}

/* 黑色圆角按钮 */
.get-plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.arrow {
  margin-left: 4px;
  font-family: sans-serif;
  font-size: 1.1em;
}

/* --- 类别标题行 (核心功能/模型/功能/隐私/安全) --- */
.category-row td {
  padding-top: 40px;
  padding-bottom: 10px;
  border-bottom: none;
}

.category-title {
  font-size: 22px;
  font-weight: 500;
  color: #000;
  text-align: left;
  min-width: 280px;
}

/* --- 数据行样式 --- */
.data-row td {
  padding: 14px 0;
  border-top: 1px solid #e5e5e5; /* 细灰线 */
  font-size: 0.875rem;
  color: #000;
  font-weight: 400;
}

.feature-name {
  text-align: left;
  min-width: 280px;
  padding-right: 20px;
  vertical-align: top;
  font-weight: 600 !important;
}

.feature-value {
  text-align: center;
  vertical-align: middle;
  min-width: 140px;
}

/* 特殊符号和文本样式 */
.check-icon, .dash-icon {
  font-size: 1rem;
  color: #000;
  font-weight: bold;
}

.value-text {
  font-size: 0.875rem;
  color: #000;
  font-weight: 400;
}

/* 移除表格最底部的线 */
.features-table tbody tr:last-child td {
  border-bottom: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .feature-name, .category-title {
    min-width: 200px;
    padding-left: 10px;
  }
}
</style>