From d3060f61d34737aabf19181d795f237391fb2aa1 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 28 Nov 2022 22:34:19 +0800
Subject: [PATCH] perf: allow clicking on the link address of the data list
 (halo-dev/console#712)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 端部分包含了主题端路由的数据列表添加跳转按钮或者链接。
```
---
 .../src/components/entity/EntityField.vue     |  7 +++-
 src/components/editor/DefaultEditor.vue       | 11 +++++-
 src/modules/contents/pages/SinglePageList.vue | 39 +++++++++++--------
 src/modules/contents/posts/PostList.vue       | 17 +++++++-
 .../components/CategoryListItem.vue           | 17 ++++++--
 src/modules/contents/posts/tags/TagList.vue   | 13 ++++++-
 .../menus/components/MenuItemListItem.vue     | 16 ++++++--
 src/modules/interface/themes/ThemeDetail.vue  | 12 +++++-
 8 files changed, 100 insertions(+), 32 deletions(-)

diff --git a/packages/components/src/components/entity/EntityField.vue b/packages/components/src/components/entity/EntityField.vue
index b6c48c28f..60e758e78 100644
--- a/packages/components/src/components/entity/EntityField.vue
+++ b/packages/components/src/components/entity/EntityField.vue
@@ -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">
diff --git a/src/components/editor/DefaultEditor.vue b/src/components/editor/DefaultEditor.vue
index e3189cca7..0677be301 100644
--- a/src/components/editor/DefaultEditor.vue
+++ b/src/components/editor/DefaultEditor.vue
@@ -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>
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index 256fd9cb2..ad4f990f7 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -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>
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index b4658bfab..02cb77373 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -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 }}
diff --git a/src/modules/contents/posts/categories/components/CategoryListItem.vue b/src/modules/contents/posts/categories/components/CategoryListItem.vue
index d6cd473e9..31d2324ee 100644
--- a/src/modules/contents/posts/categories/components/CategoryListItem.vue
+++ b/src/modules/contents/posts/categories/components/CategoryListItem.vue
@@ -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">
diff --git a/src/modules/contents/posts/tags/TagList.vue b/src/modules/contents/posts/tags/TagList.vue
index 292015366..7ca8a1c2a 100644
--- a/src/modules/contents/posts/tags/TagList.vue
+++ b/src/modules/contents/posts/tags/TagList.vue
@@ -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>
diff --git a/src/modules/interface/menus/components/MenuItemListItem.vue b/src/modules/interface/menus/components/MenuItemListItem.vue
index ae2e338b2..090bb6fa4 100644
--- a/src/modules/interface/menus/components/MenuItemListItem.vue
+++ b/src/modules/interface/menus/components/MenuItemListItem.vue
@@ -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>
diff --git a/src/modules/interface/themes/ThemeDetail.vue b/src/modules/interface/themes/ThemeDetail.vue
index 1aa6a781c..be5fffd92 100644
--- a/src/modules/interface/themes/ThemeDetail.vue
+++ b/src/modules/interface/themes/ThemeDetail.vue
@@ -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>