From e92daf5297ea9dbf3fafd1b457c4b78c123ff72d Mon Sep 17 00:00:00 2001 From: laoyang Date: Mon, 2 Nov 2026 21:31:52 +0800 Subject: [PATCH] =?UTF-8?q?style(=E6=9C=88=E8=A7=86=E5=9B=BE):=20=E5=86=9C?= =?UTF-8?q?=E5=8E=86=E6=81=A2=E5=A4=8D=E5=8E=9F=E8=89=B2=EF=BC=8C=E4=B8=8B?= =?UTF-8?q?=E6=96=B9=E5=8A=A0=E6=B5=85=E7=BA=A2=E5=B0=8F=E5=9C=86=E7=82=B9?= =?UTF-8?q?=20#6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户反馈：农历整体染红不好看（数据本身是对的，确实每天都有日程）， 要求改成"农历下面一个浅红色的点，不要太红、不要太刺眼"。 ## 改动 - 农历文字恢复原色（灰 / 选中日仍是提示灰），不再染红 - 农历**下方**单独一行放一个 3.5vp 小圆点 - 颜色新增 `soft_red`，不用之前的 event_mark(#D93025) · 浅色 #F2938A —— 带粉的浅红，是"柔和提示"而非"警报" · 深色 #C97A72 —— 黑底上浅粉会发灰，用稍沉的暖红 - 无事件时圆点透明但仍占位，保证有/无事件行高一致，整月不跳 ## ⚠️ 两个必须处理的布局约束 1. **圆点必须独立成行**，不能塞进农历那一行的 Row 里。 上一版就错在这：农历带 layoutWeight(1) 撑满整行，圆点被挤到行尾， 视觉上贴着下一个日期。独立成行后天然居中在格子下方。 2. **格子高度已被占满**（实测 175px 全用尽），直接加一行会被顶出格子。 所以把 Column space 从 2 收到 1、日期框 26→24，换出约 4px 给圆点。 周视图同步改成同一套标记，避免"月历一个样、周条另一个样"。 --- entry/src/main/ets/pages/Index.ets | 54 +++++++++---------- .../main/resources/base/element/color.json | 3 +- .../main/resources/dark/element/color.json | 3 +- 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index dc5c9f5..0509d25 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -1706,15 +1706,15 @@ struct Index { .backgroundColor(cell.dateMs === this.selectedDate ? $r('app.color.selected_bg') : (cell.isToday ? $r('app.color.today_bg') : Color.Transparent)) - // ⭐ WEEK_TINT 与月视图统一：有事件 → 农历文字变主题色，不再画圆点。 - // （两种视图用两套标记会让人以为是不同含义。） + // ⭐ WEEK_DOT_BELOW 与月视图统一：农历保持原色，下方一个浅红小点。 + // （两套标记会让人以为是不同含义，上次已踩过。） Text(cell.lunar) .fontSize(8) - .fontColor(cell.dateMs === this.selectedDate - ? (cell.hasEvent ? $r('app.color.button_text') : $r('app.color.text_secondary')) - : (cell.hasEvent ? $r('app.color.event_mark') : $r('app.color.text_hint'))) - .fontWeight(cell.hasEvent ? FontWeight.Medium : FontWeight.Normal) + .fontColor($r('app.color.text_hint')) .maxLines(1) + Circle({ width: 3.5, height: 3.5 }) + .fill($r('app.color.soft_red')) + .opacity(cell.hasEvent ? 1 : 0) } .layoutWeight(1) .onClick(() => { @@ -3258,46 +3258,44 @@ struct Index { @Builder dayCell(cell: MonthCell) { - Column({ space: 2 }) { + // space 从 2 收到 1、日期框 26→24：格子高度原本已被"日期+农历"占满， + // 不收一点空间，新加的圆点会被顶出格子（实测 175px 全用尽）。 + Column({ space: 1 }) { Text(String(cell.day)) .fontSize(this.wideLayout ? 12 : 13) .fontWeight(cell.isToday || cell.dateMs === this.selectedDate ? FontWeight.Bold : FontWeight.Normal) .fontColor(!cell.inMonth ? $r('app.color.text_hint') : (cell.dateMs === this.selectedDate ? $r('app.color.button_text') : $r('app.color.text_primary'))) - .width(this.wideLayout ? 22 : 26) - .height(this.wideLayout ? 22 : 26) + .width(this.wideLayout ? 22 : 24) + .height(this.wideLayout ? 22 : 24) .textAlign(TextAlign.Center) - .borderRadius(this.wideLayout ? 11 : 13) + .borderRadius(this.wideLayout ? 11 : 12) .backgroundColor(cell.dateMs === this.selectedDate ? $r('app.color.selected_bg') : (cell.isToday ? $r('app.color.today_bg') : Color.Transparent)) - // ⭐ LUNAR_TINT 有事件的日期标记 = **农历文字变色**（不再画圆点）。 + // ⭐ DOT_BELOW 有事件的标记 = 农历**下方**一个浅红小圆点。 // - // 为什么弃用圆点：圆点塞在农历行的 Row 里，而农历用了 layoutWeight(1) - // 撑满整行，圆点被挤到格子最右侧；格子宽 133px 远大于文字宽， - // 视觉上就成了"贴着下一个日期"，很怪。 + // 视觉取舍： + // · 农历文字保持原色（灰/白），不染红 —— 整月染红不好看，用户否掉了 + // · 圆点用 soft_red（浅红），不用 event_mark(#D93025) 那种警示红， + // 因为"这天有安排"是中性信息，不该有告警感 + // · 点很小（3.5vp），存在感低，不抢日期数字 // - // 改成给农历文字本身染色：位置天然跟着文字走，不额外占空间， - // 也不会像"满屏红点"那样显得乱（那正是上一版被砍掉的原因）。 - // - // 对比度：选中日的日期数字坐在深色底上，农历若还用主题蓝会看不清， - // 所以选中日改用 button_text（白）；其余有事件的日用 brand。 + // ⚠️ 位置：放在 Column 里**独立一行**，居中。 + // 上一版把点放在农历同一行的 Row 里，农历 layoutWeight(1) 撑满整行， + // 点被挤到行尾 ⇒ 贴着下一个日期，很怪。独立成行就不会跑偏。 if (!this.wideLayout) { - // 宽屏下月历格子变窄，仍保留点（用一个小圆点补位，宽度足够） Text(cell.lunar) .fontSize(8) .fontColor(cell.dateMs === this.selectedDate - ? (cell.hasEvent ? $r('app.color.button_text') : $r('app.color.text_secondary')) - : (cell.hasEvent ? $r('app.color.event_mark') : $r('app.color.text_hint'))) - .fontWeight(cell.hasEvent ? FontWeight.Medium : FontWeight.Normal) + ? $r('app.color.text_secondary') : $r('app.color.text_hint')) .maxLines(1) - } else { - // 宽屏：农历被省略，用一个小圆点表示（此时格子窄，圆点就在正中，不会有位置问题） - Circle({ width: 4, height: 4 }) - .fill(cell.hasEvent ? $r('app.color.event_mark') : Color.Transparent) - .opacity(cell.hasEvent ? 1 : 0) } + // 无事件时圆点透明但仍占位：保证有/无事件的行高完全一致，整月不会跳 + Circle({ width: this.wideLayout ? 4 : 3.5, height: this.wideLayout ? 4 : 3.5 }) + .fill($r('app.color.soft_red')) + .opacity(cell.hasEvent ? 1 : 0) } .layoutWeight(1) .padding({ top: this.wideLayout ? 2 : 3, bottom: this.wideLayout ? 2 : 3 }) diff --git a/entry/src/main/resources/base/element/color.json b/entry/src/main/resources/base/element/color.json index 9abde58..bb38676 100644 --- a/entry/src/main/resources/base/element/color.json +++ b/entry/src/main/resources/base/element/color.json @@ -20,6 +20,7 @@ { "name": "today_bg", "value": "#14007DFF" }, { "name": "selected_bg", "value": "#007DFF" }, { "name": "chip_off_bg", "value": "#0D000000" }, - { "name": "event_mark", "value": "#D93025" } + { "name": "event_mark", "value": "#D93025" }, + { "name": "soft_red", "value": "#F2938A" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/dark/element/color.json b/entry/src/main/resources/dark/element/color.json index 1f1292f..1d9c9e9 100644 --- a/entry/src/main/resources/dark/element/color.json +++ b/entry/src/main/resources/dark/element/color.json @@ -20,6 +20,7 @@ { "name": "today_bg", "value": "#330A84FF" }, { "name": "selected_bg", "value": "#0A84FF" }, { "name": "chip_off_bg", "value": "#1FFFFFFF" }, - { "name": "event_mark", "value": "#FF6B60" } + { "name": "event_mark", "value": "#FF6B60" }, + { "name": "soft_red", "value": "#C97A72" } ] }