647 行
15 KiB
Plaintext
647 行
15 KiB
Plaintext
<template>
|
|
<view class="stats-page" :class="pageRtlClass" :style="pageTheme">
|
|
<!-- Slim Cockpit Header -->
|
|
<view class="stats-header">
|
|
<view class="stats-header-top">
|
|
<view class="stats-title-group">
|
|
<text class="stats-title">{{ pageTitle }}</text>
|
|
<text class="stats-subtitle">{{ pageSubtitle }}</text>
|
|
</view>
|
|
<view class="stats-refresh-btn" @click="handleRefresh">
|
|
<text class="stats-refresh-text">{{ refreshText }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Period Filter Chips -->
|
|
<view class="period-row">
|
|
<view
|
|
class="period-chip"
|
|
:class="{ 'period-chip-active': state.period === 'today' }"
|
|
@click="changePeriod('today')"
|
|
>
|
|
<text class="period-chip-text">{{ t('periodToday') }}</text>
|
|
</view>
|
|
<view
|
|
class="period-chip"
|
|
:class="{ 'period-chip-active': state.period === '7d' }"
|
|
@click="changePeriod('7d')"
|
|
>
|
|
<text class="period-chip-text">{{ t('period7d') }}</text>
|
|
</view>
|
|
<view
|
|
class="period-chip"
|
|
:class="{ 'period-chip-active': state.period === '30d' }"
|
|
@click="changePeriod('30d')"
|
|
>
|
|
<text class="period-chip-text">{{ t('period30d') }}</text>
|
|
</view>
|
|
<view
|
|
class="period-chip"
|
|
:class="{ 'period-chip-active': state.period === 'all' }"
|
|
@click="changePeriod('all')"
|
|
>
|
|
<text class="period-chip-text">{{ t('periodAll') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Skeleton Loading -->
|
|
<view v-if="state.loading" class="stats-skeleton">
|
|
<view class="skeleton-metric-row">
|
|
<view class="skeleton-card"></view>
|
|
<view class="skeleton-card"></view>
|
|
</view>
|
|
<view class="skeleton-funnel"></view>
|
|
<view class="skeleton-grid"></view>
|
|
</view>
|
|
|
|
<!-- Feedback Error Banner -->
|
|
<view v-else-if="state.errorMessage !== ''" class="stats-feedback">
|
|
<text class="feedback-title">{{ t('error') }}</text>
|
|
<text class="feedback-desc">{{ state.errorMessage }}</text>
|
|
</view>
|
|
|
|
<!-- Stats Scrollable Body -->
|
|
<scroll-view v-else class="stats-body" :scroll-y="true">
|
|
<!-- 2x2 Executive Bento Grid -->
|
|
<view class="kpi-grid">
|
|
<!-- KPI 1: Total Leads -->
|
|
<view class="metric-card">
|
|
<text class="metric-label">{{ t('metricTotal') }}</text>
|
|
<text class="metric-value text-brand">{{ state.summary.totalLeads }}</text>
|
|
<text class="metric-sub">{{ t('stepNew') }}</text>
|
|
</view>
|
|
|
|
<!-- KPI 2: Hot Opportunities -->
|
|
<view class="metric-card metric-card-hot">
|
|
<view class="metric-hot-header">
|
|
<text class="metric-label text-hot">{{ t('metricHot') }}</text>
|
|
<view class="metric-hot-dot"></view>
|
|
</view>
|
|
<text class="metric-value text-hot">{{ state.summary.hotLeads }}</text>
|
|
<text class="metric-sub">{{ t('stepHot') }}</text>
|
|
</view>
|
|
|
|
<!-- KPI 3: Won Deals -->
|
|
<view class="metric-card">
|
|
<text class="metric-label">{{ t('metricWon') }}</text>
|
|
<text class="metric-value text-won">{{ state.summary.wonLeads }}</text>
|
|
<text class="metric-sub">{{ t('stepWon') }}</text>
|
|
</view>
|
|
|
|
<!-- KPI 4: Overall Conversion Rate -->
|
|
<view class="metric-card metric-card-rate">
|
|
<text class="metric-label">{{ t('metricRate') }}</text>
|
|
<text class="metric-value text-primary">{{ state.summary.overallRate }}%</text>
|
|
<text class="metric-sub">{{ t('stepContacted') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Conversion Funnel Section -->
|
|
<view class="stats-card stats-funnel">
|
|
<view class="card-header">
|
|
<text class="card-title">{{ t('funnelTitle') }}</text>
|
|
</view>
|
|
<view class="funnel-list">
|
|
<view v-for="step in state.funnel" :key="step.key" class="funnel-step-item">
|
|
<view class="funnel-step-header">
|
|
<text class="funnel-step-label">{{ step.label }}</text>
|
|
<view class="funnel-step-values">
|
|
<text class="funnel-step-count">{{ step.count }}</text>
|
|
<text class="funnel-step-rate">{{ step.rate }}%</text>
|
|
</view>
|
|
</view>
|
|
<view class="funnel-track">
|
|
<view
|
|
class="funnel-fill"
|
|
:class="'funnel-fill-' + step.key"
|
|
:style="{ width: step.rate + '%' }"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Acquisition Channels Matrix -->
|
|
<view class="stats-card stats-channels">
|
|
<view class="card-header">
|
|
<text class="card-title">{{ t('channelTitle') }}</text>
|
|
</view>
|
|
<view class="channel-grid">
|
|
<view v-for="ch in state.channels" :key="ch.source" class="channel-card">
|
|
<view class="channel-header">
|
|
<text class="channel-name">{{ ch.label }}</text>
|
|
<text class="channel-rate">{{ ch.conversionRate }}%</text>
|
|
</view>
|
|
<view class="channel-data-row">
|
|
<view class="channel-data-col">
|
|
<text class="channel-num">{{ ch.leadsCount }}</text>
|
|
<text class="channel-tag">{{ t('metricTotal') }}</text>
|
|
</view>
|
|
<view class="channel-data-divider"></view>
|
|
<view class="channel-data-col">
|
|
<text class="channel-num text-won">{{ ch.wonCount }}</text>
|
|
<text class="channel-tag">{{ t('metricWon') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { getCurrentLocale, isRtl } from '../../common/locale.uts';
|
|
import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../common/tokens.uts';
|
|
import {
|
|
createStatsState,
|
|
loadStatsData,
|
|
resolveStatsText,
|
|
StatsPeriod,
|
|
} from './useStats.uts';
|
|
|
|
const pageTheme: Record<string, string> = {
|
|
'--oc-primary': utsLightColors.primary,
|
|
'--oc-primary-gradient': utsLightColors.primaryGradient,
|
|
'--oc-primary-soft': utsLightColors.primarySoft,
|
|
'--oc-ai': utsLightColors.ai,
|
|
'--oc-bg': utsLightColors.bg,
|
|
'--oc-surface': utsLightColors.surface,
|
|
'--oc-border': utsLightColors.border,
|
|
'--oc-text': utsLightColors.text,
|
|
'--oc-text-2': utsLightColors.text2,
|
|
'--oc-success': utsLightColors.success,
|
|
'--oc-warning': utsLightColors.warning,
|
|
'--oc-error': utsLightColors.error,
|
|
'--oc-radius-btn': utsRadius.button,
|
|
'--oc-radius-card': utsRadius.card,
|
|
'--oc-radius-modal': utsRadius.modal,
|
|
'--oc-radius-pill': utsRadius.pill,
|
|
'--oc-shadow-card': utsTypography.shadowCard,
|
|
'--oc-shadow-cta': utsTypography.shadowCta,
|
|
'--oc-shadow': utsTypography.shadow,
|
|
'--oc-space-4': utsSpacing.space4,
|
|
'--oc-space-8': utsSpacing.space8,
|
|
'--oc-space-12': utsSpacing.space12,
|
|
'--oc-space-16': utsSpacing.space16,
|
|
'--oc-space-20': utsSpacing.space20,
|
|
'--oc-space-24': utsSpacing.space24,
|
|
};
|
|
|
|
const state = reactive(createStatsState());
|
|
const pageTitle = ref(resolveStatsText('title'));
|
|
const pageSubtitle = ref(resolveStatsText('subtitle'));
|
|
const refreshText = ref(resolveStatsText('retry'));
|
|
|
|
const pageRtlClass = computed((): string => {
|
|
return isRtl(getCurrentLocale()) ? 'stats-rtl' : '';
|
|
});
|
|
|
|
function t(key: string): string {
|
|
return resolveStatsText(key);
|
|
}
|
|
|
|
function changePeriod(period: StatsPeriod): void {
|
|
state.period = period;
|
|
loadStatsData(state);
|
|
}
|
|
|
|
function handleRefresh(): void {
|
|
loadStatsData(state);
|
|
}
|
|
|
|
onLoad(() => {
|
|
loadStatsData(state);
|
|
});
|
|
|
|
onShow(() => {
|
|
loadStatsData(state);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Page Container */
|
|
.stats-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--oc-bg, #F5F8FC);
|
|
}
|
|
|
|
.stats-rtl {
|
|
direction: rtl;
|
|
}
|
|
|
|
/* Header & Filter Area */
|
|
.stats-header {
|
|
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-surface, #FFFFFF);
|
|
border-bottom: 1px solid var(--oc-border, #E3E7ED);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stats-header-top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.stats-title-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stats-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.stats-subtitle {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-block-start: 2px;
|
|
}
|
|
|
|
.stats-refresh-btn {
|
|
min-height: 32px;
|
|
padding-inline: 12px;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-btn, 14px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.stats-refresh-btn:active {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.stats-refresh-text {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Period Filter Chips */
|
|
.period-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 8px;
|
|
}
|
|
|
|
.period-chip {
|
|
flex: 1;
|
|
height: 32px;
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-btn, 14px);
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.period-chip:active {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.period-chip-active {
|
|
background-color: var(--oc-primary-soft, #EBF5FF);
|
|
border-color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.period-chip-text {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.period-chip-active .period-chip-text {
|
|
color: var(--oc-primary, #0B5CFF);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Skeleton Loading */
|
|
.stats-skeleton {
|
|
flex: 1;
|
|
padding: 16px;
|
|
}
|
|
|
|
.skeleton-metric-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.skeleton-card {
|
|
flex: 1;
|
|
height: 80px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
}
|
|
|
|
.skeleton-funnel {
|
|
height: 140px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.skeleton-grid {
|
|
height: 120px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
}
|
|
|
|
/* Feedback Error */
|
|
.stats-feedback {
|
|
flex: 1;
|
|
margin: 24px 16px;
|
|
padding: 24px;
|
|
background-color: var(--oc-surface, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.feedback-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
margin-block-end: 6px;
|
|
}
|
|
|
|
.feedback-desc {
|
|
font-size: 13px;
|
|
color: var(--oc-text-2, #667085);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Stats Body */
|
|
.stats-body {
|
|
flex: 1;
|
|
padding: 16px;
|
|
}
|
|
|
|
/* 2x2 Bento Grid KPI Cards */
|
|
.kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.metric-card {
|
|
background-color: var(--oc-surface, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
|
|
padding: 12px 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.metric-card-hot {
|
|
background: linear-gradient(145deg, #FFFFFF 0%, #FFF8F6 100%);
|
|
}
|
|
|
|
.metric-hot-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.metric-hot-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background-color: var(--oc-error, #F04438);
|
|
}
|
|
|
|
.metric-card-rate {
|
|
background: linear-gradient(145deg, #FFFFFF 0%, #F5F9FF 100%);
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-block-end: 4px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.15;
|
|
margin-block-end: 2px;
|
|
}
|
|
|
|
.text-brand {
|
|
color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.text-hot {
|
|
color: var(--oc-error, #F04438);
|
|
}
|
|
|
|
.text-won {
|
|
color: var(--oc-success, #12B76A);
|
|
}
|
|
|
|
.text-primary {
|
|
color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.metric-sub {
|
|
font-size: 10px;
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
/* Generic Stats Card */
|
|
.stats-card {
|
|
background-color: var(--oc-surface, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
|
|
padding: 14px 16px;
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.card-header {
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
/* Funnel Step List */
|
|
.funnel-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.funnel-step-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.funnel-step-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: 6px;
|
|
}
|
|
|
|
.funnel-step-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.funnel-step-values {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.funnel-step-count {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.funnel-step-rate {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
background-color: var(--oc-primary-soft, #EBF5FF);
|
|
padding-inline: 6px;
|
|
padding-block: 1px;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.funnel-track {
|
|
height: 8px;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.funnel-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.funnel-fill-new {
|
|
background-color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.funnel-fill-hot {
|
|
background-color: var(--oc-error, #F04438);
|
|
}
|
|
|
|
.funnel-fill-contacted {
|
|
background-color: var(--oc-warning, #F79009);
|
|
}
|
|
|
|
.funnel-fill-won {
|
|
background-color: var(--oc-success, #12B76A);
|
|
}
|
|
|
|
/* Channel Matrix Grid */
|
|
.channel-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.channel-card {
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: 14px;
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.channel-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: 8px;
|
|
}
|
|
|
|
.channel-name {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.channel-rate {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.channel-data-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.channel-data-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.channel-num {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.channel-tag {
|
|
font-size: 9px;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-block-start: 1px;
|
|
}
|
|
|
|
.channel-data-divider {
|
|
width: 1px;
|
|
height: 18px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|
|
</style>
|