refactor(components): 重构饮酒卡片组件并优化日历交互体验
- 移除DrinkCard组件中的模板切换功能和多种布局模式 - 简化DrinkCard组件结构,统一使用琥珀流光样式 - 添加未来日期禁用功能,防止用户选择未来日期 - 优化卡片样式为现代化深色主题设计 - 调整日历单元格点击交互逻辑,过滤未来日期 - 更新Canvas导出尺寸适配新卡片高度 - 优化照片网格布局算法,支持响应式排列 - 简化页面操作按钮,移除冗余功能入口 - 移除情感状态显示,专注核心饮酒记录功能
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user