refactor: 完成了日志系统的设计

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

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 }

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()
   }
 }

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
       }

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'
 }

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 }

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 })
+  }
+}

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)

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) {

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`)
         }
       })
     }

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('图层已经到底了')
     }
   }
   /**

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 = () => {

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')

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 () => {})