From 68ce9dff9242ee795aa0a7ff81b2f59f15ac9853 Mon Sep 17 00:00:00 2001
From: n0099 <n@n0099.net>
Date: Wed, 13 Mar 2024 03:10:50 +0800
Subject: [PATCH] * fix `getUser()` & `renderUsername()` is not reactivity like
 d65bec292fa8e3ab2d108adc6d17c71fc277aec2 @ `<RendererTable>` * omit explicit
 reference to `props` in `<template>` @ `<PostPage>` & `<SelectParam>` *
 inline immediately assign to `ref.value` to the initial value param of
 `ref()` @ `<Time(Range|Granularity)>` * using
 https://github.com/tc39/proposal-import-attributes when importing JSON files
 as ESM @ api/bilibiliVote/index.ts * enable some `*.inlayHints.*` and
 `typescript.preferences.preferTypeOnlyAutoImports` @ .vscode/settings.json @
 fe

---
 fe/.vscode/settings.json                      | 20 +++++++++++++++++--
 fe/src/api/bilibiliVote/index.ts              | 18 ++++++++---------
 fe/src/components/Post/PostPage.vue           |  4 ++--
 fe/src/components/Post/badges/BadgeUser.vue   |  4 ++--
 .../Post/queryForm/widgets/SelectParam.vue    |  4 ++--
 .../Post/renderers/RendererTable.vue          |  6 +++---
 fe/src/components/widgets/TimeGranularity.vue |  5 ++---
 fe/src/components/widgets/TimeRange.vue       |  6 +++---
 8 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/fe/.vscode/settings.json b/fe/.vscode/settings.json
index c07d400e..86489ca1 100644
--- a/fe/.vscode/settings.json
+++ b/fe/.vscode/settings.json
@@ -11,8 +11,24 @@
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "eslint.nodePath": ".yarn/sdks",
-  "vue.complete.casing.props": "autoCamel",
   "[vue]": {
       "editor.defaultFormatter": "Vue.volar"
-  }
+  },
+  // below are optional settings
+  "vue.complete.casing.props": "autoCamel",
+  "javascript.inlayHints.enumMemberValues.enabled": true,
+  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
+  "javascript.inlayHints.parameterNames.enabled": "literals",
+  "javascript.inlayHints.parameterTypes.enabled": true,
+  "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
+  "typescript.inlayHints.enumMemberValues.enabled": true,
+  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
+  "typescript.inlayHints.parameterTypes.enabled": true,
+  "typescript.inlayHints.parameterNames.enabled": "literals",
+  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
+  "vue.inlayHints.missingProps": true,
+  "vue.inlayHints.inlineHandlerLeading": true,
+  "vue.inlayHints.optionsWrapper": true,
+  "vue.inlayHints.vBindShorthand": true,
+  "typescript.preferences.preferTypeOnlyAutoImports": true
 }
