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

src/oj/problem/components/Editor.vue

@@ -46,7 +46,7 @@ function changeLanguage(v: string) {
 </script>
 
 <template>
-  <n-space vertical>
+  <n-flex vertical>
     <Form :storage-key="storageKey" @change-language="changeLanguage" />
     <CodeEditor
       v-model:value="code.value"
@@ -54,7 +54,7 @@ function changeLanguage(v: string) {
       :language="code.language"
       :height="editorHeight"
     />
-  </n-space>
+  </n-flex>
 </template>
 
 <style scoped></style>

src/oj/problem/components/Form.vue

@@ -87,7 +87,7 @@ function gotoTestCat() {
 </script>
 
 <template>
-  <n-space align="center">
+  <n-flex align="center">
     <n-select
       class="language"
       v-model:value="code.language"
@@ -108,7 +108,7 @@ function gotoTestCat() {
     >
       编辑
     </n-button>
-  </n-space>
+  </n-flex>
 </template>
 
 <style scoped>

src/oj/problem/components/ProblemContent.vue

@@ -96,10 +96,10 @@ function type(status: ProblemStatus) {
       title="🎉 本 题 已 经 被 你 解 决 啦"
     />
 
-    <n-space align="center">
+    <n-flex align="center">
       <n-tag>{{ problem._id }}</n-tag>
       <h2 class="problemTitle">{{ problem.title }}</h2>
-    </n-space>
+    </n-flex>
     <p class="title" :style="style">
       <n-flex align="center">
         <Icon icon="streamline-emojis:sparkles"></Icon>
@@ -135,7 +135,7 @@ function type(status: ProblemStatus) {
     </div>
 
     <div v-for="(sample, index) of samples" :key="index">
-      <n-space align="center">
+      <n-flex align="center">
         <p class="title" :style="style">例子 {{ index + 1 }}</p>
         <n-button
           size="small"
@@ -144,7 +144,7 @@ function type(status: ProblemStatus) {
         >
           {{ label(sample.status, sample.loading) }}
         </n-button>
-      </n-space>
+      </n-flex>
       <n-descriptions
         bordered
         :column="2"
@@ -152,19 +152,19 @@ function type(status: ProblemStatus) {
       >
         <n-descriptions-item>
           <template #label>
-            <n-space>
+            <n-flex>
               <span>输入</span>
               <Copy :value="sample.input" />
-            </n-space>
+            </n-flex>
           </template>
           <div class="testcase">{{ sample.input }}</div>
         </n-descriptions-item>
         <n-descriptions-item>
           <template #label>
-            <n-space>
+            <n-flex>
               <span>输出</span>
               <Copy :value="sample.output" />
-            </n-space>
+            </n-flex>
           </template>
           <div class="testcase">{{ sample.output }}</div>
         </n-descriptions-item>

src/oj/problem/components/ProblemInfo.vue

@@ -64,11 +64,11 @@ const options = {
       {{ getACRate(problem.accepted_number, problem.submission_number) }}
     </n-descriptions-item>
     <n-descriptions-item :span="3" label="标签">
-      <n-space>
+      <n-flex>
         <n-tag size="small" type="info" v-for="tag in problem.tags" :key="tag">
           {{ tag }}
         </n-tag>
-      </n-space>
+      </n-flex>
     </n-descriptions-item>
   </n-descriptions>
   <div class="pie" v-if="problem && problem.submission_number > 0">

src/oj/problem/components/Submit.vue

@@ -255,7 +255,7 @@ watch(
         :title="JUDGE_STATUS[submission.result]['name']"
       />
     </template>
-    <n-space vertical v-if="msg || infoTable.length">
+    <n-flex vertical v-if="msg || infoTable.length">
       <n-card v-if="msg" embedded class="msg">{{ msg }}</n-card>
       <n-data-table
         v-if="infoTable.length"
@@ -263,7 +263,7 @@ watch(
         :data="infoTable"
         :columns="columns"
       />
-    </n-space>
+    </n-flex>
   </n-popover>
   <n-modal
     preset="card"

src/oj/problem/list.vue

@@ -212,7 +212,7 @@ function rowProps(row: ProblemFiltered) {
 </script>
 
 <template>
-  <n-space vertical size="large">
+  <n-flex vertical size="large">
     <n-space>
       <n-form :show-feedback="false" inline label-placement="left">
         <n-form-item label="题目难度">
@@ -232,11 +232,11 @@ function rowProps(row: ProblemFiltered) {
       </n-form>
       <n-form :show-feedback="false" inline label-placement="left">
         <n-form-item>
-          <n-space align="center">
+          <n-flex align="center">
             <n-button @click="search(query.keyword)">搜索</n-button>
             <n-button @click="clear" quaternary>重置</n-button>
             <n-button @click="getRandom" quaternary>试试手气</n-button>
-          </n-space>
+          </n-flex>
         </n-form-item>
       </n-form>
       <n-button @click="toggleShowTag()" quaternary icon-placement="right">
@@ -248,7 +248,7 @@ function rowProps(row: ProblemFiltered) {
       </n-button>
     </n-space>
     <n-collapse-transition :show="showTag">
-      <n-space>
+      <n-flex>
         <n-tag
           v-for="tag in tags"
           :closable="tag.checked"
@@ -259,7 +259,7 @@ function rowProps(row: ProblemFiltered) {
         >
           {{ tag.name }}
         </n-tag>
-      </n-space>
+      </n-flex>
     </n-collapse-transition>
     <n-data-table
       striped
@@ -267,7 +267,7 @@ function rowProps(row: ProblemFiltered) {
       :columns="columns"
       :row-props="rowProps"
     />
-  </n-space>
+  </n-flex>
   <Pagination
     :total="total"
     v-model:limit="query.limit"