Situation-Awareness-Platform-Frontend/src/views/Jyh/Dashboard/Integration.vue

<template>
  <d-content class="content-area">
    <div class="integration-container">

      <div class="header">集成</div>

      <div class="integration-list">

        <div class="integration-item">
          <div class="inte-icon github-icon">
            <svg viewBox="0 0 16 16" width="24" height="24" fill="#EAEAEA"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
          </div>
          <div class="inte-info">
            <div class="inte-name">GitHub</div>
            <div class="inte-desc">连接 GitHub 以获取云代理、Bugbot和增强的代码库上下文</div>
          </div>
          <d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
        </div>

        <div class="integration-item">
          <div class="inte-icon gitlab-icon">
            <svg viewBox="0 0 24 24" width="24" height="24"><path fill="#FC6D26" d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.13-.94l2.03-6.26h17.5l2.03 6.26a.84.84 0 0 1-.13.94z"/><path fill="#E24329" d="M12 22.13l-5.84-17.96A.85.85 0 0 1 7.23 3h9.54a.85.85 0 0 1 1.07 1.17L12 22.13z"/><path fill="#FC6D26" d="M12 22.13L7.23 4.17 1.35 14.39a.84.84 0 0 0 .13.94L12 22.13z"/><path fill="#FC6D26" d="M12 22.13l4.77-17.96 5.88 10.22a.84.84 0 0 1 .13.94L12 22.13z"/></svg>
          </div>
          <div class="inte-info">
            <div class="inte-name">GitLab</div>
            <div class="inte-desc">连接 GitLab 以用于云代理、Bugbot和增强的代码库上下文</div>
          </div>
          <d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
        </div>

        <div class="integration-item">
          <div class="inte-icon slack-icon">
            <svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#4A154B"/></svg>
          </div>
          <div class="inte-info">
            <div class="inte-name">松弛</div>
            <div class="inte-desc">通过 Slack 与云代理协作</div>
          </div>
          <d-button class="connect-btn disabled-btn" disabled>连接 <i class="d-icon d-icon-link-external"></i></d-button>
        </div>

        <div class="integration-item">
          <div class="inte-icon linear-icon">
            <svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#5E6AD2"/></svg>
          </div>
          <div class="inte-info">
            <div class="inte-name">线性</div>
            <div class="inte-desc">连接 Linear 工作区，将问题委派给云代理</div>
          </div>
          <d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
        </div>

      </div>

      <div class="api-section">
        <div class="api-header">用户 API 密钥</div>
        <p class="api-description">
          用户 API 密钥提供对您的 **Cursor 账户**的安全、程序化访问权限，包括 **Cursor Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
        </p>

        <div class="api-card">
          <div class="api-status">
            <div class="status-icon">🔑</div>
            <div class="status-text">
              <div class="status-title">暂无 API 密钥</div>
              <div class="status-subtitle">尚未创建任何 API 密钥</div>
            </div>
          </div>
          <d-button class="new-key-btn">
            <i class="d-icon d-icon-add"></i> + 新 API 密钥
          </d-button>
        </div>
      </div>

    </div>
  </d-content >
</template>

<script setup lang="ts">
// 静态页面，无需特殊逻辑
</script>

<style lang="scss" scoped>
/* 定义核心暗色变量 */
$bg-primary: #1e1e1e;
$bg-secondary: #141414;
$text-primary: #eaeaea;
$text-secondary: #aaaaaa;
$border-color: #333333;
$highlight-blue: #4a90e2; // 链接颜色
$highlight-yellow: #f5a623; // 黄色提示


.content-area {
  background-color: #121212;
  padding: 40px 60px;
  overflow-y: auto;
}



.integration-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: $bg-secondary;
  min-height: 100vh;
  padding: 40px;
}

.integration-container {
  //max-width: 800px;
  margin: 0 auto;
}

.header {
  font-size: 28px;
  font-weight: 500;
  color: $text-primary;
  margin-bottom: 30px;
}

/* --- 集成列表样式 --- */
.integration-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}

.integration-item {
  background-color: $bg-primary;
  border-radius: 8px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inte-icon {
  width: 24px;
  height: 24px;
  margin-right: 16px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.inte-info {
  flex-grow: 1;
  margin-right: 20px;
}

.inte-name {
  font-size: 16px;
  font-weight: 500;
  color: $text-primary;
  margin-bottom: 4px;
}

.inte-desc {
  font-size: 13px;
  color: $text-secondary;
}

.connect-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: $text-secondary !important;
  border-color: $border-color !important;
  background: transparent !important;

  &:hover {
    border-color: #555555 !important;
  }

  .d-icon-link-external {
    margin-left: 5px;
  }
}

.disabled-btn {
  /* 模拟松弛的灰色禁用按钮 */
  background-color: #2b2b2b !important;
  color: #666666 !important;
  border: 1px solid #444444 !important;
  cursor: not-allowed;
}


/* --- API 密钥部分样式 --- */
.api-header {
  font-size: 18px;
  font-weight: 500;
  color: $text-primary;
  margin-bottom: 16px;
}

.api-description {
  font-size: 13px;
  color: $text-secondary;
  line-height: 1.6;
  margin-bottom: 20px;

  .highlight-text {
    color: $highlight-yellow;
  }
}

.api-card {
  background-color: $bg-primary;
  border-radius: 8px;
  border: 1px solid $border-color;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.api-status {
  display: flex;
  align-items: center;
}

.status-icon {
  font-size: 24px;
  margin-right: 16px;
}

.status-title {
  font-size: 16px;
  font-weight: 500;
  color: $text-primary;
}

.status-subtitle {
  font-size: 13px;
  color: $text-secondary;
}

.new-key-btn {
  background-color: $highlight-blue !important;
  color: $text-primary !important;
  border: none;
  height: 36px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;

  &:hover {
    background-color: darken($highlight-blue, 5%) !important;
  }

  .d-icon-add {
    margin-right: 4px;
  }
}
</style>