From 8ec64b05a0276fccae614106cf8f8bfd22a81a59 Mon Sep 17 00:00:00 2001
From: n0099 <n@n0099.net>
Date: Sun, 17 Dec 2023 23:32:50 +0800
Subject: [PATCH] $ yarn eslint --fix src/**/*.vue src/**/*.ts src/**/*.js @ fe

---
 fe/src/App.vue                                |  2 +-
 fe/src/components/GlobalNavBar.vue            |  4 +--
 fe/src/components/Post/NavSidebar.vue         |  9 +++--
 .../badges/PostCommonMetadataIconLinks.vue    |  4 ++-
 .../components/Post/queryForm/QueryForm.vue   | 36 ++++++++++---------
 .../components/Post/queryForm/queryParams.ts  |  1 +
 .../components/Post/queryForm/useQueryForm.ts |  9 ++++-
 .../queryForm/widgets/InputTextMatchParam.vue | 21 ++++++-----
 fe/src/components/Post/views/ViewList.vue     |  7 ++--
 fe/src/components/Post/views/ViewTable.vue    |  4 ++-
 fe/src/components/User/QueryForm.vue          |  4 +--
 fe/src/components/User/UsersPage.vue          |  2 +-
 fe/src/components/widgets/SelectTiebaUser.vue | 11 +++---
 fe/src/components/widgets/TimeRange.vue       |  1 +
 fe/src/router/index.ts                        |  2 ++
 fe/src/shared/index.ts                        |  2 ++
 fe/src/stats.js                               |  1 +
 fe/src/views/BilibiliVote.vue                 | 21 ++++++-----
 fe/src/views/Stats.vue                        | 11 +++---
 fe/src/views/Status.vue                       |  9 ++---
 fe/src/views/User.vue                         |  8 ++---
 21 files changed, 102 insertions(+), 67 deletions(-)

diff --git a/fe/src/App.vue b/fe/src/App.vue
index d59571af..a18313d2 100644
--- a/fe/src/App.vue
+++ b/fe/src/App.vue
@@ -1,7 +1,7 @@
 <template>
     <GlobalNavBar />
     <HorizontalMobileMessage />
-    <img id="loadingBlocks" :src="iconLoadingBlocks" class="d-none" />
+    <img :src="iconLoadingBlocks" class="d-none" id="loadingBlocks" />
     <ConfigProvider :locale="AntdZhCn">
         <div class="container">
             <RouterView />
diff --git a/fe/src/components/GlobalNavBar.vue b/fe/src/components/GlobalNavBar.vue
index c4278af3..02ff9197 100644
--- a/fe/src/components/GlobalNavBar.vue
+++ b/fe/src/components/GlobalNavBar.vue
@@ -1,12 +1,12 @@
 <template>
     <nav class="navbar navbar-expand-lg shadow-sm bg-light">
-        <div id="nav" class="container-fluid">
+        <div class="container-fluid" id="nav">
             <RouterLink to="/" class="navbar-brand">open-tbm @ {{ envInstanceName }}</RouterLink>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
                     aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon" />
             </button>
-            <div id="navbar" class="navbar-collapse collapse">
+            <div class="navbar-collapse collapse" id="navbar">
                 <ul class="navbar-nav">
                     <template v-for="(nav, _k) in navs" :key="_k">
                         <li v-if="'routes' in nav" class="nav-item dropdown" :class="{ active: nav.isActive }">
diff --git a/fe/src/components/Post/NavSidebar.vue b/fe/src/components/Post/NavSidebar.vue
index 4d403c31..bb73e4c4 100644
--- a/fe/src/components/Post/NavSidebar.vue
+++ b/fe/src/components/Post/NavSidebar.vue
@@ -49,9 +49,9 @@ import type { MenuClickEventHandler } from 'ant-design-vue/lib/menu/src/interfac
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import _ from 'lodash';
 
+const props = defineProps<{ postPages: ApiPostsQuery[] }>();
 const route = useRoute();
 const router = useRouter();
-const props = defineProps<{ postPages: ApiPostsQuery[] }>();
 const expandedPages = ref<string[]>([]);
 const selectedThread = ref<string[]>([]);
 const firstPostInViewDefault = { cursor: '', tid: 0, pid: 0 };
