把大部分的 n-space 替换成 n-flex

src/oj/contest/components/ContestMenu.vue

@@ -32,7 +32,7 @@ const options: DropdownOption[] = [
 </script>
 <template>
   <div v-if="contestMenuVisible">
-    <n-space v-if="isDesktop">
+    <n-flex v-if="isDesktop">
       <n-button :type="getCurrentType('problems')" @click="goto('problems')">
         比赛题目
       </n-button>
@@ -45,7 +45,7 @@ const options: DropdownOption[] = [
       <n-button :type="getCurrentType('rank')" @click="goto('rank')">
         比赛排名
       </n-button>
-    </n-space>
+    </n-flex>
     <n-dropdown v-else :options="options" @select="goto">
       <n-button>菜单</n-button>
     </n-dropdown>

src/oj/contest/detail.vue

@@ -30,9 +30,12 @@ const passwordFormVisible = computed(
 </script>
 
 <template>
-  <n-space vertical size="large" v-if="contestStore.contest">
-    <n-space align="center" justify="space-between">
-      <n-space align="center">
+  <n-flex vertical size="large" v-if="contestStore.contest">
+    <n-flex align="center" justify="space-between">
+      <n-flex align="center">
+        <n-tag :type="CONTEST_STATUS[contestStore.contestStatus]['type']">
+          {{ contestStore.countdown }}
+        </n-tag>
         <Icon
           v-if="contestStore.isPrivate"
           icon="streamline-emojis:locked-with-key"
@@ -40,18 +43,12 @@ const passwordFormVisible = computed(
           :height="30"
         ></Icon>
         <h2 class="contestTitle">{{ contestStore.contest.title }}</h2>
-        <n-tag
-          size="small"
-          :type="CONTEST_STATUS[contestStore.contestStatus]['type']"
-        >
-          {{ contestStore.countdown }}
-        </n-tag>
-      </n-space>
-      <n-space align="center">
+      </n-flex>
+      <n-flex align="center">
         <ContestInfo />
         <ContestMenu />
-      </n-space>
-    </n-space>
+      </n-flex>
+    </n-flex>
     <n-form
       :inline="isDesktop"
       label-placement="left"
@@ -74,7 +71,7 @@ const passwordFormVisible = computed(
       </n-form-item>
     </n-form>
     <router-view></router-view>
-  </n-space>
+  </n-flex>
 </template>
 
 <style scoped>

src/oj/contest/list.vue

@@ -143,7 +143,7 @@ function rowProps(row: Contest) {
 }
 </script>
 <template>
-  <n-space vertical size="large">
+  <n-flex vertical size="large">
     <n-space>
       <n-form :show-feedback="false" label-placement="left" inline>
         <n-form-item label="比赛状态">
@@ -166,10 +166,10 @@ function rowProps(row: Contest) {
       </n-form>
       <n-form :show-feedback="false" label-placement="left" inline>
         <n-form-item>
-          <n-space>
+          <n-flex>
             <n-button @click="search(query.keyword)">搜索</n-button>
             <n-button @click="clear" quaternary>重置</n-button>
-          </n-space>
+          </n-flex>
         </n-form-item>
       </n-form>
     </n-space>
@@ -179,7 +179,7 @@ function rowProps(row: Contest) {
       :data="data"
       :row-props="rowProps"
     />
-  </n-space>
+  </n-flex>
   <Pagination
     v-model:limit="query.limit"
     v-model:page="query.page"