From 00ecfcd768dab682883355853922ae64e4739144 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 22 May 2025 11:40:56 +0800
Subject: [PATCH] Refactor data list using VEntityContainer

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 app/src/main/resources/plugin.yaml |  2 +-
 ui/package.json                    |  2 +-
 ui/pnpm-lock.yaml                  | 13 +++++++------
 ui/src/components/SourcesTab.vue   | 29 ++++++++++++-----------------
 4 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/app/src/main/resources/plugin.yaml b/app/src/main/resources/plugin.yaml
index fa5c6be..6dfb517 100644
--- a/app/src/main/resources/plugin.yaml
+++ b/app/src/main/resources/plugin.yaml
@@ -8,7 +8,7 @@ metadata:
     "store.halo.run/app-id": "app-KhIVw"
 spec:
   enabled: true
-  requires: ">=2.20.11"
+  requires: ">=2.21.0"
   author:
     name: Halo
     website: https://github.com/halo-dev
diff --git a/ui/package.json b/ui/package.json
index 0558d02..2871489 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@halo-dev/api-client": "^2.20.0",
-    "@halo-dev/components": "^2.20.0",
+    "@halo-dev/components": "https://pkg.pr.new/@halo-dev/components@7383",
     "@halo-dev/console-shared": "^2.20.0",
     "@tanstack/vue-query": "^4.37.1",
     "axios": "^1.7.9",
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index 80f5155..f72079c 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^2.20.0
         version: 2.20.0(axios@1.7.9)
       '@halo-dev/components':
-        specifier: ^2.20.0
-        version: 2.20.0(vue-router@4.5.0(vue@3.5.13(typescript@5.5.4)))(vue@3.5.13(typescript@5.5.4))
+        specifier: https://pkg.pr.new/@halo-dev/components@7383
+        version: https://pkg.pr.new/@halo-dev/components@7383(vue-router@4.5.0(vue@3.5.13(typescript@5.5.4)))(vue@3.5.13(typescript@5.5.4))
       '@halo-dev/console-shared':
         specifier: ^2.20.0
         version: 2.20.0(axios@1.7.9)(vue-router@4.5.0(vue@3.5.13(typescript@5.5.4)))(vue@3.5.13(typescript@5.5.4))
@@ -548,10 +548,11 @@ packages:
     peerDependencies:
       axios: ^1.7.x
 
-  '@halo-dev/components@2.20.0':
-    resolution: {integrity: sha512-mwl/8KdQjjTqCFlfW+oCNaI+vlo0FyT/qI3whC4/IcX6cn7wXQfU//Vub1uRLaqzcjGdJ7i9SJCuy4EMlpdBig==}
+  '@halo-dev/components@https://pkg.pr.new/@halo-dev/components@7383':
+    resolution: {tarball: https://pkg.pr.new/@halo-dev/components@7383}
+    version: 2.21.0
     peerDependencies:
-      vue: ^3.5.11
+      vue: ^3.5.13
       vue-router: ^4.3.2
 
   '@halo-dev/console-shared@2.20.0':
@@ -2935,7 +2936,7 @@ snapshots:
       axios: 1.7.9
       qs: 6.13.1
 
-  '@halo-dev/components@2.20.0(vue-router@4.5.0(vue@3.5.13(typescript@5.5.4)))(vue@3.5.13(typescript@5.5.4))':
+  '@halo-dev/components@https://pkg.pr.new/@halo-dev/components@7383(vue-router@4.5.0(vue@3.5.13(typescript@5.5.4)))(vue@3.5.13(typescript@5.5.4))':
     dependencies:
       floating-vue: 5.2.2(vue@3.5.13(typescript@5.5.4))
       vue: 3.5.13(typescript@5.5.4)
diff --git a/ui/src/components/SourcesTab.vue b/ui/src/components/SourcesTab.vue
index 0d9ac5d..2817182 100644
--- a/ui/src/components/SourcesTab.vue
+++ b/ui/src/components/SourcesTab.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { axiosInstance } from "@halo-dev/api-client";
-import { IconInformation, VEntity, VEntityField, VLoading } from "@halo-dev/components";
+import { IconInformation, VEntity, VEntityContainer, VEntityField, VLoading } from "@halo-dev/components";
 import { useQuery } from "@tanstack/vue-query";
 
 interface Source {
@@ -23,22 +23,17 @@ const { data, isLoading } = useQuery({
   <div class="m-4">
     <VLoading v-if="isLoading" />
     <div v-else class="overflow-hidden border rounded">
-      <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
-        <li v-for="source in data" :key="source.pattern">
-          <VEntity class="group">
-            <template #start>
-              <VEntityField :title="source.displayName" :description="source.pattern">
-                <template #extra>
-                  <IconInformation
-                    v-tooltip="source.description"
-                    class="hidden size-4 text-gray-600 group-hover:block"
-                  />
-                </template>
-              </VEntityField>
-            </template>
-          </VEntity>
-        </li>
-      </ul>
+      <VEntityContainer>
+        <VEntity v-for="source in data" :key="source.pattern" class="group">
+          <template #start>
+            <VEntityField :title="source.displayName" :description="source.pattern">
+              <template #extra>
+                <IconInformation v-tooltip="source.description" class="hidden size-4 text-gray-600 group-hover:block" />
+              </template>
+            </VEntityField>
+          </template>
+        </VEntity>
+      </VEntityContainer>
     </div>
   </div>
 </template>