+ prop postTypeText for showing URL hash fragment link and permalink

* move the showing of post ID out of the tippy of timestamps @ `badges/<BadgePostCommon>` * move the `<RouterLink>` to the post id into `<BadgePostCommon>` @ `<ReplyItem>` & `<SubReplyGroup>` - ref `hoveringSubReplyID` since no longer hiding `<BadgePostCommon>` when not hovering on it @ `<SubReplyGroup>` @ renderers/list @ components/Post + icons for `<BadgePostCommon>` @ shared/fontAwesome.ts @ fe
n0099 · Mar 14, 2024 · 7f8f402 · 7f8f402
1 parent 5f0e48b
commit 7f8f402
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 24 deletions.
diff --git a/fe/src/components/Post/badges/BadgePostCommon.vue b/fe/src/components/Post/badges/BadgePostCommon.vue
@@ -1,32 +1,49 @@
 <template>
+    <code class="text-primary-emphasis">{{ postIDKey }}:{{ props.post[props.postIDKey] }}</code>
+    <RouterLink v-if="postIDKey === 'tid' || postIDKey === 'pid'"
+                :to="{ hash: `#${postIDKey === 'tid' ? 't' : ''}${props.post[props.postIDKey]}` }"
+                :data-tippy-content="`跳至本${postTypeText}链接`"
+                class="badge bg-light rounded-pill link-dark">
+        <FontAwesomeIcon icon="hashtag" size="lg" class="align-bottom" />
+    </RouterLink>
+    <RouterLink :to="{
+                    name: `post/${postIDKey}`,
+                    params: { [props.postIDKey]: props.post[props.postIDKey] as Tid | Pid | Spid }
+                }"
+                :data-tippy-content="`固定链接/只看此${postTypeText}`"
+                class="badge bg-light rounded-pill link-dark">
+        <FontAwesomeIcon icon="link" size="lg" class="align-bottom" />
+    </RouterLink>
     <a :href="tiebaPostLink(props.post.tid,
                             (props.post as Reply | SubReply).pid,
                             (props.post as SubReply).spid)"
