行程编辑浮层：居中布局、类型可滑动、去掉手动状态选择、编辑按钮改胶囊 #47

New Issue

2026-11-05T00:54:08Z

laoyang commented

2026-11-05 00:54:08 +00:00

行程编辑浮层：布局居中、类型可横向滚动、去掉手动状态/阶段、编辑按钮改胶囊

背景

用户 2026-11-05 在鸿蒙端编辑行程时提出四个问题（网页端与鸿蒙端都要改）。

一、浮层垂直位置不居中

「编辑行程里面，那个框好像在整个界面上并不居中：上面距离手机顶部很远，但下面已经贴着边了。」

原因：FbTripNodeSheet 的卡片高度写死 88%，且 Stack(alignContent: Alignment.Bottom) 导致内容贴底。

改法：高度改为按内容自适应（constraintSize({ maxHeight: '86%' })），用 Alignment.Bottom 保留底部弹出感，但上下留等量安全边距。

二、类型无法左右滑动选择

「这个类型还是划不动，左右划不动，选不了。」

原因：类型是 5 个 chip 平铺在 Row 里。用户手势落在 Scroll 外层时，Row 宽度超出但不可滚 ⇒ 第 5 个（「其他」）被裁掉且无法触及。

改法：类型改回 Scroll(Horizontal)，但分两行布局使 5 项一屏可见，同时保留可滑能力（项目里"能滑"和"自适应"不冲突）。

三、去手动状态与阶段（核心业务规则变更）

「现在无论是网页端还是鸿蒙端，都有一个状态：计划中、进行中、已完成、已取消。这个里面不要让它手动去动。
只要是添加的计划行程，它的状态就是计划中。在计划行程里面点击开始执行，它的状态自然变成进行中。
如果这个事情已经做完了，点了已完成，它自然就变成已完成的状态。如果它没去，取消了，那就自然变成已取消。
所以编辑这个地方不要出现计划中、进行中、已完成、已取消。
还有，实际行程、当前状态实际行程，这个地方也不要出现，因为这是没有意义的。」

规则：状态是动作驱动的，不是表单字段。

场景	status	触发方式
新建计划行程	`planned`	自动
新建实际行程	`planned`	自动（阶段已由入口决定）
点「开始执行」	`ongoing`	卡片上的动作按钮
点「已完成」	`done`	卡片上的动作按钮
点「已取消」	`cancelled`	卡片上的动作按钮

改法：

表单里删掉「执行状态」选择器（NODE_STATUS_OPTS 那组 chips）
表单里删掉「当前状态」只读展示（stageWord()）
状态由时间线卡片上的动作按钮改（已有 setTaskStatus 式接口，需新增节点状态接口）

⚠️ 服务端 Trip::NODE_STATUS 保留（数据库还在用），只是界面不再暴露手动选择。

四、编辑/删除按钮改成胶囊按钮，与网页端一致

「鸿蒙端的编辑按钮，不论是颜色还是样式，都应该尽可能和网页端、鸿蒙端保持一致。
比如编辑和删除按钮，现在就是两个字放在那儿，字号小，另外一个也不是特别醒目。
它应该像网页端一样，做成两个按钮，颜色也尽可能保持一致。
我看别人设计下面那个悬浮条的时候，当选中其中一个按钮之后，它除了那个图标和文字颜色发生变化之外，
它还给它加了一个那种椭圆的那种框那种背景，灰色的。这样的话会更能够清晰的表示出来，
现在正在被选中的是哪一个功能。我们也这样试一试。」

改法：

两个动作改成胶囊按钮（有底色、圆角、内边距），不再是裸文字
颜色沿用模块主题色系（编辑 = 暖棕 #B8862B，删除 = 砖红 #C0533F）
选中态加灰色椭圆底（FbColors.inputBg + radiusPill），视觉上明确"正在操作哪一个"

验收

编辑浮层上下留白对称，不贴底
类型 5 项全部可见可选，且能横向滑动
编辑表单里没有「执行状态」「当前状态/实际行程」
新建的行程 status 恒为 planned
时间线卡片上有「开始执行 / 已完成 / 已取消」三个动作按钮
编辑/删除是胶囊按钮，与网页端视觉一致
网页端同步以上全部改动

为什么单独建单

与 #34（日程时间选择器 bug）、#33（地址联想）都无关：本单是「行程编辑」浮层的布局与业务规则问题，属于新做的行程编辑功能（今天才补上 PATCH 接口）的后续调整

