refactor: improve the accessibility of action items in some data list (#3919)

#### 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 端部分数据列表的可访问性
```
pull/3939/head
Ryan Wang 2023-05-16 18:16:55 +08:00 committed by GitHub
parent 88597ac137
commit 0ff11db111
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 49 additions and 7 deletions

View File

@ -57,7 +57,7 @@ const classes = computed(() => {
</template> </template>
<style lang="scss"> <style lang="scss">
.entity-wrapper { .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 { &.entity-selected {
@apply bg-gray-100; @apply bg-gray-100;

View File

@ -1107,6 +1107,7 @@ core:
upload: Upload upload: Upload
add: Add add: Add
submit: Submit submit: Submit
detail: Detail
radio: radio:
"yes": Yes "yes": Yes
"no": No "no": No

View File

@ -1107,6 +1107,7 @@ core:
upload: 上传 upload: 上传
add: 添加 add: 添加
submit: 提交 submit: 提交
detail: 详情
radio: radio:
"yes": "yes":
"no": "no":

View File

@ -1107,6 +1107,7 @@ core:
upload: 上傳 upload: 上傳
add: 添加 add: 添加
submit: 提交 submit: 提交
detail: 詳情
radio: radio:
"yes": "yes":
"no": "no":

View File

@ -767,13 +767,16 @@ onMounted(() => {
</template> </template>
</VEntityField> </VEntityField>
</template> </template>
<template <template #dropdownItems>
v-if=" <VDropdownItem @click="handleClickItem(attachment)">
currentUserHasPermission(['system:attachments:manage']) {{ $t("core.common.buttons.detail") }}
" </VDropdownItem>
#dropdownItems
>
<VDropdownItem <VDropdownItem
v-if="
currentUserHasPermission([
'system:attachments:manage',
])
"
type="danger" type="danger"
@click="handleDelete(attachment)" @click="handleDelete(attachment)"
> >

View File

@ -24,6 +24,7 @@ import {
Toast, Toast,
VDropdown, VDropdown,
VDropdownItem, VDropdownItem,
VDropdownDivider,
} from "@halo-dev/components"; } from "@halo-dev/components";
import SinglePageSettingModal from "./components/SinglePageSettingModal.vue"; import SinglePageSettingModal from "./components/SinglePageSettingModal.vue";
import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue"; import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue";
@ -846,9 +847,20 @@ const { mutate: changeVisibleMutation } = useMutation({
v-if="currentUserHasPermission(['system:singlepages:manage'])" v-if="currentUserHasPermission(['system:singlepages:manage'])"
#dropdownItems #dropdownItems
> >
<VDropdownItem
@click="
$router.push({
name: 'SinglePageEditor',
query: { name: singlePage.page.metadata.name },
})
"
>
{{ $t("core.common.buttons.edit") }}
</VDropdownItem>
<VDropdownItem @click="handleOpenSettingModal(singlePage.page)"> <VDropdownItem @click="handleOpenSettingModal(singlePage.page)">
{{ $t("core.common.buttons.setting") }} {{ $t("core.common.buttons.setting") }}
</VDropdownItem> </VDropdownItem>
<VDropdownDivider />
<VDropdownItem <VDropdownItem
type="danger" type="danger"
@click="handleDelete(singlePage.page)" @click="handleDelete(singlePage.page)"

View File

@ -24,6 +24,7 @@ import {
Toast, Toast,
VDropdownItem, VDropdownItem,
VDropdown, VDropdown,
VDropdownDivider,
} from "@halo-dev/components"; } from "@halo-dev/components";
import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue"; import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue";
import CategoryDropdownSelector from "@/components/dropdown-selector/CategoryDropdownSelector.vue"; import CategoryDropdownSelector from "@/components/dropdown-selector/CategoryDropdownSelector.vue";
@ -941,9 +942,20 @@ const { mutate: changeVisibleMutation } = useMutation({
v-if="currentUserHasPermission(['system:posts:manage'])" v-if="currentUserHasPermission(['system:posts:manage'])"
#dropdownItems #dropdownItems
> >
<VDropdownItem
@click="
$router.push({
name: 'PostEditor',
query: { name: post.post.metadata.name },
})
"
>
{{ $t("core.common.buttons.edit") }}
</VDropdownItem>
<VDropdownItem @click="handleOpenSettingModal(post.post)"> <VDropdownItem @click="handleOpenSettingModal(post.post)">
{{ $t("core.common.buttons.setting") }} {{ $t("core.common.buttons.setting") }}
</VDropdownItem> </VDropdownItem>
<VDropdownDivider />
<VDropdownItem type="danger" @click="handleDelete(post.post)"> <VDropdownItem type="danger" @click="handleDelete(post.post)">
{{ $t("core.common.buttons.delete") }} {{ $t("core.common.buttons.delete") }}
</VDropdownItem> </VDropdownItem>

View File

@ -11,6 +11,7 @@ import {
Toast, Toast,
VDropdownItem, VDropdownItem,
VDropdown, VDropdown,
VDropdownDivider,
} from "@halo-dev/components"; } from "@halo-dev/components";
import PluginUploadModal from "./PluginUploadModal.vue"; import PluginUploadModal from "./PluginUploadModal.vue";
import { ref, toRefs } from "vue"; import { ref, toRefs } from "vue";
@ -170,9 +171,20 @@ const getFailedMessage = (plugin: Plugin) => {
v-if="currentUserHasPermission(['system:plugins:manage'])" v-if="currentUserHasPermission(['system:plugins:manage'])"
#dropdownItems #dropdownItems
> >
<VDropdownItem
@click="
$router.push({
name: 'PluginDetail',
params: { name: plugin?.metadata.name },
})
"
>
{{ $t("core.common.buttons.detail") }}
</VDropdownItem>
<VDropdownItem @click="upgradeModal = true"> <VDropdownItem @click="upgradeModal = true">
{{ $t("core.common.buttons.upgrade") }} {{ $t("core.common.buttons.upgrade") }}
</VDropdownItem> </VDropdownItem>
<VDropdownDivider />
<VDropdown placement="left" :triggers="['click']"> <VDropdown placement="left" :triggers="['click']">
<VDropdownItem type="danger"> <VDropdownItem type="danger">
{{ $t("core.common.buttons.uninstall") }} {{ $t("core.common.buttons.uninstall") }}