v77 旅程：列表只留整卡入口 + 动作区改成 2×2 + 地址不截断 + 题图

用户 2026-10-22 的五条： ① 列表卡去掉「看行程」「编辑」——「点进去之后会有编辑，直接点进去看行程就可以」。卡尾整行删除，整卡可点变唯一入口（标题行尾留一个 › 作提示）；openEdit() 一并删掉，不留死代码。 ② 详情页动作区重排——「排列得不好看，乱七八糟的」。旧版是四颗彩色实心胶囊分两行、右端对不齐。现在 ☰ 挪到标题行右侧，四颗动作做成 2×2 等宽（layoutWeight(1)）；主操作保持实心，编辑/删除改浅底同色字。配色与顺序仍是 v41 硬要求，一个 hex 都没改。 ③ 出行方式：十种方式**不能增删**（网页版也只是只读 + "常用信息"，而端上加行程表单里根本没有车次/车牌，那条备忘在端上无从使用） ⇒ 方向反过来，给加行程表单补上「车次/航班号」（火车/飞机/轮船/ 公交/地铁）和「车牌」（自驾，从车辆库选一台，服务端按 vehicle_id join 出车牌）。没有这两项，"出行方式"在端上就只剩一个图标。 ④ 行程详情里的地址显示不全——「从哪到哪，如果地址特别长就显示不全」。原来出发地与到达地挤在一条 Row 里各 maxLines(1) + 省略号；改成「从」「到」上下两行、整段铺开不截断。 ⑤ 旅程题图：端上原来根本没有上传链路（服务端只有观影的 poster 槽位）。服务端已加 POST /trips/<id>/cover；端上新建/编辑浮层加 16:9 题图选区，流程「先建 → 拿 id → 再传图」，传图失败记 id 再点只补传（不会建出两趟一样的旅程）。详情页空题图那块也能直接点开去加。顺带把 multipart 上传收敛成一份（data/FbUpload.ets）：原来头像 / 海报 / 观影照片各抄了一遍，旅程题图会是第四份。
2026-10-22 10:15:03 +08:00
parent 79e942d0e4
commit c7bd26dd1b
9 changed files with 743 additions and 318 deletions
@@ -579,7 +579,7 @@ export struct FbTripDetailPage {
          .transition(fbSheetTransition())
      }

