feat: frontend credit system UI

Admin:
- New CreditManagement.vue (tabs: rates, packages, plans, user credits, consumptions, stats)
- Sidebar menu + router entry
- Full CRUD for credit packages and subscription plans
- User credit balance adjustment
- Consumption log viewer

User:
- Credits.vue replaces Upgrade.vue (package purchase, subscription, history tabs)
- Credit balance display in topbar + dashboard header CTA card
- Navigation restructured: discovery first
- Profile redirects to /credits
- Dashboard upgrade dialog simplified to redirect to /credits
This commit is contained in:
TradeMate Dev
2026-06-12 11:00:22 +08:00
parent 2a107a42f3
commit a95e8b2b73
10 changed files with 714 additions and 11 deletions
+20 -3
View File
@@ -20,10 +20,24 @@
style="margin-bottom:16px"
>
<template #default>
<span>试用结束后将自动恢复为免费版 <el-button text type="primary" size="small" @click="showUpgrade = true">立即升级正式版</el-button></span>
<span>试用结束后将自动恢复为免费版 <el-button text type="primary" size="small" @click="$router.push('/credits')">购买更多次数</el-button></span>
</template>
</el-alert>
<el-card shadow="never" style="margin-bottom:16px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff">
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0">
<div>
<div style="font-size:14px;opacity:0.9">信用余额</div>
<div style="font-size:28px;font-weight:700">{{ creditBalance ?? '...' }} </div>
</div>
<div style="text-align:right">
<el-button type="primary" @click="$router.push('/discovery')" style="margin-bottom:4px">发现新客户</el-button>
<br>
<el-button text style="color:#fff;opacity:0.8" @click="$router.push('/credits')">购买次数 </el-button>
</div>
</div>
</el-card>
<el-row :gutter="20">
<el-col :xs="12" :sm="6" v-for="item in stats" :key="item.label">
<el-card shadow="hover" class="stat-card" @click="item.route && $router.push(item.route)">
@@ -37,7 +51,7 @@
<template #header>
<div class="card-header">
<span class="section-title">本月用量</span>
<el-button v-if="usageStats.tier !== 'enterprise'" text type="primary" size="small" @click="showUpgrade = true">升级以获取更多额度</el-button>
<el-button v-if="usageStats.tier !== 'enterprise'" text type="primary" size="small" @click="$router.push('/credits')">购买更多次数</el-button>
</div>
</template>
<div class="usage-grid">
@@ -139,7 +153,7 @@
</el-table-column>
</el-table>
<div style="text-align:center;margin-top:20px">
<el-button type="primary" size="large" @click="$router.push('/upgrade')">立即升级</el-button>
<el-button type="primary" size="large" @click="$router.push('/credits')">购买次数</el-button>
</div>
</el-dialog>
</div>
@@ -148,6 +162,7 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { getCreditBalance } from '@/api'
import { getAnalyticsOverview, translate, getFollowupPending, getSilentCustomers, getUsageStats } from '@/api'
const auth = useAuthStore()
@@ -160,6 +175,7 @@ const followups = ref([])
const silentCustomers = ref([])
const usageStats = ref({ tier: 'free', limits: {}, usage: {} })
const showUpgrade = ref(false)
const creditBalance = ref(null)
const usageItems = computed(() => {
const u = usageStats.value.usage || {}
@@ -206,6 +222,7 @@ const features = [
onMounted(async () => {
try {
getCreditBalance().then(res => { creditBalance.value = res.balance }).catch(() => {})
const [overview, fup, silent, usage] = await Promise.all([
getAnalyticsOverview().catch(() => null),
getFollowupPending().catch(() => []),