# 行程编辑浮层：布局居中、类型可横向滚动、去掉手动状态/阶段、编辑按钮改胶囊 ## 背景用户 2026-11-05 在鸿蒙端编辑行程时提出四个问题（网页端与鸿蒙端都要改）。 ## 一、浮层垂直位置不居中 > 「编辑行程里面，那个框好像在整个界面上并不居中：上面距离手机顶部很远，但下面已经贴着边了。」 **原因**：`FbTripNodeSheet` 的卡片高度写死 `88%`，且 `Stack(alignContent: Alignment.Bottom)` 导致内容贴底。 **改法**：高度改为按内容自适应（`constraintSize({ maxHeight: '86%' })`），用 `Alignment.Bottom` 保留底部弹出感，但**上下留等量安全边距**。 ## 二、类型无法左右滑动选择 > 「这个类型还是划不动，左右划不动，选不了。」 **原因**：类型是 5 个 chip 平铺在 `Row` 里。用户手势落在 `Scroll` 外层时，`Row` 宽度超出但不可滚 ⇒ 第 5 个（「其他」）被裁掉且无法触及。 **改法**：类型改回 `Scroll(Horizontal)`，但**分两行布局**使 5 项一屏可见，同时保留可滑能力（项目里"能滑"和"自适应"不冲突）。 ## 三、去手动状态与阶段（核心业务规则变更） > 「现在无论是网页端还是鸿蒙端，都有一个状态：计划中、进行中、已完成、已取消。这个里面不要让它手动去动。 > 只要是添加的计划行程，它的状态就是计划中。在计划行程里面点击开始执行，它的状态自然变成进行中。 > 如果这个事情已经做完了，点了已完成，它自然就变成已完成的状态。如果它没去，取消了，那就自然变成已取消。 > 所以编辑这个地方不要出现计划中、进行中、已完成、已取消。 > 还有，实际行程、当前状态实际行程，这个地方也不要出现，因为这是没有意义的。」 **规则**：状态是**动作驱动**的，不是表单字段。 | 场景 | status | 触发方式 | |---|---|---| | 新建计划行程 | `planned` | 自动 | | 新建实际行程 | `planned` | 自动（阶段已由入口决定） | | 点「开始执行」 | `ongoing` | 卡片上的动作按钮 | | 点「已完成」 | `done` | 卡片上的动作按钮 | | 点「已取消」 | `cancelled` | 卡片上的动作按钮 | **改法**： - **表单里删掉**「执行状态」选择器（`NODE_STATUS_OPTS` 那组 chips） - **表单里删掉**「当前状态」只读展示（`stageWord()`） - 状态由时间线卡片上的动作按钮改（**已有** `setTaskStatus` 式接口，需新增节点状态接口） ⚠️ 服务端 `Trip::NODE_STATUS` 保留（数据库还在用），只是**界面不再暴露手动选择**。 ## 四、编辑/删除按钮改成胶囊按钮，与网页端一致 > 「鸿蒙端的编辑按钮，不论是颜色还是样式，都应该尽可能和网页端、鸿蒙端保持一致。 > 比如编辑和删除按钮，现在就是两个字放在那儿，字号小，另外一个也不是特别醒目。 > 它应该像网页端一样，做成两个按钮，颜色也尽可能保持一致。 > 我看别人设计下面那个悬浮条的时候，当选中其中一个按钮之后，它除了那个图标和文字颜色发生变化之外， > 它还给它加了一个那种椭圆的那种框那种背景，灰色的。这样的话会更能够清晰的表示出来， > 现在正在被选中的是哪一个功能。我们也这样试一试。」 **改法**： - 两个动作改成**胶囊按钮**（有底色、圆角、内边距），不再是裸文字 - 颜色沿用模块主题色系（编辑 = 暖棕 `#B8862B`，删除 = 砖红 `#C0533F`） - 选中态加**灰色椭圆底**（`FbColors.inputBg` + `radiusPill`），视觉上明确"正在操作哪一个" ## 验收 - [ ] 编辑浮层上下留白对称，不贴底 - [ ] 类型 5 项全部可见可选，且能横向滑动 - [ ] 编辑表单里**没有**「执行状态」「当前状态/实际行程」 - [ ] 新建的行程 status 恒为 `planned` - [ ] 时间线卡片上有「开始执行 / 已完成 / 已取消」三个动作按钮 - [ ] 编辑/删除是胶囊按钮，与网页端视觉一致 - [ ] 网页端同步以上全部改动 --- ### 为什么单独建单与 #34（日程时间选择器 bug）、#33（地址联想）都无关：本单是「行程编辑」浮层的布局与业务规则问题，属于新做的行程编辑功能（今天才补上 PATCH 接口）的后续调整

laoyang referenced this issue

2026-11-05 01:09:07 +00:00

行程逻辑重构：计划/实际双轨、状态只属于计划、开始与完成记录真实时间 #48

laoyang referenced this issue

2026-11-05 02:47:15 +00:00

新建待办页的截止时间选择器和父任务选择器点了没反应 #49

laoyang referenced this issue

2026-11-05 02:57:04 +00:00

鸿蒙端行程表单：类型点击无反应（@Builder 值传参不刷新）、出行方式改平铺、参与人显示已选头像 #50

laoyang referenced this issue from a commit

2026-11-05 04:41:11 +00:00

行程：#47~#51 打包 —— 双轨状态、动态类型、动作按钮、去提示 (#51)