Tcode平台改造升级-控制台登录组件开发及用户工作台页面开发
This commit is contained in:
fmk1023
@@ -310,3 +310,20 @@ circle.devui-radio__material-outer {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
|
||||
.tcode-login-modal {
|
||||
width: 600px;
|
||||
:deep(.devui-modal) {
|
||||
width: 600px !important;
|
||||
}
|
||||
.devui-modal__header {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
.devui-modal__body {
|
||||
padding: 0; /* 移除默认内边距，由内部控制 */
|
||||
}
|
||||
.btn-close {
|
||||
z-index: 10; /* 确保关闭按钮在最上层 */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1463,7 +1463,7 @@ const handleLogin = (type) => {
|
||||
justify-content: center;
|
||||
letter-spacing: 8px;
|
||||
padding: 10px;
|
||||
margin: 0 16px;
|
||||
margin: 0 16px 0 14px;
|
||||
text-align: center;
|
||||
/*width: 60px;*/
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
1032
src/components/LoginModal/indexOld.vue
Normal file
1032
src/components/LoginModal/indexOld.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -254,6 +254,19 @@ export default [
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/Dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import('@/views/Jyh/Dashboard/index.vue'),
|
||||
meta: {
|
||||
title: 'Dashboard',
|
||||
reportTitle: 'Dashboard',
|
||||
className: 'w-full min-w-full',
|
||||
hiddenFooter: true,
|
||||
hasMobile: true,
|
||||
asideMenu: 'drawer' // 左侧菜单抽屉模式
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/ai',
|
||||
redirect: '/ai/home',
|
||||
|
||||
260
src/views/Jyh/Dashboard/Integration.vue
Normal file
260
src/views/Jyh/Dashboard/Integration.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<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>
|
||||
259
src/views/Jyh/Dashboard/billing.vue
Normal file
259
src/views/Jyh/Dashboard/billing.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
<div class="billing-container">
|
||||
|
||||
<div class="billing-header">
|
||||
<span class="main-title">账单和发票</span>
|
||||
<d-button class="manage-subscription-btn" variant="outline">
|
||||
管理订阅 <i class="d-icon d-icon-link-external"></i>
|
||||
</d-button>
|
||||
</div>
|
||||
|
||||
<div class="section-card on-demand-section">
|
||||
|
||||
<div class="card-header">
|
||||
<span class="card-title">按需使用</span>
|
||||
<div class="cycle-selector">
|
||||
<span class="cycle-text">Cycle Starting 2025年12月2日</span>
|
||||
<i class="d-icon d-icon-arrow-down-filling"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-area">
|
||||
<div class="cycle-period">2025年12月2日 - 2026年1月2日</div>
|
||||
<div class="total-amount">0.00 <span class="currency">美元</span></div>
|
||||
</div>
|
||||
|
||||
<div class="table-header">
|
||||
<span class="col-type">类型</span>
|
||||
<span class="col-token">代币</span>
|
||||
<span class="col-cost">成本</span>
|
||||
<span class="col-quantity">数量</span>
|
||||
<span class="col-total">全部的</span>
|
||||
</div>
|
||||
|
||||
<div class="subtotal-row">
|
||||
<span class="subtotal-label">小计:</span>
|
||||
<span class="subtotal-value">0.00 <span class="currency">美元</span></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="invoices-section">
|
||||
<div class="section-title">发票</div>
|
||||
<p class="invoice-status">
|
||||
未找到发票。
|
||||
</p>
|
||||
</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; // 次要文本色，如日期
|
||||
$text-light-gray: #c9c9c9; // 浅灰色文本，如表格头部
|
||||
$border-color: #333333; // 分隔线颜色
|
||||
|
||||
|
||||
.content-area {
|
||||
// 继承自父组件，作为页面容器
|
||||
background-color: #121212; // 确保背景色足够深
|
||||
padding: 40px 60px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.billing-container {
|
||||
//max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- 头部样式 --- */
|
||||
.billing-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.main-title {
|
||||
font-size: 20px; /* 标题字体略小，与图片匹配 */
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.manage-subscription-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;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 按需使用卡片 --- */
|
||||
.section-card {
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.on-demand-section {
|
||||
padding-bottom: 0; /* 小计行在卡片内部，所以不需要底部额外内边距 */
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.cycle-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $text-secondary;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
// 模拟深色下拉菜单样式
|
||||
&:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.d-icon-arrow-down-filling {
|
||||
margin-left: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-area {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cycle-period {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: $text-primary;
|
||||
|
||||
.currency {
|
||||
font-size: 16px;
|
||||
margin-left: 4px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* --- 表格样式 (使用 Flex/Grid 模拟) --- */
|
||||
.table-header {
|
||||
display: flex;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid $border-color;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: $text-light-gray; /* 浅灰色字体 */
|
||||
}
|
||||
|
||||
.col-type {
|
||||
flex: 3; /* 类型占比较大 */
|
||||
}
|
||||
.col-token {
|
||||
flex: 2;
|
||||
}
|
||||
.col-cost {
|
||||
flex: 2;
|
||||
}
|
||||
.col-quantity {
|
||||
flex: 2;
|
||||
}
|
||||
.col-total {
|
||||
flex: 1; /* 总计靠右对齐，占位较小 */
|
||||
text-align: right;
|
||||
padding-right: 24px; // 留出空间给小计的右侧对齐
|
||||
}
|
||||
|
||||
/* --- 小计行 --- */
|
||||
.subtotal-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; /* 将小计行整体靠右 */
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid $border-color;
|
||||
background-color: #242424; /* 模拟小计行的背景颜色比卡片背景稍亮 */
|
||||
margin-top: 1px; /* 避免表格与小计行的边框重叠 */
|
||||
|
||||
// 确保小计行和卡片圆角自然衔接
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
|
||||
// 调整外边距以覆盖卡片本身的内边距
|
||||
margin: 0 -24px;
|
||||
padding-right: 24px; // 保持右侧对齐的内边距
|
||||
}
|
||||
|
||||
.subtotal-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
margin-right: 40px; /* 标签与值的间距 */
|
||||
}
|
||||
|
||||
.subtotal-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
width: 10%; /* 保证与表格最后一列宽度大致对齐 */
|
||||
min-width: 80px;
|
||||
text-align: right;
|
||||
|
||||
.currency {
|
||||
font-weight: 400;
|
||||
color: $text-secondary;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 发票部分 --- */
|
||||
.invoices-section {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.invoice-status {
|
||||
font-size: 14px;
|
||||
color: $text-secondary; /* 浅绿色文字 */
|
||||
}
|
||||
|
||||
</style>
|
||||
102
src/views/Jyh/Dashboard/expense.vue
Normal file
102
src/views/Jyh/Dashboard/expense.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
<div class="page-container">
|
||||
|
||||
<h2 class="title">按需使用</h2>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="card-content">
|
||||
<div class="text-area">
|
||||
<h3 class="card-title">按需使用</h3>
|
||||
<p class="card-description">启用按需使用功能，即可超出套餐包含的流量，此功能需要付费套餐。</p>
|
||||
</div>
|
||||
|
||||
<button class="upgrade-button">
|
||||
升级到专业版
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</d-content>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-area {
|
||||
background-color: #121212;
|
||||
padding: 40px 60px;
|
||||
/*overflow-y: auto;*/
|
||||
}
|
||||
|
||||
|
||||
.page-container {
|
||||
/* 使用深色背景，模拟图片中的深黑/灰色 */
|
||||
/*background-color: #1c1c1c;*/
|
||||
min-height: 100vh; /* 保证至少覆盖整个视口高度 */
|
||||
/*padding: 20px 40px; !* 内部留白 *!*/
|
||||
color: #ffffff; /* 默认文本颜色为白色 */
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px; /* 标题与内容卡片的间距 */
|
||||
color: #f0f0f0; /* 略微亮一点的白色 */
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex; /* 启用 Flex 布局 */
|
||||
justify-content: space-between;
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
}
|
||||
|
||||
.text-area {
|
||||
flex-grow: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
margin-bottom: 4px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
color: #c7a2e8;
|
||||
}
|
||||
|
||||
.upgrade-button {
|
||||
/* 按钮的通用样式 */
|
||||
background-color: transparent; /* 背景透明 */
|
||||
color: #f0f0f0; /* 按钮文字颜色 */
|
||||
border: 1px solid #7c7c7c; /* 浅灰色边框，模拟图片中的效果 */
|
||||
border-radius: 20px; /* 较大的圆角，看起来像药丸形状 */
|
||||
padding: 6px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
/* 保持按钮宽度不随内容变化 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.upgrade-button:hover {
|
||||
background-color: #3b3b3b;
|
||||
border-color: #a0a0a0;
|
||||
}
|
||||
</style>
|
||||
298
src/views/Jyh/Dashboard/index.vue
Normal file
298
src/views/Jyh/Dashboard/index.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<d-layout class="main-layout">
|
||||
<d-aside class="sidebar">
|
||||
<div class="user-profile">
|
||||
<div class="avatar-area">
|
||||
<span class="username">用户名</span>
|
||||
<d-icon name="edit" size="14px" color="#666" />
|
||||
</div>
|
||||
<div class="user-email">免费计划 · 123456@gmail.com</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-menu">
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'overview' }"
|
||||
@click="activeMenu = 'overview'"
|
||||
>
|
||||
<i class="icon-end-new"></i> 概述
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'setting' }"
|
||||
@click="activeMenu = 'setting'"
|
||||
>
|
||||
<i class="icon-setting"></i> 设置
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="nav-menu">
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'integration' }"
|
||||
@click="activeMenu = 'integration'"
|
||||
>
|
||||
<i class="icon-assembly-new"></i> 集成
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'proxy' }"
|
||||
@click="activeMenu = 'proxy'"
|
||||
>
|
||||
<i class="icon-cloud"></i> 云代理
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<div class="nav-menu bottom-menu">
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'usage' }"
|
||||
@click="activeMenu = 'usage'"
|
||||
>
|
||||
<i class="icon-chart"></i> 用法
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'expense' }"
|
||||
@click="activeMenu = 'expense'"
|
||||
>
|
||||
<i class="icon-time"></i> 开支
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'billing' }"
|
||||
@click="activeMenu = 'billing'"
|
||||
>
|
||||
<i class="icon-remove-member"></i> 账单和发票
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="nav-menu">
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'docs' }"
|
||||
@click="activeMenu = 'docs'"
|
||||
>
|
||||
<i class="icon-doc"></i> 文档
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: activeMenu === 'contact' }"
|
||||
@click="activeMenu = 'contact'"
|
||||
>
|
||||
<i class="icon-mail"></i> 联系我们
|
||||
</div>
|
||||
</div>
|
||||
</d-aside>
|
||||
|
||||
<!-- 动态内容区域 -->
|
||||
<component :is="currentComponent" />
|
||||
|
||||
</d-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import OverView from './overview.vue';
|
||||
import Setting from './setting.vue';
|
||||
import Integration from './Integration.vue';
|
||||
import Proxy from './proxy.vue';
|
||||
import Usage from './usage.vue';
|
||||
import Expense from './expense.vue';
|
||||
import Billing from './billing.vue';
|
||||
|
||||
// 定义菜单映射关系
|
||||
const menuComponents = {
|
||||
overview: OverView,
|
||||
setting: Setting,
|
||||
integration: Integration,
|
||||
proxy: Proxy,
|
||||
usage: Usage,
|
||||
expense: Expense,
|
||||
billing: Billing,
|
||||
};
|
||||
|
||||
// 选中的菜单
|
||||
const activeMenu = ref('overview');
|
||||
|
||||
// 根据选中的菜单获取当前组件
|
||||
const currentComponent = computed(() => {
|
||||
return menuComponents[activeMenu.value] || OverView;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 全局暗黑重置 */
|
||||
.app-container {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #0c0c0c;
|
||||
color: #fff;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* --- 侧边栏样式 --- */
|
||||
.sidebar {
|
||||
background-color: #121212; /* 比背景稍亮一点 */
|
||||
width: 260px;
|
||||
border-right: 1px solid #252525;
|
||||
padding: 20px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
margin-bottom: 24px;
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
.user-email {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #252525;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #252525;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 10px;
|
||||
/* 简单的 CSS 图标模拟 */
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* 不同图标的特殊样式 */
|
||||
.icon-overview {
|
||||
border-radius: 2px;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.icon-setting {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-cube {
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
}
|
||||
|
||||
.icon-cloud {
|
||||
border-radius: 50% 50% 0 0;
|
||||
}
|
||||
|
||||
.icon-chart {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-time {
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 40%;
|
||||
height: 2px;
|
||||
background-color: currentColor;
|
||||
transform-origin: left center;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bill {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.icon-doc {
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-mail {
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
width: 60%;
|
||||
height: 2px;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #252525;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
255
src/views/Jyh/Dashboard/overview.vue
Normal file
255
src/views/Jyh/Dashboard/overview.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
|
||||
<div class="plan-cards-container">
|
||||
<d-card class="plan-card">
|
||||
<div class="card-title">专业版 <span class="price">20美元/月</span></div>
|
||||
<div class="card-desc">入门级套餐，可访问高级模型、无限次 Tab 键自动补全等功能。</div>
|
||||
<d-button class="card-btn white-btn">免费试用7天</d-button>
|
||||
</d-card>
|
||||
|
||||
<d-card class="plan-card">
|
||||
<div class="card-title">专业+ <span class="price">60美元/月</span></div>
|
||||
<div class="card-desc">使用量是专业版的 3 倍，解锁代理程序更高的限制等等。</div>
|
||||
<d-button class="card-btn white-btn">升级到专业版+</d-button>
|
||||
</d-card>
|
||||
|
||||
<d-card class="plan-card">
|
||||
<div class="card-title">超级版 <span class="price">200美元/月</span></div>
|
||||
<div class="card-desc">并行运行代理，享受 20 倍使用限制，并获得高级功能的优先使用权，从而获得最大价值。</div>
|
||||
<d-button class="card-btn white-btn">升级到超级版</d-button>
|
||||
</d-card>
|
||||
</div>
|
||||
|
||||
<div class="invite-section">
|
||||
<div class="invite-text">
|
||||
<h3>邀请团队成员</h3>
|
||||
<p>利用管理控制、分析和企业级安全功能，加速您的团队发展</p>
|
||||
</div>
|
||||
<d-button class="invite-btn" variant="outline">邀请您的团队</d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-list">
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-left">
|
||||
<div class="inte-icon github-icon"><svg viewBox="0 0 16 16" width="24" height="24" fill="white"><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"></path></svg></div>
|
||||
<div class="inte-info">
|
||||
<div class="inte-name">GitHub</div>
|
||||
<div class="inte-desc">连接 GitHub 以获取云代理、Bugbot 和增强的代码库上下文</div>
|
||||
</div>
|
||||
</div>
|
||||
<d-button class="connect-btn">连接 <i class="icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-left">
|
||||
<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>
|
||||
</div>
|
||||
<d-button class="connect-btn">连接 <i class="icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-left">
|
||||
<div class="inte-icon slack-icon"><svg viewBox="0 0 24 24" width="24" height="24" fill="white"><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>
|
||||
</div>
|
||||
<d-button class="connect-btn disabled" disabled>连接 <i class="icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="inte-left">
|
||||
<div class="inte-icon linear-icon"><svg viewBox="0 0 24 24" width="24" height="24" fill="white"><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>
|
||||
</div>
|
||||
<d-button class="connect-btn">连接 <i class="icon-link-external"></i></d-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</d-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "overview"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* --- 右侧内容样式 --- */
|
||||
.content-area {
|
||||
background-color: #121212;
|
||||
padding: 40px 60px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 顶部卡片 */
|
||||
.plan-cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.plan-card {
|
||||
background-color: #161616 !important; /* 强制覆盖 DevUI 默认白底 */
|
||||
border: 1px solid #252525 !important;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 200px;
|
||||
color: #fff;
|
||||
|
||||
:deep(.devui-card__header) {
|
||||
padding: 0 0 12px 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
.price {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
width: fit-content;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
|
||||
&.white-btn {
|
||||
background-color: #fff !important;
|
||||
color: #000 !important;
|
||||
border: none !important;
|
||||
&:hover {
|
||||
background-color: #e0e0e0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 中间邀请部分 */
|
||||
.invite-section {
|
||||
background-color: #121212;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.invite-text {
|
||||
margin-bottom: 20px;
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
background: transparent;
|
||||
border: 1px solid #444;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
border-color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部集成列表 */
|
||||
.integration-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.integration-item {
|
||||
background-color: #161616;
|
||||
border: 1px solid #252525;
|
||||
border-radius: 8px;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.inte-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.inte-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.inte-info {
|
||||
.inte-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #e5e5e5;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.inte-desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.connect-btn {
|
||||
background-color: #fff !important;
|
||||
color: #000 !important;
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&.disabled {
|
||||
background-color: #252525 !important;
|
||||
color: #555 !important;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
409
src/views/Jyh/Dashboard/proxy.vue
Normal file
409
src/views/Jyh/Dashboard/proxy.vue
Normal file
@@ -0,0 +1,409 @@
|
||||
<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 密钥提供对您的 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 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: #121212;
|
||||
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 密钥部分 (与上一个图相同) --- */
|
||||
.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>
|
||||
268
src/views/Jyh/Dashboard/setting.vue
Normal file
268
src/views/Jyh/Dashboard/setting.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
<div class="settings-container">
|
||||
|
||||
<div class="header">设置</div>
|
||||
|
||||
<div class="section-title">隐私</div>
|
||||
<div class="setting-block">
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="item-content">
|
||||
<div class="item-header">
|
||||
<span class="item-title">共享数据</span>
|
||||
<span class="status-tag">1小时后激活</span>
|
||||
</div>
|
||||
<p class="item-description">您的代码库、提示、编辑和其他使用数据将被 Cursor 存储和训练，以改进产品。</p>
|
||||
</div>
|
||||
<d-button class="action-btn edit-btn">编辑</d-button>
|
||||
</div>
|
||||
|
||||
<div class="info-note">
|
||||
<span class="highlight-text">首次使用时，数据共享功能将暂停，</span>共享功能将在1小时后激活。<a href="#" class="learn-more">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">学生验证</div>
|
||||
<div class="setting-block">
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="item-content">
|
||||
<div class="item-header">
|
||||
<span class="item-title">学生身份</span>
|
||||
</div>
|
||||
<p class="item-description">只有 .edu 邮箱和特定教育领域人才可进行学生身份验证。</p>
|
||||
</div>
|
||||
<d-button class="action-btn disabled-btn" disabled>不符合条件</d-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">活跃会话</div>
|
||||
<div class="setting-block">
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="item-content session-content">
|
||||
<div class="custom-checkbox"></div>
|
||||
<div>
|
||||
<div class="item-header">
|
||||
<span class="item-title">网站</span>
|
||||
</div>
|
||||
<p class="item-description">创建于 6 天前</p>
|
||||
</div>
|
||||
</div>
|
||||
<d-button class="action-btn revoke-btn">撤销</d-button>
|
||||
</div>
|
||||
|
||||
<div class="session-note">
|
||||
撤销会话可能需要最多 10 分钟才能完成。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">更多的</div>
|
||||
<div class="setting-block">
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="item-content">
|
||||
<div class="item-header">
|
||||
<span class="item-title">删除账户</span>
|
||||
</div>
|
||||
</div>
|
||||
<d-button class="action-btn delete-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: #ffffff;
|
||||
$text-secondary: #aaaaaa;
|
||||
$border-color: #333333;
|
||||
$highlight-orange: #f5a623;
|
||||
$delete-red: #a93b4d;
|
||||
|
||||
.content-area {
|
||||
background-color: #121212;
|
||||
padding: 40px 60px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.settings-page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: $bg-secondary;
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
//max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- 基础结构样式 --- */
|
||||
.header {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-secondary;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.setting-block {
|
||||
background-color: $bg-primary;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $border-color;
|
||||
overflow: hidden; /* 确保子元素的圆角生效 */
|
||||
}
|
||||
|
||||
/* --- 列表项样式 --- */
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
background-color: #333333;
|
||||
color: $text-secondary;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* --- 信息和提示样式 --- */
|
||||
.info-note, .session-note {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
padding: 12px 24px;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.info-note {
|
||||
border-top: none; /* 共享数据区域是连续的，原图没有上边框 */
|
||||
background-color: darken($bg-primary, 2%); /* 略深的背景 */
|
||||
|
||||
.highlight-text {
|
||||
color: $highlight-orange;
|
||||
}
|
||||
|
||||
.learn-more {
|
||||
color: #4a90e2; /* 链接蓝色 */
|
||||
text-decoration: none;
|
||||
margin-left: 4px;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.session-note {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/* --- 按钮样式 --- */
|
||||
.action-btn {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
/* 默认按钮 (编辑/撤销) - 灰色背景 */
|
||||
&.edit-btn, &.revoke-btn {
|
||||
background-color: #333333 !important;
|
||||
color: $text-primary !important;
|
||||
border: none;
|
||||
&:hover {
|
||||
background-color: #444444 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 删除按钮 - 红色背景 */
|
||||
&.delete-btn {
|
||||
background-color: $delete-red !important;
|
||||
color: $text-primary !important;
|
||||
border: none;
|
||||
&:hover {
|
||||
background-color: darken($delete-red, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 不符合条件 (Disabled) */
|
||||
&.disabled-btn {
|
||||
background-color: #333333 !important;
|
||||
color: #666666 !important;
|
||||
border: 1px solid #444444 !important;
|
||||
cursor: not-allowed;
|
||||
|
||||
/* 增加原图中的图标，这里使用文本代替 */
|
||||
&::before {
|
||||
content: '🗋 '; /* 模拟图标 */
|
||||
margin-right: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 活跃会话区域定制 --- */
|
||||
.session-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.custom-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 4px;
|
||||
background-color: #222;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
281
src/views/Jyh/Dashboard/usage.vue
Normal file
281
src/views/Jyh/Dashboard/usage.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<d-content class="content-area">
|
||||
<div class="usage-container">
|
||||
|
||||
<div class="control-bar">
|
||||
|
||||
<d-range-date-picker-pro
|
||||
v-model="rangeDatePickerProValue"
|
||||
:maxDate="today"
|
||||
:format="dateFormat"
|
||||
:placeholder="['开始日期', '结束日期']"
|
||||
class="dark-picker"
|
||||
/>
|
||||
|
||||
<div class="filter-tabs-container">
|
||||
|
||||
<d-tabs type="slider" v-model="activeDaysStr" class="custom-tabs-group time-tabs">
|
||||
<d-tab id="1天" title="1天"></d-tab>
|
||||
<d-tab id="7天" title="7天"></d-tab>
|
||||
<d-tab id="30天" title="30天"></d-tab>
|
||||
</d-tabs>
|
||||
|
||||
</div>
|
||||
|
||||
<d-button class="export-btn" variant="text">
|
||||
<i class="d-icon icon-download"></i> 导出 CSV 文件
|
||||
</d-button>
|
||||
</div>
|
||||
|
||||
<div class="data-content">
|
||||
<div class="no-events-found">
|
||||
<p class="main-text">No Events Found</p>
|
||||
<p class="sub-text">No usage events found for the selected filters</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</d-content>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
// 辅助函数：根据天数设置日期范围
|
||||
const today = new Date();
|
||||
today.setHours(23, 59, 59, 999); // 确保 maxDate 覆盖今天全天
|
||||
|
||||
const getRangeByDays = (days: number): Date[] => {
|
||||
const endDate = new Date(today); // 确保结束日期是今天
|
||||
const startDate = new Date(today);
|
||||
// 注意：如果是 1天，实际是今天这 24小时，所以减 1 天
|
||||
startDate.setDate(today.getDate() - (days - 1));
|
||||
startDate.setHours(0, 0, 0, 0); // 开始日期从当天 0点开始
|
||||
return [startDate, endDate];
|
||||
};
|
||||
|
||||
const dateFormat = 'MM月DD日';
|
||||
|
||||
// 默认值：30天
|
||||
const rangeDatePickerProValue = ref<Date[]>(getRangeByDays(30));
|
||||
|
||||
const activeTag = ref('Bug Bot');
|
||||
const activeDaysStr = ref('30天'); // 默认选中 30天
|
||||
|
||||
watch(activeDaysStr, (newVal) => {
|
||||
let days: number;
|
||||
|
||||
// 从字符串 'X天' 中提取天数
|
||||
switch (newVal) {
|
||||
case '1天':
|
||||
days = 1;
|
||||
break;
|
||||
case '7天':
|
||||
days = 7;
|
||||
break;
|
||||
case '30天':
|
||||
days = 30;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新日期范围
|
||||
rangeDatePickerProValue.value = getRangeByDays(days);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 定义核心暗色变量 */
|
||||
$bg-secondary: #141414;
|
||||
$bg-card: #1e1e1e;
|
||||
$text-primary: #eaeaea;
|
||||
$text-secondary: #aaaaaa;
|
||||
$border-color: #333333;
|
||||
$active-tag-bg: #444444;
|
||||
|
||||
|
||||
.content-area {
|
||||
background-color: #121212;
|
||||
padding: 40px 60px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.usage-page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: $bg-secondary;
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.usage-container {
|
||||
//max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- 顶部控制栏样式 --- */
|
||||
.control-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/* 日期范围选择器样式重写 (d-range-date-picker-pro) */
|
||||
:deep(.d-range-date-picker-pro) {
|
||||
width: 180px;
|
||||
|
||||
.devui-input-wrap, .devui-input-affix-wrapper {
|
||||
background-color: $bg-card !important;
|
||||
border: 1px solid $border-color !important;
|
||||
border-radius: 6px !important;
|
||||
height: 36px !important;
|
||||
padding: 0 8px !important;
|
||||
|
||||
.devui-input {
|
||||
color: $text-primary !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
padding: 0 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-icon-calendar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.devui-separator {
|
||||
color: $text-primary !important;
|
||||
margin: 0 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 筛选标签区域样式 (d-tabs) --- */
|
||||
.filter-tabs-container {
|
||||
display: flex;
|
||||
gap: 8px; /* 保持两个 Tab 组之间的间隔 */
|
||||
flex-grow: 1; /* 占据中间空间 */
|
||||
}
|
||||
|
||||
// 统一对 Tab 组进行样式覆盖，以实现标签的外观
|
||||
:deep(.custom-tabs-group) {
|
||||
height: 36px; /* 保持与日期选择器高度一致 */
|
||||
|
||||
// 隐藏 Tab 的底部边框
|
||||
.devui-nav-container {
|
||||
border-bottom: none !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
// 针对每个 Tab Item 进行样式覆盖
|
||||
.devui-nav-item {
|
||||
margin-right: 8px; /* 调整 Tab Item 之间的间距 */
|
||||
}
|
||||
|
||||
// Tab 内容：实现卡片/标签样式
|
||||
.devui-nav-item__link {
|
||||
color: $text-primary !important;
|
||||
background-color: $bg-card !important;
|
||||
border: 1px solid $border-color !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 6px 12px !important;
|
||||
height: 36px;
|
||||
line-height: 24px;
|
||||
transition: none;
|
||||
|
||||
// 隐藏 slider 类型自带的底部滑块
|
||||
&::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 鼠标悬停效果
|
||||
&:hover {
|
||||
border-color: #555555 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中 Tab 的样式
|
||||
.devui-nav-item.active .devui-nav-item__link {
|
||||
background-color: $active-tag-bg !important;
|
||||
border-color: $active-tag-bg !important;
|
||||
color: $text-primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 导出按钮样式 */
|
||||
.export-btn {
|
||||
color: $text-secondary !important;
|
||||
font-size: 14px;
|
||||
padding: 0 8px !important;
|
||||
|
||||
&:hover {
|
||||
color: $text-primary !important;
|
||||
}
|
||||
|
||||
.d-icon-upload {
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* --- 数据内容区样式 --- */
|
||||
.data-content {
|
||||
background-color: $bg-card;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $border-color;
|
||||
margin-top: 20px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.no-events-found {
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
|
||||
.main-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.devui-range-date-picker-pro__range-picker) {
|
||||
background-color: black;
|
||||
|
||||
.devui-input__wrapper {
|
||||
background-color: black;
|
||||
color: white;
|
||||
.devui-input__inner {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.devui-tabs__nav) {
|
||||
background-color: black;
|
||||
border-color: black;
|
||||
}
|
||||
:deep(.devui-tabs__nav--slider) {
|
||||
li:first-child {
|
||||
border-left-width: 0;
|
||||
}
|
||||
span {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
:deep(.devui-tab__content) {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user