feat: add supports for open app detail in plugin operation item (#4)

支持在插件项的操作菜单中打开应用市场的应用详情页面。

<img width="592" alt="image" src="https://github.com/halo-dev/plugin-app-store/assets/21301288/365fd748-acef-4546-ad16-ce5bed3306d5">

/kind feature

```release-note
None
```

Author: ruibaby

console/src/components/operation-items/ViewAppStoreOperationItem.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { VDropdownItem } from "@halo-dev/components";
+import { nextTick, ref } from "vue";
+import AppDetailModal from "../AppDetailModal.vue";
+import storeApiClient from "@/utils/store-api-client";
+import type { ApplicationDetail, ApplicationSearchResult } from "@/types";
+
+const props = withDefaults(
+  defineProps<{
+    appId: string;
+  }>(),
+  {}
+);
+
+const detailModal = ref(false);
+const visible = ref(false);
+const app = ref<ApplicationSearchResult>();
+
+async function handleOpenDetailModal() {
+  const { data } = await storeApiClient.get<ApplicationDetail>(
+    `/apis/api.store.halo.run/v1alpha1/applications/${props.appId}`
+  );
+
+  app.value = {
+    application: data.application,
+    latestRelease: data.latestRelease?.release,
+    owner: data.owner,
+  };
+
+  detailModal.value = true;
+  nextTick(() => {
+    visible.value = true;
+  });
+}
+
+function onDetailModalClose() {
+  visible.value = false;
+  setTimeout(() => {
+    detailModal.value = false;
+    app.value = undefined;
+  }, 200);
+}
+</script>
+
+<template>
+  <VDropdownItem @click="handleOpenDetailModal">应用市场</VDropdownItem>
+  <AppDetailModal v-if="detailModal" v-model:visible="visible" :app="app" tab="releases" @close="onDetailModalClose" />
+</template>

console/src/index.ts

@@ -9,6 +9,8 @@ import AppStore from "./views/AppStore.vue";
 import type { Plugin, Theme } from "@halo-dev/api-client";
 import PluginVersionCheckField from "./components/entity-fields/PluginVersionCheckField.vue";
 import ThemeVersionCheckOperationItem from "./components/operation-items/ThemeVersionCheckOperationItem.vue";
+import ViewAppStoreOperationItem from "./components/operation-items/ViewAppStoreOperationItem.vue";
+import { STORE_APP_ID } from "./constant";
 
 export default definePlugin({
   routes: [
@@ -81,5 +83,17 @@ export default definePlugin({
         },
       ];
     },
+    "plugin:list-item:operation:create": (plugin: Ref<Plugin>) => {
+      return [
+        {
+          priority: 11,
+          component: markRaw(ViewAppStoreOperationItem),
+          props: {
+            appId: plugin.value.metadata.annotations?.[STORE_APP_ID],
+          },
+          hidden: !plugin.value.metadata.annotations?.[STORE_APP_ID],
+        },
+      ];
+    },
   },
 });