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
pages/logs/index.vue
+313 -177
View File
@@ -1,15 +1,20 @@
<template>
<view class="page">
<!-- 筛选标签 -->
<view class="tabs">
<view
v-for="tab in tabs"
:key="tab.value"
class="tab"
:class="{ 'tab-active': currentTab === tab.value }"
@tap="currentTab = tab.value"
>
{{ tab.label }}
<view class="filters">
<view class="tabs">
<view
v-for="tab in tabs"
:key="tab.value"
class="tab"
:class="{ 'tab-active': currentTab === tab.value }"
@tap="currentTab = tab.value"
>
{{ tab.label }}
</view>
</view>
<view class="filter-btn">
<text class="filter-icon">📅</text>
</view>
</view>
@@ -35,42 +40,51 @@
</view>
<!-- 时间轴 -->
<view v-else-if="filteredLogs.length > 0" class="timeline">
<view v-for="(group, date) in groupedLogs" :key="date" class="timeline-group">
<view class="timeline-date">
<text class="timeline-date-badge">{{ formatDate(date) }}</text>
<view v-else-if="filteredLogs.length > 0" class="log-list">
<view v-for="(group, date) in groupedLogs" :key="date" class="log-group">
<view class="group-header">
<text class="group-title">{{ formatGroupTitle(date) }}</text>
<text class="group-count">{{ group.length }}条记录</text>
</view>
<view class="timeline-items">
<view v-for="(log, logIndex) in group" :key="log.id" class="timeline-item">
<view class="timeline-line" v-if="logIndex < group.length - 1"></view>
<view class="timeline-dot" :class="log.type === 'resisted' ? 'dot-green' : 'dot-smoke'">
<text v-if="log.type === 'resisted'">💪</text>
<view class="group-items">
<view v-for="log in group" :key="log.id" class="log-card" :class="log.type === 'resisted' ? 'log-card-resisted' : 'log-card-smoke'">
<view class="log-bar"></view>
<view class="log-icon" :class="log.type === 'resisted' ? 'icon-resisted' : 'icon-smoke'">
<text v-if="log.type === 'resisted'">🌿</text>
<text v-else>🚬</text>
</view>
<!-- 记录卡片 -->
<view class="timeline-content" :class="log.type === 'resisted' ? 'content-green' : 'content-red'">
<view class="log-header">
<text class="log-type">{{ log.type === 'resisted' ? '想抽忍住了' : '记录抽烟' }}</text>
<view class="log-actions">
<text class="action-btn edit-btn" @tap.stop="handleEdit(log)">编辑</text>
<text class="action-btn delete-btn" @tap.stop="handleDelete(log)">删除</text>
<view class="log-main">
<view class="log-top">
<view class="log-time-tag">
<text class="log-time">{{ log.displayTime || '--:--' }}</text>
<text class="log-tag" :class="log.type === 'resisted' ? 'tag-resisted' : 'tag-smoke'">
{{ log.type === 'resisted' ? '已忍住' : '已抽烟' }}
</text>
</view>
<view class="log-right">
<text v-if="log.type === 'smoke'" class="count-pill">{{ log.num !== undefined && log.num !== null ? log.num : 0 }}根</text>
<text v-else class="thumb-pill">👍</text>
</view>
</view>
<view class="log-time-row">
<text class="log-time">{{ log.displayTime || '--:--' }}</text>
<text
v-if="log.remark && typeof log.remark === 'string' && log.remark.trim() && log.remark.trim().length > 0"
class="log-desc"
>{{ log.remark.trim() }}</text>
<view class="log-meta-row">
<text
v-if="log.level !== undefined && log.level !== null"
class="level-text"
:class="levelClass(log.level)"
>烟瘾程度：{{ levelLabel(log.level) }}</text>
<text v-if="log.interval" class="log-interval">距上次 {{ log.interval }}</text>
</view>
<view v-if="log.type === 'smoke'" class="log-meta">
<text class="meta-item">数量: {{ log.num !== undefined && log.num !== null ? log.num : 0 }} 支</text>
<text v-if="log.level !== undefined && log.level !== null" class="meta-item">等级: {{ log.level }}</text>
</view>
<view v-if="log.remark && typeof log.remark === 'string' && log.remark.trim() && log.remark.trim().length > 0" class="log-remark">
<text class="remark-text">{{ log.remark.trim() }}</text>
<view class="log-actions">
<text class="action-btn edit-btn" @tap.stop="handleEdit(log)">编辑</text>
<text class="action-btn delete-btn" @tap.stop="handleDelete(log)">删除</text>
</view>
</view>
</view>
@@ -111,7 +125,7 @@
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { ref, computed, onMounted, watch } from 'vue'
import { useLogsStore } from '@/stores/logs'
import { useLogin } from '@/hooks/useLogin'
@@ -151,8 +165,8 @@ const groupedLogs = computed(() => {
}, {})
})
// 格式化日期显示
function formatDate(dateStr) {
// 格式化分组标题
function formatGroupTitle(dateStr) {
if (!dateStr) return ''
const date = new Date(dateStr)
@@ -164,17 +178,17 @@ function formatDate(dateStr) {
const yesterdayStr = yesterday.toISOString().split('T')[0]
if (dateStr === todayStr) {
return `今天 ${date.getMonth() + 1}月${date.getDate()}日`
return '今天'
}
if (dateStr === yesterdayStr) {
return `昨天 ${date.getMonth() + 1}月${date.getDate()}日`
return '昨天'
}
return `${date.getMonth() + 1}月${date.getDate()}日`
}
// 下拉刷新
async function onRefresh() {
await logsStore.fetchLogs(true)
await logsStore.fetchLogs(true, currentTab.value)
}
// 上拉加载
@@ -232,7 +246,7 @@ function handleDelete(log) {
async function initPage() {
try {
await waitForLogin()
await logsStore.fetchLogs(true)
await logsStore.fetchLogs(true, currentTab.value)
} catch (e) {
console.error('initPage error:', e)
}
@@ -241,42 +255,93 @@ async function initPage() {
onMounted(() => {
initPage()
})
function levelClass(level) {
const value = Number(level)
if (Number.isNaN(value)) return 'level-unknown'
if (value <= 1) return 'level-1'
if (value === 2) return 'level-2'
if (value === 3) return 'level-3'
if (value === 4) return 'level-4'
return 'level-5'
}
function levelLabel(level) {
const value = Number(level)
if (Number.isNaN(value)) return '未知'
if (value <= 1) return '轻微'
if (value === 2) return '中等'
if (value === 3) return '明显'
if (value === 4) return '强烈'
return '极强'
}
watch(currentTab, async (value) => {
await logsStore.fetchLogs(true, value)
})
</script>
<style scoped>
.page {
min-height: 100vh;
background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 50%, #FFFFFF 100%);
background: linear-gradient(to bottom, #D1FAE5 0%, #F3FFF8 45%, #FFFFFF 100%);
box-sizing: border-box;
}
.filters {
display: flex;
align-items: center;
gap: 16rpx;
padding: 24rpx 32rpx 8rpx;
}
.tabs {
display: flex;
gap: 16rpx;
padding: 32rpx 32rpx 0;
margin-bottom: 24rpx;
flex: 1;
background-color: #FFFFFF;
border-radius: 20rpx;
padding: 6rpx;
box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
border: 2rpx solid #ECFDF3;
}
.tab {
padding: 16rpx 32rpx;
border-radius: 32rpx;
font-size: 28rpx;
flex: 1;
text-align: center;
padding: 14rpx 0;
border-radius: 16rpx;
font-size: 26rpx;
color: #6B7280;
background-color: #FFFFFF;
border: 2rpx solid #E5E7EB;
transition: all 0.3s;
transition: all 0.2s;
font-weight: 600;
}
.tab-active {
background-color: #10B981;
color: #FFFFFF;
border-color: #10B981;
font-weight: 600;
color: #0B2F23;
box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.25);
}
.filter-btn {
width: 72rpx;
height: 72rpx;
border-radius: 20rpx;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid #ECFDF3;
box-shadow: 0 6rpx 14rpx rgba(16, 185, 129, 0.1);
}
.filter-icon {
font-size: 32rpx;
}
.scroll-container {
height: calc(100vh - 140rpx);
padding: 0 32rpx 200rpx;
height: calc(100vh - 10rpx);
padding: 0 32rpx 40rpx;
box-sizing: border-box;
}
/* 骨架屏 */
@@ -335,168 +400,239 @@ onMounted(() => {
100% { background-position: 200% 0; }
}
/* 时间轴 */
.timeline-group {
margin-bottom: 32rpx;
/* 列表分组 */
.log-group {
margin-bottom: 32rpx;
}
.timeline-date {
margin-bottom: 16rpx;
}
.timeline-date-badge {
font-size: 24rpx;
color: #059669;
background-color: #D1FAE5;
padding: 8rpx 20rpx;
border-radius: 16rpx;
font-weight: 500;
}
.timeline-items {
position: relative;
padding-left: 80rpx;
}
.timeline-item {
position: relative;
margin-bottom: 24rpx;
}
.timeline-line {
position: absolute;
left: -44rpx;
top: 56rpx;
bottom: -24rpx;
width: 4rpx;
background-color: #E5E7EB;
}
.timeline-dot {
position: absolute;
left: -60rpx;
top: 16rpx;
width: 48rpx;
height: 48rpx;
border-radius: 50%;
.group-header {
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
z-index: 1;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
gap: 12rpx;
margin-bottom: 16rpx;
}
.dot-green {
background-color: #10B981;
.group-title {
font-size: 30rpx;
font-weight: 700;
color: #0F172A;
}
.dot-smoke {
background-color: #EF4444;
.group-count {
font-size: 22rpx;
color: #64748B;
background-color: #E8FFF1;
padding: 6rpx 16rpx;
border-radius: 999rpx;
}
.timeline-content {
.group-items {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.log-card {
position: relative;
background-color: #FFFFFF;
border-radius: 24rpx;
padding: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
border-left: 4rpx solid;
transition: all 0.3s;
padding: 24rpx 24rpx 20rpx 24rpx;
box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.06);
display: flex;
gap: 20rpx;
overflow: hidden;
}
.content-green {
border-left-color: #10B981;
.log-card-resisted {
background-color: #F6FFFA;
border: 2rpx solid #E8FFF1;
}
.content-red {
border-left-color: #EF4444;
.log-card-smoke {
background-color: #FFF7F5;
border: 2rpx solid #FFE4E6;
}
.log-header {
.log-bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 8rpx;
background-color: #10B981;
}
.log-card-smoke .log-bar {
background-color: #F97316;
}
.log-icon {
width: 80rpx;
height: 80rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
flex-shrink: 0;
}
.icon-resisted {
background-color: rgba(16, 185, 129, 0.16);
color: #0F766E;
}
.icon-smoke {
background-color: rgba(249, 115, 22, 0.15);
color: #C2410C;
}
.log-main {
flex: 1;
min-width: 0;
}
.log-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12rpx;
gap: 16rpx;
margin-bottom: 10rpx;
}
.log-type {
.log-time-tag {
display: flex;
align-items: center;
gap: 12rpx;
}
.log-time {
font-size: 30rpx;
font-weight: 700;
color: #0F172A;
}
.log-tag {
font-size: 22rpx;
padding: 6rpx 14rpx;
border-radius: 12rpx;
font-weight: 700;
}
.tag-smoke {
background-color: #FEE2E2;
color: #DC2626;
}
.tag-resisted {
background-color: #DCFCE7;
color: #16A34A;
}
.log-right {
display: flex;
align-items: center;
gap: 8rpx;
flex-shrink: 0;
}
.count-pill {
font-size: 22rpx;
color: #DC2626;
background-color: #FEE2E2;
padding: 6rpx 14rpx;
border-radius: 12rpx;
font-weight: 700;
}
.thumb-pill {
font-size: 24rpx;
background-color: #DCFCE7;
color: #16A34A;
padding: 6rpx 12rpx;
border-radius: 12rpx;
}
.log-desc {
font-size: 24rpx;
color: #475569;
line-height: 1.5;
margin-bottom: 10rpx;
}
.log-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12rpx;
flex-wrap: wrap;
}
.level-text {
font-size: 22rpx;
font-weight: 600;
color: #1F2937;
}
.log-interval {
font-size: 22rpx;
color: #64748B;
background-color: #F1F5F9;
padding: 4rpx 12rpx;
border-radius: 999rpx;
}
.log-actions {
display: flex;
justify-content: flex-end;
gap: 16rpx;
margin-top: 12rpx;
}
.action-btn {
font-size: 24rpx;
padding: 8rpx 16rpx;
border-radius: 8rpx;
transition: all 0.3s;
font-size: 22rpx;
padding: 6rpx 14rpx;
border-radius: 12rpx;
background-color: #FFFFFF;
border: 2rpx solid #E2E8F0;
color: #64748B;
}
.edit-btn {
color: #2563EB;
border-color: #DBEAFE;
background-color: #EFF6FF;
color: #3B82F6;
}
.delete-btn {
background-color: #FEE2E2;
color: #DC2626;
border-color: #FECACA;
background-color: #FEF2F2;
}
.level-unknown {
color: #64748B;
}
.level-1 {
color: #16A34A;
}
.level-2 {
color: #0EA5E9;
}
.level-3 {
color: #F59E0B;
}
.level-4 {
color: #F97316;
}
.level-5 {
color: #EF4444;
}
.log-time-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12rpx;
}
.log-time {
font-size: 28rpx;
color: #1F2937;
font-weight: 500;
}
.log-interval {
font-size: 24rpx;
color: #9CA3AF;
}
.log-meta {
display: flex;
gap: 16rpx;
margin-bottom: 12rpx;
flex-wrap: wrap;
}
.meta-item {
font-size: 24rpx;
color: #6B7280;
background-color: #F9FAFB;
padding: 6rpx 12rpx;
border-radius: 8rpx;
white-space: nowrap;
}
.log-remark {
background-color: #F9FAFB;
padding: 12rpx 16rpx;
border-radius: 12rpx;
margin-bottom: 0;
margin-top: 8rpx;
}
.remark-text {
font-size: 26rpx;
color: #374151;
line-height: 1.6;
word-break: break-word;
}
/* 空状态 */
.empty-state {
display: flex;
@@ -546,7 +682,7 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.4);
box-shadow: 0 12rpx 28rpx rgba(16, 185, 129, 0.35);
transition: all 0.3s;
z-index: 100;
}