Remove outdated UI components and screens for activity history, AI quit assistant, home dashboard, profile & settings, and smoking statistics. Update API to include a new endpoint for home dashboard data retrieval. Enhance smoke record dialog with improved layout and styling adjustments.
This commit is contained in:
nepiedg
@@ -1,196 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="dark" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>历史记录</title>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#2bee79",
|
||||
"background-light": "#f6f8f7",
|
||||
"background-dark": "#102217",
|
||||
"surface-dark": "#1a2e22",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Manrope", "sans-serif"]
|
||||
},
|
||||
borderRadius: {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 1,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 24
|
||||
}.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-white antialiased selection:bg-primary selection:text-black">
|
||||
<div class="relative flex min-h-screen w-full flex-col max-w-md mx-auto overflow-hidden shadow-2xl bg-background-light dark:bg-background-dark border-x border-white/5">
|
||||
<header class="sticky top-0 z-20 flex items-center justify-between p-4 bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-md border-b border-black/5 dark:border-white/5">
|
||||
<h2 class="text-xl font-bold leading-tight tracking-tight flex-1">历史记录</h2>
|
||||
<button class="flex items-center justify-center w-10 h-10 rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-900 dark:text-white">tune</span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="sticky top-[72px] z-10 bg-background-light dark:bg-background-dark pt-2 pb-4">
|
||||
<div class="flex gap-3 px-4 overflow-x-auto no-scrollbar">
|
||||
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-primary px-5 transition-transform active:scale-95">
|
||||
<span class="text-black text-sm font-bold">全部</span>
|
||||
</button>
|
||||
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-gray-200 dark:bg-surface-dark border border-transparent dark:border-white/5 px-5 transition-transform active:scale-95">
|
||||
<span class="text-slate-600 dark:text-gray-300 text-sm font-medium">已抽烟</span>
|
||||
</button>
|
||||
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-gray-200 dark:bg-surface-dark border border-transparent dark:border-white/5 px-5 transition-transform active:scale-95">
|
||||
<span class="text-slate-600 dark:text-gray-300 text-sm font-medium">已忍住</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute right-0 top-2 bottom-4 w-8 bg-gradient-to-l from-background-light dark:from-background-dark to-transparent pointer-events-none"></div>
|
||||
</div>
|
||||
<main class="flex-1 flex flex-col relative w-full">
|
||||
<div class="absolute left-[27px] top-0 bottom-0 w-[2px] bg-gray-200 dark:bg-white/10 z-0"></div>
|
||||
<div class="relative z-0 pb-2">
|
||||
<div class="sticky top-[130px] z-10 bg-background-light dark:bg-background-dark py-2 px-4 mb-2 border-b border-transparent">
|
||||
<h4 class="text-primary text-xs font-bold uppercase tracking-wider bg-surface-dark/50 dark:bg-surface-dark backdrop-blur px-3 py-1 rounded-full inline-block">今天, 11月14日</h4>
|
||||
</div>
|
||||
<div class="group relative grid grid-cols-[56px_1fr] px-4 py-3">
|
||||
<div class="flex flex-col items-center h-full relative">
|
||||
<div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-primary shadow-[0_0_15px_rgba(43,238,121,0.3)] border-4 border-background-light dark:border-background-dark">
|
||||
<span class="material-symbols-outlined text-black text-[20px]">shield</span>
|
||||
</div>
|
||||
<div class="w-[2px] bg-primary/50 h-full absolute top-5 -z-10"></div>
|
||||
</div>
|
||||
<div class="flex flex-col ml-1 bg-white dark:bg-surface-dark rounded-xl p-4 shadow-sm border border-gray-100 dark:border-white/5">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<p class="text-slate-900 dark:text-white text-base font-bold">已忍住</p>
|
||||
<span class="text-xs font-medium text-primary bg-primary/10 px-2 py-0.5 rounded-full">成功</span>
|
||||
</div>
|
||||
<p class="text-slate-500 dark:text-gray-400 text-sm mb-3">4:20 PM</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center gap-1 rounded-md bg-gray-100 dark:bg-white/10 px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-gray-300">
|
||||
<span class="material-symbols-outlined text-[14px]">sentiment_stressed</span>
|
||||
压力大
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative grid grid-cols-[56px_1fr] px-4 py-3">
|
||||
<div class="flex flex-col items-center h-full relative">
|
||||
<div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-surface-dark border-4 border-background-light dark:border-background-dark">
|
||||
<span class="material-symbols-outlined text-slate-500 dark:text-gray-400 text-[20px]">smoking_rooms</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col ml-1 bg-white dark:bg-surface-dark rounded-xl p-4 shadow-sm border border-gray-100 dark:border-white/5">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<p class="text-slate-900 dark:text-white text-base font-bold">已抽烟</p>
|
||||
<span class="text-xs text-slate-400 dark:text-gray-500 font-mono">间隔 1小时30分</span>
|
||||
</div>
|
||||
<p class="text-slate-500 dark:text-gray-400 text-sm mb-3">1:15 PM</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center gap-1 rounded-md bg-gray-100 dark:bg-white/10 px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-gray-300">
|
||||
<span class="material-symbols-outlined text-[14px]">mood_bad</span>
|
||||
无聊
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative grid grid-cols-[56px_1fr] px-4 py-3">
|
||||
<div class="flex flex-col items-center h-full relative">
|
||||
<div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-surface-dark border-4 border-background-light dark:border-background-dark">
|
||||
<span class="material-symbols-outlined text-slate-500 dark:text-gray-400 text-[20px]">smoking_rooms</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col ml-1 bg-white dark:bg-surface-dark rounded-xl p-4 shadow-sm border border-gray-100 dark:border-white/5">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<p class="text-slate-900 dark:text-white text-base font-bold">已抽烟</p>
|
||||
<span class="text-xs text-slate-400 dark:text-gray-500">今日第一支</span>
|
||||
</div>
|
||||
<p class="text-slate-500 dark:text-gray-400 text-sm mb-3">11:45 AM</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center gap-1 rounded-md bg-gray-100 dark:bg-white/10 px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-gray-300">
|
||||
<span class="material-symbols-outlined text-[14px]">sunny</span>
|
||||
晨间习惯
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-0 pb-10">
|
||||
<div class="sticky top-[130px] z-10 bg-background-light dark:bg-background-dark py-2 px-4 mb-2">
|
||||
<h4 class="text-slate-500 dark:text-gray-400 text-xs font-bold uppercase tracking-wider bg-gray-200/50 dark:bg-surface-dark backdrop-blur px-3 py-1 rounded-full inline-block">昨天, 11月13日</h4>
|
||||
</div>
|
||||
<div class="group relative grid grid-cols-[56px_1fr] px-4 py-3 overflow-hidden">
|
||||
<div class="flex flex-col items-center h-full relative">
|
||||
<div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-surface-dark border-4 border-background-light dark:border-background-dark">
|
||||
<span class="material-symbols-outlined text-slate-500 dark:text-gray-400 text-[20px]">smoking_rooms</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative ml-1 h-full">
|
||||
<div class="absolute inset-y-0 right-0 flex items-center gap-2 pl-4">
|
||||
<button class="flex flex-col items-center justify-center h-full w-16 bg-slate-200 dark:bg-gray-700 rounded-lg text-slate-600 dark:text-gray-200">
|
||||
<span class="material-symbols-outlined text-[20px]">edit</span>
|
||||
<span class="text-[10px] font-bold mt-1">编辑</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center h-full w-16 bg-red-500/10 dark:bg-red-500/20 rounded-lg text-red-600 dark:text-red-400">
|
||||
<span class="material-symbols-outlined text-[20px]">delete</span>
|
||||
<span class="text-[10px] font-bold mt-1">删除</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative z-10 flex flex-col bg-white dark:bg-surface-dark rounded-xl p-4 shadow-sm border border-gray-100 dark:border-white/5 -translate-x-36 transition-transform">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<p class="text-slate-900 dark:text-white text-base font-bold">已抽烟</p>
|
||||
<span class="text-xs text-slate-400 dark:text-gray-500 font-mono">间隔 4小时12分</span>
|
||||
</div>
|
||||
<p class="text-slate-500 dark:text-gray-400 text-sm mb-3">9:30 PM</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center gap-1 rounded-md bg-gray-100 dark:bg-white/10 px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-gray-300">
|
||||
<span class="material-symbols-outlined text-[14px]">local_bar</span>
|
||||
社交
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="fixed bottom-6 right-6 z-30">
|
||||
<button class="flex items-center justify-center w-14 h-14 bg-primary rounded-full shadow-lg shadow-primary/20 hover:scale-105 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-black text-[28px]">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
@@ -1,159 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="dark" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>AI 戒烟助手</title>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#2bee79",
|
||||
"background-light": "#f6f8f7",
|
||||
"background-dark": "#102217",
|
||||
"surface-dark": "#1A2C22",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Manrope", "sans-serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark text-[#111518] dark:text-white font-display overflow-x-hidden pb-24">
|
||||
<div class="sticky top-0 z-50 flex items-center bg-background-light dark:bg-background-dark p-4 pb-2 justify-between border-b border-gray-200 dark:border-white/5">
|
||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-full bg-surface-dark/10 dark:bg-white/10">
|
||||
<span class="material-symbols-outlined text-xl">menu</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<h2 class="text-lg font-bold leading-tight tracking-[-0.015em]">AI 戒烟助手</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="size-2 rounded-full bg-primary animate-pulse"></span>
|
||||
<span class="text-xs font-medium text-primary">在线</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex size-10 shrink-0 items-center justify-center">
|
||||
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-9 ring-2 ring-primary/20" data-alt="User profile photo showing a smiling person" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDM8IThj2i4rSpw3zTFeUkIzSyzfxTqwPUWf1hrOwomNIYRMZumn7Q5uth0PuVsnx3lGvWpwcTXScnMsgelTu3BStuJUKxc7y5nj8OWLLI71ztgrzXmuOxF1FDNC1KqRGgcmS0rxvp7w6-gptXquAbY8pEF07lI9h7zqz79QoMGKI8pXhi-dk07tBkZNn3548ALBv4c2fppi1nOOQfzf3LT05cgeQlngaLZ8qoWm3zVnhBpxlGwJihwAxdHLHJap8QpkMvn5KNhKajn");'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 p-4">
|
||||
<div class="relative overflow-hidden rounded-xl bg-surface-dark shadow-lg">
|
||||
<div class="bg-cover bg-center flex flex-col items-stretch justify-end pt-[140px] relative" data-alt="Abstract calming green smoke dispersion pattern" style='background-image: linear-gradient(0deg, rgba(16, 34, 23, 0.9) 0%, rgba(16, 34, 23, 0.4) 60%, rgba(16, 34, 23, 0) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuDDHunxB0JmkAwXkaRbAmb88-JbOO7dNx8SOPqCLFYHQ_5KA7NCE8y2DANgb4SM9fIj5GXRA_4ey1viKp7EhaJBCv1wTfdJUhLNvkdf0SSuWsnPsqYLymiZvmrSblGy2C-TeMdvRk8wiLiimRs353N2cLYfdYA-E7YzU_MKMFg6AiBJucASwVqk0fFuMfJHb0kxLG5lvjsn0q8VNZSrar6qWgOdS9CMgXyd2QCQFI6oTiOdKJ1SH0GMlH7b9gZAeMcc4EKoy0Pq6kVA");'>
|
||||
<div class="absolute top-4 right-4 bg-black/40 backdrop-blur-md px-3 py-1 rounded-full border border-white/10">
|
||||
<p class="text-xs font-bold text-primary uppercase tracking-wider">第 18/30 天</p>
|
||||
</div>
|
||||
<div class="flex w-full flex-col gap-4 p-5">
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-primary/80 text-sm font-semibold uppercase tracking-widest">当前减量计划阶段</p>
|
||||
<h2 class="text-white text-3xl font-bold leading-tight">阶段 2：减量期</h2>
|
||||
<p class="text-gray-300 text-sm font-medium leading-normal mt-1">本阶段还剩 12 天</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 mt-2">
|
||||
<div class="flex justify-between items-end">
|
||||
<span class="text-xs text-gray-400">阶段进度</span>
|
||||
<span class="text-sm font-bold text-primary">40%</span>
|
||||
</div>
|
||||
<div class="h-2 w-full rounded-full bg-white/10 overflow-hidden">
|
||||
<div class="h-full rounded-full bg-primary shadow-[0_0_10px_rgba(43,238,121,0.5)]" style="width: 40%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 px-1">
|
||||
<span class="material-symbols-outlined text-primary text-[20px]">smart_toy</span>
|
||||
<h2 class="text-[18px] font-bold leading-tight tracking-tight">每日 AI 分析</h2>
|
||||
</div>
|
||||
<div class="flex items-end gap-3 rounded-xl bg-surface-dark p-4 border border-white/5">
|
||||
<div class="flex-shrink-0 relative">
|
||||
<div class="bg-center bg-no-repeat bg-cover rounded-full w-10 h-10 ring-2 ring-primary/20" data-alt="AI robot avatar face icon" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCOq8r_M2hN_HE2acoNyZDBbM1X1bgiY2hsLJa7dv6__8B4wmrn6fWs26NzDmIwCqhrCC4gcWxNpiX37ONaVgjKcC-xQ2xdAM1VlK9GJZqaoquebmtf0Ilstx9umIcIfJDq2lAV7ZJGObgeUNLPZkmq-9nr1Fg1NJghMYG1325WsQ6jrlQiRXjg4hFXrc62Sf7Cz9AgwE1GKlJyBsQJSbkMu5UUVNDk6SyAbpbEBUbFejdxWEtLQMfpzaPMtxQBssb35k3RwdL8RRmx");'></div>
|
||||
<div class="absolute -bottom-1 -right-1 bg-background-dark rounded-full p-0.5">
|
||||
<div class="bg-primary size-2.5 rounded-full border-2 border-background-dark"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-1 items-start">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<p class="text-primary text-xs font-bold uppercase tracking-wide">AI 教练</p>
|
||||
<span class="text-gray-500 text-[10px]">• 刚刚</span>
|
||||
</div>
|
||||
<div class="relative bg-[#233329] text-gray-100 text-sm leading-relaxed rounded-2xl rounded-tl-none px-4 py-3 shadow-sm border border-white/5">
|
||||
<p>早上好 Alex。昨天你的吸烟量比限额少了 2 支。这是一个巨大的胜利！🏆</p>
|
||||
<p class="mt-2 text-gray-300">数据显示你的烟瘾在下午 2 点左右达到顶峰——今天试着那个时候去散散步。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex justify-between items-center px-1">
|
||||
<h2 class="text-[18px] font-bold leading-tight tracking-tight">今日目标</h2>
|
||||
<span class="text-xs font-medium text-primary bg-primary/10 px-2 py-1 rounded-md">已完成 1/3</span>
|
||||
</div>
|
||||
<label class="group flex items-center gap-4 p-4 rounded-xl bg-surface-dark border border-white/5 transition-all active:scale-[0.99]">
|
||||
<div class="relative flex items-center justify-center">
|
||||
<input checked="" class="peer h-6 w-6 cursor-pointer appearance-none rounded-full border-2 border-primary bg-primary transition-all checked:border-primary checked:bg-primary" type="checkbox"/>
|
||||
<span class="material-symbols-outlined absolute pointer-events-none text-black text-sm opacity-0 peer-checked:opacity-100 font-bold">check</span>
|
||||
</div>
|
||||
<div class="flex flex-col flex-1 opacity-50">
|
||||
<p class="text-sm font-medium line-through decoration-white/50">喝 2 升水</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-primary/50 text-[20px]">local_drink</span>
|
||||
</label>
|
||||
<label class="group flex items-center gap-4 p-4 rounded-xl bg-surface-dark border border-white/5 transition-all active:scale-[0.99]">
|
||||
<div class="relative flex items-center justify-center">
|
||||
<input class="peer h-6 w-6 cursor-pointer appearance-none rounded-full border-2 border-gray-600 bg-transparent transition-all checked:border-primary checked:bg-primary hover:border-primary/50" type="checkbox"/>
|
||||
<span class="material-symbols-outlined absolute pointer-events-none text-black text-sm opacity-0 peer-checked:opacity-100 font-bold">check</span>
|
||||
</div>
|
||||
<div class="flex flex-col flex-1">
|
||||
<p class="text-sm font-medium text-white">控制在 5 支烟以内</p>
|
||||
<p class="text-xs text-gray-400">当前：2/5</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-gray-500 text-[20px]">smoke_free</span>
|
||||
</label>
|
||||
<label class="group flex items-center gap-4 p-4 rounded-xl bg-surface-dark border border-white/5 transition-all active:scale-[0.99]">
|
||||
<div class="relative flex items-center justify-center">
|
||||
<input class="peer h-6 w-6 cursor-pointer appearance-none rounded-full border-2 border-gray-600 bg-transparent transition-all checked:border-primary checked:bg-primary hover:border-primary/50" type="checkbox"/>
|
||||
<span class="material-symbols-outlined absolute pointer-events-none text-black text-sm opacity-0 peer-checked:opacity-100 font-bold">check</span>
|
||||
</div>
|
||||
<div class="flex flex-col flex-1">
|
||||
<p class="text-sm font-medium text-white">阅读激励卡片</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-gray-500 text-[20px]">style</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed bottom-0 left-0 w-full bg-gradient-to-t from-background-dark via-background-dark/95 to-transparent pb-6 pt-12 px-4 flex justify-center pointer-events-none">
|
||||
<button class="pointer-events-auto shadow-[0_0_20px_rgba(43,238,121,0.3)] hover:shadow-[0_0_25px_rgba(43,238,121,0.5)] active:scale-95 transition-all w-full max-w-sm flex items-center justify-center gap-3 bg-primary hover:bg-[#22d86c] text-[#0a160f] h-14 rounded-xl font-bold text-base">
|
||||
<span class="material-symbols-outlined text-[24px]">add_circle</span>
|
||||
记录吸烟或烟瘾
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 467 KiB |
@@ -1,166 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="dark" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>首页控制台</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#4ade80", // Fresher Green (Tailwind green-400)
|
||||
"background-light": "#f6f8f7",
|
||||
"background-dark": "#102217",
|
||||
"surface-dark": "#1a2c22",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Manrope", "system-ui", "-apple-system", "sans-serif"]
|
||||
},
|
||||
borderRadius: {
|
||||
"DEFAULT": "0.5rem",
|
||||
"lg": "0.75rem",
|
||||
"xl": "1rem",
|
||||
"2xl": "1.5rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-white antialiased overflow-hidden h-screen flex flex-col">
|
||||
<header class="flex items-center justify-between p-4 pt-12 pb-2 bg-background-light dark:bg-background-dark sticky top-0 z-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<div class="bg-center bg-no-repeat bg-cover rounded-full h-10 w-10 border-2 border-primary/20" data-alt="User profile picture showing a smiling person" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAIHl8GS-f8DS3Xr7-eJu0ZXf5318wkaD17rc2oQ6YJYetbmb5bn8Qu7M_zZ9YdaYe5nvCZkibjS1xl9gd8lTyBhH3Bd6tD0_LrkITJBPz2Z-_yh47FN0CaOJ9ul0USESMUsH1oubTbh4dTfChxO4mdgjfkvMqfcNZC3Pgczkf4VlO7BmZ-YVdoGWy5ihjcWPXnrhxoTz42BzWzxQW0-z6WbriZuKYwFAf4eP6uR3wiVYYz3u921jS_RWpv2hPp5dcnLMSIsmWuizN4");'>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 h-3 w-3 bg-primary rounded-full border-2 border-background-dark"></div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-slate-900 dark:text-white text-lg font-bold leading-tight tracking-tight">早上好，Alex</h2>
|
||||
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">保持连胜纪录！🔥</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="flex items-center justify-center rounded-full h-10 w-10 hover:bg-black/5 dark:hover:bg-white/5 transition-colors text-slate-900 dark:text-white">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="flex-1 overflow-y-auto px-4 pb-32">
|
||||
<div class="mt-4 mb-6 relative overflow-hidden rounded-xl bg-gradient-to-r from-emerald-900/40 to-primary/10 border border-primary/20 p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/20 text-primary">
|
||||
<span class="material-symbols-outlined text-[20px]">psychology</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-sm font-bold text-slate-900 dark:text-white mb-1">发现规律</h3>
|
||||
<p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">你的烟瘾通常在下午2点达到高峰。我们为你准备了一个快速呼吸练习。</p>
|
||||
</div>
|
||||
<button class="text-slate-400 hover:text-white">
|
||||
<span class="material-symbols-outlined text-[18px]">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center py-6 relative">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="relative h-72 w-72 flex items-center justify-center">
|
||||
<svg class="h-full w-full transform" viewBox="0 0 100 100">
|
||||
<circle class="text-slate-200 dark:text-surface-dark stroke-current" cx="50" cy="50" fill="transparent" r="45" stroke-width="6"></circle>
|
||||
<circle class="text-primary progress-ring__circle stroke-current drop-shadow-[0_0_10px_rgba(74,222,128,0.5)]" cx="50" cy="50" fill="transparent" r="45" stroke-linecap="round" stroke-width="6" style="stroke-dasharray: 282.743; stroke-dashoffset: 70;"></circle>
|
||||
</svg>
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center text-center z-10">
|
||||
<span class="text-slate-500 dark:text-slate-400 text-sm font-medium mb-1">距上次抽烟</span>
|
||||
<h1 class="text-slate-900 dark:text-white text-4xl font-extrabold tracking-tight tabular-nums">02:45:12</h1>
|
||||
<div class="mt-4 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-dark border border-white/5">
|
||||
<span class="material-symbols-outlined text-primary text-[14px]">auto_awesome</span>
|
||||
<p class="text-primary text-xs font-semibold">下次建议: 16:30</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 mt-2">
|
||||
<div class="flex flex-col p-4 rounded-xl bg-white dark:bg-surface-dark border border-slate-100 dark:border-white/5 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="h-2 w-2 rounded-full bg-red-400"></div>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">今日已抽</span>
|
||||
</div>
|
||||
<div class="flex items-end justify-between">
|
||||
<span class="text-2xl font-bold text-slate-900 dark:text-white">3 <span class="text-base font-normal text-slate-400">/ 10</span></span>
|
||||
<span class="text-xs font-medium text-primary bg-primary/10 px-2 py-1 rounded">较昨日 -2</span>
|
||||
</div>
|
||||
<div class="mt-3 h-1.5 w-full bg-slate-100 dark:bg-black/20 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-red-400 rounded-full" style="width: 30%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col p-4 rounded-xl bg-white dark:bg-surface-dark border border-slate-100 dark:border-white/5 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="h-2 w-2 rounded-full bg-primary"></div>
|
||||
<span class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">烟瘾发作</span>
|
||||
</div>
|
||||
<div class="flex items-end justify-between">
|
||||
<span class="text-2xl font-bold text-slate-900 dark:text-white">5</span>
|
||||
<span class="text-xs font-medium text-slate-400">已抵抗</span>
|
||||
</div>
|
||||
<div class="mt-3 h-1.5 w-full bg-slate-100 dark:bg-black/20 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary rounded-full" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-8"></div>
|
||||
</main>
|
||||
<div class="fixed bottom-[84px] left-0 right-0 p-4 z-20 bg-gradient-to-t from-background-light dark:from-background-dark via-background-light/90 dark:via-background-dark/90 to-transparent pt-8">
|
||||
<div class="flex gap-3 w-full max-w-md mx-auto">
|
||||
<button class="flex-1 h-14 rounded-xl border border-slate-300 dark:border-white/10 bg-white dark:bg-surface-dark hover:bg-slate-50 dark:hover:bg-white/5 text-slate-700 dark:text-slate-200 font-bold text-base flex items-center justify-center gap-2 transition-all active:scale-95 shadow-sm">
|
||||
<span class="material-symbols-outlined">smoking_rooms</span>
|
||||
记录抽烟
|
||||
</button>
|
||||
<button class="flex-[1.5] h-14 rounded-xl bg-primary hover:bg-primary/90 text-background-dark font-extrabold text-base flex items-center justify-center gap-2 shadow-[0_4px_20px_rgba(74,222,128,0.3)] transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined filled">verified_user</span>
|
||||
想抽忍住了
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="fixed bottom-0 w-full bg-white/80 dark:bg-[#0f1a14]/90 backdrop-blur-md border-t border-slate-200 dark:border-white/5 pb-5 pt-3 px-4 flex justify-between items-center z-30">
|
||||
<button class="flex flex-col items-center gap-1 text-primary w-12 group">
|
||||
<span class="material-symbols-outlined filled">home</span>
|
||||
<span class="text-[10px] font-medium">首页</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 w-12 group transition-colors">
|
||||
<span class="material-symbols-outlined">bar_chart</span>
|
||||
<span class="text-[10px] font-medium">统计</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 w-12 group transition-colors">
|
||||
<span class="material-symbols-outlined">smart_toy</span>
|
||||
<span class="text-[10px] font-medium">AI助手</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 w-12 group transition-colors">
|
||||
<span class="material-symbols-outlined">history</span>
|
||||
<span class="text-[10px] font-medium">记录</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 w-12 group transition-colors">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="text-[10px] font-medium">我的</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 286 KiB |
@@ -1,178 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="dark" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>个人中心</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#2bee79",
|
||||
"background-light": "#f6f8f7",
|
||||
"background-dark": "#102217",
|
||||
"surface-dark": "#182F22",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Manrope", "sans-serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #2bee79;
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display min-h-screen flex flex-col items-center justify-center">
|
||||
<div class="relative flex h-full min-h-screen w-full max-w-md flex-col bg-background-light dark:bg-background-dark overflow-x-hidden shadow-xl mx-auto border-x border-white/5">
|
||||
<div class="flex items-center px-4 py-3 justify-between sticky top-0 z-10 bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-md">
|
||||
<div class="text-neutral-900 dark:text-white flex size-12 shrink-0 items-center justify-start cursor-pointer transition-colors hover:text-primary">
|
||||
<span class="material-symbols-outlined text-[28px]">arrow_back</span>
|
||||
</div>
|
||||
<h2 class="text-neutral-900 dark:text-white text-lg font-bold leading-tight tracking-tight flex-1 text-center">个人中心</h2>
|
||||
<div class="flex w-12 items-center justify-end cursor-pointer group">
|
||||
<p class="text-primary text-base font-bold leading-normal tracking-wide shrink-0 group-hover:underline">编辑</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center pt-2 pb-8 px-4">
|
||||
<div class="relative mb-4 group cursor-pointer">
|
||||
<div class="bg-center bg-no-repeat bg-cover rounded-full h-28 w-28 ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all duration-300" data-alt="User avatar profile picture showing a smiling person" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDRcwO-G-6ngTwN8RGruCqWHpKLri2LWwDM9ctJFxkXhcZkB8lzQADi5lnMOyHarcYK52qxv4pF1y0M7TWi3t9BSwVpdMdwcXv6vxwzxf1em-a9jVjBhVoCo3zVZuHvUvFELAmTEzB_uyZ9Phj6N9NZzGcwr_CMuhsn-KoxMFdczs5S1HHRXyCT2BJfXOziwaV7amfAbTrfvlDdursp_FkbNh1SvCh9Ru8L8U9nMz0tWg_qIvM--leuSJwbdLg0xdpVZ-tS0Z7z_RLF");'>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 bg-surface-dark p-1.5 rounded-full border border-primary/30 shadow-lg">
|
||||
<span class="material-symbols-outlined text-primary text-[18px] block">photo_camera</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center gap-1">
|
||||
<h1 class="text-neutral-900 dark:text-white text-2xl font-extrabold leading-tight tracking-tight text-center">Alex Doe</h1>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-bold border border-primary/20">
|
||||
目标：12月1日戒烟 🎯
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-neutral-500 dark:text-neutral-400 text-sm font-medium mt-1">已连续戒烟 12 天 🔥</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 w-full px-4 pb-10 space-y-6">
|
||||
<section>
|
||||
<h3 class="text-neutral-500 dark:text-neutral-400 text-xs font-bold uppercase tracking-wider px-2 mb-2 ml-1">我的进程</h3>
|
||||
<div class="bg-white dark:bg-surface-dark rounded-xl overflow-hidden shadow-sm border border-neutral-200 dark:border-white/5">
|
||||
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors border-b border-neutral-100 dark:border-white/5">
|
||||
<div class="flex items-center justify-center rounded-lg bg-primary/20 text-primary shrink-0 size-10">
|
||||
<span class="material-symbols-outlined">track_changes</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">目标设定</p>
|
||||
<p class="text-neutral-500 dark:text-neutral-400 text-xs font-normal truncate">调整每日限额与戒烟日期</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
||||
</div>
|
||||
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors">
|
||||
<div class="flex items-center justify-center rounded-lg bg-indigo-500/20 text-indigo-400 shrink-0 size-10">
|
||||
<span class="material-symbols-outlined">psychology</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">AI 计划调整</p>
|
||||
<p class="text-neutral-500 dark:text-neutral-400 text-xs font-normal truncate">个性化辅导风格</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="text-neutral-500 dark:text-neutral-400 text-xs font-bold uppercase tracking-wider px-2 mb-2 ml-1">偏好设置</h3>
|
||||
<div class="bg-white dark:bg-surface-dark rounded-xl overflow-hidden shadow-sm border border-neutral-200 dark:border-white/5">
|
||||
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors border-b border-neutral-100 dark:border-white/5">
|
||||
<div class="flex items-center justify-center rounded-lg bg-orange-500/20 text-orange-400 shrink-0 size-10">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">通知设置</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
||||
</div>
|
||||
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors">
|
||||
<div class="flex items-center justify-center rounded-lg bg-yellow-500/20 text-yellow-400 shrink-0 size-10">
|
||||
<span class="material-symbols-outlined">diamond</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 flex items-center gap-2">
|
||||
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">解锁会员</p>
|
||||
<span class="bg-primary text-background-dark text-[10px] font-extrabold px-1.5 py-0.5 rounded uppercase">PRO</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="text-neutral-500 dark:text-neutral-400 text-xs font-bold uppercase tracking-wider px-2 mb-2 ml-1">通用</h3>
|
||||
<div class="bg-white dark:bg-surface-dark rounded-xl overflow-hidden shadow-sm border border-neutral-200 dark:border-white/5">
|
||||
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors border-b border-neutral-100 dark:border-white/5">
|
||||
<div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-white/10 text-neutral-600 dark:text-neutral-300 shrink-0 size-10">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">基础设置</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
||||
</div>
|
||||
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors">
|
||||
<div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-white/10 text-neutral-600 dark:text-neutral-300 shrink-0 size-10">
|
||||
<span class="material-symbols-outlined">security</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">隐私与数据</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="pt-4 flex flex-col items-center">
|
||||
<button class="w-full py-4 text-red-500 font-bold hover:bg-red-500/10 rounded-xl transition-colors text-center">
|
||||
退出登录
|
||||
</button>
|
||||
<p class="text-neutral-500 text-xs mt-4">版本 1.0.2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sticky bottom-0 w-full bg-background-light/90 dark:bg-background-dark/95 backdrop-blur-lg border-t border-neutral-200 dark:border-white/5 flex justify-around items-center py-3 pb-6 px-2 z-20">
|
||||
<div class="flex flex-col items-center gap-1 opacity-50 cursor-pointer hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-2xl">home</span>
|
||||
<span class="text-[10px] font-medium">首页</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 opacity-50 cursor-pointer hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-2xl">bar_chart</span>
|
||||
<span class="text-[10px] font-medium">追踪</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-primary cursor-pointer">
|
||||
<span class="material-symbols-outlined text-2xl fill-1">person</span>
|
||||
<span class="text-[10px] font-bold">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
@@ -1,243 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="dark" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>数据统计分析</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#2bee79",
|
||||
"background-light": "#f6f8f7",
|
||||
"background-dark": "#102217",
|
||||
"surface-dark": "#1A3325",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Manrope", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "sans-serif"]
|
||||
},
|
||||
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px" },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display antialiased text-slate-900 dark:text-white transition-colors duration-200">
|
||||
<div class="relative flex h-full min-h-screen w-full flex-col overflow-x-hidden max-w-md mx-auto shadow-2xl bg-background-light dark:bg-background-dark pb-24">
|
||||
<header class="sticky top-0 z-20 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-md px-4 py-3 flex items-center justify-between border-b border-gray-200 dark:border-white/5">
|
||||
<button class="flex size-10 shrink-0 items-center justify-center rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl dark:text-white">arrow_back</span>
|
||||
</button>
|
||||
<h2 class="text-lg font-bold leading-tight tracking-tight flex-1 text-center">数据统计分析</h2>
|
||||
<button class="flex size-10 shrink-0 items-center justify-center rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl dark:text-white">settings</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="flex-1 flex flex-col gap-6 p-4">
|
||||
<div class="w-full">
|
||||
<div class="flex h-12 w-full items-center justify-center rounded-xl bg-gray-200 dark:bg-surface-dark p-1">
|
||||
<label class="flex-1 h-full cursor-pointer relative">
|
||||
<input checked="" class="peer sr-only" name="date-toggle" type="radio" value="Week"/>
|
||||
<div class="flex h-full w-full items-center justify-center rounded-lg text-sm font-semibold text-gray-500 dark:text-gray-400 transition-all peer-checked:bg-white dark:peer-checked:bg-primary peer-checked:text-black dark:peer-checked:text-[#102217] peer-checked:shadow-sm">
|
||||
周
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex-1 h-full cursor-pointer relative">
|
||||
<input class="peer sr-only" name="date-toggle" type="radio" value="Month"/>
|
||||
<div class="flex h-full w-full items-center justify-center rounded-lg text-sm font-semibold text-gray-500 dark:text-gray-400 transition-all peer-checked:bg-white dark:peer-checked:bg-primary peer-checked:text-black dark:peer-checked:text-[#102217] peer-checked:shadow-sm">
|
||||
月
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex-1 h-full cursor-pointer relative">
|
||||
<input class="peer sr-only" name="date-toggle" type="radio" value="Year"/>
|
||||
<div class="flex h-full w-full items-center justify-center rounded-lg text-sm font-semibold text-gray-500 dark:text-gray-400 transition-all peer-checked:bg-white dark:peer-checked:bg-primary peer-checked:text-black dark:peer-checked:text-[#102217] peer-checked:shadow-sm">
|
||||
年
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-primary/20 to-primary/5 p-4 border border-primary/20">
|
||||
<div class="flex gap-3 items-start">
|
||||
<div class="bg-primary/20 p-2 rounded-full text-primary shrink-0">
|
||||
<span class="material-symbols-outlined text-xl">auto_awesome</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-bold text-slate-900 dark:text-white mb-1">每周洞察</h4>
|
||||
<p class="text-xs text-slate-600 dark:text-gray-300 leading-relaxed">你在周末的吸烟量明显减少。非常棒！试着在这周一保持这个良好的势头。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="flex flex-col gap-4">
|
||||
<div class="flex items-end justify-between px-1">
|
||||
<h3 class="text-xl font-bold tracking-tight">吸烟趋势</h3>
|
||||
<div class="flex items-center gap-1 text-sm font-medium text-emerald-500">
|
||||
<span class="material-symbols-outlined text-base">trending_down</span>
|
||||
<span>减少 20%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-3xl bg-white dark:bg-surface-dark p-5 shadow-sm border border-gray-100 dark:border-white/5">
|
||||
<div class="flex flex-col gap-1 mb-6">
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">日均吸烟量</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-3xl font-bold text-slate-900 dark:text-white">4</span>
|
||||
<span class="text-sm text-gray-400">支 / 天</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-[200px] flex flex-col justify-end">
|
||||
<div class="flex items-end justify-between h-[180px] w-full gap-2 sm:gap-4">
|
||||
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
|
||||
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[90%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
|
||||
<div class="absolute bottom-0 left-0 w-full bg-primary h-full"></div>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-gray-400">一</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
|
||||
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[50%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
|
||||
<div class="absolute bottom-0 left-0 w-full bg-primary h-full"></div>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-gray-400">二</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
|
||||
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[80%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
|
||||
<div class="absolute bottom-0 left-0 w-full bg-primary h-full"></div>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-gray-400">三</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
|
||||
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[80%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
|
||||
<div class="absolute bottom-0 left-0 w-full bg-primary h-full"></div>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-gray-400 text-primary font-bold">四</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
|
||||
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[70%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
|
||||
<div class="absolute bottom-0 left-0 w-full bg-primary h-full opacity-50"></div>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-gray-400">五</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
|
||||
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[10%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
|
||||
<div class="absolute bottom-0 left-0 w-full bg-primary h-full opacity-50"></div>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-gray-400">六</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
|
||||
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[40%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
|
||||
<div class="absolute bottom-0 left-0 w-full bg-primary h-full opacity-50"></div>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-gray-400">日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex flex-col gap-4">
|
||||
<h3 class="text-xl font-bold tracking-tight px-1">健康与储蓄</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="rounded-3xl bg-white dark:bg-surface-dark p-5 shadow-sm border border-gray-100 dark:border-white/5 flex flex-col items-center justify-center gap-4 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 p-3 opacity-10">
|
||||
<span class="material-symbols-outlined text-4xl text-primary">savings</span>
|
||||
</div>
|
||||
<div class="relative size-24">
|
||||
<svg class="size-full -rotate-90" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="text-gray-200 dark:text-white/10" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3.5"></path>
|
||||
<path class="text-primary drop-shadow-[0_0_4px_rgba(43,238,121,0.5)]" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-dasharray="75, 100" stroke-linecap="round" stroke-width="3.5"></path>
|
||||
</svg>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
|
||||
<span class="text-[10px] font-medium text-gray-400 uppercase tracking-wider">已省</span>
|
||||
<span class="text-sm font-bold text-slate-900 dark:text-white">¥145</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-sm font-bold dark:text-white">节省金额</p>
|
||||
<p class="text-xs text-gray-400 mt-1">目标 ¥200</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-3xl bg-white dark:bg-surface-dark p-5 shadow-sm border border-gray-100 dark:border-white/5 flex flex-col items-center justify-center gap-4 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 p-3 opacity-10">
|
||||
<span class="material-symbols-outlined text-4xl text-blue-400">pulmonology</span>
|
||||
</div>
|
||||
<div class="relative size-24">
|
||||
<svg class="size-full -rotate-90" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="text-gray-200 dark:text-white/10" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3.5"></path>
|
||||
<path class="text-blue-400 drop-shadow-[0_0_4px_rgba(96,165,250,0.5)]" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-dasharray="40, 100" stroke-linecap="round" stroke-width="3.5"></path>
|
||||
</svg>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
|
||||
<span class="text-sm font-bold text-slate-900 dark:text-white">40%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-sm font-bold dark:text-white">肺部功能恢复</p>
|
||||
<p class="text-xs text-gray-400 mt-1">当前进度</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="grid grid-cols-2 gap-3 mb-6">
|
||||
<div class="rounded-2xl bg-white dark:bg-surface-dark p-4 flex flex-col gap-1 border border-gray-100 dark:border-white/5">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-orange-400 text-lg">local_fire_department</span>
|
||||
<span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">连续记录</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold dark:text-white">12 天</p>
|
||||
<p class="text-xs text-gray-400">未吸烟</p>
|
||||
</div>
|
||||
<div class="rounded-2xl bg-white dark:bg-surface-dark p-4 flex flex-col gap-1 border border-gray-100 dark:border-white/5">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-purple-400 text-lg">block</span>
|
||||
<span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">已拒绝</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold dark:text-white">24 次</p>
|
||||
<p class="text-xs text-gray-400">对抗烟瘾</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<nav class="fixed bottom-0 w-full max-w-md bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-lg border-t border-gray-200 dark:border-white/5 pb-5 pt-3 px-6 flex justify-between items-center z-50">
|
||||
<button class="flex flex-col items-center gap-1 text-gray-400 hover:text-slate-900 dark:hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl">home</span>
|
||||
<span class="text-[10px] font-medium">首页</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl filled">bar_chart</span>
|
||||
<span class="text-[10px] font-medium">统计</span>
|
||||
</button>
|
||||
<div class="size-12 rounded-full bg-primary flex items-center justify-center -mt-8 shadow-[0_0_15px_rgba(43,238,121,0.4)] border-4 border-background-light dark:border-background-dark cursor-pointer">
|
||||
<span class="material-symbols-outlined text-background-dark text-2xl font-bold">add</span>
|
||||
</div>
|
||||
<button class="flex flex-col items-center gap-1 text-gray-400 hover:text-slate-900 dark:hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl">sticky_note_2</span>
|
||||
<span class="text-[10px] font-medium">计划</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center gap-1 text-gray-400 hover:text-slate-900 dark:hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl">person</span>
|
||||
<span class="text-[10px] font-medium">我的</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 183 KiB |
@@ -4,6 +4,10 @@ export function getDashboard(params = {}) {
|
||||
return request.get('/smoke/dashboard', params)
|
||||
}
|
||||
|
||||
export function getHome(params = {}) {
|
||||
return request.get('/smoke/home', params)
|
||||
}
|
||||
|
||||
export function getNextSmokeTime(params = {}) {
|
||||
return request.get('/smoke/next_smoke_time', params)
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="section-card" v-if="type === 'smoke'">
|
||||
<view class="section-card section-card-counter" v-if="type === 'smoke'">
|
||||
<view class="section-left">
|
||||
<view class="section-icon"></view>
|
||||
<text class="section-title">抽烟数量</text>
|
||||
@@ -41,9 +41,9 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-card" v-if="type === 'smoke'">
|
||||
<view class="section-card">
|
||||
<view class="level-header">
|
||||
<text class="section-title">烟瘾程度</text>
|
||||
<text class="section-title">{{ type === 'smoke' ? '烟瘾程度' : '忍住强度' }}</text>
|
||||
<view class="level-badge">Level {{ formData.level }}</view>
|
||||
</view>
|
||||
<slider
|
||||
@@ -227,7 +227,7 @@ export default {
|
||||
smoke_time: this.formData.smoke_time,
|
||||
smoke_at: this.formData.smoke_at,
|
||||
remark: this.formData.remark,
|
||||
level: this.type === 'smoke' ? this.formData.level : 0,
|
||||
level: this.formData.level,
|
||||
num: this.type === 'smoke' ? this.formData.num : 0
|
||||
}
|
||||
|
||||
@@ -397,10 +397,21 @@ export default {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-card-counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.section-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
@@ -427,18 +438,20 @@ export default {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
background-color: #F8FAFC;
|
||||
padding: 12rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 2rpx solid #F1F5F9;
|
||||
margin-top: 16rpx;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.counter-btn {
|
||||
|
||||
+142
-12
@@ -23,7 +23,7 @@
|
||||
- `smoke_time` 可选；不传则默认“当天”。
|
||||
- `smoke_at` 可选；真实抽烟时间（格式 `YYYY-MM-DD HH:MM:SS`）。用于“按时间节点分析/AI 建议”；不传则可用 `createtime` 近似。
|
||||
- `level/num` 可选；不传时后端会按 `1` 处理。
|
||||
- 如果要记录“想抽但忍住了”，请传 `level=0` 且 `num=0`（会在 `fa_smoke_log` 中展示为一条记录，但不会影响看板的支数累加）。
|
||||
- “想抽但忍住了”请传 `level=0` 且 `num=0`，系统以 `num=0` 作为“忍住”的判断条件（计入忍住次数，但不计入抽烟支数）。
|
||||
|
||||
curl 示例：
|
||||
|
||||
@@ -67,12 +67,16 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
|
||||
## 3) 列表查询（分页）
|
||||
|
||||
`GET /api/v1/smoke/logs?page=1&page_size=20&start=2025-12-01&end=2025-12-31`
|
||||
`GET /api/v1/smoke/logs?page=1&page_size=20&start=2025-12-01&end=2025-12-31&type=all`
|
||||
|
||||
参数：
|
||||
- `page`：页码，默认 `1`
|
||||
- `page_size`：每页数量，默认 `20`，最大 `200`
|
||||
- `start/end`：可选，按 `smoke_time` 过滤（格式 `YYYY-MM-DD`）
|
||||
- `type`：可选，默认 `all`；`smoke` 表示抽烟记录（`num>0`），`resisted` 表示忍住记录（`num=0`）
|
||||
|
||||
说明：
|
||||
- 列表按时间倒序返回（优先 `smoke_at`，其次 `createtime`，最后 `smoke_time`）。
|
||||
|
||||
成功响应示例：
|
||||
|
||||
@@ -199,6 +203,125 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
- 权限：会员用户直接可用；非会员需要先对该 `date` 完成“看广告解锁”（见下一个接口）。
|
||||
- 建议结果会按 `uid + date + prompt_version` 缓存（表：`fa_smoke_ai_advice`）。
|
||||
|
||||
## 9) 首页整合接口（Home Dashboard）
|
||||
|
||||
`GET /api/v1/smoke/home`
|
||||
|
||||
此接口把首页 UI 所需核心模块一次返回，避免前端串行请求多个接口。返回示例：
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "success",
|
||||
"data": {
|
||||
"greeting": {
|
||||
"title": "早安，Alex",
|
||||
"subtitle": "今天也是清爽的一天",
|
||||
"nickname": "Alex",
|
||||
"time_of_day": "morning",
|
||||
"avatar_url": "https://example.com/avatar.jpg"
|
||||
},
|
||||
"profile": {
|
||||
"exists": true,
|
||||
"is_completed": true,
|
||||
"awake_minutes": 900,
|
||||
"baseline_interval_minutes": 60,
|
||||
"profile": {
|
||||
"baseline_cigs_per_day": 10,
|
||||
"pack_price_cent": 3200,
|
||||
"wake_up_time": "07:20",
|
||||
"sleep_time": "23:30"
|
||||
}
|
||||
},
|
||||
"advice_card": {
|
||||
"title": "智能控烟建议",
|
||||
"date": "2026-01-04",
|
||||
"message": "根据你的习惯，下午2点是烟瘾高峰，可以试试短暂散步。",
|
||||
"status": "available"
|
||||
},
|
||||
"campaign_card": {
|
||||
"title": "绿色生活，从戒烟开始",
|
||||
"subtitle": "BRAND CAMPAIGN",
|
||||
"badge": "广告"
|
||||
},
|
||||
"timer": {
|
||||
"label": "距上次抽烟",
|
||||
"last_smoke_at": "2026-01-05T07:42:00+08:00",
|
||||
"seconds_since_last": 9900,
|
||||
"next_suggested_at": "2026-01-05T10:30:00+08:00",
|
||||
"next_suggested_clock": "10:30",
|
||||
"not_before_at": "2026-01-05T10:30:00+08:00",
|
||||
"suggestion_source": "default",
|
||||
"suggestion_algorithm": "staircase_delay_v1"
|
||||
},
|
||||
"summary": {
|
||||
"today_count": 3,
|
||||
"daily_target": 10,
|
||||
"resisted_count": 1,
|
||||
"reduced_from_yesterday": 2,
|
||||
"exceeded_yesterday": false,
|
||||
"profile_completed": true
|
||||
},
|
||||
"motivation": {
|
||||
"message": "太棒了！你刚刚成功抵抗了一次烟瘾",
|
||||
"type": "praise"
|
||||
},
|
||||
"quick_actions": [
|
||||
{ "type": "log_smoke", "title": "记录抽烟", "primary": false },
|
||||
{ "type": "resist", "title": "想抽忍住了", "primary": true }
|
||||
],
|
||||
"data_sources": {
|
||||
"ai_advice_date": "2026-01-04",
|
||||
"plan_date": "2026-01-05"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
字段说明：
|
||||
- `greeting.title`：问候语 + 昵称（如“下午好，Alex”）。
|
||||
- `greeting.subtitle`：副标题/心情提示文案。
|
||||
- `greeting.nickname`：昵称（无昵称时使用“朋友”）。
|
||||
- `greeting.time_of_day`：时间段标识（`morning`/`noon`/`afternoon`/`evening`）。
|
||||
- `greeting.avatar_url`：头像 URL。
|
||||
- `profile.exists`：是否存在用户档案。
|
||||
- `profile.profile`：档案详情对象（可能为空）。
|
||||
- `profile.is_completed`：是否已完成 onboarding。
|
||||
- `profile.awake_minutes`：清醒时长（分钟）。
|
||||
- `profile.baseline_interval_minutes`：基准间隔（分钟）。
|
||||
- `advice_card.title`：AI 提示卡片标题。
|
||||
- `advice_card.date`：建议对应日期。
|
||||
- `advice_card.message`：AI 建议内容。
|
||||
- `advice_card.status`：`available`、`locked`（需解锁）、`unavailable`（AI 服务未配置）、`no_data`（所需日期没有记录）、`empty`（初始化）。
|
||||
- `advice_card.model`：模型名称（有则返回）。
|
||||
- `campaign_card.title`：活动标题。
|
||||
- `campaign_card.subtitle`：活动副标题。
|
||||
- `campaign_card.badge`：活动角标（如“广告”）。
|
||||
- `timer.label`：展示标题（如“距上次抽烟”）。
|
||||
- `timer.last_smoke_at`：最近一次实际抽烟时间（RFC3339）。
|
||||
- `timer.seconds_since_last`：距上次抽烟的秒数（无记录返回 `-1`）。
|
||||
- `timer.next_suggested_at`：建议下次抽烟时间（RFC3339）。
|
||||
- `timer.next_suggested_clock`：仅时分显示（如“16:30”）。
|
||||
- `timer.not_before_at`：不早于的时间点（当前与 `next_suggested_at` 一致）。
|
||||
- `timer.suggestion_source`：建议来源（`default`/`ai`）。
|
||||
- `timer.suggestion_algorithm`：算法版本（`staircase_delay_v1`）。
|
||||
- `timer` 说明：`seconds_since_last` 基于服务器当前时间计算，`last_smoke_at` 若补录未来时间会截断到 `as_of`；当 `plan_date=今天` 时会补齐过期间隔确保 `next_suggested_at` 在未来。
|
||||
- `summary.today_count`：今日吸烟支数累加。
|
||||
- `summary.daily_target`：每日目标（线性递减：以 `onboarding_completed_at` 为起点，按 `quit_date` 线性下降到 0）。
|
||||
- `summary.resisted_count`：今日忍住次数。
|
||||
- `summary.reduced_from_yesterday`：与昨日的绝对差值（非负）。
|
||||
- `summary.exceeded_yesterday`：是否比昨天多。
|
||||
- `summary.profile_completed`：是否已完成基础信息。
|
||||
- `motivation.message`：激励语文案。
|
||||
- `motivation.type`：激励语类型。
|
||||
- `quick_actions[].type`：动作类型（`log_smoke`/`resist`）。
|
||||
- `quick_actions[].title`：按钮文案。
|
||||
- `quick_actions[].primary`：是否主按钮。
|
||||
- `data_sources.ai_advice_date`：AI 建议日期。
|
||||
- `data_sources.plan_date`：当前计划日期。
|
||||
|
||||
如需 AI 时间节点完整版，可继续调用 `GET /ai/next_smoke_time`；首页接口只返回默认建议，避免额外的 AI 生成成本。
|
||||
|
||||
未满足权限时的建议响应（示例）：
|
||||
```json
|
||||
{
|
||||
@@ -223,7 +346,7 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
}
|
||||
```
|
||||
|
||||
## 9) 看广告解锁（用于非会员）
|
||||
## 10) 看广告解锁（用于非会员）
|
||||
|
||||
`POST /api/v1/smoke/ai/advice_unlocks`
|
||||
|
||||
@@ -241,7 +364,7 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
- 解锁是“按天”的：观看一次广告解锁一天内的 AI 生成功能（可用于「每日 AI 建议」以及「AI 下次抽烟时间节点」）。
|
||||
- 如果你要生成“明天”的 AI 时间节点，请把 `date` 传为明天日期（例如 `2026-01-06`）。
|
||||
|
||||
## 10) 获取用户基础信息（首次进入：判断是否需要补全）
|
||||
## 11) 获取用户基础信息（首次进入：判断是否需要补全）
|
||||
|
||||
`GET /api/v1/smoke/profile`
|
||||
|
||||
@@ -269,6 +392,7 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
"quit_motivations": ["身体健康", "省钱"],
|
||||
"wake_up_time": "07:30",
|
||||
"sleep_time": "23:30",
|
||||
"quit_date": "2026-02-28T00:00:00+08:00",
|
||||
"onboarding_completed_at": "2026-01-05T10:00:00+08:00"
|
||||
},
|
||||
"is_completed": true,
|
||||
@@ -299,8 +423,9 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
- `smoke_motivations`（抽烟动机）：如 `压力大/无聊/社交/提神`，用于 AI 在分析 remark 时更有针对性。
|
||||
- `quit_motivations`（戒烟动力）：如 `身体健康/家人孩子/省钱`，当用户产生动摇时 AI 可用这些信息做“情感阻断/自我提醒”。
|
||||
- `wake_up_time` + `sleep_time`（作息时间）：用于自动规避睡眠时间，防止在用户睡觉时提醒其“坚持”。
|
||||
- `quit_date`（目标戒烟日期）：用于阶段规划或到期提醒。
|
||||
|
||||
## 11) 补全/更新用户基础信息（Upsert）
|
||||
## 12) 补全/更新用户基础信息（Upsert）
|
||||
|
||||
`POST /api/v1/smoke/profile`
|
||||
|
||||
@@ -319,13 +444,14 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
"smoke_motivations": ["压力大", "社交"],
|
||||
"quit_motivations": ["身体健康", "省钱"],
|
||||
"wake_up_time": "07:30",
|
||||
"sleep_time": "23:30"
|
||||
"sleep_time": "23:30",
|
||||
"quit_date": "2026-02-28"
|
||||
}
|
||||
```
|
||||
|
||||
成功响应：同 `GET /api/v1/smoke/profile`（返回最新 `profile` + `is_completed` + `baseline_interval_minutes`）。
|
||||
|
||||
## 12) 想抽但忍住了（写入一条 level=0,num=0 的记录）
|
||||
## 13) 想抽但忍住了（写入一条 level=0,num=0 的记录）
|
||||
|
||||
`POST /api/v1/smoke/logs/resisted`
|
||||
|
||||
@@ -334,7 +460,9 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
{
|
||||
"smoke_time": "2026-01-05",
|
||||
"smoke_at": "2026-01-05 10:20:00",
|
||||
"remark": "压力大，想抽但忍住了"
|
||||
"remark": "压力大，想抽但忍住了",
|
||||
"level": 0,
|
||||
"num": 0
|
||||
}
|
||||
```
|
||||
|
||||
@@ -342,7 +470,7 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
- 该接口会在 `fa_smoke_log` 中新增一条记录：`level=0` 且 `num=0`，用于更直观记录“想抽/忍住”的过程。
|
||||
- 这类记录不会影响 `today_count/weekly.count` 的支数统计（因为 `num=0`）。
|
||||
|
||||
## 13) 获取“下次抽烟记录时间”（默认 + AI 自动切换）
|
||||
## 14) 获取“下次抽烟记录时间”（默认 + AI 自动切换）
|
||||
|
||||
`GET /api/v1/smoke/next_smoke_time`
|
||||
|
||||
@@ -430,11 +558,11 @@ AI 生成说明：
|
||||
字段说明（新增首页字段）：
|
||||
- `last_smoke_at`：上次“实际抽烟”时间（忽略忍住记录），格式 `RFC3339`（含时区）。
|
||||
- `today_count`：今日抽烟支数（累加 `num`）。
|
||||
- `resisted_count`：今日克制次数（`level=0 && num=0`）。
|
||||
- `resisted_count`：今日克制次数（`num=0`）。
|
||||
- `reduced_from_yesterday`：较昨日减少的支数（允许为负数；为负时表示“今天超出昨日”）。
|
||||
- `exceeded_yesterday`：是否超出昨日（`true` 表示今天超出昨日，前端可用作单独标识）。
|
||||
|
||||
## 14) 数据统计分析（趋势 + 健康 + 省钱）
|
||||
## 15) 数据统计分析（趋势 + 健康 + 省钱）
|
||||
|
||||
`GET /api/v1/smoke/stats?range=week|month|year&date=2026-01-07`
|
||||
|
||||
@@ -493,9 +621,11 @@ AI 生成说明：
|
||||
字段说明：
|
||||
- `change_percent`：与上一个同周期对比的变化比例（可为负）。
|
||||
- `money.available=false`：表示缺少 `baseline_cigs_per_day` 或 `pack_price_cent`。
|
||||
- `money.expected_total`：按“统计周期内有记录的天数”×`baseline_cigs_per_day` 计算；不统计无日志的天数。
|
||||
- `money.saved_cent`：按 `max(expected_total - actual_total, 0)` 计算，避免出现负值。
|
||||
- `health.available=false`：表示无历史记录。
|
||||
|
||||
## 15) 激励语（后端统一生成）
|
||||
## 16) 激励语（后端统一生成）
|
||||
|
||||
`GET /api/v1/smoke/motivation`
|
||||
|
||||
|
||||
+110
-47
@@ -16,8 +16,8 @@
|
||||
<view class="user-info">
|
||||
<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
|
||||
<view class="greeting">
|
||||
<text class="greeting-text">{{ greeting }}，{{ userName }}</text>
|
||||
<text class="greeting-sub">保持连胜纪录！🔥</text>
|
||||
<text class="greeting-text">{{ greetingTitle }}</text>
|
||||
<text class="greeting-sub">{{ greetingSubtitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="settings-btn" @tap="goSettings">
|
||||
@@ -25,10 +25,10 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showAiTip" class="ai-tip">
|
||||
<view v-if="shouldShowAiTip" class="ai-tip">
|
||||
<view class="ai-tip-icon">🤖</view>
|
||||
<view class="ai-tip-content">
|
||||
<text class="ai-tip-title">发现规律</text>
|
||||
<text class="ai-tip-title">{{ aiTipTitle }}</text>
|
||||
<text class="ai-tip-desc">{{ aiTipText }}</text>
|
||||
</view>
|
||||
<view class="ai-tip-close" @tap="closeAiTip">×</view>
|
||||
@@ -55,7 +55,7 @@
|
||||
<view class="stat-value-row">
|
||||
<text class="stat-value">{{ todayCount }}</text>
|
||||
<text class="stat-target">/ {{ dailyTarget }}</text>
|
||||
<view class="stat-change stat-change-down">{{ changeText }}</view>
|
||||
<view class="stat-change" :class="changeClass">{{ changeText }}</view>
|
||||
</view>
|
||||
<view class="stat-progress">
|
||||
<view class="stat-progress-bar stat-progress-red" :style="{ width: progressWidth }"></view>
|
||||
@@ -98,27 +98,27 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useDashboardStore } from '@/stores/dashboard'
|
||||
import { useProfileStore } from '@/stores/profile'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useLogin } from '@/hooks/useLogin'
|
||||
import * as api from '@/api'
|
||||
|
||||
const dashboardStore = useDashboardStore()
|
||||
const profileStore = useProfileStore()
|
||||
const userStore = useUserStore()
|
||||
const { waitForLogin } = useLogin()
|
||||
|
||||
const loading = ref(true)
|
||||
const showAiTip = ref(true)
|
||||
const aiTipText = ref('你的烟瘾通常在下午2点达到高峰。我们为你准备了一个快速呼吸练习。')
|
||||
const resistedCount = ref(5)
|
||||
const statusBarHeight = ref(0)
|
||||
const showDialog = ref(false)
|
||||
const dialogType = ref('smoke') // 'smoke' 或 'resisted'
|
||||
const homeData = ref(null)
|
||||
|
||||
let timerInterval = null
|
||||
const timerSeconds = ref(0)
|
||||
const timerBaseSeconds = ref(-1)
|
||||
|
||||
const aiTipFallback = '你的烟瘾通常在下午2点达到高峰。我们为你准备了一个快速呼吸练习。'
|
||||
|
||||
const greeting = computed(() => {
|
||||
const hour = new Date().getHours()
|
||||
@@ -130,18 +130,50 @@ const greeting = computed(() => {
|
||||
})
|
||||
|
||||
const userName = computed(() => {
|
||||
return userStore.user?.nickname || 'Alex'
|
||||
return homeData.value?.greeting?.nickname || userStore.user?.nickname || 'Alex'
|
||||
})
|
||||
|
||||
const userAvatar = computed(() => {
|
||||
return userStore.user?.avatar_url || '/static/images/default-avatar.png'
|
||||
return homeData.value?.greeting?.avatar_url || userStore.user?.avatar_url || '/static/images/default-avatar.png'
|
||||
})
|
||||
|
||||
const todayCount = computed(() => dashboardStore.todayCount || 3)
|
||||
const dailyTarget = computed(() => profileStore.profile?.baseline_cigs_per_day || 10)
|
||||
const greetingTitle = computed(() => {
|
||||
return homeData.value?.greeting?.title || `${greeting.value}，${userName.value}`
|
||||
})
|
||||
|
||||
const greetingSubtitle = computed(() => {
|
||||
return homeData.value?.greeting?.subtitle || '保持连胜纪录！🔥'
|
||||
})
|
||||
|
||||
const aiTipTitle = computed(() => {
|
||||
return homeData.value?.advice_card?.title || '发现规律'
|
||||
})
|
||||
|
||||
const aiTipText = computed(() => {
|
||||
const advice = homeData.value?.advice_card
|
||||
if (advice?.message) return advice.message
|
||||
if (advice?.status === 'locked') return '看广告解锁 AI 建议'
|
||||
const motivation = homeData.value?.motivation?.message
|
||||
return motivation || aiTipFallback
|
||||
})
|
||||
|
||||
const shouldShowAiTip = computed(() => showAiTip.value && !!aiTipText.value)
|
||||
|
||||
const homeSummary = computed(() => homeData.value?.summary || {})
|
||||
const homeTimer = computed(() => homeData.value?.timer || {})
|
||||
|
||||
const todayCount = computed(() => homeSummary.value.today_count ?? 0)
|
||||
const dailyTarget = computed(() => {
|
||||
const target = homeSummary.value.daily_target
|
||||
if (target !== undefined && target !== null) return target
|
||||
return profileStore.profile?.baseline_cigs_per_day || 0
|
||||
})
|
||||
const resistedCount = computed(() => homeSummary.value.resisted_count ?? 0)
|
||||
|
||||
const progressWidth = computed(() => {
|
||||
const percent = Math.min((todayCount.value / dailyTarget.value) * 100, 100)
|
||||
const target = dailyTarget.value
|
||||
if (!target) return '0%'
|
||||
const percent = Math.min((todayCount.value / target) * 100, 100)
|
||||
return `${percent}%`
|
||||
})
|
||||
|
||||
@@ -151,12 +183,21 @@ const resistedProgressWidth = computed(() => {
|
||||
})
|
||||
|
||||
const changeText = computed(() => {
|
||||
return '较昨日 -2'
|
||||
const reduced = homeSummary.value.reduced_from_yesterday
|
||||
if (reduced === undefined || reduced === null) return '较昨日 --'
|
||||
if (reduced === 0) return '较昨日 0'
|
||||
return homeSummary.value.exceeded_yesterday ? `较昨日 +${reduced}` : `较昨日 -${reduced}`
|
||||
})
|
||||
|
||||
const changeClass = computed(() => {
|
||||
return homeSummary.value.exceeded_yesterday ? 'stat-change-up' : 'stat-change-down'
|
||||
})
|
||||
|
||||
const timerDisplay = computed(() => {
|
||||
const baseMinutes = dashboardStore.minutesSinceLast ?? 165
|
||||
const totalSeconds = baseMinutes * 60 + timerSeconds.value
|
||||
if (timerBaseSeconds.value < 0) {
|
||||
return '--:--:--'
|
||||
}
|
||||
const totalSeconds = timerBaseSeconds.value + timerSeconds.value
|
||||
const hours = Math.floor(totalSeconds / 3600)
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60)
|
||||
const seconds = totalSeconds % 60
|
||||
@@ -168,11 +209,16 @@ const timerGradient = computed(() => {
|
||||
})
|
||||
|
||||
const nextSmokeTimeText = computed(() => {
|
||||
if (dashboardStore.nextSmokeTime?.suggested_at) {
|
||||
const date = new Date(dashboardStore.nextSmokeTime.suggested_at)
|
||||
return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
const timer = homeTimer.value
|
||||
if (!timer) return ''
|
||||
if (timer.next_suggested_clock) return timer.next_suggested_clock
|
||||
if (timer.next_suggested_at) {
|
||||
const date = new Date(timer.next_suggested_at)
|
||||
if (!isNaN(date.getTime())) {
|
||||
return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
}
|
||||
return '16:30'
|
||||
return ''
|
||||
})
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
@@ -180,6 +226,10 @@ const dialogTitle = computed(() => {
|
||||
})
|
||||
|
||||
function startTimer() {
|
||||
stopTimer()
|
||||
if (timerBaseSeconds.value < 0) {
|
||||
return
|
||||
}
|
||||
timerInterval = setInterval(() => {
|
||||
timerSeconds.value++
|
||||
}, 1000)
|
||||
@@ -202,29 +252,48 @@ function openResistedDialog() {
|
||||
showDialog.value = true
|
||||
}
|
||||
|
||||
function applyHomeData(data) {
|
||||
homeData.value = data
|
||||
const seconds = data?.timer?.seconds_since_last
|
||||
timerBaseSeconds.value = typeof seconds === 'number' ? seconds : -1
|
||||
timerSeconds.value = 0
|
||||
startTimer()
|
||||
}
|
||||
|
||||
async function fetchHomeData() {
|
||||
const res = await api.getHome()
|
||||
const data = res.data || {}
|
||||
applyHomeData(data)
|
||||
return data
|
||||
}
|
||||
|
||||
async function handleSubmit(submitData) {
|
||||
try {
|
||||
if (dialogType.value === 'smoke') {
|
||||
await api.createLog(submitData)
|
||||
dashboardStore.resetTimer()
|
||||
timerBaseSeconds.value = 0
|
||||
timerSeconds.value = 0
|
||||
startTimer()
|
||||
uni.showToast({ title: '记录成功', icon: 'success' })
|
||||
try {
|
||||
await Promise.all([
|
||||
dashboardStore.fetchDashboard(true),
|
||||
dashboardStore.fetchNextSmokeTime()
|
||||
])
|
||||
await fetchHomeData()
|
||||
} catch (e) {
|
||||
console.error('refreshAfterSmokeLog error:', e)
|
||||
console.error('refreshHomeData error:', e)
|
||||
}
|
||||
} else {
|
||||
await api.createResistedLog({
|
||||
smoke_time: submitData.smoke_time,
|
||||
smoke_at: submitData.smoke_at,
|
||||
remark: submitData.remark
|
||||
remark: submitData.remark,
|
||||
level: submitData.level,
|
||||
num: submitData.num
|
||||
})
|
||||
resistedCount.value++
|
||||
uni.showToast({ title: '太棒了！', icon: 'success' })
|
||||
try {
|
||||
await fetchHomeData()
|
||||
} catch (e) {
|
||||
console.error('refreshHomeData error:', e)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('handleSubmit error:', e)
|
||||
@@ -242,33 +311,27 @@ async function initPage() {
|
||||
try {
|
||||
await waitForLogin()
|
||||
|
||||
const [profileRes, dashboardRes, nextTimeRes] = await Promise.all([
|
||||
api.getProfile(),
|
||||
api.getDashboard(),
|
||||
api.getNextSmokeTime()
|
||||
])
|
||||
|
||||
const profile = profileRes.data.profile
|
||||
const isCompleted = profileRes.data.is_completed ||
|
||||
const home = await fetchHomeData()
|
||||
const profileData = home.profile || {}
|
||||
const profile = profileData.profile
|
||||
const isCompleted = profileData.is_completed ||
|
||||
(profile && profile.onboarding_completed_at) ||
|
||||
(profile && profile.baseline_cigs_per_day > 0)
|
||||
|
||||
if (!profileRes.data.exists || !isCompleted) {
|
||||
if (!profileData.exists || !isCompleted) {
|
||||
uni.redirectTo({ url: '/pages/onboarding/index' })
|
||||
return
|
||||
}
|
||||
|
||||
profileStore.exists = profileRes.data.exists
|
||||
profileStore.isCompleted = profileRes.data.is_completed
|
||||
profileStore.profile = profileRes.data.profile
|
||||
|
||||
dashboardStore.setDashboard(dashboardRes.data)
|
||||
dashboardStore.setNextSmokeTime(nextTimeRes.data)
|
||||
|
||||
startTimer()
|
||||
profileStore.exists = !!profileData.exists
|
||||
profileStore.isCompleted = !!isCompleted
|
||||
profileStore.awakeMinutes = profileData.awake_minutes || 960
|
||||
profileStore.baselineIntervalMinutes = profileData.baseline_interval_minutes || 60
|
||||
if (profile) {
|
||||
profileStore.profile = profile
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('initPage error:', e)
|
||||
startTimer()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
+313
-177
@@ -1,15 +1,20 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 筛选标签 -->
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="tab"
|
||||
:class="{ 'tab-active': currentTab === tab.value }"
|
||||
@tap="currentTab = tab.value"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<view class="filters">
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="tab"
|
||||
:class="{ 'tab-active': currentTab === tab.value }"
|
||||
@tap="currentTab = tab.value"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-btn">
|
||||
<text class="filter-icon">📅</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -35,42 +40,51 @@
|
||||
</view>
|
||||
|
||||
<!-- 时间轴 -->
|
||||
<view v-else-if="filteredLogs.length > 0" class="timeline">
|
||||
<view v-for="(group, date) in groupedLogs" :key="date" class="timeline-group">
|
||||
<view class="timeline-date">
|
||||
<text class="timeline-date-badge">{{ formatDate(date) }}</text>
|
||||
<view v-else-if="filteredLogs.length > 0" class="log-list">
|
||||
<view v-for="(group, date) in groupedLogs" :key="date" class="log-group">
|
||||
<view class="group-header">
|
||||
<text class="group-title">{{ formatGroupTitle(date) }}</text>
|
||||
<text class="group-count">{{ group.length }}条记录</text>
|
||||
</view>
|
||||
|
||||
<view class="timeline-items">
|
||||
<view v-for="(log, logIndex) in group" :key="log.id" class="timeline-item">
|
||||
<view class="timeline-line" v-if="logIndex < group.length - 1"></view>
|
||||
<view class="timeline-dot" :class="log.type === 'resisted' ? 'dot-green' : 'dot-smoke'">
|
||||
<text v-if="log.type === 'resisted'">💪</text>
|
||||
<view class="group-items">
|
||||
<view v-for="log in group" :key="log.id" class="log-card" :class="log.type === 'resisted' ? 'log-card-resisted' : 'log-card-smoke'">
|
||||
<view class="log-bar"></view>
|
||||
<view class="log-icon" :class="log.type === 'resisted' ? 'icon-resisted' : 'icon-smoke'">
|
||||
<text v-if="log.type === 'resisted'">🌿</text>
|
||||
<text v-else>🚬</text>
|
||||
</view>
|
||||
|
||||
<!-- 记录卡片 -->
|
||||
<view class="timeline-content" :class="log.type === 'resisted' ? 'content-green' : 'content-red'">
|
||||
<view class="log-header">
|
||||
<text class="log-type">{{ log.type === 'resisted' ? '想抽忍住了' : '记录抽烟' }}</text>
|
||||
<view class="log-actions">
|
||||
<text class="action-btn edit-btn" @tap.stop="handleEdit(log)">编辑</text>
|
||||
<text class="action-btn delete-btn" @tap.stop="handleDelete(log)">删除</text>
|
||||
<view class="log-main">
|
||||
<view class="log-top">
|
||||
<view class="log-time-tag">
|
||||
<text class="log-time">{{ log.displayTime || '--:--' }}</text>
|
||||
<text class="log-tag" :class="log.type === 'resisted' ? 'tag-resisted' : 'tag-smoke'">
|
||||
{{ log.type === 'resisted' ? '已忍住' : '已抽烟' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="log-right">
|
||||
<text v-if="log.type === 'smoke'" class="count-pill">{{ log.num !== undefined && log.num !== null ? log.num : 0 }}根</text>
|
||||
<text v-else class="thumb-pill">👍</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="log-time-row">
|
||||
<text class="log-time">{{ log.displayTime || '--:--' }}</text>
|
||||
<text
|
||||
v-if="log.remark && typeof log.remark === 'string' && log.remark.trim() && log.remark.trim().length > 0"
|
||||
class="log-desc"
|
||||
>{{ log.remark.trim() }}</text>
|
||||
|
||||
<view class="log-meta-row">
|
||||
<text
|
||||
v-if="log.level !== undefined && log.level !== null"
|
||||
class="level-text"
|
||||
:class="levelClass(log.level)"
|
||||
>烟瘾程度：{{ levelLabel(log.level) }}</text>
|
||||
<text v-if="log.interval" class="log-interval">距上次 {{ log.interval }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="log.type === 'smoke'" class="log-meta">
|
||||
<text class="meta-item">数量: {{ log.num !== undefined && log.num !== null ? log.num : 0 }} 支</text>
|
||||
<text v-if="log.level !== undefined && log.level !== null" class="meta-item">等级: {{ log.level }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="log.remark && typeof log.remark === 'string' && log.remark.trim() && log.remark.trim().length > 0" class="log-remark">
|
||||
<text class="remark-text">{{ log.remark.trim() }}</text>
|
||||
|
||||
<view class="log-actions">
|
||||
<text class="action-btn edit-btn" @tap.stop="handleEdit(log)">编辑</text>
|
||||
<text class="action-btn delete-btn" @tap.stop="handleDelete(log)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -111,7 +125,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useLogsStore } from '@/stores/logs'
|
||||
import { useLogin } from '@/hooks/useLogin'
|
||||
|
||||
@@ -151,8 +165,8 @@ const groupedLogs = computed(() => {
|
||||
}, {})
|
||||
})
|
||||
|
||||
// 格式化日期显示
|
||||
function formatDate(dateStr) {
|
||||
// 格式化分组标题
|
||||
function formatGroupTitle(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
|
||||
const date = new Date(dateStr)
|
||||
@@ -164,17 +178,17 @@ function formatDate(dateStr) {
|
||||
const yesterdayStr = yesterday.toISOString().split('T')[0]
|
||||
|
||||
if (dateStr === todayStr) {
|
||||
return `今天 ${date.getMonth() + 1}月${date.getDate()}日`
|
||||
return '今天'
|
||||
}
|
||||
if (dateStr === yesterdayStr) {
|
||||
return `昨天 ${date.getMonth() + 1}月${date.getDate()}日`
|
||||
return '昨天'
|
||||
}
|
||||
return `${date.getMonth() + 1}月${date.getDate()}日`
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
async function onRefresh() {
|
||||
await logsStore.fetchLogs(true)
|
||||
await logsStore.fetchLogs(true, currentTab.value)
|
||||
}
|
||||
|
||||
// 上拉加载
|
||||
@@ -232,7 +246,7 @@ function handleDelete(log) {
|
||||
async function initPage() {
|
||||
try {
|
||||
await waitForLogin()
|
||||
await logsStore.fetchLogs(true)
|
||||
await logsStore.fetchLogs(true, currentTab.value)
|
||||
} catch (e) {
|
||||
console.error('initPage error:', e)
|
||||
}
|
||||
@@ -241,42 +255,93 @@ async function initPage() {
|
||||
onMounted(() => {
|
||||
initPage()
|
||||
})
|
||||
|
||||
function levelClass(level) {
|
||||
const value = Number(level)
|
||||
if (Number.isNaN(value)) return 'level-unknown'
|
||||
if (value <= 1) return 'level-1'
|
||||
if (value === 2) return 'level-2'
|
||||
if (value === 3) return 'level-3'
|
||||
if (value === 4) return 'level-4'
|
||||
return 'level-5'
|
||||
}
|
||||
|
||||
function levelLabel(level) {
|
||||
const value = Number(level)
|
||||
if (Number.isNaN(value)) return '未知'
|
||||
if (value <= 1) return '轻微'
|
||||
if (value === 2) return '中等'
|
||||
if (value === 3) return '明显'
|
||||
if (value === 4) return '强烈'
|
||||
return '极强'
|
||||
}
|
||||
|
||||
watch(currentTab, async (value) => {
|
||||
await logsStore.fetchLogs(true, value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 50%, #FFFFFF 100%);
|
||||
background: linear-gradient(to bottom, #D1FAE5 0%, #F3FFF8 45%, #FFFFFF 100%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 24rpx 32rpx 8rpx;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 32rpx 32rpx 0;
|
||||
margin-bottom: 24rpx;
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 6rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
|
||||
border: 2rpx solid #ECFDF3;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 14rpx 0;
|
||||
border-radius: 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6B7280;
|
||||
background-color: #FFFFFF;
|
||||
border: 2rpx solid #E5E7EB;
|
||||
transition: all 0.3s;
|
||||
transition: all 0.2s;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background-color: #10B981;
|
||||
color: #FFFFFF;
|
||||
border-color: #10B981;
|
||||
font-weight: 600;
|
||||
color: #0B2F23;
|
||||
box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #ECFDF3;
|
||||
box-shadow: 0 6rpx 14rpx rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
height: calc(100vh - 140rpx);
|
||||
padding: 0 32rpx 200rpx;
|
||||
height: calc(100vh - 10rpx);
|
||||
padding: 0 32rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 骨架屏 */
|
||||
@@ -335,168 +400,239 @@ onMounted(() => {
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
/* 时间轴 */
|
||||
.timeline-group {
|
||||
margin-bottom: 32rpx;
|
||||
/* 列表分组 */
|
||||
.log-group {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.timeline-date-badge {
|
||||
font-size: 24rpx;
|
||||
color: #059669;
|
||||
background-color: #D1FAE5;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.timeline-items {
|
||||
position: relative;
|
||||
padding-left: 80rpx;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
left: -44rpx;
|
||||
top: 56rpx;
|
||||
bottom: -24rpx;
|
||||
width: 4rpx;
|
||||
background-color: #E5E7EB;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -60rpx;
|
||||
top: 16rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
z-index: 1;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.dot-green {
|
||||
background-color: #10B981;
|
||||
.group-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #0F172A;
|
||||
}
|
||||
|
||||
.dot-smoke {
|
||||
background-color: #EF4444;
|
||||
.group-count {
|
||||
font-size: 22rpx;
|
||||
color: #64748B;
|
||||
background-color: #E8FFF1;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
.group-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.log-card {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
border-left: 4rpx solid;
|
||||
transition: all 0.3s;
|
||||
padding: 24rpx 24rpx 20rpx 24rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.06);
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-green {
|
||||
border-left-color: #10B981;
|
||||
.log-card-resisted {
|
||||
background-color: #F6FFFA;
|
||||
border: 2rpx solid #E8FFF1;
|
||||
}
|
||||
|
||||
.content-red {
|
||||
border-left-color: #EF4444;
|
||||
.log-card-smoke {
|
||||
background-color: #FFF7F5;
|
||||
border: 2rpx solid #FFE4E6;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
.log-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 8rpx;
|
||||
background-color: #10B981;
|
||||
}
|
||||
|
||||
.log-card-smoke .log-bar {
|
||||
background-color: #F97316;
|
||||
}
|
||||
|
||||
.log-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-resisted {
|
||||
background-color: rgba(16, 185, 129, 0.16);
|
||||
color: #0F766E;
|
||||
}
|
||||
|
||||
.icon-smoke {
|
||||
background-color: rgba(249, 115, 22, 0.15);
|
||||
color: #C2410C;
|
||||
}
|
||||
|
||||
.log-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.log-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.log-type {
|
||||
.log-time-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #0F172A;
|
||||
}
|
||||
|
||||
.log-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tag-smoke {
|
||||
background-color: #FEE2E2;
|
||||
color: #DC2626;
|
||||
}
|
||||
|
||||
.tag-resisted {
|
||||
background-color: #DCFCE7;
|
||||
color: #16A34A;
|
||||
}
|
||||
|
||||
.log-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.count-pill {
|
||||
font-size: 22rpx;
|
||||
color: #DC2626;
|
||||
background-color: #FEE2E2;
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.thumb-pill {
|
||||
font-size: 24rpx;
|
||||
background-color: #DCFCE7;
|
||||
color: #16A34A;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.log-desc {
|
||||
font-size: 24rpx;
|
||||
color: #475569;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.log-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.level-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.log-interval {
|
||||
font-size: 22rpx;
|
||||
color: #64748B;
|
||||
background-color: #F1F5F9;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.log-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
transition: all 0.3s;
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #FFFFFF;
|
||||
border: 2rpx solid #E2E8F0;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
color: #2563EB;
|
||||
border-color: #DBEAFE;
|
||||
background-color: #EFF6FF;
|
||||
color: #3B82F6;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background-color: #FEE2E2;
|
||||
color: #DC2626;
|
||||
border-color: #FECACA;
|
||||
background-color: #FEF2F2;
|
||||
}
|
||||
|
||||
.level-unknown {
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.level-1 {
|
||||
color: #16A34A;
|
||||
}
|
||||
|
||||
.level-2 {
|
||||
color: #0EA5E9;
|
||||
}
|
||||
|
||||
.level-3 {
|
||||
color: #F59E0B;
|
||||
}
|
||||
|
||||
.level-4 {
|
||||
color: #F97316;
|
||||
}
|
||||
|
||||
.level-5 {
|
||||
color: #EF4444;
|
||||
}
|
||||
|
||||
.log-time-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 28rpx;
|
||||
color: #1F2937;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.log-interval {
|
||||
font-size: 24rpx;
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.log-meta {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 24rpx;
|
||||
color: #6B7280;
|
||||
background-color: #F9FAFB;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.log-remark {
|
||||
background-color: #F9FAFB;
|
||||
padding: 12rpx 16rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 0;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.remark-text {
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
@@ -546,7 +682,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.4);
|
||||
box-shadow: 0 12rpx 28rpx rgba(16, 185, 129, 0.35);
|
||||
transition: all 0.3s;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
+207
-115
@@ -1,23 +1,17 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="header">
|
||||
<view class="back-btn" @tap="goBack">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
<text class="header-title">数据统计分析</text>
|
||||
<view class="header-spacer"></view>
|
||||
</view>
|
||||
|
||||
<view class="segment">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="segment-item"
|
||||
:class="{ 'segment-active': currentTab === tab.value }"
|
||||
@tap="currentTab = tab.value"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<view class="sticky-bar">
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="segment">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="segment-item"
|
||||
:class="{ 'segment-active': currentTab === tab.value }"
|
||||
@tap="currentTab = tab.value"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -64,9 +58,11 @@
|
||||
|
||||
<view class="savings-card">
|
||||
<view class="savings-header">
|
||||
<view class="savings-icon"></view>
|
||||
<text class="savings-title">节省金额</text>
|
||||
<view class="savings-icon" :class="moneyIconClass">
|
||||
<view class="icon-coin"></view>
|
||||
</view>
|
||||
<text class="savings-title">节省金额</text>
|
||||
</view>
|
||||
<view class="savings-body">
|
||||
<view class="savings-left">
|
||||
<text class="savings-value">{{ savedMoneyText }}</text>
|
||||
@@ -86,7 +82,10 @@
|
||||
<view class="health-card">
|
||||
<view class="health-header">
|
||||
<view class="health-title-row">
|
||||
<view class="health-icon"></view>
|
||||
<view class="health-icon" :class="healthIconClass">
|
||||
<view class="icon-plus-vertical"></view>
|
||||
<view class="icon-plus-horizontal"></view>
|
||||
</view>
|
||||
<text class="health-title">健康恢复里程碑</text>
|
||||
</view>
|
||||
<view class="health-badge">{{ healthStatusText }}</view>
|
||||
@@ -110,7 +109,9 @@
|
||||
|
||||
<view class="stats-grid">
|
||||
<view class="mini-card">
|
||||
<view class="mini-icon mini-icon-fire"></view>
|
||||
<view class="mini-icon mini-icon-fire" :class="streakIconClass">
|
||||
<view class="icon-flame"></view>
|
||||
</view>
|
||||
<text class="mini-label">连续记录</text>
|
||||
<view class="mini-value-row">
|
||||
<text class="mini-value">{{ streakDays }}</text>
|
||||
@@ -119,7 +120,9 @@
|
||||
<text class="mini-sub">保持未吸烟</text>
|
||||
</view>
|
||||
<view class="mini-card">
|
||||
<view class="mini-icon mini-icon-block"></view>
|
||||
<view class="mini-icon mini-icon-block" :class="resistedIconClass">
|
||||
<view class="icon-shield"></view>
|
||||
</view>
|
||||
<text class="mini-label">已拒绝</text>
|
||||
<view class="mini-value-row">
|
||||
<text class="mini-value">{{ resistedTotal }}</text>
|
||||
@@ -221,6 +224,7 @@ const savedMoneyText = computed(() => {
|
||||
return `¥${(money.saved_cent / 100).toFixed(2)}`
|
||||
})
|
||||
|
||||
|
||||
const moneyTargetCent = computed(() => {
|
||||
const money = statsData.value?.money
|
||||
if (!money || !money.available) return 0
|
||||
@@ -259,6 +263,7 @@ const healthStatusText = computed(() => {
|
||||
return '进行中'
|
||||
})
|
||||
|
||||
|
||||
const healthItems = computed(() => {
|
||||
const health = statsData.value?.health
|
||||
if (!health || !health.available || !health.milestones || health.milestones.length === 0) {
|
||||
@@ -284,6 +289,37 @@ const healthItems = computed(() => {
|
||||
const streakDays = computed(() => statsData.value?.streak_days ?? 12)
|
||||
const resistedTotal = computed(() => statsData.value?.resisted_total ?? 24)
|
||||
|
||||
const moneyIconClass = computed(() => {
|
||||
const money = statsData.value?.money
|
||||
if (!money || !money.available) return 'icon-muted'
|
||||
if (moneyPercent.value >= 60) return 'icon-strong'
|
||||
if (moneyPercent.value >= 30) return 'icon-mid'
|
||||
return 'icon-low'
|
||||
})
|
||||
|
||||
const healthIconClass = computed(() => {
|
||||
const health = statsData.value?.health
|
||||
if (!health || !health.available) return 'icon-muted'
|
||||
const minutes = health.smoke_free_minutes || 0
|
||||
if (minutes >= 1440) return 'icon-strong'
|
||||
if (minutes >= 120) return 'icon-mid'
|
||||
return 'icon-low'
|
||||
})
|
||||
|
||||
const streakIconClass = computed(() => {
|
||||
if (streakDays.value <= 0) return 'icon-muted'
|
||||
if (streakDays.value >= 7) return 'icon-strong'
|
||||
if (streakDays.value >= 3) return 'icon-mid'
|
||||
return 'icon-low'
|
||||
})
|
||||
|
||||
const resistedIconClass = computed(() => {
|
||||
if (resistedTotal.value <= 0) return 'icon-muted'
|
||||
if (resistedTotal.value >= 10) return 'icon-strong'
|
||||
if (resistedTotal.value >= 5) return 'icon-mid'
|
||||
return 'icon-low'
|
||||
})
|
||||
|
||||
function formatTrendLabel(label, unit) {
|
||||
if (!label) return ''
|
||||
if (unit === 'month') {
|
||||
@@ -327,17 +363,13 @@ async function fetchStats() {
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
uni.switchTab({ url: '/pages/index/index' })
|
||||
}
|
||||
|
||||
watch(currentTab, () => {
|
||||
fetchStats()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
statusBarHeight.value = sys.statusBarHeight || 0
|
||||
statusBarHeight.value = Math.max((sys.statusBarHeight || 0) - 20, 0)
|
||||
fetchStats()
|
||||
})
|
||||
</script>
|
||||
@@ -345,74 +377,50 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background-color: #F5F7FB;
|
||||
padding: 0 28rpx 180rpx;
|
||||
background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
|
||||
padding: 0 32rpx 200rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background-color: #F5F7FB;
|
||||
background: linear-gradient(to bottom, #D1FAE5, #F0FDF4);
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0 12rpx;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 36rpx;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
.sticky-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 70%, rgba(255, 255, 255, 0.95) 100%);
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.segment {
|
||||
display: flex;
|
||||
background-color: #EEF2F7;
|
||||
padding: 8rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 6rpx;
|
||||
border-radius: 20rpx;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 24rpx;
|
||||
gap: 6rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border: 2rpx solid #ECFDF3;
|
||||
box-shadow: 0 10rpx 22rpx rgba(16, 185, 129, 0.08);
|
||||
}
|
||||
|
||||
.segment-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
padding: 14rpx 0;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #64748B;
|
||||
border-radius: 16rpx;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.segment-active {
|
||||
background-color: #FFFFFF;
|
||||
color: #111827;
|
||||
box-shadow: 0 8rpx 16rpx rgba(15, 23, 42, 0.06);
|
||||
background-color: #10B981;
|
||||
color: #0B2F23;
|
||||
box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.insight-card {
|
||||
@@ -420,10 +428,11 @@ onMounted(() => {
|
||||
gap: 20rpx;
|
||||
align-items: flex-start;
|
||||
background-color: #ECFDF3;
|
||||
border: 2rpx solid #D4F6E2;
|
||||
border: 2rpx solid #D9FBE7;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 28rpx;
|
||||
box-shadow: 0 10rpx 20rpx rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.insight-icon {
|
||||
@@ -483,16 +492,19 @@ onMounted(() => {
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.status-good {
|
||||
background-color: #E8FFF1;
|
||||
color: #16A34A;
|
||||
border-color: #BBF7D0;
|
||||
}
|
||||
|
||||
.status-warn {
|
||||
background-color: #FEF3C7;
|
||||
color: #D97706;
|
||||
border-color: #FDE68A;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
@@ -510,7 +522,8 @@ onMounted(() => {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.06);
|
||||
border: 2rpx solid #ECFDF3;
|
||||
box-shadow: 0 12rpx 24rpx rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.trend-header {
|
||||
@@ -545,7 +558,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
height: 260rpx;
|
||||
height: 240rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
@@ -559,8 +572,8 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.trend-bar {
|
||||
width: 36rpx;
|
||||
background: linear-gradient(180deg, #2DD36F 0%, #1A9F54 100%);
|
||||
width: 32rpx;
|
||||
background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
|
||||
border-radius: 12rpx 12rpx 8rpx 8rpx;
|
||||
}
|
||||
|
||||
@@ -568,7 +581,7 @@ onMounted(() => {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateY(-12rpx);
|
||||
background-color: #0F172A;
|
||||
background-color: #0F766E;
|
||||
color: #FFFFFF;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
@@ -591,7 +604,8 @@ onMounted(() => {
|
||||
border-radius: 28rpx;
|
||||
padding: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.05);
|
||||
border: 2rpx solid #FEF3C7;
|
||||
box-shadow: 0 12rpx 24rpx rgba(245, 158, 11, 0.08);
|
||||
}
|
||||
|
||||
.savings-header {
|
||||
@@ -607,17 +621,34 @@ onMounted(() => {
|
||||
border-radius: 8rpx;
|
||||
background-color: #FDE68A;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #D97706;
|
||||
}
|
||||
|
||||
.savings-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8rpx;
|
||||
top: 8rpx;
|
||||
width: 16rpx;
|
||||
.savings-icon.icon-muted {
|
||||
background-color: #F1F5F9;
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.savings-icon.icon-low {
|
||||
color: #E59E0B;
|
||||
}
|
||||
|
||||
.savings-icon.icon-mid {
|
||||
color: #D97706;
|
||||
}
|
||||
|
||||
.savings-icon.icon-strong {
|
||||
color: #B45309;
|
||||
}
|
||||
|
||||
.icon-coin {
|
||||
width: 18rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 3rpx solid #F59E0B;
|
||||
border: 3rpx solid currentColor;
|
||||
border-top-width: 6rpx;
|
||||
}
|
||||
|
||||
@@ -683,7 +714,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 6rpx 16rpx rgba(15, 23, 42, 0.06);
|
||||
box-shadow: 0 6rpx 16rpx rgba(245, 158, 11, 0.12);
|
||||
}
|
||||
|
||||
.ring-value {
|
||||
@@ -697,7 +728,8 @@ onMounted(() => {
|
||||
border-radius: 28rpx;
|
||||
padding: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.05);
|
||||
border: 2rpx solid #ECFDF3;
|
||||
box-shadow: 0 12rpx 24rpx rgba(16, 185, 129, 0.08);
|
||||
}
|
||||
|
||||
.health-header {
|
||||
@@ -719,16 +751,47 @@ onMounted(() => {
|
||||
background-color: #DCFCE7;
|
||||
border-radius: 8rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #16A34A;
|
||||
}
|
||||
|
||||
.health-icon::after {
|
||||
content: '';
|
||||
.health-icon.icon-muted {
|
||||
background-color: #F1F5F9;
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.health-icon.icon-low {
|
||||
color: #16A34A;
|
||||
}
|
||||
|
||||
.health-icon.icon-mid {
|
||||
color: #16A34A;
|
||||
}
|
||||
|
||||
.health-icon.icon-strong {
|
||||
color: #0F766E;
|
||||
}
|
||||
|
||||
.icon-plus-vertical,
|
||||
.icon-plus-horizontal {
|
||||
position: absolute;
|
||||
left: 12rpx;
|
||||
top: 6rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: currentColor;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.icon-plus-vertical {
|
||||
width: 4rpx;
|
||||
height: 16rpx;
|
||||
background-color: #16A34A;
|
||||
}
|
||||
|
||||
.icon-plus-horizontal {
|
||||
width: 16rpx;
|
||||
height: 4rpx;
|
||||
}
|
||||
|
||||
.health-title {
|
||||
@@ -744,6 +807,7 @@ onMounted(() => {
|
||||
background-color: #E8FFF1;
|
||||
color: #16A34A;
|
||||
font-weight: 600;
|
||||
border: 2rpx solid #BBF7D0;
|
||||
}
|
||||
|
||||
.health-list {
|
||||
@@ -789,7 +853,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.health-bar-fill-muted {
|
||||
background-color: #CBD5F5;
|
||||
background-color: #C7E6D4;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
@@ -803,7 +867,8 @@ onMounted(() => {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.04);
|
||||
border: 2rpx solid #ECFDF3;
|
||||
box-shadow: 0 12rpx 24rpx rgba(16, 185, 129, 0.06);
|
||||
}
|
||||
|
||||
.mini-icon {
|
||||
@@ -812,36 +877,63 @@ onMounted(() => {
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mini-icon-fire {
|
||||
background-color: #FEE2E2;
|
||||
}
|
||||
|
||||
.mini-icon-fire::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 12rpx;
|
||||
top: 8rpx;
|
||||
width: 16rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
background-color: #F97316;
|
||||
color: #F97316;
|
||||
}
|
||||
|
||||
.mini-icon-block {
|
||||
background-color: #E0E7FF;
|
||||
color: #6366F1;
|
||||
}
|
||||
|
||||
.mini-icon-block::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 12rpx;
|
||||
top: 12rpx;
|
||||
.mini-icon.icon-muted {
|
||||
background-color: #F1F5F9;
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.mini-icon-fire.icon-low {
|
||||
color: #FB923C;
|
||||
}
|
||||
|
||||
.mini-icon-fire.icon-mid {
|
||||
color: #F97316;
|
||||
}
|
||||
|
||||
.mini-icon-fire.icon-strong {
|
||||
color: #EA580C;
|
||||
}
|
||||
|
||||
.mini-icon-block.icon-low {
|
||||
color: #818CF8;
|
||||
}
|
||||
|
||||
.mini-icon-block.icon-mid {
|
||||
color: #6366F1;
|
||||
}
|
||||
|
||||
.mini-icon-block.icon-strong {
|
||||
color: #4F46E5;
|
||||
}
|
||||
|
||||
.icon-flame {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
height: 20rpx;
|
||||
background-color: currentColor;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.icon-shield {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid #6366F1;
|
||||
border: 3rpx solid currentColor;
|
||||
}
|
||||
|
||||
.mini-label {
|
||||
|
||||
+25
-6
@@ -9,7 +9,8 @@ export const useLogsStore = defineStore('logs', {
|
||||
pageSize: 20, // 每页数量
|
||||
hasMore: true, // 是否有更多
|
||||
loading: false, // 加载状态
|
||||
refreshing: false // 刷新状态
|
||||
refreshing: false, // 刷新状态
|
||||
queryType: 'all' // 当前筛选类型
|
||||
}),
|
||||
|
||||
getters: {
|
||||
@@ -28,12 +29,12 @@ export const useLogsStore = defineStore('logs', {
|
||||
|
||||
// 抽烟记录数量
|
||||
smokeCount: (state) => {
|
||||
return state.logs.filter(log => log.num > 0).length
|
||||
return state.logs.filter(log => normalizeLogType(log) === 'smoke').length
|
||||
},
|
||||
|
||||
// 忍住记录数量
|
||||
resistedCount: (state) => {
|
||||
return state.logs.filter(log => log.num === 0 && log.level === 0).length
|
||||
return state.logs.filter(log => normalizeLogType(log) === 'resisted').length
|
||||
},
|
||||
|
||||
// 格式化记录列表（按时间倒序，最新的在前）
|
||||
@@ -64,7 +65,7 @@ export const useLogsStore = defineStore('logs', {
|
||||
})
|
||||
|
||||
return sortedLogs.map((log, index) => {
|
||||
const type = (log.level === 0 && log.num === 0) ? 'resisted' : 'smoke'
|
||||
const type = normalizeLogType(log)
|
||||
|
||||
// 计算间隔时间：当前记录与上一条记录的间隔（上一条是 index-1，因为已倒序）
|
||||
let interval = ''
|
||||
@@ -111,7 +112,7 @@ export const useLogsStore = defineStore('logs', {
|
||||
|
||||
actions: {
|
||||
// 获取记录列表
|
||||
async fetchLogs(refresh = false) {
|
||||
async fetchLogs(refresh = false, type) {
|
||||
if (this.loading) return
|
||||
|
||||
this.loading = true
|
||||
@@ -119,12 +120,14 @@ export const useLogsStore = defineStore('logs', {
|
||||
this.refreshing = true
|
||||
this.page = 1
|
||||
this.logs = []
|
||||
this.queryType = type || 'all'
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await api.getLogs({
|
||||
page: this.page,
|
||||
page_size: this.pageSize
|
||||
page_size: this.pageSize,
|
||||
type: this.queryType
|
||||
})
|
||||
|
||||
if (res.data) {
|
||||
@@ -242,6 +245,7 @@ export const useLogsStore = defineStore('logs', {
|
||||
this.total = 0
|
||||
this.page = 1
|
||||
this.hasMore = true
|
||||
this.queryType = 'all'
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -270,3 +274,18 @@ function formatLogTime(timeStr) {
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${hours}:${minutes}`
|
||||
}
|
||||
|
||||
function normalizeLogType(log) {
|
||||
const rawType = log?.type
|
||||
if (typeof rawType === 'string') {
|
||||
const value = rawType.toLowerCase()
|
||||
if (value === 'resisted' || value === 'resist') return 'resisted'
|
||||
if (value === 'smoke' || value === 'log_smoke') return 'smoke'
|
||||
}
|
||||
if (typeof rawType === 'number') {
|
||||
if (rawType === 0) return 'resisted'
|
||||
if (rawType === 1) return 'smoke'
|
||||
}
|
||||
if (log?.num === 0) return 'resisted'
|
||||
return 'smoke'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user