feat: enhance snippets API and UI interactions

- Updated the `getGroups` method in the snippets API to support pagination.
- Improved the `SnippetCard` component by adding double-click functionality to open snippet URLs in a new tab.
- Refined the `SnippetMetaForm` component by removing unnecessary class for better styling.
- Adjusted the snippet list handling to correctly map data from the API response.

These changes improve the usability and functionality of the snippets feature in the application.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

src/api/snippets.ts

@@ -56,8 +56,8 @@ export const snippetsApi = {
   delete: (id: string) => request.delete<void>(`/snippets/${id}`),
 
   // 获取分组列表
-  getGroups: (params?: { size?: number }) =>
-    request.get<SnippetGroup[]>('/snippets/group', { params }),
+  getGroups: (params?: { page?: number; size?: number }) =>
+    request.get<PaginateResult<SnippetGroup>>('/snippets/group', { params }),
 
   // 获取分组下的片段
   getGroupSnippets: (reference: string) =>

src/layouts/setup-view.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue'
+
 import { bgUrl } from '~/constants/env'
 
 export default defineComponent({

src/views/extra-features/snippets/components/snippet-card.tsx

@@ -85,17 +85,25 @@ export const SnippetCard = defineComponent({
 
     const snippetUrl = computed(() => {
       const s = props.snippet
-      const base =
-        API_URL +
-        (s.type === SnippetType.Function ? '/fn/' : '/snippets/') +
-        s.reference
-      return `${base}/${s.name}${s.private ? `?token=${getToken()}` : ''}`
+      const path =
+        s.type === SnippetType.Function
+          ? `/serverless/${s.reference}/${s.name}`
+          : `/${s.reference}/${s.name}`
+      return `${API_URL}${path}${s.private ? `?token=${getToken()}` : ''}`
     })
 
     const handleClick = () => {
       props.onSelect?.(props.snippet)
     }
 
+    const handleDoubleClick = (e: MouseEvent) => {
+      // Avoid triggering when double-clicking interactive controls inside the card
+      const target = e.target as HTMLElement | null
+      if (target?.closest('button, a, input, textarea, [role="button"]')) return
+
+      window.open(snippetUrl.value, '_blank')
+    }
+
     const handleExternalLink = (e: MouseEvent) => {
       e.stopPropagation()
       window.open(snippetUrl.value, '_blank')
@@ -119,6 +127,8 @@ export const SnippetCard = defineComponent({
               selected && 'bg-neutral-100 dark:bg-neutral-800',
             ]}
             onClick={handleClick}
+            onDblclick={handleDoubleClick}
+            title="双击打开访问地址"
           >
             {(() => {
               const Icon = typeIcon.value
@@ -178,6 +188,8 @@ export const SnippetCard = defineComponent({
             selected && 'bg-neutral-100 dark:bg-neutral-800/80',
           ]}
           onClick={handleClick}
+          onDblclick={handleDoubleClick}
+          title="双击打开访问地址"
         >
           {/* Row 1: Name + Icons */}
           <div class="flex items-center gap-1.5">

src/views/extra-features/snippets/components/snippet-meta-form.tsx

@@ -227,7 +227,7 @@ export const SnippetMetaForm = defineComponent({
         )}
 
         {/* 开关选项 */}
-        <div class="space-y-3 rounded-md bg-neutral-50 p-3 dark:bg-neutral-800/30">
+        <div class="space-y-3 rounded-md bg-neutral-50 dark:bg-neutral-800/30">
           <SwitchRow
             value={!props.data.private}
             label="公开访问"

src/views/extra-features/snippets/composables/use-snippet-list.ts

@@ -24,7 +24,7 @@ export function useSnippetList() {
         groupsWithSnippets.value.map((g) => [g.reference, g.expanded]),
       )
 
-      groupsWithSnippets.value = data.map((group) => ({
+      groupsWithSnippets.value = data.data.map((group) => ({
         ...group,
         snippets: [],
         expanded: existingExpandedState.get(group.reference) ?? false,