feat: allow clear logs

app/renderer/src/components/Controller/SelectController.vue

@@ -6,7 +6,7 @@ import { computed } from 'vue'
 import { useController } from '@/stores/controller'
 
 defineProps<{
-  handle?: ControllerHandle
+  handle?: ControllerHandle | null
 }>()
 
 const emits = defineEmits<{

app/renderer/src/components/LogPanel.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Delete24Regular } from '@vicons/fluent'
+import { NButton, NIcon } from 'naive-ui'
+import { ref } from 'vue'
+
+const logs = ref<string[]>([])
+
+function add(str: string) {
+  logs.value.push(str)
+}
+
+function clear() {
+  logs.value = []
+}
+
+defineExpose({
+  add,
+  clear
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 relative">
+    <div class="absolute right-0 top-0" v-if="logs.length > 0">
+      <NButton @click="clear" text>
+        <template #icon>
+          <NIcon>
+            <Delete24Regular></Delete24Regular>
+          </NIcon>
+        </template>
+      </NButton>
+    </div>
+    <span v-for="(row, idx) of logs" :key="idx"> {{ row }} </span>
+  </div>
+</template>

app/renderer/src/utils/translog.ts

@@ -3,54 +3,41 @@ export function translateCallback(msg: string, detail: string) {
   switch (msg) {
     case 'Controller.UUIDGot':
       return `已获取UUID: ${info.uuid}`
-      break
     case 'Controller.UUIDGetFailed':
       return `获取UUID失败`
-      break
     case 'Controller.ResolutionGot':
       return `已获取分辨率: ${info.resolution.width}x${info.resolution.height}`
-      break
     case 'Controller.ResolutionGetFailed':
       return `获取分辨率失败`
-      break
     case 'Controller.ScreencapInited':
       return `已初始化截图`
-      break
     case 'Controller.ScreencapInitFailed':
       return `初始化截图失败`
-      break
+    case 'Controller.TouchinputInited':
+      return `已初始化输入`
+    case 'Controller.TouchinputInitFailed':
+      return `初始化输入失败`
     case 'Controller.ConnectSuccess':
       return `已连接`
-      break
     case 'Controller.ConnectFailed':
       return `连接失败: ${info.why}`
-      break
 
     case 'Resource.StartLoading':
       return `开始加载 ${info.path}`
-      break
     case 'Resource.LoadingCompleted':
       return `已加载 ${info.path}`
-      break
     case 'Resource.LoadingFailed':
       return `加载 ${info.path} 失败`
-      break
-
     case 'Task.Started':
       return `开始任务 ${info.entry}`
-      break
     case 'Task.Completed':
       return `任务 ${info.entry} 完成`
-      break
     case 'Task.Failed':
       return `任务 ${info.entry} 失败`
-      break
     case 'Task.Stopped':
       return `任务 ${info.entry} 停止`
-      break
 
     default:
       return `${msg}: ${detail}`
-      break
   }
 }

app/renderer/src/views/Devices/DevicesMain.vue

@@ -3,6 +3,7 @@ import { NButton, NCard } from 'naive-ui'
 import { computed, ref } from 'vue'
 
 import EditAdbIOType from '@/components/Device/EditAdbIOType.vue'
+import LogPanel from '@/components/LogPanel.vue'
 import { useTr } from '@/i18n'
 import GridFormLayout from '@/layouts/GridFormLayout.vue'
 import { useController } from '@/stores/controller'
@@ -14,7 +15,7 @@ import { curDevice } from './state'
 
 const { t } = useTr()
 
-const statusMessage = ref<string[]>([])
+const loggerEl = ref<InstanceType<typeof LogPanel> | null>(null)
 
 const { device } = useDevice
 const { connect, disconnect, find, handles } = useController
@@ -53,7 +54,7 @@ async function requestDisconnect() {
 }
 
 function processControllerCallback(msg: string, detail: string) {
-  statusMessage.value.push(translateCallback(msg, detail))
+  loggerEl.value?.add(translateCallback(msg, detail))
 }
 </script>
 
@@ -86,9 +87,7 @@ function processControllerCallback(msg: string, detail: string) {
             {{ t('device.connect.connect') }}
           </NButton>
         </div>
-        <div class="flex flex-col gap-2">
-          <span v-for="(msg, idx) in statusMessage" :key="idx"> {{ msg }} </span>
-        </div>
+        <LogPanel ref="loggerEl"></LogPanel>
       </div>
     </NCard>
   </div>

app/renderer/src/views/Instances/InstancesMain.vue

@@ -4,6 +4,7 @@ import { NButton, NCard, NIcon, NInput, NSelect } from 'naive-ui'
 import { computed, reactive, ref } from 'vue'
 
 import SelectController from '@/components/Controller/SelectController.vue'
+import LogPanel from '@/components/LogPanel.vue'
 import EditGlobalRespackConfig from '@/components/Respack/EditGlobalRespackConfig.vue'
 import EditRespackConfig from '@/components/Respack/EditRespackConfig.vue'
 import SelectRespackResource from '@/components/Respack/SelectRespackResource.vue'
@@ -25,7 +26,8 @@ const { global } = useConfig
 const { create_with, init_from, init_res_from } = useInstance
 
 const running = ref<RunningState>(RunningState.Idle)
-const statusMessage = ref<string[]>([])
+
+const loggerEl = ref<InstanceType<typeof LogPanel> | null>(null)
 
 const entryOption = computed(() => {
   return curInstanceRespackInfo.value
@@ -37,7 +39,7 @@ const entryOption = computed(() => {
 })
 
 function processCallback(msg: string, detail: string) {
-  statusMessage.value.push(translateCallback(msg, detail))
+  loggerEl.value?.add(translateCallback(msg, detail))
 }
 
 async function run() {
@@ -52,7 +54,7 @@ async function run() {
       state: running,
       current: null,
       log: (x: string) => {
-        statusMessage.value.push(x)
+        loggerEl.value?.add(x)
       }
     })
   )
@@ -168,9 +170,7 @@ function requestCreate(id: string) {
           </NButton>
           <NButton @click="stop" v-if="running === RunningState.Running"> 停止 </NButton>
         </div>
-        <div class="flex flex-col gap-2">
-          <span v-for="(msg, idx) in statusMessage" :key="idx"> {{ msg }} </span>
-        </div>
+        <LogPanel ref="loggerEl"></LogPanel>
       </div>
     </NCard>
     <NCard v-else-if="curInstanceHandle">