修改标签的出现逻辑

src/components.d.ts

@@ -7,7 +7,10 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    IEpArrowD: typeof import('~icons/ep/arrow-d')['default']
+    IEpArrowDown: typeof import('~icons/ep/arrow-down')['default']
     IEpArrowRightBold: typeof import('~icons/ep/arrow-right-bold')['default']
+    IEpArrowUp: typeof import('~icons/ep/arrow-up')['default']
     IEpBell: typeof import('~icons/ep/bell')['default']
     IEpCaretRight: typeof import('~icons/ep/caret-right')['default']
     IEpLoading: typeof import('~icons/ep/loading')['default']

src/oj/problem/detail.vue

@@ -27,6 +27,18 @@ const props = withDefaults(defineProps<Props>(), {
 
 const errMsg = ref("无数据")
 
+const onlyDetail = computed(
+  () =>
+    screenMode.value === ScreenMode.both ||
+    screenMode.value === ScreenMode.problem,
+)
+
+const onlyCode = computed(
+  () =>
+    screenMode.value === ScreenMode.both ||
+    screenMode.value === ScreenMode.code,
+)
+
 async function init() {
   try {
     const res = await getProblem(props.problemID, props.contestID)
@@ -51,12 +63,7 @@ onBeforeUnmount(() => {
     x-gap="16"
     :cols="screenMode === ScreenMode.both ? 2 : 1"
   >
-    <n-gi
-      :span="isDesktop ? 1 : 2"
-      v-show="
-        screenMode === ScreenMode.both || screenMode === ScreenMode.problem
-      "
-    >
+    <n-gi :span="isDesktop ? 1 : 2" v-show="onlyDetail">
       <n-scrollbar v-if="isDesktop" style="max-height: calc(100vh - 92px)">
         <n-tabs default-value="content" type="segment">
           <n-tab-pane name="content" tab="题目描述">
@@ -85,14 +92,9 @@ onBeforeUnmount(() => {
         </n-tab-pane>
       </n-tabs>
     </n-gi>
-    <n-gi
-      v-if="isDesktop"
-      v-show="screenMode === ScreenMode.both || screenMode === ScreenMode.code"
-    >
+    <n-gi v-if="isDesktop" v-show="onlyCode">
       <Editor />
     </n-gi>
   </n-grid>
   <n-empty v-else :description="errMsg"></n-empty>
 </template>
-
-<style scoped></style>

src/oj/problem/list.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useUserStore } from "~/shared/store/user"
+import { NSpace, NTag } from "naive-ui"
 import { filterEmptyValue, getTagColor } from "utils/functions"
 import { ProblemFiltered } from "utils/types"
 import { getProblemList, getRandomProblemID } from "oj/api"
-import Pagination from "~/shared/Pagination.vue"
-import { NSpace, NTag } from "naive-ui"
 import ProblemStatus from "./components/ProblemStatus.vue"
+import { useUserStore } from "~/shared/store/user"
 import { getProblemTagList } from "~/shared/api"
+import Pagination from "~/shared/Pagination.vue"
 import { isDesktop } from "~/shared/composables/breakpoints"
 
 interface Tag {
@@ -69,7 +69,7 @@ async function listTags() {
   const res = await getProblemTagList()
   tags.value = res.data.map((r: Omit<Tag, "checked">) => ({
     ...r,
-    checked: false,
+    checked: query.tag === r.name,
   }))
 }
 
@@ -117,6 +117,16 @@ watch(
   },
 )
 
+watch(
+  () => query.tag,
+  () => {
+    tags.value = tags.value.map((r: Omit<Tag, "checked">) => ({
+      ...r,
+      checked: query.tag === r.name,
+    }))
+  },
+)
+
 watch(
   () => route.path === "/" && route.query,
   (newVal) => {
@@ -186,8 +196,8 @@ function rowProps(row: ProblemFiltered) {
             :options="difficultyOptions"
           />
         </n-form-item>
-        <n-form-item label="搜索">
-          <n-input clearable @change="search" />
+        <n-form-item>
+          <n-input clearable @change="search" placeholder="标题或序号" />
         </n-form-item>
       </n-form>
       <n-form :show-feedback="false" inline label-placement="left">
@@ -199,20 +209,28 @@ function rowProps(row: ProblemFiltered) {
           </n-space>
         </n-form-item>
       </n-form>
-      <n-button @click="toggleShowTag()" quaternary>标签</n-button>
+      <n-button @click="toggleShowTag()" quaternary icon-placement="right">
+        <template #icon>
+          <n-icon>
+            <i-ep-arrow-down v-if="showTag" />
+            <i-ep-arrow-up v-else />
+          </n-icon>
+        </template>
+        标签
+      </n-button>
     </n-space>
     <n-collapse-transition :show="showTag">
       <n-space>
-        <n-button
-          @click="chooseTag(tag)"
+        <n-tag
           v-for="tag in tags"
+          :closable="tag.checked"
+          @close="chooseTag(tag)"
+          @click="chooseTag(tag)"
           :key="tag.id"
-          size="small"
-          secondary
           :type="tag.checked ? 'success' : 'default'"
         >
           {{ tag.name }}
-        </n-button>
+        </n-tag>
       </n-space>
     </n-collapse-transition>
     <n-data-table