下拉框与网页端对齐（照 FeedLite 那套观感）(#86)
用户 2026-11-05：「好了，鸿蒙端也用类似的方式调，效果让它保持一致。」 端上**不需要像网页那样手写浮层** —— 网页端必须自绘是因为 「原生 select 的展开列表由浏览器绘制，CSS 改不动」； ArkUI 的 Select 本身就是自绘的、选项列表也归框架管。 ⇒ 把对应属性都设上就等价了： 网页端 ArkUI Select ────────────────────────────────────────────────────── 按钮 40 高 / 圆角 / 细边框 height(40) + borderRadius + border 箭头打开转 180° 框架内置（自带动画） 悬停 tint-1 不支持（触屏没有 hover）→ 用打开态代替 选中项底 tint-2 selectedOptionBgColor(fbMixWhite(accent,0.80)) 选中项文字 主题色 selectedOptionFontColor(accent) 选中项右侧对勾 showDefaultSelectedIcon(true) 浮层白底 + 细边框 menuBackgroundColor(White) + border 浮层与按钮同宽 optionWidth(OptionWidthMode.FIT_TRIGGER) 未选值次要色 fontColor(有值 ? accent : Faint) ① Theme 新增 fbMixWhite(hex, ratio) 与网页端 fb_color_tint() **同算法同比例**（混 91/80/72% 白）。 ⚠️ 为什么不用现成的 fbAlpha()：那是「原色 + 透明度」， 会透出父容器底色 —— 下拉浮层背景不确定，那样会时深时浅； 这里是实色混合，颜色确定。 ⚠️ 实测 16 组（4 个主题色 × 4 档比例）与 PHP 输出逐个比对，全部一致。 ② 边框单独用一档 按钮边框 fbMixWhite(accent, 0.62) —— 比 tint-3 再深一点， 否则在 tint-1 的浅底上几乎看不见边界。 ③ 修一个类型坑 本来写了个 pickFontColor(): string 返回 accent / FbColors.muted， 但 FbColors.muted 是 Resource（$r(...)），返回 string | Resource 会让 fontColor() 报「Type 'string | Resource' is not assignable to 'string'」。 ⇒ 改成内联三元，且未选用 FbColors.faint（那个是 string 常量）。 编译通过，已装真机。
This commit is contained in:
@@ -29,7 +29,7 @@
|
||||
* 挤出屏幕（本项目 2026-10-20 真机事故，见 pitfalls）。
|
||||
*/
|
||||
|
||||
import { FbColors, FbMetric, FB_MASK, fbAlpha, fbTint } from '../common/Theme';
|
||||
import { FbColors, FbMetric, FB_MASK, fbAlpha, fbTint, fbMixWhite } from '../common/Theme';
|
||||
import {
|
||||
FbBoardOpt, FbCatOpt, FbTaskAttach, FbTaskComment, FbTaskDetail, FbTaskItem, FbTaskKid, FbTaskShare,
|
||||
} from '../model/Types';
|
||||
@@ -1472,32 +1472,51 @@ export struct FbTaskPanel {
|
||||
.backgroundColor(FbColors.inputBg)
|
||||
.borderRadius(FbMetric.radiusS)
|
||||
} else {
|
||||
/* 🔴 #84（用户 2026-11-05）：
|
||||
「分类弹出来的框太窄了，应该和输入框一样宽。」
|
||||
「颜色也不对。它的颜色应该是主题色：里面的文字颜色是主题色，
|
||||
背景色是比主题色浅一点的那个主题色。」
|
||||
/* 🔴🔴 #86（用户 2026-11-05）：「鸿蒙端也用类似的方式调，
|
||||
效果让它保持一致。」
|
||||
|
||||
· `width('100%')` 管的是**控件本身**；弹出来的下拉菜单
|
||||
还有自己的宽度（`optionWidth`），不给就按内容撑 ⇒ 很窄。
|
||||
用 `optionWidth(OptionWidthMode.FIT_TRIGGER)` 让它跟触发器同宽。
|
||||
· 文字 `this.accent`、底色 `fbAlpha(this.accent, 0.10)`
|
||||
—— 与面板里「＋ 添加附件」那颗胶囊同一套（主题色 + 淡底），
|
||||
这样"可操作"的控件在全面板观感一致。 */
|
||||
网页端照 FeedLite 做成"自绘按钮 + 浮层列表"（原生 <select> 的
|
||||
展开列表 CSS 改不动）。端上**没有那个限制** ——
|
||||
ArkUI 的 `Select` 本身就是自绘的，选项列表也归框架管，
|
||||
所以不用再自己写浮层，把对应的属性都设上就等价了：
|
||||
|
||||
网页端 ArkUI Select
|
||||
─────────────────────────────────────────────────
|
||||
按钮 40 高 / 圆角 / 细边框 height(40) + borderRadius + border
|
||||
箭头打开转 180° 框架内置（有动画）
|
||||
悬停 tint-1 不支持 → 用打开态代替
|
||||
选中项底 tint-2 selectedOptionBgColor
|
||||
选中项文字 主题色 selectedOptionFontColor
|
||||
选中项右侧对勾 showDefaultSelectedIcon(true)
|
||||
浮层白底 + 细边框 + 圆角 menuBackgroundColor + menuOutline
|
||||
浮层与按钮同宽 optionWidth(FIT_TRIGGER)
|
||||
|
||||
⚠️ 底色用 `fbMixWhite(accent, 0.91)` 而**不是** `fbAlpha`：
|
||||
那个是"原色+透明度"（会透出父容器底色，浮层背景不确定
|
||||
就会时深时浅）；这个是与网页端同算法的实色混合。
|
||||
⚠️ 未选值（「未分类」/「不循环」）文字用 muted 次要色，
|
||||
与网页端 `.sel-btn.is-placeholder` 一致。 */
|
||||
Select(this.catOptions())
|
||||
.selected(this.catIndex())
|
||||
.value(this.categoryOf() !== '' ? this.categoryOf() : '未分类')
|
||||
.font({ size: FbMetric.fontSmall, weight: FontWeight.Medium })
|
||||
.fontColor(this.accent)
|
||||
/* #86：有值用主题色、未选用次要灰（占位不该和真值一样显眼） */
|
||||
.fontColor(this.categoryOf() !== '' ? this.accent : FbColors.faint)
|
||||
.selectedOptionFont({ size: FbMetric.fontSmall, weight: FontWeight.Medium })
|
||||
.selectedOptionFontColor(this.accent)
|
||||
.selectedOptionBgColor(fbMixWhite(this.accent, 0.80))
|
||||
.optionFont({ size: FbMetric.fontSmall })
|
||||
.optionFontColor(FbColors.ink)
|
||||
.optionBgColor(Color.White)
|
||||
.showDefaultSelectedIcon(true)
|
||||
.optionWidth(OptionWidthMode.FIT_TRIGGER)
|
||||
.menuBackgroundColor(Color.White)
|
||||
.width('100%')
|
||||
.height(40)
|
||||
.padding({ left: 4, right: 4 })
|
||||
.backgroundColor(fbAlpha(this.accent, 0.10))
|
||||
.padding({ left: 12, right: 12 })
|
||||
.backgroundColor(fbMixWhite(this.accent, 0.91))
|
||||
.borderRadius(FbMetric.radiusS)
|
||||
.border({ width: 1, color: fbMixWhite(this.accent, 0.62) })
|
||||
.onSelect((idx: number): void => {
|
||||
/* index 0 = 「未分类」→ category_id 传 0 */
|
||||
const cid: number = idx === 0 ? 0
|
||||
@@ -1522,22 +1541,27 @@ export struct FbTaskPanel {
|
||||
.backgroundColor(FbColors.inputBg)
|
||||
.borderRadius(FbMetric.radiusS)
|
||||
} else {
|
||||
/* #84：与分类同一套（主题色文字 + 淡主题底色 + 菜单同宽） */
|
||||
/* #86：与分类完全同一套（见上面那段的对照表） */
|
||||
Select(this.repeatOptions())
|
||||
.selected(this.repeatIndex())
|
||||
.value(this.repeatOf() !== '' ? this.repeatWordOf(this.repeatOf()) : '不循环')
|
||||
.font({ size: FbMetric.fontSmall, weight: FontWeight.Medium })
|
||||
.fontColor(this.accent)
|
||||
.fontColor(this.repeatOf() !== '' ? this.accent : FbColors.faint)
|
||||
.selectedOptionFont({ size: FbMetric.fontSmall, weight: FontWeight.Medium })
|
||||
.selectedOptionFontColor(this.accent)
|
||||
.selectedOptionBgColor(fbMixWhite(this.accent, 0.80))
|
||||
.optionFont({ size: FbMetric.fontSmall })
|
||||
.optionFontColor(FbColors.ink)
|
||||
.optionBgColor(Color.White)
|
||||
.showDefaultSelectedIcon(true)
|
||||
.optionWidth(OptionWidthMode.FIT_TRIGGER)
|
||||
.menuBackgroundColor(Color.White)
|
||||
.width('100%')
|
||||
.height(40)
|
||||
.padding({ left: 4, right: 4 })
|
||||
.backgroundColor(fbAlpha(this.accent, 0.10))
|
||||
.padding({ left: 12, right: 12 })
|
||||
.backgroundColor(fbMixWhite(this.accent, 0.91))
|
||||
.borderRadius(FbMetric.radiusS)
|
||||
.border({ width: 1, color: fbMixWhite(this.accent, 0.62) })
|
||||
.onSelect((idx: number): void => {
|
||||
const rk: string = idx === 0 ? '' : FbTaskPanel.REPEAT_KEYS[idx - 1];
|
||||
this.saveField('repeat_rule', rk, -1);
|
||||
|
||||
Reference in New Issue
Block a user