feat(flowchart): example and documentation for adding Flowchart component#4240
Open
James-9696 wants to merge 1 commit into
Open
feat(flowchart): example and documentation for adding Flowchart component#4240James-9696 wants to merge 1 commit into
James-9696 wants to merge 1 commit into
Conversation
WalkthroughThis PR overhauls the Flowchart demo documentation and examples: the API schema gains fully typed interfaces, config/data/methods/slots documentation; mobile-first demos move chart state from module constants into component ChangesFlowchart API Documentation
Mobile-First Flowchart Demo Refactor
PC Flowchart Demo Additions and Simplification
Estimated code review effort: 4 (Complex) | ~75 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant DynamicUpdateVue as dynamic-update.vue
participant ChartData as reactive data
participant TinyFlowchart
User->>DynamicUpdateVue: click "审批通过" (approve)
DynamicUpdateVue->>ChartData: update node status/items
DynamicUpdateVue->>ChartData: replace links array with updated info.status
DynamicUpdateVue->>DynamicUpdateVue: increment chartKey
DynamicUpdateVue->>TinyFlowchart: re-render with :key="chartKey"
TinyFlowchart-->>User: updated chart display
User->>DynamicUpdateVue: click "重置流程" (reset)
DynamicUpdateVue->>ChartData: restore nodes/links from initial clones
DynamicUpdateVue->>TinyFlowchart: re-render with incremented chartKey
TinyFlowchart-->>User: reset chart display
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
🧹 Nitpick comments (8)
examples/sites/demos/mobile-first/app/flowchart/webdoc/flowchart.js (1)
6-115: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueInconsistent object-key quoting style.
New/updated entries quote keys (
'demoId','name','desc','codeFiles'), while the untouchedlink-pathentry (Lines 94-104) in the same array uses unquoted keys. Consider aligning quoting style across all entries in this file for consistency.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/sites/demos/mobile-first/app/flowchart/webdoc/flowchart.js` around lines 6 - 115, The array entries in flowchart.js use mixed object-key quoting, with the new demos using quoted keys while the link-path entry still uses unquoted keys. Update the linkPath-related object in this demo list so its keys match the same quoting style used throughout the file, keeping the structure consistent with neighboring entries like the demoId/name/desc/codeFiles objects.examples/sites/demos/pc/app/flowchart/slots-composition-api.vue (1)
46-93: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueMinor:
getNodeItemsis declared beforedata, relying on hoisting.
getNodeItems(Line 64) referencesdata.nodes(Line 69) which is declared afterward. This works correctly because the function is only invoked later during render, but declaringdatabefore the function that uses it would improve readability and avoid relying on hoisting semantics.♻️ Suggested reorder
-function getNodeItems(nodeName) { - const node = data.nodes.find((n) => n.name === nodeName) - return node?.info?.items || [] -} - -const data = reactive({ +const data = reactive({ nodes: [ ... ], links: [...] }) + +function getNodeItems(nodeName) { + const node = data.nodes.find((n) => n.name === nodeName) + return node?.info?.items || [] +}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/sites/demos/pc/app/flowchart/slots-composition-api.vue` around lines 46 - 93, `getNodeItems` currently reads from `data.nodes` before `data` is declared, relying on hoisting and reducing readability. Reorder the `script setup` in `slots-composition-api.vue` so the `reactive` `data` definition comes before `getNodeItems`, keeping the same logic but making the dependency explicit and easier to follow.examples/sites/demos/pc/app/flowchart/other-composition-api.vue (1)
60-60: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuePrefer
.includes()over the bitwise~indexOfidiom for readability.This is example/tutorial code; the obscure bitwise-NOT trick is harder to follow than
.includes().♻️ Use `.includes()`
-chartConfig.checkItemStatus = (item) => ~['已转审', '已同意'].indexOf(item.status) +chartConfig.checkItemStatus = (item) => ['已转审', '已同意'].includes(item.status)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/sites/demos/pc/app/flowchart/other-composition-api.vue` at line 60, The status check in chartConfig.checkItemStatus uses the bitwise `~indexOf` pattern, which is harder to read in tutorial code. Update the check to use an explicit array membership test with `.includes()` on the status list, keeping the same logic in the `checkItemStatus` function while making the intent clear.examples/sites/demos/pc/app/flowchart/custom-link-style-composition-api.vue (1)
83-101: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winCache the canvas element instead of querying the DOM on every
styleLinkcall.
document.querySelectorruns per-link, per-redraw, and redraws are additionally forced every 80ms via therefreshKey2interval — this repeatedly re-queries the DOM on a hot path.♻️ Cache canvas ref once
+const canvasEl2 = ref(null) + chartConfig2.styleLink = (ctx, afterLink) => { const link = afterLink.raw const key = `${link.from}-${link.to}` - const canvas = document.querySelector('.example2-wrapper .tiny-flow-chart__canvas') + const canvas = canvasEl2.value || (canvasEl2.value = document.querySelector('.example2-wrapper .tiny-flow-chart__canvas'))🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/sites/demos/pc/app/flowchart/custom-link-style-composition-api.vue` around lines 83 - 101, The styleLink handler in custom-link-style-composition-api.vue is doing a DOM query on every link render, which is on a hot path and gets amplified by the refreshKey2 redraw interval. Cache the canvas element once (for example via a ref or a one-time lookup tied to the example2 wrapper) and have chartConfig2.styleLink reuse that cached value instead of calling document.querySelector repeatedly; keep the logic in styleLink and any initialization code that sets up the canvas cache easy to locate by the chartConfig2 and styleLink symbols.examples/sites/demos/pc/app/flowchart/person-list.vue (1)
12-16: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd
altto the avatar<img>for accessibility.Same gap as in
person-list-composition-api.vue.♿ Proposed fix
<img v-if="cfg.headUrl" :src="cfg.headUrl" + :alt="item.name" :style="{ width: cfg.headSize + 'px', height: cfg.headSize + 'px' }" />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/sites/demos/pc/app/flowchart/person-list.vue` around lines 12 - 16, The avatar image in person-list.vue is missing an alt attribute, so update the `<img>` rendered by the `cfg.headUrl` check to include accessible alt text. Mirror the approach used in `person-list-composition-api.vue`, and keep the change scoped to the avatar image inside this template block.examples/sites/demos/pc/app/flowchart/person-list-composition-api.vue (1)
12-16: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd
altto the avatar<img>for accessibility.♿ Proposed fix
<img v-if="cfg.headUrl" :src="cfg.headUrl" + :alt="item.name" :style="{ width: cfg.headSize + 'px', height: cfg.headSize + 'px' }" />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/sites/demos/pc/app/flowchart/person-list-composition-api.vue` around lines 12 - 16, The avatar image in the person list template is missing an alt attribute, so update the <img> used with cfg.headUrl in person-list-composition-api.vue to include a meaningful alt text. Keep the change localized to the avatar rendering inside the template and ensure the text reflects the person/avatar content rather than being empty unless the image is purely decorative.examples/sites/demos/mobile-first/app/flowchart/holistic-fork.vue (1)
54-99: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate
afterNodeCoupleresolution logic across the twolinkPathmethods.The two
linkPathentries (lines 54-76 and 77-98) are nearly identical — they only differ in thefiltertarget and a ±10 y-offset. Consider extracting the shared node-couple resolution and curve-building logic into a helper function.♻️ Proposed refactor
+function resolveCouple(afterLink, afterNodes) { + return [afterLink.raw.from, afterLink.raw.to].map(function (name) { + return afterNodes.find(function (afterNode) { + return afterNode.raw.name === name + }) + }) +} + linkPath: [ { filter: { from: '2', to: '0' }, method({ afterLink, afterNodes }) { - const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map(function (name) { - return afterNodes.find(function (afterNode) { - return afterNode.raw.name === name - }) - }) + const afterNodeCouple = resolveCouple(afterLink, afterNodes) const f = { x: afterNodeCouple[0].x + afterNodeCouple[0].width, y: afterNodeCouple[0].y + afterNodeCouple[0].height / 2 - 10 } ...🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/sites/demos/mobile-first/app/flowchart/holistic-fork.vue` around lines 54 - 99, The two linkPath.method implementations duplicate the same afterNodeCouple lookup and path construction logic, differing only by the filter target and a small y offset. Extract the shared resolution/curve-building into a helper used by both methods in holistic-fork.vue, reusing the same afterLink and afterNodes flow while passing the offset as a parameter to keep the behavior unchanged.examples/sites/demos/mobile-first/app/flowchart/holistic.vue (1)
43-84: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winSame duplicate
afterNodeCouplepattern as inholistic-fork.vue.Both
linkPathmethods (lines 43-63 and 64-83) repeat the identical node-couple lookup. Same extraction opportunity applies here as in the siblingholistic-fork.vuedemo.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/sites/demos/mobile-first/app/flowchart/holistic.vue` around lines 43 - 84, The two `linkPath` methods in `holistic.vue` duplicate the same `afterNodeCouple` lookup logic used for each link filter, so extract that shared node-resolution pattern into a small helper within this component and reuse it in both methods. Keep the existing `afterLink`/`afterNodes` flow and use the helper to return the resolved source/target nodes before computing `f`, `t`, and the path.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@examples/sites/demos/apis/flowchart.js`:
- Around line 1343-1345: The Flowchart API types are out of sync with how the
callbacks are actually invoked. Update the interface and prop docs around
drawLink and styleHoverLink so their signatures match the real call sites:
drawLink should accept a single object argument with ctx, afterLink, and
afterNodes, and styleHoverLink should accept ctx, afterLink, and afterNodes as
separate parameters. Use the existing Flowchart props definitions to keep the
docs and typings consistent.
- Line 332: The flowchart demo mapping still uses the singular pcDemo value, so
the registered demo key will not resolve. Update the remaining pcDemo
assignments in the flowchart demo config to use the same key as the webdoc
registration, specifically changing the Flowchart demo entries in the relevant
mapping object from slot to slots so they match the demo registry.
In `@examples/sites/demos/mobile-first/app/flowchart/horizon.vue`:
- Around line 19-32: The chart status mapping in the horizon demo uses an
inconsistent label for the `chartConfig.status` entry keyed by `4`. Update the
`data()` setup in `horizon.vue` so the `chartConfig.status` object uses the
documented `fail` status for `4`, matching the sibling demos and the
`createConfig`/`TinyFlowchart` status conventions.
In `@examples/sites/demos/pc/app/flowchart/custom-link-style-composition-api.vue`:
- Around line 84-132: The `styleLink` documentation is stale and still describes
a style-object/single-argument API, but the renderless contract uses
`styleLink(ctx, afterLink, afterNodes)` and mutates the canvas context without
returning anything. Update the docs around `styleLink` to match the actual usage
in `chartConfig2.styleLink`, explicitly documenting the `ctx`, `afterLink`, and
`afterNodes` arguments and that the function is for canvas context mutation
rather than returning link styles.
In `@examples/sites/demos/pc/app/flowchart/dynamic-update-composition-api.vue`:
- Around line 86-97: The approval flow in the dynamic update composition API
leaves the final “流程完成” node stuck at ongoing because `approve()` always marks
the next node as status 2 and the `currentStep` guard in the same flow prevents
a later update. Update the logic around `approve()` and the
`data.nodes`/`currentStep` progression so that when the last approval is
reached, the final node is set to the complete status instead of ongoing, and
keep the intermediate `next.info.items` updates only for non-terminal nodes.
In `@examples/sites/demos/pc/app/flowchart/dynamic-update.vue`:
- Around line 94-104: The `approve()` flow in `dynamic-update.vue` leaves the
final node stuck in status 2 because `next.info.status` is always set to ongoing
when advancing `currentStep`. Update the logic around `this.currentStep++` and
the `next` node handling so the last node is marked complete (status 1) when it
is the final step, while preserving the ongoing status only for intermediate
nodes. Mirror the same conditional status handling used in the composition-api
variant.
In `@examples/sites/demos/pc/app/flowchart/event-handling-composition-api.vue`:
- Around line 27-48: The log panel state is never updated because `logs` is only
declared in the event-handling Composition API example and never written to by
`handleNodeClick`, `handleLinkClick`, or `handleBlankClick`. Update those
handlers to append a new log entry into `logs` for each click, using the
existing event data and keeping the `Modal.message` behavior if needed, so the
template can render real entries instead of always hitting the empty state.
In `@examples/sites/demos/pc/app/flowchart/event-handling.vue`:
- Around line 39-56: The event handlers in event-handling.vue are only showing
Modal.message output, so the logs panel bound to logs never receives entries.
Update handleNodeClick, handleLinkClick, and handleBlankClick to also append a
formatted message to this.logs (matching the pattern used in
event-handling-composition-api.vue) whenever a click occurs, so the panel
reflects the same events shown in the modal.
In `@examples/sites/demos/pc/app/flowchart/person-list.vue`:
- Line 6: The threshold check in person-list.vue is inconsistent with
person-list-composition-api.vue and the library’s valid() logic. Update the v-if
condition on node.info.items to use the same strict greater-than comparison as
the sibling demo and pc.vue’s arr.length > config.listThreshold, so both demo
variants match the shared semantics.
In `@examples/sites/demos/pc/app/flowchart/webdoc/flowchart.js`:
- Around line 119-132: The `other` demo’s `en-US` description has translation
mismatches in the `desc` content: update the `t1` bullet to match the `zh-CN`
meaning of one row height and fix the grammar in `en-US`, and correct the `l1`
bullet to use “one column wide” instead of “one columns wide.” Make these edits
in the `desc.en-US` string within the `other` demo object in `flowchart.js` so
the English copy aligns with the source text and reads naturally.
- Around line 105-118: The en-US description for the custom-link-style demo is
missing the standard paragraph wrapper used throughout this file. Update the
demo entry in flowchart.js so the en-US text for custom-link-style is wrapped in
<p>...</p>, matching the zh-CN description and the other demo entries; locate it
by the demoId custom-link-style and its desc field.
---
Nitpick comments:
In `@examples/sites/demos/mobile-first/app/flowchart/holistic-fork.vue`:
- Around line 54-99: The two linkPath.method implementations duplicate the same
afterNodeCouple lookup and path construction logic, differing only by the filter
target and a small y offset. Extract the shared resolution/curve-building into a
helper used by both methods in holistic-fork.vue, reusing the same afterLink and
afterNodes flow while passing the offset as a parameter to keep the behavior
unchanged.
In `@examples/sites/demos/mobile-first/app/flowchart/holistic.vue`:
- Around line 43-84: The two `linkPath` methods in `holistic.vue` duplicate the
same `afterNodeCouple` lookup logic used for each link filter, so extract that
shared node-resolution pattern into a small helper within this component and
reuse it in both methods. Keep the existing `afterLink`/`afterNodes` flow and
use the helper to return the resolved source/target nodes before computing `f`,
`t`, and the path.
In `@examples/sites/demos/mobile-first/app/flowchart/webdoc/flowchart.js`:
- Around line 6-115: The array entries in flowchart.js use mixed object-key
quoting, with the new demos using quoted keys while the link-path entry still
uses unquoted keys. Update the linkPath-related object in this demo list so its
keys match the same quoting style used throughout the file, keeping the
structure consistent with neighboring entries like the
demoId/name/desc/codeFiles objects.
In `@examples/sites/demos/pc/app/flowchart/custom-link-style-composition-api.vue`:
- Around line 83-101: The styleLink handler in
custom-link-style-composition-api.vue is doing a DOM query on every link render,
which is on a hot path and gets amplified by the refreshKey2 redraw interval.
Cache the canvas element once (for example via a ref or a one-time lookup tied
to the example2 wrapper) and have chartConfig2.styleLink reuse that cached value
instead of calling document.querySelector repeatedly; keep the logic in
styleLink and any initialization code that sets up the canvas cache easy to
locate by the chartConfig2 and styleLink symbols.
In `@examples/sites/demos/pc/app/flowchart/other-composition-api.vue`:
- Line 60: The status check in chartConfig.checkItemStatus uses the bitwise
`~indexOf` pattern, which is harder to read in tutorial code. Update the check
to use an explicit array membership test with `.includes()` on the status list,
keeping the same logic in the `checkItemStatus` function while making the intent
clear.
In `@examples/sites/demos/pc/app/flowchart/person-list-composition-api.vue`:
- Around line 12-16: The avatar image in the person list template is missing an
alt attribute, so update the <img> used with cfg.headUrl in
person-list-composition-api.vue to include a meaningful alt text. Keep the
change localized to the avatar rendering inside the template and ensure the text
reflects the person/avatar content rather than being empty unless the image is
purely decorative.
In `@examples/sites/demos/pc/app/flowchart/person-list.vue`:
- Around line 12-16: The avatar image in person-list.vue is missing an alt
attribute, so update the `<img>` rendered by the `cfg.headUrl` check to include
accessible alt text. Mirror the approach used in
`person-list-composition-api.vue`, and keep the change scoped to the avatar
image inside this template block.
In `@examples/sites/demos/pc/app/flowchart/slots-composition-api.vue`:
- Around line 46-93: `getNodeItems` currently reads from `data.nodes` before
`data` is declared, relying on hoisting and reducing readability. Reorder the
`script setup` in `slots-composition-api.vue` so the `reactive` `data`
definition comes before `getNodeItems`, keeping the same logic but making the
dependency explicit and easier to follow.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 7722ad4a-e5d3-4ff1-ae85-8c02753c2fb2
📒 Files selected for processing (31)
examples/sites/demos/apis/flowchart.jsexamples/sites/demos/mobile-first/app/flowchart/dot-horizon-async.vueexamples/sites/demos/mobile-first/app/flowchart/dot-horizon.vueexamples/sites/demos/mobile-first/app/flowchart/dot-vertical-async.vueexamples/sites/demos/mobile-first/app/flowchart/dot-vertical.vueexamples/sites/demos/mobile-first/app/flowchart/holistic-fork.vueexamples/sites/demos/mobile-first/app/flowchart/holistic.vueexamples/sites/demos/mobile-first/app/flowchart/horizon.vueexamples/sites/demos/mobile-first/app/flowchart/node-size.vueexamples/sites/demos/mobile-first/app/flowchart/webdoc/flowchart.jsexamples/sites/demos/pc/app/flowchart/basic-usage-composition-api.vueexamples/sites/demos/pc/app/flowchart/basic-usage.vueexamples/sites/demos/pc/app/flowchart/branch-flow-composition-api.vueexamples/sites/demos/pc/app/flowchart/branch-flow.vueexamples/sites/demos/pc/app/flowchart/custom-link-style-composition-api.vueexamples/sites/demos/pc/app/flowchart/custom-link-style.vueexamples/sites/demos/pc/app/flowchart/custom-style-composition-api.vueexamples/sites/demos/pc/app/flowchart/custom-style.vueexamples/sites/demos/pc/app/flowchart/dynamic-update-composition-api.vueexamples/sites/demos/pc/app/flowchart/dynamic-update.vueexamples/sites/demos/pc/app/flowchart/event-handling-composition-api.vueexamples/sites/demos/pc/app/flowchart/event-handling.vueexamples/sites/demos/pc/app/flowchart/other-composition-api.vueexamples/sites/demos/pc/app/flowchart/other.spec.tsexamples/sites/demos/pc/app/flowchart/other.vueexamples/sites/demos/pc/app/flowchart/person-list-composition-api.vueexamples/sites/demos/pc/app/flowchart/person-list.vueexamples/sites/demos/pc/app/flowchart/slots-composition-api.vueexamples/sites/demos/pc/app/flowchart/slots.spec.tsexamples/sites/demos/pc/app/flowchart/slots.vueexamples/sites/demos/pc/app/flowchart/webdoc/flowchart.js
💤 Files with no reviewable changes (1)
- examples/sites/demos/pc/app/flowchart/slots.spec.ts
| 'en-US': 'Size of status icons in the PC personnel list (pixels)' | ||
| }, | ||
| mode: ['pc'], | ||
| pcDemo: 'slot' |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Confirm the registered demo name(s) for the slots demo in the PC webdoc
fd 'flowchart.js' examples/sites/demos/pc/app/flowchart/webdoc --exec cat -n {}
fd -a 'slot*.vue' examples/sites/demos/pc/app/flowchartRepository: opentiny/tiny-vue
Length of output: 13792
🏁 Script executed:
#!/bin/bash
sed -n '300,380p' examples/sites/demos/apis/flowchart.js
rg -n "pcDemo: 'slot'|pcDemo: 'slots'|demoId: 'slots'|codeFiles: \\['slots\\.vue'\\]" examples/sites/demos/apis/flowchart.js examples/sites/demos/pc/app/flowchart/webdoc -nRepository: opentiny/tiny-vue
Length of output: 3397
🏁 Script executed:
#!/bin/bash
rg -n "demoId: 'slot'|pcDemo: 'slot'|codeFiles: \\['slot\\.vue'\\]|id: 'slot'|slots\\.vue" examples/sites/demos -g '!**/node_modules/**'Repository: opentiny/tiny-vue
Length of output: 6127
Use slots for the flowchart demo keys. The flowchart PC webdoc registers this demo as slots, so the remaining pcDemo: 'slot' entries here won't resolve. Update them to pcDemo: 'slots'.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/sites/demos/apis/flowchart.js` at line 332, The flowchart demo
mapping still uses the singular pcDemo value, so the registered demo key will
not resolve. Update the remaining pcDemo assignments in the flowchart demo
config to use the same key as the webdoc registration, specifically changing the
Flowchart demo entries in the relevant mapping object from slot to slots so they
match the demo registry.
Comment on lines
+1343
to
+1345
| drawLink: ((ctx: CanvasRenderingContext2D, link: IFlowchartLink) => void) | null | ||
| styleLink: ((link: IFlowchartLink) => object) | null | ||
| styleHoverLink: ((link: IFlowchartLink) => object) | null |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file='examples/sites/demos/apis/flowchart.js'
echo '--- relevant declarations/docs ---'
sed -n '110,140p' "$file"
echo
sed -n '520,540p' "$file"
echo
sed -n '1335,1355p' "$file"
echo
echo '--- drawLink/styleHoverLink occurrences ---'
rg -n "drawLink|styleHoverLink" "$file"Repository: opentiny/tiny-vue
Length of output: 2823
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file='examples/sites/demos/apis/flowchart.js'
echo '--- exact call sites in target file ---'
rg -n -A 4 -B 4 "config\.drawLink|config\.styleHoverLink" "$file"
echo
echo '--- broader repo search for related invocation patterns ---'
rg -n -A 3 -B 3 "drawLink\s*\(|styleHoverLink\s*\(" examples/sites/demos/apisRepository: opentiny/tiny-vue
Length of output: 849
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- search repo for drawLink/styleHoverLink implementations and invocations ---'
rg -n -A 4 -B 4 "drawLink|styleHoverLink" . \
-g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' -g '!**/coverage/**'Repository: opentiny/tiny-vue
Length of output: 12585
Align the drawLink and styleHoverLink signatures
drawLink is invoked with a single object arg ({ ctx, afterLink, afterNodes }), and styleHoverLink receives (ctx, afterLink, afterNodes). Update the interface and prop docs at examples/sites/demos/apis/flowchart.js to match.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/sites/demos/apis/flowchart.js` around lines 1343 - 1345, The
Flowchart API types are out of sync with how the callbacks are actually invoked.
Update the interface and prop docs around drawLink and styleHoverLink so their
signatures match the real call sites: drawLink should accept a single object
argument with ctx, afterLink, and afterNodes, and styleHoverLink should accept
ctx, afterLink, and afterNodes as separate parameters. Use the existing
Flowchart props definitions to keep the docs and typings consistent.
Comment on lines
19
to
+32
| export default { | ||
| components: { | ||
| TinyFlowchart | ||
| }, | ||
| components: { TinyFlowchart }, | ||
| data() { | ||
| const chartConfig = createConfig() | ||
| chartConfig.width = 0 | ||
| chartConfig.height = 0 | ||
| chartConfig.gap = 24 | ||
| chartConfig.padding = 12 | ||
| chartConfig.prior = 'vertical' | ||
| chartConfig.align = 'center' | ||
| chartConfig.status = { 1: 'completed', 2: 'ongoing', 3: 'not-started', 4: 'ongoing-fail' } | ||
| chartConfig.colors = { 1: '#00a874', 2: '#0067d1', 3: '#999', 4: '#eb171f' } | ||
| chartConfig.ongoingBackgroundColor = '#f3f8fe' | ||
| chartConfig.popoverPlacement = 'bottom' |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🌐 Web query:
OpenTiny Vue mobile-first flowchart config status valid values completed ongoing not-started fail
💡 Result:
In the OpenTiny Vue flowchart component, the status of nodes is managed using numeric status codes rather than string labels [1][2]. The valid status values and their corresponding meanings are as follows [1][2]: 1: Completed (已完成) 2: Ongoing/In-progress (进行中) 3: Not-started/Waiting (未开始/等待) 4: Failed/Exception (失败/异常) These status codes are used to drive the visual representation of the nodes, and you can typically map these to specific colors within the component's configuration object (e.g., via a colors property like { 1: '#1890ff',... }) [1]. When implementing this, ensure you handle the flowchart configuration appropriately—such as using markRaw or toRaw for the chart data and configuration objects if they are reactive—to prevent potential performance issues caused by unnecessary proxy wrapping during Canvas rendering [1].
Citations:
Use fail for status 4 here. ongoing-fail is inconsistent with the sibling demos and the documented status labels, so a future status: 4 node would map to the wrong state.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/sites/demos/mobile-first/app/flowchart/horizon.vue` around lines 19
- 32, The chart status mapping in the horizon demo uses an inconsistent label
for the `chartConfig.status` entry keyed by `4`. Update the `data()` setup in
`horizon.vue` so the `chartConfig.status` object uses the documented `fail`
status for `4`, matching the sibling demos and the
`createConfig`/`TinyFlowchart` status conventions.
Comment on lines
+84
to
+132
| chartConfig2.styleLink = (ctx, afterLink) => { | ||
| const link = afterLink.raw | ||
| const key = `${link.from}-${link.to}` | ||
|
|
||
| // 关键：只查询示例2 wrapper 内的 canvas，避免和示例1冲突 | ||
| const canvas = document.querySelector('.example2-wrapper .tiny-flow-chart__canvas') | ||
| if (!canvas) { | ||
| const colorMap = { 1: '#52c41a', 2: '#1890ff', 3: '#d9d9d9', 4: '#ff4d4f' } | ||
| ctx.strokeStyle = colorMap[link.info.status] || '#999' | ||
| ctx.lineWidth = link.info.status === 2 ? 3 : 2 | ||
| if (link.info.style !== 'solid') { | ||
| ctx.setLineDash([4, 4]) | ||
| } else { | ||
| ctx.setLineDash([]) | ||
| } | ||
| return | ||
| } | ||
|
|
||
| const rect = canvas.getBoundingClientRect() | ||
| const mx = mousePos2.value.x - rect.left | ||
| const my = mousePos2.value.y - rect.top | ||
|
|
||
| const nodeY = 97.5 | ||
| const nodeX = { a: 180, b: 420, c: 660, d: 900 } | ||
| let isHover = false | ||
|
|
||
| if (Math.abs(my - nodeY) <= 25) { | ||
| if (key === 'a-b' && mx >= nodeX.a && mx <= nodeX.b) isHover = true | ||
| else if (key === 'b-c' && mx >= nodeX.b && mx <= nodeX.c) isHover = true | ||
| else if (key === 'c-d' && mx >= nodeX.c && mx <= nodeX.d) isHover = true | ||
| } | ||
|
|
||
| if (isHover) { | ||
| ctx.setLineDash([]) | ||
| ctx.strokeStyle = '#faacff' | ||
| ctx.lineWidth = 8 | ||
| ctx.shadowColor = 'rgba(250, 173, 20, 0.6)' | ||
| ctx.shadowBlur = 20 | ||
| } else { | ||
| const colorMap = { 1: '#52c41a', 2: '#1890ff', 3: '#d9d9d9', 4: '#ff4d4f' } | ||
| ctx.strokeStyle = colorMap[link.info.status] || '#999' | ||
| ctx.lineWidth = link.info.status === 2 ? 3 : 2 | ||
| if (link.info.style !== 'solid') { | ||
| ctx.setLineDash([4, 4]) | ||
| } else { | ||
| ctx.setLineDash([]) | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Find all styleLink mentions and likely implementation files
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' "styleLink" .
# Show candidate files containing the related demo names
fd -a "branch-flow\.vue|branch-flow-composition-api\.vue|custom-link-style\.vue|custom-link-style-composition-api\.vue" .
# If a renderless or interface file exists, list it too
fd -a "flowchart|IFlowchart|renderless" .Repository: opentiny/tiny-vue
Length of output: 4899
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Search for the exact documented signature and the actual callback shape
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' \
"styleLink:\s*\(|styleLink\b.*IFlowchartLink|IFlowchartLink|afterLink|setLineDash|strokeStyle" .
# Inspect the four demo files mentioned in the review comment if present
for f in \
"examples/sites/demos/pc/app/flowchart/custom-link-style-composition-api.vue" \
"examples/sites/demos/pc/app/flowchart/branch-flow.vue" \
"examples/sites/demos/pc/app/flowchart/branch-flow-composition-api.vue" \
"examples/sites/demos/pc/app/flowchart/custom-link-style.vue"
do
if [ -f "$f" ]; then
echo "===== $f ====="
cat -n "$f" | sed -n '1,220p'
fi
doneRepository: opentiny/tiny-vue
Length of output: 49711
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "===== packages/renderless/src/flowchart/index.ts (styleDraw area) ====="
sed -n '148,166p' packages/renderless/src/flowchart/index.ts
echo "===== packages/renderless/types/flowchart.type.ts (styleLink types) ====="
sed -n '1,220p' packages/renderless/types/flowchart.type.ts
echo "===== packages/vue/src/flowchart/src/index.ts (config defaults/types if present) ====="
sed -n '1,120p' packages/vue/src/flowchart/src/index.ts
echo "===== examples/sites/demos/apis/flowchart.js (styleLink docs) ====="
sed -n '1336,1485p' examples/sites/demos/apis/flowchart.jsRepository: opentiny/tiny-vue
Length of output: 6224
🏁 Script executed:
#!/bin/bash
set -euo pipefail
wc -l packages/renderless/types/flowchart.type.ts
rg -n "styleLink" packages/renderless/types/flowchart.type.ts packages/renderless/src/flowchart/index.ts examples/sites/demos/apis/flowchart.js
sed -n '1,260p' packages/renderless/types/flowchart.type.tsRepository: opentiny/tiny-vue
Length of output: 570
Update styleLink docs to match the renderless contract styleLink(ctx, afterLink, afterNodes) mutates the canvas context and returns nothing, so examples/sites/demos/apis/flowchart.js:1344 is stale and should be changed from a single-arg style-object signature.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/sites/demos/pc/app/flowchart/custom-link-style-composition-api.vue`
around lines 84 - 132, The `styleLink` documentation is stale and still
describes a style-object/single-argument API, but the renderless contract uses
`styleLink(ctx, afterLink, afterNodes)` and mutates the canvas context without
returning anything. Update the docs around `styleLink` to match the actual usage
in `chartConfig2.styleLink`, explicitly documenting the `ctx`, `afterLink`, and
`afterNodes` arguments and that the function is for canvas context mutation
rather than returning link styles.
Comment on lines
+86
to
+97
| currentStep.value++ | ||
| if (currentStep.value < data.nodes.length) { | ||
| const next = data.nodes[currentStep.value] | ||
| next.info.status = 2 | ||
| if (next.info.items) { | ||
| next.info.items.forEach((it) => { | ||
| it.status = 2 | ||
| it.comment = '审批中' | ||
| }) | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Final "done" node never reaches "complete" status.
After the 3rd approve() call, currentStep becomes 3 and next = data.nodes[3] ("流程完成"/done) is set to status 2 (ongoing) on Line 89. The guard on Line 69 then blocks any further approve() calls (currentStep >= nodes.length - 1), so the "done" node is permanently stuck showing "ongoing" styling even though the entire flow has been approved.
🐛 Proposed fix
currentStep.value++
if (currentStep.value < data.nodes.length) {
const next = data.nodes[currentStep.value]
- next.info.status = 2
+ const isLastNode = currentStep.value === data.nodes.length - 1
+ next.info.status = isLastNode ? 1 : 2
if (next.info.items) {
next.info.items.forEach((it) => {
- it.status = 2
- it.comment = '审批中'
+ it.status = isLastNode ? 1 : 2
+ it.comment = isLastNode ? '已通过' : '审批中'
})
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| currentStep.value++ | |
| if (currentStep.value < data.nodes.length) { | |
| const next = data.nodes[currentStep.value] | |
| next.info.status = 2 | |
| if (next.info.items) { | |
| next.info.items.forEach((it) => { | |
| it.status = 2 | |
| it.comment = '审批中' | |
| }) | |
| } | |
| } | |
| } | |
| currentStep.value++ | |
| if (currentStep.value < data.nodes.length) { | |
| const next = data.nodes[currentStep.value] | |
| const isLastNode = currentStep.value === data.nodes.length - 1 | |
| next.info.status = isLastNode ? 1 : 2 | |
| if (next.info.items) { | |
| next.info.items.forEach((it) => { | |
| it.status = isLastNode ? 1 : 2 | |
| it.comment = isLastNode ? '已通过' : '审批中' | |
| }) | |
| } | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/sites/demos/pc/app/flowchart/dynamic-update-composition-api.vue`
around lines 86 - 97, The approval flow in the dynamic update composition API
leaves the final “流程完成” node stuck at ongoing because `approve()` always marks
the next node as status 2 and the `currentStep` guard in the same flow prevents
a later update. Update the logic around `approve()` and the
`data.nodes`/`currentStep` progression so that when the last approval is
reached, the final node is set to the complete status instead of ongoing, and
keep the intermediate `next.info.items` updates only for non-terminal nodes.
Comment on lines
+27
to
+48
| const logs = ref([]) | ||
|
|
||
| const handleNodeClick = (param, e) => { | ||
| Modal.message({ | ||
| status: 'info', | ||
| message: `点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}` | ||
| }) | ||
| } | ||
|
|
||
| const handleLinkClick = (param, e) => { | ||
| Modal.message({ | ||
| status: 'info', | ||
| message: `点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}` | ||
| }) | ||
| } | ||
|
|
||
| const handleBlankClick = (param, e) => { | ||
| Modal.message({ | ||
| status: 'info', | ||
| message: `点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})` | ||
| }) | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Log panel never gets populated — logs is declared but never updated.
The template renders logs (Lines 3-6) and only falls back to the empty-state message when logs.length === 0, but none of handleNodeClick/handleLinkClick/handleBlankClick ever push into logs. The log panel will always show the empty state regardless of clicks.
🐛 Proposed fix
const handleNodeClick = (param, e) => {
+ logs.value.unshift(`点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}`)
Modal.message({
status: 'info',
message: `点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}`
})
}
const handleLinkClick = (param, e) => {
+ logs.value.unshift(`点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}`)
Modal.message({
status: 'info',
message: `点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}`
})
}
const handleBlankClick = (param, e) => {
+ logs.value.unshift(`点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})`)
Modal.message({
status: 'info',
message: `点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})`
})
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const logs = ref([]) | |
| const handleNodeClick = (param, e) => { | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}` | |
| }) | |
| } | |
| const handleLinkClick = (param, e) => { | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}` | |
| }) | |
| } | |
| const handleBlankClick = (param, e) => { | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})` | |
| }) | |
| } | |
| const logs = ref([]) | |
| const handleNodeClick = (param, e) => { | |
| logs.value.unshift(`点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}`) | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}` | |
| }) | |
| } | |
| const handleLinkClick = (param, e) => { | |
| logs.value.unshift(`点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}`) | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}` | |
| }) | |
| } | |
| const handleBlankClick = (param, e) => { | |
| logs.value.unshift(`点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})`) | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})` | |
| }) | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/sites/demos/pc/app/flowchart/event-handling-composition-api.vue`
around lines 27 - 48, The log panel state is never updated because `logs` is
only declared in the event-handling Composition API example and never written to
by `handleNodeClick`, `handleLinkClick`, or `handleBlankClick`. Update those
handlers to append a new log entry into `logs` for each click, using the
existing event data and keeping the `Modal.message` behavior if needed, so the
template can render real entries instead of always hitting the empty state.
Comment on lines
+39
to
+56
| handleNodeClick(param, e) { | ||
| Modal.message({ | ||
| status: 'info', | ||
| message: `点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}` | ||
| }) | ||
| }, | ||
| handleLinkClick(param, e) { | ||
| Modal.message({ | ||
| status: 'info', | ||
| message: `点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}` | ||
| }) | ||
| }, | ||
| handleBlankClick(param, e) { | ||
| Modal.message({ | ||
| status: 'info', | ||
| message: `点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})` | ||
| }) | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Same log panel bug as event-handling-composition-api.vue — this.logs never updated.
Handlers only call Modal.message(...); the log panel bound to logs (Lines 3-6) will always show the empty-state text.
🐛 Proposed fix
handleNodeClick(param, e) {
+ this.logs.unshift(`点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}`)
Modal.message({
status: 'info',
message: `点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}`
})
},
handleLinkClick(param, e) {
+ this.logs.unshift(`点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}`)
Modal.message({
status: 'info',
message: `点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}`
})
},
handleBlankClick(param, e) {
+ this.logs.unshift(`点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})`)
Modal.message({
status: 'info',
message: `点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})`
})
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| handleNodeClick(param, e) { | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}` | |
| }) | |
| }, | |
| handleLinkClick(param, e) { | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}` | |
| }) | |
| }, | |
| handleBlankClick(param, e) { | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})` | |
| }) | |
| } | |
| handleNodeClick(param, e) { | |
| this.logs.unshift(`点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}`) | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击节点: ${param.raw.name} (${param.raw.info.label}) - 状态: ${param.raw.info.status}` | |
| }) | |
| }, | |
| handleLinkClick(param, e) { | |
| this.logs.unshift(`点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}`) | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击连线: ${param.raw.from} → ${param.raw.to} - 样式: ${param.raw.info.style}` | |
| }) | |
| }, | |
| handleBlankClick(param, e) { | |
| this.logs.unshift(`点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})`) | |
| Modal.message({ | |
| status: 'info', | |
| message: `点击空白: 坐标 (${Math.round(e.x)}, ${Math.round(e.y)})` | |
| }) | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/sites/demos/pc/app/flowchart/event-handling.vue` around lines 39 -
56, The event handlers in event-handling.vue are only showing Modal.message
output, so the logs panel bound to logs never receives entries. Update
handleNodeClick, handleLinkClick, and handleBlankClick to also append a
formatted message to this.logs (matching the pattern used in
event-handling-composition-api.vue) whenever a click occurs, so the panel
reflects the same events shown in the modal.
| <tiny-flowchart :data="data" :config="config"> | ||
| <template #content="{ node, config: cfg }"> | ||
| <div | ||
| v-if="node.info.items && node.info.items.length >= cfg.listThreshold" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Threshold comparison operator diverges from the composition-api sibling and library semantics.
This file uses >= while person-list-composition-api.vue (Line 6) and the library's own valid() check (arr.length > config.listThreshold in packages/vue/src/flowchart/src/pc.vue) use >. With the current demo data (listThreshold = 0, items always length ≥ 1) both produce the same visible result, but the mismatch between two supposedly-equivalent demo variants could confuse readers comparing them.
🐛 Proposed fix
- v-if="node.info.items && node.info.items.length >= cfg.listThreshold"
+ v-if="node.info.items && node.info.items.length > cfg.listThreshold"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| v-if="node.info.items && node.info.items.length >= cfg.listThreshold" | |
| v-if="node.info.items && node.info.items.length > cfg.listThreshold" |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/sites/demos/pc/app/flowchart/person-list.vue` at line 6, The
threshold check in person-list.vue is inconsistent with
person-list-composition-api.vue and the library’s valid() logic. Update the v-if
condition on node.info.items to use the same strict greater-than comparison as
the sibling demo and pc.vue’s arr.length > config.listThreshold, so both demo
variants match the shared semantics.
Comment on lines
+105
to
+118
| { | ||
| demoId: 'custom-link-style', | ||
| name: { | ||
| 'zh-CN': '自定义连线样式', | ||
| 'en-US': 'Custom Link Style' | ||
| }, | ||
| desc: { | ||
| 'zh-CN': | ||
| '<p>通过 <code>config.styleLink</code> 可以自定义连线的样式。这个函数接收连线数据对象，返回 Canvas 样式对象（如 <code>strokeStyle</code>、<code>lineWidth</code>、<code>shadowColor</code> 等）。<code>config.drawLink</code> 则提供更底层的自定义 Canvas 绘制能力，与<code>config.styleLink</code>互斥。</p>', | ||
| 'en-US': | ||
| 'You can customize the style of connections via <code>config.styleLink</code>. This function accepts a connection data object and returns a Canvas style object (e.g., <code>strokeStyle</code>, <code>lineWidth</code>, <code>shadowColor</code>, etc.). <code>config.drawLink</code> provides more granular control over Canvas rendering, mutually exclusive with <code>config.styleLink</code>' | ||
| }, | ||
| codeFiles: ['custom-link-style.vue'] | ||
| }, |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Missing <p> wrapper in en-US description.
Unlike every other demo description in this file, the en-US text for custom-link-style is not wrapped in <p>...</p> tags (the zh-CN counterpart is). This is inconsistent with the rest of the file's markup and may render without the expected paragraph styling on the docs site.
📝 Suggested fix
'en-US':
- 'You can customize the style of connections via <code>config.styleLink</code>. This function accepts a connection data object and returns a Canvas style object (e.g., <code>strokeStyle</code>, <code>lineWidth</code>, <code>shadowColor</code>, etc.). <code>config.drawLink</code> provides more granular control over Canvas rendering, mutually exclusive with <code>config.styleLink</code>'
+ '<p>You can customize the style of connections via <code>config.styleLink</code>. This function accepts a connection data object and returns a Canvas style object (e.g., <code>strokeStyle</code>, <code>lineWidth</code>, <code>shadowColor</code>, etc.). <code>config.drawLink</code> provides more granular control over Canvas rendering, mutually exclusive with <code>config.styleLink</code>.</p>'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| { | |
| demoId: 'custom-link-style', | |
| name: { | |
| 'zh-CN': '自定义连线样式', | |
| 'en-US': 'Custom Link Style' | |
| }, | |
| desc: { | |
| 'zh-CN': | |
| '<p>通过 <code>config.styleLink</code> 可以自定义连线的样式。这个函数接收连线数据对象，返回 Canvas 样式对象（如 <code>strokeStyle</code>、<code>lineWidth</code>、<code>shadowColor</code> 等）。<code>config.drawLink</code> 则提供更底层的自定义 Canvas 绘制能力，与<code>config.styleLink</code>互斥。</p>', | |
| 'en-US': | |
| 'You can customize the style of connections via <code>config.styleLink</code>. This function accepts a connection data object and returns a Canvas style object (e.g., <code>strokeStyle</code>, <code>lineWidth</code>, <code>shadowColor</code>, etc.). <code>config.drawLink</code> provides more granular control over Canvas rendering, mutually exclusive with <code>config.styleLink</code>' | |
| }, | |
| codeFiles: ['custom-link-style.vue'] | |
| }, | |
| { | |
| demoId: 'custom-link-style', | |
| name: { | |
| 'zh-CN': '自定义连线样式', | |
| 'en-US': 'Custom Link Style' | |
| }, | |
| desc: { | |
| 'zh-CN': | |
| '<p>通过 <code>config.styleLink</code> 可以自定义连线的样式。这个函数接收连线数据对象，返回 Canvas 样式对象（如 <code>strokeStyle</code>、<code>lineWidth</code>、<code>shadowColor</code> 等）。<code>config.drawLink</code> 则提供更底层的自定义 Canvas 绘制能力，与<code>config.styleLink</code>互斥。</p>', | |
| 'en-US': | |
| '<p>You can customize the style of connections via <code>config.styleLink</code>. This function accepts a connection data object and returns a Canvas style object (e.g., <code>strokeStyle</code>, <code>lineWidth</code>, <code>shadowColor</code>, etc.). <code>config.drawLink</code> provides more granular control over Canvas rendering, mutually exclusive with <code>config.styleLink</code>.</p>' | |
| }, | |
| codeFiles: ['custom-link-style.vue'] | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/sites/demos/pc/app/flowchart/webdoc/flowchart.js` around lines 105 -
118, The en-US description for the custom-link-style demo is missing the
standard paragraph wrapper used throughout this file. Update the demo entry in
flowchart.js so the en-US text for custom-link-style is wrapped in <p>...</p>,
matching the zh-CN description and the other demo entries; locate it by the
demoId custom-link-style and its desc field.
Comment on lines
+119
to
132
| { | ||
| demoId: 'other', | ||
| name: { | ||
| 'zh-CN': '其他用法', | ||
| 'en-US': 'Other Usage' | ||
| }, | ||
| desc: { | ||
| 'zh-CN': | ||
| "<p>连线相对路径配置详细介绍：</p>\n <ul>\n <li>'0' 表示从起始节点 1 的位置开始</li>\n <li>'r2' 表示向右画两列宽度的连线</li>\n <li>'c' 表示画一个圆角</li>\n <li>'b2' 表示向下画两行高度的连线</li>\n <li>'c' 再画一个圆角</li>\n <li>'l1' 表示向左画一列宽度的连线</li>\n <li>'c' 再画一个圆角</li>\n <li>'t1' 向上画一行高度的连线</li>\n </ul>\n <p>连线配置参数举例:</p>\n <span>const link = { from: '1', to: '2', p: '0 r2 c b2 c l1 c t1', status: 1 }</span>\n ", | ||
| 'en-US': | ||
| "<p>Detailed introduction to configuring relative paths for connections:</p>\n <ul>\n <li>'0' represents starting from node 1 position.</li>\n <li>'r2' represents drawing a line two columns wide to the right.</li>\n <li>'c' represents drawing a circle.</li>\n <li>'b2' represents a downward line of two height units.</li>\n <li>'c' represents drawing a circle again.</li>\n <li>'l1' represents drawing a line one columns wide to the left.</li>\n <li>'t1' represents a upward line of two height units.</li>\n </ul>\n <p>Example of connection configuration parameters:</p>\n <span>const link = { from: '1', to: '2', p: '0 r2 c b2 c l1 c t1', status: 1 }</span>\n " | ||
| }, | ||
| codeFiles: ['other.vue'] | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Translation errors in other demo's en-US description.
The t1/l1 bullet translations don't match the zh-CN source and contain grammar mistakes:
zh-CNfort1says "向上画一行高度" (one row height), buten-USsays"a upward line of two height units"— wrong number and article ("a" → "an").en-USforl1says"one columns wide"— should be "one column wide".
📝 Suggested fix
- <li>'l1' represents drawing a line one columns wide to the left.</li>
+ <li>'l1' represents drawing a line one column wide to the left.</li>
<li>'c' represents drawing a circle again.</li>
- <li>'t1' represents a upward line of two height units.</li>
+ <li>'t1' represents an upward line of one height unit.</li>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| { | |
| demoId: 'other', | |
| name: { | |
| 'zh-CN': '其他用法', | |
| 'en-US': 'Other Usage' | |
| }, | |
| desc: { | |
| 'zh-CN': | |
| "<p>连线相对路径配置详细介绍：</p>\n <ul>\n <li>'0' 表示从起始节点 1 的位置开始</li>\n <li>'r2' 表示向右画两列宽度的连线</li>\n <li>'c' 表示画一个圆角</li>\n <li>'b2' 表示向下画两行高度的连线</li>\n <li>'c' 再画一个圆角</li>\n <li>'l1' 表示向左画一列宽度的连线</li>\n <li>'c' 再画一个圆角</li>\n <li>'t1' 向上画一行高度的连线</li>\n </ul>\n <p>连线配置参数举例:</p>\n <span>const link = { from: '1', to: '2', p: '0 r2 c b2 c l1 c t1', status: 1 }</span>\n ", | |
| 'en-US': | |
| "<p>Detailed introduction to configuring relative paths for connections:</p>\n <ul>\n <li>'0' represents starting from node 1 position.</li>\n <li>'r2' represents drawing a line two columns wide to the right.</li>\n <li>'c' represents drawing a circle.</li>\n <li>'b2' represents a downward line of two height units.</li>\n <li>'c' represents drawing a circle again.</li>\n <li>'l1' represents drawing a line one columns wide to the left.</li>\n <li>'t1' represents a upward line of two height units.</li>\n </ul>\n <p>Example of connection configuration parameters:</p>\n <span>const link = { from: '1', to: '2', p: '0 r2 c b2 c l1 c t1', status: 1 }</span>\n " | |
| }, | |
| codeFiles: ['other.vue'] | |
| } | |
| { | |
| demoId: 'other', | |
| name: { | |
| 'zh-CN': '其他用法', | |
| 'en-US': 'Other Usage' | |
| }, | |
| desc: { | |
| 'zh-CN': | |
| "<p>连线相对路径配置详细介绍：</p>\n <ul>\n <li>'0' 表示从起始节点 1 的位置开始</li>\n <li>'r2' 表示向右画两列宽度的连线</li>\n <li>'c' 表示画一个圆角</li>\n <li>'b2' 表示向下画两行高度的连线</li>\n <li>'c' 再画一个圆角</li>\n <li>'l1' 表示向左画一列宽度的连线</li>\n <li>'c' 再画一个圆角</li>\n <li>'t1' 向上画一行高度的连线</li>\n </ul>\n <p>连线配置参数举例:</p>\n <span>const link = { from: '1', to: '2', p: '0 r2 c b2 c l1 c t1', status: 1 }</span>\n ", | |
| 'en-US': | |
| "<p>Detailed introduction to configuring relative paths for connections:</p>\n <ul>\n <li>'0' represents starting from node 1 position.</li>\n <li>'r2' represents drawing a line two columns wide to the right.</li>\n <li>'c' represents drawing a circle.</li>\n <li>'b2' represents a downward line of two height units.</li>\n <li>'c' represents drawing a circle again.</li>\n <li>'l1' represents drawing a line one column wide to the left.</li>\n <li>'t1' represents an upward line of one height unit.</li>\n </ul>\n <p>Example of connection configuration parameters:</p>\n <span>const link = { from: '1', to: '2', p: '0 r2 c b2 c l1 c t1', status: 1 }</span>\n " | |
| }, | |
| codeFiles: ['other.vue'] | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/sites/demos/pc/app/flowchart/webdoc/flowchart.js` around lines 119 -
132, The `other` demo’s `en-US` description has translation mismatches in the
`desc` content: update the `t1` bullet to match the `zh-CN` meaning of one row
height and fix the grammar in `en-US`, and correct the `l1` bullet to use “one
column wide” instead of “one columns wide.” Make these edits in the `desc.en-US`
string within the `other` demo object in `flowchart.js` so the English copy
aligns with the source text and reads naturally.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
新增demo和api说明文档
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Bug Fixes
Documentation