6c3d5d323a
- [P0安全底座] 多租户数据闭环：公开留资与雷达足迹自动逆向追溯绑定名片 tenantId 与归属销售 userId - [P0性能稳定] 消除内存全量加载：公海池分批带条件扫描回收，雷达国家分布改用 SQL 原生 GROUP BY 聚合查询彻底消除 OOM 隐患 - [P0商业变现] 商业化配额门禁切面：在 Cool-Admin modifyBefore 生命周期织入 assertQuotaAvailable 校验，阻断超额名片创建 - [P0环境解耦] 客户端解耦本地硬编码：request.uts 支持 api_base_url 本地覆盖，生产数据库名修正为 crmmpdata - [P1高并发削峰] 雷达足迹批量缓冲引擎：引入 CrmRadarBufferService 环形缓冲队列与阈值/定时批量 Bulk Insert 落盘 - [P2中枢租户化] AI 智能中枢多租户 BYOK 与 Token 成本风控：支持企业自带 Key 隔离、Token 消耗账本、用量配额门禁与名片人设个性化联动 - [跨端规范] 对齐 Uni-app x 移动微官网原生首屏与底部原生 tabBar 规范 - [测试驱动] 全工程 116 个测试套件，1,175 个单元与集成测试用例全部 100% 绿色通过，管理后台 Vite 打包无错误
482 行
12 KiB
Plaintext
482 行
12 KiB
Plaintext
<template>
|
|
<view class="leads-page" :style="pageTheme">
|
|
<view class="leads-header">
|
|
<text class="leads-title">{{ pageTitle }}</text>
|
|
<text class="leads-subtitle">{{ followUpLabel }}</text>
|
|
<view v-if="radarLineOne !== ''" class="radar-preview">
|
|
<text class="radar-preview-text">{{ radarLineOne }}</text>
|
|
<text v-if="radarLineTwo !== ''" class="radar-preview-text">{{ radarLineTwo }}</text>
|
|
<text v-if="radarLineThree !== ''" class="radar-preview-text">{{ radarLineThree }}</text>
|
|
<text class="overview-entry" @click="openRadar">{{ radarMoreLabel }}</text>
|
|
</view>
|
|
<text class="overview-entry" @click="openTeamOverview">{{ briefingLabel }}</text>
|
|
<input
|
|
class="leads-search"
|
|
type="text"
|
|
v-model="state.keyWord"
|
|
:placeholder="searchPlaceholder"
|
|
:disabled="state.loading"
|
|
/>
|
|
<view class="chip-row">
|
|
<view
|
|
class="status-chip"
|
|
:class="{ 'status-chip-active': state.status === '' }"
|
|
@click="selectStatus('')"
|
|
>
|
|
<text class="status-chip-text">{{ t('statusAll') }}</text>
|
|
</view>
|
|
<view
|
|
class="status-chip"
|
|
:class="{ 'status-chip-active': state.status === 'new' }"
|
|
@click="selectStatus('new')"
|
|
>
|
|
<text class="status-chip-text">{{ t('statusNew') }}</text>
|
|
</view>
|
|
<view
|
|
class="status-chip"
|
|
:class="{ 'status-chip-active': state.status === 'hot' }"
|
|
@click="selectStatus('hot')"
|
|
>
|
|
<text class="status-chip-text">{{ t('statusHot') }}</text>
|
|
</view>
|
|
<view
|
|
class="status-chip"
|
|
:class="{ 'status-chip-active': state.status === 'contacted' }"
|
|
@click="selectStatus('contacted')"
|
|
>
|
|
<text class="status-chip-text">{{ t('statusContacted') }}</text>
|
|
</view>
|
|
<view
|
|
class="status-chip"
|
|
:class="{ 'status-chip-active': state.status === 'won' }"
|
|
@click="selectStatus('won')"
|
|
>
|
|
<text class="status-chip-text">{{ t('statusWon') }}</text>
|
|
</view>
|
|
<view
|
|
class="status-chip"
|
|
:class="{ 'status-chip-active': state.status === 'archived' }"
|
|
@click="selectStatus('archived')"
|
|
>
|
|
<text class="status-chip-text">{{ t('statusArchived') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="state.loading" class="leads-skeleton">
|
|
<view class="skeleton-line"></view>
|
|
<view class="skeleton-card"></view>
|
|
<view class="skeleton-card"></view>
|
|
</view>
|
|
|
|
<view v-else-if="state.errorMessage !== ''" class="leads-feedback">
|
|
<text class="feedback-title">{{ t('error') }}</text>
|
|
<text class="feedback-desc">{{ state.errorMessage }}</text>
|
|
</view>
|
|
|
|
<view v-else-if="state.empty" class="leads-feedback">
|
|
<text class="feedback-title">{{ t('empty') }}</text>
|
|
<text class="feedback-desc">{{ followUpLabel }}</text>
|
|
</view>
|
|
|
|
<list-view v-else class="leads-list" :scroll-y="true">
|
|
<list-item v-for="item in state.list" :key="item.id">
|
|
<view class="lead-row" @click="handleOpenLead(item)">
|
|
<view class="lead-main">
|
|
<text class="lead-name">{{ item.name }}</text>
|
|
<text class="lead-company">{{ formatCompany(item.company) }}</text>
|
|
</view>
|
|
<view class="lead-meta">
|
|
<text class="lead-score">{{ scoreLabel }} {{ item.intentScore }}</text>
|
|
<text class="lead-status">{{ statusLabelOf(item.status) }}</text>
|
|
</view>
|
|
</view>
|
|
</list-item>
|
|
</list-view>
|
|
|
|
<view class="leads-cta-bar">
|
|
<button
|
|
class="primary-cta-btn"
|
|
:class="{ 'primary-cta-btn-disabled': state.loading }"
|
|
:disabled="state.loading"
|
|
@click="handleSearch"
|
|
>
|
|
<text class="primary-cta-btn-text">{{ ctaLabel }}</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { LeadEntity } from '../../common/types.uts';
|
|
import { getCurrentLocale, getOmniText } from '../../common/locale.uts';
|
|
import { utsLightColors, utsRadius, utsSpacing } from '../../common/tokens.uts';
|
|
import {
|
|
applyLeadStatusFilter,
|
|
applyLeadsOptions,
|
|
createLeadsState,
|
|
formatLeadCompany,
|
|
formatRadarLine,
|
|
openRadarPage,
|
|
refreshLeads,
|
|
resolveLeadsText,
|
|
statusLabel,
|
|
LeadsCopyKey,
|
|
LeadsPageOptions,
|
|
} from './useLeads.uts';
|
|
import { resolveOverviewText } from './team/useOverview.uts';
|
|
|
|
const pageTheme: Record<string, string> = {
|
|
'--oc-primary': utsLightColors.primary,
|
|
'--oc-primary-soft': utsLightColors.primarySoft,
|
|
'--oc-bg': utsLightColors.bg,
|
|
'--oc-surface': utsLightColors.surface,
|
|
'--oc-border': utsLightColors.border,
|
|
'--oc-text': utsLightColors.text,
|
|
'--oc-text-2': utsLightColors.text2,
|
|
'--oc-radius-btn': utsRadius.button,
|
|
'--oc-radius-card': utsRadius.card,
|
|
'--oc-space-8': utsSpacing.space8,
|
|
'--oc-space-12': utsSpacing.space12,
|
|
'--oc-space-16': utsSpacing.space16,
|
|
'--oc-space-24': utsSpacing.space24,
|
|
};
|
|
|
|
const state = reactive(createLeadsState());
|
|
const pageTitle = ref(resolveLeadsText('title'));
|
|
const followUpLabel = ref(getOmniText(getCurrentLocale(), 'crm.follow_up'));
|
|
const searchPlaceholder = ref(resolveLeadsText('searchPlaceholder'));
|
|
const scoreLabel = ref(resolveLeadsText('score'));
|
|
const briefingLabel = ref(resolveOverviewText('title'));
|
|
const radarMoreLabel = ref(resolveLeadsText('radarMore'));
|
|
const radarLineOne = computed((): string => {
|
|
if (state.radarTracks.length < 1) {
|
|
return '';
|
|
}
|
|
return formatRadarLine(state.radarTracks[0]);
|
|
});
|
|
const radarLineTwo = computed((): string => {
|
|
if (state.radarTracks.length < 2) {
|
|
return '';
|
|
}
|
|
return formatRadarLine(state.radarTracks[1]);
|
|
});
|
|
const radarLineThree = computed((): string => {
|
|
if (state.radarTracks.length < 3) {
|
|
return '';
|
|
}
|
|
return formatRadarLine(state.radarTracks[2]);
|
|
});
|
|
|
|
const ctaLabel = computed((): string => {
|
|
if (state.loading) {
|
|
return resolveLeadsText('loading');
|
|
}
|
|
return resolveLeadsText('cta');
|
|
});
|
|
|
|
function t(key: LeadsCopyKey): string {
|
|
return resolveLeadsText(key);
|
|
}
|
|
|
|
function formatCompany(company: string | null | undefined): string {
|
|
return formatLeadCompany(company);
|
|
}
|
|
|
|
function statusLabelOf(status: string): string {
|
|
return statusLabel(status);
|
|
}
|
|
|
|
function selectStatus(status: string): void {
|
|
applyLeadStatusFilter(state, status);
|
|
}
|
|
|
|
function handleOpenLead(item: LeadEntity): void {
|
|
uni.navigateTo({
|
|
url: '/pages/owner/leads-detail?id=' + item.id,
|
|
});
|
|
}
|
|
|
|
function openRadar(): void {
|
|
openRadarPage();
|
|
}
|
|
|
|
function openTeamOverview(): void {
|
|
uni.navigateTo({
|
|
url: '/pages/owner/team/overview',
|
|
});
|
|
}
|
|
|
|
async function handleSearch(): Promise<void> {
|
|
await refreshLeads(state);
|
|
}
|
|
|
|
onLoad((options: LeadsPageOptions) => {
|
|
applyLeadsOptions(state, options);
|
|
refreshLeads(state);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.leads-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
}
|
|
|
|
.leads-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block-start: var(--oc-space-16, 16px);
|
|
padding-block-end: var(--oc-space-12, 12px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border-bottom: 1px solid var(--oc-border, #E3E7ED);
|
|
}
|
|
|
|
.leads-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.leads-subtitle {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.radar-preview {
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
padding: var(--oc-space-12, 12px);
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
}
|
|
|
|
.radar-preview-text {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.overview-entry {
|
|
min-height: 44px;
|
|
font-size: 14px;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.leads-search {
|
|
height: 44px;
|
|
padding-inline: 12px;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
font-size: 16px;
|
|
color: var(--oc-text, #101828);
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.chip-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
gap: 8px;
|
|
padding-block: 4px;
|
|
}
|
|
|
|
.status-chip {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
padding-inline: 12px;
|
|
margin-inline-end: 8px;
|
|
margin-block-end: 8px;
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: 12px;
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.status-chip-active {
|
|
background-color: var(--oc-primary-soft, #EAF1FF);
|
|
border-color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.status-chip-text {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-chip-active .status-chip-text {
|
|
color: var(--oc-primary, #0B5CFF);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.leads-skeleton {
|
|
flex: 1;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 16px;
|
|
width: 40%;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: 8px;
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.skeleton-card {
|
|
height: 72px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.leads-feedback {
|
|
flex: 1;
|
|
margin: 40px var(--oc-space-16, 16px);
|
|
padding: var(--oc-space-24, 24px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.feedback-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.feedback-desc {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.leads-list {
|
|
flex: 1;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block-start: var(--oc-space-12, 12px);
|
|
padding-block-end: calc(88px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
.lead-row {
|
|
min-height: 72px;
|
|
padding: var(--oc-space-16, 16px);
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.lead-row:active {
|
|
transform: scale(0.99);
|
|
}
|
|
|
|
.lead-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
padding-inline-end: 12px;
|
|
}
|
|
|
|
.lead-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.lead-company {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.lead-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.lead-score {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.lead-status {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.leads-cta-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: var(--window-bottom, 0px);
|
|
padding: 12px var(--oc-space-16, 16px) calc(12px + env(safe-area-inset-bottom, 0px)) var(--oc-space-16, 16px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border-top: 1px solid var(--oc-border, #E3E7ED);
|
|
box-sizing: border-box;
|
|
z-index: 100;
|
|
}
|
|
|
|
.primary-cta-btn {
|
|
height: 48px;
|
|
min-height: 44px;
|
|
background-color: var(--oc-primary, #0B5CFF);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
border-width: 0;
|
|
transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.primary-cta-btn:active {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.primary-cta-btn-disabled {
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
}
|
|
|
|
.primary-cta-btn-text {
|
|
color: var(--oc-bg, #FFFFFF);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.primary-cta-btn-disabled .primary-cta-btn-text {
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
</style>
|