update console/logs page opacity

ui/pages/console.vue

@@ -58,6 +58,7 @@
 import "@xterm/xterm/css/xterm.css"
 import { Terminal } from "@xterm/xterm"
 import { FitAddon } from "@xterm/addon-fit"
+import { useStorage } from '@vueuse/core'
 
 const terminal = ref()
 const terminalFit = ref()
@@ -67,6 +68,8 @@ const command_input = ref()
 const isLoading = ref(false)
 const config = useConfigStore()
 const socket = useSocketStore()
+const bg_enable = useStorage('random_bg', true)
+const bg_opacity = useStorage('random_bg_opacity', 0.85)
 
 watch(() => isLoading.value, async value => {
   if (value) {
@@ -185,11 +188,17 @@ onMounted(async () => {
   socket.off('cli_output', writer)
   socket.on('cli_close', loader)
   socket.on('cli_output', writer)
+  if (bg_enable.value) {
+    document.querySelector('body').setAttribute("style", `opacity: 1.0`)
+  }
 })
 
 onUnmounted(() => {
   socket.off('cli_close', loader)
   socket.off('cli_output', writer)
   window.removeEventListener('resize', reSizeTerminal)
+  if (bg_enable.value) {
+    document.querySelector('body').setAttribute("style", `opacity: ${bg_opacity.value}`)
+  }
 });
 </script>

ui/pages/logs.vue

@@ -97,6 +97,7 @@ div.logbox pre {
 import moment from 'moment'
 import { request } from '~/utils/index'
 import { ref, onMounted, nextTick } from 'vue'
+import { useStorage } from '@vueuse/core'
 
 let scrollTimeout = null
 
@@ -113,6 +114,8 @@ const logContainer = ref(null)
 const bottomMarker = ref(null)
 const autoScroll = ref(true)
 const textWrap = ref(true)
+const bg_enable = useStorage('random_bg', true)
+const bg_opacity = useStorage('random_bg_opacity', 0.85)
 
 const query = ref(useRoute().query.filter ?? '')
 const toggleFilter = ref(false)
@@ -254,19 +257,25 @@ onMounted(async () => {
         bottomMarker.value.scrollIntoView({ behavior: 'smooth' })
       }
     })
-
   })
+  if (bg_enable.value) {
+    document.querySelector('body').setAttribute("style", `opacity: 1.0`)
+  }
 })
 
 onUnmounted(() => {
   socket.emit('unsubscribe', 'log_lines')
   socket.off('log_lines')
+  if (bg_enable.value) {
+    document.querySelector('body').setAttribute("style", `opacity: ${bg_opacity.value}`)
+  }
 })
 
 onBeforeUnmount(() => {
   socket.emit('unsubscribe', 'log_lines')
   socket.off('log_lines')
   if (scrollTimeout) clearTimeout(scrollTimeout)
+
 })
 
 useHead({ title: 'Logs' })