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

src/admin/user/components/Actions.vue

@@ -19,7 +19,7 @@ async function banUser() {
 }
 </script>
 <template>
-  <n-space align="center">
+  <n-flex>
     <n-button
       size="small"
       type="primary"
@@ -42,5 +42,5 @@ async function banUser() {
       </template>
       确定删除这个用户吗？删除后无法恢复！
     </n-popconfirm>
-  </n-space>
+  </n-flex>
 </template>

src/admin/user/components/Name.vue

@@ -9,7 +9,7 @@ const props = defineProps<Props>()
 const isAdmin = computed(() => props.user.admin_type !== "Regular User")
 </script>
 <template>
-  <n-space align="center">
+  <n-flex align="center">
     <n-tag v-if="props.user.is_disabled" type="error" size="small">
       封号中
     </n-tag>
@@ -21,5 +21,5 @@ const isAdmin = computed(() => props.user.admin_type !== "Regular User")
       {{ getUserRole(props.user.admin_type).tagString }}
     </n-tag>
     {{ props.user.username }}
-  </n-space>
+  </n-flex>
 </template>

src/admin/user/generate.vue

@@ -76,11 +76,11 @@ function handleAll() {
 
 <template>
   <n-space>
-    <n-space vertical>
-      <n-space align="center">
+    <n-flex vertical>
+      <n-flex align="center">
         <n-switch v-model:value="needKs" />
         <span>前面带上 ks</span>
-      </n-space>
+      </n-flex>
       <n-input v-model:value="prefix" placeholder="班级号" />
       <n-input
         type="textarea"
@@ -88,7 +88,7 @@ function handleAll() {
         placeholder="每行一个用户名"
         v-model:value="rawInput"
       />
-    </n-space>
+    </n-flex>
     <n-scrollbar style="max-height: calc(100vh - 34px)">
       <n-data-table
         v-if="usersToTable.length"
@@ -96,13 +96,13 @@ function handleAll() {
         :data="usersToTable"
       />
     </n-scrollbar>
-    <n-space vertical>
+    <n-flex vertical>
       <n-button @click="generateUsers">让我康康</n-button>
       <n-button type="warning" :disabled="!users.length" @click="uploadUsers">
         上传用户
       </n-button>
       <n-button type="info" @click="handleAll">一键三连</n-button>
-    </n-space>
+    </n-flex>
   </n-space>
 </template>
 

src/admin/user/list.vue

@@ -29,7 +29,7 @@ const columns: DataTableColumn<User>[] = [
   {
     title: "用户名",
     key: "username",
-    width: 180,
+    width: 200,
     render: (row) => h(Name, { user: row }),
   },
   {
@@ -155,12 +155,12 @@ watch(query, listUsers, { deep: true })
 </script>
 
 <template>
-  <n-space class="titleWrapper" justify="space-between">
-    <n-space>
+  <n-flex class="titleWrapper" justify="space-between">
+    <n-flex>
       <h2 class="title">用户列表</h2>
       <n-button type="primary" @click="createNewUser">新建用户</n-button>
-    </n-space>
-    <n-space>
+    </n-flex>
+    <n-flex>
       <n-popconfirm
         v-if="userIDs.length"
         @positive-click="onDeleteUsers(userIDs)"
@@ -170,9 +170,11 @@ watch(query, listUsers, { deep: true })
         </template>
         确定删除选中的用户吗？删除后无法恢复！
       </n-popconfirm>
-      <n-input placeholder="请输入关键字搜索" v-model:value="query.keyword" />
-    </n-space>
-  </n-space>
+      <div>
+        <n-input placeholder="请输入关键字搜索" v-model:value="query.keyword" />
+      </div>
+    </n-flex>
+  </n-flex>
   <n-data-table
     :data="users"
     :columns="columns"
@@ -214,10 +216,10 @@ watch(query, listUsers, { deep: true })
           <n-switch v-model:value="userEditing.is_disabled">封号</n-switch>
         </n-form-item-gi>
       </n-grid>
-      <n-space justify="end">
+      <n-flex justify="end">
         <n-button @click="onCloseEditModal">取消</n-button>
         <n-button type="primary" @click="handleEditUser">保存</n-button>
-      </n-space>
+      </n-flex>
     </n-form>
   </n-modal>
 </template>