wikiboss/OmniCard
1
0
派生 0
代码 工单 合并请求 Actions 软件包 项目 版本发布 百科 动态

style(crm): 顶级UI/UX美学升维独立统计中心(stats.uvue)，注入天幕微极光、驾驶舱控制台与流体漏斗

浏览代码
这个提交包含在：
wikiboss
2026-09-21 15:06:10 +08:00
父节点 3243979169
当前提交 daf385c8e0
共有 3 个文件被更改，包括 563 次插入 和 152 次删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

42
mpuniapp/pages/owner/card/edit.uvue
查看文件

@@ -34,24 +34,24 @@
</view>
</view>
<!-- Bento Quick Links: Cases & Articles -->
<view class="bento-entry-grid">
<view class="bento-entry-card" @click="handleGoCases">
<view class="bento-entry-top">
<text class="bento-entry-badge">PORTFOLIO</text>
<text class="bento-entry-arrow">↗</text>
<!-- Quick Links: Cases & Articles -->
<view class="quick-entry-grid">
<view class="quick-entry-card" @click="handleGoCases">
<view class="quick-entry-top">
<text class="quick-entry-badge">PORTFOLIO</text>
<text class="quick-entry-arrow">↗</text>
</view>
<text class="bento-entry-title">{{ casesEntryTitle }}</text>
<text class="bento-entry-sub">{{ casesEntrySub }}</text>
<text class="quick-entry-title">{{ casesEntryTitle }}</text>
<text class="quick-entry-sub">{{ casesEntrySub }}</text>
</view>
<view class="bento-entry-card" @click="handleGoArticles">
<view class="bento-entry-top">
<text class="bento-entry-badge">INSIGHTS</text>
<text class="bento-entry-arrow">↗</text>
<view class="quick-entry-card" @click="handleGoArticles">
<view class="quick-entry-top">
<text class="quick-entry-badge">INSIGHTS</text>
<text class="quick-entry-arrow">↗</text>
</view>
<text class="bento-entry-title">{{ articlesEntryTitle }}</text>
<text class="bento-entry-sub">{{ articlesEntrySub }}</text>
<text class="quick-entry-title">{{ articlesEntryTitle }}</text>
<text class="quick-entry-sub">{{ articlesEntrySub }}</text>
</view>
</view>
@@ -1164,14 +1164,14 @@ onLoad((options: CardEditPageOptions) => {
color: var(--oc-text-2, #667085);
}
.bento-entry-grid {
.quick-entry-grid {
display: flex;
flex-direction: row;
gap: 12px;
margin-bottom: 16px;
}
.bento-entry-card {
.quick-entry-card {
flex: 1;
background-color: var(--oc-surface, #FFFFFF);
border-radius: var(--oc-radius-card, 20px);
@@ -1182,7 +1182,7 @@ onLoad((options: CardEditPageOptions) => {
flex-direction: column;
}
.bento-entry-top {
.quick-entry-top {
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -1190,7 +1190,7 @@ onLoad((options: CardEditPageOptions) => {
margin-bottom: 6px;
}
.bento-entry-badge {
.quick-entry-badge {
font-size: 10px;
font-weight: 700;
color: var(--oc-primary, #0088FF);
@@ -1199,19 +1199,19 @@ onLoad((options: CardEditPageOptions) => {
border-radius: 4px;
}
.bento-entry-arrow {
.quick-entry-arrow {
font-size: 14px;
color: var(--oc-text-2, #64748B);
}
.bento-entry-title {
.quick-entry-title {
font-size: 14px;
font-weight: 700;
color: var(--oc-text, #101828);
margin-bottom: 2px;
}
.bento-entry-sub {
.quick-entry-sub {
font-size: 11px;
color: var(--oc-text-2, #64748B);
}

645
mpuniapp/pages/owner/stats.uvue
查看文件

@@ -1,19 +1,29 @@
<template>
<view class="stats-page" :class="pageRtlClass" :style="pageTheme">
<!-- Slim Cockpit Header -->
<!-- Ambient Aurora Top Glow (Subtle Luxury Mesh Gradient < 8%) -->
<view class="stats-aurora-glow"></view>
<!-- Header Cockpit: Bento Control Panel -->
<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>
<!-- Live Status & Sync Indicator -->
<view class="cockpit-top-bar">
<view class="live-pill">
<view class="live-pulse-dot"></view>
<text class="live-pill-text">{{ t('liveBadge') }}</text>
</view>
<view class="stats-refresh-btn" @click="handleRefresh">
<text class="stats-refresh-text">{{ refreshText }}</text>
<view class="header-refresh-btn" @click="handleRefresh">
<text class="header-refresh-text">{{ refreshText }}</text>
</view>
</view>
<!-- Period Filter Chips -->
<view class="period-row">
<!-- Title & Subtitle Typography -->
<view class="stats-title-block">
<text class="stats-title">{{ pageTitle }}</text>
<text class="stats-subtitle">{{ pageSubtitle }}</text>
</view>
<!-- Period Filter Segmented Pill Control -->
<view class="period-segmented-track">
<view
class="period-chip"
:class="{ 'period-chip-active': state.period === 'today' }"
@@ -63,54 +73,98 @@
<!-- Stats Scrollable Body -->
<scroll-view v-else class="stats-body" :scroll-y="true">
<!-- 2x2 Executive Bento Grid -->
<!-- 2x2 Executive Bento Grid (Polished Precision KPI Cards) -->
<view class="kpi-grid">
<!-- KPI 1: Total Leads -->
<view class="metric-card">
<text class="metric-label">{{ t('metricTotal') }}</text>
<view class="metric-card metric-card-total">
<view class="metric-header-row">
<text class="metric-label">{{ t('metricTotal') }}</text>
<view class="metric-badge metric-badge-brand">
<text class="metric-badge-text">TOTAL</text>
</view>
</view>
<text class="metric-value text-brand">{{ state.summary.totalLeads }}</text>
<text class="metric-sub">{{ t('stepNew') }}</text>
<view class="metric-footer-row">
<view class="metric-indicator-dot bg-brand"></view>
<text class="metric-sub">{{ t('stepDescNew') }}</text>
</view>
</view>
<!-- KPI 2: Hot Opportunities -->
<!-- KPI 2: Hot Opportunities (Pulse Highlight) -->
<view class="metric-card metric-card-hot">
<view class="metric-hot-header">
<view class="metric-header-row">
<text class="metric-label text-hot">{{ t('metricHot') }}</text>
<view class="metric-hot-dot"></view>
<view class="metric-badge metric-badge-hot">
<view class="hot-spark-dot"></view>
<text class="metric-badge-text text-hot">HOT</text>
</view>
</view>
<text class="metric-value text-hot">{{ state.summary.hotLeads }}</text>
<text class="metric-sub">{{ t('stepHot') }}</text>
<view class="metric-footer-row">
<view class="metric-indicator-dot bg-hot"></view>
<text class="metric-sub text-hot">{{ t('stepDescHot') }}</text>
</view>
</view>
<!-- KPI 3: Won Deals -->
<view class="metric-card">
<text class="metric-label">{{ t('metricWon') }}</text>
<view class="metric-card metric-card-won">
<view class="metric-header-row">
<text class="metric-label">{{ t('metricWon') }}</text>
<view class="metric-badge metric-badge-won">
<text class="metric-badge-text text-won">WON</text>
</view>
</view>
<text class="metric-value text-won">{{ state.summary.wonLeads }}</text>
<text class="metric-sub">{{ t('stepWon') }}</text>
<view class="metric-footer-row">
<view class="metric-indicator-dot bg-won"></view>
<text class="metric-sub text-won">{{ t('stepDescWon') }}</text>
</view>
</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 class="metric-header-row">
<text class="metric-label">{{ t('metricRate') }}</text>
<view class="metric-badge metric-badge-rate">
<text class="metric-badge-text text-brand">CVR</text>
</view>
</view>
<text class="metric-value text-brand">{{ state.summary.overallRate }}%</text>
<view class="metric-footer-row">
<view class="metric-indicator-dot bg-brand"></view>
<text class="metric-sub">{{ t('stepDescContacted') }}</text>
</view>
</view>
</view>
<!-- Conversion Funnel Section -->
<!-- Conversion Funnel Section (Fluid Gradient Progress) -->
<view class="stats-card stats-funnel">
<view class="card-header">
<text class="card-title">{{ t('funnelTitle') }}</text>
<view class="card-header-bar">
<view class="card-title-group">
<text class="card-title">{{ t('funnelTitle') }}</text>
<text class="card-title-badge">4 STAGES</text>
</view>
</view>
<view class="funnel-list">
<view v-for="step in state.funnel" :key="step.key" class="funnel-step-item">
<view
v-for="(step, index) 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-identity">
<text class="funnel-step-seq">0{{ index + 1 }}</text>
<text class="funnel-step-label">{{ step.label }}</text>
</view>
<view class="funnel-step-values">
<text class="funnel-step-count">{{ step.count }}</text>
<text class="funnel-step-rate">{{ step.rate }}%</text>
<view class="funnel-step-rate-pill">
<text class="funnel-step-rate-text">{{ step.rate }}%</text>
</view>
</view>
</view>
<view class="funnel-track">
<view
class="funnel-fill"
@@ -122,17 +176,29 @@
</view>
</view>
<!-- Acquisition Channels Matrix -->
<!-- Acquisition Channels Matrix (Multi-Channel Bento Grid) -->
<view class="stats-card stats-channels">
<view class="card-header">
<text class="card-title">{{ t('channelTitle') }}</text>
<view class="card-header-bar">
<view class="card-title-group">
<text class="card-title">{{ t('channelTitle') }}</text>
</view>
</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
v-for="ch in state.channels"
:key="ch.source"
class="channel-card"
:class="'channel-card-' + ch.source"
>
<view class="channel-card-top">
<view class="channel-tag-wrap">
<view class="channel-accent-dot" :class="'accent-dot-' + ch.source"></view>
<text class="channel-name">{{ ch.label }}</text>
</view>
<text class="channel-cvr-pill">{{ ch.conversionRate }}% CVR</text>
</view>
<view class="channel-data-row">
<view class="channel-data-col">
<text class="channel-num">{{ ch.leadsCount }}</text>
@@ -147,6 +213,37 @@
</view>
</view>
</view>
<!-- Intent Distribution Health Section -->
<view class="stats-card stats-health">
<view class="card-header-bar">
<view class="card-title-group">
<text class="card-title">{{ t('healthTitle') }}</text>
</view>
</view>
<!-- 3-Tier Multi-Segment Bar -->
<view class="health-segmented-bar">
<view class="health-segment-hot" :style="{ flex: healthHotFlex }"></view>
<view class="health-segment-warm" :style="{ flex: healthWarmFlex }"></view>
<view class="health-segment-cool" :style="{ flex: healthCoolFlex }"></view>
</view>
<view class="health-legend-row">
<view class="health-legend-item">
<view class="legend-dot bg-hot"></view>
<text class="legend-text">{{ t('tierHot') }}</text>
</view>
<view class="health-legend-item">
<view class="legend-dot bg-warm"></view>
<text class="legend-text">{{ t('tierWarm') }}</text>
</view>
<view class="health-legend-item">
<view class="legend-dot bg-cool"></view>
<text class="legend-text">{{ t('tierCool') }}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
@@ -198,6 +295,19 @@ const pageRtlClass = computed((): string => {
return isRtl(getCurrentLocale()) ? 'stats-rtl' : '';
});
const healthHotFlex = computed((): number => {
return state.summary.hotLeads > 0 ? state.summary.hotLeads : 1;
});
const healthWarmFlex = computed((): number => {
const warm = state.summary.totalLeads - state.summary.hotLeads - state.summary.wonLeads;
return warm > 0 ? warm : 1;
});
const healthCoolFlex = computed((): number => {
return 1;
});
function t(key: string): string {
return resolveStatsText(key);
}
@@ -221,89 +331,133 @@ onShow(() => {
</script>
<style scoped>
/* Page Container */
/* Page Root */
.stats-page {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--oc-bg, #F5F8FC);
position: relative;
overflow: hidden;
}
.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;
/* Ambient Top Aurora Glow (<8% area) */
.stats-aurora-glow {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 140px;
background: radial-gradient(circle at 50% -20%, rgba(0, 163, 255, 0.12) 0%, rgba(99, 102, 241, 0.05) 55%, rgba(245, 248, 252, 0) 100%);
pointer-events: none;
z-index: 0;
}
.stats-header-top {
/* Header Cockpit */
.stats-header {
position: relative;
z-index: 1;
padding-inline: var(--oc-space-16, 16px);
padding-block-start: var(--oc-space-12, 12px);
padding-block-end: var(--oc-space-12, 12px);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
border-bottom: 1px solid var(--oc-border, #E3E7ED);
flex-shrink: 0;
backdrop-filter: blur(10px);
}
.cockpit-top-bar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-block-end: var(--oc-space-12, 12px);
margin-block-end: var(--oc-space-8, 8px);
}
.stats-title-group {
.live-pill {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
padding-inline: 8px;
padding-block: 3px;
background-color: #ECFDF3;
border: 1px solid #A6F4C5;
border-radius: 9999px;
}
.stats-title {
font-size: 20px;
.live-pulse-dot {
width: 6px;
height: 6px;
border-radius: 3px;
background-color: #12B76A;
margin-inline-end: 6px;
}
.live-pill-text {
font-size: 10px;
font-weight: 700;
color: var(--oc-text, #101828);
line-height: 1.25;
color: #027A48;
letter-spacing: 0.5px;
}
.stats-subtitle {
font-size: 12px;
color: var(--oc-text-2, #667085);
margin-block-start: 2px;
}
.stats-refresh-btn {
min-height: 32px;
padding-inline: 12px;
.header-refresh-btn {
min-height: 28px;
padding-inline: 10px;
background-color: var(--oc-surface, #F7F8FA);
border: 1px solid var(--oc-border, #E3E7ED);
border-radius: var(--oc-radius-btn, 14px);
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stats-refresh-btn:active {
.header-refresh-btn:active {
opacity: 0.85;
}
.stats-refresh-text {
font-size: 12px;
.header-refresh-text {
font-size: 11px;
color: var(--oc-text-2, #667085);
font-weight: 500;
font-weight: 600;
}
/* Period Filter Chips */
.period-row {
.stats-title-block {
margin-block-end: var(--oc-space-12, 12px);
}
.stats-title {
font-size: 22px;
font-weight: 800;
color: var(--oc-text, #101828);
line-height: 1.2;
}
.stats-subtitle {
font-size: 12px;
color: var(--oc-text-2, #667085);
margin-block-start: 3px;
}
/* Period Segmented Track */
.period-segmented-track {
display: flex;
flex-direction: row;
gap: 8px;
background-color: #EEF2F6;
border-radius: 9999px;
padding: 3px;
gap: 4px;
}
.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);
height: 30px;
border-radius: 9999px;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
@@ -315,8 +469,8 @@ onShow(() => {
}
.period-chip-active {
background-color: var(--oc-primary-soft, #EBF5FF);
border-color: var(--oc-primary, #0B5CFF);
background-color: #FFFFFF;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.period-chip-text {
@@ -327,7 +481,7 @@ onShow(() => {
.period-chip-active .period-chip-text {
color: var(--oc-primary, #0B5CFF);
font-weight: 600;
font-weight: 700;
}
/* Skeleton Loading */
@@ -345,7 +499,7 @@ onShow(() => {
.skeleton-card {
flex: 1;
height: 80px;
height: 84px;
background-color: var(--oc-border, #E3E7ED);
border-radius: var(--oc-radius-card, 20px);
}
@@ -377,7 +531,7 @@ onShow(() => {
}
.feedback-title {
font-size: 16px;
font-size: 15px;
font-weight: 600;
color: var(--oc-text, #101828);
margin-block-end: 6px;
@@ -389,13 +543,16 @@ onShow(() => {
text-align: center;
}
/* Stats Body */
/* Body Container */
.stats-body {
position: relative;
z-index: 1;
flex: 1;
padding: 16px;
padding-inline: var(--oc-space-16, 16px);
padding-block: var(--oc-space-12, 12px);
}
/* 2x2 Bento Grid KPI Cards */
/* 2x2 Bento KPI Grid */
.kpi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -411,43 +568,92 @@ onShow(() => {
padding: 12px 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 92px;
transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.metric-card:active {
opacity: 0.92;
}
.metric-card-total {
background: linear-gradient(150deg, #FFFFFF 0%, #F5F9FF 100%);
}
.metric-card-hot {
background: linear-gradient(145deg, #FFFFFF 0%, #FFF8F6 100%);
background: linear-gradient(150deg, #FFFFFF 0%, #FFF8F6 100%);
border-color: #FECDCA;
}
.metric-hot-header {
.metric-card-won {
background: linear-gradient(150deg, #FFFFFF 0%, #F6FEF9 100%);
border-color: #D1FADF;
}
.metric-card-rate {
background: linear-gradient(150deg, #FFFFFF 0%, #F8FAFC 100%);
}
.metric-header-row {
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-label {
font-size: 12px;
font-weight: 600;
color: var(--oc-text-2, #667085);
}
.metric-badge {
padding-inline: 6px;
padding-block: 2px;
border-radius: 9999px;
display: flex;
flex-direction: row;
align-items: center;
}
.metric-badge-brand {
background-color: var(--oc-primary-soft, #EBF5FF);
}
.metric-badge-hot {
background-color: #FEE4E2;
}
.metric-badge-won {
background-color: #ECFDF3;
}
.metric-badge-rate {
background-color: #F2F4F7;
}
.metric-badge-text {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
}
.hot-spark-dot {
width: 5px;
height: 5px;
border-radius: 3px;
background-color: var(--oc-error, #F04438);
margin-inline-end: 4px;
}
.metric-value {
font-size: 24px;
font-size: 26px;
font-weight: 800;
color: var(--oc-text, #101828);
line-height: 1.15;
margin-block-end: 2px;
margin-block-end: 4px;
}
.text-brand {
@@ -462,16 +668,46 @@ onShow(() => {
color: var(--oc-success, #12B76A);
}
.text-primary {
color: var(--oc-primary, #0B5CFF);
.metric-footer-row {
display: flex;
flex-direction: row;
align-items: center;
}
.metric-indicator-dot {
width: 5px;
height: 5px;
border-radius: 3px;
margin-inline-end: 5px;
}
.bg-brand {
background-color: var(--oc-primary, #0B5CFF);
}
.bg-hot {
background-color: var(--oc-error, #F04438);
}
.bg-won {
background-color: var(--oc-success, #12B76A);
}
.bg-warm {
background-color: var(--oc-warning, #F79009);
}
.bg-cool {
background-color: #98A2B3;
}
.metric-sub {
font-size: 10px;
font-size: 11px;
color: var(--oc-text-2, #667085);
font-weight: 500;
}
/* Generic Stats Card */
/* Generic Bento Card */
.stats-card {
background-color: var(--oc-surface, #FFFFFF);
border: 1px solid var(--oc-border, #E3E7ED);
@@ -481,16 +717,34 @@ onShow(() => {
margin-block-end: 12px;
}
.card-header {
.card-header-bar {
margin-block-end: 12px;
}
.card-title-group {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.card-title {
font-size: 14px;
font-size: 15px;
font-weight: 700;
color: var(--oc-text, #101828);
}
.card-title-badge {
font-size: 10px;
font-weight: 700;
color: var(--oc-primary, #0B5CFF);
background-color: var(--oc-primary-soft, #EBF5FF);
padding-inline: 7px;
padding-block: 2px;
border-radius: 9999px;
letter-spacing: 0.5px;
}
/* Funnel Step List */
.funnel-list {
display: flex;
@@ -511,8 +765,25 @@ onShow(() => {
margin-block-end: 6px;
}
.funnel-step-identity {
display: flex;
flex-direction: row;
align-items: center;
}
.funnel-step-seq {
font-size: 11px;
font-weight: 800;
color: var(--oc-primary, #0B5CFF);
background-color: var(--oc-primary-soft, #EBF5FF);
padding-inline: 5px;
padding-block: 1px;
border-radius: 4px;
margin-inline-end: 8px;
}
.funnel-step-label {
font-size: 12px;
font-size: 13px;
font-weight: 600;
color: var(--oc-text, #101828);
}
@@ -525,19 +796,23 @@ onShow(() => {
}
.funnel-step-count {
font-size: 13px;
font-size: 14px;
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);
.funnel-step-rate-pill {
background-color: var(--oc-surface, #F7F8FA);
border: 1px solid var(--oc-border, #E3E7ED);
border-radius: 9999px;
padding-inline: 6px;
padding-block: 1px;
border-radius: 9999px;
}
.funnel-step-rate-text {
font-size: 11px;
font-weight: 700;
color: var(--oc-primary, #0B5CFF);
}
.funnel-track {
@@ -551,23 +826,23 @@ onShow(() => {
.funnel-fill {
height: 100%;
border-radius: 4px;
transition: width 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
transition: width 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.funnel-fill-new {
background-color: var(--oc-primary, #0B5CFF);
background: linear-gradient(90deg, #00A3FF 0%, #0B5CFF 100%);
}
.funnel-fill-hot {
background-color: var(--oc-error, #F04438);
background: linear-gradient(90deg, #FF6B4A 0%, #F04438 100%);
}
.funnel-fill-contacted {
background-color: var(--oc-warning, #F79009);
background: linear-gradient(90deg, #FDB022 0%, #F79009 100%);
}
.funnel-fill-won {
background-color: var(--oc-success, #12B76A);
background: linear-gradient(90deg, #32D583 0%, #12B76A 100%);
}
/* Channel Matrix Grid */
@@ -578,15 +853,39 @@ onShow(() => {
}
.channel-card {
background-color: var(--oc-surface, #F7F8FA);
border: 1px solid var(--oc-border, #E3E7ED);
border-radius: 14px;
border-radius: 16px;
padding: 10px 12px;
display: flex;
flex-direction: column;
transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.channel-header {
.channel-card:active {
opacity: 0.9;
}
.channel-card-nfc {
background: linear-gradient(150deg, #FFFFFF 0%, #F5F9FF 100%);
border-color: #D1E4FF;
}
.channel-card-qr {
background: linear-gradient(150deg, #FFFFFF 0%, #F4FBFA 100%);
border-color: #B5EADB;
}
.channel-card-link {
background: linear-gradient(150deg, #FFFFFF 0%, #F8FAFC 100%);
border-color: #E2E8F0;
}
.channel-card-ai_chat {
background: linear-gradient(150deg, #FFFFFF 0%, #F9F7FE 100%);
border-color: #E0D7FE;
}
.channel-card-top {
display: flex;
flex-direction: row;
align-items: center;
@@ -594,14 +893,43 @@ onShow(() => {
margin-block-end: 8px;
}
.channel-tag-wrap {
display: flex;
flex-direction: row;
align-items: center;
}
.channel-accent-dot {
width: 6px;
height: 6px;
border-radius: 3px;
margin-inline-end: 5px;
}
.accent-dot-nfc {
background-color: var(--oc-primary, #0B5CFF);
}
.accent-dot-qr {
background-color: #0E9384;
}
.accent-dot-link {
background-color: #475467;
}
.accent-dot-ai_chat {
background-color: #7F56D9;
}
.channel-name {
font-size: 12px;
font-weight: 600;
font-weight: 700;
color: var(--oc-text, #101828);
}
.channel-rate {
font-size: 11px;
.channel-cvr-pill {
font-size: 10px;
font-weight: 700;
color: var(--oc-primary, #0B5CFF);
}
@@ -611,6 +939,7 @@ onShow(() => {
flex-direction: row;
align-items: center;
justify-content: space-around;
padding-block-start: 4px;
}
.channel-data-col {
@@ -620,9 +949,10 @@ onShow(() => {
}
.channel-num {
font-size: 14px;
font-weight: 700;
font-size: 15px;
font-weight: 800;
color: var(--oc-text, #101828);
line-height: 1.2;
}
.channel-tag {
@@ -633,10 +963,63 @@ onShow(() => {
.channel-data-divider {
width: 1px;
height: 18px;
height: 20px;
background-color: var(--oc-border, #E3E7ED);
}
/* Intent Health Section */
.health-segmented-bar {
height: 10px;
border-radius: 5px;
background-color: var(--oc-surface, #F7F8FA);
border: 1px solid var(--oc-border, #E3E7ED);
display: flex;
flex-direction: row;
overflow: hidden;
margin-block-end: 10px;
}
.health-segment-hot {
background: linear-gradient(90deg, #FF6B4A, #F04438);
transition: flex 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.health-segment-warm {
background: linear-gradient(90deg, #FDB022, #F79009);
transition: flex 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.health-segment-cool {
background-color: #D0D5DD;
transition: flex 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.health-legend-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.health-legend-item {
display: flex;
flex-direction: row;
align-items: center;
}
.legend-dot {
width: 6px;
height: 6px;
border-radius: 3px;
margin-inline-end: 5px;
}
.legend-text {
font-size: 11px;
color: var(--oc-text-2, #667085);
font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;

28
mpuniapp/pages/owner/useStats.uts
查看文件

@@ -139,6 +139,34 @@ export function resolveStatsText(key: string): string {
return isZhLocale() ? 'AI顾问' : 'AI Concierge';
}
if (key === 'liveBadge') {
return isZhLocale() ? '实时大盘' : 'LIVE INSIGHTS';
}
if (key === 'healthTitle') {
return isZhLocale() ? '潜客意向度健康度' : 'Intent Distribution';
}
if (key === 'tierHot') {
return isZhLocale() ? '核心高意向 (80+)' : 'High Intent (80+)';
}
if (key === 'tierWarm') {
return isZhLocale() ? '重点跟进 (50-79)' : 'Warm Leads (50-79)';
}
if (key === 'tierCool') {
return isZhLocale() ? '待培育池 (<50)' : 'Cool Pool (<50)';
}
if (key === 'stepDescNew') {
return isZhLocale() ? '建档接入' : 'Captured';
}
if (key === 'stepDescHot') {
return isZhLocale() ? '高频互动' : 'Engaged';
}
if (key === 'stepDescContacted') {
return isZhLocale() ? '方案沟通' : 'Pitched';
}
if (key === 'stepDescWon') {
return isZhLocale() ? '签约成交' : 'Closed';
}
return key;
}