Add landing page, referral system, usage quotas, search API management, and yearly pricing
- Separate workspace landing from login for better UX - Referral system rewards both parties with Pro days - Quota enforcement prevents abuse without breaking endpoints - 7-day free trial with auto-downgrade on expiry - Admin-managed search provider config (SearXNG, Bing) - 15% discount on annual subscriptions - MCP search server wrapping opencode search - Fix discovery module field name mismatch causing 422
This commit is contained in:
TradeMate Dev
@@ -1,94 +1,229 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="workspace">
|
||||
<div class="welcome-section">
|
||||
<div class="welcome-left">
|
||||
<h2>你好，{{ auth.user?.username || '用户' }}</h2>
|
||||
<p class="welcome-desc">欢迎回来，以下是你的业务概览</p>
|
||||
</div>
|
||||
<div class="welcome-right">
|
||||
<el-button type="primary" @click="$router.push('/translate')">快速翻译</el-button>
|
||||
<el-button @click="$router.push('/customers')">客户管理</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
v-if="usageStats.tier === 'pro' && usageStats.trial_days_left > 0"
|
||||
:title="'Pro 试用中，剩余 ' + usageStats.trial_days_left + ' 天'"
|
||||
type="success"
|
||||
show-icon
|
||||
:closable="false"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<template #default>
|
||||
<span>试用结束后将自动恢复为免费版。 <el-button text type="primary" size="small" @click="showUpgrade = true">立即升级正式版</el-button></span>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" v-for="item in stats" :key="item.label">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-value">{{ item.value }}</div>
|
||||
<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)">
|
||||
<div class="stat-value" :style="{ color: item.color }">{{ item.value }}</div>
|
||||
<div class="stat-label">{{ item.label }}</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card shadow="never" class="section-card">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<div class="usage-grid">
|
||||
<div v-for="u in usageItems" :key="u.key" class="usage-item">
|
||||
<div class="usage-label">
|
||||
<span>{{ u.label }}</span>
|
||||
<span class="usage-value">{{ u.used }} / {{ u.limit === 999999999 ? '∞' : u.limit }}</span>
|
||||
</div>
|
||||
<el-progress :percentage="u.pct" :color="u.pct > 80 ? '#ff4d4f' : u.pct > 50 ? '#faad14' : '#52c41a'" :stroke-width="12" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="section-card">
|
||||
<template #header><span class="section-title">功能矩阵</span></template>
|
||||
<div class="feature-grid">
|
||||
<div v-for="f in features" :key="f.title" class="feature-card" @click="$router.push(f.route)">
|
||||
<div class="feature-icon" :style="{ background: f.color + '15' }">
|
||||
<el-icon :size="26" :color="f.color"><component :is="f.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="feature-info">
|
||||
<h4>{{ f.title }}</h4>
|
||||
<p>{{ f.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="20" style="margin-top:20px">
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-card shadow="never">
|
||||
<template #header><span>快速翻译</span></template>
|
||||
<el-input v-model="quickText" type="textarea" :rows="3" placeholder="输入要翻译的文本..." />
|
||||
<template #header><span class="section-title">快速翻译</span></template>
|
||||
<el-input v-model="quickText" type="textarea" :rows="4" placeholder="输入要翻译的文本..." />
|
||||
<div style="margin-top:12px;display:flex;gap:8px">
|
||||
<el-select v-model="quickLang" style="width:140px">
|
||||
<el-select v-model="quickLang" style="width:130px" size="default">
|
||||
<el-option label="英语" value="en" />
|
||||
<el-option label="中文" value="zh" />
|
||||
<el-option label="西班牙语" value="es" />
|
||||
<el-option label="西语" value="es" />
|
||||
<el-option label="日语" value="ja" />
|
||||
</el-select>
|
||||
<el-button type="primary" :loading="translating" @click="doQuickTranslate">翻译</el-button>
|
||||
</div>
|
||||
<p v-if="quickResult" style="margin-top:12px;padding:12px;background:#f5f5f5;border-radius:6px">{{ quickResult }}</p>
|
||||
<p v-if="quickResult" class="quick-result">{{ quickResult }}</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-card shadow="never">
|
||||
<template #header><span>跟进提醒</span></template>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="section-title">跟进提醒</span>
|
||||
<el-button text type="primary" size="small" @click="$router.push('/followup')">查看全部</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="followups.length">
|
||||
<div v-for="f in followups" :key="f.id" class="followup-item">
|
||||
<span class="followup-name">{{ f.customer_name }}</span>
|
||||
<span class="followup-days">{{ f.silent_days }}天未联系</span>
|
||||
<div v-for="f in followups" :key="f.id" class="list-item">
|
||||
<div class="list-item-left">
|
||||
<span class="list-item-name">{{ f.customer_name }}</span>
|
||||
<span class="list-item-meta">{{ f.silent_days }}天未联系</span>
|
||||
</div>
|
||||
<el-button text type="primary" size="small" @click="$router.push('/followup')">去跟进</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="暂无跟进提醒" :image-size="60" />
|
||||
<el-empty v-else description="暂无跟进提醒" :image-size="50" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="section-title">沉默客户</span>
|
||||
<el-button text type="primary" size="small" @click="$router.push('/customers')">查看全部</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="silentCustomers.length">
|
||||
<div v-for="c in silentCustomers" :key="c.id" class="list-item">
|
||||
<div class="list-item-left">
|
||||
<span class="list-item-name">{{ c.name }}</span>
|
||||
<span class="list-item-meta">{{ c.silent_days || '?' }}天未联系</span>
|
||||
</div>
|
||||
<el-tag :type="(c.silent_days || 0) > 14 ? 'danger' : 'warning'" size="small">{{ c.silent_days || 0 }}天</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="暂无沉默客户" :image-size="50" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card shadow="never" style="margin-top:20px">
|
||||
<template #header><span>功能入口</span></template>
|
||||
<div class="feature-grid">
|
||||
<div v-for="f in features" :key="f.title" class="feature-item" @click="$router.push(f.route)">
|
||||
<el-icon :size="24" :color="f.color"><component :is="f.icon" /></el-icon>
|
||||
<span>{{ f.title }}</span>
|
||||
</div>
|
||||
<el-dialog v-model="showUpgrade" title="升级套餐" width="700">
|
||||
<el-table :data="planData" border>
|
||||
<el-table-column label="功能" prop="feature" width="140" />
|
||||
<el-table-column label="免费版" width="160">
|
||||
<template #default="{ row }"><span v-html="row.free" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Pro ¥99/月" width="160">
|
||||
<template #default="{ row }"><span v-html="row.pro" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="企业 ¥399/月" width="160">
|
||||
<template #default="{ row }"><span v-html="row.enterprise" /></template>
|
||||
</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>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getAnalyticsOverview, translate, getFollowupPending } from '@/api'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { getAnalyticsOverview, translate, getFollowupPending, getSilentCustomers, getUsageStats } from '@/api'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const stats = ref([])
|
||||
const quickText = ref('')
|
||||
const quickLang = ref('en')
|
||||
const quickResult = ref('')
|
||||
const translating = ref(false)
|
||||
const followups = ref([])
|
||||
const silentCustomers = ref([])
|
||||
const usageStats = ref({ tier: 'free', limits: {}, usage: {} })
|
||||
const showUpgrade = ref(false)
|
||||
|
||||
const usageItems = computed(() => {
|
||||
const u = usageStats.value.usage || {}
|
||||
const l = usageStats.value.limits || {}
|
||||
const tier = usageStats.value.tier || 'free'
|
||||
const items = [
|
||||
{ key: 'translate_chars', label: '翻译字符', used: u.translate_chars || 0, limit: l.translate_chars || 0 },
|
||||
{ key: 'replies', label: '回复建议', used: u.replies || 0, limit: l.replies || 0 },
|
||||
{ key: 'marketing', label: '营销生成', used: u.marketing || 0, limit: l.marketing || 0 },
|
||||
{ key: 'customers', label: '客户数', used: u.customers || 0, limit: l.customers || 0 },
|
||||
{ key: 'products', label: '产品数', used: u.products || 0, limit: l.products || 0 },
|
||||
{ key: 'quotations', label: '报价单', used: u.quotations || 0, limit: l.quotations || 0 },
|
||||
]
|
||||
return items.map(i => ({
|
||||
...i,
|
||||
pct: i.limit >= 999999 ? 0 : Math.min(100, Math.round((i.used / (i.limit || 1)) * 100)),
|
||||
}))
|
||||
})
|
||||
|
||||
const planData = [
|
||||
{ feature: '翻译字符/天', free: '5,000', pro: '50,000', enterprise: '∞' },
|
||||
{ feature: '回复建议/天', free: '20', pro: '200', enterprise: '∞' },
|
||||
{ feature: '营销生成/天', free: '5', pro: '50', enterprise: '∞' },
|
||||
{ feature: '客户管理', free: '最多5个', pro: '最多100个', enterprise: '∞' },
|
||||
{ feature: '产品管理', free: '最多1个', pro: '最多20个', enterprise: '∞' },
|
||||
{ feature: '报价单/天', free: '3', pro: '30', enterprise: '∞' },
|
||||
{ feature: '跟进提醒', free: '—', pro: '✓', enterprise: '✓' },
|
||||
{ feature: 'WhatsApp 集成', free: '—', pro: '✓', enterprise: '✓' },
|
||||
{ feature: '挖掘新客', free: '—', pro: '✓', enterprise: '✓' },
|
||||
{ feature: '团队协作', free: '—', pro: '—', enterprise: '✓' },
|
||||
]
|
||||
|
||||
const features = [
|
||||
{ title: '智能翻译', icon: 'ChatLineSquare', color: '#409eff', route: '/translate' },
|
||||
{ title: '客户管理', icon: 'User', color: '#67c23a', route: '/customers' },
|
||||
{ title: '产品库', icon: 'Goods', color: '#e6a23c', route: '/products' },
|
||||
{ title: '报价单', icon: 'DocumentCopy', color: '#f56c6c', route: '/quotations' },
|
||||
{ title: '营销素材', icon: 'Promotion', color: '#909399', route: '/marketing' },
|
||||
{ title: '挖掘新客', icon: 'Search', color: '#409eff', route: '/discovery' },
|
||||
{ title: '智能跟进', icon: 'Message', color: '#67c23a', route: '/followup' },
|
||||
{ title: '数据分析', icon: 'DataAnalysis', color: '#e6a23c', route: '/analytics' },
|
||||
{ title: '团队协作', icon: 'UserFilled', color: '#f56c6c', route: '/team' },
|
||||
{ title: '智能翻译', desc: '多语言翻译 + 回复建议 + 信息提取', icon: 'ChatLineSquare', color: '#1890ff', route: '/translate' },
|
||||
{ title: '客户管理', desc: 'CRM + 健康评分 + 跟进记录', icon: 'User', color: '#52c41a', route: '/customers' },
|
||||
{ title: '产品库', desc: '双语产品管理 + 关键词标签', icon: 'Goods', color: '#faad14', route: '/products' },
|
||||
{ title: '报价单', desc: 'AI 智能报价 + PDF 导出 + 状态追踪', icon: 'DocumentCopy', color: '#ff4d4f', route: '/quotations' },
|
||||
{ title: '营销素材', desc: 'AI 生成开发信/WhatsApp话术/产品描述', icon: 'Promotion', color: '#722ed1', route: '/marketing' },
|
||||
{ title: '挖掘新客', desc: 'AI 搜索潜在客户 + 开发信生成', icon: 'Search', color: '#13c2c2', route: '/discovery' },
|
||||
{ title: '智能跟进', desc: '自动生成跟进话术 + 一键发送', icon: 'Message', color: '#eb2f96', route: '/followup' },
|
||||
{ title: '数据分析', desc: '客户/翻译/报价多维度统计', icon: 'DataAnalysis', color: '#1890ff', route: '/analytics' },
|
||||
{ title: '团队协作', desc: '团队管理 + 角色权限 + 成员邀请', icon: 'UserFilled', color: '#fa8c16', route: '/team' },
|
||||
]
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const [overview, fup] = await Promise.all([
|
||||
const [overview, fup, silent, usage] = await Promise.all([
|
||||
getAnalyticsOverview().catch(() => null),
|
||||
getFollowupPending().catch(() => [])
|
||||
getFollowupPending().catch(() => []),
|
||||
getSilentCustomers(7).catch(() => []),
|
||||
getUsageStats().catch(() => null),
|
||||
])
|
||||
if (usage) {
|
||||
usageStats.value = usage.data || usage
|
||||
}
|
||||
const d = overview?.data || overview || {}
|
||||
stats.value = [
|
||||
{ value: d.customers?.total || d.total_customers || 0, label: '客户总数' },
|
||||
{ value: d.translations?.today || d.today_translations || 0, label: '今日翻译' },
|
||||
{ value: d.quotations?.total || d.total_quotations || 0, label: '报价单数' },
|
||||
{ value: fup?.length || 0, label: '待跟进' },
|
||||
{ value: d.customers?.total || 0, label: '客户总数', color: '#1890ff', route: '/customers' },
|
||||
{ value: d.translations?.today || 0, label: '今日翻译', color: '#52c41a', route: '/translate' },
|
||||
{ value: d.quotations?.total || 0, label: '报价单数', color: '#faad14', route: '/quotations' },
|
||||
{ value: fup?.length || 0, label: '待跟进', color: '#ff4d4f', route: '/followup' },
|
||||
]
|
||||
followups.value = Array.isArray(fup) ? fup.slice(0, 5) : []
|
||||
silentCustomers.value = Array.isArray(silent) ? silent.slice(0, 5) : (silent?.items || silent?.data || [])
|
||||
} catch { /* ignore */ }
|
||||
})
|
||||
|
||||
@@ -104,14 +239,44 @@ async function doQuickTranslate() {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stat-card { cursor: default; text-align: center; }
|
||||
.stat-value { font-size: 32px; font-weight: 700; color: #409eff; }
|
||||
.workspace { max-width: 1200px; margin: 0 auto; }
|
||||
.welcome-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
|
||||
.welcome-left h2 { font-size: 24px; font-weight: 700; color: #333; margin: 0 0 4px; }
|
||||
.welcome-desc { font-size: 14px; color: #999; margin: 0; }
|
||||
.welcome-right { display: flex; gap: 12px; }
|
||||
.stat-card { cursor: pointer; text-align: center; transition: all 0.25s; }
|
||||
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
|
||||
.stat-value { font-size: 32px; font-weight: 700; }
|
||||
.stat-label { font-size: 14px; color: #999; margin-top: 4px; }
|
||||
.followup-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.followup-name { font-weight: 500; }
|
||||
.followup-days { color: #f56c6c; font-size: 12px; }
|
||||
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; }
|
||||
.feature-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px; cursor: pointer; border-radius: 8px; transition: background 0.2s; }
|
||||
.feature-item:hover { background: #f0f5ff; }
|
||||
.feature-item span { font-size: 13px; color: #333; }
|
||||
.section-card { margin-top: 20px; }
|
||||
.section-title { font-weight: 600; font-size: 15px; }
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; }
|
||||
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
@media (max-width: 768px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
|
||||
.feature-card { display: flex; gap: 16px; padding: 20px; border-radius: 10px; cursor: pointer; transition: all 0.25s; border: 1px solid #f0f0f0; }
|
||||
.feature-card:hover { border-color: #d9d9d9; box-shadow: 0 4px 16px rgba(0,0,0,0.06); transform: translateY(-2px); }
|
||||
.feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.feature-info { flex: 1; min-width: 0; }
|
||||
.feature-info h4 { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 4px; }
|
||||
.feature-info p { font-size: 12px; color: #999; margin: 0; line-height: 1.4; }
|
||||
.list-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
|
||||
.list-item:last-child { border-bottom: none; }
|
||||
.list-item-left { display: flex; flex-direction: column; gap: 2px; }
|
||||
.list-item-name { font-size: 14px; font-weight: 500; color: #333; }
|
||||
.list-item-meta { font-size: 12px; color: #999; }
|
||||
.quick-result { margin-top: 12px; padding: 12px; background: #f5f5f5; border-radius: 6px; font-size: 13px; line-height: 1.5; }
|
||||
.usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||||
.usage-item { }
|
||||
.usage-label { display: flex; justify-content: space-between; font-size: 13px; color: #666; margin-bottom: 6px; }
|
||||
.usage-value { color: #999; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.welcome-section { flex-direction: column; align-items: flex-start; gap: 12px; }
|
||||
.welcome-left h2 { font-size: 20px; }
|
||||
.feature-card { padding: 14px; gap: 12px; }
|
||||
.feature-icon { width: 40px; height: 40px; }
|
||||
.feature-icon :deep(.el-icon) { font-size: 20px !important; }
|
||||
.feature-info h4 { font-size: 13px; }
|
||||
.feature-info p { font-size: 11px; display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user