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

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

      <div class="header">
        <span class="main-title">云代理</span>
        <span class="subtitle">创建代理异步方式编辑和运行代码</span>
      </div>

      <div class="section-title">集成</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="upgrade-card">
        <div class="upgrade-text">
          <div class="upgrade-title">升级以解锁云代理</div>
          <div class="upgrade-subtitle">升级至云代理，无限次完成、MAX模式等功能</div>
        </div>
        <d-button class="trial-btn">免费试用7天</d-button>
      </div>

      <div class="api-section">
        <div class="section-title">用户 API 密钥</div>
        <p class="api-description">
          用户 API 密钥提供对您的 金银湖大模型 账户的安全、程序化访问权限，包括 **金银湖大模型 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 class="env-section">
        <div class="env-header">
          <div class="section-title">全局环境变量</div>
          <d-button class="reset-btn" variant="outline"><i class="d-icon d-icon-refresh"></i> 重置密钥</d-button>
        </div>

        <p class="env-description">
          将密钥作为环境变量注入到后台云代理环境中。您的密钥将覆盖团队的密钥。
        </p>

        <div class="env-status-card">
          <div class="status-left">
            <div class="status-title">目前还没有任何秘钥</div>
            <div class="status-subtitle">添加或导入 .env 文件，以用作后台代理远程的环境变量。</div>
          </div>
          <d-button class="add-env-btn">添加秘钥</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; // 黄色提示
$upgrade-bg: #222222; // 升级卡片背景色
$button-bg: #444444; // 试用按钮背景色


.content-area {
  background-color: rgb(20, 18, 11);
  padding: 40px 60px;
  //overflow-y: auto;
}



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

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

/* --- 基础结构样式 --- */
.header {
  margin-bottom: 30px;
  .main-title {
    font-size: 28px;
    font-weight: 500;
    color: $text-primary;
    display: block;
    margin-bottom: 4px;
  }
  .subtitle {
    font-size: 13px;
    color: $text-secondary;
  }
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: $text-secondary;
  margin-top: 30px;
  margin-bottom: 8px;
}


.integration-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.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;

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

.disabled-btn {
  background-color: #2b2b2b !important;
  color: #666666 !important;
  border: 1px solid #444444 !important;
  cursor: not-allowed;
}

/* --- 升级卡片 --- */
.upgrade-card {
  background-color: $upgrade-bg;
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #383838;
}

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

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

.trial-btn {
  background-color: $button-bg !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($button-bg, 5%) !important;
  }
}

.api-section {
  padding-top: 10px; /* 调整间距 */
}

.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;

  .d-icon-add {
    margin-right: 4px;
  }
}

/* --- 环境变量部分 --- */
.env-section {
  padding-bottom: 40px;
}

.env-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .section-title {
    margin-top: 40px;
    margin-bottom: 0;
  }
}

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

  .d-icon-refresh {
    margin-right: 4px;
  }
}

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

.env-status-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;

  .status-left {
    // 覆盖 API 密钥部分的样式，使其更贴合图片
    .status-title {
      font-size: 14px;
      margin-bottom: 4px;
    }
    .status-subtitle {
      font-size: 13px;
    }
  }
}

.add-env-btn {
  background-color: #333333 !important;
  color: $text-primary !important;
  border: 1px solid #555 !important;
  height: 36px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;

  &:hover {
    background-color: #444444 !important;
  }
}
</style>