把大部分的 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

@@ -209,6 +209,7 @@ export function getCommentStatistics(problemID: number) {
return http.get("comment/statistics", { params: { problem_id: problemID } })
}
// TODO: 这个API有问题
export function refreshUserProblemDisplayIds() {
return http.get("profile/fresh_display_id")
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,5 +1,5 @@
<template>
<n-space size="large" vertical>
<n-flex size="large" vertical>
<n-form :show-feedback="false" inline label-placement="left">
<n-form-item>
<n-input
@@ -60,18 +60,11 @@
</n-gradient-text>
</n-h1>
</n-space>
<n-space v-if="count.total === 0">
<n-h1>
<n-gradient-text type="primary">暂无数据统计</n-gradient-text>
</n-h1>
</n-space>
<n-data-table
v-if="list.length"
striped
:columns="columns"
:data="list"
/>
</n-space>
<n-h1 v-if="count.total === 0">
<n-gradient-text type="primary">暂无数据统计</n-gradient-text>
</n-h1>
<n-data-table v-if="list.length" striped :columns="columns" :data="list" />
</n-flex>
</template>
<script setup lang="ts">
import { formatISO, sub, type Duration } from "date-fns"
@@ -85,6 +78,7 @@ interface Props {
const props = defineProps<Props>()
const options: SelectOption[] = [
{ label: "30分钟内", value: "minutes:30" },
{ label: "本节课内", value: "hours:1" },
{ label: "两小时内", value: "hours:2" },
{ label: "一天内", value: "days:1" },

View File

@@ -82,16 +82,16 @@ onMounted(init)
</script>
<template>
<n-space vertical v-if="submission" :size="24">
<n-flex vertical v-if="submission" :size="24">
<n-alert
:type="JUDGE_STATUS[submission.result]['type']"
:title="JUDGE_STATUS[submission.result]['name']"
>
<n-space>
<n-flex>
<span>提交时间{{ parseTime(submission.create_time) }}</span>
<span>编程语言{{ submission.language }}</span>
<span>用户{{ submission.username }}</span>
</n-space>
</n-flex>
</n-alert>
<n-card embedded>
<n-code
@@ -124,7 +124,7 @@ onMounted(init)
:columns="columns"
:data="submission.info.data"
/>
</n-space>
</n-flex>
</template>
<style scoped>

View File

@@ -254,7 +254,7 @@ const columns = computed(() => {
})
</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="提交状态">
@@ -295,7 +295,7 @@ const columns = computed(() => {
</n-form>
</n-space>
<n-data-table striped :columns="columns" :data="submissions" />
</n-space>
</n-flex>
<Pagination
:total="total"
v-model:limit="query.limit"

View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import { getProfile } from "~/shared/api"
import { Profile } from "~/utils/types"
import { refreshUserProblemDisplayIds } from "../api"
const route = useRoute()
const router = useRouter()
@@ -31,15 +30,10 @@ async function init() {
}
}
async function refresh() {
await refreshUserProblemDisplayIds()
init()
}
onMounted(init)
</script>
<template>
<n-space
<n-flex
class="wrapper"
vertical
justify="center"
@@ -49,7 +43,7 @@ onMounted(init)
<n-avatar round :size="140" :src="profile.avatar" />
<h2>{{ profile.user.username }}</h2>
<p class="desc">{{ profile.mood }}</p>
</n-space>
</n-flex>
<n-descriptions
v-if="!loading && profile"
class="wrapper"
@@ -63,14 +57,8 @@ onMounted(init)
<n-descriptions-item label="总提交数">
{{ profile.submission_number }}
</n-descriptions-item>
<n-descriptions-item v-if="problems.length" :span="2">
<template #label>
<n-flex align="center">
已解决的题目
<n-button size="small" @click="refresh">强制刷新</n-button>
</n-flex>
</template>
<n-space>
<n-descriptions-item v-if="problems.length" label="已解决的题目" :span="2">
<n-flex>
<n-button
v-for="id in problems"
key="id"
@@ -78,7 +66,7 @@ onMounted(init)
>
{{ id }}
</n-button>
</n-space>
</n-flex>
</n-descriptions-item>
</n-descriptions>
<n-empty v-if="!loading && !profile" description="该用户不存在">

View File

@@ -40,7 +40,7 @@ async function saveProfile() {
}
</script>
<template>
<n-space class="container" vertical v-if="userStore.profile">
<n-flex class="container" vertical v-if="userStore.profile">
<h3>个人信息设置</h3>
<n-form>
<n-avatar round :size="120" :src="userStore.profile.avatar" alt="头像" />
@@ -67,7 +67,7 @@ async function saveProfile() {
更改信息
</n-button>
</n-form>
</n-space>
</n-flex>
</template>
<style scoped>
.container {