Refactor data list using VEntityContainer (#66)

Refactor data list using ⁠VEntityContainer to optimize display across devices of various sizes.

See halo-dev/halo#7383

Note: Updating to this version requires Halo >= 2.21.0.

```release-note
适配 Halo 2.21.0 的数据列表样式
```

Author: ruibaby

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

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",

ui/pnpm-lock.yaml

@@ -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>