From b1d024f734b9d5fe713e0ac8429157202d83cf25 Mon Sep 17 00:00:00 2001
From: n0099 <n@n0099.net>
Date: Fri, 15 Mar 2024 07:36:58 +0800
Subject: [PATCH] - `shared/fontAwesome.ts` in favor of import each icons from
 `@fortawesome/free-*-svg-icons` and reference them via `<FontAwesomeIcon
 :icon="fa*">` for tree-shakeing

+ type `Nav` to share common parts of types `Route` & `DropDown` @ `<GlobalNavBar>`
* replace the icon for timestamps with `regular` variant @ `Post/badges/<BadgePostCommon>`
@ components

* put imports from `@fortawesome` and `luxon` before `lodash` & `echarts` but after `*/*vue*{,/**}` for rule `import/order` @ .eslintrc.cjs
@ fe
---
 fe/.eslintrc.cjs                              |  7 +++--
 fe/src/components/GlobalNavBar.vue            | 15 ++++++----
 fe/src/components/Post/PostNav.vue            |  7 +++--
 .../Post/badges/BadgePostCommon.vue           | 10 ++++---
 .../components/Post/badges/BadgePostTime.vue  |  7 +++--
 .../components/Post/queryForm/QueryForm.vue   |  9 +++---
 .../Post/renderers/list/ReplyItem.vue         |  4 ++-
 .../Post/renderers/list/ThreadItem.vue        | 16 +++++-----
 fe/src/components/widgets/TimeRange.vue       |  2 +-
 fe/src/main.ts                                |  4 ---
 fe/src/shared/fontAwesome.ts                  | 30 -------------------
 fe/src/views/BilibiliVote.vue                 |  7 +++--
 12 files changed, 50 insertions(+), 68 deletions(-)
 delete mode 100644 fe/src/shared/fontAwesome.ts

diff --git a/fe/.eslintrc.cjs b/fe/.eslintrc.cjs
index 7757f695..0d0a1580 100644
--- a/fe/.eslintrc.cjs
+++ b/fe/.eslintrc.cjs
@@ -36,10 +36,13 @@ const eslintPluginImport = { // as of eslint-plugin-import@2.29.1
                 { pattern: '@/**', group: 'internal', position: 'before' },
                 { pattern: 'vue*', group: 'external', position: 'before' }, // vue vue-router
                 { pattern: 'pinia', group: 'external', position: 'before' },
-                { pattern: '*vue*{,/**}', group: 'external', position: 'before' }, // ant-design-vue @vueuse/core
-                { pattern: '*/*vue*{,/**}', group: 'external', position: 'before' }, // @unhead/vue @fortawesome/vue-fontawesome
+                { pattern: '@fortawesome/vue-fontawesome', group: 'external', position: 'after' }, // fontawesome
+                { pattern: '@fortawesome{,/**}', group: 'external', position: 'after' }, // fontawesome
+                { pattern: 'luxon{,/**}', group: 'external', position: 'after' },
                 { pattern: 'lodash{,-{es,fp}}{,/**}', group: 'external', position: 'after' }, // lodash
                 { pattern: 'echarts{,/**}', group: 'external', position: 'after' },
+                { pattern: '*vue*{,/**}', group: 'external', position: 'before' }, // ant-design-vue @vueuse/core
+                { pattern: '*/*vue*{,/**}', group: 'external', position: 'before' }, // @unhead/vue @fortawesome/vue-fontawesome @tanstack/vue-query
             ],
             pathGroupsExcludedImportTypes: [], // https://github.com/import-js/eslint-plugin-import/issues/2897
             distinctGroup: false,
diff --git a/fe/src/components/GlobalNavBar.vue b/fe/src/components/GlobalNavBar.vue
index 2bc6eb2c..10e425b4 100644
--- a/fe/src/components/GlobalNavBar.vue
+++ b/fe/src/components/GlobalNavBar.vue
@@ -37,24 +37,27 @@
 import { reactive, watch } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { faCommentDots, faPaperPlane, faSearch, faUsers } from '@fortawesome/free-solid-svg-icons';
 
 const route = useRoute();
 const envInstanceName = import.meta.env.VITE_INSTANCE_NAME;
 
