refactor: 分离了核心库的消息输出

examples/pages/DesigerView/View.vue

@@ -4,7 +4,8 @@
 
 <script setup lang="ts">
 /* eslint-disable-next-line @typescript-eslint/consistent-type-imports */
-import { Designer } from 'open-data-v/designer'
+import { useEventBus } from 'open-data-v/bus'
+import type { Designer } from 'open-data-v/designer'
 import useCanvasState from 'open-data-v/designer/state/canvas'
 import useDataState from 'open-data-v/designer/state/data'
 import { onMounted, ref, watch } from 'vue'
@@ -15,6 +16,28 @@ import QuickDataPlugin from '@/data/Quick'
 import RestDataPlugin from '@/data/Rest'
 import useToolBars from '@/pages/DesigerView/toolbars'
 import { useProjectSettingStoreWithOut } from '@/store/modules/projectSetting'
+import { message } from '@/utils/message'
+
+useEventBus('stdout', (event) => {
+  const stdout = event as { type: string; from: string; message: any }
+  if (stdout.from === 'handle') {
+    let callback = message.info
+    if (stdout.type === 'error') {
+      callback = message.error
+    } else if (stdout.type === 'warn') {
+      callback = message.warning
+    }
+    callback(stdout.message)
+  } else {
+    let callback = console.info
+    if (stdout.type === 'error') {
+      callback = console.error
+    } else if (stdout.type === 'warn') {
+      callback = console.warn
+    }
+    callback(stdout.message)
+  }
+})
 
 const canvasState = useCanvasState()
 const dataState = useDataState()

src/apiView/utils.ts

