feat: add more event for jsonViewer
#5546
Conversation
* 为JsonViewer添加事件支持
|
WalkthroughThe changes update the JSON viewer component and its associated types. In the common UI package, new event emissions (click, copied, keyClick, toggle, valueClick) and a handling function (handleClick) are introduced while removing the JSON parsing logic. The types file is updated with new interfaces (JsonViewerAction, JsonViewerToggle, JsonViewerValue) and modifies JsonViewerProps. In the playground, the JSON data constant is now parsed via JSON.parse with an updated structure, and the example view adds new event handler functions with a binding change from v-model to :value to support interactive features. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant JV as JsonViewer Component
participant P as Parent Component
U->>JV: Clicks on a JSON item
JV->>JV: Executes handleClick(event)
JV->>P: Emits "click" & "valueClick" events with parameters
sequenceDiagram
participant U as User
participant PJV as Playground JSON Viewer
participant M as Message Service
U->>PJV: Triggers key/value click or copy action
PJV->>PJV: Calls handleKeyClick / handleValueClick / handleCopied
PJV->>M: Displays corresponding info or success message
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
playground/src/views/examples/json-viewer/data.ts (1)
29-66: Simplify json2 declaration by removing JSON.parse.Using
JSON.parseat compile time for a static object is unnecessary and could impact performance. Consider using a direct object declaration instead.-export const json2 = JSON.parse(` - { +export const json2 = { "id": "chatcmpl-123", // ... rest of the object -} - `); +};
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/effects/common-ui/src/components/json-viewer/index.vue(3 hunks)packages/effects/common-ui/src/components/json-viewer/types.ts(2 hunks)playground/src/views/examples/json-viewer/data.ts(2 hunks)playground/src/views/examples/json-viewer/index.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Test (windows-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: Check (windows-latest)
- GitHub Check: Lint (ubuntu-latest)
- GitHub Check: Check (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
🔇 Additional comments (5)
packages/effects/common-ui/src/components/json-viewer/types.ts (2)
1-24: LGTM! Props interface is well-defined.The required
valueproperty is properly typed and documented. The removal ofparseStringaligns with moving parsing responsibility to the consumer.
26-44: LGTM! Event interfaces are well-structured.The new interfaces (
JsonViewerAction,JsonViewerValue,JsonViewerToggle) are properly typed and documented, providing good type safety for event handling.packages/effects/common-ui/src/components/json-viewer/index.vue (2)
35-41: LGTM! Event emissions are well-typed.The emit types are properly defined using TypeScript's type system, providing good type safety for event handling.
71-87: LGTM! Event handlers are properly bound.The computed property correctly binds all event handlers and maintains proper typing.
playground/src/views/examples/json-viewer/index.vue (1)
1-51: LGTM! Example implementation demonstrates proper usage.The implementation:
- Properly imports and uses types
- Implements clear event handlers
- Demonstrates various JsonViewer features including preview mode
- Shows good error feedback using message component
Description
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Refactor