feat: add plugin and theme binding check field (#23)

在插件列表添加绑定检测的显示，此功能是为了方便使用者查看哪些已安装的插件和主题还没有和应用市场绑定。 <img width="762" alt="image" src="https://github.com/halo-dev/plugin-app-store/assets/21301288/be5b9c0f-8cb1-41b8-b0d6-4349d250f4d0"> Fixes #22 /kind improvement ```release-note 支持在已安装的插件和主题列表显示未绑定应用市场的提示。 ```
halo-dev · Sep 15, 2023 · 570982e · 570982e
1 parent 6bc7e1c
commit 570982e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/console/src/components/entity-fields/PluginBindingCheckField.vue b/console/src/components/entity-fields/PluginBindingCheckField.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { Plugin } from "@halo-dev/api-client";
+import { VEntityField, VStatusDot } from "@halo-dev/components";
+
+withDefaults(
+  defineProps<{
+    plugin: Plugin;
+  }>(),
+  {}
+);
+</script>
+
+<template>
+  <VEntityField>
+    <template #description>
+      <VStatusDot v-tooltip="`未绑定应用市场，在应用市场覆盖安装之后即可检测新版本`" state="default" />
+    </template>
+  </VEntityField>
+</template>
diff --git a/console/src/components/operation-items/ThemeBindingCheckOperationItem.vue b/console/src/components/operation-items/ThemeBindingCheckOperationItem.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { Theme } from "@halo-dev/api-client";
+import { VStatusDot } from "@halo-dev/components";
+
+withDefaults(
+  defineProps<{
+    theme: Theme;
+  }>(),
+  {}
+);
+</script>
+
+<template>
+  <VStatusDot v-tooltip="`未绑定应用市场，在应用市场覆盖安装之后即可检测新版本`" state="default" />
+</template>
diff --git a/console/src/index.ts b/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 PluginBindingCheckField from "./components/entity-fields/PluginBindingCheckField.vue";
+import ThemeBindingCheckOperationItem from "./components/operation-items/ThemeBindingCheckOperationItem.vue";
 import ViewAppStoreOperationItem from "./components/operation-items/ViewAppStoreOperationItem.vue";
 import { STORE_APP_ID } from "./constant";
 
@@ -70,6 +72,15 @@ export default definePlugin({
             plugin: plugin,
           },
         },
+        {
+          priority: 42,
+          position: "end",
+          component: markRaw(PluginBindingCheckField),
+          props: {
+            plugin: plugin,
+          },
+          hidden: !!plugin.value.metadata.annotations?.[STORE_APP_ID],
+        },
       ];
     },
     "theme:list-item:operation:create": (theme: Ref<Theme>) => {
@@ -81,6 +92,14 @@ export default definePlugin({
             theme,
           },
         },
+        {
+          priority: 1,
+          component: markRaw(ThemeBindingCheckOperationItem),
+          props: {
+            theme,
+          },
+          hidden: !!theme.value.metadata.annotations?.[STORE_APP_ID],
+        },
       ];
     },
     "plugin:list-item:operation:create": (plugin: Ref<Plugin>) => {