* fix nuxt/nuxt#26734 @ <PostQueryForm>, <UserQueryForm> & `<Widg…

…etSelectUser>` * move var `knownModeratorTypes` from `<PostBadgeUser>` to `api/user.ts` for share it with `<PostQueryForm>` @ fe
n0099 · Oct 18, 2024 · 6ef0c27 · 6ef0c27
1 parent 5a0a4fe
commit 6ef0c27
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 44 deletions.
diff --git a/fe/src/api/user.ts b/fe/src/api/user.ts
@@ -8,6 +8,15 @@ export type ForumModeratorType = 'assist'
 | 'publication'
 | 'videoadmin'
 | 'voiceadmin';
+export const knownModeratorTypes: { [P in ForumModeratorType]: [string, BootstrapColor] } = {
+    ...keysWithSameValue(['fourth_manager', 'fourthmanager'], ['第四吧主', 'danger']),
+    manager: ['吧主', 'danger'],
+    assist: ['小吧', 'primary'],
+    picadmin: ['图片小编', 'warning'],
+    videoadmin: ['视频小编', 'warning'],
+    voiceadmin: ['语音小编', 'secondary'],
+    ...keysWithSameValue(['publication_editor', 'publication'], ['吧刊小编', 'secondary'])
+};
 export type AuthorExpGrade = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18;
 export type UserGender = 0 | 1 | 2 | null;
 export type UserGenderQueryParam = '0' | '1' | '2' | 'NULL';

diff --git a/fe/src/components/post/badge/User.vue b/fe/src/components/post/badge/User.vue
@@ -37,16 +37,6 @@ const { user } = defineProps<{
     threadAuthorUid?: BaiduUserID,
     replyAuthorUid?: BaiduUserID
 }>();
-
-const knownModeratorTypes: { [P in ForumModeratorType]: [string, BootstrapColor] } = {
-    ...keysWithSameValue(['fourth_manager', 'fourthmanager'], ['第四吧主', 'danger']),
-    manager: ['吧主', 'danger'],
-    assist: ['小吧', 'primary'],
-    picadmin: ['图片小编', 'warning'],
-    videoadmin: ['视频小编', 'warning'],
-    voiceadmin: ['语音小编', 'secondary'],
-    ...keysWithSameValue(['publication_editor', 'publication'], ['吧刊小编', 'secondary'])
-};
 const moderators = computed(() => _.pick(knownModeratorTypes,
     user.currentForumModerator?.moderatorTypes.split(',') ?? []));
 </script>
diff --git a/fe/src/components/post/queryForm/QueryForm.vue b/fe/src/components/post/queryForm/QueryForm.vue
@@ -41,26 +41,32 @@
     <div class="row mt-2 mb-3">
         <label class="col-1 col-form-label" for="paramOrder">排序方式</label>
         <div class="col-8">
-            <div class="input-group">
+            <div v-for="orderBy in [uniqueParams.orderBy]" :key="orderBy.value" class="input-group">
                 <span class="input-group-text"><FontAwesome :icon="faSortAmountDown" /></span>
                 <select
-                    v-model="uniqueParams.orderBy.value"
+                    v-model="orderBy.value"
                     :class="{ 'is-invalid': isOrderByInvalid }"
                     class="form-select form-control" id="paramOrder">
-                    <option value="default">默认（按帖索引查询按帖子ID正序，按吧索引/搜索查询按发帖时间倒序）</option>
-                    <option value="postedAt">发帖时间</option>
+                    <option :selected="orderBy.value === 'default'" value="default">
+                        默认（按帖索引查询按帖子ID正序，按吧索引/搜索查询按发帖时间倒序）
+                    </option>
+                    <option :selected="orderBy.value === 'postedAt'" value="postedAt">发帖时间</option>
                     <optgroup label="帖子ID">
-                        <option value="tid">主题帖tid</option>
-                        <option value="pid">回复帖pid</option>
-                        <option value="spid">楼中楼spid</option>
+                        <option :selected="orderBy.value === 'tid'" value="tid">主题帖tid</option>
+                        <option :selected="orderBy.value === 'pid'" value="pid">回复帖pid</option>
+                        <option :selected="orderBy.value === 'spid'" value="spid">楼中楼spid</option>
                     </optgroup>
                 </select>
                 <select
-                    v-show="uniqueParams.orderBy.value !== 'default'"
-                    v-model="uniqueParams.orderBy.subParam.direction"
+                    v-show="orderBy.value !== 'default'"
+                    v-model="orderBy.subParam.direction"
                     class="form-select form-control" id="paramOrderBy">
-                    <option value="ASC">正序（从小到大，旧到新）</option>
-                    <option value="DESC">倒序（从大到小，新到旧）</option>
+                    <option :selected="orderBy.subParam.direction === 'ASC'" value="ASC">
+                        正序（从小到大，旧到新）
+                    </option>
+                    <option :selected="orderBy.subParam.direction === 'DESC'" value="DESC">
+                        倒序（从大到小，新到旧）
+                    </option>
                 </select>
             </div>
         </div>
@@ -145,17 +151,20 @@
             </template>
             <template v-if="p.name === 'authorManagerType'">
                 <select v-model="p.value" class="form-control flex-grow-0 w-25">
-                    <option value="NULL">吧友</option>
-                    <option value="manager">吧主</option>
-                    <option value="assist">小吧主</option>
-                    <option value="voiceadmin">语音小编</option>
+                    <option :selected="p.value === 'NULL'" value="NULL">吧友</option>
+                    <option
+                        v-for="[moderatorType, moderatorTypeDescription] in Object.entries(knownModeratorTypes)
+                            .flatMap(i => [i[0], i[1]])"
+                        :key="moderatorType" :value="moderatorType" :selected="moderatorType === p.value">
+                        {{ moderatorTypeDescription }}
+                    </option>
                 </select>
             </template>
-            <template v-if="['authorGender', 'latestReplierGender'].includes(p.name)">
+            <template v-if="p.name === 'authorGender' || p.name === 'latestReplierGender'">
                 <select v-model="p.value" class="form-control flex-grow-0 w-25">
-                    <option selected value="0">未设置（显示为男）</option>
-                    <option value="1">男 ♂</option>
-                    <option value="2">女 ♀</option>
+                    <option :selected="p.value === '0'" value="0">未设置（显示为男）</option>
+                    <option :selected="p.value === '1'" value="1">男 ♂</option>
+                    <option :selected="p.value === '2'" value="2">女 ♀</option>
                 </select>
             </template>
             <template v-if="p.name === 'authorExpGrade'">

diff --git a/fe/src/components/user/QueryForm.vue b/fe/src/components/user/QueryForm.vue
@@ -4,11 +4,11 @@
     <label class="col-2 col-form-label text-end" for="queryGender">性别</label>
     <div class="col-3">
         <select v-model="gender" class="form-select" id="queryGender">
-            <option value="default">不限</option>
-            <option value="NULL">NULL</option>
-            <option value="0">未指定（显示为男）</option>
-            <option value="1">男 ♂</option>
-            <option value="2">女 ♀</option>
+            <option :selected="gender === 'default'" value="default">不限</option>
+            <option :selected="gender === 'NULL'" value="NULL">NULL</option>
+            <option :selected="gender === '0'" value="0">未指定（显示为男）</option>
+            <option :selected="gender === '1'" value="1">男 ♂</option>
+            <option :selected="gender === '2'" value="2">女 ♀</option>
         </select>
     </div>
     <button type="submit" class="col-auto btn btn-primary">查询</button>

diff --git a/fe/src/components/widget/SelectUser.vue b/fe/src/components/widget/SelectUser.vue
@@ -2,18 +2,17 @@
 <div class="col-5">
     <div class="input-group">
         <select v-model="selectBy" class="select-user-by form-select">
-            <option value="">未选择</option>
-            <option value="uid">百度UID</option>
-            <option value="name">用户名</option>
-            <option value="nameNULL">NULL用户名</option>
-            <option value="displayName">覆盖名</option>
-            <option value="displayNameNULL">NULL覆盖名</option>
+            <option
+                v-for="[description, pssibleSelecteBy] in Object.entries(possibleSelectByDescription)"
+                :key="pssibleSelecteBy" :selected="pssibleSelecteBy === selectBy">
+                {{ description }}
+            </option>
         </select>
         <template v-if="selectBy === 'uid'">
             <select v-model="params.uidCompareBy" class="uid-compare-by form-select">
-                <option>&lt;</option>
-                <option>=</option>
-                <option>&gt;</option>
+                <option :selected="params.uidCompareBy === '<'">&lt;</option>
+                <option :selected="params.uidCompareBy === '='">=</option>
+                <option :selected="params.uidCompareBy === '>'">&gt;</option>
             </select>
             <input
                 v-model="params.uid" type="number" placeholder="4000000000"
@@ -59,7 +58,16 @@ const emit = defineEmits({
         && selectUserBy.includes(p.selectBy)
         && _.isObject(p.params) // todo: check p.params against props.paramsNameMap
 });
-const selectBy = ref<SelectUserBy | 'displayNameNULL' | 'nameNULL'>('');
+const selectBy = ref<SelectUserBy>('');
+const possibleSelectByDescription: Record<SelectUserBy, string> = {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    '': '未选择',
+    uid: '百度UID',
+    name: '用户名',
+    nameNULL: 'NULL用户名',
+    displayName: '覆盖名',
+    displayNameNULL: 'NULL覆盖名'
+};
 const params = ref<SelectUserParams>({});
 
 const emitModelChange = () => {