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

This commit is contained in:
2024-07-04 10:12:02 +08:00
parent c84d103418
commit 9a775d523a
31 changed files with 155 additions and 163 deletions

View File

@@ -25,7 +25,7 @@ async function handleDelete() {
</script>
<template>
<n-space>
<n-flex>
<n-button size="small" type="success" secondary @click="goEdit">
编辑
</n-button>
@@ -35,6 +35,6 @@ async function handleDelete() {
</template>
确定删除这条公告吗
</n-popconfirm>
</n-space>
</n-flex>
</template>
<style scoped></style>

View File

@@ -98,9 +98,9 @@ onMounted(init)
v-model:value="announcement.content"
:min-height="200"
/>
<n-space justify="end">
<n-flex justify="end">
<n-button type="primary" @click="submit">保存</n-button>
</n-space>
</n-flex>
</template>
<style scoped>
.title {

View File

@@ -1,12 +1,14 @@
<template>
<n-space justify="space-between" class="titleWrapper">
<n-flex justify="space-between" class="titleWrapper">
<h2 class="title">评论列表只列出有内容的</h2>
<n-input
<div>
<n-input
v-model:value="query.problem"
clearable
placeholder="输入题目序号"
/>
</n-space>
/>
</div>
</n-flex>
<n-data-table striped :columns="columns" :data="comments" />
<Pagination
:total="total"

View File

@@ -22,13 +22,13 @@ function goEditProblems() {
}
</script>
<template>
<n-space>
<n-flex>
<n-button size="small" type="primary" secondary @click="goEditProblems">
题目
</n-button>
<n-button size="small" type="info" secondary @click="goEdit">
编辑
</n-button>
</n-space>
</n-flex>
</template>
<style scoped></style>

View File

@@ -127,9 +127,9 @@ onMounted(getContestDetail)
v-model:value="contest.description"
:min-height="200"
/>
<n-space justify="end">
<n-flex justify="end">
<n-button type="primary" @click="submit">保存</n-button>
</n-space>
</n-flex>
</template>
<style scoped>

View File

@@ -83,10 +83,12 @@ watchDebounced(() => query.keyword, listContests, { debounce: 500, maxWait: 1000
</script>
<template>
<n-space justify="space-between" class="titleWrapper">
<n-flex justify="space-between" class="titleWrapper">
<h2 class="title">比赛列表</h2>
<n-input v-model:value="query.keyword" placeholder="输入标题关键字" />
</n-space>
<div>
<n-input v-model:value="query.keyword" placeholder="输入标题关键字" />
</div>
</n-flex>
<n-data-table :columns="columns" :data="contests" />
<Pagination
:total="total"

View File

@@ -55,7 +55,7 @@ function goCheck() {
}
</script>
<template>
<n-space align="center">
<n-flex>
<n-button size="small" secondary type="primary" @click="goEdit">
编辑
</n-button>
@@ -74,5 +74,5 @@ function goCheck() {
</template>
下载测试用例
</n-tooltip>
</n-space>
</n-flex>
</template>

View File

@@ -37,10 +37,10 @@ async function addProblem() {
<template #trigger>
<n-button secondary size="small" type="primary">+</n-button>
</template>
<n-space vertical>
<n-flex vertical>
<span>请输入在这场比赛中的显示编号</span>
<n-input autofocus v-model:value="displayID" />
</n-space>
</n-flex>
</n-popconfirm>
</template>
<style scoped></style>

View File

@@ -424,7 +424,7 @@ watch(
title="输出的描述"
/>
<div class="box" v-for="(sample, index) in problem.samples" :key="index">
<n-space justify="space-between" align="center">
<n-flex justify="space-between" align="center">
<strong>测试样例 {{ index + 1 }}</strong>
<n-button
tertiary
@@ -434,19 +434,19 @@ watch(
>
删除 {{ index + 1 }}
</n-button>
</n-space>
</n-flex>
<n-grid x-gap="20" cols="2">
<n-gi span="1">
<n-space vertical>
<n-flex vertical>
<span>输入样例</span>
<n-input type="textarea" v-model:value="sample.input" />
</n-space>
</n-flex>
</n-gi>
<n-gi span="1">
<n-space vertical>
<n-flex vertical>
<span>输出样例</span>
<n-input type="textarea" v-model:value="sample.output" />
</n-space>
</n-flex>
</n-gi>
</n-grid>
</div>
@@ -493,7 +493,7 @@ watch(
type="info"
>
<template #header>
<n-space align="center">
<n-flex align="center">
<div>
测试组编号 {{ problem.test_case_id.slice(0, 12) }} 共有
{{ problem.test_case_score.length }}
@@ -508,21 +508,21 @@ watch(
>
下载
</n-button>
</n-space>
</n-flex>
</template>
</n-alert>
<n-space justify="space-between">
<n-form inline label-placement="left" :show-feedback="false">
<n-form-item label="语言">
<n-checkbox-group v-model:value="problem.languages">
<n-space align="center">
<n-flex align="center">
<n-checkbox
v-for="(language, index) in languageOptions"
:key="index"
:value="language.value"
:label="language.label"
/>
</n-space>
</n-flex>
</n-checkbox-group>
</n-form-item>
<n-form-item>
@@ -543,22 +543,24 @@ watch(
</n-button>
</n-form-item>
</n-form>
<n-space align="center">
<n-flex align="center">
<n-tooltip placement="left">
<template #trigger>
<n-button text>温馨提醒</n-button>
</template>
测试用例最好要有10个要考虑边界情况不要跟测试样例一模一样
</n-tooltip>
<n-upload
:show-file-list="false"
accept=".zip"
:custom-request="handleUploadTestcases"
>
<n-button type="info">上传测试用例</n-button>
</n-upload>
<div>
<n-upload
:show-file-list="false"
accept=".zip"
:custom-request="handleUploadTestcases"
>
<n-button type="info">上传测试用例</n-button>
</n-upload>
</div>
<n-button type="primary" @click="submit">提交</n-button>
</n-space>
</n-flex>
</n-space>
</template>

View File

@@ -119,9 +119,9 @@ watchDebounced(() => query.keyword, listProblems, {
</script>
<template>
<n-space class="titleWrapper" justify="space-between">
<n-flex class="titleWrapper" justify="space-between">
<h2 class="title">{{ title }}</h2>
<n-space>
<n-flex>
<n-button v-if="isContestProblemList" @click="createContestProblem">
新建比赛题目
</n-button>
@@ -132,9 +132,11 @@ watchDebounced(() => query.keyword, listProblems, {
>
从题库中选择
</n-button>
<n-input v-model:value="query.keyword" placeholder="输入标题关键字" />
</n-space>
</n-space>
<div>
<n-input v-model:value="query.keyword" placeholder="输入标题关键字" />
</div>
</n-flex>
</n-flex>
<n-data-table striped :columns="columns" :data="problems" />
<Pagination
:total="total"

View File

@@ -162,12 +162,12 @@ onMounted(() => {
<template>
<n-card class="box">
<template #header>
<n-space align="center">
<n-flex align="center">
网站设置
<n-button type="primary" size="small" @click="saveWebsiteConfig">
保存
</n-button>
</n-space>
</n-flex>
</template>
<n-form inline label-placement="left">
<n-form-item label="网站 URL">
@@ -185,20 +185,20 @@ onMounted(() => {
<n-input v-model:value="websiteConfig.website_footer" />
</n-form-item>
</n-form>
<n-space align="center">
<n-space align="center">
<n-flex align="center">
<n-flex align="center">
<span>是否允许注册</span>
<n-switch v-model:value="websiteConfig.allow_register" />
</n-space>
<n-space align="center">
</n-flex>
<n-flex align="center">
<span>显示全部题目的提交</span>
<n-switch v-model:value="websiteConfig.submission_list_show_all" />
</n-space>
</n-space>
</n-flex>
</n-flex>
</n-card>
<n-card class="box">
<template #header>
<n-space align="center">
<n-flex align="center">
判题服务器
<n-button
v-if="abnormalServers.length"
@@ -208,7 +208,7 @@ onMounted(() => {
>
删除无效服务器
</n-button>
</n-space>
</n-flex>
</template>
<div class="box">
接口凭证 <n-tag size="small">{{ token }}</n-tag>
@@ -222,12 +222,12 @@ onMounted(() => {
</n-card>
<n-card class="box" v-if="testcases.length">
<template #header>
<n-space align="center">
<n-flex align="center">
无效的测试用例
<n-button size="small" type="warning" @click="() => deleteTestcase()">
全部删除
</n-button>
</n-space>
</n-flex>
</template>
<n-data-table
striped

View File

@@ -79,11 +79,11 @@ watch(
</script>
<template>
<n-space align="center">
<n-flex align="center">
<n-avatar round :size="60" :src="userStore.profile?.avatar" />
<h1 class="name">亲爱的管理员{{ userStore.user?.username }}</h1>
</n-space>
<n-space>
</n-flex>
<n-flex>
<h2>
<n-gradient-text type="info"> 总用户数{{ userCount }} </n-gradient-text>
</h2>
@@ -97,17 +97,19 @@ watch(
近期比赛{{ contestCount }}
</n-gradient-text>
</h2>
</n-space>
<n-space align="center" class="actions">
</n-flex>
<n-flex align="center" class="actions">
<span>我猜你要</span>
<n-button @click="router.push('/admin/problem/create')">新题目</n-button>
<n-button @click="router.push('/admin/contest/create')">新比赛</n-button>
<n-input
<div>
<n-input
clearable
@change="listRanks"
v-model:value="query.username"
placeholder="班级前缀"
/>
/>
</div>
<n-button @click="listRanks">用户排名</n-button>
<Pagination
class="pagination"
@@ -115,7 +117,7 @@ watch(
v-model:page="query.page"
v-model:limit="query.limit"
/>
</n-space>
</n-flex>
<n-data-table v-if="data.length" striped :data="data" :columns="columns" />
</template>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>