feat: add useExtensionPage composable for managing plugin extensions

- Implemented a new composable `useExtensionPage` to handle various functionalities related to plugin management, including fetching extensions, handling updates, and managing UI states.
- Added support for conflict checking, plugin installation, and custom source management.
- Integrated search and filtering capabilities for plugins in the market.
- Enhanced user experience with dialogs for confirmations and notifications.
- Included pagination and sorting features for better plugin visibility.

Author: Soulter

dashboard/src/components/extension/MarketPluginCard.vue

@@ -34,6 +34,7 @@ const platformDisplayList = computed(() =>
 const handleInstall = (plugin) => {
   emit("install", plugin);
 };
+
 </script>
 
 <template>
@@ -123,6 +124,7 @@ const handleInstall = (plugin) => {
             v-if="plugin?.social_link"
             :href="plugin.social_link"
             target="_blank"
+            @click.stop
             class="text-subtitle-2 font-weight-medium"
             style="
               text-decoration: none;
@@ -213,7 +215,10 @@ const handleInstall = (plugin) => {
       </div>
     </v-card-text>
 
-    <v-card-actions style="gap: 6px; padding: 8px 12px; padding-top: 0">
+    <v-card-actions
+      style="gap: 6px; padding: 8px 12px; padding-top: 0"
+      @click.stop
+    >
       <v-chip
         v-for="tag in plugin.tags?.slice(0, 2)"
         :key="tag"
@@ -248,22 +253,24 @@ const handleInstall = (plugin) => {
       <v-btn
         v-if="plugin?.repo"
         color="secondary"
-        size="x-small"
+        size="small"
         variant="tonal"
+        class="market-action-btn"
         :href="plugin.repo"
         target="_blank"
-        style="height: 24px"
+        style="height: 32px"
       >
-        <v-icon icon="mdi-github" start size="x-small"></v-icon>
+        <v-icon icon="mdi-github" start size="small"></v-icon>
         {{ tm("buttons.viewRepo") }}
       </v-btn>
       <v-btn
         v-if="!plugin?.installed"
         color="primary"
-        size="x-small"
+        size="small"
         @click="handleInstall(plugin)"
         variant="flat"
-        style="height: 24px"
+        class="market-action-btn"
+        style="height: 32px"
       >
         {{ tm("buttons.install") }}
       </v-btn>
@@ -306,4 +313,9 @@ const handleInstall = (plugin) => {
 .plugin-description::-webkit-scrollbar-thumb:hover {
   background-color: rgba(var(--v-theme-primary-rgb), 0.6);
 }
+
+.market-action-btn {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
 </style>