优化控制台样式

This commit is contained in:
Leo_Ding 2026-01-14 11:18:50 +08:00
parent 0f00347a00
commit 5895cc6b16
11 changed files with 260 additions and 270 deletions

View File

@ -607,11 +607,12 @@ const showUnbindAgreement = () => {
<style scoped> <style scoped>
.bank-card-container { .bank-card-container {
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 20px;
padding: 32px; padding: 32px;
background-color: #fff; background-color: #fff;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); border: 1px solid #f0f0f0;
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); */
min-height: 400px; min-height: 400px;
} }

View File

@ -17,7 +17,7 @@
<!-- 余额和充值部分 --> <!-- 余额和充值部分 -->
<div class="balance-section"> <div class="balance-section">
<!-- 余额卡片带充值方式 --> <!-- 余额卡片带充值方式 -->
<a-card class="balance-card" :bordered="false"> <a-card >
<div class="balance-header"> <div class="balance-header">
<div class="balance-info"> <div class="balance-info">
<div class="balance-amount"> <div class="balance-amount">
@ -87,7 +87,7 @@
</div> </div>
<!-- 充值记录 --> <!-- 充值记录 -->
<a-card class="records-card" title="充值记录"> <a-card title="充值记录">
<!-- 筛选条件 --> <!-- 筛选条件 -->
<div class="filter-section"> <div class="filter-section">
<a-range-picker v-model:value="dateRange" format="YYYY-MM-DD" placeholder="开始时间 - 结束时间" <a-range-picker v-model:value="dateRange" format="YYYY-MM-DD" placeholder="开始时间 - 结束时间"
@ -407,9 +407,9 @@ onMounted(() => {
<style scoped> <style scoped>
.recharge-page { .recharge-page {
padding: 24px; padding: 20px;
background-color: #fafafa; background-color: #ffffff;
min-height: 100vh; /* min-height: 100vh; */
} }
.breadcrumb { .breadcrumb {

View File

@ -1,87 +1,87 @@
<template> <template>
<a-row :gutter="[18, 18]"> <div style="margin: 20px;">
<a-row :gutter="[18, 18]">
<a-col :span="24"> <a-col :span="24">
<a-card title="开票记录"> <a-card title="开票记录">
<a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState" <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"
@change="onTableChange" /> @change="onTableChange" />
</a-card>
</a-col>
</a-row>
<a-modal v-model:open="visibleOpen" title="发票信息" @ok="handleOk" style="width: 800px;">
<a-card>
<a-form ref="formRef" :model="formData" labelAlign="left" :rules="rules">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="发票抬头" name="title">
<a-input v-model:value="formData.title" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="发票类型" name="type">
<a-radio-group v-model:value="formData.type" button-style="solid">
<a-radio-button value="a">增值税发票</a-radio-button>
<a-radio-button value="b">增值税专用发票</a-radio-button>
</a-radio-group>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="纳税人识别号" name="number">
<a-input v-model:value="formData.number" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="开户银行名称" name="bankName">
<a-input v-model:value="formData.bankName" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="基本开户账号" name="bankNumber">
<a-input v-model:value="formData.bankNumber" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="注册场所地址" name="address">
<a-input v-model:value="formData.address" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="注册固定电话" name="phone">
<a-input v-model:value="formData.phone" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收件人姓名" name="recipientName">
<a-input v-model:value="formData.recipientName" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收件人手机号" name="recipientPhone">
<a-input v-model:value="formData.recipientPhone" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收件人地址" name="recipientAddress">
<a-input v-model:value="formData.recipientAddress" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="邮箱地址" name="emailAddress">
<a-input v-model:value="formData.emailAddress" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card> </a-card>
</a-col> </a-modal>
</a-row> </div>
<a-modal v-model:open="visibleOpen" title="发票信息" @ok="handleOk" style="width: 800px;">
<a-card>
<a-form ref="formRef" :model="formData" labelAlign="left" :rules="rules">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="发票抬头" name="title">
<a-input v-model:value="formData.title" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="发票类型" name="type">
<a-radio-group v-model:value="formData.type" button-style="solid">
<a-radio-button value="a">增值税发票</a-radio-button>
<a-radio-button value="b">增值税专用发票</a-radio-button>
</a-radio-group>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="纳税人识别号" name="number">
<a-input v-model:value="formData.number" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="开户银行名称" name="bankName">
<a-input v-model:value="formData.bankName" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="基本开户账号" name="bankNumber">
<a-input v-model:value="formData.bankNumber" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="注册场所地址" name="address">
<a-input v-model:value="formData.address" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="注册固定电话" name="phone">
<a-input v-model:value="formData.phone" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收件人姓名" name="recipientName">
<a-input v-model:value="formData.recipientName" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收件人手机号" name="recipientPhone">
<a-input v-model:value="formData.recipientPhone" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="收件人地址" name="recipientAddress">
<a-input v-model:value="formData.recipientAddress" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="邮箱地址" name="emailAddress">
<a-input v-model:value="formData.emailAddress" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
</a-modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onBeforeMount, computed } from 'vue' import { ref, onBeforeMount, computed } from 'vue'
import { usePagination } from '@/hooks' import { usePagination } from '@/hooks'
import { import {
invoiceList, invoiceList,
invoiceDetail invoiceDetail
} from '@/apis/admin' } from '@/apis/admin'
// const listData=ref([ {title:1}]) // const listData=ref([ {title:1}])
@ -94,8 +94,8 @@ import {
// }) // })
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination() const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
const visibleOpen = ref(false) const visibleOpen = ref(false)
const formData = ref({ type: 'a' }) const formData = ref<any>({ type: 'a' })
const formRef=ref(null) const formRef = ref(null)
const rules = computed(() => ({ const rules = computed(() => ({
title: [{ required: true, message: '请输入发票标题', trigger: 'blur' }], title: [{ required: true, message: '请输入发票标题', trigger: 'blur' }],
type: [{ required: true, message: '请选择发票类型', trigger: 'change' }], type: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
@ -155,24 +155,24 @@ onBeforeMount(() => {
}) })
const getPageList = async () => { const getPageList = async () => {
try { try {
const params = { const params = {
page_num: 1, page_num: 1,
page_size: 10, // page_size: 10, //
}; };
const response: any = await invoiceList(params); const response: any = await invoiceList(params);
if (response.data && Array.isArray(response.data)) { if (response.data && Array.isArray(response.data)) {
listData.value = response.data listData.value = response.data
console.log('发票列表:', response.data); console.log('发票列表:', response.data);
}
} catch (error) {
console.error('获取全部消息失败:', error);
listData.value = [];
} }
} catch (error) {
console.error('获取全部消息失败:', error);
listData.value = [];
}
}; };
/** /**
* 分页 * 分页
@ -200,7 +200,7 @@ function handleResetSearch() {
function handleOk() { function handleOk() {
visibleOpen.value = false visibleOpen.value = false
formRef.value.validateFields().then(async(values)=>{ formRef.value.validateFields().then(async (values) => {
try { try {
} catch (error) { } catch (error) {

View File

@ -4,7 +4,7 @@
<a-row :gutter="24" class="asset-cards"> <a-row :gutter="24" class="asset-cards">
<!-- 左侧可用余额卡片 --> <!-- 左侧可用余额卡片 -->
<a-col :span="8"> <a-col :span="8">
<a-card :bordered="false" class="card balance-card" title="可用余额"> <a-card class="card balance-card" title="可用余额">
<template #extra><a-button type="link" size="small" class="fee-titleb" <template #extra><a-button type="link" size="small" class="fee-titleb"
@click="goToBills">查看消费明细</a-button></template> @click="goToBills">查看消费明细</a-button></template>
<div class="money">¥ {{ formatAmount(userInfo.balance || 0) }}</div> <div class="money">¥ {{ formatAmount(userInfo.balance || 0) }}</div>
@ -18,7 +18,7 @@
<!-- 右侧算力点和算力券卡片 --> <!-- 右侧算力点和算力券卡片 -->
<a-col :span="16"> <a-col :span="16">
<!-- 算力点卡片 --> <!-- 算力点卡片 -->
<a-card title="算力点" :bordered="false" class="card computing-card"> <a-card title="算力点" class="card computing-card">
<div class="computing-content"> <div class="computing-content">
<div class="computing-amount"> <div class="computing-amount">
<span class="amount-value">{{ '¥' + formatAmount(userInfo.computingPowerPoint || 0) <span class="amount-value">{{ '¥' + formatAmount(userInfo.computingPowerPoint || 0)
@ -32,7 +32,7 @@
</a-card> </a-card>
<!-- 算力券卡片 --> <!-- 算力券卡片 -->
<a-card title="算力券" :bordered="false" class="card coupon-card"> <a-card title="算力券" class="card coupon-card">
<div class="coupon-content"> <div class="coupon-content">
<div class="coupon-amount"> <div class="coupon-amount">
<span class="amount-value">{{ userInfo.voucherNum }}</span> <span class="amount-value">{{ userInfo.voucherNum }}</span>
@ -263,9 +263,8 @@ const handleOk = async () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.home-page { .home-page {
padding: 24px; padding: 20px;
background: #f0f2f5; background: #ffffff;
min-height: 100vh;
} }
.asset-cards { .asset-cards {
@ -280,7 +279,7 @@ const handleOk = async () => {
.card { .card {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
background: #fff; background: #fff;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
height: 100%; height: 100%;

View File

@ -1,4 +1,5 @@
<template> <template>
<div style="margin: 20px;">
<a-row :gutter="[24, 18]"> <a-row :gutter="[24, 18]">
<a-col :span="24"> <a-col :span="24">
<a-card> <a-card>
@ -327,6 +328,7 @@
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

View File

@ -1,97 +1,72 @@
<template> <template>
<a-card title="我的消息"> <div style="margin: 20px;">
<a-tabs v-model:activeKey="activeKey"> <a-card title="我的消息">
<!-- 使用customRender来渲染带徽章的标签 --> <a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="all"> <!-- 使用customRender来渲染带徽章的标签 -->
<template #tab> <a-tab-pane key="all">
<span class="tab-label"> <template #tab>
全部 <span class="tab-label">
<a-badge 全部
v-if="allUnreadCount > 0" <a-badge v-if="allUnreadCount > 0" :count="allUnreadCount" class="tab-badge" :offset="[5, -2]" />
:count="allUnreadCount" </span>
class="tab-badge" </template>
:offset="[5, -2]" </a-tab-pane>
/>
</span>
</template>
</a-tab-pane>
<a-tab-pane key="money"> <a-tab-pane key="money">
<template #tab> <template #tab>
<span class="tab-label"> <span class="tab-label">
资金消息 资金消息
<a-badge <a-badge v-if="moneyUnreadCount > 0" :count="moneyUnreadCount" class="tab-badge" :offset="[5, -2]" />
v-if="moneyUnreadCount > 0" </span>
:count="moneyUnreadCount" </template>
class="tab-badge" </a-tab-pane>
:offset="[5, -2]"
/>
</span>
</template>
</a-tab-pane>
<a-tab-pane key="secure"> <a-tab-pane key="secure">
<template #tab> <template #tab>
<span class="tab-label"> <span class="tab-label">
安全消息 安全消息
<a-badge <a-badge v-if="secureUnreadCount > 0" :count="secureUnreadCount" class="tab-badge" :offset="[5, -2]" />
v-if="secureUnreadCount > 0" </span>
:count="secureUnreadCount" </template>
class="tab-badge" </a-tab-pane>
:offset="[5, -2]"
/>
</span>
</template>
</a-tab-pane>
<a-tab-pane key="active"> <a-tab-pane key="active">
<template #tab> <template #tab>
<span class="tab-label"> <span class="tab-label">
活动消息 活动消息
<a-badge <a-badge v-if="activeUnreadCount > 0" :count="activeUnreadCount" class="tab-badge" :offset="[5, -2]" />
v-if="activeUnreadCount > 0" </span>
:count="activeUnreadCount" </template>
class="tab-badge" </a-tab-pane>
:offset="[5, -2]" </a-tabs>
/>
</span>
</template>
</a-tab-pane>
</a-tabs>
<a-table <a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
:columns="columns" :loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
:data-source="billData"
:pagination="pagination"
@change="handleTableChange"
:loading="loading"
class="bill-table"
:scroll="{ x: 1200 }"
bordered>
<!-- 消息类型列自定义渲染 --> <!-- 消息类型列自定义渲染 -->
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'messageType'"> <template v-if="column.dataIndex === 'messageType'">
<span :class="{ 'unread-title': !record.is_read }"> <span :class="{ 'unread-title': !record.is_read }">
{{ getMessageTypeText(record.messageType) }} {{ getMessageTypeText(record.messageType) }}
</span> </span>
</template>
<template v-else-if="column.dataIndex === 'title'">
<span :class="{ 'unread-title': !record.is_read, 'read-title': record.is_read }">
{{ record.title }}
</span>
</template>
<template v-else-if="column.dataIndex === 'is_read'">
<a-tag :class="record.is_read ? 'status-read' : 'status-unread'">
{{ record.is_read ? '已读' : '未读' }}
</a-tag>
</template>
</template> </template>
<template v-else-if="column.dataIndex === 'title'"> </a-table>
<span :class="{ 'unread-title': !record.is_read, 'read-title': record.is_read }"> </a-card>
{{ record.title }} </div>
</span>
</template>
<template v-else-if="column.dataIndex === 'is_read'">
<a-tag :class="record.is_read ? 'status-read' : 'status-unread'">
{{ record.is_read ? '已读' : '未读' }}
</a-tag>
</template>
</template>
</a-table>
</a-card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View File

@ -1,24 +1,26 @@
<template> <template>
<a-card title="算力券管理"> <div style="margin: 20px;">
<div style="width: 300px;border: 1px solid #e8e8e8;line-height: 45px;border-radius: 5px;"> <a-card title="算力券管理">
<div <div style="width: 300px;border: 1px solid #e8e8e8;line-height: 45px;border-radius: 5px;">
style="background: linear-gradient(90deg, rgba(240, 245, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);height: 45px;line-height: 45px;padding: 0 10px;"> <div
可用算力券</div> style="background: linear-gradient(90deg, rgba(240, 245, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);height: 45px;line-height: 45px;padding: 0 10px;">
<div style="font-size:18px;font-weight: bold;padding: 0 10px;">{{ couponTotal }}</div> 可用算力券</div>
</div> <div style="font-size:18px;font-weight: bold;padding: 0 10px;">{{ couponTotal }}</div>
<!-- 账单表格 --> </div>
<div style="margin-top: 20px;"> <!-- 账单表格 -->
<a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange" <div style="margin-top: 20px;">
:loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered> <a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
<template #bodyCell="{ column, record }"> :loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
<template v-if="column.key === 'status'"> <template #bodyCell="{ column, record }">
<a-tag v-if="record.status === 'enabled'" color="green">有效</a-tag> <template v-if="column.key === 'status'">
<a-tag v-else color="red">失效</a-tag> <a-tag v-if="record.status === 'enabled'" color="green">有效</a-tag>
<a-tag v-else color="red">失效</a-tag>
</template>
</template> </template>
</template> </a-table>
</a-table> </div>
</div> </a-card>
</a-card> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onBeforeMount, h } from 'vue'; import { ref, onBeforeMount, h } from 'vue';

View File

@ -1,42 +1,53 @@
<template> <template>
<a-card title="我的邀请"> <div style="margin: 20px;">
<div style="border-radius: 5px;display: flex;justify-content: space-between;border: 1px solid #e8e8e8;"> <a-card title="我的邀请">
<div> <div style="border-radius: 5px;display: flex;justify-content: space-between;border: 1px solid #e8e8e8;">
<div style="font-size:18px;padding: 0 20px;margin-top: 20px;">累计奖金</div> <div>
<div style="font-size:18px;font-weight: bold;padding: 0 20px;margin: 20px 0;">0.00</div> <div style="font-size:18px;padding: 0 20px;margin-top: 20px;">累计奖金</div>
<div style="display: flex;justify-content: space-between;align-items: center;gap: 60px;padding: 0 20px;line-height: 30px;"> <div style="font-size:18px;font-weight: bold;padding: 0 20px;margin: 20px 0;">0.00</div>
<div> <div
<div>方式一复制邀请链接</div> style="display: flex;justify-content: space-between;align-items: center;gap: 60px;padding: 0 20px;line-height: 30px;">
<div><span>http://example.com/invite/123456</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#1677ff;"><CopyOutlined /> </span></div> <div>
<div>方式一复制邀请链接</div>
<div><span>http://example.com/invite/123456</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
style="color:#1677ff;">
<CopyOutlined />
</span></div>
</div>
<div>
<div>方式二复制邀请码</div>
<div><span>http://example.com/invite/123456</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
style="color:#1677ff;">
<CopyOutlined />
</span></div>
</div>
</div> </div>
<div> </div>
<div>方式二复制邀请码</div> <div class="leftImg">
<div><span>http://example.com/invite/123456</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#1677ff;"><CopyOutlined /> </span></div> <div style="font-size:14px;padding: 0 20px;margin-top: 10px;text-align: right;color: #1677ff;">活动规则
</div> </div>
</div> </div>
</div> </div>
<div class="leftImg"> <div
<div style="font-size:14px;padding: 0 20px;margin-top: 10px;text-align: right;color: #1677ff;">活动规则</div> style="width: 100%;display: flex;justify-content: space-around;align-items: center;height: 150px;border: 1px solid #e8e8e8;margin-top: 20px;border-radius: 5px;">
<div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;">
<div>累计成功邀请人数</div>
<div><span style="font-weight: bold;font-size: 18px;">0</span> </div>
</div>
<div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;">
<div>累计获得奖金</div>
<div style="font-weight: bold;"><span style="font-weight: bold;font-size: 18px;">0.00</span></div>
</div>
</div> </div>
</div> <!-- 账单表格 -->
<div style="width: 100%;display: flex;justify-content: space-around;align-items: center;height: 150px;border: 1px solid #e8e8e8;margin-top: 20px;border-radius: 5px;"> <div style="margin-top: 20px;">
<div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;"> <div style="margin: 30px 0px 10px 0px;font-weight: bold;">邀请记录</div>
<div>累计成功邀请人数</div> <a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
<div ><span style="font-weight: bold;font-size: 18px;">0</span> </div> :loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
</a-table>
</div> </div>
<div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;"> </a-card>
<div>累计获得奖金</div> </div>
<div style="font-weight: bold;"><span style="font-weight: bold;font-size: 18px;">0.00</span></div>
</div>
</div>
<!-- 账单表格 -->
<div style="margin-top: 20px;">
<div style="margin: 30px 0px 10px 0px;font-weight: bold;">邀请记录</div>
<a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
:loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
</a-table>
</div>
</a-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';

View File

@ -163,8 +163,8 @@ onMounted(() => {
<style scoped> <style scoped>
.real-name-auth-page { .real-name-auth-page {
padding: 24px; padding: 20px;
background-color: #f5f7fa; background-color: #ffffff;
/* min-height: 100vh; */ /* min-height: 100vh; */
} }

View File

@ -294,7 +294,7 @@ onMounted(() => {
.image-table { .image-table {
background: white; background: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); // box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
@ -311,7 +311,7 @@ onMounted(() => {
margin-top: auto; margin-top: auto;
padding-top: 24px; padding-top: 24px;
text-align: right; text-align: right;
border-top: 1px solid #e8e8e8; // border-top: 1px solid #e8e8e8;
} }
} }

View File

@ -389,9 +389,9 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.instance-list { .instance-list {
padding: 24px; padding: 20px;
background: #f5f7fa; background: #ffffff;
min-height: calc(100vh - 48px); // min-height: calc(100vh - 48px);
} }
.header-section { .header-section {