360 行
9.2 KiB
Plaintext
360 行
9.2 KiB
Plaintext
<template>
|
|
<view class="overview-page" :style="pageTheme">
|
|
<view class="overview-header">
|
|
<text class="overview-title">{{ pageTitle }}</text>
|
|
<text class="overview-desc">{{ pageDesc }}</text>
|
|
</view>
|
|
|
|
<view v-if="state.loading" class="overview-skeleton">
|
|
<view class="skeleton-line"></view>
|
|
<view class="skeleton-card"></view>
|
|
<view class="skeleton-card"></view>
|
|
</view>
|
|
|
|
<view v-else class="overview-body">
|
|
<view v-if="state.errorMessage !== ''" class="overview-feedback">
|
|
<text class="feedback-title">{{ t('error') }}</text>
|
|
<text class="feedback-desc">{{ state.errorMessage }}</text>
|
|
</view>
|
|
|
|
<view class="metrics-grid">
|
|
<view class="metric-card">
|
|
<text class="metric-value">{{ state.summary.totalLeads }}</text>
|
|
<text class="metric-label">{{ leadsLabel }}</text>
|
|
</view>
|
|
<view class="metric-card">
|
|
<text class="metric-value">{{ state.summary.hotCount }}</text>
|
|
<text class="metric-label">{{ t('hotCount') }}</text>
|
|
</view>
|
|
<view class="metric-card">
|
|
<text class="metric-value">{{ state.summary.totalTracks }}</text>
|
|
<text class="metric-label">{{ tracksLabel }}</text>
|
|
</view>
|
|
<view class="metric-card">
|
|
<text class="metric-value">{{ countryText }}</text>
|
|
<text class="metric-label">{{ t('topCountry') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="recent-section">
|
|
<text class="section-title">{{ recentLabel }}</text>
|
|
<view v-if="state.leads.length === 0" class="overview-feedback">
|
|
<text class="feedback-desc">{{ t('empty') }}</text>
|
|
</view>
|
|
<list-view v-else-if="state.leads.length > 5" class="recent-list">
|
|
<list-item v-for="item in state.leads" :key="item.id">
|
|
<view class="lead-row">
|
|
<view class="lead-main">
|
|
<text class="lead-name">{{ item.name }}</text>
|
|
<text class="lead-company">{{ item.company }}</text>
|
|
</view>
|
|
<text class="lead-status">{{ item.status }}</text>
|
|
</view>
|
|
</list-item>
|
|
</list-view>
|
|
<list-view v-else class="recent-list">
|
|
<list-item v-for="item in state.leads" :key="item.id">
|
|
<view class="lead-row">
|
|
<view class="lead-main">
|
|
<text class="lead-name">{{ item.name }}</text>
|
|
<text class="lead-company">{{ item.company }}</text>
|
|
</view>
|
|
<text class="lead-status">{{ item.status }}</text>
|
|
</view>
|
|
</list-item>
|
|
</list-view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="overview-cta-bar">
|
|
<button
|
|
class="primary-cta-btn"
|
|
:class="{ 'primary-cta-btn-disabled': state.loading }"
|
|
:disabled="state.loading"
|
|
@click="handleRefresh"
|
|
>
|
|
<text class="primary-cta-btn-text">{{ ctaLabel }}</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { getCurrentLocale, getOmniText } from '../../../common/locale.uts';
|
|
import { utsLightColors, utsRadius, utsSpacing } from '../../../common/tokens.uts';
|
|
import {
|
|
createOverviewState,
|
|
formatTopCountry,
|
|
refreshOverview,
|
|
resolveOverviewText,
|
|
OverviewCopyKey,
|
|
} from './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(createOverviewState());
|
|
const pageTitle = ref(resolveOverviewText('title'));
|
|
const pageDesc = ref(resolveOverviewText('desc'));
|
|
const leadsLabel = ref(getOmniText(getCurrentLocale(), 'crm.leads'));
|
|
const tracksLabel = ref(getOmniText(getCurrentLocale(), 'radar.visitor_trace'));
|
|
const recentLabel = ref(getOmniText(getCurrentLocale(), 'crm.follow_up'));
|
|
|
|
const countryText = computed((): string => {
|
|
return formatTopCountry(state.summary.topCountry);
|
|
});
|
|
|
|
const ctaLabel = computed((): string => {
|
|
if (state.loading) {
|
|
return resolveOverviewText('loading');
|
|
}
|
|
return resolveOverviewText('refresh');
|
|
});
|
|
|
|
function t(key: OverviewCopyKey): string {
|
|
return resolveOverviewText(key);
|
|
}
|
|
|
|
function handleRefresh(): void {
|
|
refreshOverview(state);
|
|
}
|
|
|
|
onLoad(() => {
|
|
refreshOverview(state);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.overview-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
}
|
|
|
|
.overview-header {
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block-start: var(--oc-space-16, 16px);
|
|
padding-block-end: var(--oc-space-8, 8px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border-bottom: 1px solid var(--oc-border, #E3E7ED);
|
|
}
|
|
|
|
.overview-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.overview-desc {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.overview-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);
|
|
}
|
|
|
|
.overview-body {
|
|
flex: 1;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block-start: var(--oc-space-16, 16px);
|
|
padding-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
.overview-feedback {
|
|
padding: var(--oc-space-16, 16px);
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
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;
|
|
}
|
|
|
|
.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);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.metrics-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.metric-card {
|
|
width: 48%;
|
|
min-height: 88px;
|
|
margin-inline-end: 4%;
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
padding: var(--oc-space-16, 16px);
|
|
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;
|
|
}
|
|
|
|
.metric-card:nth-child(2n) {
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.recent-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.recent-list {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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-status {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.overview-cta-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 12px var(--oc-space-16, 16px) calc(16px + 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>
|