feat 插件管理

src/components/cards/PluginAppCard.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import api from "@/api";
+import { Plugin } from "@/api/types";
+import { useToast } from "vue-toast-notification";
+
+// 定义触发的自定义事件
+const emit = defineEmits(["install"]);
+
+// 提示框
+const $toast = useToast();
+
+// 输入参数
+const props = defineProps({
+  plugin: Object as PropType<Plugin>,
+  width: String,
+  height: String,
+});
+
+// 安装插件
+const installPlugin = async () => {
+  try {
+    const result: { [key: string]: any } = await api.get(
+      `plugin/install/${props.plugin?.id}`
+    );
+    if (result.success) {
+      $toast.success(`插件 ${props.plugin?.plugin_name} 安装成功！`);
+      // 通知父组件刷新
+      emit("install");
+    } else {
+      $toast.error(`插件 ${props.plugin?.plugin_name} 安装失败：${result.message}}`);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+</script>
+<template>
+  <VCard :width="props.width" :height="props.height" @click="installPlugin">
+    <div
+      class="relative pa-4 text-center card-cover-blurred"
+      :style="{ background: `${props.plugin?.plugin_color}` }"
+    >
+      <VAvatar size="128" class="shadow">
+        <VImg :src="`/plugin/${props.plugin?.plugin_icon}`" aspect-ratio="4/3" cover />
+      </VAvatar>
+    </div>
+    <VCardTitle>{{ props.plugin?.plugin_name }}</VCardTitle>
+
+    <VCardText>
+      {{ props.plugin?.plugin_desc }}
+    </VCardText>
+    <VCardText>
+      作者：<a :href="props.plugin?.author_url" target="_blank" @click.stop>
+        {{ props.plugin?.plugin_author }}
+      </a>
+    </VCardText>
+  </VCard>
+</template>
+<style type="scss" scoped>
+.card-cover-blurred::before {
+  position: absolute;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  background: rgba(29, 39, 59, 48%);
+  content: "";
+  inset: 0;
+}
+</style>

src/components/cards/PluginCard.vue

@@ -1,5 +1,13 @@
 <script lang="ts" setup>
+import api from "@/api";
 import { Plugin } from "@/api/types";
+import { useToast } from "vue-toast-notification";
+
+// 定义触发的自定义事件
+const emit = defineEmits(["remove"]);
+
+// 提示框
+const $toast = useToast();
 
 // 输入参数
 const props = defineProps({
@@ -8,21 +16,80 @@ const props = defineProps({
   height: String,
 });
 
+// 本身是否可见
+const isVisible = ref(true);
+
+// 卸载插件
+const uninstallPlugin = async () => {
+  try {
+    const result: { [key: string]: any } = await api.delete(`plugin/${props.plugin?.id}`);
+    if (result.success) {
+      $toast.success(`插件 ${props.plugin?.plugin_name} 已卸载`);
+      // 通知父组件刷新
+      emit("remove");
+    } else {
+      $toast.error(`插件 ${props.plugin?.plugin_name} 卸载失败：${result.message}}`);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
 // 显示插件详情
 const showPluginInfo = () => {};
+
+// 弹出菜单
+const dropdownItems = ref([
+  {
+    title: "卸载",
+    value: 1,
+    props: {
+      prependIcon: "mdi-trash-can-outline",
+      color: "error",
+      click: uninstallPlugin,
+    },
+  },
+]);
 </script>
 <template>
-  <VCard :width="props.width" :height="props.height" @click="showPluginInfo">
+  <VCard
+    :width="props.width"
+    :height="props.height"
+    @click="showPluginInfo"
+    v-if="isVisible"
+  >
     <div
       class="relative pa-4 text-center card-cover-blurred"
       :style="{ background: `${props.plugin?.plugin_color}` }"
     >
+      <div class="me-n3 absolute top-0 right-3">
+        <IconBtn>
+          <VIcon icon="mdi-dots-vertical" />
+          <VMenu activator="parent" close-on-content-click>
+            <VList>
+              <VListItem
+                v-for="(item, i) in dropdownItems"
+                variant="plain"
+                :base-color="item.props.color"
+                :key="i"
+                @click="item.props.click"
+              >
+                <template #prepend>
+                  <VIcon :icon="item.props.prependIcon"></VIcon>
+                </template>
+                <VListItemTitle v-text="item.title"></VListItemTitle>
+              </VListItem>
+            </VList>
+          </VMenu>
+        </IconBtn>
+      </div>
       <VAvatar size="128" class="shadow">
         <VImg :src="`/plugin/${props.plugin?.plugin_icon}`" aspect-ratio="4/3" cover />
       </VAvatar>
     </div>
-    <VCardTitle>{{ props.plugin?.plugin_name }}</VCardTitle>
-
+    <VCardItem class="py-2">
+      <VCardTitle>{{ props.plugin?.plugin_name }}</VCardTitle>
+    </VCardItem>
     <VCardText>
       {{ props.plugin?.plugin_desc }}
     </VCardText>

src/views/setting/PluginCardListView.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import api from "@/api";
 import { Plugin } from "@/api/types";
-import PluginCard from "@/components/cards/PluginCard.vue";
 import NoDataFound from "@/components/NoDataFound.vue";
+import PluginAppCard from "@/components/cards/PluginAppCard.vue";
+import PluginCard from "@/components/cards/PluginCard.vue";
 
 // 数据列表
 const dataList = ref<Plugin[]>([]);
@@ -10,7 +11,31 @@ const dataList = ref<Plugin[]>([]);
 // 是否刷新过
 const isRefreshed = ref(false);
 
-// 获取订阅列表数据
+// APP市场窗口
+const PluginAppDialog = ref(false);
+
+// 获取已安装的插件列表
+const getInstalledPluginList = computed(() => {
+  return dataList.value.filter((item) => item.installed);
+});
+
+// 获取未安装的插件列表
+const getUninstalledPluginList = computed(() => {
+  return dataList.value.filter((item) => !item.installed);
+});
+
+// 关闭插件市场窗口
+const pluginDialogClose = () => {
+  PluginAppDialog.value = false;
+};
+
+// 新安装了插件
+const pluginInstalled = () => {
+  fetchData();
+  pluginDialogClose();
+};
+
+// 获取插件列表数据
 const fetchData = async () => {
   try {
     dataList.value = await api.get("plugin");
@@ -32,20 +57,78 @@ onBeforeMount(fetchData);
     color="primary"
   ></VProgressCircular>
   <div class="grid gap-3 grid-plugin-card" v-if="dataList.length > 0">
-    <PluginCard v-for="data in dataList" :key="data.id" :plugin="data" />
+    <PluginCard
+      v-for="data in getInstalledPluginList"
+      :key="data.id"
+      :plugin="data"
+      @remove="fetchData"
+    />
   </div>
   <NoDataFound
-    v-if="dataList.length === 0 && isRefreshed"
+    v-if="getInstalledPluginList.length === 0 && isRefreshed"
     error-code="404"
-    error-title="没有站点"
-    error-description="已加载的插件功能将会在这里展示。"
+    error-title="没有安装插件"
+    error-description="点击右下角按钮，前往插件市场安装插件。"
   >
   </NoDataFound>
+  <!-- App市场 -->
+  <VDialog
+    v-model="PluginAppDialog"
+    fullscreen
+    :scrim="false"
+    transition="dialog-bottom-transition"
+  >
+    <!-- Dialog Activator -->
+    <template #activator="{ props }">
+      <VBtn icon="mdi-plus" v-bind="props" size="x-large" class="fixed right-5 bottom-5">
+      </VBtn>
+    </template>
+
+    <!-- Dialog Content -->
+    <VCard>
+      <!-- Toolbar -->
+      <div>
+        <VToolbar color="primary">
+          <VToolbarTitle>插件市场</VToolbarTitle>
+
+          <VSpacer />
+
+          <VToolbarItems>
+            <VBtn size="x-large" @click="pluginDialogClose">
+              <VIcon color="white" icon="mdi-close" />
+            </VBtn>
+          </VToolbarItems>
+        </VToolbar>
+      </div>
+      <div class="pa-4">
+        <div class="grid gap-3 grid-plugin-card">
+          <PluginAppCard
+            v-for="data in getUninstalledPluginList"
+            :key="data.id"
+            :plugin="data"
+            @install="pluginInstalled"
+          />
+        </div>
+        <NoDataFound
+          v-if="getUninstalledPluginList.length === 0 && isRefreshed"
+          error-code="404"
+          error-title="没有未安装插件"
+          error-description="所有可用插件均已安装。"
+        >
+        </NoDataFound>
+      </div>
+    </VCard>
+  </VDialog>
 </template>
 
 <style type="scss">
 .grid-plugin-card {
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
   padding-block-end: 1rem;
 }
+
+dialog-bottom-transition-enter-active,
+.dialog-bottom-transition-leave-active {
+  transition: transform 0.2s ease-in-out;
+}
 </style>