From 0ff11db1119a5368da1056d23af24ddefa62e488 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 16 May 2023 18:16:55 +0800
Subject: [PATCH] refactor: improve the accessibility of action items in some
 data list (#3919)
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.6.x

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

1. 移除 Entity 组件最外层容器的手型样式，避免出现可点击性的误导。
2. 为部分数据列表项操作提供更多的访问选项。
    1. 文章 / 页面列表添加编辑按钮。
    2. 插件列表项添加详情按钮。
    3. 附件列表项添加详情按钮。

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

Fixes #3914

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

```release-note
优化 Console 端部分数据列表的可访问性
```
---
 .../components/src/components/entity/Entity.vue   |  2 +-
 console/src/locales/en.yaml                       |  1 +
 console/src/locales/zh-CN.yaml                    |  1 +
 console/src/locales/zh-TW.yaml                    |  1 +
 .../contents/attachments/AttachmentList.vue       | 15 +++++++++------
 .../src/modules/contents/pages/SinglePageList.vue | 12 ++++++++++++
 console/src/modules/contents/posts/PostList.vue   | 12 ++++++++++++
 .../system/plugins/components/PluginListItem.vue  | 12 ++++++++++++
 8 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/console/packages/components/src/components/entity/Entity.vue b/console/packages/components/src/components/entity/Entity.vue
index 90be3ee1d..f57ea6d81 100644
--- a/console/packages/components/src/components/entity/Entity.vue
+++ b/console/packages/components/src/components/entity/Entity.vue
@@ -57,7 +57,7 @@ const classes = computed(() => {
 </template>
 <style lang="scss">
 .entity-wrapper {
-  @apply relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50 w-full;
+  @apply relative block px-4 py-3 transition-all hover:bg-gray-50 w-full;
 
   &.entity-selected {
     @apply bg-gray-100;
diff --git a/console/src/locales/en.yaml b/console/src/locales/en.yaml
index b4a7aa19a..4add1c417 100644
--- a/console/src/locales/en.yaml
+++ b/console/src/locales/en.yaml
@@ -1107,6 +1107,7 @@ core:
       upload: Upload
       add: Add
       submit: Submit
+      detail: Detail
     radio:
       "yes": Yes
       "no": No
diff --git a/console/src/locales/zh-CN.yaml b/console/src/locales/zh-CN.yaml
index 2d1a67ab6..0e6cfedd9 100644
--- a/console/src/locales/zh-CN.yaml
+++ b/console/src/locales/zh-CN.yaml
@@ -1107,6 +1107,7 @@ core:
       upload: 上传
       add: 添加
       submit: 提交
+      detail: 详情
     radio:
       "yes": 是
       "no": 否
diff --git a/console/src/locales/zh-TW.yaml b/console/src/locales/zh-TW.yaml
index 1c799febb..a8f69e3c0 100644
--- a/console/src/locales/zh-TW.yaml
+++ b/console/src/locales/zh-TW.yaml
@@ -1107,6 +1107,7 @@ core:
       upload: 上傳
       add: 添加
       submit: 提交
+      detail: 詳情
     radio:
       "yes": 是
       "no": 否
diff --git a/console/src/modules/contents/attachments/AttachmentList.vue b/console/src/modules/contents/attachments/AttachmentList.vue
index 88ddf2e10..6f0e5cec3 100644
--- a/console/src/modules/contents/attachments/AttachmentList.vue
+++ b/console/src/modules/contents/attachments/AttachmentList.vue
@@ -767,13 +767,16 @@ onMounted(() => {
                         </template>
                       </VEntityField>
                     </template>
-                    <template
-                      v-if="
-                        currentUserHasPermission(['system:attachments:manage'])
-                      "
-                      #dropdownItems
-                    >
+                    <template #dropdownItems>
+                      <VDropdownItem @click="handleClickItem(attachment)">
+                        {{ $t("core.common.buttons.detail") }}
+                      </VDropdownItem>
                       <VDropdownItem
+                        v-if="
+                          currentUserHasPermission([
+                            'system:attachments:manage',
+                          ])
+                        "
                         type="danger"
                         @click="handleDelete(attachment)"
                       >
diff --git a/console/src/modules/contents/pages/SinglePageList.vue b/console/src/modules/contents/pages/SinglePageList.vue
index 680b38665..5d52303f5 100644
--- a/console/src/modules/contents/pages/SinglePageList.vue
+++ b/console/src/modules/contents/pages/SinglePageList.vue
@@ -24,6 +24,7 @@ import {
   Toast,
   VDropdown,
   VDropdownItem,
+  VDropdownDivider,
 } from "@halo-dev/components";
 import SinglePageSettingModal from "./components/SinglePageSettingModal.vue";
 import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue";
@@ -846,9 +847,20 @@ const { mutate: changeVisibleMutation } = useMutation({
                 v-if="currentUserHasPermission(['system:singlepages:manage'])"
                 #dropdownItems
               >
+                <VDropdownItem
+                  @click="
+                    $router.push({
+                      name: 'SinglePageEditor',
+                      query: { name: singlePage.page.metadata.name },
+                    })
+                  "
+                >
+                  {{ $t("core.common.buttons.edit") }}
+                </VDropdownItem>
                 <VDropdownItem @click="handleOpenSettingModal(singlePage.page)">
                   {{ $t("core.common.buttons.setting") }}
                 </VDropdownItem>
+                <VDropdownDivider />
                 <VDropdownItem
                   type="danger"
                   @click="handleDelete(singlePage.page)"
diff --git a/console/src/modules/contents/posts/PostList.vue b/console/src/modules/contents/posts/PostList.vue
index df241e2c7..3b4f94fa2 100644
--- a/console/src/modules/contents/posts/PostList.vue
+++ b/console/src/modules/contents/posts/PostList.vue
@@ -24,6 +24,7 @@ import {
   Toast,
   VDropdownItem,
   VDropdown,
+  VDropdownDivider,
 } from "@halo-dev/components";
 import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue";
 import CategoryDropdownSelector from "@/components/dropdown-selector/CategoryDropdownSelector.vue";
@@ -941,9 +942,20 @@ const { mutate: changeVisibleMutation } = useMutation({
                 v-if="currentUserHasPermission(['system:posts:manage'])"
                 #dropdownItems
               >
+                <VDropdownItem
+                  @click="
+                    $router.push({
+                      name: 'PostEditor',
+                      query: { name: post.post.metadata.name },
+                    })
+                  "
+                >
+                  {{ $t("core.common.buttons.edit") }}
+                </VDropdownItem>
                 <VDropdownItem @click="handleOpenSettingModal(post.post)">
                   {{ $t("core.common.buttons.setting") }}
                 </VDropdownItem>
+                <VDropdownDivider />
                 <VDropdownItem type="danger" @click="handleDelete(post.post)">
                   {{ $t("core.common.buttons.delete") }}
                 </VDropdownItem>
diff --git a/console/src/modules/system/plugins/components/PluginListItem.vue b/console/src/modules/system/plugins/components/PluginListItem.vue
index 6eed31e26..ad2188828 100644
--- a/console/src/modules/system/plugins/components/PluginListItem.vue
+++ b/console/src/modules/system/plugins/components/PluginListItem.vue
@@ -11,6 +11,7 @@ import {
   Toast,
   VDropdownItem,
   VDropdown,
+  VDropdownDivider,
 } from "@halo-dev/components";
 import PluginUploadModal from "./PluginUploadModal.vue";
 import { ref, toRefs } from "vue";
@@ -170,9 +171,20 @@ const getFailedMessage = (plugin: Plugin) => {
       v-if="currentUserHasPermission(['system:plugins:manage'])"
       #dropdownItems
     >
+      <VDropdownItem
+        @click="
+          $router.push({
+            name: 'PluginDetail',
+            params: { name: plugin?.metadata.name },
+          })
+        "
+      >
+        {{ $t("core.common.buttons.detail") }}
+      </VDropdownItem>
       <VDropdownItem @click="upgradeModal = true">
         {{ $t("core.common.buttons.upgrade") }}
       </VDropdownItem>
+      <VDropdownDivider />
       <VDropdown placement="left" :triggers="['click']">
         <VDropdownItem type="danger">
           {{ $t("core.common.buttons.uninstall") }}