perf: allow clicking on the link address of the data list (#712)

#### What type of PR is this?

/kind improvement
/milestone 2.0

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

为部分包含了主题端路由的资源添加跳转按钮或者链接。

#### Screenshots:

<img width="618" alt="image" src="https://user-images.githubusercontent.com/21301288/203952290-6d04f192-de83-4d6e-b9cf-b89463034b12.png">


#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console 

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

```release-note
Console 端部分包含了主题端路由的数据列表添加跳转按钮或者链接。
```
pull/728/head
Ryan Wang 2022-11-28 22:34:19 +08:00 committed by GitHub
parent 6901cdb812
commit 9b71f4969b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 100 additions and 32 deletions

View File

@ -36,7 +36,12 @@ const wrapperStyles = computed(() => {
<div v-if="title || $slots.title" class="entity-field-title-body">
<slot name="title">
<div class="entity-field-title" @click="emit('click')">
<RouterLink v-if="route" :to="route" :title="title">
<RouterLink
v-if="route"
class="hover:text-gray-600"
:to="route"
:title="title"
>
{{ title }}
</RouterLink>
<span v-else :title="title">

View File

@ -501,8 +501,15 @@ watch(
/>
</div>
</div>
<div class="text-sm text-gray-900 hover:text-blue-600">
{{ permalink }}
<div>
<a
:href="permalink"
:title="permalink"
target="_blank"
class="text-sm text-gray-900 hover:text-blue-600"
>
{{ permalink }}
</a>
</div>
</div>
</div>

View File

@ -8,6 +8,7 @@ import {
IconTeam,
IconAddCircle,
IconRefreshLine,
IconExternalLinkLine,
VButton,
VCard,
VPagination,
@ -663,17 +664,28 @@ function handleClearFilters() {
}"
>
<template #extra>
<RouterLink
v-if="singlePage.page.status?.inProgress"
v-tooltip="`当前有内容已保存,但还未发布。`"
:to="{
name: 'SinglePageEditor',
query: { name: singlePage.page.metadata.name },
}"
class="flex items-center"
>
<VStatusDot state="success" animate />
</RouterLink>
<VSpace>
<RouterLink
v-if="singlePage.page.status?.inProgress"
v-tooltip="`当前有内容已保存,但还未发布。`"
:to="{
name: 'SinglePageEditor',
query: { name: singlePage.page.metadata.name },
}"
class="flex items-center"
>
<VStatusDot state="success" animate />
</RouterLink>
<a
v-if="singlePage.page.status?.permalink"
target="_blank"
:href="singlePage.page.status?.permalink"
:title="singlePage.page.status?.permalink"
class="hidden text-gray-600 transition-all hover:text-gray-900 group-hover:inline-block"
>
<IconExternalLinkLine class="h-3.5 w-3.5" />
</a>
</VSpace>
</template>
<template #description>
<div class="flex w-full flex-col gap-1">
@ -685,11 +697,6 @@ function handleClearFilters() {
评论 {{ singlePage.stats.totalComment || 0 }}
</span>
</VSpace>
<VSpace class="w-full">
<span class="truncate text-xs text-gray-500">
{{ singlePage.page.status?.permalink }}
</span>
</VSpace>
</div>
</template>
</VEntityField>

View File

@ -9,6 +9,7 @@ import {
IconEyeOff,
IconTeam,
IconRefreshLine,
IconExternalLinkLine,
Dialog,
VButton,
VCard,
@ -779,6 +780,15 @@ const hasFilters = computed(() => {
:tag="tag"
route
></PostTag>
<a
v-if="post.post.status?.permalink"
target="_blank"
:href="post.post.status?.permalink"
:title="post.post.status?.permalink"
class="hidden text-gray-600 transition-all hover:text-gray-900 group-hover:inline-block"
>
<IconExternalLinkLine class="h-3.5 w-3.5" />
</a>
</VSpace>
</template>
<template #description>
@ -787,13 +797,16 @@ const hasFilters = computed(() => {
v-if="post.categories.length"
class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
>
分类<span
分类<a
v-for="(category, categoryIndex) in post.categories"
:key="categoryIndex"
:href="category.status?.permalink"
:title="category.status?.permalink"
target="_blank"
class="cursor-pointer hover:text-gray-900"
>
{{ category.spec.displayName }}
</span>
</a>
</p>
<span class="text-xs text-gray-500">
访问量 {{ post.stats.visit || 0 }}

View File

@ -68,10 +68,19 @@ function onDelete(category: CategoryTree) {
</div>
</template>
<template #start>
<VEntityField
:title="category.spec.displayName"
:description="category.status.permalink"
/>
<VEntityField :title="category.spec.displayName">
<template #description>
<a
v-if="category.status.permalink"
:href="category.status.permalink"
:title="category.status.permalink"
target="_blank"
class="truncate text-xs text-gray-500 group-hover:text-gray-900"
>
{{ category.status.permalink }}
</a>
</template>
</VEntityField>
</template>
<template #end>
<VEntityField v-if="category.metadata.deletionTimestamp">

View File

@ -187,10 +187,21 @@ onMounted(async () => {
:is-selected="selectedTag?.metadata.name === tag.metadata.name"
>
<template #start>
<VEntityField :description="tag.status?.permalink">
<VEntityField>
<template #title>
<PostTag :tag="tag" />
</template>
<template #description>
<a
v-if="tag.status?.permalink"
:href="tag.status?.permalink"
:title="tag.status?.permalink"
target="_blank"
class="truncate text-xs text-gray-500 group-hover:text-gray-900"
>
{{ tag.status.permalink }}
</a>
</template>
</VEntityField>
</template>
<template #end>

View File

@ -89,15 +89,23 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
</div>
</template>
<template #start>
<VEntityField
:title="menuItem.status.displayName"
:description="menuItem.status.href"
>
<VEntityField :title="menuItem.status.displayName">
<template #extra>
<VTag v-if="getMenuItemRefDisplayName(menuItem)">
{{ getMenuItemRefDisplayName(menuItem) }}
</VTag>
</template>
<template #description>
<a
v-if="menuItem.status?.href"
:href="menuItem.status?.href"
:title="menuItem.status?.href"
target="_blank"
class="truncate text-xs text-gray-500 group-hover:text-gray-900"
>
{{ menuItem.status.href }}
</a>
</template>
</VEntityField>
</template>
<template #end>

View File

@ -134,7 +134,11 @@ const onUpgradeModalClose = () => {
>
<dt class="text-sm font-medium text-gray-900">网站</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
<a :href="selectedTheme?.spec.website" target="_blank">
<a
:href="selectedTheme?.spec.website"
class="hover:text-gray-600"
target="_blank"
>
{{ selectedTheme?.spec.website }}
</a>
</dd>
@ -144,7 +148,11 @@ const onUpgradeModalClose = () => {
>
<dt class="text-sm font-medium text-gray-900">源码仓库</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
<a :href="selectedTheme?.spec.repo" target="_blank">
<a
:href="selectedTheme?.spec.repo"
class="hover:text-gray-600"
target="_blank"
>
{{ selectedTheme?.spec.repo }}
</a>
</dd>