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

user-frontend/src/api/index.js

@@ -119,4 +119,16 @@ export function getUsageStats() { return http.get('/usage/stats') }
 export function aiChat(message, history = []) { return http.post('/ai/chat', { message, history }) }
 export function aiQuickQuestions() { return http.get('/ai/quick-questions') }
 
+export function getCreditBalance() { return http.get('/credits/balance') }
+export function getCreditHistory(params) { return http.get('/credits/history', { params }) }
+export function getCreditPackages() { return http.get('/credits/packages') }
+export function getSubscriptionPlans() { return http.get('/credits/subscription-plans') }
+export function purchaseCreditPackage(packageId, payType = 'alipay') {
+  return http.post('/credits/purchase', { package_id: packageId, pay_type: payType })
+}
+export function subscribeCreditPlan(planId, payType = 'alipay') {
+  return http.post('/credits/subscribe', { plan_id: planId, pay_type: payType })
+}
+export function cancelCreditSubscription() { return http.post('/credits/cancel-subscription') }
+
 export default http

user-frontend/src/layouts/UserLayout.vue

@@ -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; }

user-frontend/src/router/index.js

@@ -56,7 +56,7 @@ const routes = [
     component: () => import('@/layouts/UserLayout.vue'),
     meta: { requiresAuth: true },
     children: [
-      { path: '', name: 'Discovery', component: () => import('@/views/Discovery.vue'), meta: { title: '挖掘新客' } },
+      { path: '', name: 'Discovery', component: () => import('@/views/Discovery.vue'), meta: { title: '发现客户' } },
     ]
   },
   {
@@ -100,11 +100,11 @@ const routes = [
     ]
   },
   {
-    path: '/upgrade',
+    path: '/credits',
     component: () => import('@/layouts/UserLayout.vue'),
     meta: { requiresAuth: true },
     children: [
-      { path: '', name: 'Upgrade', component: () => import('@/views/Upgrade.vue'), meta: { title: '升级会员' } },
+      { path: '', name: 'Credits', component: () => import('@/views/Credits.vue'), meta: { title: '购买次数' } },
     ]
   },
   {

user-frontend/src/views/Credits.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="credits-page">
+    <div class="balance-card" v-if="balance">
+      <el-card>
+        <div class="balance-header">
+          <div>
+            <div class="balance-label">当前余额</div>
+            <div class="balance-amount">{{ balance.balance }} <small>次</small></div>
+          </div>
+          <div class="balance-sub">
+            <span>已购买 {{ balance.total_purchased }} 次</span>
+            <span>已使用 {{ balance.total_used }} 次</span>
+          </div>
+          <div v-if="balance.subscription" class="subscription-info">
+            <el-tag type="success" v-if="balance.subscription.auto_renew">订阅中</el-tag>
+            <span v-if="balance.subscription.expires_at">到期 {{ balance.subscription.expires_at?.split('T')[0] }}</span>
+          </div>
+        </div>
+      </el-card>
+    </div>
+
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="购买次数" name="packages">
+        <div class="package-grid">
+          <div v-for="pkg in packages" :key="pkg.id" class="package-card" @click="buyPackage(pkg)">
+            <div class="pkg-name">{{ pkg.name }}</div>
+            <div class="pkg-name-en">{{ pkg.name_en }}</div>
+            <div class="pkg-credits">{{ pkg.credits }} <small>次</small></div>
+            <div class="pkg-price">
+              <span class="current">¥{{ pkg.price }}</span>
+              <span v-if="pkg.original_price" class="original">¥{{ pkg.original_price }}</span>
+            </div>
+            <div class="pkg-unit">≈ ¥{{ (pkg.price / pkg.credits).toFixed(2) }}/次</div>
+            <el-button type="primary" class="pkg-btn">立即购买</el-button>
+          </div>
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="订阅套餐" name="subscription">
+        <div class="plan-grid">
+          <div v-for="plan in subscriptionPlans" :key="plan.id" class="plan-card">
+            <div class="plan-name">{{ plan.name }}</div>
+            <div class="plan-name-en">{{ plan.name_en }}</div>
+            <div class="plan-credits">{{ plan.credits_per_month }} <small>次/月</small></div>
+            <div class="plan-price">¥{{ plan.price }}<small>/月</small></div>
+            <div class="plan-unit">≈ ¥{{ (plan.price / plan.credits_per_month).toFixed(2) }}/次</div>
+            <el-button type="warning" class="plan-btn" @click="subscribePlan(plan)">开通订阅</el-button>
+          </div>
+        </div>
+        <el-card v-if="balance?.subscription" style="margin-top:16px">
+          <div style="display:flex;align-items:center;justify-content:space-between">
+            <span>当前订阅状态: <el-tag type="success">已订阅</el-tag></span>
+            <el-button size="small" @click="cancelSubscription">取消自动续费</el-button>
+          </div>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="消费记录" name="history">
+        <el-table :data="history" border stripe v-loading="historyLoading">
+          <el-table-column prop="created_at" label="时间" width="160" />
+          <el-table-column prop="result_type" label="功能" width="140" />
+          <el-table-column prop="credits_change" label="变化" width="80">
+            <template #default="{ row }">
+              <span :style="{ color: row.credits_change < 0 ? '#f56c6c' : '#67c23a', fontWeight: 'bold' }">
+                {{ row.credits_change > 0 ? '+' : '' }}{{ row.credits_change }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="balance_after" label="余额" width="70" />
+          <el-table-column prop="source" label="来源" width="120" />
+          <el-table-column prop="description" label="说明" />
+        </el-table>
+        <el-pagination
+          v-if="historyTotal > historySize"
+          v-model:current-page="historyPage"
+          :page-size="historySize"
+          :total="historyTotal"
+          layout="prev, pager, next"
+          style="margin-top:16px;justify-content:center"
+          @current-change="loadHistory"
+        />
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dialog v-model="showPayDialog" title="选择支付方式" width="360px">
+      <p style="margin-bottom:12px">购买 <strong>{{ selectedPkg?.name }}</strong> ({{ selectedPkg?.credits }}次)</p>
+      <p style="font-size:20px;font-weight:bold;color:#e6a23c;margin-bottom:16px">¥{{ selectedPkg?.price }}</p>
+      <el-radio-group v-model="payType" style="display:flex;gap:16px;justify-content:center;margin-bottom:16px">
+        <el-radio-button value="alipay">支付宝</el-radio-button>
+        <el-radio-button value="wechat">微信支付</el-radio-button>
+      </el-radio-group>
+      <template #footer>
+        <el-button @click="showPayDialog = false">取消</el-button>
+        <el-button type="primary" @click="confirmPurchase" :loading="paying">确认支付</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="showQrDialog" title="扫码支付" width="320px">
+      <div style="text-align:center">
+        <img v-if="qrCodeUrl" :src="qrCodeUrl" style="width:240px;height:240px" />
+        <p v-else>加载中...</p>
+        <p style="color:#999;margin-top:12px">请使用{{ payType === 'alipay' ? '支付宝' : '微信' }}扫码支付</p>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import {
+  getCreditBalance, getCreditHistory, getCreditPackages, getSubscriptionPlans,
+  purchaseCreditPackage, subscribeCreditPlan, cancelCreditSubscription,
+} from '@/api'
+
+const activeTab = ref('packages')
+const balance = ref(null)
+const packages = ref([])
+const subscriptionPlans = ref([])
+const history = ref([])
+const historyLoading = ref(false)
+const historyPage = ref(1)
+const historySize = ref(10)
+const historyTotal = ref(0)
+
+const showPayDialog = ref(false)
+const selectedPkg = ref(null)
+const payType = ref('alipay')
+const paying = ref(false)
+const showQrDialog = ref(false)
+const qrCodeUrl = ref('')
+
+async function loadBalance() {
+  try { balance.value = await getCreditBalance() } catch (e) { /* ignore */ }
+}
+async function loadPackages() {
+  try { packages.value = await getCreditPackages() } catch (e) { ElMessage.error('加载失败') }
+}
+async function loadPlans() {
+  try { subscriptionPlans.value = await getSubscriptionPlans() } catch (e) { /* ignore */ }
+}
+async function loadHistory(page) {
+  if (page) historyPage.value = page
+  historyLoading.value = true
+  try {
+    const res = await getCreditHistory({ page: historyPage.value, size: historySize.value })
+    history.value = res.items
+    historyTotal.value = res.total
+  } catch (e) { /* ignore */ }
+  historyLoading.value = false
+}
+
+function buyPackage(pkg) {
+  selectedPkg.value = pkg
+  showPayDialog.value = true
+}
+async function confirmPurchase() {
+  if (!selectedPkg.value) return
+  paying.value = true
+  try {
+    const res = await purchaseCreditPackage(selectedPkg.value.id, payType.value)
+    if (res.code_url) {
+      qrCodeUrl.value = res.code_url
+      showPayDialog.value = false
+      showQrDialog.value = true
+    } else if (res.pay_url) {
+      window.open(res.pay_url, '_blank')
+      showPayDialog.value = false
+    } else {
+      ElMessage.success('购买成功')
+      showPayDialog.value = false
+      await loadBalance()
+    }
+  } catch (e) {
+    ElMessage.error(e?.detail || '支付失败')
+  }
+  paying.value = false
+}
+
+async function subscribePlan(plan) {
+  try {
+    await ElMessage.success('订阅功能开发中，即将开放')
+  } catch (e) { /* ignore */ }
+}
+async function cancelSubscription() {
+  try {
+    await cancelCreditSubscription()
+    ElMessage.success('已取消自动续费')
+    await loadBalance()
+  } catch (e) { ElMessage.error(e?.detail || '取消失败') }
+}
+
+onMounted(() => {
+  loadBalance()
+  loadPackages()
+  loadPlans()
+  loadHistory(1)
+})
+</script>
+
+<style scoped>
+.credits-page { max-width: 960px; margin: 0 auto; }
+.balance-card { margin-bottom: 24px; }
+.balance-header { display: flex; align-items: center; gap: 24px; }
+.balance-label { font-size: 14px; color: #999; }
+.balance-amount { font-size: 36px; font-weight: 700; color: #e6a23c; }
+.balance-amount small { font-size: 16px; }
+.balance-sub { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #999; }
+.subscription-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #666; }
+.package-grid, .plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
+.package-card, .plan-card {
+  background: #fff; border: 1px solid #e8e8e8; border-radius: 12px;
+  padding: 24px; text-align: center; cursor: pointer; transition: all 0.2s;
+}
+.package-card:hover, .plan-card:hover { border-color: #1890ff; box-shadow: 0 4px 12px rgba(24,144,255,0.1); transform: translateY(-2px); }
+.pkg-name, .plan-name { font-size: 18px; font-weight: 600; }
+.pkg-name-en, .plan-name-en { font-size: 12px; color: #999; margin-bottom: 8px; }
+.pkg-credits, .plan-credits { font-size: 32px; font-weight: 700; color: #1890ff; }
+.pkg-credits small, .plan-credits small { font-size: 14px; }
+.pkg-price { margin: 8px 0; }
+.pkg-price .current { font-size: 22px; font-weight: 700; color: #e6a23c; }
+.pkg-price .original { font-size: 14px; color: #999; text-decoration: line-through; margin-left: 8px; }
+.plan-price { font-size: 24px; font-weight: 700; color: #e6a23c; margin: 8px 0; }
+.plan-price small { font-size: 14px; }
+.pkg-unit, .plan-unit { font-size: 12px; color: #999; margin-bottom: 12px; }
+.pkg-btn, .plan-btn { width: 100%; }
+</style>

user-frontend/src/views/Profile.vue

@@ -11,8 +11,8 @@
           </div>
           <el-divider style="margin:8px 0" />
           <div class="profile-menu">
-            <div class="menu-item" @click="$router.push('/upgrade')">
-              <el-icon><Crown /></el-icon><span>升级会员</span>
+            <div class="menu-item" @click="$router.push('/credits')">
+              <el-icon><Coin /></el-icon><span>购买次数</span>
             </div>
             <div class="menu-item" @click="$router.push('/certification')">
               <el-icon><Stamp /></el-icon><span>实名认证</span>

user-frontend/src/views/Workspace.vue

@@ -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(() => []),