feat: more actions in status card

components/common/dropdown/Dropdown.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { dropdownContextKey } from './ctx'
+
+const dropdown = $ref<any>()
+
+provide(dropdownContextKey, {
+  hide: () => dropdown.hide(),
+})
+</script>
+
+<template>
+  <VDropdown v-bind="$attrs" ref="dropdown">
+    <slot />
+    <template #popper="scope">
+      <slot name="popper" v-bind="scope" />
+    </template>
+  </VDropdown>
+</template>

components/common/dropdown/DropdownItem.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { dropdownContextKey } from './ctx'
+
+defineProps<{
+  icon?: string
+}>()
+const emit = defineEmits(['click'])
+
+const { hide } = inject(dropdownContextKey)!
+
+const handleClick = (evt: MouseEvent) => {
+  hide()
+  emit('click', evt)
+}
+</script>
+
+<template>
+  <div flex gap-2 items-center cursor-pointer px4 py3 font-700 hover="bg-active" @click="handleClick">
+    <div v-if="icon" :class="icon" />
+    <span text-15px><slot /></span>
+  </div>
+</template>

components/common/dropdown/ctx.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue'
+
+export const dropdownContextKey: InjectionKey<{
+  hide: () => void
+}> = Symbol('dropdownContextKey')