vue-safe-force-graph 2.0.98-beta.3 → 2.0.99

package/README.md

@@ -6,17 +6,24 @@ vue-safe-force-graph 是一个使用 Vue3、d3.js 、 canvas 开发的可视化
 
 `npm install vue-safe-force-graph`
 
+当前文档基于 `2.0.98`。
+
 ## 使用方式
-可以在组件中引入 或者可以在全局引入注册组件。
+支持两种接入方式：
+
+- 局部引入 `Graph` 组件，适合只在单页内使用图谱组件
+- 全局 `app.use()` 注册插件，适合统一配置语言包并在多个页面复用
 
 ### 方式一：组件中引入
-在vue组件中引入Graph组件和样式：
+在 Vue 组件中直接引入 `Graph` 组件和样式：
 
 ```
 import { Graph } from 'vue-safe-force-graph'
 import 'vue-safe-force-graph/lib/style.css'
 ```
 
+组件直引场景会自动挂载库内默认 i18n，默认语言为 `zh`。
+
 完整index.vue示例如下：
 
 ```vue
@@ -108,14 +115,24 @@ function handleDataLoaded(data) {
 
 
 ### 方式二：全局引入
-在main.js中引入并注册。
+在 `main.js` 中引入并注册。`2.0.98` 开始推荐通过插件方式统一配置语言与自定义文案：
 ```js
 // main.js
 import { createApp } from 'vue'
-import Graph from 'vue-safe-force-graph'
+import ForceGraph from 'vue-safe-force-graph'
 import 'vue-safe-force-graph/lib/style.css'
+
 const app = createApp(App)
-app.use(Graph)
+
+app.use(ForceGraph, {
+  locale: 'zh',
+  fallbackLocale: 'en',
+  customMessages: {
+    zh: {
+      loadingInfo: '图谱加载中...'
+    }
+  }
+})
 ```
 
 在自己的业务组件中使用，全局注册的组件名为`ForceGraphByCanvas`，示例如下 ：
@@ -141,6 +158,12 @@ app.use(Graph)
 </script>
 ```
 
+### 国际化说明
+
+- 全局注册时，可通过 `app.use(ForceGraph, { locale, fallbackLocale, customMessages })` 覆盖默认语言包
+- 局部引入 `Graph` / `Render` 时，组件会自动补齐 `$t`、`$i18n`，不会再依赖宿主应用提前手动注入
+- 如果宿主项目本身也使用 `vue-i18n`，`2.0.98` 起图库内部翻译会优先走库自己的活跃 i18n 实例，避免文案串用
+
 ## 组件属性
 | 属性名                   | 说明                                                         | 类型           | 默认值                                                       | 是否必填 |
 | ------------------------ | ------------------------------------------------------------ | -------------- | ------------------------------------------------------------ | -------- |
@@ -369,6 +392,31 @@ const handleHighLight = () => {
 
 在获取节点和link的接口中，在links字段下面，新增一个字段 edge_label，字符串，如果有值则展示此文案，没有则不展示。
 
+**4.关系节点命名与描述字段**
+
+`2.0.98` 起，关系节点会优先使用 `relay_name` 作为展示文案；如果未返回，则回退到 `name`。同时支持在链路数据中传入 `description`，用于关系节点的 Popover 明细展示。
+
+```js
+{
+  links: [
+    {
+      source: 'node-a',
+      target: {
+        id: 'link-node-1',
+        type: 'nodeType',
+        name: 'process_chain',
+        relay_name: '父进程链',
+        description: {
+          process_name: 'cmd.exe',
+          process_path: 'C:/Windows/System32/cmd.exe'
+        }
+      },
+      edge_label: '执行'
+    }
+  ]
+}
+```
+
 
 
 ###### config配置
@@ -490,4 +538,4 @@ const handleHighLight = () => {
 
 [开发请看这里](./开发请看这里.md)
 
-如有问题请联系 jiangzhenxiang
+如有问题请联系 jiangzhenxiang