refactor(components): 重构饮酒卡片组件并优化日历交互体验

- 移除DrinkCard组件中的模板切换功能和多种布局模式
- 简化DrinkCard组件结构,统一使用琥珀流光样式
- 添加未来日期禁用功能,防止用户选择未来日期
- 优化卡片样式为现代化深色主题设计
- 调整日历单元格点击交互逻辑,过滤未来日期
- 更新Canvas导出尺寸适配新卡片高度
- 优化照片网格布局算法,支持响应式排列
- 简化页面操作按钮,移除冗余功能入口
- 移除情感状态显示,专注核心饮酒记录功能
This commit is contained in:
cg
2026-07-15 23:12:13 +08:00
parent b95243c8f8
commit 145976f221
7 changed files with 610 additions and 996 deletions
+19 -2
View File
@@ -25,10 +25,11 @@
:class="{
'cal-cell-empty': !cell.day,
'cal-cell-today': cell.isToday,
'cal-cell-future': cell.day && isFuture(cell.date),
'cal-cell-drank': getRecordMode(cell.date) === 'drank',
'cal-cell-abstain': getRecordMode(cell.date) === 'abstain'
}"
@click="cell.day && onSelectDate(cell.date)"
@click="cell.day && !isFuture(cell.date) && onSelectDate(cell.date)"
>
<text v-if="cell.day" class="cal-day-num">{{ cell.day }}</text>
<view v-if="getRecordMode(cell.date) === 'drank'" class="cal-dot cal-dot-drank"></view>
@@ -61,6 +62,13 @@ export default {
}
},
methods: {
isFuture(date) {
if (!date) return false
const today = new Date()
today.setHours(0, 0, 0, 0)
const d = new Date(date.replace(/-/g, '/'))
return d > today
},
getRecordMode(date) {
if (!date) return null
const record = this.records.find(r => r.date === date)
@@ -157,7 +165,7 @@ export default {
border: 2rpx solid $amber;
}
&:active:not(.cal-cell-empty) {
&:active:not(.cal-cell-empty):not(.cal-cell-future) {
transform: scale(0.92);
}
}
@@ -186,6 +194,15 @@ export default {
}
}
/* 未来日期置灰 */
.cal-cell-future {
opacity: 0.3;
}
.cal-cell-future .cal-day-num {
color: $text-tertiary;
}
/* 饮酒日高亮背景 */
.cal-cell-drank {
background: rgba(232, 168, 56, 0.08);