admin/smt
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
nepiedg
2026-01-30 01:15:52 +08:00
parent 0d482e3a1c
commit ff68f7f3ae
17 changed files with 821 additions and 1306 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/activity_history/code.html
-196
View File
@@ -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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
UI/activity_history/screen.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 123 KiB

UI/ai_quit_assistant/code.html
-159
View File
@@ -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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
UI/ai_quit_assistant/screen.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 467 KiB

UI/home_dashboard/code.html
-166
View File
@@ -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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&amp;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>
UI/home_dashboard/screen.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 286 KiB

UI/profile_&_settings/code.html
-178
View File
@@ -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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
UI/profile_&_settings/screen.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 131 KiB

UI/smoking_statistics/code.html
-243
View File
@@ -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&amp;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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&amp;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>
UI/smoking_statistics/screen.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 183 KiB

api/smoke.js
+4
View File
@@ -4,6 +4,10 @@ export function getDashboard(params = {}) {
return request.get('/smoke/dashboard', params) return request.get('/smoke/dashboard', params)
} }
export function getHome(params = {}) {
return request.get('/smoke/home', params)
}
export function getNextSmokeTime(params = {}) { export function getNextSmokeTime(params = {}) {
return request.get('/smoke/next_smoke_time', params) return request.get('/smoke/next_smoke_time', params)
} }
components/smoke-record-dialog/smoke-record-dialog.vue
+20 -7
View File
@@ -29,7 +29,7 @@
</picker> </picker>
</view> </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-left">
<view class="section-icon"></view> <view class="section-icon"></view>
<text class="section-title">抽烟数量</text> <text class="section-title">抽烟数量</text>
@@ -41,9 +41,9 @@
</view> </view>
</view> </view>
<view class="section-card" v-if="type === 'smoke'"> <view class="section-card">
<view class="level-header"> <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 class="level-badge">Level {{ formData.level }}</view>
</view> </view>
<slider <slider
@@ -227,7 +227,7 @@ export default {
smoke_time: this.formData.smoke_time, smoke_time: this.formData.smoke_time,
smoke_at: this.formData.smoke_at, smoke_at: this.formData.smoke_at,
remark: this.formData.remark, remark: this.formData.remark,
level: this.type === 'smoke' ? this.formData.level : 0, level: this.formData.level,
num: this.type === 'smoke' ? this.formData.num : 0 num: this.type === 'smoke' ? this.formData.num : 0
} }
@@ -397,10 +397,21 @@ export default {
margin-bottom: 24rpx; 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 { .section-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16rpx; gap: 16rpx;
flex: 1;
min-width: 0;
} }
.section-icon { .section-icon {
@@ -427,18 +438,20 @@ export default {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #111827; color: #111827;
white-space: nowrap;
} }
.counter { .counter {
display: flex; display: inline-flex;
align-items: center; align-items: center;
gap: 20rpx; gap: 20rpx;
background-color: #F8FAFC; background-color: #F8FAFC;
padding: 12rpx 16rpx; padding: 12rpx 16rpx;
border-radius: 999rpx; border-radius: 999rpx;
border: 2rpx solid #F1F5F9; border: 2rpx solid #F1F5F9;
margin-top: 16rpx; margin-top: 0;
justify-content: flex-end; justify-content: center;
flex-shrink: 0;
} }
.counter-btn { .counter-btn {
docs/api.md
+142 -12
View File
@@ -23,7 +23,7 @@
- `smoke_time` 可选；不传则默认“当天”。 - `smoke_time` 可选；不传则默认“当天”。
- `smoke_at` 可选；真实抽烟时间（格式 `YYYY-MM-DD HH:MM:SS`）。用于“按时间节点分析/AI 建议”；不传则可用 `createtime` 近似。 - `smoke_at` 可选；真实抽烟时间（格式 `YYYY-MM-DD HH:MM:SS`）。用于“按时间节点分析/AI 建议”；不传则可用 `createtime` 近似。
- `level/num` 可选；不传时后端会按 `1` 处理。 - `level/num` 可选；不传时后端会按 `1` 处理。
- 如果要记录“想抽但忍住了”，请传 `level=0` 且 `num=0`（会在 `fa_smoke_log` 中展示为一条记录，但不会影响看板的支数累加）。 - “想抽但忍住了”请传 `level=0` 且 `num=0`，系统以 `num=0` 作为“忍住”的判断条件（计入忍住次数，但不计入抽烟支数）。
curl 示例： curl 示例：
@@ -67,12 +67,16 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
## 3) 列表查询（分页） ## 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`：页码，默认 `1`
- `page_size`：每页数量，默认 `20`，最大 `200` - `page_size`：每页数量，默认 `20`，最大 `200`
- `start/end`：可选，按 `smoke_time` 过滤（格式 `YYYY-MM-DD`） - `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` 完成“看广告解锁”（见下一个接口）。 - 权限：会员用户直接可用；非会员需要先对该 `date` 完成“看广告解锁”（见下一个接口）。
- 建议结果会按 `uid + date + prompt_version` 缓存（表：`fa_smoke_ai_advice`）。 - 建议结果会按 `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 ```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` `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 生成功能（可用于「每日 AI 建议」以及「AI 下次抽烟时间节点」）。
- 如果你要生成“明天”的 AI 时间节点，请把 `date` 传为明天日期（例如 `2026-01-06`）。 - 如果你要生成“明天”的 AI 时间节点，请把 `date` 传为明天日期（例如 `2026-01-06`）。
## 10) 获取用户基础信息（首次进入：判断是否需要补全） ## 11) 获取用户基础信息（首次进入：判断是否需要补全）
`GET /api/v1/smoke/profile` `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": ["身体健康", "省钱"], "quit_motivations": ["身体健康", "省钱"],
"wake_up_time": "07:30", "wake_up_time": "07:30",
"sleep_time": "23:30", "sleep_time": "23:30",
"quit_date": "2026-02-28T00:00:00+08:00",
"onboarding_completed_at": "2026-01-05T10:00:00+08:00" "onboarding_completed_at": "2026-01-05T10:00:00+08:00"
}, },
"is_completed": true, "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 时更有针对性。 - `smoke_motivations`（抽烟动机）：如 `压力大/无聊/社交/提神`，用于 AI 在分析 remark 时更有针对性。
- `quit_motivations`（戒烟动力）：如 `身体健康/家人孩子/省钱`，当用户产生动摇时 AI 可用这些信息做“情感阻断/自我提醒”。 - `quit_motivations`（戒烟动力）：如 `身体健康/家人孩子/省钱`，当用户产生动摇时 AI 可用这些信息做“情感阻断/自我提醒”。
- `wake_up_time` + `sleep_time`（作息时间）：用于自动规避睡眠时间，防止在用户睡觉时提醒其“坚持”。 - `wake_up_time` + `sleep_time`（作息时间）：用于自动规避睡眠时间，防止在用户睡觉时提醒其“坚持”。
- `quit_date`（目标戒烟日期）：用于阶段规划或到期提醒。
## 11) 补全/更新用户基础信息（Upsert） ## 12) 补全/更新用户基础信息（Upsert）
`POST /api/v1/smoke/profile` `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": ["压力大", "社交"], "smoke_motivations": ["压力大", "社交"],
"quit_motivations": ["身体健康", "省钱"], "quit_motivations": ["身体健康", "省钱"],
"wake_up_time": "07:30", "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`）。 成功响应：同 `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` `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_time": "2026-01-05",
"smoke_at": "2026-01-05 10:20:00", "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`，用于更直观记录“想抽/忍住”的过程。 - 该接口会在 `fa_smoke_log` 中新增一条记录：`level=0` 且 `num=0`，用于更直观记录“想抽/忍住”的过程。
- 这类记录不会影响 `today_count/weekly.count` 的支数统计（因为 `num=0`）。 - 这类记录不会影响 `today_count/weekly.count` 的支数统计（因为 `num=0`）。
## 13) 获取“下次抽烟记录时间”（默认 + AI 自动切换） ## 14) 获取“下次抽烟记录时间”（默认 + AI 自动切换）
`GET /api/v1/smoke/next_smoke_time` `GET /api/v1/smoke/next_smoke_time`
@@ -430,11 +558,11 @@ AI 生成说明：
字段说明（新增首页字段）： 字段说明（新增首页字段）：
- `last_smoke_at`：上次“实际抽烟”时间（忽略忍住记录），格式 `RFC3339`（含时区）。 - `last_smoke_at`：上次“实际抽烟”时间（忽略忍住记录），格式 `RFC3339`（含时区）。
- `today_count`：今日抽烟支数（累加 `num`）。 - `today_count`：今日抽烟支数（累加 `num`）。
- `resisted_count`：今日克制次数（`level=0 && num=0`）。 - `resisted_count`：今日克制次数（`num=0`）。
- `reduced_from_yesterday`：较昨日减少的支数（允许为负数；为负时表示“今天超出昨日”）。 - `reduced_from_yesterday`：较昨日减少的支数（允许为负数；为负时表示“今天超出昨日”）。
- `exceeded_yesterday`：是否超出昨日（`true` 表示今天超出昨日，前端可用作单独标识）。 - `exceeded_yesterday`：是否超出昨日（`true` 表示今天超出昨日，前端可用作单独标识）。
## 14) 数据统计分析（趋势 + 健康 + 省钱） ## 15) 数据统计分析（趋势 + 健康 + 省钱）
`GET /api/v1/smoke/stats?range=week|month|year&date=2026-01-07` `GET /api/v1/smoke/stats?range=week|month|year&date=2026-01-07`
@@ -493,9 +621,11 @@ AI 生成说明：
字段说明： 字段说明：
- `change_percent`：与上一个同周期对比的变化比例（可为负）。 - `change_percent`：与上一个同周期对比的变化比例（可为负）。
- `money.available=false`：表示缺少 `baseline_cigs_per_day` 或 `pack_price_cent`。 - `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`：表示无历史记录。 - `health.available=false`：表示无历史记录。
## 15) 激励语（后端统一生成） ## 16) 激励语（后端统一生成）
`GET /api/v1/smoke/motivation` `GET /api/v1/smoke/motivation`
pages/index/index.vue
+110 -47
View File
@@ -16,8 +16,8 @@
<view class="user-info"> <view class="user-info">
<image class="avatar" :src="userAvatar" mode="aspectFill"></image> <image class="avatar" :src="userAvatar" mode="aspectFill"></image>
<view class="greeting"> <view class="greeting">
<text class="greeting-text">{{ greeting }}，{{ userName }}</text> <text class="greeting-text">{{ greetingTitle }}</text>
<text class="greeting-sub">保持连胜纪录！🔥</text> <text class="greeting-sub">{{ greetingSubtitle }}</text>
</view> </view>
</view> </view>
<view class="settings-btn" @tap="goSettings"> <view class="settings-btn" @tap="goSettings">
@@ -25,10 +25,10 @@
</view> </view>
</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-icon">🤖</view>
<view class="ai-tip-content"> <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> <text class="ai-tip-desc">{{ aiTipText }}</text>
</view> </view>
<view class="ai-tip-close" @tap="closeAiTip">×</view> <view class="ai-tip-close" @tap="closeAiTip">×</view>
@@ -55,7 +55,7 @@
<view class="stat-value-row"> <view class="stat-value-row">
<text class="stat-value">{{ todayCount }}</text> <text class="stat-value">{{ todayCount }}</text>
<text class="stat-target">/ {{ dailyTarget }}</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>
<view class="stat-progress"> <view class="stat-progress">
<view class="stat-progress-bar stat-progress-red" :style="{ width: progressWidth }"></view> <view class="stat-progress-bar stat-progress-red" :style="{ width: progressWidth }"></view>
@@ -98,27 +98,27 @@
<script setup> <script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue' import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useDashboardStore } from '@/stores/dashboard'
import { useProfileStore } from '@/stores/profile' import { useProfileStore } from '@/stores/profile'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { useLogin } from '@/hooks/useLogin' import { useLogin } from '@/hooks/useLogin'
import * as api from '@/api' import * as api from '@/api'
const dashboardStore = useDashboardStore()
const profileStore = useProfileStore() const profileStore = useProfileStore()
const userStore = useUserStore() const userStore = useUserStore()
const { waitForLogin } = useLogin() const { waitForLogin } = useLogin()
const loading = ref(true) const loading = ref(true)
const showAiTip = ref(true) const showAiTip = ref(true)
const aiTipText = ref('你的烟瘾通常在下午2点达到高峰。我们为你准备了一个快速呼吸练习。')
const resistedCount = ref(5)
const statusBarHeight = ref(0) const statusBarHeight = ref(0)
const showDialog = ref(false) const showDialog = ref(false)
const dialogType = ref('smoke') // 'smoke' 或 'resisted' const dialogType = ref('smoke') // 'smoke' 或 'resisted'
const homeData = ref(null)
let timerInterval = null let timerInterval = null
const timerSeconds = ref(0) const timerSeconds = ref(0)
const timerBaseSeconds = ref(-1)
const aiTipFallback = '你的烟瘾通常在下午2点达到高峰。我们为你准备了一个快速呼吸练习。'
const greeting = computed(() => { const greeting = computed(() => {
const hour = new Date().getHours() const hour = new Date().getHours()
@@ -130,18 +130,50 @@ const greeting = computed(() => {
}) })
const userName = computed(() => { const userName = computed(() => {
return userStore.user?.nickname || 'Alex' return homeData.value?.greeting?.nickname || userStore.user?.nickname || 'Alex'
}) })
const userAvatar = computed(() => { 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 greetingTitle = computed(() => {
const dailyTarget = computed(() => profileStore.profile?.baseline_cigs_per_day || 10) 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 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}%` return `${percent}%`
}) })
@@ -151,12 +183,21 @@ const resistedProgressWidth = computed(() => {
}) })
const changeText = 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 timerDisplay = computed(() => {
const baseMinutes = dashboardStore.minutesSinceLast ?? 165 if (timerBaseSeconds.value < 0) {
const totalSeconds = baseMinutes * 60 + timerSeconds.value return '--:--:--'
}
const totalSeconds = timerBaseSeconds.value + timerSeconds.value
const hours = Math.floor(totalSeconds / 3600) const hours = Math.floor(totalSeconds / 3600)
const minutes = Math.floor((totalSeconds % 3600) / 60) const minutes = Math.floor((totalSeconds % 3600) / 60)
const seconds = totalSeconds % 60 const seconds = totalSeconds % 60
@@ -168,11 +209,16 @@ const timerGradient = computed(() => {
}) })
const nextSmokeTimeText = computed(() => { const nextSmokeTimeText = computed(() => {
if (dashboardStore.nextSmokeTime?.suggested_at) { const timer = homeTimer.value
const date = new Date(dashboardStore.nextSmokeTime.suggested_at) if (!timer) return ''
return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}` 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(() => { const dialogTitle = computed(() => {
@@ -180,6 +226,10 @@ const dialogTitle = computed(() => {
}) })
function startTimer() { function startTimer() {
stopTimer()
if (timerBaseSeconds.value < 0) {
return
}
timerInterval = setInterval(() => { timerInterval = setInterval(() => {
timerSeconds.value++ timerSeconds.value++
}, 1000) }, 1000)
@@ -202,29 +252,48 @@ function openResistedDialog() {
showDialog.value = true 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) { async function handleSubmit(submitData) {
try { try {
if (dialogType.value === 'smoke') { if (dialogType.value === 'smoke') {
await api.createLog(submitData) await api.createLog(submitData)
dashboardStore.resetTimer() timerBaseSeconds.value = 0
timerSeconds.value = 0 timerSeconds.value = 0
startTimer()
uni.showToast({ title: '记录成功', icon: 'success' }) uni.showToast({ title: '记录成功', icon: 'success' })
try { try {
await Promise.all([ await fetchHomeData()
dashboardStore.fetchDashboard(true),
dashboardStore.fetchNextSmokeTime()
])
} catch (e) { } catch (e) {
console.error('refreshAfterSmokeLog error:', e) console.error('refreshHomeData error:', e)
} }
} else { } else {
await api.createResistedLog({ await api.createResistedLog({
smoke_time: submitData.smoke_time, smoke_time: submitData.smoke_time,
smoke_at: submitData.smoke_at, smoke_at: submitData.smoke_at,
remark: submitData.remark remark: submitData.remark,
level: submitData.level,
num: submitData.num
}) })
resistedCount.value++
uni.showToast({ title: '太棒了！', icon: 'success' }) uni.showToast({ title: '太棒了！', icon: 'success' })
try {
await fetchHomeData()
} catch (e) {
console.error('refreshHomeData error:', e)
}
} }
} catch (e) { } catch (e) {
console.error('handleSubmit error:', e) console.error('handleSubmit error:', e)
@@ -242,33 +311,27 @@ async function initPage() {
try { try {
await waitForLogin() await waitForLogin()
const [profileRes, dashboardRes, nextTimeRes] = await Promise.all([ const home = await fetchHomeData()
api.getProfile(), const profileData = home.profile || {}
api.getDashboard(), const profile = profileData.profile
api.getNextSmokeTime() const isCompleted = profileData.is_completed ||
])
const profile = profileRes.data.profile
const isCompleted = profileRes.data.is_completed ||
(profile && profile.onboarding_completed_at) || (profile && profile.onboarding_completed_at) ||
(profile && profile.baseline_cigs_per_day > 0) (profile && profile.baseline_cigs_per_day > 0)
if (!profileRes.data.exists || !isCompleted) { if (!profileData.exists || !isCompleted) {
uni.redirectTo({ url: '/pages/onboarding/index' }) uni.redirectTo({ url: '/pages/onboarding/index' })
return return
} }
profileStore.exists = profileRes.data.exists profileStore.exists = !!profileData.exists
profileStore.isCompleted = profileRes.data.is_completed profileStore.isCompleted = !!isCompleted
profileStore.profile = profileRes.data.profile profileStore.awakeMinutes = profileData.awake_minutes || 960
profileStore.baselineIntervalMinutes = profileData.baseline_interval_minutes || 60
dashboardStore.setDashboard(dashboardRes.data) if (profile) {
dashboardStore.setNextSmokeTime(nextTimeRes.data) profileStore.profile = profile
}
startTimer()
} catch (e) { } catch (e) {
console.error('initPage error:', e) console.error('initPage error:', e)
startTimer()
} finally { } finally {
loading.value = false loading.value = false
} }
pages/logs/index.vue
+309 -173
View File
@@ -1,15 +1,20 @@
<template> <template>
<view class="page"> <view class="page">
<!-- 筛选标签 --> <!-- 筛选标签 -->
<view class="tabs"> <view class="filters">
<view <view class="tabs">
v-for="tab in tabs" <view
:key="tab.value" v-for="tab in tabs"
class="tab" :key="tab.value"
:class="{ 'tab-active': currentTab === tab.value }" class="tab"
@tap="currentTab = tab.value" :class="{ 'tab-active': currentTab === tab.value }"
> @tap="currentTab = tab.value"
{{ tab.label }} >
{{ tab.label }}
</view>
</view>
<view class="filter-btn">
<text class="filter-icon">📅</text>
</view> </view>
</view> </view>
@@ -35,42 +40,51 @@
</view> </view>
<!-- 时间轴 --> <!-- 时间轴 -->
<view v-else-if="filteredLogs.length > 0" class="timeline"> <view v-else-if="filteredLogs.length > 0" class="log-list">
<view v-for="(group, date) in groupedLogs" :key="date" class="timeline-group"> <view v-for="(group, date) in groupedLogs" :key="date" class="log-group">
<view class="timeline-date"> <view class="group-header">
<text class="timeline-date-badge">{{ formatDate(date) }}</text> <text class="group-title">{{ formatGroupTitle(date) }}</text>
<text class="group-count">{{ group.length }}条记录</text>
</view> </view>
<view class="timeline-items"> <view class="group-items">
<view v-for="(log, logIndex) in group" :key="log.id" class="timeline-item"> <view v-for="log in group" :key="log.id" class="log-card" :class="log.type === 'resisted' ? 'log-card-resisted' : 'log-card-smoke'">
<view class="timeline-line" v-if="logIndex < group.length - 1"></view> <view class="log-bar"></view>
<view class="timeline-dot" :class="log.type === 'resisted' ? 'dot-green' : 'dot-smoke'"> <view class="log-icon" :class="log.type === 'resisted' ? 'icon-resisted' : 'icon-smoke'">
<text v-if="log.type === 'resisted'">💪</text> <text v-if="log.type === 'resisted'">🌿</text>
<text v-else>🚬</text> <text v-else>🚬</text>
</view> </view>
<view class="log-main">
<!-- 记录卡片 --> <view class="log-top">
<view class="timeline-content" :class="log.type === 'resisted' ? 'content-green' : 'content-red'"> <view class="log-time-tag">
<view class="log-header"> <text class="log-time">{{ log.displayTime || '--:--' }}</text>
<text class="log-type">{{ log.type === 'resisted' ? '想抽忍住了' : '记录抽烟' }}</text> <text class="log-tag" :class="log.type === 'resisted' ? 'tag-resisted' : 'tag-smoke'">
<view class="log-actions"> {{ log.type === 'resisted' ? '已忍住' : '已抽烟' }}
<text class="action-btn edit-btn" @tap.stop="handleEdit(log)">编辑</text> </text>
<text class="action-btn delete-btn" @tap.stop="handleDelete(log)">删除</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> </view>
<view class="log-time-row"> <text
<text class="log-time">{{ log.displayTime || '--:--' }}</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> <text v-if="log.interval" class="log-interval">距上次 {{ log.interval }}</text>
</view> </view>
<view v-if="log.type === 'smoke'" class="log-meta"> <view class="log-actions">
<text class="meta-item">数量: {{ log.num !== undefined && log.num !== null ? log.num : 0 }} 支</text> <text class="action-btn edit-btn" @tap.stop="handleEdit(log)">编辑</text>
<text v-if="log.level !== undefined && log.level !== null" class="meta-item">等级: {{ log.level }}</text> <text class="action-btn delete-btn" @tap.stop="handleDelete(log)">删除</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> </view>
</view> </view>
</view> </view>
@@ -111,7 +125,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted, watch } from 'vue'
import { useLogsStore } from '@/stores/logs' import { useLogsStore } from '@/stores/logs'
import { useLogin } from '@/hooks/useLogin' import { useLogin } from '@/hooks/useLogin'
@@ -151,8 +165,8 @@ const groupedLogs = computed(() => {
}, {}) }, {})
}) })
// 格式化日期显示 // 格式化分组标题
function formatDate(dateStr) { function formatGroupTitle(dateStr) {
if (!dateStr) return '' if (!dateStr) return ''
const date = new Date(dateStr) const date = new Date(dateStr)
@@ -164,17 +178,17 @@ function formatDate(dateStr) {
const yesterdayStr = yesterday.toISOString().split('T')[0] const yesterdayStr = yesterday.toISOString().split('T')[0]
if (dateStr === todayStr) { if (dateStr === todayStr) {
return `今天 ${date.getMonth() + 1}月${date.getDate()}日` return '今天'
} }
if (dateStr === yesterdayStr) { if (dateStr === yesterdayStr) {
return `昨天 ${date.getMonth() + 1}月${date.getDate()}日` return '昨天'
} }
return `${date.getMonth() + 1}月${date.getDate()}日` return `${date.getMonth() + 1}月${date.getDate()}日`
} }
// 下拉刷新 // 下拉刷新
async function onRefresh() { async function onRefresh() {
await logsStore.fetchLogs(true) await logsStore.fetchLogs(true, currentTab.value)
} }
// 上拉加载 // 上拉加载
@@ -232,7 +246,7 @@ function handleDelete(log) {
async function initPage() { async function initPage() {
try { try {
await waitForLogin() await waitForLogin()
await logsStore.fetchLogs(true) await logsStore.fetchLogs(true, currentTab.value)
} catch (e) { } catch (e) {
console.error('initPage error:', e) console.error('initPage error:', e)
} }
@@ -241,42 +255,93 @@ async function initPage() {
onMounted(() => { onMounted(() => {
initPage() 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> </script>
<style scoped> <style scoped>
.page { .page {
min-height: 100vh; 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; box-sizing: border-box;
} }
.filters {
display: flex;
align-items: center;
gap: 16rpx;
padding: 24rpx 32rpx 8rpx;
}
.tabs { .tabs {
display: flex; display: flex;
gap: 16rpx; flex: 1;
padding: 32rpx 32rpx 0; background-color: #FFFFFF;
margin-bottom: 24rpx; border-radius: 20rpx;
padding: 6rpx;
box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
border: 2rpx solid #ECFDF3;
} }
.tab { .tab {
padding: 16rpx 32rpx; flex: 1;
border-radius: 32rpx; text-align: center;
font-size: 28rpx; padding: 14rpx 0;
border-radius: 16rpx;
font-size: 26rpx;
color: #6B7280; color: #6B7280;
background-color: #FFFFFF; transition: all 0.2s;
border: 2rpx solid #E5E7EB; font-weight: 600;
transition: all 0.3s;
} }
.tab-active { .tab-active {
background-color: #10B981; background-color: #10B981;
color: #FFFFFF; color: #0B2F23;
border-color: #10B981; box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.25);
font-weight: 600; }
.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 { .scroll-container {
height: calc(100vh - 140rpx); height: calc(100vh - 10rpx);
padding: 0 32rpx 200rpx; padding: 0 32rpx 40rpx;
box-sizing: border-box;
} }
/* 骨架屏 */ /* 骨架屏 */
@@ -335,168 +400,239 @@ onMounted(() => {
100% { background-position: 200% 0; } 100% { background-position: 200% 0; }
} }
/* 时间轴 */ /* 列表分组 */
.timeline-group { .log-group {
margin-bottom: 32rpx; margin-bottom: 32rpx;
} }
.timeline-date { .group-header {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
.timeline-date-badge { .group-title {
font-size: 24rpx; font-size: 30rpx;
color: #059669; font-weight: 700;
background-color: #D1FAE5; color: #0F172A;
padding: 8rpx 20rpx;
border-radius: 16rpx;
font-weight: 500;
} }
.timeline-items { .group-count {
position: relative; font-size: 22rpx;
padding-left: 80rpx; color: #64748B;
background-color: #E8FFF1;
padding: 6rpx 16rpx;
border-radius: 999rpx;
} }
.timeline-item { .group-items {
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%;
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: center; gap: 20rpx;
font-size: 24rpx;
z-index: 1;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
} }
.dot-green { .log-card {
background-color: #10B981; position: relative;
}
.dot-smoke {
background-color: #EF4444;
}
.timeline-content {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 24rpx; border-radius: 24rpx;
padding: 24rpx; padding: 24rpx 24rpx 20rpx 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.06);
border-left: 4rpx solid; display: flex;
transition: all 0.3s; gap: 20rpx;
overflow: hidden; overflow: hidden;
} }
.content-green { .log-card-resisted {
border-left-color: #10B981; background-color: #F6FFFA;
border: 2rpx solid #E8FFF1;
} }
.content-red { .log-card-smoke {
border-left-color: #EF4444; 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; display: flex;
align-items: center; align-items: center;
justify-content: space-between; 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-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; font-weight: 600;
color: #1F2937; }
.log-interval {
font-size: 22rpx;
color: #64748B;
background-color: #F1F5F9;
padding: 4rpx 12rpx;
border-radius: 999rpx;
} }
.log-actions { .log-actions {
display: flex; display: flex;
justify-content: flex-end;
gap: 16rpx; gap: 16rpx;
margin-top: 12rpx;
} }
.action-btn { .action-btn {
font-size: 24rpx; font-size: 22rpx;
padding: 8rpx 16rpx; padding: 6rpx 14rpx;
border-radius: 8rpx; border-radius: 12rpx;
transition: all 0.3s; background-color: #FFFFFF;
border: 2rpx solid #E2E8F0;
color: #64748B;
} }
.edit-btn { .edit-btn {
color: #2563EB;
border-color: #DBEAFE;
background-color: #EFF6FF; background-color: #EFF6FF;
color: #3B82F6;
} }
.delete-btn { .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; 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 { .empty-state {
display: flex; display: flex;
@@ -546,7 +682,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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; transition: all 0.3s;
z-index: 100; z-index: 100;
} }
pages/stats/index.vue
+207 -115
View File
@@ -1,23 +1,17 @@
<template> <template>
<view class="page"> <view class="page">
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view> <view class="sticky-bar">
<view class="header"> <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="back-btn" @tap="goBack"> <view class="segment">
<text class="back-icon">‹</text> <view
</view> v-for="tab in tabs"
<text class="header-title">数据统计分析</text> :key="tab.value"
<view class="header-spacer"></view> class="segment-item"
</view> :class="{ 'segment-active': currentTab === tab.value }"
@tap="currentTab = tab.value"
<view class="segment"> >
<view {{ tab.label }}
v-for="tab in tabs" </view>
:key="tab.value"
class="segment-item"
:class="{ 'segment-active': currentTab === tab.value }"
@tap="currentTab = tab.value"
>
{{ tab.label }}
</view> </view>
</view> </view>
@@ -64,9 +58,11 @@
<view class="savings-card"> <view class="savings-card">
<view class="savings-header"> <view class="savings-header">
<view class="savings-icon"></view> <view class="savings-icon" :class="moneyIconClass">
<text class="savings-title">节省金额</text> <view class="icon-coin"></view>
</view> </view>
<text class="savings-title">节省金额</text>
</view>
<view class="savings-body"> <view class="savings-body">
<view class="savings-left"> <view class="savings-left">
<text class="savings-value">{{ savedMoneyText }}</text> <text class="savings-value">{{ savedMoneyText }}</text>
@@ -86,7 +82,10 @@
<view class="health-card"> <view class="health-card">
<view class="health-header"> <view class="health-header">
<view class="health-title-row"> <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> <text class="health-title">健康恢复里程碑</text>
</view> </view>
<view class="health-badge">{{ healthStatusText }}</view> <view class="health-badge">{{ healthStatusText }}</view>
@@ -110,7 +109,9 @@
<view class="stats-grid"> <view class="stats-grid">
<view class="mini-card"> <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> <text class="mini-label">连续记录</text>
<view class="mini-value-row"> <view class="mini-value-row">
<text class="mini-value">{{ streakDays }}</text> <text class="mini-value">{{ streakDays }}</text>
@@ -119,7 +120,9 @@
<text class="mini-sub">保持未吸烟</text> <text class="mini-sub">保持未吸烟</text>
</view> </view>
<view class="mini-card"> <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> <text class="mini-label">已拒绝</text>
<view class="mini-value-row"> <view class="mini-value-row">
<text class="mini-value">{{ resistedTotal }}</text> <text class="mini-value">{{ resistedTotal }}</text>
@@ -221,6 +224,7 @@ const savedMoneyText = computed(() => {
return `¥${(money.saved_cent / 100).toFixed(2)}` return `¥${(money.saved_cent / 100).toFixed(2)}`
}) })
const moneyTargetCent = computed(() => { const moneyTargetCent = computed(() => {
const money = statsData.value?.money const money = statsData.value?.money
if (!money || !money.available) return 0 if (!money || !money.available) return 0
@@ -259,6 +263,7 @@ const healthStatusText = computed(() => {
return '进行中' return '进行中'
}) })
const healthItems = computed(() => { const healthItems = computed(() => {
const health = statsData.value?.health const health = statsData.value?.health
if (!health || !health.available || !health.milestones || health.milestones.length === 0) { 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 streakDays = computed(() => statsData.value?.streak_days ?? 12)
const resistedTotal = computed(() => statsData.value?.resisted_total ?? 24) 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) { function formatTrendLabel(label, unit) {
if (!label) return '' if (!label) return ''
if (unit === 'month') { if (unit === 'month') {
@@ -327,17 +363,13 @@ async function fetchStats() {
} }
} }
function goBack() {
uni.switchTab({ url: '/pages/index/index' })
}
watch(currentTab, () => { watch(currentTab, () => {
fetchStats() fetchStats()
}) })
onMounted(() => { onMounted(() => {
const sys = uni.getSystemInfoSync() const sys = uni.getSystemInfoSync()
statusBarHeight.value = sys.statusBarHeight || 0 statusBarHeight.value = Math.max((sys.statusBarHeight || 0) - 20, 0)
fetchStats() fetchStats()
}) })
</script> </script>
@@ -345,74 +377,50 @@ onMounted(() => {
<style scoped> <style scoped>
.page { .page {
min-height: 100vh; min-height: 100vh;
background-color: #F5F7FB; background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
padding: 0 28rpx 180rpx; padding: 0 32rpx 200rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.status-bar { .status-bar {
background-color: #F5F7FB; background: linear-gradient(to bottom, #D1FAE5, #F0FDF4);
height: 0; height: 0;
} }
.header { .sticky-bar {
display: flex; position: sticky;
align-items: center; top: 0;
justify-content: space-between; z-index: 20;
padding: 16rpx 0 12rpx; background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 70%, rgba(255, 255, 255, 0.95) 100%);
} padding-bottom: 8rpx;
.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;
} }
.segment { .segment {
display: flex; display: flex;
background-color: #EEF2F7; background-color: #FFFFFF;
padding: 8rpx; padding: 6rpx;
border-radius: 20rpx; border-radius: 20rpx;
gap: 8rpx; gap: 6rpx;
margin-bottom: 24rpx; margin-bottom: 16rpx;
border: 2rpx solid #ECFDF3;
box-shadow: 0 10rpx 22rpx rgba(16, 185, 129, 0.08);
} }
.segment-item { .segment-item {
flex: 1; flex: 1;
text-align: center; text-align: center;
padding: 16rpx 0; padding: 14rpx 0;
font-size: 26rpx; font-size: 24rpx;
font-weight: 500; font-weight: 600;
color: #64748B; color: #64748B;
border-radius: 16rpx; border-radius: 16rpx;
transition: all 0.2s;
} }
.segment-active { .segment-active {
background-color: #FFFFFF; background-color: #10B981;
color: #111827; color: #0B2F23;
box-shadow: 0 8rpx 16rpx rgba(15, 23, 42, 0.06); box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.25);
} }
.insight-card { .insight-card {
@@ -420,10 +428,11 @@ onMounted(() => {
gap: 20rpx; gap: 20rpx;
align-items: flex-start; align-items: flex-start;
background-color: #ECFDF3; background-color: #ECFDF3;
border: 2rpx solid #D4F6E2; border: 2rpx solid #D9FBE7;
border-radius: 24rpx; border-radius: 24rpx;
padding: 24rpx; padding: 24rpx;
margin-bottom: 28rpx; margin-bottom: 28rpx;
box-shadow: 0 10rpx 20rpx rgba(16, 185, 129, 0.1);
} }
.insight-icon { .insight-icon {
@@ -483,16 +492,19 @@ onMounted(() => {
border-radius: 999rpx; border-radius: 999rpx;
font-size: 22rpx; font-size: 22rpx;
font-weight: 600; font-weight: 600;
border: 2rpx solid transparent;
} }
.status-good { .status-good {
background-color: #E8FFF1; background-color: #E8FFF1;
color: #16A34A; color: #16A34A;
border-color: #BBF7D0;
} }
.status-warn { .status-warn {
background-color: #FEF3C7; background-color: #FEF3C7;
color: #D97706; color: #D97706;
border-color: #FDE68A;
} }
.status-dot { .status-dot {
@@ -510,7 +522,8 @@ onMounted(() => {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 28rpx; border-radius: 28rpx;
padding: 24rpx; 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 { .trend-header {
@@ -545,7 +558,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
height: 260rpx; height: 240rpx;
gap: 12rpx; gap: 12rpx;
} }
@@ -559,8 +572,8 @@ onMounted(() => {
} }
.trend-bar { .trend-bar {
width: 36rpx; width: 32rpx;
background: linear-gradient(180deg, #2DD36F 0%, #1A9F54 100%); background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
border-radius: 12rpx 12rpx 8rpx 8rpx; border-radius: 12rpx 12rpx 8rpx 8rpx;
} }
@@ -568,7 +581,7 @@ onMounted(() => {
position: absolute; position: absolute;
top: 0; top: 0;
transform: translateY(-12rpx); transform: translateY(-12rpx);
background-color: #0F172A; background-color: #0F766E;
color: #FFFFFF; color: #FFFFFF;
font-size: 20rpx; font-size: 20rpx;
padding: 4rpx 10rpx; padding: 4rpx 10rpx;
@@ -591,7 +604,8 @@ onMounted(() => {
border-radius: 28rpx; border-radius: 28rpx;
padding: 24rpx; padding: 24rpx;
margin-top: 20rpx; 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 { .savings-header {
@@ -607,17 +621,34 @@ onMounted(() => {
border-radius: 8rpx; border-radius: 8rpx;
background-color: #FDE68A; background-color: #FDE68A;
position: relative; position: relative;
display: flex;
align-items: center;
justify-content: center;
color: #D97706;
} }
.savings-icon::after { .savings-icon.icon-muted {
content: ''; background-color: #F1F5F9;
position: absolute; color: #94A3B8;
left: 8rpx; }
top: 8rpx;
width: 16rpx; .savings-icon.icon-low {
color: #E59E0B;
}
.savings-icon.icon-mid {
color: #D97706;
}
.savings-icon.icon-strong {
color: #B45309;
}
.icon-coin {
width: 18rpx;
height: 12rpx; height: 12rpx;
border-radius: 4rpx; border-radius: 4rpx;
border: 3rpx solid #F59E0B; border: 3rpx solid currentColor;
border-top-width: 6rpx; border-top-width: 6rpx;
} }
@@ -683,7 +714,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .ring-value {
@@ -697,7 +728,8 @@ onMounted(() => {
border-radius: 28rpx; border-radius: 28rpx;
padding: 24rpx; padding: 24rpx;
margin-top: 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 { .health-header {
@@ -719,16 +751,47 @@ onMounted(() => {
background-color: #DCFCE7; background-color: #DCFCE7;
border-radius: 8rpx; border-radius: 8rpx;
position: relative; position: relative;
display: flex;
align-items: center;
justify-content: center;
color: #16A34A;
} }
.health-icon::after { .health-icon.icon-muted {
content: ''; 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; position: absolute;
left: 12rpx; top: 50%;
top: 6rpx; left: 50%;
transform: translate(-50%, -50%);
background-color: currentColor;
border-radius: 999rpx;
}
.icon-plus-vertical {
width: 4rpx; width: 4rpx;
height: 16rpx; height: 16rpx;
background-color: #16A34A; }
.icon-plus-horizontal {
width: 16rpx;
height: 4rpx;
} }
.health-title { .health-title {
@@ -744,6 +807,7 @@ onMounted(() => {
background-color: #E8FFF1; background-color: #E8FFF1;
color: #16A34A; color: #16A34A;
font-weight: 600; font-weight: 600;
border: 2rpx solid #BBF7D0;
} }
.health-list { .health-list {
@@ -789,7 +853,7 @@ onMounted(() => {
} }
.health-bar-fill-muted { .health-bar-fill-muted {
background-color: #CBD5F5; background-color: #C7E6D4;
} }
.stats-grid { .stats-grid {
@@ -803,7 +867,8 @@ onMounted(() => {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 24rpx; border-radius: 24rpx;
padding: 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 { .mini-icon {
@@ -812,36 +877,63 @@ onMounted(() => {
border-radius: 12rpx; border-radius: 12rpx;
margin-bottom: 12rpx; margin-bottom: 12rpx;
position: relative; position: relative;
display: flex;
align-items: center;
justify-content: center;
} }
.mini-icon-fire { .mini-icon-fire {
background-color: #FEE2E2; background-color: #FEE2E2;
} color: #F97316;
.mini-icon-fire::after {
content: '';
position: absolute;
left: 12rpx;
top: 8rpx;
width: 16rpx;
height: 20rpx;
border-radius: 50% 50% 50% 50%;
background-color: #F97316;
} }
.mini-icon-block { .mini-icon-block {
background-color: #E0E7FF; background-color: #E0E7FF;
color: #6366F1;
} }
.mini-icon-block::after { .mini-icon.icon-muted {
content: ''; background-color: #F1F5F9;
position: absolute; color: #94A3B8;
left: 12rpx; }
top: 12rpx;
.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; 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-radius: 50%;
border: 3rpx solid #6366F1; border: 3rpx solid currentColor;
} }
.mini-label { .mini-label {
stores/logs.js
+25 -6
View File
@@ -9,7 +9,8 @@ export const useLogsStore = defineStore('logs', {
pageSize: 20, // 每页数量 pageSize: 20, // 每页数量
hasMore: true, // 是否有更多 hasMore: true, // 是否有更多
loading: false, // 加载状态 loading: false, // 加载状态
refreshing: false // 刷新状态 refreshing: false, // 刷新状态
queryType: 'all' // 当前筛选类型
}), }),
getters: { getters: {
@@ -28,12 +29,12 @@ export const useLogsStore = defineStore('logs', {
// 抽烟记录数量 // 抽烟记录数量
smokeCount: (state) => { smokeCount: (state) => {
return state.logs.filter(log => log.num > 0).length return state.logs.filter(log => normalizeLogType(log) === 'smoke').length
}, },
// 忍住记录数量 // 忍住记录数量
resistedCount: (state) => { 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) => { return sortedLogs.map((log, index) => {
const type = (log.level === 0 && log.num === 0) ? 'resisted' : 'smoke' const type = normalizeLogType(log)
// 计算间隔时间：当前记录与上一条记录的间隔（上一条是 index-1，因为已倒序） // 计算间隔时间：当前记录与上一条记录的间隔（上一条是 index-1，因为已倒序）
let interval = '' let interval = ''
@@ -111,7 +112,7 @@ export const useLogsStore = defineStore('logs', {
actions: { actions: {
// 获取记录列表 // 获取记录列表
async fetchLogs(refresh = false) { async fetchLogs(refresh = false, type) {
if (this.loading) return if (this.loading) return
this.loading = true this.loading = true
@@ -119,12 +120,14 @@ export const useLogsStore = defineStore('logs', {
this.refreshing = true this.refreshing = true
this.page = 1 this.page = 1
this.logs = [] this.logs = []
this.queryType = type || 'all'
} }
try { try {
const res = await api.getLogs({ const res = await api.getLogs({
page: this.page, page: this.page,
page_size: this.pageSize page_size: this.pageSize,
type: this.queryType
}) })
if (res.data) { if (res.data) {
@@ -242,6 +245,7 @@ export const useLogsStore = defineStore('logs', {
this.total = 0 this.total = 0
this.page = 1 this.page = 1
this.hasMore = true this.hasMore = true
this.queryType = 'all'
} }
} }
}) })
@@ -270,3 +274,18 @@ function formatLogTime(timeStr) {
const minutes = String(date.getMinutes()).padStart(2, '0') const minutes = String(date.getMinutes()).padStart(2, '0')
return `${hours}:${minutes}` 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'
}