From 6751dd4fe9591579968136776e92817611ff53c5 Mon Sep 17 00:00:00 2001
From: xuyue <517252939@qq.com>
Date: Wed, 1 Nov 2023 20:41:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=87=E7=AD=BE=E7=9A=84?=
 =?UTF-8?q?=E5=87=BA=E7=8E=B0=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts       |  3 +++
 src/oj/problem/detail.vue | 26 +++++++++++++-----------
 src/oj/problem/list.vue   | 42 ++++++++++++++++++++++++++++-----------
 3 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index ccb4b07..8e38130 100644
--- a/src/components.d.ts
+++ b/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']
diff --git a/src/oj/problem/detail.vue b/src/oj/problem/detail.vue
index a4a72c6..99a6c13 100644
--- a/src/oj/problem/detail.vue
+++ b/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>
diff --git a/src/oj/problem/list.vue b/src/oj/problem/list.vue
index 29dd138..a70e583 100644
--- a/src/oj/problem/list.vue
+++ b/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