@a2simcode/ui 0.0.46 → 0.0.47

package/docs/examples/workflow/basic.vue

@@ -0,0 +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>

package/docs/examples/workflow-viewer/basic.vue

@@ -0,0 +1,248 @@
+<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="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-viewer
+        ref="workflowViewerRef"
+        :line-stroke="lineStroke"
+        :palette-options="useCustomPalette ? customPaletteOptions : undefined"
+        @element-click="handleElementClick"
+        @element-dblclick="handleElementDblclick"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const workflowViewerRef = 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 handleReset = () => {
+  workflowViewerRef.value?.reset()
+  addEventLog('方法调用', { method: 'reset()', description: '重置画布视图' })
+}
+
+const handleZoomIn = () => {
+  workflowViewerRef.value?.zoom(0.2)
+  addEventLog('方法调用', { method: 'zoom(0.2)', description: '放大画布' })
+}
+
+const handleZoomOut = () => {
+  workflowViewerRef.value?.zoom(-0.2)
+  addEventLog('方法调用', { method: 'zoom(-0.2)', description: '缩小画布' })
+}
+
+const handleGetData = () => {
+  const data = workflowViewerRef.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',
+    },
+  ]
+
+  workflowViewerRef.value?.setData(exampleData)
+  addEventLog('方法调用', {
+    method: 'setData(data)',
+    description: '设置工作流数据',
+    dataCount: exampleData.length,
+  })
+}
+
+const handleUpdateElement = () => {
+  // 先获取当前数据，然后更新第一个节点
+  const data = workflowViewerRef.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()}`,
+      }
+      workflowViewerRef.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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",
@@ -15,7 +15,11 @@
     "./dist/ui.css": "./dist/ui.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "docs/components/meta",
+    "docs/components",
+    "docs/examples",
+    ".cursor/skills/ui-component-helper"
   ],
   "scripts": {
     "dev": "pnpm docs:dev",