408 lines
11 KiB
Vue
408 lines
11 KiB
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>
|