perf: enable hardware acceleration for attachment images (#3831)

#### What type of PR is this?

/kind improvement
/area console
/milestone 2.5.x

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

为附件库的图片渲染添加硬件加速(GPU)的支持,可以改善在附件库包含大量大图时的操作体验,能够缓解卡顿的问题。不过最终还是需要 https://github.com/halo-dev/halo/issues/2387 的支持。

测试(一共 60 张图片,合计 230m):

before:

<img width="766" alt="image" src="https://user-images.githubusercontent.com/21301288/233842635-3181df5d-fd26-44f1-aa30-314a3dba05a6.png">

after:

<img width="858" alt="image" src="https://user-images.githubusercontent.com/21301288/233842542-38a43b82-6452-4728-81ab-45f0cf528465.png">

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

Fixes #3830 

#### Special notes for your reviewer:

测试方式:

1. 上传若干大图,对比修改前对附件库的操作,以及在文章中选择附件。

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

```release-note
优化 Console 端附件库的图片渲染性能。
```
pull/3787/head^2
Ryan Wang 2023-04-24 11:20:19 +08:00 committed by GitHub
parent 5c308993c6
commit 66eb0bb622
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 3 deletions

View File

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

View File

@ -101,7 +101,7 @@ const onVisibleChange = (visible: boolean) => {
"
:alt="attachment?.spec.displayName"
:src="attachment?.status?.permalink"
class="w-auto cursor-pointer rounded"
class="w-auto transform-gpu cursor-pointer rounded"
@click="onlyPreview = !onlyPreview"
/>
</div>

View File

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