irr-gh 0.1.2 → 0.1.3

package/README.md

@@ -44,6 +44,8 @@ bun add irr-gh
 
 ## 快速开始
 
+### 组件导入方式
+
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
@@ -82,6 +84,63 @@ function handleReady(graph: unknown) {
 </template>
 ```
 
+### 全局注册方式
+
+您也可以在 main.js/main.ts 中全局注册组件：
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import IrrGh from 'irr-gh'
+import 'irr-gh/style.css'
+
+const app = createApp(App)
+
+// 全局注册组件
+app.use(IrrGh)
+
+app.mount('#app')
+```
+
+之后就可以在任何组件中直接使用 `<IrrigationGraph>` 组件，无需单独导入：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { IrrigationData } from 'irr-gh'
+
+const graphRef = ref()
+
+// 示例数据
+const data: IrrigationData = {
+  canals: [
+    { id: 'main', name: '主干渠', type: 'canal', level: 1 },
+    { id: 'branch-1', name: '支渠1', type: 'canal', parentId: 'main', bankSide: 'left' }
+  ],
+  points: [
+    { id: 'sluice-1', name: '闸门1', type: 'sluice', canalId: 'main', chainage: 0 },
+    { id: 'sluice-2', name: '闸门2', type: 'sluice', canalId: 'main', chainage: 100 }
+  ]
+}
+
+function handleReady(graph: unknown) {
+  console.log('图渲染完成', graph)
+}
+</script>
+
+<template>
+  <IrrigationGraph
+    ref="graphRef"
+    :data="data"
+    :enable-minimap="true"
+    :fit-view="true"
+    :show-toolbar="true"
+    @ready="handleReady"
+  />
+</template>
+```
+
 ---
 
 ## 布局系统
@@ -340,6 +399,90 @@ interface PointEntity {
   chainage: number        // 桩号位置
   bankSide?: 'left' | 'right' | 'center'  // 岸别
   properties?: Record<string, unknown>  // 扩展属性
+  /** 节点显示配置（可选，用于自定义节点的G6渲染样式） */
+  nodeConfig?: PointNodeConfig
+}
+```
+
+#### 节点显示配置 (PointNodeConfig)
+
+您可以使用 `nodeConfig` 属性来自定义节点的显示样式：
+
+```typescript
+interface PointNodeConfig {
+  /** 节点形状: rect(矩形), circle(圆形), diamond(菱形), image(图片) */
+  shape?: 'rect' | 'circle' | 'diamond' | 'ellipse' | 'image'
+  /** 图片地址（shape为image时使用） */
+  img?: string
+  /** 节点宽度 */
+  width?: number
+  /** 节点高度 */
+  height?: number
+  /** 填充色 */
+  fill?: string
+  /** 边框色 */
+  stroke?: string
+  /** 边框宽度 */
+  lineWidth?: number
+  /** 圆角半径 */
+  radius?: number
+}
+```
+
+**使用示例：**
+
+```typescript
+// 使用图片节点
+const sluiceWithImage: SluiceEntity = {
+  id: 'slu-1',
+  name: '进水闸1',
+  type: 'sluice',
+  canalId: 'canal-A',
+  chainage: 0,
+  sluiceType: 'inlet',
+  designFlow: 50,
+  nodeConfig: {
+    shape: 'image',
+    img: '/head.png',
+    width: 48,
+    height: 48
+  }
+}
+
+// 使用矩形节点并自定义样式
+const pumpWithCustomStyle: PumpStationEntity = {
+  id: 'pump-1',
+  name: '提水泵站1',
+  type: 'pumpStation',
+  canalId: 'canal-B',
+  chainage: 100,
+  capacity: 500,
+  pumpType: 'lift',
+  nodeConfig: {
+    shape: 'rect',
+    width: 60,
+    height: 40,
+    fill: '#ffccc7',
+    stroke: '#ff4d4f',
+    radius: 8
+  }
+}
+
+// 使用圆形节点
+const reservoirWithCircle: ReservoirEntity = {
+  id: 'reservoir-1',
+  name: '调节水库1',
+  type: 'reservoir',
+  canalId: 'canal-C',
+  chainage: 500,
+  storageCapacity: 10000,
+  normalLevel: 85,
+  nodeConfig: {
+    shape: 'circle',
+    r: 24,  // 圆形使用 r 属性表示半径
+    fill: '#e6f7ff',
+    stroke: '#1890ff'
+  }
 }
 ```
 
@@ -468,7 +611,7 @@ export const CANAL_COLOR = '#1890ff'
 
 ### 图片类型节点
 
-点位节点支持使用图片，通过 `styleConfig.img` 配置：
+点位节点支持使用图片，通过业务数据中的 `nodeConfig` 配置（推荐方式），或通过 G6 图数据中的 `styleConfig.img` 配置：
 
 ```typescript
 // 业务数据中的节点配置（推荐方式）

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "irr-gh",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"description": "灌溉系统概化图组件",
 	"type": "module",
 	"main": "./dist/irr-gh.umd.cjs",
@@ -12,7 +12,7 @@
 			"import": "./dist/irr-gh.js",
 			"require": "./dist/irr-gh.umd.cjs"
 		},
-		"./style.css": "./dist/style.css"
+		"./style.css": "./dist/irr-gh.css"
 	},
 	"files": [
 		"dist"
@@ -51,7 +51,7 @@
 		"灌溉",
 		"概化图"
 	],
-	"author": "Your Name <your.email@example.com>",
+	"author": "eRiver",
 	"license": "MIT",
 	"repository": {
 		"type": "git",