fix: 修复工作流工具执行详情的节点顺序混乱的问题

[wangliang181230]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[Copilot]

Pull request overview

该 PR 旨在修复「工作流工具执行详情」中子节点展示顺序混乱的问题，通过在前端渲染时对 details 的节点集合按 index 字段排序，确保执行详情按预期顺序展示。

Changes:

• 将 data.details 由直接遍历改为 Object.values(...) 后再按 index 排序渲染子节点详情
• 调整 ToolWorkflowLib 场景下的 ExecutionDetailCard 递归渲染方式（用于展示嵌套的执行详情）

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

Suppressed comments (1)

ui/src/components/execution-detail-card/index.vue:1419

• Object.values(data.details ?? {}) discards the original keys of data.details. If data.details is an object keyed by a stable identifier (e.g., node id), the current :key="cLoop?.index ?? cIndex" falls back to the post-sort array index (cIndex), which can cause Vue to reuse/mis-associate child component state when the sort order changes. Preserve the original entry key by iterating Object.entries(...) and using that key for :key.

                <template
                  v-for="(cLoop, cIndex) in Object.values(data.details ?? {}).sort(
                    (a: any, b: any) => (a?.index ?? 0) - (b?.index ?? 0),
                  )"
                  :key="cLoop?.index ?? cIndex"

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

Suppressed comments (2)

ui/src/components/execution-detail-card/index.vue:1420

• 这里对 data.details 做了排序后渲染，但 key 仍可能回退到 cIndex（列表下标）。当排序结果变化时，下标 key 会导致组件复用错位。details 里后端已提供 runtime_node_id/node_id 等稳定字段，建议用它们作为 key（index 可作为次级回退）。

                  v-for="(cLoop, cIndex) in Object.values(
                    data.details ?? {}).sort(
                      (a: any, b: any) => (a?.index ?? 0) - (b?.index ?? 0)
                  )"
                  :key="cLoop?.index ?? cIndex"

ui/src/components/execution-detail-card/index.vue:1139

• 这里对 loop 节点详情做了 sort（按 cLoop.index），但 v-for 仍然使用数组下标 cIndex 作为 key。排序/重排时用下标作为 key 会导致 Vue 复用错误的子组件实例，出现渲染顺序/内容错位（正好与“节点顺序混乱”现象吻合）。建议使用稳定且唯一的标识作为 key（优先 runtime_node_id，其次 node_id / index）。

This issue also appears on line 1416 of the same file.

                  v-for="(cLoop, cIndex) in Object.values(
                    data.loop_node_data?.[currentLoopNode] || []).sort(
                      (x: any, y: any) => (x.index || 0) - (y.index || 0)
                  )"
                  :key="cIndex"

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

Suppressed comments (1)

ui/src/components/execution-detail-card/index.vue:1139

• 这里列表经过 sort 之后仍然使用 cIndex 作为 key，会导致排序/切换 currentLoopNode 时组件实例复用错误（ExecutionDetailCard 内部有本地 state），可能出现节点详情显示错乱。建议改为使用稳定且唯一的字段（如 index）作为 key，和下方 data.details 的实现保持一致。

                  v-for="(cLoop, cIndex) in Object.values(
                    data.loop_node_data?.[currentLoopNode] || []).sort(
                      (x: any, y: any) => (x?.index || 0) - (y?.index || 0)
                  )"
                  :key="cLoop?.index ?? cIndex"

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.