@qilitt-mickey/vue3-temp-skill 1.0.12 → 1.1.2

package/references/flowchart-g6.md

@@ -1,244 +1,249 @@
-# G6 流程图（@antv/g6 v5）
-
-## 依赖
-
-`@antv/g6` v5 + `g6-extension-vue` — 支持在节点中渲染 Vue 组件的图可视化引擎。大体积依赖已单独拆包为 `antv-g6` / `antv-vendor`。
-
-## 组件结构
-
-```vue
-<!-- src/views/workflow/components/G6Flow.vue -->
-<script setup lang="tsx">
-import { ExtensionCategory, register, treeToGraphData } from '@antv/g6'
-import { useResizeObserver } from '@vueuse/core'
-import { VueNode } from 'g6-extension-vue'
-import { getG6WorkflowData } from '@/api/common'
-import { useApp } from '@/hooks/useApp'
-
-defineOptions({ name: 'G6Flow' })
-
-const props = withDefaults(defineProps<{
-  nodeWidth?: number
-  nodeHeight?: number
-  getHGap?: number
-  getVGap?: number
-  resize?: boolean
-  fitCenterOnResize?: boolean
-  onBizClick?: (id: string) => void
-  onNodeClick?: (id: string) => void
-}>(), {
-  nodeWidth: 260,
-  nodeHeight: 190,
-  hGap: 80,
-  getVGap: 80,
-  resize: true,
-  fitCenterOnResize: true,
-})
-
-const containerRef = ref<HTMLElement>()
-const treeData = ref<any>(null)
-const loading = ref(false)
-const { svgLoading } = useApp()
-let graph: any = null
-</script>
-```
-
-## 初始化图实例
-
-```typescript
-const initGraph = async () => {
-  if (!containerRef.value) return
-  const { Graph } = await import('@antv/g6')
-  register(ExtensionCategory.NODE, 'vue-node', VueNode)
-
-  // 定义 Vue 节点组件
-  const FlowNodeComp = defineComponent({
-    name: 'FlowNodeComp',
-    props: ['treeData'],
-    setup(p: any) {
-      const nodeData = computed(() => p.treeData)
-      const isSelected = computed(() =>
-        Array.isArray(p.treeData?.states) && p.treeData.states.includes('selected')
-      )
-
-      function handleNodeClick(e: Event) {
-        e.preventDefault()
-        e.stopPropagation()
-        const id = nodeData.value?.id
-        if (!id || !graph) return
-        // 切换选中状态
-        const data = graph.getData?.() || {}
-        data.nodes.forEach((n: any) => {
-          graph.setElementState?.(n.id, n.id === id ? ['selected'] : [])
-        })
-        // 展开/折叠
-        const current = data.nodes.find((n: any) => n.id === id)
-        if (current?.collapsed) {
-          graph.expandElement?.(id, { animation: false })
-          current.collapsed = false
-        } else {
-          graph.collapseElement?.(id, { animation: false })
-          current.collapsed = true
-        }
-      }
-
-      return () => (
-        <div style={{
-          width: `${props.nodeWidth}px`, height: `${props.nodeHeight}px`,
-          border: '2px solid', borderColor: isSelected.value ? 'red' : '#9DC5EA',
-          borderRadius: '8px', background: '#EAF4FF', cursor: 'pointer',
-        }} onClick={handleNodeClick}>
-          <div style={{ background: '#CFE7FF', padding: '8px', fontWeight: 600 }}>
-            {nodeData.value?.title ?? ''}
-          </div>
-          <div style={{ padding: '8px' }}>
-            <div>业务号：{nodeData.value?.caseNo ?? ''}</div>
-            <div>{nodeData.value?.handler ?? ''}</div>
-            <div style={{ color: '#409eff' }}>状态：{nodeData.value?.status ?? ''}</div>
-          </div>
-        </div>
-      )
-    },
-  })
-
-  graph = new Graph({
-    container: containerRef.value,
-    width: containerRef.value.clientWidth || 800,
-    height: containerRef.value.clientHeight || 600,
-    autoFit: 'view',
-    behaviors: ['drag-canvas', 'zoom-canvas'],
-    node: {
-      type: 'vue-node',
-      style: {
-        component: d => <FlowNodeComp treeData={Object.assign({}, d)} />,
-        size: [props.nodeWidth, props.nodeHeight],
-        ports: [
-          { key: 'top', placement: 'top' },
-          { key: 'bottom', placement: 'bottom' },
-        ],
-        cursor: 'pointer',
-      },
-      animation: { enter: false },
-    },
-    edge: { type: 'line', style: { stroke: '#9DC5EA' }, animation: { enter: false } },
-    layout: {
-      type: 'compact-box',
-      direction: 'TB',
-      getHeight: () => props.nodeHeight,
-      getWidth: () => props.nodeWidth,
-      getVGap: () => props.getVGap,
-      getHGap: () => props.getHGap,
-    },
-  })
-
-  // 点击画布取消选中
-  graph.on('canvas:click', () => {
-    const data = graph.getData?.() || {}
-    data.nodes?.forEach((n: any) => graph.setElementState?.(n.id, []))
-  })
-}
-```
-
-## 数据加载与渲染
-
-```typescript
-const setGraphData = () => {
-  if (!graph || !treeData.value) return
-  const graphData = treeToGraphData(treeData.value) // 树结构 → 图数据
-  graph.setData(graphData)
-  graph.render()
-  graph.fitView?.() // 缩放至合适大小并居中
-}
-
-const loadData = async () => {
-  loading.value = true
-  const { data } = await getG6WorkflowData()
-  treeData.value = data
-  setGraphData()
-  loading.value = false
-}
-```
-
-## 缩放控制
-
-```typescript
-const handleZoomIn = () => {
-  if (!graph) return
-  const current = graph.getZoom?.() ?? 1
-  graph.zoomTo?.(current + 0.1)
-}
-const handleZoomOut = () => {
-  if (!graph) return
-  const current = graph.getZoom?.() ?? 1
-  graph.zoomTo?.(Math.max(0.1, current - 0.1))
-}
-const handleFitView = () => {
-  if (!graph) return
-  graph.fitView?.()
-}
-```
-
-## 响应式尺寸
-
-```typescript
-const resize = () => {
-  if (!graph || !containerRef.value || !props.resize) return
-  const w = containerRef.value.clientWidth
-  const h = containerRef.value.clientHeight
-  graph.resize(w, h)
-  if (props.fitCenterOnResize) {
-    graph.render()
-    graph.fitView?.()
-  }
-}
-useResizeObserver(containerRef, () => resize())
-```
-
-## 生命周期
-
-```typescript
-onMounted(async () => {
-  await initGraph()
-  await loadData()
-})
-
-onBeforeUnmount(() => {
-  graph?.destroy?.()
-  graph = null
-})
-
-defineExpose({ getInstance: () => graph })
-```
-
-## 页面用法
-
-```vue
-<!-- src/views/workflow/g6/index.vue -->
-<template>
-  <div :style="{ height: `calc(100vh - 2 * var(--vts-margin) - ${headerHeight}px)` }"
-    class="pos-relative bg-[#fff] p-5 overflow-hidden">
-    <div class="toolbar">
-      <el-alert title="antv/g6流程图展示" type="info" :closable="false" />
-    </div>
-    <div class="g6-container">
-      <G6Flow ref="flowRef" :node-width="260" :node-height="190" :get-v-gap="80" :get-h-gap="80" />
-    </div>
-  </div>
-</template>
-```
-
-## 关键约定
-
-1. G6 5.x 必须配合 `g6-extension-vue` 才能在节点中渲染 Vue 组件。
-2. `@antv/g6` 使用动态 `import()` 按需加载，避免首屏性能问题。
-3. 布局使用 `compact-box`（紧凑树盒布局），方向 `TB`（从上到下）。
-4. 图容器必须有明确宽高，否则初始化失败。
-5. `onBeforeUnmount` 中必须调用 `graph.destroy()` 释放资源。
-6. `treeToGraphData` 将树结构转为 G6 图数据格式。
-7. 节点选中状态通过 `setElementState` 管理，CSS 通过 `states` 属性判断。
-
-## 关联文件
-
-- [src/views/workflow/g6/index.vue](file:///e:/work/vue3-web-temp/src/views/workflow/g6/index.vue)
-- [src/views/workflow/components/G6Flow.vue](file:///e:/work/vue3-web-temp/src/views/workflow/components/G6Flow.vue)
-- [src/api/common.ts](file:///e:/work/vue3-web-temp/src/api/common.ts)
+# G6 流程图（@antv/g6 v5）
+
+> 按本文件示例编写；必须使用选型表中的 `@antv/g6`（见 project-inventory），勿改用同类其他流程图库；新依赖须待确认。
+
+## 依赖（缺则先装）
+
+| 包 | 版本 |
+|---|---|
+| `@antv/g6` | `5.1.1` |
+| `g6-extension-vue` | `0.1.0` |
+
+```bash
+pnpm add @antv/g6@5.1.1 g6-extension-vue@0.1.0
+```
+
+大体积依赖模板侧已拆包为 `antv-g6` / `antv-vendor`。支持在节点中渲染 Vue 组件。
+
+## 组件结构
+
+```vue
+<!-- G6Flow.vue -->
+<script setup lang="tsx">
+import { ExtensionCategory, register, treeToGraphData } from '@antv/g6'
+import { useResizeObserver } from '@vueuse/core'
+import { VueNode } from 'g6-extension-vue'
+import { getG6WorkflowData } from '@/api/common'
+import { useApp } from '@/hooks/useApp'
+
+defineOptions({ name: 'G6Flow' })
+
+const props = withDefaults(defineProps<{
+  nodeWidth?: number
+  nodeHeight?: number
+  getHGap?: number
+  getVGap?: number
+  resize?: boolean
+  fitCenterOnResize?: boolean
+  onBizClick?: (id: string) => void
+  onNodeClick?: (id: string) => void
+}>(), {
+  nodeWidth: 260,
+  nodeHeight: 190,
+  hGap: 80,
+  getVGap: 80,
+  resize: true,
+  fitCenterOnResize: true,
+})
+
+const containerRef = ref<HTMLElement>()
+const treeData = ref<any>(null)
+const loading = ref(false)
+const { svgLoading } = useApp()
+let graph: any = null
+</script>
+```
+
+## 初始化图实例
+
+```typescript
+const initGraph = async () => {
+  if (!containerRef.value) return
+  const { Graph } = await import('@antv/g6')
+  register(ExtensionCategory.NODE, 'vue-node', VueNode)
+
+  // 定义 Vue 节点组件
+  const FlowNodeComp = defineComponent({
+    name: 'FlowNodeComp',
+    props: ['treeData'],
+    setup(p: any) {
+      const nodeData = computed(() => p.treeData)
+      const isSelected = computed(() =>
+        Array.isArray(p.treeData?.states) && p.treeData.states.includes('selected')
+      )
+
+      function handleNodeClick(e: Event) {
+        e.preventDefault()
+        e.stopPropagation()
+        const id = nodeData.value?.id
+        if (!id || !graph) return
+        // 切换选中状态
+        const data = graph.getData?.() || {}
+        data.nodes.forEach((n: any) => {
+          graph.setElementState?.(n.id, n.id === id ? ['selected'] : [])
+        })
+        // 展开/折叠
+        const current = data.nodes.find((n: any) => n.id === id)
+        if (current?.collapsed) {
+          graph.expandElement?.(id, { animation: false })
+          current.collapsed = false
+        } else {
+          graph.collapseElement?.(id, { animation: false })
+          current.collapsed = true
+        }
+      }
+
+      return () => (
+        <div style={{
+          width: `${props.nodeWidth}px`, height: `${props.nodeHeight}px`,
+          border: '2px solid', borderColor: isSelected.value ? 'red' : '#9DC5EA',
+          borderRadius: '8px', background: '#EAF4FF', cursor: 'pointer',
+        }} onClick={handleNodeClick}>
+          <div style={{ background: '#CFE7FF', padding: '8px', fontWeight: 600 }}>
+            {nodeData.value?.title ?? ''}
+          </div>
+          <div style={{ padding: '8px' }}>
+            <div>业务号：{nodeData.value?.caseNo ?? ''}</div>
+            <div>{nodeData.value?.handler ?? ''}</div>
+            <div style={{ color: '#409eff' }}>状态：{nodeData.value?.status ?? ''}</div>
+          </div>
+        </div>
+      )
+    },
+  })
+
+  graph = new Graph({
+    container: containerRef.value,
+    width: containerRef.value.clientWidth || 800,
+    height: containerRef.value.clientHeight || 600,
+    autoFit: 'view',
+    behaviors: ['drag-canvas', 'zoom-canvas'],
+    node: {
+      type: 'vue-node',
+      style: {
+        component: d => <FlowNodeComp treeData={Object.assign({}, d)} />,
+        size: [props.nodeWidth, props.nodeHeight],
+        ports: [
+          { key: 'top', placement: 'top' },
+          { key: 'bottom', placement: 'bottom' },
+        ],
+        cursor: 'pointer',
+      },
+      animation: { enter: false },
+    },
+    edge: { type: 'line', style: { stroke: '#9DC5EA' }, animation: { enter: false } },
+    layout: {
+      type: 'compact-box',
+      direction: 'TB',
+      getHeight: () => props.nodeHeight,
+      getWidth: () => props.nodeWidth,
+      getVGap: () => props.getVGap,
+      getHGap: () => props.getHGap,
+    },
+  })
+
+  // 点击画布取消选中
+  graph.on('canvas:click', () => {
+    const data = graph.getData?.() || {}
+    data.nodes?.forEach((n: any) => graph.setElementState?.(n.id, []))
+  })
+}
+```
+
+## 数据加载与渲染
+
+```typescript
+const setGraphData = () => {
+  if (!graph || !treeData.value) return
+  const graphData = treeToGraphData(treeData.value) // 树结构 → 图数据
+  graph.setData(graphData)
+  graph.render()
+  graph.fitView?.() // 缩放至合适大小并居中
+}
+
+const loadData = async () => {
+  loading.value = true
+  const { data } = await getG6WorkflowData()
+  treeData.value = data
+  setGraphData()
+  loading.value = false
+}
+```
+
+## 缩放控制
+
+```typescript
+const handleZoomIn = () => {
+  if (!graph) return
+  const current = graph.getZoom?.() ?? 1
+  graph.zoomTo?.(current + 0.1)
+}
+const handleZoomOut = () => {
+  if (!graph) return
+  const current = graph.getZoom?.() ?? 1
+  graph.zoomTo?.(Math.max(0.1, current - 0.1))
+}
+const handleFitView = () => {
+  if (!graph) return
+  graph.fitView?.()
+}
+```
+
+## 响应式尺寸
+
+```typescript
+const resize = () => {
+  if (!graph || !containerRef.value || !props.resize) return
+  const w = containerRef.value.clientWidth
+  const h = containerRef.value.clientHeight
+  graph.resize(w, h)
+  if (props.fitCenterOnResize) {
+    graph.render()
+    graph.fitView?.()
+  }
+}
+useResizeObserver(containerRef, () => resize())
+```
+
+## 生命周期
+
+```typescript
+onMounted(async () => {
+  await initGraph()
+  await loadData()
+})
+
+onBeforeUnmount(() => {
+  graph?.destroy?.()
+  graph = null
+})
+
+defineExpose({ getInstance: () => graph })
+```
+
+## 页面用法
+
+```vue
+<!-- g6 页面示例 -->
+<template>
+  <div :style="{ height: `calc(100vh - 2 * var(--vts-margin) - ${headerHeight}px)` }"
+    class="pos-relative bg-[#fff] p-5 overflow-hidden">
+    <div class="toolbar">
+      <el-alert title="antv/g6流程图展示" type="info" :closable="false" />
+    </div>
+    <div class="g6-container">
+      <G6Flow ref="flowRef" :node-width="260" :node-height="190" :get-v-gap="80" :get-h-gap="80" />
+    </div>
+  </div>
+</template>
+```
+
+## 关键约定
+
+1. G6 5.x 必须配合 `g6-extension-vue` 才能在节点中渲染 Vue 组件。
+2. `@antv/g6` 使用动态 `import()` 按需加载，避免首屏性能问题。
+3. 布局使用 `compact-box`（紧凑树盒布局），方向 `TB`（从上到下）。
+4. 图容器必须有明确宽高，否则初始化失败。
+5. `onBeforeUnmount` 中必须调用 `graph.destroy()` 释放资源。
+6. `treeToGraphData` 将树结构转为 G6 图数据格式。
+7. 节点选中状态通过 `setElementState` 管理，CSS 通过 `states` 属性判断。