-interface Route { route: string, title: string, icon?: string, isActive?: boolean }
-interface DropDown { title: string, icon: string, routes: Route[], isActive?: boolean }
+interface Nav { title: string, icon?: IconDefinition, isActive?: boolean }
+interface Route extends Nav { route: string }
+interface DropDown extends Nav { routes: Route[], icon: IconDefinition }
 const navs = reactive<Array<DropDown | Route>>([
     {
         title: '查询',
-        icon: 'search',
+        icon: faSearch,
         routes: [
-            { route: 'post', title: '帖子', icon: 'comment-dots' },
-            { route: 'user', title: '用户', icon: 'users' }
+            { route: 'post', title: '帖子', icon: faCommentDots },
+            { route: 'user', title: '用户', icon: faUsers }
         ]
     },
     {
         title: '专题',
-        icon: 'paper-plane',
+        icon: faPaperPlane,
         routes: [
             { route: 'bilibiliVote', title: 'bilibili吧公投' }
         ]
diff --git a/fe/src/components/Post/PostNav.vue b/fe/src/components/Post/PostNav.vue
index 460867e3..f900db23 100644
--- a/fe/src/components/Post/PostNav.vue
+++ b/fe/src/components/Post/PostNav.vue
@@ -35,8 +35,8 @@
          }"
          class="post-nav-expand col-auto align-items-center d-flex vh-100 sticky-top border-light-subtle">
         <a @click="_ => togglePostNavExpanded()" class="text-primary">
-            <FontAwesomeIcon v-show="isPostNavExpanded" icon="angle-left" />
-            <FontAwesomeIcon v-show="!isPostNavExpanded" icon="angle-right" />
+            <FontAwesomeIcon v-show="isPostNavExpanded" :icon="faAngleLeft" />
+            <FontAwesomeIcon v-show="!isPostNavExpanded" :icon="faAngleRight" />
         </a>
     </div>
 </template>
@@ -53,8 +53,9 @@ import { useRoute, useRouter } from 'vue-router';
 import { useToggle } from '@vueuse/core';
 import { Menu, MenuItem, SubMenu } from 'ant-design-vue';
 import type { MenuClickEventHandler } from 'ant-design-vue/lib/menu/src/interface';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import scrollIntoView from 'scroll-into-view-if-needed';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import * as _ from 'lodash-es';
 
 const props = defineProps<{ postPages: Array<ApiPosts['response']> }>();
diff --git a/fe/src/components/Post/badges/BadgePostCommon.vue b/fe/src/components/Post/badges/BadgePostCommon.vue
index 917c99c5..68b43e50 100644
--- a/fe/src/components/Post/badges/BadgePostCommon.vue
+++ b/fe/src/components/Post/badges/BadgePostCommon.vue
@@ -4,7 +4,7 @@
                 :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" />
+        <FontAwesomeIcon :icon="faHashtag" size="lg" class="align-bottom" />
     </RouterLink>
     <RouterLink :to="{
                     name: `post/${postIDKey}`,
@@ -12,20 +12,20 @@
                 }"
                 :data-tippy-content="`固定链接/只看此${postTypeText}`"
                 class="badge bg-light rounded-pill link-dark">
-        <FontAwesomeIcon icon="link" size="lg" class="align-bottom" />
+        <FontAwesomeIcon :icon="faLink" size="lg" class="align-bottom" />
     </RouterLink>
     <a :href="tiebaPostLink(props.post.tid,
                             (props.post as Reply | SubReply).pid,
                             (props.post as SubReply).spid)"
        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" />
+        <FontAwesomeIcon :icon="faArrowUpRightFromSquare" 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" />
+        <FontAwesomeIcon :icon="faClock" size="lg" class="align-bottom" />
     </span>
 </template>
 
@@ -37,6 +37,8 @@ import type { Pid, Post, PostIDOf, PostTypeTextOf, Spid, Tid, UnixTimestamp } fr
 import { tiebaPostLink } from '@/shared';
 import { RouterLink } from 'vue-router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faClock } from '@fortawesome/free-regular-svg-icons';
+import { faArrowUpRightFromSquare, faHashtag, faLink } from '@fortawesome/free-solid-svg-icons';
 import { DateTime } from 'luxon';
 
 // https://github.com/vuejs/language-tools/issues/3267
diff --git a/fe/src/components/Post/badges/BadgePostTime.vue b/fe/src/components/Post/badges/BadgePostTime.vue
index 3e1911d9..907fa246 100644
--- a/fe/src/components/Post/badges/BadgePostTime.vue
+++ b/fe/src/components/Post/badges/BadgePostTime.vue
@@ -13,16 +13,16 @@
     </DefineTemplate>
     <ReuseTemplate v-if="previousTime !== undefined && previousTime < currentTime && previousDateTime !== undefined"
                    :base="previousDateTime" :relativeTo="`相对于下一${postType}${timestampType}`">
