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
2026-06-12 11:00:22 +08:00
parent 2a107a42f3
commit a95e8b2b73
10 changed files with 714 additions and 11 deletions
@@ -62,4 +62,22 @@ export function listPayments(params) { return http.get('/admin/payments', { para
 export function getPaymentStats() { return http.get('/admin/payments/stats') }
 export function adminRefund(order_no, reason = '') { return http.post('/admin/payments/refund', { order_no, reason }) }

+export function listCreditPackages() { return http.get('/admin/credit-packages') }
+export function createCreditPackage(data) { return http.post('/admin/credit-packages', data) }
+export function updateCreditPackage(id, data) { return http.put(`/admin/credit-packages/${id}`, data) }
+export function deleteCreditPackage(id) { return http.delete(`/admin/credit-packages/${id}`) }
+
+export function listSubscriptionPlans() { return http.get('/admin/subscription-plans') }
+export function createSubscriptionPlan(data) { return http.post('/admin/subscription-plans', data) }
+export function updateSubscriptionPlan(id, data) { return http.put(`/admin/subscription-plans/${id}`, data) }
+export function deleteSubscriptionPlan(id) { return http.delete(`/admin/subscription-plans/${id}`) }
+
+export function listUserCredits(page = 1, size = 20) { return http.get('/admin/user-credits', { params: { page, size } }) }
+export function adjustUserCredits(userId, credits, reason = '') {
+  return http.post('/admin/user-credits/adjust', { user_id: userId, credits, reason })
+}
+
+export function listCreditConsumptions(params) { return http.get('/admin/credit-consumptions', { params }) }
+export function getCreditStats() { return http.get('/admin/credit-stats') }
+
 export default http
@@ -30,6 +30,10 @@
          <el-icon><Wallet /></el-icon>
          <span>支付管理</span>
        </el-menu-item>
+        <el-menu-item index="/credits">
+          <el-icon><Coin /></el-icon>
+          <span>信用管理</span>
+        </el-menu-item>
        <el-menu-item index="/config">
          <el-icon><Setting /></el-icon>
          <span>配置</span>
@@ -44,6 +44,14 @@ const routes = [
      { path: '', name: 'Payments', component: () => import('@/views/Payments.vue'), meta: { title: '支付管理' } },
    ]
  },
+  {
+    path: '/credits',
+    component: AdminLayout,
+    meta: { requiresAuth: true },
+    children: [
+      { path: '', name: 'Credits', component: () => import('@/views/CreditManagement.vue'), meta: { title: '信用管理' } },
+    ]
+  },
  {
    path: '/config',
    component: AdminLayout,
@@ -0,0 +1,395 @@
+<template>
+  <div class="credit-management">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="消费速率" name="rates">
+        <el-card>
+          <el-alert title="各功能信用消耗速率" type="info" :closable="false" show-icon style="margin-bottom:16px" />
+          <el-table :data="rates" border stripe>
+            <el-table-column prop="feature" label="功能" width="200" />
+            <el-table-column prop="credits" label="消耗次数" width="120" />
+            <el-table-column prop="description" label="说明" />
+          </el-table>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="次数包管理" name="packages">
+        <el-card>
+          <div style="margin-bottom:12px">
+            <el-button type="primary" @click="showPackageDialog = true">添加次数包</el-button>
+          </div>
+          <el-table :data="packages" border stripe v-loading="loading.packages">
+            <el-table-column prop="name" label="名称" width="120" />
+            <el-table-column prop="name_en" label="英文名" width="120" />
+            <el-table-column prop="credits" label="次数" width="80" />
+            <el-table-column prop="price" label="价格(¥)" width="100" />
+            <el-table-column prop="price_usd" label="价格($)" width="100" />
+            <el-table-column prop="original_price" label="原价(¥)" width="100" />
+            <el-table-column prop="is_active" label="启用" width="80">
+              <template #default="{ row }">
+                <el-tag :type="row.is_active ? 'success' : 'info'">{{ row.is_active ? '是' : '否' }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="180" fixed="right">
+              <template #default="{ row }">
+                <el-button size="small" @click="editPackage(row)">编辑</el-button>
+                <el-button size="small" type="danger" @click="deletePackage(row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="订阅套餐" name="plans">
+        <el-card>
+          <div style="margin-bottom:12px">
+            <el-button type="primary" @click="showPlanDialog = true">添加套餐</el-button>
+          </div>
+          <el-table :data="plans" border stripe v-loading="loading.plans">
+            <el-table-column prop="name" label="名称" width="120" />
+            <el-table-column prop="name_en" label="英文名" width="120" />
+            <el-table-column prop="credits_per_month" label="月次数" width="100" />
+            <el-table-column prop="price" label="月费(¥)" width="100" />
+            <el-table-column prop="price_usd" label="月费($)" width="100" />
+            <el-table-column prop="is_active" label="启用" width="80">
+              <template #default="{ row }">
+                <el-tag :type="row.is_active ? 'success' : 'info'">{{ row.is_active ? '是' : '否' }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="180" fixed="right">
+              <template #default="{ row }">
+                <el-button size="small" @click="editPlan(row)">编辑</el-button>
+                <el-button size="small" type="danger" @click="deletePlan(row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="用户余额" name="userCredits">
+        <el-card>
+          <div style="margin-bottom:12px;display:flex;gap:12px;align-items:center">
+            <el-input v-model="searchUserId" placeholder="搜索用户ID" style="width:300px" clearable />
+            <el-button type="primary" @click="loadUserCredits">查询</el-button>
+          </div>
+          <el-table :data="userCredits" border stripe v-loading="loading.userCredits">
+            <el-table-column prop="username" label="用户名" width="120" />
+            <el-table-column prop="user_id" label="用户ID" width="240" show-overflow-tooltip />
+            <el-table-column prop="balance" label="余额" width="80" />
+            <el-table-column prop="total_purchased" label="总购买" width="80" />
+            <el-table-column prop="total_used" label="总消耗" width="80" />
+            <el-table-column prop="free_trial_used" label="试用已领" width="80">
+              <template #default="{ row }">
+                <el-tag :type="row.free_trial_used ? 'success' : 'info'">{{ row.free_trial_used ? '是' : '否' }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="160" fixed="right">
+              <template #default="{ row }">
+                <el-button size="small" @click="showAdjustDialog(row)">调整</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            v-if="userCreditTotal > userCreditSize"
+            v-model:current-page="userCreditPage"
+            :page-size="userCreditSize"
+            :total="userCreditTotal"
+            layout="prev, pager, next"
+            style="margin-top:16px;justify-content:center"
+            @current-change="loadUserCredits"
+          />
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="消费流水" name="consumptions">
+        <el-card>
+          <div style="margin-bottom:12px;display:flex;gap:12px">
+            <el-input v-model="consumptionUserId" placeholder="用户ID" style="width:200px" clearable />
+            <el-select v-model="consumptionType" placeholder="功能类型" clearable style="width:150px">
+              <el-option v-for="r in rateOptions" :key="r.feature" :label="r.feature" :value="r.feature" />
+            </el-select>
+            <el-button type="primary" @click="loadConsumptions(1)">查询</el-button>
+          </div>
+          <el-table :data="consumptions" border stripe v-loading="loading.consumptions">
+            <el-table-column prop="user_id" label="用户ID" width="220" show-overflow-tooltip />
+            <el-table-column prop="result_type" label="功能" width="120" />
+            <el-table-column prop="credits_change" label="变化" width="80">
+              <template #default="{ row }">
+                <span :style="{ color: row.credits_change < 0 ? '#f56c6c' : '#67c23a' }">
+                  {{ row.credits_change > 0 ? '+' : '' }}{{ row.credits_change }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="balance_after" label="余额" width="80" />
+            <el-table-column prop="source" label="来源" width="120" />
+            <el-table-column prop="description" label="说明" min-width="200" show-overflow-tooltip />
+            <el-table-column prop="created_at" label="时间" width="180" />
+          </el-table>
+          <el-pagination
+            v-if="consumptionTotal > consumptionSize"
+            v-model:current-page="consumptionPage"
+            :page-size="consumptionSize"
+            :total="consumptionTotal"
+            layout="prev, pager, next"
+            style="margin-top:16px;justify-content:center"
+            @current-change="loadConsumptions"
+          />
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="统计概览" name="stats">
+        <el-card>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-statistic title="总购买次数" :value="stats.total_purchased" />
+            </el-col>
+            <el-col :span="6">
+              <el-statistic title="总消耗次数" :value="stats.total_consumed" />
+            </el-col>
+            <el-col :span="6">
+              <el-statistic title="当前总余额" :value="stats.total_balance" />
+            </el-col>
+            <el-col :span="6">
+              <el-statistic title="活跃用户" :value="stats.total_users_with_credits" />
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dialog v-model="showPackageDialog" :title="editingPackage ? '编辑次数包' : '添加次数包'" width="500px">
+      <el-form :model="packageForm" label-width="100px">
+        <el-form-item label="名称"><el-input v-model="packageForm.name" /></el-form-item>
+        <el-form-item label="英文名"><el-input v-model="packageForm.name_en" /></el-form-item>
+        <el-form-item label="次数"><el-input-number v-model="packageForm.credits" :min="1" /></el-form-item>
+        <el-form-item label="价格(¥)"><el-input-number v-model="packageForm.price" :min="0" :precision="2" /></el-form-item>
+        <el-form-item label="价格($)"><el-input-number v-model="packageForm.price_usd" :min="0" :precision="2" /></el-form-item>
+        <el-form-item label="原价(¥)"><el-input-number v-model="packageForm.original_price" :min="0" :precision="2" /></el-form-item>
+        <el-form-item label="启用">
+          <el-switch v-model="packageForm.is_active" />
+        </el-form-item>
+        <el-form-item label="排序"><el-input-number v-model="packageForm.sort_order" /></el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showPackageDialog = false">取消</el-button>
+        <el-button type="primary" @click="savePackage">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="showPlanDialog" :title="editingPlan ? '编辑套餐' : '添加套餐'" width="500px">
+      <el-form :model="planForm" label-width="120px">
+        <el-form-item label="名称"><el-input v-model="planForm.name" /></el-form-item>
+        <el-form-item label="英文名"><el-input v-model="planForm.name_en" /></el-form-item>
+        <el-form-item label="月次数"><el-input-number v-model="planForm.credits_per_month" :min="1" /></el-form-item>
+        <el-form-item label="月费(¥)"><el-input-number v-model="planForm.price" :min="0" :precision="2" /></el-form-item>
+        <el-form-item label="月费($)"><el-input-number v-model="planForm.price_usd" :min="0" :precision="2" /></el-form-item>
+        <el-form-item label="天数"><el-input-number v-model="planForm.duration_days" :min="1" /></el-form-item>
+        <el-form-item label="启用"><el-switch v-model="planForm.is_active" /></el-form-item>
+        <el-form-item label="排序"><el-input-number v-model="planForm.sort_order" /></el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showPlanDialog = false">取消</el-button>
+        <el-button type="primary" @click="savePlan">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="showAdjustDialog" title="调整用户余额" width="400px">
+      <p>用户ID: {{ adjustTarget?.user_id }}</p>
+      <p>当前余额: {{ adjustTarget?.balance }}</p>
+      <el-form label-width="80px" style="margin-top:12px">
+        <el-form-item label="调整次数">
+          <el-input-number v-model="adjustCredits" :min="-99999" :precision="1" />
+        </el-form-item>
+        <el-form-item label="原因">
+          <el-input v-model="adjustReason" type="textarea" :rows="2" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showAdjustDialog = false">取消</el-button>
+        <el-button type="primary" @click="confirmAdjust">确认调整</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  listCreditPackages, createCreditPackage, updateCreditPackage, deleteCreditPackage,
+  listSubscriptionPlans, createSubscriptionPlan, updateSubscriptionPlan, deleteSubscriptionPlan,
+  listUserCredits, adjustUserCredits,
+  listCreditConsumptions, getCreditStats,
+} from '@/api'
+
+const activeTab = ref('stats')
+
+const rateOptions = [
+  { feature: 'lead_search', credits: 10, description: '客户搜索 (15条线索+AI匹配)' },
+  { feature: 'company_analysis', credits: 5, description: '公司深度分析' },
+  { feature: 'market_intel', credits: 20, description: '市场情报报告' },
+  { feature: 'translate_per_1000chars', credits: 1, description: '翻译 (每1000字符)' },
+  { feature: 'reply_suggest', credits: 2, description: '回复建议生成' },
+  { feature: 'outreach', credits: 3, description: '开发信生成' },
+  { feature: 'marketing_content', credits: 5, description: '营销素材生成' },
+  { feature: 'competitor_analysis', credits: 10, description: '竞品分析' },
+  { feature: 'ai_chat', credits: 1, description: 'AI助手对话' },
+  { feature: 'info_extract', credits: 1, description: '信息提取' },
+  { feature: 'followup_scan', credits: 2, description: '跟进扫描' },
+]
+
+const rates = ref(rateOptions)
+const packages = ref([])
+const plans = ref([])
+const userCredits = ref([])
+const consumptions = ref([])
+const stats = ref({ total_purchased: 0, total_consumed: 0, total_balance: 0, total_users_with_credits: 0 })
+
+const loading = reactive({ packages: false, plans: false, userCredits: false, consumptions: false })
+
+const showPackageDialog = ref(false)
+const showPlanDialog = ref(false)
+const showAdjustDialog = ref(false)
+const editingPackage = ref(null)
+const editingPlan = ref(null)
+const adjustTarget = ref(null)
+const adjustCredits = ref(0)
+const adjustReason = ref('')
+
+const defaultPackageForm = () => ({ name: '', name_en: '', credits: 100, price: 79, price_usd: null, original_price: null, is_active: true, sort_order: 0 })
+const defaultPlanForm = () => ({ name: '', name_en: '', credits_per_month: 100, price: 69, price_usd: null, duration_days: 30, is_active: true, sort_order: 0 })
+
+const packageForm = ref(defaultPackageForm())
+const planForm = ref(defaultPlanForm())
+
+const searchUserId = ref('')
+const userCreditPage = ref(1)
+const userCreditSize = ref(20)
+const userCreditTotal = ref(0)
+
+const consumptionUserId = ref('')
+const consumptionType = ref('')
+const consumptionPage = ref(1)
+const consumptionSize = ref(20)
+const consumptionTotal = ref(0)
+
+async function loadPackages() {
+  loading.packages = true
+  try { packages.value = await listCreditPackages() } catch (e) { ElMessage.error('加载次数包失败') }
+  loading.packages = false
+}
+async function loadPlans() {
+  loading.plans = true
+  try { plans.value = await listSubscriptionPlans() } catch (e) { ElMessage.error('加载订阅套餐失败') }
+  loading.plans = false
+}
+async function loadUserCredits() {
+  loading.userCredits = true
+  try {
+    const res = await listUserCredits(userCreditPage.value, userCreditSize.value)
+    userCredits.value = res.items
+    userCreditTotal.value = res.total
+  } catch (e) { ElMessage.error('加载用户余额失败') }
+  loading.userCredits = false
+}
+async function loadConsumptions(page) {
+  if (page) consumptionPage.value = page
+  loading.consumptions = true
+  try {
+    const params = { page: consumptionPage.value, size: consumptionSize.value }
+    if (consumptionUserId.value) params.user_id = consumptionUserId.value
+    if (consumptionType.value) params.result_type = consumptionType.value
+    const res = await listCreditConsumptions(params)
+    consumptions.value = res.items
+    consumptionTotal.value = res.total
+  } catch (e) { ElMessage.error('加载消费流水失败') }
+  loading.consumptions = false
+}
+async function loadStats() {
+  try { stats.value = await getCreditStats() } catch (e) { /* ignore */ }
+}
+
+function editPackage(row) {
+  editingPackage.value = row
+  packageForm.value = { ...row }
+  showPackageDialog.value = true
+}
+async function savePackage() {
+  try {
+    if (editingPackage.value) {
+      await updateCreditPackage(editingPackage.value.id, packageForm.value)
+      ElMessage.success('更新成功')
+    } else {
+      await createCreditPackage(packageForm.value)
+      ElMessage.success('创建成功')
+    }
+    showPackageDialog.value = false
+    editingPackage.value = null
+    packageForm.value = defaultPackageForm()
+    await loadPackages()
+  } catch (e) { ElMessage.error('保存失败') }
+}
+async function deletePackage(row) {
+  try {
+    await ElMessageBox.confirm('确认删除?')
+    await deleteCreditPackage(row.id)
+    ElMessage.success('删除成功')
+    await loadPackages()
+  } catch (e) { /* cancelled or error */ }
+}
+
+function editPlan(row) {
+  editingPlan.value = row
+  planForm.value = { ...row }
+  showPlanDialog.value = true
+}
+async function savePlan() {
+  try {
+    if (editingPlan.value) {
+      await updateSubscriptionPlan(editingPlan.value.id, planForm.value)
+      ElMessage.success('更新成功')
+    } else {
+      await createSubscriptionPlan(planForm.value)
+      ElMessage.success('创建成功')
+    }
+    showPlanDialog.value = false
+    editingPlan.value = null
+    planForm.value = defaultPlanForm()
+    await loadPlans()
+  } catch (e) { ElMessage.error('保存失败') }
+}
+async function deletePlan(row) {
+  try {
+    await ElMessageBox.confirm('确认删除?')
+    await deleteSubscriptionPlan(row.id)
+    ElMessage.success('删除成功')
+    await loadPlans()
+  } catch (e) { /* cancelled */ }
+}
+
+function showAdjustDialog(row) {
+  adjustTarget.value = row
+  adjustCredits.value = 0
+  adjustReason.value = ''
+  showAdjustDialog.value = true
+}
+async function confirmAdjust() {
+  if (!adjustCredits.value) {
+    ElMessage.warning('请输入调整次数')
+    return
+  }
+  try {
+    await adjustUserCredits(adjustTarget.value.user_id, adjustCredits.value, adjustReason.value)
+    ElMessage.success('调整成功')
+    showAdjustDialog.value = false
+    await loadUserCredits()
+  } catch (e) { ElMessage.error('调整失败') }
+}
+
+onMounted(() => {
+  loadPackages()
+  loadPlans()
+  loadUserCredits()
+  loadConsumptions(1)
+  loadStats()
+})
+</script>