2 lines
4.1 KiB
JavaScript
2 lines
4.1 KiB
JavaScript
import{d as t,r as a,o as e,b as r,e as l,f as s,X as o,N as n,b2 as i,I as d,J as c,T as b,q as v,v as u,m as x}from"./index-BoIUJTA2.js";import{p as f}from"./operations-Cr4YfoRu.js";import{_ as p}from"./_plugin-vue_export-helper-BCo6x5W8.js";const g={class:"art-card h-auto min-h-[480px] p-6 mb-6 overflow-hidden relative group"},m={class:"relative z-10"},h={class:"retention-table-container custom-scrollbar"},y={class:"w-full border-collapse"},k={class:"p-4 text-sm font-black text-g-900 font-mono"},w={class:"p-4 text-center"},_={class:"px-3 py-1 rounded-full bg-g-200/50 text-xs font-black italic text-g-800"},j=p(t({__name:"retention-cohort",setup(t){const p=a(!1),j=a([]),C=t=>{const a=t/100,e=t>40?"#fff":"rgba(var(--art-g-800-rgb), 0.8)";return{backgroundColor:`rgba(var(--art-primary-rgb), ${Math.max(a,.05)})`,color:e,border:a>.4?"1px solid rgba(var(--art-primary-rgb), 0.2)":"none"}};return e(()=>{return t=this,a=null,e=function*(){p.value=!0;try{j.value=yield f("30d")}catch(t){b.error("获取留存分析数据失败")}finally{p.value=!1}},new Promise((r,l)=>{var s=t=>{try{n(e.next(t))}catch(a){l(a)}},o=t=>{try{n(e.throw(t))}catch(a){l(a)}},n=t=>t.done?r(t.value):Promise.resolve(t.value).then(s,o);n((e=e.apply(t,a)).next())});var t,a,e}),(t,a)=>{const e=i;return l(),r("div",g,[a[4]||(a[4]=s("div",{class:"absolute -top-24 -left-24 w-64 h-64 bg-primary/5 rounded-full blur-3xl group-hover:bg-primary/10 transition-all duration-700"},null,-1)),a[5]||(a[5]=s("div",{class:"absolute -bottom-24 -right-24 w-64 h-64 bg-info/5 rounded-full blur-3xl group-hover:bg-info/10 transition-all duration-700"},null,-1)),s("div",m,[a[2]||(a[2]=o('<div class="art-card-header mb-6" data-v-3e0fb7a4><div class="title" data-v-3e0fb7a4><div class="flex-c mb-1" data-v-3e0fb7a4><i class="ri-user-heart-fill text-primary mr-2 text-xl" data-v-3e0fb7a4></i><h4 class="text-xl font-black text-g-900 tracking-tight" data-v-3e0fb7a4>留存同类群组分析 (Cohort)</h4></div><p class="text-sm text-g-500" data-v-3e0fb7a4>追踪用户注册后的生命周期活跃情况，识别产品粘性趋势</p></div></div>',1)),n((l(),r("div",h,[s("table",y,[s("thead",null,[s("tr",null,[a[0]||(a[0]=s("th",{class:"p-4 text-left text-xs font-black text-g-700 uppercase tracking-widest bg-g-100/50 rounded-tl-2xl"},"注册日期",-1)),a[1]||(a[1]=s("th",{class:"p-4 text-center text-xs font-black text-g-700 uppercase tracking-widest bg-g-100/50"},"样本量",-1)),(l(),r(d,null,c(7,t=>s("th",{key:t,class:v(["p-4 text-center text-xs font-black text-g-700 uppercase tracking-widest bg-g-100/50",{"rounded-tr-2xl":7===t}])}," Day "+u(t),3)),64))])]),s("tbody",null,[(l(!0),r(d,null,c(j.value,(t,a)=>{return l(),r("tr",{key:a,class:"border-b border-g-100/80 hover:bg-white/60 transition-colors"},[s("td",k,u(t.date),1),s("td",w,[s("span",_,u((e=t.total,e.toLocaleString())),1)]),(l(!0),r(d,null,c(t.retention.slice(1),(t,a)=>(l(),r("td",{key:a,class:"p-2 text-center text-xs"},[s("div",{class:"w-full h-10 flex-cc font-black rounded-xl transition-all duration-500 hover:scale-110 hover:shadow-lg",style:x(C(t))},u(t)+"% ",5)]))),128))]);var e}),128))])])])),[[e,p.value]]),a[3]||(a[3]=o('<div class="mt-6 flex-cb" data-v-3e0fb7a4><div class="flex items-center space-x-4" data-v-3e0fb7a4><div class="flex items-center text-[10px] font-bold text-g-400" data-v-3e0fb7a4><span class="w-3 h-3 rounded-full mr-1.5" style="background:rgba(var(--art-primary-rgb), 0.1);" data-v-3e0fb7a4></span> < 20% </div><div class="flex items-center text-[10px] font-bold text-g-400" data-v-3e0fb7a4><span class="w-3 h-3 rounded-full mr-1.5" style="background:rgba(var(--art-primary-rgb), 0.4);" data-v-3e0fb7a4></span> 20% - 40% </div><div class="flex items-center text-[10px] font-bold text-g-400" data-v-3e0fb7a4><span class="w-3 h-3 rounded-full mr-1.5" style="background:rgba(var(--art-primary-rgb), 0.8);" data-v-3e0fb7a4></span> > 40% </div></div><div class="text-[10px] text-g-400 italic font-medium" data-v-3e0fb7a4><i class="ri-information-line mr-1" data-v-3e0fb7a4></i> 注：热力图深浅代表留存强度，反映产品的长期价值。 </div></div>',1))])])}}}),[["__scopeId","data-v-3e0fb7a4"]]);export{j as default};
|