- ref selectedPostTypes? and its <AMenu>

* now longer setting defualt value of `selectedPage` to the first page
* change the height of `.pev2` from dynamicly `40vh` to determined `53rem`
@ `<PostQueryPlanVisualizer>`

* rename prop `ApiPosts.response.queries` to `query` as it only contains a single query after union @ api/types.ts
@ fe

Author: n0099

fe/src/api/types.ts

@@ -39,7 +39,7 @@ export type ApiPosts = Api<CursorPagination & {
     }>,
     users: User[],
     latestRepliers: LatestReplier[],
-    queries: Record<PostType, { query: string, plan: ObjUnknown[] }>
+    query: { query: string, plan: ObjUnknown[] }
 }, { query: JsonString }>;
 export type ApiForumThreadsID = Api<CursorPagination & {
     tid: Tid[]

fe/src/components/post/QueryPlanVisualizer.vue

@@ -1,13 +1,8 @@
 <template>
-<div class="query-plan-visualizer">
+<div class="query-plan-visualizer d-flex flex-wrap">
     <ClientOnly>
         <div class="d-inline-flex justify-content-center w-100 border-bottom">
             <span class="align-self-center">查询计划：</span>
-            <AMenu v-model:selectedKeys="selectedPostTypes" mode="horizontal" class="justify-content-center w-25">
-                <AMenuItem key="thread">主题帖</AMenuItem>
-                <AMenuItem key="reply">回复帖</AMenuItem>
-                <AMenuItem key="subReply">楼中楼</AMenuItem>
-            </AMenu>
             <select v-model="selectedPage" class="form-select">
                 <option
                     v-for="page in data.pages"
@@ -23,11 +18,10 @@
                 :planSource="JSON.stringify(query.plan, null, 4)" class="pev2" />
         </DefinePlan>
         <ReusePlan
-            :key="`${selectedPage}/${selectedPostType}`"
-            v-if="!(selectedPostType === undefined || selectedPage === undefined)"
+            :key="selectedPage" v-if="selectedPage !== undefined"
             :query="data.pages
                 .find(page => page.pages.currentCursor === selectedPage)
-                ?.queries[selectedPostType]" />
+                ?.query" />
     </ClientOnly>
 </div>
 </template>
@@ -38,13 +32,8 @@ import { Plan } from 'pev2';
 import 'pev2/dist/pev2.css';
 
 const { data } = defineProps<{ data: InfiniteData<ApiPosts['response']> }>();
-const selectedPostTypes = ref<[PostType]>();
-const selectedPostType = computed(() => selectedPostTypes.value?.[0]);
 const selectedPage = ref<Cursor>();
-const [DefinePlan, ReusePlan] = createReusableTemplate<{ query?: ApiPosts['response']['queries'][PostType] }>();
-
-watchEffect(() => {
-    selectedPage.value = data.pages.at(-1)?.pages.currentCursor;
+const [DefinePlan, ReusePlan] = createReusableTemplate<{ query?: ApiPosts['response']['query'] }>();
 });
 </script>
 
@@ -58,7 +47,7 @@ select {
 }
 
 .pev2 {
-    height: 40vh;
+    height: 53rem;
     resize: block;
     contain: content;
 }