Leo_Ding/GPU_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码修改

Browse Source
This commit is contained in:
qiuyuan 2026-01-15 15:31:42 +08:00
parent b2ebdca17d
commit 6ec2e38d13
2 changed files with 66 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/admin/account/cost/exchange/index.vue
View File

@ -318,7 +318,7 @@ const performExchange = async () => {
try { try {
// 调用兑换接口 // 调用兑换接口
const response = await exchangePoint({ const response:any = await exchangePoint({
exchange_value: selectedExchangeAmount.value exchange_value: selectedExchangeAmount.value
}) })
console.log('兑换结果:', response) console.log('兑换结果:', response)

137
src/views/admin/home/index.vue
View File

@ -5,7 +5,7 @@
<!-- 左侧栏：实例、数据、邀请好友 --> <!-- 左侧栏：实例、数据、邀请好友 -->
<a-col :span="16"> <a-col :span="16">
<!-- 实例卡片 --> <!-- 实例卡片 -->
<a-card title="GPU容器实例" class="card"> <a-card title="GPU容器实例" class="card gpu-card">
<a-row :gutter="32" align="middle"> <a-row :gutter="32" align="middle">
<!-- 第一栏：容器实例和运行中 --> <!-- 第一栏：容器实例和运行中 -->
<a-col :span="18"> <a-col :span="18">
@ -44,14 +44,17 @@
<!-- 邀请好友卡片 --> <!-- 邀请好友卡片 -->
<a-card title="邀请好友得算力券" class="card margin-top"> <a-card title="邀请好友得算力券" class="card margin-top">
<template #extra>
<a-button type="link" @click="goToRules">活动规则</a-button>
</template>
<a-row :gutter="24" class="invite-container"> <a-row :gutter="24" class="invite-container">
<!-- 左侧：邀请信息和链接 --> <!-- 左侧：邀请信息和链接 -->
<a-col :span="24"> <a-col :span="24">
<div class="invite-content"> <div class="invite-content">
<div class="invite-status"> <div class="invite-status">
<div class="status-icon"> <!-- <div class="status-icon">
<LinkOutlined /> <LinkOutlined />
</div> </div> -->
<div class="status-text"> <div class="status-text">
<div class="status-title">暂无邀请链接</div> <div class="status-title">暂无邀请链接</div>
<div class="status-desc"> <div class="status-desc">
@ -59,35 +62,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="invite-actions"> <div class="invite-actions">
<a-button <a-button type="primary" class="generate-btn" @click="generateInviteLink">
type="primary"
class="generate-btn"
@click="generateInviteLink"
>
<template #icon> <template #icon>
<PlusOutlined /> <PlusOutlined />
</template> </template>
生成邀请链接 生成邀请链接
</a-button> </a-button>
<!-- 新增：活动规则链接 -->
<a-button
type="link"
class="rules-link"
@click="goToRules"
>
<template #icon>
<QuestionCircleOutlined />
</template>
查看活动规则
</a-button>
</div> </div>
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
</a-card> </a-card>
</a-col> </a-col>
@ -95,7 +80,7 @@
<!-- 右侧栏：用户信息 + 费用信息 --> <!-- 右侧栏：用户信息 + 费用信息 -->
<a-col :span="8"> <a-col :span="8">
<!-- 费用信息卡片 --> <!-- 费用信息卡片 -->
<a-card class="card "> <a-card class="card ">
<div class="fee-header"> <div class="fee-header">
<div class="fee-title">我的账号</div> <div class="fee-title">我的账号</div>
</div> </div>
@ -105,29 +90,31 @@
<img src="../../../assets/nav.png" /> <img src="../../../assets/nav.png" />
</span> </span>
<div class="nav-account"> <div class="nav-account">
<p> <p>
{{ userInfo.userName }} {{ userInfo.userName }}
<i class="fee-value"> <i class="fee-value">
<CopyOutlined /> <CopyOutlined />
</i> </i>
</p> </p>
<a-tag :color="getCertifyName(userInfo.certificationStatus).color">{{ getCertifyName(userInfo.certificationStatus).name }}</a-tag> <a-tag :color="getCertifyName(userInfo.certificationStatus).color">{{
getCertifyName(userInfo.certificationStatus).name }}</a-tag>
<!-- <p>{{getCertifyName(userInfo.certificationStatus).name}}</p> --> <!-- <p>{{getCertifyName(userInfo.certificationStatus).name}}</p> -->
</div> </div>
<span class="btn-item" style="cursor: pointer;" @click="router.push('/layout/admin/accountSet')"> <span class="btn-item" style="cursor: pointer;"
@click="router.push('/layout/admin/accountSet')">
账户设置 账户设置
<ArrowRightOutlined /> <ArrowRightOutlined />
</span> </span>
</div> </div>
<a-divider /> <a-divider />
<div class="fee-title" style="padding-bottom: 15px;">资产账户</div> <div class="fee-title" style="padding-bottom: 15px;">资产账户</div>
<!-- 我的余额 --> <!-- 我的余额 -->
<div class="asset-item"> <div class="asset-item">
<div class="asset-icon-box balance-icon"> <!-- <div class="asset-icon-box balance-icon">
<WalletOutlined class="asset-icon" /> <WalletOutlined class="asset-icon" />
</div> </div> -->
<div class="asset-content"> <div class="asset-content">
<div class="asset-name">我的余额</div> <div class="asset-name">我的余额</div>
<div class="asset-value" v-if="userInfo.balance >= 0"> <div class="asset-value" v-if="userInfo.balance >= 0">
@ -140,12 +127,12 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 我的权益 --> <!-- 我的权益 -->
<div class="asset-item"> <div class="asset-item">
<div class="asset-icon-box coupon-icon"> <!-- <div class="asset-icon-box coupon-icon">
<TagOutlined class="asset-icon" /> <TagOutlined class="asset-icon" />
</div> </div> -->
<div class="asset-content"> <div class="asset-content">
<div class="asset-name">我的权益</div> <div class="asset-name">我的权益</div>
<div class="rights-info"> <div class="rights-info">
@ -155,14 +142,14 @@
<span class="rights-text">算力点</span> <span class="rights-text">算力点</span>
</div> </div>
<div class="rights-value"> <div class="rights-value">
<span class="rights-amount">{{ userInfo.computingPowerPoint}}</span> <span class="rights-amount">{{ userInfo.computingPowerPoint }}</span>
<span class="rights-unit">点</span> <span class="rights-unit">点</span>
</div> </div>
</div> </div>
<!-- 分割线 --> <!-- 分割线 -->
<div class="rights-divider"></div> <div class="rights-divider"></div>
<!-- 可用算力券 --> <!-- 可用算力券 -->
<div class="rights-item"> <div class="rights-item">
<div class="rights-label"> <div class="rights-label">
@ -180,7 +167,7 @@
</a-button> --> </a-button> -->
</div> </div>
</div> </div>
</div> </div>
<!-- <a-divider /> --> <!-- <a-divider /> -->
<!-- <div class="fee-links"> <!-- <div class="fee-links">
@ -234,14 +221,14 @@ const formatAmount = (amount: number): string => {
return amount.toFixed(2) return amount.toFixed(2)
} }
const certificationStatus = new Map<string, { name: string; color: string }>([ const certificationStatus = new Map<string, { name: string; color: string }>([
['PENDING_CERTIFICATION', { name: '待认证', color: '#faad14' }], ['PENDING_CERTIFICATION', { name: '待认证', color: '#faad14' }],
['CERTIFICATION_DFFILED', { name: '已提交', color: '#d9d9d9' }], // 注意拼写：DFFILED → FAILED? ['CERTIFICATION_DFFILED', { name: '已提交', color: '#d9d9d9' }], // 注意拼写：DFFILED → FAILED?
['CERTIFICATION_PASSED', { name: '认证通过', color: '#52c41a' }], ['CERTIFICATION_PASSED', { name: '认证通过', color: '#52c41a' }],
['CERTIFICATION_FAILED', { name: '认证失败', color: '#ff4d4f' }], ['CERTIFICATION_FAILED', { name: '认证失败', color: '#ff4d4f' }],
]); ]);
const getCertifyName = (status: string): { name: string; color: string } => { const getCertifyName = (status: string): { name: string; color: string } => {
return certificationStatus.get(status) ?? { name: '未认证', color: 'gray' }; return certificationStatus.get(status) ?? { name: '未认证', color: 'gray' };
}; };
// 格式化算力点显示（添加千分位） // 格式化算力点显示（添加千分位）
const formatComputingPoints = (points: number): string => { const formatComputingPoints = (points: number): string => {
@ -269,7 +256,7 @@ const goToRules = () => {
// 跳转到活动规则页面，假设路由为 '/invite/rules' // 跳转到活动规则页面，假设路由为 '/invite/rules'
// 如果是在新窗口打开，可以使用 window.open('/invite/rules', '_blank') // 如果是在新窗口打开，可以使用 window.open('/invite/rules', '_blank')
router.push('/invite/rules') router.push('/invite/rules')
// 或者使用外部链接 // 或者使用外部链接
// window.open('https://your-domain.com/invite-rules', '_blank') // window.open('https://your-domain.com/invite-rules', '_blank')
} }
@ -306,12 +293,15 @@ const goToInvoice = () => {
background: #fff; background: #fff;
} }
.gpu-card {
background: linear-gradient(180deg, rgba(250, 252, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.margin-top { .margin-top {
margin-top: 20px; margin-top: 20px;
} }
/* 实例卡片样式 */ /* 实例卡片样式 */
.stats-column { .stats-column {
display: flex; display: flex;
@ -387,7 +377,7 @@ const goToInvoice = () => {
justify-content: center; justify-content: center;
margin-right: 16px; margin-right: 16px;
flex-shrink: 0; flex-shrink: 0;
.anticon { .anticon {
font-size: 24px; font-size: 24px;
color: #1890ff; color: #1890ff;
@ -395,7 +385,9 @@ const goToInvoice = () => {
} }
.status-text { .status-text {
width: 100%;
flex: 1; flex: 1;
text-align: center;
} }
.status-title { .status-title {
@ -413,10 +405,8 @@ const goToInvoice = () => {
} }
.invite-actions { .invite-actions {
display: flex; width: 100%;
align-items: center; text-align: center;
gap: 16px;
margin-top: 8px;
} }
.generate-btn { .generate-btn {
@ -428,18 +418,18 @@ const goToInvoice = () => {
border: none; border: none;
box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1); box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3); box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
background: linear-gradient(90deg, #40a9ff, #5cdbd3); background: linear-gradient(90deg, #40a9ff, #5cdbd3);
} }
&:active { &:active {
transform: translateY(0); transform: translateY(0);
box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1); box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
} }
.anticon { .anticon {
margin-right: 6px; margin-right: 6px;
} }
@ -451,11 +441,11 @@ const goToInvoice = () => {
height: auto; height: auto;
font-size: 14px; font-size: 14px;
color: #1890ff; color: #1890ff;
&:hover { &:hover {
color: #40a9ff; color: #40a9ff;
} }
.anticon { .anticon {
margin-right: 4px; margin-right: 4px;
font-size: 14px; font-size: 14px;
@ -474,13 +464,13 @@ const goToInvoice = () => {
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
.anticon { .anticon {
color: #ff4d4f; color: #ff4d4f;
margin-right: 8px; margin-right: 8px;
font-size: 16px; font-size: 16px;
} }
span { span {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
@ -499,7 +489,7 @@ const goToInvoice = () => {
align-items: flex-start; align-items: flex-start;
margin-bottom: 16px; margin-bottom: 16px;
line-height: 1.5; line-height: 1.5;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -550,7 +540,7 @@ const goToInvoice = () => {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding: 12px 0; padding: 12px 0;
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5;
} }
@ -566,11 +556,11 @@ const goToInvoice = () => {
margin-right: 12px; margin-right: 12px;
margin-top: 2px; margin-top: 2px;
flex-shrink: 0; flex-shrink: 0;
&.balance-icon { &.balance-icon {
background: #1890ff; background: #1890ff;
} }
&.coupon-icon { &.coupon-icon {
background: #fa8c16; background: #fa8c16;
} }
@ -606,7 +596,7 @@ const goToInvoice = () => {
font-weight: 600; font-weight: 600;
color: #1890ff; color: #1890ff;
line-height: 1; line-height: 1;
&:before { &:before {
content: '¥'; content: '¥';
font-size: 14px; font-size: 14px;
@ -620,7 +610,7 @@ const goToInvoice = () => {
font-size: 12px; font-size: 12px;
color: #1890ff; color: #1890ff;
line-height: 1; line-height: 1;
&:hover { &:hover {
color: #40a9ff; color: #40a9ff;
} }
@ -641,7 +631,7 @@ const goToInvoice = () => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 4px 0; padding: 4px 0;
} }
.rights-label { .rights-label {
@ -689,14 +679,16 @@ const goToInvoice = () => {
/* 算力点特殊样式 */ /* 算力点特殊样式 */
.rights-item:first-child { .rights-item:first-child {
.rights-amount { .rights-amount {
color: #fa8c16; /* 算力点用橙色 */ color: #fa8c16;
/* 算力点用橙色 */
} }
} }
/* 算力券特殊样式 */ /* 算力券特殊样式 */
.rights-item:last-child { .rights-item:last-child {
.rights-amount { .rights-amount {
color: #1890ff; /* 算力券用蓝色 */ color: #1890ff;
/* 算力券用蓝色 */
} }
} }
@ -707,7 +699,7 @@ const goToInvoice = () => {
color: #999; color: #999;
line-height: 1; line-height: 1;
margin-top: 4px; margin-top: 4px;
&:hover { &:hover {
color: #1890ff; color: #1890ff;
} }
@ -731,6 +723,7 @@ const goToInvoice = () => {
.nav-account { .nav-account {
padding-left: 10px; padding-left: 10px;
margin-top: -20px;
:first-child { :first-child {
font-weight: 500; font-weight: 500;
@ -767,7 +760,7 @@ const goToInvoice = () => {
height: 20px; height: 20px;
font-size: 10px; font-size: 10px;
padding: 2px 5px; padding: 2px 5px;
margin-top: 42px; margin-top: 30px;
margin-left: 10px; margin-left: 10px;
border-radius: 5px; border-radius: 5px;
border: 1px solid rgba(166, 166, 166, 1); border: 1px solid rgba(166, 166, 166, 1);
@ -786,7 +779,7 @@ const goToInvoice = () => {
height: auto; height: auto;
color: #1890ff; color: #1890ff;
font-size: 12px; font-size: 12px;
&:hover { &:hover {
color: #40a9ff; color: #40a9ff;
} }
@ -802,7 +795,7 @@ const goToInvoice = () => {
.invite-container { .invite-container {
flex-direction: column; flex-direction: column;
} }
.invite-content { .invite-content {
padding-right: 0; padding-right: 0;
border-right: none; border-right: none;
@ -810,17 +803,17 @@ const goToInvoice = () => {
padding-bottom: 24px; padding-bottom: 24px;
margin-bottom: 24px; margin-bottom: 24px;
} }
.rules-section { .rules-section {
padding-left: 0; padding-left: 0;
} }
.invite-actions { .invite-actions {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 12px;
} }
.rules-link { .rules-link {
margin-left: 0; margin-left: 0;
} }