eiacloud-mcp-ui/src/pages/help/faq.vue

<template>
  <div class="faq-page">
    <div class="faq-title">常见问题</div>
    <div class="faq-list">
      <div v-for="item in faqList" :key="item.question" class="faq-item">
        <div class="faq-item-head">
          <span class="faq-item-icon">
            <icon-svg name="faq_icon" size="10px" />
          </span>
          <div class="faq-item-question">{{ item.question }}</div>
        </div>
        <div class="faq-item-answer">{{ item.answer }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
const faqList = [
  {
    question: "Token 在哪里获取？",
    answer:
      "登录环评云助手MCP平台后，点击「获取token」即可获得。一套 Token 可同时用于 MCP 与 CLI 两种接入方式。",
  },
  {
    question: "为什么配置后工具没有出现？",
    answer:
      "配置完成后请完全退出并重新打开 AI 客户端再验证。若仍不出现，检查 URL 是否完整、Token 是否正确粘贴，以及是否使用了 streamableHttp 类型。",
  },
  {
    question: "所有 Server 都要分别配置吗？",
    answer:
      "所有 Server 共用同一套 Token，建议复制「全部配置」一次性配置完成（「豆包」每个server都需要单独配置.)。",
  },
  {
    question: "CLI 和 MCP 有什么区别？",
    answer:
      "MCP 适合在 AI 工具中对话式使用；CLI 适合脚本化、自动化的确定性调用，零 Token 消耗。两者共用一套 Token，可以同时使用。",
  },
];
</script>
<style scoped lang="less">
.faq-page {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: 60px;
  background: #FFFFFF;
  box-shadow: 0px 4px 24px 0px rgba(15, 23, 42, 0.06);
  border-radius: 8px 8px 8px 8px;
}

.faq-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 32px;
  color: #1E293B;
  line-height: 40px;
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.faq-item {
  box-sizing: border-box;
  padding: 18px 20px;
  background: #F8FAFC;
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #E2E8F0;
}

.faq-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 6px;
  background: #EEF4FF;
  border-radius: 6px 6px 6px 6px;
}

.faq-item-question {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #1E293B;
  line-height: 22px;
  text-align: left;
}

.faq-item-answer {
  margin-top: 8px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #64748B;
  line-height: 20px;
  text-align: left;
}
</style>