-       target="_blank" class="badge bg-light rounded-pill link-dark">
-        <FontAwesomeIcon icon="link" size="lg" class="align-bottom" />
-    </a>
-    <a :data-tippy-content="`<h6>${postIDKey}：${props.post[props.postIDKey]}</h6><hr />
-        首次收录时间：${formatTime(props.post.createdAt)}<br />
-        最后更新时间：${formatTime(props.post.updatedAt ?? props.post.createdAt)}<br />
-        最后发现时间：${formatTime(props.post.lastSeenAt ?? props.post.updatedAt ?? props.post.createdAt)}`"
-       class="badge bg-light rounded-pill link-dark">
-        <FontAwesomeIcon icon="info" size="lg" class="align-bottom" />
+       class="badge bg-light rounded-pill link-dark" data-tippy-content="在贴吧中查看" target="_blank">
+        <FontAwesomeIcon icon="arrow-up-right-from-square" size="lg" class="align-bottom" />
     </a>
+    <span :data-tippy-content="`
+            首次收录时间：${formatTime(props.post.createdAt)}<br />
+            最后更新时间：${formatTime(props.post.updatedAt ?? props.post.createdAt)}<br />
+            最后发现时间：${formatTime(props.post.lastSeenAt ?? props.post.updatedAt ?? props.post.createdAt)}`"
+          class="badge bg-light rounded-pill link-dark">
+        <FontAwesomeIcon icon="clock" size="lg" class="align-bottom" />
+    </span>
 </template>
 
 <script setup lang="ts" generic="
     TPost extends Post,
     TPostIDKey extends keyof TPost & PostIDOf<TPost>">
 import type { Reply, SubReply } from '@/api/post';
-import type { Post, PostIDOf, UnixTimestamp } from '@/shared';
+import type { Pid, Post, PostIDOf, PostTypeTextOf, Spid, Tid, UnixTimestamp } from '@/shared';
 import { tiebaPostLink } from '@/shared';
+import { RouterLink } from 'vue-router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { DateTime } from 'luxon';
 
 // https://github.com/vuejs/language-tools/issues/3267
 const props = defineProps<{
     post: TPost,
-    postIDKey: TPostIDKey
+    postIDKey: TPostIDKey,
+    postTypeText: PostTypeTextOf<TPost>
 }>();
 const formatTime = (time: UnixTimestamp) => {
     const dateTime = DateTime.fromSeconds(time);

diff --git a/fe/src/components/Post/renderers/list/ReplyItem.vue b/fe/src/components/Post/renderers/list/ReplyItem.vue
@@ -15,9 +15,7 @@
                 -->
             </div>
             <div class="float-end badge bg-light fs-6 p-1 pe-2" role="group">
-                <RouterLink :to="{ name: 'post/pid', params: { pid: reply.pid } }"
-                            class="badge bg-light rounded-pill link-dark">只看此楼</RouterLink>
-                <BadgePostCommon :post="reply" postIDKey="pid" />
+                <BadgePostCommon :post="reply" postIDKey="pid" postTypeText="回复贴" />
                 <BadgePostTime postType="回复贴" :parentPost="thread"
                                :previousPost="previousReply" :currentPost="reply" :nextPost="nextReply"
                                postTimeKey="postedAt" timestampType="发帖时间" class="bg-primary" />

diff --git a/fe/src/components/Post/renderers/list/SubReplyGroup.vue b/fe/src/components/Post/renderers/list/SubReplyGroup.vue
@@ -2,8 +2,6 @@
     <div class="sub-reply-group bs-callout bs-callout-success">
         <ul class="list-group list-group-flush">
             <li v-for="(subReply, subReplyGroupIndex) in subReplyGroup" :key="subReply.spid"
-                @mouseenter="() => { hoveringSubReplyID = subReply.spid }"
-                @mouseleave="() => { hoveringSubReplyID = 0 }"
                 class="sub-reply-item list-group-item">
                 <template v-for="author in [getUser(subReply.authorUid)]" :key="author.uid">
                     <RouterLink v-if="subReplyGroup[subReplyGroupIndex - 1] === undefined" :to="toUserRoute(author.uid)"
@@ -18,9 +16,7 @@
                                    :replyAuthorUid="reply.authorUid" />
                     </RouterLink>
                     <div class="float-end badge bg-light fs-6 p-1 pe-2" role="group">
-                        <div class="d-inline" :class="{ invisible: hoveringSubReplyID !== subReply.spid }">
-                            <BadgePostCommon :post="subReply" postIDKey="spid" />
-                        </div>
+                        <BadgePostCommon :post="subReply" postIDKey="spid" postTypeText="楼中楼" />
                         <BadgePostTime postType="楼中楼" :parentPost="reply" :currentPost="subReply"
                                        :previousTimeOverride="getSiblingPostedAt(subReplyGroupIndex, 'previous')"
                                        :nextTimeOverride="getSiblingPostedAt(subReplyGroupIndex, 'next')"
@@ -40,7 +36,7 @@ import BadgePostTime from '@/components/Post/badges/BadgePostTime.vue';
 import BadgeUser from '@/components/Post/badges/BadgeUser.vue';
 import type { Reply, SubReply, Thread } from '@/api/post';
 import { toUserPortraitImageUrl, toUserRoute } from '@/shared';
-import { inject, ref } from 'vue';
+import { inject } from 'vue';
 import { RouterLink } from 'vue-router';
 
 const props = defineProps<{
@@ -53,7 +49,6 @@ const props = defineProps<{
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const { getUser, renderUsername } = inject<UserProvision>('userProvision')!;
-const hoveringSubReplyID = ref(0);
 const getSiblingPostedAt = (index: number, direction: 'previous' | 'next') =>
     (props.subReplyGroup[index + (direction === 'next' ? 1 : -1)] as SubReply | undefined
         ?? (direction === 'next' ? props.nextSubReplyGroup?.[0] : props.previousSubReplyGroup?.at(-1))

diff --git a/fe/src/components/Post/renderers/list/ThreadItem.vue b/fe/src/components/Post/renderers/list/ThreadItem.vue
@@ -8,9 +8,7 @@
                     <h6 class="thread-title-inline-start-title overflow-hidden text-nowrap">{{ thread.title }}</h6>
                 </div>
                 <div class="col-auto badge bg-light fs-6 p-1 pt-0 pe-2" role="group">
-                    <RouterLink :to="{ name: 'post/tid', params: { tid: thread.tid } }"
-                                class="badge bg-light rounded-pill link-dark">只看此帖</RouterLink>
-                    <BadgePostCommon :post="thread" postIDKey="tid" />
+                    <BadgePostCommon :post="thread" postIDKey="tid" postTypeText="主题帖" />
                     <BadgePostTime postType="主题帖" :previousPost="previousThread" :currentPost="thread" :nextPost="nextThread"
                                    postTimeKey="postedAt" timestampType="发帖时间" class="bg-success" />
                 </div>

diff --git a/fe/src/shared/fontAwesome.ts b/fe/src/shared/fontAwesome.ts
@@ -2,6 +2,8 @@ export {
     faChevronUp,
     faChevronDown,
     faAnglesUp,
+    faArrowUpRightFromSquare,
+    faHashtag,
     faCalendarAlt,
     faChartPie,
     faClock,