fix: some vue warn in browser dev console (#679)

#### What type of PR is this?

/kind improvement
/milestone 2.0

#### What this PR does / why we need it:

修复一些因使用不当导致的 Vue warn。

#### Screenshots:

<img width="832" alt="image" src="https://user-images.githubusercontent.com/21301288/199663758-e29f48c4-0c33-4c78-913f-2364ce4b5fbe.png">

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console 

#### Does this PR introduce a user-facing change?

```release-note
None
```

src/modules/contents/attachments/components/AttachmentDetailModal.vue

@@ -100,20 +100,23 @@ const onVisibleChange = (visible: boolean) => {
         >
           <dt class="text-sm font-medium text-gray-900">预览</dt>
           <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            <LazyImage
+            <div
               v-if="isImage(attachment?.spec.mediaType)"
-              :alt="attachment?.spec.displayName"
-              :src="attachment?.status?.permalink"
-              class="max-w-full cursor-pointer rounded sm:max-w-[50%]"
               @click="onlyPreview = !onlyPreview"
             >
-              <template #loading>
+              <LazyImage
-                <span class="text-gray-400">加载中...</span>
+                :alt="attachment?.spec.displayName"
-              </template>
+                :src="attachment?.status?.permalink"
-              <template #error>
+                classes="max-w-full cursor-pointer rounded sm:max-w-[50%]"
-                <span class="text-red-400">加载异常</span>
+              >
-              </template>
+                <template #loading>
-            </LazyImage>
+                  <span class="text-gray-400">加载中...</span>
+                </template>
+                <template #error>
+                  <span class="text-red-400">加载异常</span>
+                </template>
+              </LazyImage>
+            </div>
             <span v-else> 此文件不支持预览 </span>
           </dd>
         </div>

src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue

@@ -118,7 +118,7 @@ await handleFetchAttachments();
             :key="attachment.metadata.name"
             :alt="attachment.spec.displayName"
             :src="attachment.status?.permalink"
-            class="pointer-events-none object-cover group-hover:opacity-75"
+            classes="pointer-events-none object-cover group-hover:opacity-75"
           >
             <template #loading>
               <div class="flex h-full items-center justify-center object-cover">

src/modules/contents/attachments/components/selector-providers/UploadSelectorProvider.vue

@@ -177,7 +177,7 @@ watchEffect(() => {
                 :key="attachment.metadata.name"
                 :alt="attachment.spec.displayName"
                 :src="attachment.status?.permalink"
-                class="pointer-events-none object-cover group-hover:opacity-75"
+                classes="pointer-events-none object-cover group-hover:opacity-75"
               >
                 <template #loading>
                   <div