-        <FontAwesomeIcon icon="chevron-down" class="align-bottom" />
+        <FontAwesomeIcon :icon="faChevronDown" class="align-bottom" />
     </ReuseTemplate>
     <ReuseTemplate v-else-if="nextTime !== undefined && nextTime < currentTime && nextDateTime !== undefined"
                    :base="nextDateTime" :relativeTo="`相对于上一${postType}${timestampType}`">
-        <FontAwesomeIcon icon="chevron-up" class="align-bottom" />
+        <FontAwesomeIcon :icon="faChevronUp" class="align-bottom" />
     </ReuseTemplate>
     <ReuseTemplate v-else-if="parentTime !== undefined && parentTime !== currentTime"
                    :base="parentDateTime"
                    :relativeTo="`相对于所属${postTypeText[postTypeText.indexOf(props.postType) - 1]}${timestampType}`">
-        <FontAwesomeIcon icon="angles-up" class="align-bottom" />
+        <FontAwesomeIcon :icon="faAnglesUp" class="align-bottom" />
     </ReuseTemplate>
     <ReuseTemplate />
 </template>
@@ -42,6 +42,7 @@ import { postTypeText, undefinedOr } from '@/shared';
 import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faAnglesUp, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { DateTime } from 'luxon';
 
 defineOptions({ inheritAttrs: false });
diff --git a/fe/src/components/Post/queryForm/QueryForm.vue b/fe/src/components/Post/queryForm/QueryForm.vue
index 4c3d626b..1bd2d248 100644
--- a/fe/src/components/Post/queryForm/QueryForm.vue
+++ b/fe/src/components/Post/queryForm/QueryForm.vue
@@ -4,7 +4,7 @@
             <label class="col-1 col-form-label" for="paramFid">贴吧</label>
             <div class="col-3">
                 <div class="input-group">
-                    <span class="input-group-text"><FontAwesomeIcon icon="filter" /></span>
+                    <span class="input-group-text"><FontAwesomeIcon :icon="faFilter" /></span>
                     <SelectForum v-model.number="uniqueParams.fid.value"
                                  :class="{ 'is-invalid': isFidInvalid }" id="paramFid">
                         <template #indicators="{ renderer }">
@@ -38,7 +38,7 @@
             <label class="col-1 col-form-label" for="paramOrder">排序方式</label>
             <div class="col-8">
                 <div class="input-group">
-                    <span class="input-group-text"><FontAwesomeIcon icon="sort-amount-down" /></span>
+                    <span class="input-group-text"><FontAwesomeIcon :icon="faSortAmountDown" /></span>
                     <select v-model="uniqueParams.orderBy.value"
                             :class="{ 'is-invalid': isOrderByInvalid }"
                             class="form-select form-control" id="paramOrder">
@@ -62,7 +62,7 @@
         <div class="query-params">
             <div v-for="(p, pI) in params" :key="pI" class="input-group">
                 <button @click="_ => deleteParam(pI)" class="btn btn-link" type="button">
-                    <FontAwesomeIcon icon="times" />
+                    <FontAwesomeIcon :icon="faTimes" />
                 </button>
                 <SelectParam @paramChange="e => changeParam(pI, e)" :currentParam="p.name"
                              class="select-param" :class="{
@@ -149,7 +149,7 @@
         </div>
         <div class="row mt-2">
             <button class="add-param-button col-auto btn btn-link disabled" type="button">
-                <FontAwesomeIcon icon="plus" />
+                <FontAwesomeIcon :icon="faPlus" />
             </button>
             <SelectParam :key="params.length" @paramChange="e => addParam(e)" currentParam="add" />
         </div>
@@ -183,6 +183,7 @@ import type { RouteLocationNormalized } from 'vue-router';
 import { useRouter } from 'vue-router';
 import { RangePicker } from 'ant-design-vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faFilter, faPlus, faSortAmountDown, faTimes } from '@fortawesome/free-solid-svg-icons';
 import * as _ from 'lodash-es';
 
 defineProps<{ isLoading: boolean }>();
diff --git a/fe/src/components/Post/renderers/list/ReplyItem.vue b/fe/src/components/Post/renderers/list/ReplyItem.vue
index 110e462f..24ef52d9 100644
--- a/fe/src/components/Post/renderers/list/ReplyItem.vue
+++ b/fe/src/components/Post/renderers/list/ReplyItem.vue
@@ -5,7 +5,7 @@
             <div class="d-inline-flex gap-1 fs-5">
                 <span class="badge bg-secondary">{{ reply.floor }}楼</span>
                 <span v-if="reply.subReplyCount > 0" class="badge bg-info">