-      // ---- 编辑旅程浮层（标题 / 简介 / 是否公开） ----
+      // ---- 编辑旅程浮层（标题 / 简介 / 是否公开 / **题图**）----
      if (this.editOpen && this.detail !== null) {
        FbTripNewSheet({
          accent: this.accent,
@@ -587,12 +587,15 @@ export struct FbTripDetailPage {
          editingTitle: this.detail.title,
          editingSummary: this.detail.summary,
          editingPublic: this.detail.isPublic,
+          /* 🔴 v77：把已有题图交给浮层做预览 —— 不传的话用户打开"编辑"
+             看到的永远是空框，会以为题图丢了（真传上去又会把原图覆盖掉）。 */
+          editingCoverKey: this.detail.coverKey,
          onClose: (): void => {
            this.editOpen = false;
          },
          onSaved: (): void => {
            this.editOpen = false;
-            // 保存后重拉本体（标题/简介是服务端回填的，本地拼不出来）
+            // 保存后重拉本体（标题/简介/题图都是服务端回填的，本地拼不出来）
            this.reload();
          }
        })
@@ -666,52 +669,41 @@ export struct FbTripDetailPage {
  }

  /**
-   * 页头：标题（左）+ 动作区（右）。
+   * 页头：标题（+ ☰）在上面，四颗动作按 **2×2 等宽**排在下面。
   *
   * 🔴🔴 v41 用户第 4 条给的**顺序与配色是硬要求**：
   *    「旅程详情页面右上角的按钮，顺序分别是从左到右：
   *      +计划行程、+实际行程、编辑、删除、返回旅程和设置。
   *      计划行程的按钮用蓝色背景；实际行程的按钮用绿色背景；
   *      编辑用黄色背景；删除用红色背景；设置就用这个图标，不要变。」
-   * ⚠️ 手机宽度放不下五颗带字的按钮 ⇒ **分两行**（第一行两颗「+」，
-   *    第二行编辑/删除），但**相对顺序与配色一字不改**。
-   *    这不是"重新设计"，是被屏幕宽度逼的排版折行。
+   *    ⇒ 配色与顺序**一字不改**（守卫里有断言）。
+   *
+   * 🔴🔴 v77（用户 2026-10-22）：「详情页面里「旅程详情」「计划行程」「实际行程」
+   *    这些按钮排列得不好看，乱七八糟的。」
+   *    旧版是「四颗彩色实心胶囊分两行」：第一行两颗 + 尾部一片空白，
+   *    第二行两颗 + 尾巴上孤零零挂一个 ☰ —— 每行宽度都不一样、右端对不齐，
+   *    远看就是四块散落的色斑。现在改三件事：
+   *      ① ☰ 挪到**标题行右侧**：它是"整页设置"，不该跟业务动作抢位置；
+   *      ② 四颗动作做成 **2×2 等宽**（每颗 `layoutWeight(1)`），上下两行严丝合缝；
+   *      ③ 主操作（+计划 / +实际）保持**实心**；编辑 / 删除改成
+   *         **浅底同色字** —— 它们是低频与破坏性操作，不该和主操作一样抢眼。
+   *    ⚠️ 为什么不用 `Text` 直接撑满：`Text` 定高后垂直居中要依赖 `.align()`，
+   *       而本项目在 `Stack` 子节点上踩过 `.align()` 完全无效的坑；
+   *       这里用 `Row + justifyContent(Center)` 包住文字，位置只由布局决定。
   */
  @Builder
  headBar() {
-    Column({ space: 8 }) {
-      Text(this.detail !== null ? this.detail.title : '旅程')
-        .fontSize(FbMetric.fontH1)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(FbColors.ink)
-        .maxLines(2)
-        .textOverflow({ overflow: TextOverflow.Ellipsis })
-        .width('100%')
-
+    Column({ space: 10 }) {
+      // ---- 标题 + ☰（设置图标**不变**）----
      Row({ space: 8 }) {
-        // ① + 计划行程 —— 蓝
-        this.actionBtn('+ 计划行程', '#2F6FB0', (): void => {
-          this.openNodeSheet('plan');
-        })
-        // ② + 实际行程 —— 绿
-        this.actionBtn('+ 实际行程', '#4E7C3F', (): void => {
-          this.openNodeSheet('actual');
-        })
-        Column().layoutWeight(1)
-      }
-      .width('100%')
+        Text(this.detail !== null ? this.detail.title : '旅程')
+          .fontSize(FbMetric.fontH1)
+          .fontWeight(FontWeight.Medium)
+          .fontColor(FbColors.ink)
+          .maxLines(2)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .layoutWeight(1)

-      Row({ space: 8 }) {
-        // ③ 编辑 —— 黄
-        this.actionBtn('编辑', '#B8862B', (): void => {
-          this.editOpen = true;
-        })
-        // ④ 删除 —— 红
-        this.actionBtn('删除', '#C0533F', (): void => {
-          this.confirmDeleteTrip();
-        })
-        Column().layoutWeight(1)
-        // ⑤ 设置 —— 图标**不变**（☰）
        FbIconButton({
          icon: $r('app.media.fb_ic_menu'),
          tint: FbTint.muted,
@@ -721,6 +713,29 @@ export struct FbTripDetailPage {
        })
      }
      .width('100%')
+      .alignItems(VerticalAlign.Center)
+
+      // ---- 主操作：+ 计划行程（蓝）/ + 实际行程（绿），等宽 ----
+      Row({ space: 8 }) {
+        this.actionBtn('+ 计划行程', '#2F6FB0', true, (): void => {
+          this.openNodeSheet('plan');
+        })
+        this.actionBtn('+ 实际行程', '#4E7C3F', true, (): void => {
+          this.openNodeSheet('actual');
+        })
+      }
+      .width('100%')
+
+      // ---- 次操作：编辑（黄）/ 删除（红），等宽、浅底 ----
+      Row({ space: 8 }) {
+        this.actionBtn('编辑', '#B8862B', false, (): void => {
+          this.editOpen = true;
+        })
+        this.actionBtn('删除', '#C0533F', false, (): void => {
+          this.confirmDeleteTrip();
+        })
+      }
+      .width('100%')
    }
    .width('100%')
    .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 10 })
@@ -728,23 +743,32 @@ export struct FbTripDetailPage {
  }

  /**
-   * 动作区的一颗实心按钮。
+   * 动作区的一颗按钮（**等宽**，由调用方的 `Row({space:8})` 均分）。
   *
-   * ⚠️ 自己画而不是用 `FbPrimaryButton`：那颗按钮有 `icon` / `block` 等一堆参数，
-   *    这里只要"给定底色 + 白字 + 固定高度"，自己画反而更少样板、也更好调高度对齐。
+   * @param tone  语义色（蓝/绿/黄/红 —— v41 定的，不许改）
+   * @param solid true = 实心（主操作）；false = 浅底同色字（次操作）
+   *
+   * ⚠️ 自己画而不是用 `FbPrimaryButton`：那颗是"整行大按钮"，样式与这里
+   *    （半宽、34 高、等宽网格）不是一回事，硬套要覆盖一堆参数。
   */
  @Builder
-  actionBtn(label: string, bg: string, onTap: () => void) {
-    Text(label)
-      .fontSize(FbMetric.fontTiny)
-      .fontWeight(FontWeight.Medium)
-      .fontColor('#FFFFFF')
-      .padding({ left: 12, right: 12, top: 7, bottom: 7 })
-      .backgroundColor(bg)
-      .borderRadius(FbMetric.radiusPill)
-      .onClick((): void => {
-        onTap();
-      })
+  actionBtn(label: string, tone: string, solid: boolean, onTap: () => void) {
+    Row() {
+      Text(label)
+        .fontSize(FbMetric.fontSmall)
+        .fontWeight(FontWeight.Medium)
+        .fontColor(solid ? '#FFFFFF' : tone)
+        .maxLines(1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+    }
+    .layoutWeight(1)
+    .height(34)
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor(solid ? tone : fbAlpha(tone, 0.12))
+    .borderRadius(FbMetric.radiusS)
+    .onClick((): void => {
+      onTap();
+    })
  }

  /** 题图 + 信息区（照 `trips/show.php` 的 `trip-hero`） */
@@ -766,6 +790,12 @@ export struct FbTripDetailPage {
            })
        }
        if (this.detail === null || this.detail.coverKey === '' || this.coverFailed) {
+          /* 🔴 v77（用户 2026-10-22）：「新建旅程那里不是有题图吗？
+             为什么这里没有增加题图的功能呢？」
+             ⇒ 空题图这块不再是死图：**点它就打开编辑浮层去选题图**
+                （浮层里有 16:9 的选区，见 `FbTripNewSheet.coverPicker`）。
+                不改文案的话用户根本不知道这里能点，所以顺手把
+                「这趟旅程还没设题图」改成「点这里加一张」。 */
          Column({ space: 6 }) {
            Image($r('app.media.fb_ic_trips'))
              .width(34)
@@ -775,11 +805,25 @@ export struct FbTripDetailPage {
            Text('这趟旅程还没设题图')
              .fontSize(FbMetric.fontTiny)
              .fontColor('#A8988A')
+            if (this.detail !== null) {
+              Text('点这里加一张')
+                .fontSize(FbMetric.fontTiny)
+                .fontColor(this.accent)
+                .padding({ left: 10, right: 10, top: 3, bottom: 3 })
+                .backgroundColor(fbAlpha(this.accent, 0.1))
+                .borderRadius(FbMetric.radiusPill)
+            }
          }
          .width('100%')
          .height('100%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#F1E7D6')
+          .onClick((): void => {
+            // 还没取到本体的不给点（那时浮层里没数据可编辑）
+            if (this.detail !== null) {
+              this.editOpen = true;
+            }
+          })
        }
      }
      .width('100%')
@@ -1125,26 +1169,27 @@ export struct FbTripDetailPage {
          .width('100%')
        }

-        // ⑤ 出发地 → 到达地
+        /* ⑤ 出发地 → 到达地
+           🔴 v77（用户 2026-10-22）：「现在下面的详情，也就是行程详情里面，还是
+              显示不全。比如地址，从哪到哪，如果地址特别长，就显示不全了。」
+              ⚠️ 原来是一条 `Row({space:5}) { 出发地; →; 到达地 }`，三段挤在一行：
+                 两个地址各 `maxLines(1)` + `Ellipsis`，落到「青岛市市南区香港中路…
+                 浦东国际机场 T2」这种长度时，用户只看得到前半截。
+              ⇒ 改成**上下两行**（「从」「到」各一行），各自 `maxLines(2)` 且
+                 允许整段铺开。地址长就把卡片撑高 —— 详情页本来就是往下滚的瀑布，
+                 高度不是稀缺资源，"看不全"才是。
+              ⚠️ 两行都空才整块不显示（只填了一头也照样显示，不要因为缺一头就全藏掉）。 */
        if (n.fromPlace !== '' || n.toPlace !== '') {
-          Row({ space: 5 }) {
-            Text(n.fromPlace !== '' ? n.fromPlace : '—')
-              .fontSize(FbMetric.fontTiny)
-              .fontColor(FbColors.ink)
-              .maxLines(1)
-              .textOverflow({ overflow: TextOverflow.Ellipsis })
-            Text('→')
-              .fontSize(FbMetric.fontTiny)
-              .fontColor(FbColors.faint)
-            Text(n.toPlace !== '' ? n.toPlace : '—')
-              .fontSize(FbMetric.fontTiny)
-              .fontColor(FbColors.ink)
-              .maxLines(1)
-              .textOverflow({ overflow: TextOverflow.Ellipsis })
-              .layoutWeight(1)
+          Column({ space: 4 }) {
+            if (n.fromPlace !== '') {
+              this.placeLine('从', n.fromPlace)
+            }
+            if (n.toPlace !== '') {
+              this.placeLine('到', n.toPlace)
+            }
          }
          .width('100%')
-          .alignItems(VerticalAlign.Center)
+          .padding({ top: 1, bottom: 1 })
        }

        // ⑥ 详细说明
@@ -1283,6 +1328,32 @@ export struct FbTripDetailPage {
    .margin({ bottom: 10 })
  }

+  /**
+   * 一行「从 / 到」地点（`tag` + 地址）。
+   *
+   * 🔴 v77：长地址**不许截断** —— 这是用户点名的那条「地址特别长就显示不全」。
+   *    ⇒ 不写 `maxLines` + 不写 `Ellipsis`：`Text` 默认整段换行，卡片跟着变高。
+   *    ⚠️ 标签用固定宽度（16vp）：两行的地址左边缘才能对齐，看起来像一张表。
+   */
+  @Builder
+  placeLine(tag: string, place: string) {
+    Row({ space: 6 }) {
+      Text(tag)
+        .fontSize(10)
+        .fontColor(FbColors.faint)
+        .textAlign(TextAlign.Center)
+        .width(16)
+      Text(place)
+        .fontSize(FbMetric.fontTiny)
+        .fontColor(FbColors.ink)
+        .lineHeight(18)
+        .layoutWeight(1)
+    }
+    .width('100%')
+    // ⚠️ `Top` 而不是 `Center`：地址换到第二行时，标签要贴着第一行，不要吊在中间
+    .alignItems(VerticalAlign.Top)
+  }
+
  /**
   * 照片查看器（全屏大图 + 左右滑翻页）。
   *
@@ -73,10 +73,6 @@ export struct FbTripsPage {
   *    「新建旅程啊…这些东西都还没完成」）。现在接上了。
   */
  @Local newOpen: boolean = false;
-  /** 正在编辑的旅程（0 = 新建）。点卡片的「编辑」用 */
-  @Local editingId: number = 0;
-  @Local editingTitle: string = '';
-  @Local editingSummary: string = '';
  /** 题图加载失败集合（一张图坏了不该反复重试，会让列表一直闪） */
  @Local coverFailedIds: number[] = [];

@@ -223,11 +219,11 @@ export struct FbTripsPage {
              bg: this.accent,
              icon: $r('app.media.fb_ic_plus'),
              /* 🔴 v65：接上回调。原来这颗按钮**没有 `onTap`** —— 纯摆设，
-                 点了什么都不发生（用户报的"新建旅程没完成"就是这条）。 */
+                 点了什么都不发生（用户报的"新建旅程没完成"就是这条）。
+                 ⚠️ v77：列表页只做**新建**（`editingId` 走默认值 0）。
+                    改旅程统一在详情页点「编辑」—— 那边才带着题图与公开状态，
+                    列表页没有这些数据，硬开一个"半套编辑"只会把题图冲掉。 */
              onTap: (): void => {
-                this.editingId = 0;
-                this.editingTitle = '';
-                this.editingSummary = '';
                this.newOpen = true;
              }
            })
@@ -317,13 +313,10 @@ export struct FbTripsPage {
          .transition(fbSheetTransition())
      }

-      // ---- 新建 / 编辑旅程浮层（v65）----
+      // ---- 新建旅程浮层（v65；v77 起列表页只新建，编辑在详情页）----
      if (this.newOpen) {
        FbTripNewSheet({
          accent: this.accent,
-          editingId: this.editingId,
-          editingTitle: this.editingTitle,
-          editingSummary: this.editingSummary,
          onClose: (): void => {
            this.newOpen = false;
          },
@@ -430,14 +423,28 @@ export struct FbTripsPage {

      // ---- 图下面的信息区（挤占问题消失，能放的都放进来）----
      Column({ space: 6 }) {
-        // 标题
-        Text(t.title)
-          .fontSize(FbMetric.fontTitle)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(FbColors.ink)
-          .maxLines(2)
-          .textOverflow({ overflow: TextOverflow.Ellipsis })
-          .width('100%')
+        /* 标题 + 右侧一个 › 提示"整张卡点得进去"。
+           🔴 v77（用户 2026-10-22）：「列表页面里面的「看行程」和「编辑」，
+              我建议都不要了。因为点进去之后会有编辑，直接点进去看行程就可以。」
+              ⇒ 卡尾那两颗按钮**整行删掉**（编辑挪进详情页了，见 `headBar`）；
+                 但"能点进去"这件事还得让人看得出来，所以在标题行尾留一个
+                 右向箭头 —— 它只是**指示**，不带 onClick（整卡已经可点）。 */
+        Row({ space: 6 }) {
+          Text(t.title)
+            .fontSize(FbMetric.fontTitle)
+            .fontWeight(FontWeight.Medium)
+            .fontColor(FbColors.ink)
+            .maxLines(2)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+            .layoutWeight(1)
+          Image($r('app.media.fb_ic_forward'))
+            .width(12)
+            .height(12)
+            .renderMode(ImageRenderMode.Template)
+            .colorFilter(fbTint(FbTint.faint))
+        }
+        .width('100%')
+        .alignItems(VerticalAlign.Center)

        // 时间（单独一行 —— 城市改成 chip 之后不能再挤在同一行里抢宽度）
        if (t.dateRange !== '') {
@@ -497,36 +504,6 @@ export struct FbTripsPage {
            .width('100%')
            .lineHeight(18)
        }
-
-        // 卡尾：进详情 + 编辑
-        Row({ space: 12 }) {
-          /* 🔴 这颗「看行程」是**主要入口**，必须自己带 onClick（v66 真机踩过：
-             屏幕上写着"查看行程"却是纯文字，点它什么都不发生）。 */
-          Text('看行程')
-            .fontSize(FbMetric.fontSmall)
-            .fontColor(this.accent)
-            .padding({ left: 6, right: 12, top: 8, bottom: 6 })
-            .onClick((): void => {
-              this.openDetail(t);
-            })
-          Column().layoutWeight(1)
-          Text('编辑')
-            .fontSize(FbMetric.fontTiny)
-            .fontColor(FbColors.muted)
-            .padding({ left: 10, right: 10, top: 4, bottom: 4 })
-            .backgroundColor(FbColors.inputBg)
-            .borderRadius(FbMetric.radiusPill)
-            .onClick((): void => {
-              this.openEdit(t);
-            })
-          Image($r('app.media.fb_ic_forward'))
-            .width(12)
-            .height(12)
-            .renderMode(ImageRenderMode.Template)
-            .colorFilter(fbTint(FbTint.faint))
-        }
-        .width('100%')
-        .alignItems(VerticalAlign.Center)
      }
      .width('100%')
      .padding(FbMetric.cardPad)
@@ -538,9 +515,10 @@ export struct FbTripsPage {
    .clip(true)
    .alignItems(HorizontalAlign.Start)
    .onClick((): void => {
-      /* 整卡可点（比只点那行小字好按得多）。⚠️ 卡里的「编辑」自己带 onClick，
-         点它会冒泡到这里吗？ArkUI 的 onClick 不冒泡到父容器（子组件消费掉），
-         所以「编辑」不会误进详情 —— 但两者的热区都在卡内，别把编辑挪出去。 */
+      /* 整卡可点 = 唯一的入口（v77 起卡尾的「看行程」「编辑」都删了）。
+         ⚠️ 卡里**不再有**任何自带 onClick 的子元素，所以不存在"点小按钮
+            误触发进详情"的问题；将来要在卡上加动作按钮，记得它不会冒泡
+            （ArkUI 的子节点 onClick 会消费掉事件）。 */
      this.openDetail(t);
    })
  }
@@ -560,14 +538,13 @@ export struct FbTripsPage {
    this.app.switchModule('__trip_detail');
  }

-  /** 打开编辑浮层（预填当前值） */
-  private openEdit(t: FbTripItem): void {
-    this.editingId = t.id;
-    this.editingTitle = t.title;
-    this.editingSummary = t.summary;
-    this.newOpen = true;
-  }
-
+  /**
+   * 记一张坏掉的题图（一张图坏了不该在每次重渲染时反复重试）。
+   *
+   * ⚠️ v77：原来的 `openEdit()` 已删除 —— 列表上不再有「编辑」入口，
+   *    改旅程统一进详情页点「编辑」（带题图的那套表单只在详情页打开，
+   *    因为它还带着 `editingCoverKey`）。
+   */
  private markCoverFailed(id: number): void {
    if (this.coverFailedIds.indexOf(id) < 0) {
      this.coverFailedIds = this.coverFailedIds.concat([id]);