@@ -1,5 +1,3 @@
-export const Logger = console
-
 export const uuid = (hasHyphen?: string) => {
   return (
     hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'

src/apiView/websocket/WebsocketView.vue

@@ -32,9 +32,9 @@
 </template>
 <script setup lang="ts">
 import { NButton, NButtonGroup, NCard, NInput, NSpace, NTabPane, NTabs } from 'naive-ui'
+import { eventBus } from 'open-data-v/bus'
 import { onUnmounted, reactive, ref } from 'vue'
 
-import { Logger } from '../utils'
 import type { WebsocketOption } from './type'
 
 const props = withDefaults(
@@ -77,13 +77,13 @@ const connect = () => {
   close()
   wsInstance = new WebSocket(formData.url)
   wsInstance.onopen = () => {
-    Logger.info('wsOpen')
+    eventBus.emit('stdout', { type: 'info', message: 'wsOpen', form: 'data' })
   }
   wsInstance.onmessage = (message) => {
     response.value.data = message.data
   }
   wsInstance.onerror = (err) => {
-    Logger.error(err)
+    eventBus.emit('stdout', { type: 'error', message: err, from: 'data' })
     close()
   }
 }

src/apiView/websocket/handler.ts

@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash-es'
 import type { DataAcceptor, DataInstance, Response } from 'open-data-v/apiView/type'
-import { Logger } from 'open-data-v/apiView/utils'
+import { eventBus } from 'open-data-v/bus'
 
 import type { WebsocketOption } from './type'
 
@@ -35,7 +35,7 @@ class WebsocketData implements DataInstance {
   private async wsconnect() {
     this.wsInstance = new WebSocket(this.options.url)
     this.wsInstance.addEventListener('open', () => {
-      Logger.info('wsOpen')
+      eventBus.emit('stdout', { type: 'info', message: 'wsOpen', from: 'data' })
     })
     const handlerData = (message) => {
       const response: Response = {
@@ -56,7 +56,7 @@ class WebsocketData implements DataInstance {
     }
     this.wsInstance.addEventListener('message', handlerData)
     this.wsInstance.addEventListener('error', (err) => {
-      Logger.error(err)
+      eventBus.emit('stdout', { type: 'info', message: err, from: 'data' })
       if (!this.options.isRetry) {
         return
       }

src/designer/Editor/Editor.vue

@@ -50,6 +50,7 @@
 </template>
 
 <script setup lang="ts">
+import { eventBus } from 'open-data-v/bus'
 import { EditMode } from 'open-data-v/designer/const'
 import Area from 'open-data-v/designer/Editor/Area.vue'
 import Grid from 'open-data-v/designer/Editor/Grid.vue'
@@ -71,7 +72,6 @@ import {
   createComponent,
   filterStyle,
   getComponentShapeStyle,
-  Logger,
   uuid
 } from '../utils'
 
@@ -110,14 +110,14 @@ const contextmenus = (): ContextmenuItem[] => {
 }
 
 onMounted(() => {
-  Logger.log('进入编辑模式')
+  eventBus.emit('stdout', { type: 'info', message: '进入编辑模式', from: 'system' })
   canvasState.setEditMode(EditMode.EDIT)
   document.addEventListener('paste', pasteComponent)
   document.addEventListener('copy', copyComponent)
 })
 
 onUnmounted(() => {
-  Logger.log('进入预览模式')
+  eventBus.emit('stdout', { type: 'info', message: '进入预览模式', from: 'system' })
   canvasState.setEditMode(EditMode.PREVIEW)
   document.removeEventListener('paste', pasteComponent)
   document.removeEventListener('copy', copyComponent)

src/designer/Editor/Shape/Shape.tsx

@@ -9,7 +9,7 @@ import type { ComponentPublicInstance, PropType } from 'vue'
 import { computed, defineComponent, onErrorCaptured, onMounted, ref, watch } from 'vue'
 
 import { stretchedComponents } from '../../component'
-import { copyText, Logger, mod360, throttleFrame } from '../../utils'
+import { copyText, mod360, throttleFrame } from '../../utils'
 import styles from './shape.module.less'
 
 export default defineComponent({
@@ -135,7 +135,7 @@ export default defineComponent({
     const errorInfo = ref<string>('')
 
     onErrorCaptured((err: Error, instance: ComponentPublicInstance | null, info: string) => {
-      Logger.log(err)
+      eventBus.emit('stdout', { type: 'error', message: err, from: 'system' })
       if (info === 'render function') {
         if (canvasState.isEditMode) {
           if (instance) {

src/designer/load.ts

@@ -1,12 +1,10 @@
 import { NSpin } from 'naive-ui'
+import { eventBus } from 'open-data-v/bus'
 import type { CustomComponent } from 'open-data-v/models'
 import type { App } from 'vue'
 import { defineAsyncComponent } from 'vue'
 
 import Group from './components/Group'
-
-const Logger = console
-
 // 编辑器左侧组件列表
 const componentList: Record<string, any> = {}
 
@@ -45,7 +43,11 @@ const useLoadComponent = () => {
           })
           app.component(componentOptions.componentName, asyncComp)
         } else {
-          Logger.error(`${key} is not a valid component`)
+          eventBus.emit('stdout', {
+            type: 'error',
+            message: `${key} is not a valid component`,
+            from: 'sysem'
+          })
         }
       })
     }

src/designer/modules/arrayItem/ArrayItem.vue

@@ -31,7 +31,6 @@
 <script lang="ts" setup>
 import { isNumber } from 'lodash-es'
 import { NInput, NSpace } from 'naive-ui'
-import { message } from 'open-data-v/utils/message'
 import { nextTick, reactive, ref } from 'vue'
 
 const props = withDefaults(
@@ -62,13 +61,11 @@ arrayValue.splice(0, props.value.length, ...props.value)
 
 const handleAdd = () => {
   if (!newValue.value.trim()) {
-    message.warning('请输入数据')
     return
   }
 
   const { maxItem } = props
   if (isNumber(maxItem) && arrayValue.length >= maxItem) {
-    message.warning(`最多 ${maxItem} 个输入框，添加失败`)
     return
   }
 
@@ -83,7 +80,6 @@ const handleAdd = () => {
 const handleDelete = (index: number) => {
   // minItem 有默认值，默认值为数值，不用再判断
   if (arrayValue.length <= props.minItem) {
-    message.warning(`最少 ${props.minItem} 个输入框，删除失败`)
     return
   }
   arrayValue.splice(index, 1)

src/designer/state/canvas.ts

@@ -15,7 +15,6 @@ import PixelEnum from 'open-data-v/enum/pixel'
 import type { CustomComponent } from 'open-data-v/models'
 import type { DataInstance } from 'open-data-v/models/type'
 import { buildModeValue, updateModeValue } from 'open-data-v/models/utils'
-import { message } from 'open-data-v/utils/message'
 import { reactive } from 'vue'
 
 import {
@@ -583,7 +582,7 @@ class CanvasState {
       swap(componentData, index, index - 1)
       this.saveComponentData()
     } else {
-      message.info('图层已经到底了')
+      eventBus.emit('stdout', { type: 'info', message: '图层已经到底了', from: 'handle' })
     }
   }
   /**
@@ -602,7 +601,7 @@ class CanvasState {
       swap(componentData, index, index + 1)
       this.saveComponentData()
     } else {
-      message.info('图层已经到顶了')
+      eventBus.emit('stdout', { type: 'info', message: '图层已经到顶了', from: 'handle' })
     }
   }
 
@@ -622,7 +621,7 @@ class CanvasState {
       componentData.push(myComponments[0])
       this.saveComponentData()
     } else {
-      message.info('图层已经到顶了')
+      eventBus.emit('stdout', { type: 'info', message: '图层已经到顶了', from: 'handle' })
     }
   }
   /**
@@ -641,7 +640,7 @@ class CanvasState {
       componentData.unshift(myComponments[0])
       this.saveComponentData()
     } else {
-      message.info('图层已经到底了')
+      eventBus.emit('stdout', { type: 'info', message: '图层已经到底了', from: 'handle' })
     }
   }
   /**

src/designer/toolbars.ts

@@ -1,7 +1,7 @@
+import { eventBus } from 'open-data-v/bus'
 import useCanvasState from 'open-data-v/designer/state/canvas'
 import useSnapShotState from 'open-data-v/designer/state/snapshot'
 import type { ComponentDataType } from 'open-data-v/designer/type'
-import { message } from 'open-data-v/utils/message'
 
 import type { StoreComponentData } from './db'
 import type { CanvasStyleData } from './state/type'
@@ -19,7 +19,7 @@ const undo = async () => {
       dataSlotters: snapshot.dataSlotters
     })
   } else {
-    message.warning('没有快照了')
+    eventBus.emit('stdout', { type: 'warn', message: '没有快照了', form: 'handle' })
   }
 }
 
@@ -32,7 +32,7 @@ const recoveryDraft = async () => {
       dataSlotters: snapshot.dataSlotters
     })
   } else {
-    message.warning('没有快照了')
+    eventBus.emit('stdout', { type: 'warn', message: '没有快照了', from: 'handle' })
   }
 }
 const setShowEm = () => {

src/designer/utils.ts

@@ -590,4 +590,3 @@ export const diffIndex = (fromIndex: string, toIndex: string): boolean => {
     return false
   }
 }
-export const Logger = console

src/scripts/custom/ScriptsEditor.vue

@@ -18,10 +18,9 @@
 </template>
 
 <script lang="ts" setup>
+import { eventBus } from 'open-data-v/bus'
 import { onMounted, ref } from 'vue'
 
-const Logger = console
-
 const savedStatus = ref<boolean>(true)
 const props = withDefaults(
   defineProps<{
@@ -49,7 +48,7 @@ const handleSubmit = () => {
   emits('change', props.code)
   emits('update:code', props.code)
   savedStatus.value = true
-  Logger.info('保存成功')
+  eventBus.emit('stdout', { type: 'info', message: '保存成功', from: 'handle' })
 }
 
 onMounted(async () => {})