-                    {{ reply.subReplyCount }}条<FontAwesomeIcon icon="comment-dots" />
+                    {{ reply.subReplyCount }}条<FontAwesomeIcon :icon="faCommentDots" />
                 </span>
                 <!-- TODO: implement these reply's property
                     <span>fold:{{ reply.isFold }}</span>
@@ -54,9 +54,11 @@ import BadgeUser from '@/components/Post/badges/BadgeUser.vue';
 import { toUserPortraitImageUrl, toUserRoute } from '@/shared';
 import { useElementRefsStore } from '@/stores/elementRefs';
 import '@/styles/bootstrapCallout.css';
+
 import { inject, nextTick, onMounted, ref } from 'vue';
 import { RouterLink } from 'vue-router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faCommentDots } from '@fortawesome/free-solid-svg-icons';
 
 type ReplyWithGroupedSubReplies = ThreadWithGroupedSubReplies['replies'][number];
 defineProps<{
diff --git a/fe/src/components/Post/renderers/list/ThreadItem.vue b/fe/src/components/Post/renderers/list/ThreadItem.vue
index fb0d5615..59cfc529 100644
--- a/fe/src/components/Post/renderers/list/ThreadItem.vue
+++ b/fe/src/components/Post/renderers/list/ThreadItem.vue
@@ -16,17 +16,17 @@
             <div class="row justify-content-between mt-2">
                 <div class="col-auto d-flex gap-1 align-items-center">
                     <span data-tippy-content="回复量" class="badge bg-secondary">
-                        <FontAwesomeIcon icon="comment-alt" class="me-1" />{{ thread.replyCount }}
+                        <FontAwesomeIcon :icon="faCommentAlt" class="me-1" />{{ thread.replyCount }}
                     </span>
                     <span data-tippy-content="浏览量" class="badge bg-info">
-                        <FontAwesomeIcon icon="eye" class="me-1" />{{ thread.viewCount }}
+                        <FontAwesomeIcon :icon="faEye" class="me-1" />{{ thread.viewCount }}
                     </span>
                     <span v-if="thread.shareCount !== 0" data-tippy-content="分享量" class="badge bg-info">
-                        <FontAwesomeIcon icon="share-alt" class="me-1" /> {{ thread.shareCount }}
+                        <FontAwesomeIcon :icon="faShareAlt" class="me-1" /> {{ thread.shareCount }}
                     </span>
                     <span data-tippy-content="赞踩量" class="badge bg-info">
-                        <FontAwesomeIcon icon="thumbs-up" class="me-1" /> {{ thread.agreeCount }}
-                        <FontAwesomeIcon icon="thumbs-down" class="me-1" /> {{ thread.disagreeCount }}
+                        <FontAwesomeIcon :icon="faThumbsUp" class="me-1" /> {{ thread.agreeCount }}
+                        <FontAwesomeIcon :icon="faThumbsDown" class="me-1" /> {{ thread.disagreeCount }}
                     </span>
                     <span v-if="thread.zan !== null" :data-tippy-content="`
                         点赞量：${thread.zan.num}<br />
@@ -36,10 +36,10 @@
                     .toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}<br />
                         近期点赞用户：${thread.zan.user_id_list}<br />`" class="badge bg-info">
                         <!-- todo: fetch users info in zan.user_id_list -->
-                        <FontAwesomeIcon icon="thumbs-up" class="me-1" /> 旧版客户端赞
+                        <FontAwesomeIcon :icon="faThumbsUp" class="me-1" /> 旧版客户端赞
                     </span>
                     <span v-if="thread.geolocation !== null" data-tippy-content="发帖位置" class="badge bg-info">
-                        <FontAwesomeIcon icon="location-arrow" class="me-1" /> {{ thread.geolocation }}
+                        <FontAwesomeIcon :icon="faLocationArrow" class="me-1" /> {{ thread.geolocation }}
                         <!-- todo: unknown json struct -->
                     </span>
                 </div>
@@ -86,9 +86,11 @@ import BadgeThread from '@/components/Post/badges/BadgeThread.vue';
 import BadgeUser from '@/components/Post/badges/BadgeUser.vue';
 import { toUserRoute } from '@/shared/index';
 import { useElementRefsStore } from '@/stores/elementRefs';
+
 import { inject } from 'vue';
 import { RouterLink } from 'vue-router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faCommentAlt, faEye, faLocationArrow, faShareAlt, faThumbsDown, faThumbsUp } from '@fortawesome/free-solid-svg-icons';
 import { DateTime } from 'luxon';
 
 defineProps<{
diff --git a/fe/src/components/widgets/TimeRange.vue b/fe/src/components/widgets/TimeRange.vue
index 8182f8ee..dd06986c 100644
--- a/fe/src/components/widgets/TimeRange.vue
+++ b/fe/src/components/widgets/TimeRange.vue
@@ -15,10 +15,10 @@
 
 <script setup lang="ts">
 import type { Dayjs } from 'dayjs';
-import type { DurationLike } from 'luxon';
 import { ref, watchEffect } from 'vue';
 import { RangePicker } from 'ant-design-vue';
 import dayjs, { unix } from 'dayjs';
+import type { DurationLike } from 'luxon';
 import { DateTime } from 'luxon';
 import * as _ from 'lodash-es';
 
diff --git a/fe/src/main.ts b/fe/src/main.ts
index 5d170a48..6f71f797 100644
--- a/fe/src/main.ts
+++ b/fe/src/main.ts
@@ -1,8 +1,6 @@
 import App from '@/App.vue';
 import router from '@/router';
-import * as fontAwesomeIcons from '@/shared/fontAwesome';
 import '@/styles/style.css';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
@@ -14,8 +12,6 @@ import 'noty/lib/themes/mint.css';
 import nprogress from 'nprogress';
 import 'nprogress/nprogress.css';
 
-library.add(...Object.values(fontAwesomeIcons));
-
 nprogress.configure({ trickleSpeed: 200 });
 
 if (import.meta.env.DEV) {
diff --git a/fe/src/shared/fontAwesome.ts b/fe/src/shared/fontAwesome.ts
deleted file mode 100644
index 23ed0542..00000000
--- a/fe/src/shared/fontAwesome.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export {
-    faChevronUp,
-    faChevronDown,
-    faAnglesUp,
-    faArrowUpRightFromSquare,
-    faHashtag,
-    faCalendarAlt,
-    faChartPie,
-    faClock,
-    faCommentDots,
-    faDonate,
-    faFilter,
-    faPaperPlane,
-    faSatelliteDish,
-    faSearch,
-    faUsers,
-    faSortAmountDown,
-    faTimes,
-    faPlus,
-    faAngleLeft,
-    faAngleRight,
-    faLink,
-    faInfo,
-    faCommentAlt,
-    faEye,
-    faShareAlt,
-    faThumbsUp,
-    faThumbsDown,
-    faLocationArrow
-} from '@fortawesome/free-solid-svg-icons';
diff --git a/fe/src/views/BilibiliVote.vue b/fe/src/views/BilibiliVote.vue
index e221b117..35ea70d1 100644
--- a/fe/src/views/BilibiliVote.vue
+++ b/fe/src/views/BilibiliVote.vue
@@ -26,7 +26,7 @@
             <label class="col-2 col-form-label text-end" for="top5CandidateCountGroupByTimeGranularity">时间粒度</label>
             <div class="col-2">
                 <div class="input-group">
-                    <span class="input-group-text"><FontAwesomeIcon icon="calendar-alt" /></span>
+                    <span class="input-group-text"><FontAwesomeIcon :icon="faCalendarAlt" /></span>
                     <TimeGranularity v-model="query.top5CandidateCountGroupByTimeGranularity"
                                      :granularities="['minute', 'hour']"
                                      id="top5CandidateCountGroupByTimeGranularity" />
@@ -39,7 +39,7 @@
             <label class="col-2 col-form-label text-end" for="allVoteCountGroupByTimeGranularity">时间粒度</label>
             <div class="col-2">
                 <div class="input-group">
-                    <span class="input-group-text"><FontAwesomeIcon icon="clock" /></span>
+                    <span class="input-group-text"><FontAwesomeIcon :icon="faClock" /></span>
                     <TimeGranularity v-model="query.allVoteCountGroupByTimeGranularity"
                                      :granularities="['minute', 'hour']"
                                      id="allVoteCountGroupByTimeGranularity" />
@@ -72,8 +72,9 @@ import { echarts4ColorTheme, timeGranularityAxisPointerLabelFormatter, timeGranu
 
 import { onMounted, ref, watch } from 'vue';
 import { Table } from 'ant-design-vue';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { useHead } from '@unhead/vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faCalendarAlt, faClock } from '@fortawesome/free-solid-svg-icons';
 import { DateTime } from 'luxon';
 import * as _ from 'lodash-es';