docs: 添加g6-extension-vue自定义节点文档 #7320

Child-qjj · 2025-08-02T13:59:41Z

Fixed: [Feat]: vue2中使用5.x版本的自定义节点功能 #7145

gemini-code-assist

Summary of Changes

Hello @Child-qjj, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

I've added new documentation, in both English and Chinese, that guides users on how to leverage the g6-extension-vue library to define custom nodes using Vue components within G6 graph visualizations. This aims to provide a more efficient and maintainable way for developers to create rich, interactive graph elements, especially when integrating with existing Vue-based UI systems or requiring complex node logic.

Highlights

Introduction to Vue Nodes: I've added comprehensive documentation for integrating Vue components as custom nodes within G6 graphs. This includes an introduction to the g6-extension-vue library and its benefits for enhancing development efficiency and maintainability.
Node Solution Comparison: The new documentation provides clear guidance on when to use G6's native Canvas-based nodes versus Vue-based nodes, outlining recommended scenarios for each to help users make informed decisions.
Quick Start Guide for Vue Node Integration: I've included a detailed quick start guide that covers environment preparation, dependency installation (g6-extension-vue), and the essential steps for component integration, such as registering Vue node types, defining Vue components, and using them in a G6 graph configuration.
Advanced Features: State Management and Event Interaction: The documentation also delves into advanced features, specifically covering state management (both responding to built-in G6 interaction states and managing custom business states) and enabling event interaction between Vue nodes and the G6 graph instance.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request adds documentation for using Vue components as nodes with g6-extension-vue. The documentation is well-structured and covers the basics as well as advanced features. However, several code examples contain errors that would prevent them from working, ranging from missing imports to incorrect variable access and broken logic. I've provided suggestions to fix these examples to ensure they are correct and easy for users to follow.

packages/site/docs/manual/element/node/vue-node.en.md