@a2simcode/ui 0.0.55 → 0.0.57

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

@@ -1,248 +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>
+<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.55",
+  "version": "0.0.57",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",
@@ -21,6 +21,27 @@
     "docs/examples",
     ".cursor/skills/ui-component-helper"
   ],
+  "scripts": {
+    "dev": "pnpm docs:dev",
+    "build": "vite build && tsx scripts/fix-index-dts.ts",
+    "ui:publish": "pnpm build && npm publish --access public",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "lint": "eslint . --fix",
+    "format": "prettier --write .",
+    "gen:docs": "tsx scripts/gen-api-docs.ts",
+    "gen:dui:docs": "tsx scripts/gen-dui-api-docs.ts",
+    "docs:dev": "pnpm gen:docs && vitepress dev docs",
+    "docs:build": "pnpm gen:docs && vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "dui:install": "cd packages/components-dui && pnpm install",
+    "dui:build": "cd packages/components-dui && pnpm build",
+    "dui:publish": "pnpm dui:build && cd packages/components-dui && npm publish --access public",
+    "dui:dev": "pnpm dui:docs:dev",
+    "dui:docs:dev": "pnpm gen:dui:docs && vitepress dev docs-dui",
+    "dui:docs:build": "pnpm gen:dui:docs && vitepress build docs-dui",
+    "dui:docs:preview": "vitepress preview docs-dui"
+  },
   "keywords": [
     "vue",
     "vue3",
@@ -208,26 +229,5 @@
     "vue": "^3.5.26",
     "vue-docgen-api": "^4.79.2",
     "vue-tsc": "^3.2.3"
-  },
-  "scripts": {
-    "dev": "pnpm docs:dev",
-    "build": "vite build && tsx scripts/fix-index-dts.ts",
-    "ui:publish": "pnpm build && npm publish --access public",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "lint": "eslint . --fix",
-    "format": "prettier --write .",
-    "gen:docs": "tsx scripts/gen-api-docs.ts",
-    "gen:dui:docs": "tsx scripts/gen-dui-api-docs.ts",
-    "docs:dev": "pnpm gen:docs && vitepress dev docs",
-    "docs:build": "pnpm gen:docs && vitepress build docs",
-    "docs:preview": "vitepress preview docs",
-    "dui:install": "cd packages/components-dui && pnpm install",
-    "dui:build": "cd packages/components-dui && pnpm build",
-    "dui:publish": "pnpm dui:build && cd packages/components-dui && npm publish --access public",
-    "dui:dev": "pnpm dui:docs:dev",
-    "dui:docs:dev": "pnpm gen:dui:docs && vitepress dev docs-dui",
-    "dui:docs:build": "pnpm gen:dui:docs && vitepress build docs-dui",
-    "dui:docs:preview": "vitepress preview docs-dui"
   }
-}
+}