diff --git a/fe/src/api/bilibiliVote/index.ts b/fe/src/api/bilibiliVote/index.ts
index b3194dc1..35982158 100644
--- a/fe/src/api/bilibiliVote/index.ts
+++ b/fe/src/api/bilibiliVote/index.ts
@@ -1,12 +1,12 @@
-import allCandidatesVoteCount from './allCandidatesVoteCount.json';
-import allVoteCountGroupByHour from './allVoteCountGroupByHour.json';
-import allVoteCountGroupByMinute from './allVoteCountGroupByMinute.json';
-import candidateNames from './candidateNames.json';
-import top10CandidatesTimeline from './top10CandidatesTimeline.json';
-import top50CandidatesOfficialValidVoteCount from './top50CandidatesOfficialValidVoteCount.json';
-import top50CandidatesVoteCount from './top50CandidatesVoteCount.json';
-import top5CandidatesVoteCountGroupByHour from './top5CandidatesVoteCountGroupByHour.json';
-import top5CandidatesVoteCountGroupByMinute from './top5CandidatesVoteCountGroupByMinute.json';
+import allCandidatesVoteCount from './allCandidatesVoteCount.json' with { type: 'json' };
+import allVoteCountGroupByHour from './allVoteCountGroupByHour.json' with { type: 'json' };
+import allVoteCountGroupByMinute from './allVoteCountGroupByMinute.json' with { type: 'json' };
+import candidateNames from './candidateNames.json' with { type: 'json' };
+import top10CandidatesTimeline from './top10CandidatesTimeline.json' with { type: 'json' };
+import top50CandidatesOfficialValidVoteCount from './top50CandidatesOfficialValidVoteCount.json' with { type: 'json' };
+import top50CandidatesVoteCount from './top50CandidatesVoteCount.json' with { type: 'json' };
+import top5CandidatesVoteCountGroupByHour from './top5CandidatesVoteCountGroupByHour.json' with { type: 'json' };
+import top5CandidatesVoteCountGroupByMinute from './top5CandidatesVoteCountGroupByMinute.json' with { type: 'json' };
 import type { BoolInt, Float, SqlDateTimeUtcPlus8, UInt, UnixTimestamp } from '@/shared';
 
 export const json = {
diff --git a/fe/src/components/Post/PostPage.vue b/fe/src/components/Post/PostPage.vue
index b06bba01..27db39a8 100644
--- a/fe/src/components/Post/PostPage.vue
+++ b/fe/src/components/Post/PostPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <PageCurrentButton :currentCursor="props.posts.pages.currentCursor" />
+    <PageCurrentButton :currentCursor="posts.pages.currentCursor" />
     <RendererList v-if="renderType === 'list'" :initialPosts="posts" />
     <RendererTable v-else-if="renderType === 'table'" :posts="posts" />
     <PageNextButton v-if="isLastPageInPages && !isFetching && hasNextPage"
@@ -14,7 +14,7 @@ import PageNextButton from '../paginations/PageNextButton.vue';
 import type { PostRenderer } from '@/views/Post.vue';
 import type { ApiPosts } from '@/api/index.d';
 
-const props = defineProps<{
+defineProps<{
     posts: ApiPosts['response'],
     renderType: PostRenderer,
     isFetching: boolean,
diff --git a/fe/src/components/Post/badges/BadgeUser.vue b/fe/src/components/Post/badges/BadgeUser.vue
index dd1f4bba..ec13af70 100644
--- a/fe/src/components/Post/badges/BadgeUser.vue
+++ b/fe/src/components/Post/badges/BadgeUser.vue
@@ -42,6 +42,6 @@ const knownModeratorTypes: { [P in ForumModeratorType]: [string, BootstrapColor]
     publication_editor: ['吧刊小编', 'secondary'],
     publication: ['吧刊小编', 'secondary']
 };
-const moderators = computed(() =>
-    _.pick(knownModeratorTypes, props.user.currentForumModerator?.moderatorTypes.split(',') ?? []));
+const moderators = computed(() => _.pick(knownModeratorTypes,
+    props.user.currentForumModerator?.moderatorTypes.split(',') ?? []));
 </script>
diff --git a/fe/src/components/Post/queryForm/widgets/SelectParam.vue b/fe/src/components/Post/queryForm/widgets/SelectParam.vue
index 19f30e05..fdc9b578 100644
--- a/fe/src/components/Post/queryForm/widgets/SelectParam.vue
+++ b/fe/src/components/Post/queryForm/widgets/SelectParam.vue
@@ -1,6 +1,6 @@
 <template>
     <select @change="e => emit('paramChange', (e.target as HTMLSelectElement).value)"
-            :value="props.currentParam" class="form-select form-control flex-grow-0" id="newParam">
+            :value="currentParam" class="form-select form-control flex-grow-0" id="newParam">
         <option value="add" disabled>New...</option>
         <optgroup v-for="(group, groupName) in paramsGroup" :key="groupName" :label="groupName">
             <option v-for="(paramDescription, paramName) in group"
@@ -49,7 +49,7 @@ const paramsGroup = {
 <script setup lang="ts">
 import * as _ from 'lodash-es';
 
-const props = defineProps<{ currentParam: string }>();
+defineProps<{ currentParam: string }>();
 // eslint-disable-next-line vue/define-emits-declaration
 const emit = defineEmits({ paramChange: p => _.includes(_.flatMap(paramsGroup, Object.keys), p) });
 </script>
diff --git a/fe/src/components/Post/renderers/RendererTable.vue b/fe/src/components/Post/renderers/RendererTable.vue
index 504b1c39..9d194470 100644
--- a/fe/src/components/Post/renderers/RendererTable.vue
+++ b/fe/src/components/Post/renderers/RendererTable.vue
@@ -92,7 +92,7 @@ import type { Reply, SubReply, Thread } from '@/api/post';
 import type { Pid, Tid } from '@/shared';
 import { toUserPortraitImageUrl, toUserProfileUrl } from '@/shared';
 
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { RouterLink } from 'vue-router';
 import { Table } from 'ant-design-vue';
 import type { ColumnType } from 'ant-design-vue/es/table/interface';
@@ -145,8 +145,8 @@ const subReplyColumns = ref<ColumnType[]>([
     { title: '最后更新时间', dataIndex: 'updatedAt' }
 ]);
 
-const getUser = baseGetUser(props.posts.users);
-const renderUsername = baseRenderUsername(getUser);
+const getUser = computed(() => baseGetUser(props.posts.users));
+const renderUsername = computed(() => baseRenderUsername(getUser.value));
 
 onMounted(() => {
     threads.value = props.posts.threads;
diff --git a/fe/src/components/widgets/TimeGranularity.vue b/fe/src/components/widgets/TimeGranularity.vue
index 9ffb9547..69f34ce8 100644
--- a/fe/src/components/widgets/TimeGranularity.vue
+++ b/fe/src/components/widgets/TimeGranularity.vue
@@ -21,7 +21,6 @@ const granularitiesDefaultOption: TimeGranularityStringMap = {
     month: '月',
     year: '年'
 };
-const options = ref<TimeGranularityStringMap>({});
-options.value = _.pick(granularitiesDefaultOption,
-    _.intersection(props.granularities, Object.keys(granularitiesDefaultOption)));
+const options = ref<TimeGranularityStringMap>(_.pick(granularitiesDefaultOption,
+    _.intersection(props.granularities, Object.keys(granularitiesDefaultOption))));
 </script>
diff --git a/fe/src/components/widgets/TimeRange.vue b/fe/src/components/widgets/TimeRange.vue
index f26d47ab..8182f8ee 100644
--- a/fe/src/components/widgets/TimeRange.vue
+++ b/fe/src/components/widgets/TimeRange.vue
@@ -36,12 +36,12 @@ const emit = defineEmits({
     'update:startTime': i => _.isNumber(i),
     'update:endTime': i => _.isNumber(i)
 });
-const timeRange = ref<[Dayjs, Dayjs]>([dayjs(), dayjs()]);
 
-timeRange.value = [
+const timeRange = ref<[Dayjs, Dayjs]>([
     dayjs(DateTime.now().minus(props.startBefore).startOf('minute').toISO()),
     dayjs(DateTime.now().startOf('minute').toISO())
-];
+]);
+
 watchEffect(() => {
     timeRange.value = [unix(props.startTime), unix(props.endTime)];
 });