feat: add supports for preview audio and video file in attachment det…

…ail (#841)

#### What type of PR is this?

/kind feature

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

支持在附件库的附件详情弹框中预览音视频文件。

#### Which issue(s) this PR fixes:

Fixes halo-dev/halo#1923

#### Screenshots:

<img width="1011" alt="image" src="https://user-images.githubusercontent.com/21301288/217746883-92c46d4e-a51d-4b53-ae8e-f647a47b216f.png">
<img width="1010" alt="image" src="https://user-images.githubusercontent.com/21301288/217746922-9b014974-71aa-4d54-aa42-be2ae03647a1.png">


#### Special notes for your reviewer:

测试方式：

1. 上传若干视频和音频文件，检查是否可以正常播放即可。


可供测试的文件：[音视频测试.zip](https://github.com/halo-dev/console/files/10694553/default.zip)

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

```release-note
Console 端的附件详情支持预览音视频文件。
```

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

@@ -118,6 +118,20 @@ const onVisibleChange = (visible: boolean) => {
                 </template>
               </LazyImage>
             </div>
+            <div v-else-if="attachment?.spec.mediaType?.startsWith('video/')">
+              <video
+                :src="attachment.status?.permalink"
+                controls
+                class="max-w-full rounded sm:max-w-[50%]"
+              >
+                当前浏览器不支持该视频播放
+              </video>
+            </div>
+            <div v-else-if="attachment?.spec.mediaType?.startsWith('audio/')">
+              <audio :src="attachment.status?.permalink" controls>
+                当前浏览器不支持该音频播放
+              </audio>
+            </div>
             <span v-else> 此文件不支持预览 </span>
           </dd>
         </div>