feat: add custom action handling to app store and integrate in OverView component

Author: Ayideyia

frontend/src/stores/app.ts

@@ -1,5 +1,5 @@
 import { useI18n } from 'vue-i18n'
-import { computed, ref } from 'vue'
+import { h, computed, ref, type VNode, isVNode, resolveComponent } from 'vue'
 import { defineStore } from 'pinia'
 
 import { useEnvStore } from './env'
@@ -41,6 +41,42 @@ export const useAppStore = defineStore('app', () => {
     y: 0,
   })
 
+  /* Actions */
+  interface CustomAction {
+    component: string
+    componentProps?: Recordable
+    componentSlots?: Recordable
+  }
+  type CustomActionSlot =
+    | (({ h }: any) => VNode | string | number | boolean)
+    | VNode
+    | string
+    | number
+    | boolean
+  const customActions: { [key: string]: CustomAction[] } = {
+    core_state: [],
+  }
+  const addCustomActions = (target: string, actions: CustomAction | CustomAction[]) => {
+    if (!customActions[target]) throw new Error('Target does not exist: ' + target)
+    const _actions = Array.isArray(actions) ? actions : [actions]
+    customActions[target].push(..._actions)
+    const remove = () => {
+      customActions[target] = customActions[target].filter((a) => !_actions.includes(a))
+    }
+    return remove
+  }
+  const renderCustomActionSlot = (slot: CustomActionSlot) => {
+    let result: CustomActionSlot = slot
+    if (typeof result === 'function') {
+      const customH = (type: any, ...args: any[]) => h(resolveComponent(type), ...args)
+      result = result({ h: customH })
+    }
+    if (isVNode(result)) {
+      return result
+    }
+    return h('div', result)
+  }
+
   const { t } = useI18n()
   const envStore = useEnvStore()
 
@@ -146,5 +182,8 @@ export const useAppStore = defineStore('app', () => {
     updatable,
     checkForUpdates,
     downloadApp,
+    customActions,
+    addCustomActions,
+    renderCustomActionSlot,
   }
 })

frontend/src/views/HomeView/components/OverView.vue

@@ -4,7 +4,7 @@ import { ref, onUnmounted, h } from 'vue'
 
 import { getKernelWS } from '@/api/kernel'
 import { useModal } from '@/components/Modal'
-import { useEnvStore, useKernelApiStore } from '@/stores'
+import { useEnvStore, useAppStore, useKernelApiStore } from '@/stores'
 import { ModeOptions } from '@/constant/kernel'
 import { formatBytes, handleChangeMode, message, setIntervalImmediately } from '@/utils'
 
@@ -24,6 +24,7 @@ const statistics = ref({
 
 const { t } = useI18n()
 const [Modal, modalApi] = useModal({})
+const appStore = useAppStore()
 const envStore = useEnvStore()
 const kernelApiStore = useKernelApiStore()
 
@@ -161,6 +162,21 @@ onUnmounted(() => {
       >
         {{ t('home.overview.tunMode') }}
       </Switch>
+      <component
+        v-for="(action, index) in appStore.customActions.core_state"
+        :key="index"
+        :is="action.component"
+        v-bind="action.componentProps"
+        class="ml-8"
+      >
+        <template
+          v-for="([name, slot], index) in Object.entries(action.componentSlots || {})"
+          :key="index"
+          #[name]
+        >
+          <component :is="appStore.renderCustomActionSlot(slot)" />
+        </template>
+      </component>
       <Button
         @click="handleShowApiLogs"
         v-tips="'home.overview.viewlog'"