* fix getUser() & renderUsername() is not reactivity like d65bec2 …

…@ `<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
n0099 · Mar 12, 2024 · 68ce9df · 68ce9df
1 parent 1e5835e
commit 68ce9df
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)];
 });