From 6c1ab867b1d791d6f9c6886cc308ec17a067cbe3 Mon Sep 17 00:00:00 2001
From: ansgoo <haiven_123@163.com>
Date: Fri, 4 Aug 2023 00:14:40 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=AE=8C=E6=88=90=E4=BA=86?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E7=B3=BB=E7=BB=9F=E7=9A=84=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/pages/DesigerView/View.vue     | 10 ++++----
 src/apiView/utils.ts                    |  8 +++++-
 src/apiView/websocket/WebsocketView.vue |  8 +++---
 src/apiView/websocket/handler.ts        |  8 +++---
 src/bus/enums.ts                        | 10 +++++++-
 src/bus/index.ts                        |  3 ++-
 src/bus/logger.ts                       | 33 +++++++++++++++++++++++++
 src/designer/Editor/Editor.vue          |  6 ++---
 src/designer/Editor/Shape/Shape.tsx     |  4 +--
 src/designer/load.ts                    |  8 ++----
 src/designer/state/canvas.ts            |  9 ++++---
 src/designer/toolbars.ts                |  7 +++---
 src/designer/utils.ts                   |  4 +++
 src/scripts/custom/ScriptsEditor.vue    |  4 +--
 14 files changed, 85 insertions(+), 37 deletions(-)
 create mode 100644 src/bus/logger.ts

diff --git a/examples/pages/DesigerView/View.vue b/examples/pages/DesigerView/View.vue
index d6b89fb0..1b19813f 100644
--- a/examples/pages/DesigerView/View.vue
+++ b/examples/pages/DesigerView/View.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script setup lang="ts">
+import { StaticKey, useEventBus } from 'open-data-v/bus'
 /* eslint-disable-next-line @typescript-eslint/consistent-type-imports */
