界面设计
This commit is contained in:
comlibmb
@@ -70,43 +70,64 @@
|
||||
<text class="card-title">用户增长趋势</text>
|
||||
<text class="card-desc">{{ selectedPeriodText }} · 新用户 vs 总用户</text>
|
||||
</view>
|
||||
<EChartsView class="chart-box" :option="growthChartOption" />
|
||||
</view>
|
||||
|
||||
<!-- 用户留存率 -->
|
||||
<view class="card">
|
||||
<view class="card-head">
|
||||
<text class="card-title">用户留存率</text>
|
||||
<text class="card-desc">按留存天数统计</text>
|
||||
<view v-if="loading || !growthChartOption || !growthChartOption.series || growthChartOption.series.length === 0" class="chart-loading">
|
||||
<text>{{ loading ? '加载中...' : '暂无数据' }}</text>
|
||||
</view>
|
||||
<EChartsView class="chart-box" :option="retentionChartOption" />
|
||||
<EChartsView v-else class="chart-box" :option="growthChartOption" />
|
||||
</view>
|
||||
|
||||
<!-- 用户活跃度分析 -->
|
||||
<view class="card">
|
||||
<view class="card-head">
|
||||
<text class="card-title">用户活跃度分析</text>
|
||||
<text class="card-desc">日活跃、周活跃、月活跃</text>
|
||||
</view>
|
||||
<EChartsView class="chart-box" :option="activityChartOption" />
|
||||
</view>
|
||||
|
||||
<!-- 新老用户对比 -->
|
||||
<!-- 留存 / 新老 / 活跃 / 画像（统一公共块） -->
|
||||
<view class="card card-full">
|
||||
<view class="card-head">
|
||||
<text class="card-title">新老用户对比</text>
|
||||
<text class="card-desc">GMV、订单数、客单价对比</text>
|
||||
<text class="card-title">用户洞察</text>
|
||||
<text class="card-desc">留存率 / 新老对比 / 活跃度 / 画像</text>
|
||||
</view>
|
||||
<view class="quad-grid">
|
||||
<view class="quad-item">
|
||||
<view class="sub-head">
|
||||
<text class="sub-title">用户留存率</text>
|
||||
<text class="sub-desc">按留存天数统计</text>
|
||||
</view>
|
||||
<EChartsView class="chart-box chart-box-sm" :option="retentionChartOption" />
|
||||
</view>
|
||||
<view class="quad-item">
|
||||
<view class="sub-head">
|
||||
<text class="sub-title">新老用户对比</text>
|
||||
<text class="sub-desc">GMV、订单数、客单价</text>
|
||||
</view>
|
||||
<EChartsView class="chart-box chart-box-sm" :option="comparisonChartOption" />
|
||||
</view>
|
||||
<view class="quad-item">
|
||||
<view class="sub-head">
|
||||
<text class="sub-title">用户活跃度</text>
|
||||
<text class="sub-desc">日活/周活/月活</text>
|
||||
</view>
|
||||
<EChartsView class="chart-box chart-box-sm" :option="activityChartOption" />
|
||||
</view>
|
||||
<view class="quad-item">
|
||||
<view class="sub-head">
|
||||
<text class="sub-title">用户画像</text>
|
||||
<text class="sub-desc">性别/年龄/地域</text>
|
||||
</view>
|
||||
<EChartsView class="chart-box chart-box-sm" :option="profileChartOption" />
|
||||
</view>
|
||||
</view>
|
||||
<EChartsView class="chart-box" :option="comparisonChartOption" />
|
||||
</view>
|
||||
|
||||
<!-- 用户画像分析 -->
|
||||
<view class="card">
|
||||
<!-- 用户分群 + 流量来源 -->
|
||||
<view class="card card-full">
|
||||
<view class="card-head">
|
||||
<text class="card-title">用户画像分析</text>
|
||||
<text class="card-desc">性别、年龄、地域分布</text>
|
||||
<text class="card-title">用户分群 & 流量来源</text>
|
||||
<text class="card-desc">{{ selectedPeriodText }} · 分群占比 & 来源分布</text>
|
||||
</view>
|
||||
<view class="two-col">
|
||||
<view class="two-col-item">
|
||||
<EChartsView class="chart-box" :option="segmentChartOption" />
|
||||
</view>
|
||||
<view class="two-col-item">
|
||||
<EChartsView class="chart-box" :option="trafficChartOption" />
|
||||
</view>
|
||||
</view>
|
||||
<EChartsView class="chart-box" :option="profileChartOption" />
|
||||
</view>
|
||||
|
||||
<!-- 留白 -->
|
||||
@@ -169,7 +190,10 @@ export default {
|
||||
retentionChartOption: {} as any,
|
||||
activityChartOption: {} as any,
|
||||
comparisonChartOption: {} as any,
|
||||
profileChartOption: {} as any
|
||||
profileChartOption: {} as any,
|
||||
segmentChartOption: {} as any,
|
||||
trafficChartOption: {} as any,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
@@ -195,6 +219,7 @@ export default {
|
||||
},
|
||||
|
||||
async loadUserData() {
|
||||
this.loading = true
|
||||
try {
|
||||
this.updateTime()
|
||||
const { startDate, endDate } = this.calcDateRange()
|
||||
@@ -205,7 +230,7 @@ export default {
|
||||
p.set('p_start_date', startStr)
|
||||
p.set('p_end_date', endStr)
|
||||
|
||||
// KPI（新 RPC）
|
||||
// KPI（RPC）
|
||||
const res: any = await supa.rpc('rpc_analytics_user_kpis', p)
|
||||
const row = Array.isArray(res.data) && res.data.length > 0 ? res.data[0] : (res.data || {})
|
||||
const safe = (v: any): number => {
|
||||
@@ -223,7 +248,7 @@ export default {
|
||||
repurchase_growth: safe(row.repurchase_growth)
|
||||
}
|
||||
|
||||
// 增长趋势（新 RPC）
|
||||
// 增长趋势（RPC）
|
||||
const tRes: any = await supa.rpc('rpc_analytics_user_growth_trend', p)
|
||||
const rows: Array<any> = Array.isArray(tRes.data) ? (tRes.data as Array<any>) : []
|
||||
const x: Array<string> = []
|
||||
@@ -236,7 +261,6 @@ export default {
|
||||
totalArr.push(Number(rows[i].total_users) || 0)
|
||||
}
|
||||
|
||||
// 构建图表（先把“用户增长趋势”做成真实动态图）
|
||||
this.growthChartOption = {
|
||||
grid: { left: 40, right: 18, top: 20, bottom: 40 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
@@ -249,14 +273,62 @@ export default {
|
||||
]
|
||||
}
|
||||
|
||||
// 其余图表：先用“有文案的占位”避免空白（后续可按业务字段继续增强）
|
||||
// 用户分群（RPC）
|
||||
const sRes: any = await supa.rpc('rpc_analytics_user_segments', p)
|
||||
const sRows: Array<any> = Array.isArray(sRes.data) ? (sRes.data as Array<any>) : []
|
||||
const segData: Array<any> = []
|
||||
for (let i = 0; i < sRows.length; i++) {
|
||||
const name = `${sRows[i].name}`
|
||||
const value = Number(sRows[i].value) || 0
|
||||
segData.push({ name, value })
|
||||
}
|
||||
this.segmentChartOption = {
|
||||
tooltip: { trigger: 'item' },
|
||||
legend: { top: 10, left: 'center', padding: [12, 0, 24, 0] },
|
||||
series: [
|
||||
{
|
||||
name: '用户分群',
|
||||
type: 'pie',
|
||||
// 下移饼图，避免被上方 legend 遮挡标签
|
||||
center: ['48%', '60%'],
|
||||
radius: ['42%', '66%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: { show: true, formatter: '{b}\n{d}%' },
|
||||
labelLine: { length: 14, length2: 10 },
|
||||
data: segData
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 流量来源（RPC）
|
||||
const t2Res: any = await supa.rpc('rpc_analytics_traffic_sources', p)
|
||||
const tRows: Array<any> = Array.isArray(t2Res.data) ? (t2Res.data as Array<any>) : []
|
||||
const srcNames: Array<string> = []
|
||||
const srcVals: Array<number> = []
|
||||
for (let i = 0; i < tRows.length; i++) {
|
||||
const name = `${tRows[i].name}`
|
||||
const value = Number(tRows[i].value) || 0
|
||||
srcNames.push(name)
|
||||
srcVals.push(value)
|
||||
}
|
||||
this.trafficChartOption = {
|
||||
grid: { left: 60, right: 18, top: 20, bottom: 40 },
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
xAxis: { type: 'value', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } } },
|
||||
yAxis: { type: 'category', data: srcNames, axisLabel: { color: 'rgba(0,0,0,0.55)' } },
|
||||
series: [{ type: 'bar', data: srcVals, barWidth: 14, itemStyle: { borderRadius: 6 } }]
|
||||
}
|
||||
|
||||
// 四宫格：先占位（后续补 RPC）
|
||||
this.retentionChartOption = { title: { text: '留存率（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
|
||||
this.activityChartOption = { title: { text: '活跃度（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
|
||||
this.comparisonChartOption = { title: { text: '新老用户对比（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
|
||||
this.profileChartOption = { title: { text: '用户画像（待接入：需要性别/年龄/地域字段）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
|
||||
} catch (e) {
|
||||
console.error('loadUserData failed', e)
|
||||
uni.showToast({ title: '数据加载失败', icon: 'none', duration: 2000 })
|
||||
} finally {
|
||||
this.loading = false
|
||||
this.updateTime()
|
||||
}
|
||||
},
|
||||
@@ -297,8 +369,6 @@ export default {
|
||||
return `${sign}${v.toFixed(1)}%`
|
||||
},
|
||||
|
||||
buildChartOptions() {},
|
||||
|
||||
handleMenu() {
|
||||
this.showSidebarMenu = true
|
||||
},
|
||||
@@ -375,139 +445,6 @@ export default {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 顶部栏 */
|
||||
.topbar {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topbar-left {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.menu-icon:active {
|
||||
background: #e5e7eb;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.menu-icon .icon {
|
||||
font-size: 18px;
|
||||
color: #111;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
max-width: 420px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: rgba(0,0,0,0.55);
|
||||
max-width: 420px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon-btn-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-btn-icon:active {
|
||||
background: #e5e7eb;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.icon-btn-icon .icon {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
display: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: #f3f4f6;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.more-btn.active {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.more-btn .icon {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
/* 时间维度 tabs */
|
||||
.tabs {
|
||||
margin-top: 12px;
|
||||
@@ -614,27 +551,69 @@ export default {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (min-width: 960px) {
|
||||
.kpi-card {
|
||||
flex: 1 1 calc(25% - 9px);
|
||||
min-width: 200px;
|
||||
}
|
||||
.chart-box-sm {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.chart-loading {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(0,0,0,0.45);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.two-col {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.two-col-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.quad-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.quad-item {
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sub-head {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.sub-desc {
|
||||
font-size: 12px;
|
||||
color: rgba(0,0,0,0.55);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.title,
|
||||
.subtitle {
|
||||
max-width: 200px;
|
||||
.two-col {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.topbar-right .btn-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
display: flex !important;
|
||||
.quad-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user