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
+25 -3
View File
@@ -16,13 +16,13 @@
:collapse-transition="false"
@select="showMobileMenu = false"
>
<el-menu-item index="/discovery"><el-icon><Search /></el-icon><span>发现客户</span></el-menu-item>
<el-menu-item index="/workspace"><el-icon><Odometer /></el-icon><span>工作台</span></el-menu-item>
<el-menu-item index="/translate"><el-icon><ChatLineSquare /></el-icon><span>智能翻译</span></el-menu-item>
<el-menu-item index="/customers"><el-icon><User /></el-icon><span>客户管理</span></el-menu-item>
<el-menu-item index="/products"><el-icon><Goods /></el-icon><span>产品库</span></el-menu-item>
<el-menu-item index="/quotations"><el-icon><DocumentCopy /></el-icon><span>报价单</span></el-menu-item>
<el-menu-item index="/translate"><el-icon><ChatLineSquare /></el-icon><span>智能翻译</span></el-menu-item>
<el-menu-item index="/marketing"><el-icon><Promotion /></el-icon><span>营销素材</span></el-menu-item>
<el-menu-item index="/discovery"><el-icon><Search /></el-icon><span>挖掘新客</span></el-menu-item>
<el-menu-item index="/followup"><el-icon><Message /></el-icon><span>智能跟进</span></el-menu-item>
<el-menu-item index="/analytics"><el-icon><DataAnalysis /></el-icon><span>数据分析</span></el-menu-item>
<el-menu-item index="/team"><el-icon><UserFilled /></el-icon><span>团队协作</span></el-menu-item>
@@ -39,6 +39,10 @@
<el-breadcrumb-item v-if="route.meta?.title" :to="route.path">{{ route.meta.title }}</el-breadcrumb-item>
</el-breadcrumb>
<div class="topbar-right">
<el-button v-if="creditBalance !== null" text class="credit-btn" @click="$router.push('/credits')">
<el-icon><Coin /></el-icon>
<span class="credit-text">{{ creditBalance }} </span>
</el-button>
<el-badge :value="unread" :hidden="!unread" class="notif-badge">
<el-button text style="font-size:18px" @click="$router.push('/notifications')">
<el-icon><Bell /></el-icon>
@@ -86,7 +90,7 @@
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { getUnreadCount } from '@/api'
import { getUnreadCount, getCreditBalance } from '@/api'
import AiAssistant from '@/components/AiAssistant.vue'
const route = useRoute()
@@ -95,6 +99,22 @@ const auth = useAuthStore()
const collapsed = ref(false)
const showMobileMenu = ref(false)
const unread = ref(0)
const creditBalance = ref(null)
async function loadCreditBalance() {
try {
const res = await getCreditBalance()
creditBalance.value = res.balance
} catch (e) { creditBalance.value = null }
}
onMounted(async () => {
try {
const res = await getUnreadCount()
unread.value = res.count || res || 0
} catch { /* ignore */ }
loadCreditBalance()
})
const beianInfo = computed(() => {
const hostname = window.location.hostname
@@ -143,6 +163,8 @@ function handleLogout() {
.footer-links a:hover { color: #1890ff; }
.gongan-link { display: inline-flex; align-items: center; gap: 4px; }
.gongan-icon { height: 14px; vertical-align: middle; }
.credit-btn { display: flex; align-items: center; gap: 4px; color: #e6a23c !important; font-weight: 600; }
.credit-text { font-size: 13px; }
@media (max-width: 768px) {
.sidebar { position: fixed; left: -220px; top: 0; bottom: 0; z-index: 1000; transition: left 0.3s; }