-import { useEventBus } from 'open-data-v/bus'
-import type { Designer } from 'open-data-v/designer'
+import { 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'
@@ -18,9 +18,9 @@ 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') {
+useEventBus(StaticKey.STDOUT, (event) => {
+  const stdout = event as { type: string; name: string; message: any }
+  if (stdout.name === 'handle') {
     let callback = message.info
     if (stdout.type === 'error') {
       callback = message.error
diff --git a/src/apiView/utils.ts b/src/apiView/utils.ts
index 76824ce5..5d9c782f 100644
--- a/src/apiView/utils.ts
+++ b/src/apiView/utils.ts
@@ -1,4 +1,6 @@
-export const uuid = (hasHyphen?: string) => {
+import { Logger } from '../bus'
+
+const uuid = (hasHyphen?: string) => {
   return (
     hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'
   ).replace(/[xy]/g, function (c) {
@@ -7,3 +9,7 @@ export const uuid = (hasHyphen?: string) => {
     return v.toString(16)
   })
 }
+
+const dataLogger = new Logger('data')
+
+export { dataLogger, uuid }
diff --git a/src/apiView/websocket/WebsocketView.vue b/src/apiView/websocket/WebsocketView.vue
index 38b718b4..21d4cc74 100644
--- a/src/apiView/websocket/WebsocketView.vue
+++ b/src/apiView/websocket/WebsocketView.vue
@@ -32,7 +32,7 @@
 </template>
 <script setup lang="ts">
 import { NButton, NButtonGroup, NCard, NInput, NSpace, NTabPane, NTabs } from 'naive-ui'
-import { eventBus } from 'open-data-v/bus'
+import { dataLogger } from 'open-data-v/apiView/utils'
 import { onUnmounted, reactive, ref } from 'vue'
 
 import type { WebsocketOption } from './type'
@@ -77,13 +77,13 @@ const connect = () => {
   close()
   wsInstance = new WebSocket(formData.url)
   wsInstance.onopen = () => {
-    eventBus.emit('stdout', { type: 'info', message: 'wsOpen', form: 'data' })
+    dataLogger.info('wsOpen')
   }
   wsInstance.onmessage = (message) => {
     response.value.data = message.data
   }
-  wsInstance.onerror = (err) => {
-    eventBus.emit('stdout', { type: 'error', message: err, from: 'data' })
+  wsInstance.onerror = (_err) => {
+    dataLogger.error('wsClose')
     close()
   }
 }
diff --git a/src/apiView/websocket/handler.ts b/src/apiView/websocket/handler.ts
index 232319ad..c1fa6a56 100644
--- a/src/apiView/websocket/handler.ts
+++ b/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 { eventBus } from 'open-data-v/bus'
+import { dataLogger } from 'open-data-v/apiView/utils'
 
 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', () => {
-      eventBus.emit('stdout', { type: 'info', message: 'wsOpen', from: 'data' })
+      dataLogger.info('wsOpen')
     })
     const handlerData = (message) => {
       const response: Response = {
@@ -55,8 +55,8 @@ class WebsocketData implements DataInstance {
       }
     }
     this.wsInstance.addEventListener('message', handlerData)
-    this.wsInstance.addEventListener('error', (err) => {
-      eventBus.emit('stdout', { type: 'info', message: err, from: 'data' })
+    this.wsInstance.addEventListener('error', (_err) => {
+      dataLogger.error('ws Error')
       if (!this.options.isRetry) {
         return
       }
diff --git a/src/bus/enums.ts b/src/bus/enums.ts
index e5d1c5e2..8dd20bb3 100644
--- a/src/bus/enums.ts
+++ b/src/bus/enums.ts
@@ -3,5 +3,13 @@ export enum StaticKey {
   REST_KEY = 'REST_KEY',
   ACTIVE_MENU = 'ACTIVE_MENU',
   DRAG_STOP = 'DRAG_STOP',
-  SRCIPT_KEY = 'SRCIPT_KEY'
+  SRCIPT_KEY = 'SRCIPT_KEY',
+  STDOUT = 'STDOUT'
+}
+export enum LogLevel {
+  INFO = 'info',
+  WARN = 'warn',
+  ERROR = 'error',
+  DEBUG = 'debug',
+  SUCCESS = 'success'
 }
diff --git a/src/bus/index.ts b/src/bus/index.ts
index 5428dd68..37d04746 100644
--- a/src/bus/index.ts
+++ b/src/bus/index.ts
@@ -1,4 +1,5 @@
 import { StaticKey } from './enums'
+import Logger from './logger'
 import { channels, eventBus, useEventBus } from './useEventBus'
 
-export { channels, eventBus, StaticKey, useEventBus }
+export { channels, eventBus, Logger, StaticKey, useEventBus }
diff --git a/src/bus/logger.ts b/src/bus/logger.ts
new file mode 100644
index 00000000..4ebe2de3
--- /dev/null
+++ b/src/bus/logger.ts
@@ -0,0 +1,33 @@
+import { LogLevel, StaticKey } from './enums'
+import { eventBus } from './useEventBus'
+
+export default class Logger {
+  public name: string
+  private print({ type, message }: { type: LogLevel; message: string }) {
+    eventBus.emit(StaticKey.STDOUT, {
+      type,
+      message,
+      name: this.name,
+      time: new Date()
+    })
+  }
+
+  constructor(name: string) {
+    this.name = name
+  }
+  public info(message: string) {
+    this.print({ type: LogLevel.INFO, message })
+  }
+  public debug(message: string) {
+    this.print({ type: LogLevel.DEBUG, message })
+  }
+  public warn(message: string) {
+    this.print({ type: LogLevel.WARN, message })
+  }
+  public error(message: string) {
+    this.print({ type: LogLevel.ERROR, message })
+  }
+  public success(message: string) {
+    this.print({ type: LogLevel.SUCCESS, message })
+  }
+}
diff --git a/src/designer/Editor/Editor.vue b/src/designer/Editor/Editor.vue
index 23a68f1a..c0849068 100644
--- a/src/designer/Editor/Editor.vue
+++ b/src/designer/Editor/Editor.vue
@@ -50,7 +50,6 @@
 </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'
@@ -66,6 +65,7 @@ import type { CustomComponent } from 'open-data-v/models'
 import type { ContextmenuItem } from 'open-data-v/plugins/directive/contextmenu/types'
 import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 
+import { systemLogger } from '../../designer/utils'
 import { componentList } from '../load'
 import {
   backgroundToCss,
@@ -110,14 +110,14 @@ const contextmenus = (): ContextmenuItem[] => {
 }
 
 onMounted(() => {
-  eventBus.emit('stdout', { type: 'info', message: '进入编辑模式', from: 'system' })
+  systemLogger.debug('进入编辑模式')
   canvasState.setEditMode(EditMode.EDIT)
   document.addEventListener('paste', pasteComponent)
   document.addEventListener('copy', copyComponent)
 })
 
 onUnmounted(() => {
-  eventBus.emit('stdout', { type: 'info', message: '进入预览模式', from: 'system' })
+  systemLogger.debug('进入预览模式')
   canvasState.setEditMode(EditMode.PREVIEW)
   document.removeEventListener('paste', pasteComponent)
   document.removeEventListener('copy', copyComponent)
diff --git a/src/designer/Editor/Shape/Shape.tsx b/src/designer/Editor/Shape/Shape.tsx
index 9d89c11b..382dc7c3 100644
--- a/src/designer/Editor/Shape/Shape.tsx
+++ b/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, mod360, throttleFrame } from '../../utils'
+import { copyText, mod360, systemLogger, 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) => {
-      eventBus.emit('stdout', { type: 'error', message: err, from: 'system' })
+      systemLogger.error(err.message)
       if (info === 'render function') {
         if (canvasState.isEditMode) {
           if (instance) {
diff --git a/src/designer/load.ts b/src/designer/load.ts
index 565280c0..221c4dfd 100644
--- a/src/designer/load.ts
+++ b/src/designer/load.ts
@@ -1,9 +1,9 @@
 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 { systemLogger } from '../designer/utils'
 import Group from './components/Group'
 // 编辑器左侧组件列表
 const componentList: Record<string, any> = {}
@@ -43,11 +43,7 @@ const useLoadComponent = () => {
           })
           app.component(componentOptions.componentName, asyncComp)
         } else {
-          eventBus.emit('stdout', {
-            type: 'error',
-            message: `${key} is not a valid component`,
-            from: 'sysem'
-          })
+          systemLogger.error(`${key} is not a valid component`)
         }
       })
     }
diff --git a/src/designer/state/canvas.ts b/src/designer/state/canvas.ts
index b8da0105..fb9dc710 100644
--- a/src/designer/state/canvas.ts
+++ b/src/designer/state/canvas.ts
@@ -10,6 +10,7 @@ import type {
   MetaContainerItem,
   Vector
 } from 'open-data-v/designer/type'
+import { handleLogger } from 'open-data-v/designer/utils'
 import { ContainerType, FormType } from 'open-data-v/enum'
 import PixelEnum from 'open-data-v/enum/pixel'
 import type { CustomComponent } from 'open-data-v/models'
@@ -582,7 +583,7 @@ class CanvasState {
       swap(componentData, index, index - 1)
       this.saveComponentData()
     } else {
-      eventBus.emit('stdout', { type: 'info', message: '图层已经到底了', from: 'handle' })
+      handleLogger.warn('图层已经到底了')
     }
   }
   /**
@@ -601,7 +602,7 @@ class CanvasState {
       swap(componentData, index, index + 1)
       this.saveComponentData()
     } else {
-      eventBus.emit('stdout', { type: 'info', message: '图层已经到顶了', from: 'handle' })
+      handleLogger.warn('图层已经到顶了')
     }
   }
 
@@ -621,7 +622,7 @@ class CanvasState {
       componentData.push(myComponments[0])
       this.saveComponentData()
     } else {
-      eventBus.emit('stdout', { type: 'info', message: '图层已经到顶了', from: 'handle' })
+      handleLogger.warn('图层已经到顶了')
     }
   }
   /**
@@ -640,7 +641,7 @@ class CanvasState {
       componentData.unshift(myComponments[0])
       this.saveComponentData()
     } else {
-      eventBus.emit('stdout', { type: 'info', message: '图层已经到底了', from: 'handle' })
+      handleLogger.warn('图层已经到底了')
     }
   }
   /**
diff --git a/src/designer/toolbars.ts b/src/designer/toolbars.ts
index 05386159..22b60623 100644
--- a/src/designer/toolbars.ts
+++ b/src/designer/toolbars.ts
@@ -1,11 +1,10 @@
-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 type { StoreComponentData } from './db'
 import type { CanvasStyleData } from './state/type'
-import { exportRaw, importRaw } from './utils'
+import { exportRaw, handleLogger, importRaw } from './utils'
 
 const snapShotState = useSnapShotState()
 // 状态管理
@@ -19,7 +18,7 @@ const undo = async () => {
       dataSlotters: snapshot.dataSlotters
     })
   } else {
-    eventBus.emit('stdout', { type: 'warn', message: '没有快照了', form: 'handle' })
+    handleLogger.warn('没有快照了')
   }
 }
 
@@ -32,7 +31,7 @@ const recoveryDraft = async () => {
       dataSlotters: snapshot.dataSlotters
     })
   } else {
-    eventBus.emit('stdout', { type: 'warn', message: '没有快照了', from: 'handle' })
+    handleLogger.warn('没有快照了')
   }
 }
 const setShowEm = () => {
diff --git a/src/designer/utils.ts b/src/designer/utils.ts
index f38e4317..4b87cc40 100644
--- a/src/designer/utils.ts
+++ b/src/designer/utils.ts
@@ -1,4 +1,5 @@
 import { cloneDeep, isNumber } from 'lodash-es'
+import { Logger } from 'open-data-v/bus'
 import { componentList } from 'open-data-v/designer/load'
 import useCanvasState from 'open-data-v/designer/state/canvas'
 import useDataState from 'open-data-v/designer/state/data'
@@ -590,3 +591,6 @@ export const diffIndex = (fromIndex: string, toIndex: string): boolean => {
     return false
   }
 }
+
+export const handleLogger = new Logger('handle')
+export const systemLogger = new Logger('system')
diff --git a/src/scripts/custom/ScriptsEditor.vue b/src/scripts/custom/ScriptsEditor.vue
index 7f188983..756019cb 100644
--- a/src/scripts/custom/ScriptsEditor.vue
+++ b/src/scripts/custom/ScriptsEditor.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { eventBus } from 'open-data-v/bus'
+import { handleLogger } from 'open-data-v/designer/utils'
 import { onMounted, ref } from 'vue'
 
 const savedStatus = ref<boolean>(true)
@@ -48,7 +48,7 @@ const handleSubmit = () => {
   emits('change', props.code)
   emits('update:code', props.code)
   savedStatus.value = true
-  eventBus.emit('stdout', { type: 'info', message: '保存成功', from: 'handle' })
+  handleLogger.success('图层已经到底了')
 }
 
 onMounted(async () => {})