@@ -77,6 +77,7 @@ const scrollStop = _.debounce(() => {
     const reduceFindTopmostElementInView = (topOffset: number) =>
         (result: { top: number, el: Element }, curEl: Element) => {
             const elTop = curEl.getBoundingClientRect().top - topOffset;
+
             // ignore element which its y coord is ahead of the top of viewport
             if (elTop >= 0 && result.top > elTop)
                 return { top: elTop, el: curEl };
@@ -90,11 +91,13 @@ const scrollStop = _.debounce(() => {
 
     const currentFirstPostInView = {
         t: findFirstDomInView('.thread-title'),
+
         // 80px (5rem) is the top offset of .reply-title, aka `.reply-title { top: 5rem; }`
         p: findFirstDomInView('.reply-title', 80)
     };
     const firstPostIDInView = _.mapValues(currentFirstPostInView, i =>
         Number(i.parentElement?.getAttribute('data-post-id')));
+
     // when there's no thread or reply item in the viewport
     // currentFirstPostInView.* will be the initial <null> element and firstPostIDInView.* will be NaN
     if (Number.isNaN(firstPostIDInView.t)) {
@@ -113,6 +116,7 @@ const scrollStop = _.debounce(() => {
             ? { hash, name: removeEnd(route.name, routeNameSuffix.cursor), params: _.omit(route.params, 'cursor') }
             : { hash, name: routeNameWithCursor(route.name), params: { ...route.params, cursor } });
     };
+
     // is the first reply belonged to the first thread, true when the first thread has no reply,
     // the first reply will belong to another thread that comes after the first thread in view
     if (_.chain(props.postPages)
@@ -149,9 +153,10 @@ watchEffect(() => {
         isScrollTriggeredByNavigate = false;
         return;
     }
+
     // scroll menu to the link to reply in <ViewList>
     // which is the topmost one in the viewport (nearest to top border of viewport)
-    const replyEl = document.querySelector(`.posts-nav-reply-link[data-pid='${pid}']`) as HTMLElement | null;
+    const replyEl = document.querySelector(`.posts-nav-reply-link[data-pid='${pid}']`);
     const navMenuEl = replyEl?.closest('.posts-nav');
     if (replyEl !== null && navMenuEl
         && navMenuEl.getBoundingClientRect().top === 0) // is navMenuEl sticking to the top border of viewport
diff --git a/fe/src/components/Post/badges/PostCommonMetadataIconLinks.vue b/fe/src/components/Post/badges/PostCommonMetadataIconLinks.vue
index 4ccae930..2b2c6538 100644
--- a/fe/src/components/Post/badges/PostCommonMetadataIconLinks.vue
+++ b/fe/src/components/Post/badges/PostCommonMetadataIconLinks.vue
@@ -1,5 +1,7 @@
 <template>
-    <a :href="tiebaPostLink(post.tid, postTypeID === 'tid' ? undefined : postIDSelector())"
+    <a :href="tiebaPostLink(post.tid, postTypeID === 'tid'
+           ? undefined
+           : postIDSelector())"
        target="_blank" class="badge bg-light rounded-pill link-dark">
         <FontAwesomeIcon icon="link" size="lg" class="align-bottom" />
     </a>
diff --git a/fe/src/components/Post/queryForm/QueryForm.vue b/fe/src/components/Post/queryForm/QueryForm.vue
index c7f384c6..01782d2b 100644
--- a/fe/src/components/Post/queryForm/QueryForm.vue
+++ b/fe/src/components/Post/queryForm/QueryForm.vue
@@ -5,8 +5,8 @@
             <div class="col-3">
                 <div class="input-group">
                     <span class="input-group-text"><FontAwesomeIcon icon="filter" /></span>
-                    <select v-model.number="uniqueParams.fid.value" id="paramFid"
-                            :class="{ 'is-invalid': isFidInvalid }" class="form-select form-control">
+                    <select v-model.number="uniqueParams.fid.value" :class="{ 'is-invalid': isFidInvalid }"
+                            class="form-select form-control" id="paramFid">
                         <option value="0">未指定</option>
                         <option v-for="forum in forumList"
                                 :key="forum.fid" :value="forum.fid">{{ forum.name }}</option>
@@ -17,18 +17,18 @@
             <div class="col my-auto">
                 <div class="input-group">
                     <div class="form-check form-check-inline">
-                        <input v-model="uniqueParams.postTypes.value" id="paramPostTypesThread"
-                               type="checkbox" value="thread" class="form-check-input" />
+                        <input v-model="uniqueParams.postTypes.value" type="checkbox"
+                               value="thread" class="form-check-input" id="paramPostTypesThread" />
                         <label class="form-check-label" for="paramPostTypesThread">主题帖</label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input v-model="uniqueParams.postTypes.value" id="paramPostTypesReply"
-                               type="checkbox" value="reply" class="form-check-input" />
+                        <input v-model="uniqueParams.postTypes.value" type="checkbox"
+                               value="reply" class="form-check-input" id="paramPostTypesReply" />
                         <label class="form-check-label" for="paramPostTypesReply">回复帖</label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input v-model="uniqueParams.postTypes.value" id="paramPostTypesSubReply"
-                               type="checkbox" value="subReply" class="form-check-input" />
+                        <input v-model="uniqueParams.postTypes.value" type="checkbox"
+                               value="subReply" class="form-check-input" id="paramPostTypesSubReply" />
                         <label class="form-check-label" for="paramPostTypesSubReply">楼中楼</label>
                     </div>
                 </div>
@@ -36,7 +36,7 @@
         </div>
         <div class="row mt-2 mb-3">
             <label class="col-1 col-form-label" for="paramOrder">排序方式</label>
-            <div id="paramOrder" class="col-8">
+            <div class="col-8" id="paramOrder">
                 <div class="input-group">
                     <span class="input-group-text"><FontAwesomeIcon icon="sort-amount-down" /></span>
                     <select v-model="uniqueParams.orderBy.value"
@@ -69,8 +69,8 @@
                              }" />
                 <div class="param-input-group-text input-group-text">
                     <div class="form-check">
-                        <input v-model="p.subParam.not" :id="`param${_.upperFirst(p.name)}Not-${pI}`"
-                               type="checkbox" value="good" class="form-check-input" />
+                        <input v-model="p.subParam.not" type="checkbox" value="good" class="form-check-input"
+                               :id="`param${_.upperFirst(p.name)}Not-${pI}`" />
                         <label :for="`param${_.upperFirst(p.name)}Not-${pI}`"
                                class="text-secondary fw-bold form-check-label">非</label>
                     </div>
@@ -102,16 +102,16 @@
                 <div v-if="p.name === 'threadProperties'">
                     <div class="param-input-group-text input-group-text">
                         <div class="form-check">
-                            <input v-model="p.value" :id="`paramThreadPropertiesGood-${pI}`"
-                                   type="checkbox" value="good" class="form-check-input" />
+                            <input v-model="p.value" type="checkbox" value="good" class="form-check-input"
+                                   :id="`paramThreadPropertiesGood-${pI}`" />
                             <label :for="`paramThreadPropertiesGood-${pI}`"
                                    class="text-danger fw-normal form-check-label">精品</label>
                         </div>
                     </div>
                     <div class="param-input-group-text input-group-text">
                         <div class="form-check">
-                            <input v-model="p.value" :id="`paramThreadPropertiesSticky-${pI}`"
-                                   type="checkbox" value="sticky" class="form-check-input" />
+                            <input v-model="p.value" type="checkbox" value="sticky" class="form-check-input"
+                                   :id="`paramThreadPropertiesSticky-${pI}`" />
                             <label :for="`paramThreadPropertiesSticky-${pI}`"
                                    class="text-primary fw-normal form-check-label">置顶</label>
                         </div>
@@ -182,11 +182,11 @@ import { RangePicker } from 'ant-design-vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import _ from 'lodash';
 
-const router = useRouter();
 defineProps<{
     isLoading: boolean,
     forumList: ApiForumList
 }>();
+const router = useRouter();
 const {
     uniqueParams,
     params,
@@ -235,10 +235,13 @@ const getCurrentQueryType = () => {
             return 'fid';
         }
     }
+
     // is there no other params except post id params
     if (_.isEmpty(_.reject(clearedParams, isPostIDParam))
+
         // is there only one post id param
         && _.filter(clearedParams, isPostIDParam).length === 1
+
         // is all post ID params doesn't own any sub param
         && _.chain(clearedParams).map('subParam').filter().isEmpty().value())
         return 'postID';
@@ -357,6 +360,7 @@ const parseRoute = (route: RouteLocationNormalizedLoaded) => {
     uniqueParams.value = _.mapValues(uniqueParams.value, _.unary(fillParamDefaultValue)) as KnownUniqueParams;
     params.value = [];
     const routeName = removeEnd(route.name, routeNameSuffix.page);
+
     // parse route path to params
     if (routeName === 'post/param' && _.isArray(route.params.pathMatch)) {
         parseParamRoute(route.params.pathMatch); // omit the page param from route full path
diff --git a/fe/src/components/Post/queryForm/queryParams.ts b/fe/src/components/Post/queryForm/queryParams.ts
index 8047b4b7..683c4ebd 100644
--- a/fe/src/components/Post/queryForm/queryParams.ts
+++ b/fe/src/components/Post/queryForm/queryParams.ts
@@ -160,6 +160,7 @@ const useQueryFormDeps: Parameters<typeof useQueryForm>[0] = {
         }
     }
 };
+
 // must get invoked with in the setup() of component
 export const useQueryFormWithUniqueParams = () => {
     const ret = useQueryForm<KnownUniqueParams, KnownParams>(useQueryFormDeps);
diff --git a/fe/src/components/Post/queryForm/useQueryForm.ts b/fe/src/components/Post/queryForm/useQueryForm.ts
index 78e41c68..2a962dc7 100644
--- a/fe/src/components/Post/queryForm/useQueryForm.ts
+++ b/fe/src/components/Post/queryForm/useQueryForm.ts
@@ -21,6 +21,7 @@ export default <
     type UniqueParam = ObjValues<UniqueParams>;
     type Param = ObjValues<Params>;
     const router = useRouter();
+
     // [{ name: '', value: '', subParam: { name: value } },...]
     const uniqueParams = ref<UniqueParams>({} as UniqueParams) as Ref<UniqueParams>;
     const params = ref<Param[]>([]) as Ref<Param[]>;
@@ -49,6 +50,7 @@ export default <
     };
     const deleteParam = (paramIndex: number) => {
         _.pull(invalidParamsIndex.value, paramIndex);
+
         // move forward index of all params, which after current
         invalidParamsIndex.value = invalidParamsIndex.value.map(invalidParamIndex =>
             (invalidParamIndex > paramIndex ? invalidParamIndex - 1 : invalidParamIndex));
@@ -58,6 +60,7 @@ export default <
         const defaultParam = _.cloneDeep(deps.paramsDefaultValue[param.name]);
         if (defaultParam === undefined)
             throw Error(`Param ${param.name} not found in paramsDefaultValue`);
+
         // remove subParam.not: false, which previously added by fillParamDefaultValue()
         if (defaultParam.subParam !== undefined)
             defaultParam.subParam.not ??= false;
@@ -65,6 +68,7 @@ export default <
         // number will consider as empty in isEmpty(), to prevent this we use complex short circuit evaluate expression
         if (!(_.isNumber(newParam.value) || !_.isEmpty(newParam.value))
             || (_.isArray(newParam.value) && _.isArray(defaultParam.value)
+
                 // sort array type param value for comparing
                 ? _.isEqual(_.sortBy(newParam.value), _.sortBy(defaultParam.value))
                 : newParam.value === defaultParam.value))
@@ -73,6 +77,7 @@ export default <
         _.each(defaultParam.subParam, (value, name) => {
             if (newParam.subParam === undefined)
                 return;
+
             // undefined means this sub param must get deleted and merge into parent, as part of the parent param value
             // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
             if (newParam.subParam[name] === value || value === undefined)
@@ -85,9 +90,11 @@ export default <
         return _.isEmpty(_.omit(newParam, 'name')) ? null : newParam; // return null for further filter()
     };
     const clearedParamsDefaultValue = (): Array<Partial<Param>> =>
+
         // filter() will remove falsy values like null
         _.filter(params.value.map(clearParamDefaultValue)) as Array<Partial<Param>>;
     const clearedUniqueParamsDefaultValue = (): Partial<UniqueParams> =>
+
         // mapValues() return object which remains keys, pickBy() like filter() for objects
         _.pickBy(_.mapValues(uniqueParams.value, clearParamDefaultValue)) as Partial<UniqueParams>;
     const removeUndefinedFromPartialObjectValues = <T extends Partial<T>, R>(object: Partial<T>) =>
@@ -147,7 +154,7 @@ export default <
                 if (isUniqueParam(param)) { // is unique param
                     uniqueParams.value[param.name as keyof UniqueParams] = param;
                 } else {
-                    params.value.push(param as Param);
+                    params.value.push(param);
                 }
             })
             .value();
diff --git a/fe/src/components/Post/queryForm/widgets/InputTextMatchParam.vue b/fe/src/components/Post/queryForm/widgets/InputTextMatchParam.vue
index 2e0d26a9..65773d05 100644
--- a/fe/src/components/Post/queryForm/widgets/InputTextMatchParam.vue
+++ b/fe/src/components/Post/queryForm/widgets/InputTextMatchParam.vue
@@ -2,31 +2,30 @@
     <div class="input-group-text">
         <div class="form-check form-check-inline">
             <input @input="emitModelChange('matchBy', ($event.target as HTMLInputElement).value as 'regex')"
-                   :id="inputID('Regex')"
-                   :checked="modelValue.subParam.matchBy === 'regex'" :name="inputName"
-                   value="regex" type="radio" class="form-check-input" />
+                   :checked="modelValue.subParam.matchBy === 'regex'"
+                   :name="inputName" value="regex"
+                   type="radio" class="form-check-input" :id="inputID('Regex')" />
             <label :for="inputID('Regex')" class="form-check-label">正则</label>
         </div>
         <div class="form-check form-check-inline">
             <input @input="emitModelChange('matchBy', ($event.target as HTMLInputElement).value as 'implicit')"
-                   :id="inputID('Implicit')"
-                   :checked="modelValue.subParam.matchBy === 'implicit'" :name="inputName"
-                   value="implicit" type="radio" class="form-check-input" />
+                   :checked="modelValue.subParam.matchBy === 'implicit'"
+                   :name="inputName" value="implicit"
+                   type="radio" class="form-check-input" :id="inputID('Implicit')" />
             <label :for="inputID('Implicit')" class="form-check-label">模糊</label>
         </div>
         <div class="form-check form-check-inline">
             <input @input="emitModelChange('matchBy', ($event.target as HTMLInputElement).value as 'explicit')"
-                   :id="inputID('Explicit')"
-                   :checked="modelValue.subParam.matchBy === 'explicit'" :name="inputName"
-                   value="explicit" type="radio" class="form-check-input" />
+                   :checked="modelValue.subParam.matchBy === 'explicit'"
+                   :name="inputName" value="explicit"
+                   type="radio" class="form-check-input" :id="inputID('Explicit')" />
             <label :for="inputID('Explicit')" class="form-check-label">精确</label>
         </div>
         <div class="form-check form-check-inline">
             <input @input="emitModelChange('spaceSplit', ($event.target as HTMLInputElement).checked)"
-                   :id="inputID('SpaceSplit')"
                    :checked="modelValue.subParam.spaceSplit"
                    :disabled="modelValue.subParam.matchBy === 'regex'"
-                   type="checkbox" class="form-check-input" />
+                   type="checkbox" class="form-check-input" :id="inputID('SpaceSplit')" />
             <label :for="inputID('SpaceSplit')" class="form-check-label">空格分隔</label>
         </div>
     </div>
diff --git a/fe/src/components/Post/views/ViewList.vue b/fe/src/components/Post/views/ViewList.vue
index 85706a21..ca15459b 100644
--- a/fe/src/components/Post/views/ViewList.vue
+++ b/fe/src/components/Post/views/ViewList.vue
@@ -1,7 +1,7 @@
 <template>
     <div :data-cursor="posts.pages.currentCursor" class="post-render-list pb-3">
         <div v-for="thread in posts.threads" :key="thread.tid"
-             :id="`t${thread.tid}`" :data-post-id="thread.tid" class="mt-3 card">
+             :data-post-id="thread.tid" class="mt-3 card" :id="`t${thread.tid}`">
             <div class="thread-title shadow-sm card-header sticky-top">
                 <div class="row justify-content-between">
                     <div class="col-auto">
@@ -70,7 +70,7 @@
                     </div>
                 </div>
             </div>
-            <div v-for="reply in thread.replies" :key="reply.pid" :id="String(reply.pid)" :data-post-id="reply.pid">
+            <div v-for="reply in thread.replies" :key="reply.pid" :data-post-id="reply.pid" :id="reply.pid">
                 <div class="reply-title sticky-top card-header">
                     <div class="d-inline-flex gap-1 h5">
                         <span class="badge bg-secondary">{{ reply.floor }}楼</span>
@@ -128,7 +128,7 @@
                                             </RouterLink>
                                             <div class="float-end badge bg-light">
                                                 <div class="d-inline"
-                                                     :class="{ 'invisible': hoveringSubReplyID !== subReply.spid }">
+                                                     :class="{ invisible: hoveringSubReplyID !== subReply.spid }">
                                                     <PostCommonMetadataIconLinks :post="subReply"
                                                                                  postTypeID="spid"
                                                                                  :postIDSelector="() => subReply.spid" />
@@ -199,6 +199,7 @@ const posts = computed(() => {
                         return [subReply]; // useless guard since subReply will never be an array
                     // group sub replies item by continuous and same post author
                     const previousSubReply = subReplies[index - 1] as SubReply | undefined;
+
                     // https://github.com/microsoft/TypeScript/issues/13778
                     if (previousSubReply !== undefined
                         && subReply.authorUid === previousSubReply.authorUid)
diff --git a/fe/src/components/Post/views/ViewTable.vue b/fe/src/components/Post/views/ViewTable.vue
index 51356720..f9b508aa 100644
--- a/fe/src/components/Post/views/ViewTable.vue
+++ b/fe/src/components/Post/views/ViewTable.vue
@@ -50,7 +50,9 @@
                 </template>
                 <template #expandedRowRender="{ record: { pid, content, authorUid: replyAuthorUid } }">
                     <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component vue/no-v-html -->
-                    <component :is="repliesSubReply[pid] === undefined ? 'span' : 'p'"
+                    <component :is="repliesSubReply[pid] === undefined
+                                   ? 'span'
+                                   : 'p'"
                                v-viewer.static v-html="content" />
                     <Table v-if="repliesSubReply[pid] !== undefined"
                            :columns="subReplyColumns" :dataSource="repliesSubReply[pid]"
diff --git a/fe/src/components/User/QueryForm.vue b/fe/src/components/User/QueryForm.vue
index bd390664..7e5ca3c8 100644
--- a/fe/src/components/User/QueryForm.vue
+++ b/fe/src/components/User/QueryForm.vue
@@ -3,7 +3,7 @@
         <SelectTiebaUser v-model="selectUser" />
         <label class="col-2 col-form-label text-end" for="queryGender">性别</label>
         <div class="col-3">
-            <select v-model="gender" id="queryGender" class="form-select">
+            <select v-model="gender" class="form-select" id="queryGender">
                 <option value="default">不限</option>
                 <option value="NULL">NULL</option>
                 <option value="0">未指定（显示为男）</option>
@@ -29,7 +29,6 @@ import _ from 'lodash';
 type RouteQueryString = Omit<SelectTiebaUserParams, Exclude<SelectTiebaUserBy, ''>>
     & { gender?: TiebaUserGenderQueryParam };
 
-const router = useRouter();
 const props = defineProps<{
     query: RouteQueryString,
     params: {
@@ -39,6 +38,7 @@ const props = defineProps<{
     },
     selectUserBy: SelectTiebaUserBy
 }>();
+const router = useRouter();
 const gender = ref<TiebaUserGenderQueryParam | 'default'>('default');
 const selectUser = ref<SelectTiebaUserModel>({ selectBy: '', params: {} });
 
diff --git a/fe/src/components/User/UsersPage.vue b/fe/src/components/User/UsersPage.vue
index 31af9324..04b04638 100644
--- a/fe/src/components/User/UsersPage.vue
+++ b/fe/src/components/User/UsersPage.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <PageCurrentButton :currentCursor="users.pages.currentCursor" />
-        <div v-for="(user, userIndex) in users.users" :key="user.uid" :id="String(user.uid)" class="row">
+        <div v-for="(user, userIndex) in users.users" :key="user.uid" class="row" :id="String(user.uid)">
             <div class="col-3">
                 <img :data-src="toTiebaUserPortraitImageUrl(user.portrait)"
                      class="lazy d-block mx-auto badge bg-light" width="110" height="110" />
diff --git a/fe/src/components/widgets/SelectTiebaUser.vue b/fe/src/components/widgets/SelectTiebaUser.vue
index 5e06e498..509c223f 100644
--- a/fe/src/components/widgets/SelectTiebaUser.vue
+++ b/fe/src/components/widgets/SelectTiebaUser.vue
@@ -22,8 +22,8 @@
                 <input v-model="params.name" type="text" aria-label="用户名" class="form-control" required />
                 <div class="input-group-text">
                     <div class="form-check">
-                        <input v-model="params.nameUseRegex" id="selectUserNameUseRegex"
-                               type="checkbox" class="form-check-input" />
+                        <input v-model="params.nameUseRegex" type="checkbox"
+                               class="form-check-input" id="selectUserNameUseRegex" />
                         <label class="form-check-label" for="selectUserNameUseRegex">正则</label>
                     </div>
                 </div>
@@ -32,8 +32,8 @@
                 <input v-model="params.displayName" type="text" aria-label="覆盖名" class="form-control" required />
                 <div class="input-group-text">
                     <div class="form-check">
-                        <input v-model="params.displayNameUseRegex" id="selectUserDisplayNameUseRegex"
-                               type="checkbox" class="form-check-input" />
+                        <input v-model="params.displayNameUseRegex" type="checkbox"
+                               class="form-check-input" id="selectUserDisplayNameUseRegex" />
                         <label class="form-check-label" for="selectUserDisplayNameUseRegex">正则</label>
                     </div>
                 </div>
@@ -60,6 +60,7 @@ type SelectTiebaUserParamsValues = ObjValues<SelectTiebaUserParams>;
 const selectTiebaUserParamsNames = [
     'uid', 'uidCompareBy', 'name', 'nameUseRegex', 'displayName', 'displayNameUseRegex'
 ] as const;
+
 // widen type Record<string, SelectTiebaUserParamsValues> for compatible with props.paramsNameMap
 export interface SelectTiebaUserModel {
     selectBy: SelectTiebaUserBy,
@@ -99,8 +100,10 @@ watch(() => props.modelValue, () => {
         emitModelChange();
     else
         ({ selectBy: selectBy.value, params: params.value } = props.modelValue);
+
     // filter out unnecessary and undefined params
     params.value = _.omitBy(_.pick(params.value, selectTiebaUserParamsNames), _.isUndefined);
+
     // reset to default selectBy if it's a invalid value
     if (!selectTiebaUserBy.includes(selectBy.value))
         selectBy.value = '';
diff --git a/fe/src/components/widgets/TimeRange.vue b/fe/src/components/widgets/TimeRange.vue
index db6276e4..c0be73b1 100644
--- a/fe/src/components/widgets/TimeRange.vue
+++ b/fe/src/components/widgets/TimeRange.vue
@@ -50,6 +50,7 @@ const initialRangeWithTimesAgo: [Dayjs, Dayjs] = [
     dayjs(DateTime.now().minus(props.timesAgo).startOf('minute').toISO()),
     dayjs(DateTime.now().startOf('minute').toISO())
 ];
+
 // timesAgo will overwrite first assign to timeRange with initial props value
 timeRange.value = initialRangeWithTimesAgo;
 timeRangeChanged(initialRangeWithTimesAgo);
diff --git a/fe/src/router/index.ts b/fe/src/router/index.ts
index 6d591ae4..6416d0c4 100644
--- a/fe/src/router/index.ts
+++ b/fe/src/router/index.ts
@@ -24,6 +24,7 @@ export const compareRouteIsNewQuery = (to: RouteLocationNormalized, from: RouteL
 export const routeNameSuffix = { page: '+p', cursor: '+c' } as const;
 export const routeNameWithCursor = (name: string) =>
     (_.endsWith(name, routeNameSuffix.cursor) ? name : `${name}${routeNameSuffix.cursor}`);
+
 // https://github.com/vuejs/vue-router-next/issues/1184
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 export const getRouteCursorParam = (r: RouteLocationNormalized): Cursor => String(r.params.cursor ?? '');
@@ -133,6 +134,7 @@ export default createRouter({
         if (from.name !== undefined) { // from.name will be undefined when user refresh page
             assertRouteNameIsStr(to.name);
             assertRouteNameIsStr(from.name);
+
             // scroll to top when the prefix of route name changed
             if (to.name.split('/')[0] !== from.name.split('/')[0])
                 return { top: 0 };
diff --git a/fe/src/shared/index.ts b/fe/src/shared/index.ts
index fb767528..e2ad0514 100644
--- a/fe/src/shared/index.ts
+++ b/fe/src/shared/index.ts
@@ -11,9 +11,11 @@ export type BoolInt = 0 | 1;
 
 export type ObjUnknown = Record<string, unknown>;
 export type ObjEmpty = Record<string, never>;
+
 // https://github.com/microsoft/TypeScript/issues/35660
 export type Writable<T> = { -readonly [P in keyof T]: T[P] };
 export type DeepWritable<T> = { -readonly [P in keyof T]: DeepWritable<T[P]> };
+
 // https://stackoverflow.com/questions/41285211/overriding-interface-property-type-defined-in-typescript-d-ts-file
 export type Modify<T, R> = Omit<T, keyof R> & R;
 export type ObjValues<T> = T[keyof T];
diff --git a/fe/src/stats.js b/fe/src/stats.js
index 986abb2a..e280714d 100644
--- a/fe/src/stats.js
+++ b/fe/src/stats.js
@@ -5,6 +5,7 @@ stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
 const container = document.createElement('div');
 container.className = 'statsjs';
 const style = document.createElement('style');
+
 // https://github.com/mrdoob/stats.js/issues/115
 style.textContent = '.statsjs canvas { display: block !important; }';
 container.appendChild(style);
diff --git a/fe/src/views/BilibiliVote.vue b/fe/src/views/BilibiliVote.vue
index ffc773b5..70c3111f 100644
--- a/fe/src/views/BilibiliVote.vue
+++ b/fe/src/views/BilibiliVote.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="bilibiliVote" class="mt-2">
+    <div class="mt-2" id="bilibiliVote">
         <small>本页上所有时间均为UTC+8时间</small>
         <p>有效票定义：</p>
         <ul>
@@ -18,9 +18,9 @@
         <p><a href="https://tieba.baidu.com/p/6063625612" target="_blank">bilibili吧 吧主候选人支持率Top20（非官方数据，仅供参考）</a></p>
         <p><a href="https://www.bilibili.com/video/av46507371" target="_blank">【数据可视化】一分钟看完bilibili吧吧主公投</a></p>
         <hr />
-        <div ref="top50CandidateCountRef" id="top50CandidateCount" class="echarts" />
+        <div ref="top50CandidateCountRef" class="echarts" id="top50CandidateCount" />
         <hr />
-        <div ref="top10CandidatesTimelineRef" id="top10CandidatesTimeline" class="echarts" />
+        <div ref="top10CandidatesTimelineRef" class="echarts" id="top10CandidatesTimeline" />
         <hr />
         <div class="row justify-content-end">
             <label class="col-2 col-form-label text-end" for="top5CandidateCountGroupByTimeGranularity">时间粒度</label>
@@ -28,12 +28,12 @@
                 <div class="input-group">
                     <span class="input-group-text"><FontAwesomeIcon icon="calendar-alt" /></span>
                     <TimeGranularity v-model="query.top5CandidateCountGroupByTimeGranularity"
-                                     id="top5CandidateCountGroupByTimeGranularity"
-                                     :granularities="['minute', 'hour']" />
+                                     :granularities="['minute', 'hour']"
+                                     id="top5CandidateCountGroupByTimeGranularity" />
                 </div>
             </div>
         </div>
-        <div ref="top5CandidateCountGroupByTimeRef" id="top5CandidateCountGroupByTime" class="echarts" />
+        <div ref="top5CandidateCountGroupByTimeRef" class="echarts" id="top5CandidateCountGroupByTime" />
         <hr />
         <div class="row justify-content-end">
             <label class="col-2 col-form-label text-end" for="allVoteCountGroupByTimeGranularity">时间粒度</label>
@@ -41,12 +41,12 @@
                 <div class="input-group">
                     <span class="input-group-text"><FontAwesomeIcon icon="clock" /></span>
                     <TimeGranularity v-model="query.allVoteCountGroupByTimeGranularity"
-                                     id="allVoteCountGroupByTimeGranularity"
-                                     :granularities="['minute', 'hour']" />
+                                     :granularities="['minute', 'hour']"
+                                     id="allVoteCountGroupByTimeGranularity" />
                 </div>
             </div>
         </div>
-        <div ref="allVoteCountGroupByTimeRef" id="allVoteCountGroupByTime" class="echarts" />
+        <div ref="allVoteCountGroupByTimeRef" class="echarts" id="allVoteCountGroupByTime" />
         <hr />
         <Table :columns="candidatesDetailColumns"
                :data-source="candidatesDetailData"
@@ -125,6 +125,7 @@ const chartsDom = {
     top5CandidateCountGroupByTime: ref<HTMLElement>(),
     allVoteCountGroupByTime: ref<HTMLElement>()
 };
+
 // template ref
 const {
     top50CandidateCount: top50CandidateCountRef,
@@ -451,6 +452,7 @@ const loadCharts = {
         // [{ voteFor: '1号', validVotes: 1, validAvgGrade: 18, invalidVotes: 1, invalidAvgGrade: 18 }, ... ]
         const dataset = _.chain(json.top50CandidatesVoteCount)
             .groupBy('voteFor')
+
             // sort grouped candidate by its descending total votes count
             .sortBy(candidate => -_.sumBy(candidate, 'count'))
             .map(candidateVotes => {
@@ -654,6 +656,7 @@ const loadCharts = {
         const allVoteCountGroupByTime = timeGranularity === 'minute'
             ? json.allVoteCountGroupByMinute
             : json.allVoteCountGroupByHour;
+
         // [{ time: '2019-03-11 12:00', validCount: 1, invalidCount: 0 }, ... ]
         const dataset = _.chain(allVoteCountGroupByTime)
             .groupBy('time')
diff --git a/fe/src/views/Stats.vue b/fe/src/views/Stats.vue
index d8fbe01b..da4addfc 100644
--- a/fe/src/views/Stats.vue
+++ b/fe/src/views/Stats.vue
@@ -5,7 +5,7 @@
             <div class="col-3">
                 <div class="input-group">
                     <span class="input-group-text"><FontAwesomeIcon icon="filter" /></span>
-                    <select v-model.number="query.fid" id="queryFid" class="form-control">
+                    <select v-model.number="query.fid" class="form-control" id="queryFid">
                         <option disabled value="0">请选择</option>
                         <option v-for="forum in forumList"
                                 :key="forum.fid" :value="forum.fid">{{ forum.name }}</option>
@@ -22,20 +22,21 @@
                     <span class="input-group-text"><FontAwesomeIcon icon="calendar-alt" /></span>
                     <TimeRange v-model:startTime="query.startTime"
                                v-model:endTime="query.endTime"
-                               id="queryTimeRange" :timesAgo="{ day: 14 }" />
+                               :timesAgo="{ day: 14 }" id="queryTimeRange" />
                 </div>
             </div>
             <label class="col-1 col-form-label text-end" for="queryTimeGranularity">时间粒度</label>
             <div class="col-2">
                 <div class="input-group">
                     <span class="input-group-text"><FontAwesomeIcon icon="clock" /></span>
-                    <TimeGranularity v-model="query.timeGranularity" id="queryTimeGranularity"
-                                     :granularities="timeGranularities as Writable<typeof timeGranularities>" />
+                    <TimeGranularity v-model="query.timeGranularity"
+                                     :granularities="timeGranularities as Writable<typeof timeGranularities>"
+                                     id="queryTimeGranularity" />
                 </div>
             </div>
         </div>
     </form>
-    <div ref="chartDom" id="statsChartDom" class="echarts mt-4" />
+    <div ref="chartDom" class="echarts mt-4" id="statsChartDom" />
 </template>
 
 <script setup lang="ts">
diff --git a/fe/src/views/Status.vue b/fe/src/views/Status.vue
index 449d0a93..b400af7d 100644
--- a/fe/src/views/Status.vue
+++ b/fe/src/views/Status.vue
@@ -7,7 +7,7 @@
                     <span class="input-group-text"><FontAwesomeIcon icon="calendar-alt" /></span>
                     <TimeRange v-model:startTime="query.startTime"
                                v-model:endTime="query.endTime"
-                               id="queryTimeRange" :timesAgo="{ day: 1 }" />
+                               :timesAgo="{ day: 1 }" id="queryTimeRange" />
                 </div>
             </div>
             <label class="col-1 col-form-label text-end" for="queryTimeGranularity">时间粒度</label>
@@ -15,8 +15,8 @@
                 <div class="input-group">
                     <span class="input-group-text"><FontAwesomeIcon icon="clock" /></span>
                     <TimeGranularity v-model="query.timeGranularity"
-                                     id="queryTimeGranularity"
-                                     :granularities="['minute', 'hour', 'day']" />
+                                     :granularities="['minute', 'hour', 'day']"
+                                     id="queryTimeGranularity" />
                 </div>
             </div>
         </div>
@@ -28,7 +28,7 @@
             <button type="submit" class="col-auto btn btn-primary">查询</button>
         </div>
     </form>
-    <div ref="chartDom" id="statusChartDom" class="echarts mt-4" />
+    <div ref="chartDom" class="echarts mt-4" id="statusChartDom" />
 </template>
 
 <script setup lang="ts">
@@ -191,6 +191,7 @@ const submitQueryForm = async () => {
         .map('id')
         .map((seriesName: keyof ApiStatus[0]) => ({
             id: seriesName,
+
             // select column from status, UnixTimestamp * 1000 since echarts only accepts milliseconds
             data: statusResult.map(i => [i.startTime * 1000, i[seriesName]])
         }))
diff --git a/fe/src/views/User.vue b/fe/src/views/User.vue
index 68b229e5..20e51096 100644
--- a/fe/src/views/User.vue
+++ b/fe/src/views/User.vue
@@ -2,10 +2,10 @@
     <UserQueryForm :query="$route.query" :params="params" :selectUserBy="selectUserBy" class="my-4" />
     <UsersPage v-for="(users, pageIndex) in userPages"
                :key="`page${users.pages.currentCursor}`"
-               :id="`page${users.pages.currentCursor}`"
                :users="users"
                :isLoadingNewPage="isLoading"
-               :isLastPageInPages="pageIndex === userPages.length - 1" />
+               :isLastPageInPages="pageIndex === userPages.length - 1"
+               :id="`page${users.pages.currentCursor}`" />
     <PlaceholderError v-if="lastFetchError !== null" :error="lastFetchError" class="border-top" />
     <PlaceholderPostList v-show="showPlaceholderPostList" :isLoading="isLoading" />
 </template>
@@ -28,14 +28,14 @@ import { onBeforeRouteUpdate, useRoute } from 'vue-router';
 import { useHead } from '@unhead/vue';
 import _ from 'lodash';
 
-const route = useRoute();
-useHead({ title: titleTemplate('用户查询') });
 const props = defineProps<{
     page: string,
     uid: string,
     name: string,
     displayName: string
 }>();
+const route = useRoute();
+useHead({ title: titleTemplate('用户查询') });
 const params = ref<Pick<SelectTiebaUserParams, Exclude<SelectTiebaUserBy, '' | 'displayNameNULL' | 'nameNULL'>>>({});
 const selectUserBy = ref<SelectTiebaUserBy>('');
 const userPages = ref<ApiUsersQuery[]>([]);