From 66eb0bb6220dd8bd6d841a221022551c342c15aa Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 24 Apr 2023 11:20:19 +0800
Subject: [PATCH] perf: enable hardware acceleration for attachment images
 (#3831)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 端附件库的图片渲染性能。
```
---
 console/src/modules/contents/attachments/AttachmentList.vue     | 2 +-
 .../contents/attachments/components/AttachmentDetailModal.vue   | 2 +-
 .../components/selector-providers/CoreSelectorProvider.vue      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/console/src/modules/contents/attachments/AttachmentList.vue b/console/src/modules/contents/attachments/AttachmentList.vue
index 4403e7199..88ddf2e10 100644
--- a/console/src/modules/contents/attachments/AttachmentList.vue
+++ b/console/src/modules/contents/attachments/AttachmentList.vue
@@ -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
diff --git a/console/src/modules/contents/attachments/components/AttachmentDetailModal.vue b/console/src/modules/contents/attachments/components/AttachmentDetailModal.vue
index 3bf583acd..c676b686a 100644
--- a/console/src/modules/contents/attachments/components/AttachmentDetailModal.vue
+++ b/console/src/modules/contents/attachments/components/AttachmentDetailModal.vue
@@ -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>
diff --git a/console/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue b/console/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
index cfd6b48e4..64322478e 100644
--- a/console/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
+++ b/console/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
@@ -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">