@a2simcode/ui 0.0.55 → 0.0.56

package/docs/examples/workflow/basic.vue

@@ -1,265 +1,265 @@
-<template>
-  <div>
-    <div style="margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center">
-      <h3 style="margin: 0; width: 100%">属性演示</h3>
-
-      <div style="display: flex; gap: 8px; align-items: center">
-        <label>线条颜色：</label>
-        <j-input-color v-model="lineStroke" style="width: 100px" />
-      </div>
-
-      <div style="display: flex; gap: 8px; align-items: center">
-        <label>自定义调色板：</label>
-        <j-switch v-model="useCustomPalette" />
-      </div>
-    </div>
-
-    <div style="margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center">
-      <h3 style="margin: 0; width: 100%">方法演示</h3>
-
-      <j-button size="small" label="重置画布" @click="handleReset" />
-      <j-button size="small" label="放大 (+0.2)" @click="handleZoomIn" />
-      <j-button size="small" label="缩小 (-0.2)" @click="handleZoomOut" />
-      <j-button size="small" label="撤销" @click="handleUndo" />
-      <j-button size="small" label="恢复" @click="handleRedo" />
-      <j-button size="small" label="获取数据" @click="handleGetData" />
-      <j-button size="small" label="设置示例数据" @click="handleSetData" />
-      <j-button size="small" label="更新节点" @click="handleUpdateElement" />
-    </div>
-
-    <div style="margin-bottom: 16px">
-      <h3 style="margin: 0 0 8px 0">事件演示</h3>
-      <div
-        style="
-          background: #f5f5f5;
-          padding: 12px;
-          border-radius: 4px;
-          max-height: 150px;
-          overflow-y: auto;
-        "
-      >
-        <div v-if="eventLogs.length === 0" style="color: #999">
-          点击或双击画布中的元素查看事件触发...
-        </div>
-        <div
-          v-for="(log, index) in eventLogs"
-          :key="index"
-          style="margin-bottom: 8px; font-size: 12px"
-        >
-          <strong style="color: #1890ff">[{{ log.time }}]</strong>
-          <span style="color: #52c41a">{{ log.type }}</span
-          >:
-          <code style="background: #fff; padding: 2px 6px; border-radius: 2px; margin-left: 4px">{{
-            log.data
-          }}</code>
-        </div>
-      </div>
-    </div>
-
-    <div
-      style="
-        height: 600px;
-        width: 100%;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        overflow: hidden;
-      "
-    >
-      <j-workflow
-        ref="workflowRef"
-        :line-stroke="lineStroke"
-        :palette-options="useCustomPalette ? customPaletteOptions : undefined"
-        @element-click="handleElementClick"
-        @element-dblclick="handleElementDblclick"
-        @element-create="handleElementCreate"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-const workflowRef = ref()
-
-// 属性演示
-const lineStroke = ref('#1890ff')
-const useCustomPalette = ref(false)
-
-const customPaletteOptions = {
-  'create.start-event': {
-    className: 'icon-start-event',
-    type: 'startEvent',
-    group: 'event',
-    title: '创建开始事件',
-  },
-  'create.end-event': {
-    className: 'icon-end-event',
-    type: 'endEvent',
-    group: 'event',
-    title: '创建结束事件',
-  },
-  'create.task': {
-    className: 'icon-gateway4',
-    type: 'userTask',
-    group: 'activity',
-    title: '创建任务',
-  },
-}
-
-// 事件演示
-const eventLogs = ref<Array<{ time: string; type: string; data: string }>>([])
-
-const addEventLog = (type: string, data: any) => {
-  const time = new Date().toLocaleTimeString()
-  eventLogs.value.unshift({
-    time,
-    type,
-    data: JSON.stringify(data, null, 2),
-  })
-  // 只保留最近10条
-  if (eventLogs.value.length > 10) {
-    eventLogs.value = eventLogs.value.slice(0, 10)
-  }
-}
-
-// 监听属性变化
-watch(lineStroke, (newValue) => {
-  addEventLog('属性变更', {
-    property: 'lineStroke',
-    value: newValue,
-  })
-})
-
-watch(useCustomPalette, (newValue) => {
-  addEventLog('属性变更', {
-    property: 'paletteOptions',
-    value: newValue ? '自定义调色板' : '默认调色板',
-  })
-})
-
-const handleElementClick = (ev: Record<string, any>) => {
-  addEventLog('elementClick (单击)', ev)
-}
-
-const handleElementDblclick = (ev: Record<string, any>) => {
-  addEventLog('elementDblclick (双击)', ev)
-}
-
-const handleElementCreate = (ev: Record<string, any>) => {
-  addEventLog('elementCreate (创建)', ev)
-}
-
-// 方法演示
-const handleReset = () => {
-  workflowRef.value?.reset()
-  addEventLog('方法调用', { method: 'reset()', description: '重置画布视图' })
-}
-
-const handleZoomIn = () => {
-  workflowRef.value?.zoom(0.2)
-  addEventLog('方法调用', { method: 'zoom(0.2)', description: '放大画布' })
-}
-
-const handleZoomOut = () => {
-  workflowRef.value?.zoom(-0.2)
-  addEventLog('方法调用', { method: 'zoom(-0.2)', description: '缩小画布' })
-}
-
-const handleUndo = () => {
-  workflowRef.value?.undo()
-  addEventLog('方法调用', { method: 'undo()', description: '撤销操作' })
-}
-
-const handleRedo = () => {
-  workflowRef.value?.redo()
-  addEventLog('方法调用', { method: 'redo()', description: '恢复操作' })
-}
-
-const handleGetData = () => {
-  const data = workflowRef.value?.getData()
-  addEventLog('方法调用', {
-    method: 'getData()',
-    description: '获取工作流数据',
-    result: data,
-  })
-  console.log('工作流数据:', data)
-}
-
-const handleSetData = () => {
-  const exampleData = [
-    {
-      id: '0a210b2c-a3de-44d1-8f37-174ab5a9e167',
-      type: 'startEvent',
-      name: 'woshi',
-      x: 190,
-      y: 110,
-    },
-    {
-      id: '2c0c0406-864e-4de3-8ffe-6da303cf5c7a',
-      type: 'userTask',
-      name: '我是',
-      x: 251,
-      y: 130,
-    },
-    {
-      id: '4e947a78-91cb-4e23-82f7-238a34c127a8',
-      from: '0a210b2c-a3de-44d1-8f37-174ab5a9e167',
-      to: '2c0c0406-864e-4de3-8ffe-6da303cf5c7a',
-      waypoint: [
-        { x: 226, y: 128 },
-        { x: 239, y: 128 },
-        { x: 239, y: 179 },
-        { x: 251, y: 179 },
-      ],
-      type: 'myline',
-      label: {
-        height: 14,
-        width: 19,
-        x: 226,
-        y: 174,
-      },
-      name: 'hao',
-    },
-  ]
-
-  workflowRef.value?.setData(exampleData)
-  addEventLog('方法调用', {
-    method: 'setData(data)',
-    description: '设置工作流数据',
-    dataCount: exampleData.length,
-  })
-}
-
-const handleUpdateElement = () => {
-  // 先获取当前数据，然后更新第一个节点
-  const data = workflowRef.value?.getData()
-  if (data && data.length > 0) {
-    const firstNode = data.find((item: any) => item.type !== 'myline')
-    if (firstNode) {
-      const updatedNode = {
-        ...firstNode,
-        name: `已更新 - ${new Date().toLocaleTimeString()}`,
-      }
-      workflowRef.value?.updateElemet(updatedNode)
-      addEventLog('方法调用', {
-        method: 'updateElemet(data)',
-        description: '更新节点',
-        nodeId: updatedNode.id,
-      })
-    } else {
-      addEventLog('方法调用', {
-        method: 'updateElemet(data)',
-        description: '更新节点失败：没有可更新的节点',
-        tip: '请先使用"设置示例数据"创建节点',
-      })
-    }
-  } else {
-    addEventLog('方法调用', {
-      method: 'updateElemet(data)',
-      description: '更新节点失败：没有数据',
-      tip: '请先使用"设置示例数据"创建节点',
-    })
-  }
-}
-</script>
+<template>
+  <div>
+    <div style="margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center">
+      <h3 style="margin: 0; width: 100%">属性演示</h3>
+
+      <div style="display: flex; gap: 8px; align-items: center">
+        <label>线条颜色：</label>
+        <j-input-color v-model="lineStroke" style="width: 100px" />
+      </div>
+
+      <div style="display: flex; gap: 8px; align-items: center">
+        <label>自定义调色板：</label>
+        <j-switch v-model="useCustomPalette" />
+      </div>
+    </div>
+
+    <div style="margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center">
+      <h3 style="margin: 0; width: 100%">方法演示</h3>
+
+      <j-button size="small" label="重置画布" @click="handleReset" />
+      <j-button size="small" label="放大 (+0.2)" @click="handleZoomIn" />
+      <j-button size="small" label="缩小 (-0.2)" @click="handleZoomOut" />
+      <j-button size="small" label="撤销" @click="handleUndo" />
+      <j-button size="small" label="恢复" @click="handleRedo" />
+      <j-button size="small" label="获取数据" @click="handleGetData" />
+      <j-button size="small" label="设置示例数据" @click="handleSetData" />
+      <j-button size="small" label="更新节点" @click="handleUpdateElement" />
+    </div>
+
+    <div style="margin-bottom: 16px">
+      <h3 style="margin: 0 0 8px 0">事件演示</h3>
+      <div
+        style="
+          background: #f5f5f5;
+          padding: 12px;
+          border-radius: 4px;
+          max-height: 150px;
+          overflow-y: auto;
+        "
+      >
+        <div v-if="eventLogs.length === 0" style="color: #999">
+          点击或双击画布中的元素查看事件触发...
+        </div>
+        <div
+          v-for="(log, index) in eventLogs"
+          :key="index"
+          style="margin-bottom: 8px; font-size: 12px"
+        >
+          <strong style="color: #1890ff">[{{ log.time }}]</strong>
+          <span style="color: #52c41a">{{ log.type }}</span
+          >:
+          <code style="background: #fff; padding: 2px 6px; border-radius: 2px; margin-left: 4px">{{
+            log.data
+          }}</code>
+        </div>
+      </div>
+    </div>
+
+    <div
+      style="
+        height: 600px;
+        width: 100%;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        overflow: hidden;
+      "
+    >
+      <j-workflow
+        ref="workflowRef"
+        :line-stroke="lineStroke"
+        :palette-options="useCustomPalette ? customPaletteOptions : undefined"
+        @element-click="handleElementClick"
+        @element-dblclick="handleElementDblclick"
+        @element-create="handleElementCreate"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const workflowRef = ref()
+
+// 属性演示
+const lineStroke = ref('#1890ff')
+const useCustomPalette = ref(false)
+
+const customPaletteOptions = {
+  'create.start-event': {
+    className: 'icon-start-event',
+    type: 'startEvent',
+    group: 'event',
+    title: '创建开始事件',
+  },
+  'create.end-event': {
+    className: 'icon-end-event',
+    type: 'endEvent',
+    group: 'event',
+    title: '创建结束事件',
+  },
+  'create.task': {
+    className: 'icon-gateway4',
+    type: 'userTask',
+    group: 'activity',
+    title: '创建任务',
+  },
+}
+
+// 事件演示
+const eventLogs = ref<Array<{ time: string; type: string; data: string }>>([])
+
+const addEventLog = (type: string, data: any) => {
+  const time = new Date().toLocaleTimeString()
+  eventLogs.value.unshift({
+    time,
+    type,
+    data: JSON.stringify(data, null, 2),
+  })
+  // 只保留最近10条
+  if (eventLogs.value.length > 10) {
+    eventLogs.value = eventLogs.value.slice(0, 10)
+  }
+}
+
+// 监听属性变化
+watch(lineStroke, (newValue) => {
+  addEventLog('属性变更', {
+    property: 'lineStroke',
+    value: newValue,
+  })
+})
+
+watch(useCustomPalette, (newValue) => {
+  addEventLog('属性变更', {
+    property: 'paletteOptions',
+    value: newValue ? '自定义调色板' : '默认调色板',
+  })
+})
+
+const handleElementClick = (ev: Record<string, any>) => {
+  addEventLog('elementClick (单击)', ev)
+}
+
+const handleElementDblclick = (ev: Record<string, any>) => {
+  addEventLog('elementDblclick (双击)', ev)
+}
+
+const handleElementCreate = (ev: Record<string, any>) => {
+  addEventLog('elementCreate (创建)', ev)
+}
+
+// 方法演示
+const handleReset = () => {
+  workflowRef.value?.reset()
+  addEventLog('方法调用', { method: 'reset()', description: '重置画布视图' })
+}
+
+const handleZoomIn = () => {
+  workflowRef.value?.zoom(0.2)
+  addEventLog('方法调用', { method: 'zoom(0.2)', description: '放大画布' })
+}
+
+const handleZoomOut = () => {
+  workflowRef.value?.zoom(-0.2)
+  addEventLog('方法调用', { method: 'zoom(-0.2)', description: '缩小画布' })
+}
+
+const handleUndo = () => {
+  workflowRef.value?.undo()
+  addEventLog('方法调用', { method: 'undo()', description: '撤销操作' })
+}
+
+const handleRedo = () => {
+  workflowRef.value?.redo()
+  addEventLog('方法调用', { method: 'redo()', description: '恢复操作' })
+}
+
+const handleGetData = () => {
+  const data = workflowRef.value?.getData()
+  addEventLog('方法调用', {
+    method: 'getData()',
+    description: '获取工作流数据',
+    result: data,
+  })
+  console.log('工作流数据:', data)
+}
+
+const handleSetData = () => {
+  const exampleData = [
+    {
+      id: '0a210b2c-a3de-44d1-8f37-174ab5a9e167',
+      type: 'startEvent',
+      name: 'woshi',
+      x: 190,
+      y: 110,
+    },
+    {
+      id: '2c0c0406-864e-4de3-8ffe-6da303cf5c7a',
+      type: 'userTask',
+      name: '我是',
+      x: 251,
+      y: 130,
+    },
+    {
+      id: '4e947a78-91cb-4e23-82f7-238a34c127a8',
+      from: '0a210b2c-a3de-44d1-8f37-174ab5a9e167',
+      to: '2c0c0406-864e-4de3-8ffe-6da303cf5c7a',
+      waypoint: [
+        { x: 226, y: 128 },
+        { x: 239, y: 128 },
+        { x: 239, y: 179 },
+        { x: 251, y: 179 },
+      ],
+      type: 'myline',
+      label: {
+        height: 14,
+        width: 19,
+        x: 226,
+        y: 174,
+      },
+      name: 'hao',
+    },
+  ]
+
+  workflowRef.value?.setData(exampleData)
+  addEventLog('方法调用', {
+    method: 'setData(data)',
+    description: '设置工作流数据',
+    dataCount: exampleData.length,
+  })
+}
+
+const handleUpdateElement = () => {
+  // 先获取当前数据，然后更新第一个节点
+  const data = workflowRef.value?.getData()
+  if (data && data.length > 0) {
+    const firstNode = data.find((item: any) => item.type !== 'myline')
+    if (firstNode) {
+      const updatedNode = {
+        ...firstNode,
+        name: `已更新 - ${new Date().toLocaleTimeString()}`,
+      }
+      workflowRef.value?.updateElemet(updatedNode)
+      addEventLog('方法调用', {
+        method: 'updateElemet(data)',
+        description: '更新节点',
+        nodeId: updatedNode.id,
+      })
+    } else {
+      addEventLog('方法调用', {
+        method: 'updateElemet(data)',
+        description: '更新节点失败：没有可更新的节点',
+        tip: '请先使用"设置示例数据"创建节点',
+      })
+    }
+  } else {
+    addEventLog('方法调用', {
+      method: 'updateElemet(data)',
+      description: '更新节点失败：没有数据',
+      tip: '请先使用"设置示例数据"创建节点',
+    })
+  }
+}
+</script>