feat: add marketplace

web/src/pages/Plugins.vue

@@ -2,6 +2,10 @@
     <PageTitle title="插件" @refresh="refresh" />
     <v-card id="plugins-toolbar">
         <div id="view-btns">
+            <v-btn-toggle id="plugins-view-toggle" color="primary" v-model="proxy.$store.state.pluginsView" mandatory density="compact">
+                <v-btn class="plugins-view-toggle-btn" value="installed" density="compact">已安装</v-btn>
+                <v-btn class="plugins-view-toggle-btn" value="market" density="compact">插件市场</v-btn>
+            </v-btn-toggle>
         </div>
         <div id="operation-btns">
             <v-tooltip text="设置插件优先级" location="top">
@@ -78,17 +82,21 @@
             </v-btn>
         </div>
     </v-card>
-    <div class="plugins-container">
+    <div class="plugins-container" v-if="proxy.$store.state.pluginsView == 'installed'">
         <v-alert id="no-plugins-alert" v-if="plugins.length == 0" color="warning" icon="$warning" title="暂无插件" text="暂无已安装的插件，请安装插件" density="compact" style="margin-inline: 1rem;"></v-alert>
         <PluginCard class="plugin-card" v-if="plugins.length > 0" v-for="plugin in plugins" :key="plugin.name" :plugin="plugin"
             @toggle="togglePlugin" @update="updatePlugin" @remove="removePlugin" />
     </div>
+    <div class="plugins-container" v-if="proxy.$store.state.pluginsView == 'market'">
+        <Marketplace @installPlugin="installMarketplacePlugin" />
+    </div>
 </template>
 
 <script setup>
 
 import PageTitle from '@/components/PageTitle.vue'
 import PluginCard from '@/components/PluginCard.vue'
+import Marketplace from '@/components/Marketplace.vue'
 
 import draggable from 'vuedraggable'
 
@@ -154,6 +162,12 @@ const removePlugin = (plugin) => {
     })
 }
 
+const installMarketplacePlugin = (repository) => {
+
+    installDialogSource.value = 'https://'+repository
+    isInstallDialogActive.value = true
+}
+
 const installPlugin = () => {
 
     if (installDialogSource.value == '' || installDialogSource.value.trim() == '') {
@@ -224,6 +238,11 @@ const installDialogSource = ref('')
     margin-left: 1rem;
 }
 
+#plugins-view-toggle {
+    margin: 0.5rem;
+    box-shadow: 0 0 0 2px #dddddd;
+}
+
 #operation-btns {
     display: flex;
     flex-direction: row;