From 24cd51970ccd7e7b024c54f128f7db30c4712251 Mon Sep 17 00:00:00 2001 From: laoyang Date: Mon, 2 Nov 2026 22:35:25 +0800 Subject: [PATCH] =?UTF-8?q?style(=E8=B4=A6=E5=8F=B7):=20=E6=97=A5=E5=8E=86?= =?UTF-8?q?=E6=9C=AC=E7=B1=BB=E5=9E=8B=E5=9B=BE=E6=A0=87=E6=94=B9=E7=94=A8?= =?UTF-8?q?=20SVG=20=E7=BA=BF=E6=80=A7=E5=9B=BE=E6=A0=87=20#6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户反馈字符图标（▦ / ✓）不好看。 ## 为什么字符图标不行 - `▦` 在多数系统字体里缺字形，会 fallback 成方框或模糊图案 - `✓` 与 `▦` 笔画粗细、视觉重量完全不同，并排放不协调 - 13 号字时对齐依赖 font metrics，跨设备会飘 ## 换成一对自绘 SVG `ic_event_book.svg`：日历轮廓 + 两个日期格（填充） `ic_todo_book.svg` ：清单三条 + 右下角勾 两者**共用同一套笔触**：stroke-width 2、round linecap、24×24 viewBox， 渲染成 16vp 时视觉重量一致。颜色分别为灰 #666666 与绿 #00B34A， 沿用项目里已有的"待办用成功色"约定。 ## 校验方式 本地无 SVG 渲染工具（无 cairosvg/rsvg/inkscape），改用脚本按坐标 + 描边半宽计算每个元素的包围盒，确认全部落在 24×24 内不被裁切： 日历：6 个元素 全部在界内 待办：5 个元素 全部在界内 这是静态校验，实际观感仍需真机确认。 ## 混合本（both） 显示待办图标（它确实能存待办），不再塞两个图标挤一行。 --- entry/src/main/ets/pages/EditAccountPage.ets | 38 ++++++++----------- .../resources/base/media/ic_event_book.svg | 11 ++++++ .../resources/base/media/ic_todo_book.svg | 11 ++++++ 3 files changed, 37 insertions(+), 23 deletions(-) create mode 100644 entry/src/main/resources/base/media/ic_event_book.svg create mode 100644 entry/src/main/resources/base/media/ic_todo_book.svg diff --git a/entry/src/main/ets/pages/EditAccountPage.ets b/entry/src/main/ets/pages/EditAccountPage.ets index 38d0920..3d808b6 100644 --- a/entry/src/main/ets/pages/EditAccountPage.ets +++ b/entry/src/main/ets/pages/EditAccountPage.ets @@ -544,30 +544,22 @@ struct EditCalendarRow { build() { Row({ space: 12 }) { - // ⭐ COMPS_ICON 类型图标：放在颜色圆点**前面**， + // ⭐ SVG_ICON 类型图标：放在颜色圆点**前面**， // 让用户先看清"这本是日历还是待办"，再看它是什么颜色。 - // 混合本两个图标都显示（服务器同时支持 VEVENT 和 VTODO）。 - if (this.item.comps === 'todo') { - Text('✓') - .fontSize(13) - .fontColor($r('app.color.success')) - .width(16) - .textAlign(TextAlign.Center) - } else if (this.item.comps === 'both') { - Text('▦✓') - .fontSize(13) - .fontColor($r('app.color.text_secondary')) - .width(16) - .textAlign(TextAlign.Center) - } else { - // 'event' 或 'unknown'：一律显示日历图标 - // （unknown 是服务器未声明，按日历对待，不要凭空标成待办） - Text('▦') - .fontSize(13) - .fontColor($r('app.color.text_secondary')) - .width(16) - .textAlign(TextAlign.Center) - } + // + // 用 SVG 而不是字符：字符图标（▦ / ✓）依赖系统字体字形， + // 笔画粗细与视觉重量不统一，跨设备还可能缺字形变成方框。 + // 这两个 SVG 共用同一套笔触（stroke 2、round 端点、24×24）， + // 渲染成 16vp 时重量一致。 + // + // 混合本（both）：显示待办图标（它确实能存待办）， + // 但用户看名字/颜色仍能分辨，不必塞两个图标挤在一行。 + Image(this.item.comps === 'todo' || this.item.comps === 'both' + ? $r('app.media.ic_todo_book') + : $r('app.media.ic_event_book')) + .width(16) + .height(16) + .objectFit(ImageFit.Contain) if (this.item.color !== '') { Circle() .width(12) diff --git a/entry/src/main/resources/base/media/ic_event_book.svg b/entry/src/main/resources/base/media/ic_event_book.svg new file mode 100644 index 0000000..32b1239 --- /dev/null +++ b/entry/src/main/resources/base/media/ic_event_book.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/entry/src/main/resources/base/media/ic_todo_book.svg b/entry/src/main/resources/base/media/ic_todo_book.svg new file mode 100644 index 0000000..fea4fb4 --- /dev/null +++ b/entry/src/main/resources/base/media/ic_todo_book.svg @@ -0,0 +1,11 @@ + + + + + + + + + + \ No newline at end of file