fix: can not display title of readme screenshots (#19)

/kind bug

修复应用详情页面的截图无法显示文字的问题。

before:

<img width="1216" alt="image" src="https://github.com/halo-dev/plugin-app-store/assets/21301288/a14306ce-954e-4050-8a65-2dd452532ef3">

after:

<img width="1190" alt="image" src="https://github.com/halo-dev/plugin-app-store/assets/21301288/ae513779-717d-4697-9e13-3e4191507f94">

```release-note
修复应用详情页面的截图无法显示文字的问题。
```

console/src/components/AppCard.vue

@@ -43,7 +43,7 @@ const vendor = computed(() => {
 
 <template>
   <div
-    class="group as-relative as-flex as-grid-cols-1 as-flex-col as-overflow-hidden as-rounded as-bg-white as-p-0 as-shadow-sm as-ring-1 as-ring-gray-100 as-transition-all as-duration-500 hover:as-shadow-md hover:as-ring-inherit sm:as-grid sm:as-grid-cols-7 sm:as-p-2"
+    class="as-group as-relative as-flex as-grid-cols-1 as-flex-col as-overflow-hidden as-rounded as-bg-white as-p-0 as-shadow-sm as-ring-1 as-ring-gray-100 as-transition-all as-duration-500 hover:as-shadow-md hover:as-ring-inherit sm:as-grid sm:as-grid-cols-7 sm:as-p-2"
     :class="[
       {
         '!as-grid-cols-1 !as-p-0': !block,

console/src/components/AppStoreTab.vue

@@ -177,7 +177,7 @@ const handleSelectNext = async () => {
             </div>
           </div>
           <div class="as-flex as-flex-row as-gap-2">
-            <div class="group as-cursor-pointer as-rounded as-p-1 hover:as-bg-gray-200" @click="refetch()">
+            <div class="as-group as-cursor-pointer as-rounded as-p-1 hover:as-bg-gray-200" @click="refetch()">
               <IconRefreshLine
                 v-tooltip="$t('core.common.buttons.refresh')"
                 :class="{ 'as-animate-spin as-text-gray-900': isFetching }"

console/src/components/detail/DetailReadme.vue

@@ -54,9 +54,9 @@ function getReadme() {
       <li
         v-for="(screenshot, index) in app.application.spec.screenshots"
         :key="index"
-        class="group as-relative as-w-72 as-cursor-pointer as-overflow-hidden as-rounded"
+        class="as-group as-relative as-w-72 as-cursor-pointer as-overflow-hidden as-rounded"
       >
-        <div class="group as-aspect-h-10 as-aspect-w-16 as-block as-w-full as-bg-gray-100">
+        <div class="as-aspect-h-10 as-aspect-w-16 as-block as-w-full as-bg-gray-100">
           <img
             :src="prependDomain(screenshot.url)"
             :alt="screenshot.description"

console/src/views/AppStore.vue

@@ -239,7 +239,7 @@ const handleSelectNext = async () => {
                   </div>
                 </div>
                 <div class="as-flex as-flex-row as-gap-2">
-                  <div class="group as-cursor-pointer as-rounded as-p-1 hover:as-bg-gray-200" @click="refetch()">
+                  <div class="as-group as-cursor-pointer as-rounded as-p-1 hover:as-bg-gray-200" @click="refetch()">
                     <IconRefreshLine
                       v-tooltip="$t('core.common.buttons.refresh')"
                       :class="{ 'as-animate-spin as-text-gray-900': isFetching }"