xuyue/ojnext
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

problem list.

Browse Source
This commit is contained in:
yuetsh
2023-01-04 17:54:01 +08:00
parent 919fcf5ba9
commit 521a602a51
27 changed files with 1401 additions and 802 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/oj/api.ts
View File

@@ -1,58 +1,69 @@
import { getACRate } from "./../utils/functions";
import http from "./../utils/http";
const difficultDict = {
Low: "简单",
Mid: "中等",
High: "困难",
};
function filterResult(result: any) {
const newResult = {
displayID: result._id,
title: result.title,
difficulty: difficultDict[<"Low" | "Mid" | "High">result.difficulty],
tags: result.tags,
submission: result.submission_number,
rate: getACRate(result.accepted_number, result.submission_number),
};
return newResult;
}
export async function getProblemList(
offset = 0,
limit = 10,
searchParams: any = {}
) {
let params: any = {
paging: true,
offset,
limit,
};
Object.keys(searchParams).forEach((element) => {
if (searchParams[element]) {
params[element] = searchParams[element];
}
});
const res = await http.get("problem", {
params,
});
return {
results: res.data.results.map(filterResult),
total: res.data.total,
};
}
export function getProblemTagList() {
return http.get("problem/tags");
}
export function getProblem(id: number) {
return http.get("problem", {
params: { problem_id: id },
});
}
export function getWebsite() {
return http.get("website");
}
import { getACRate } from "./../utils/functions"
import http from "./../utils/http"
const difficultDict = {
Low: "简单",
Mid: "中等",
High: "困难",
}
function filterResult(result: any) {
const newResult: any = {
displayID: result._id,
title: result.title,
difficulty: difficultDict[<"Low" | "Mid" | "High">result.difficulty],
tags: result.tags,
submission: result.submission_number,
rate: getACRate(result.accepted_number, result.submission_number),
}
if (result.my_status === null || result.my_status === undefined) {
newResult.status = "none"
} else if (result.my_status === 0) {
newResult.status = "done"
} else {
newResult.status = "tried"
}
return newResult
}
export async function getProblemList(
offset = 0,
limit = 10,
searchParams: any = {}
) {
let params: any = {
paging: true,
offset,
limit,
}
Object.keys(searchParams).forEach((element) => {
if (searchParams[element]) {
params[element] = searchParams[element]
}
})
const res = await http.get("problem", {
params,
})
return {
results: res.data.results.map(filterResult),
total: res.data.total,
}
}
export function getProblemTagList() {
return http.get("problem/tags")
}
export function getRandomProblemID() {
return http.get("pickone")
}
export function getProblem(id: number) {
return http.get("problem", {
params: { problem_id: id },
})
}
export function getWebsite() {
return http.get("website")
}

137
src/oj/components/header.vue
View File

@@ -1,68 +1,69 @@
<script setup lang="ts">
import { useLoginStore } from "../../shared/stores/login";
import { useSignupStore } from "../stores/signup";
import { useUserStore } from "../../shared/stores/user";
import { onMounted } from "vue";
import { logout } from "../../shared/api";
import { useRouter } from "vue-router";
const loginStore = useLoginStore();
const signupStore = useSignupStore();
const userStore = useUserStore();
const router = useRouter();
async function handleLogout() {
await logout();
userStore.clearMyProfile();
router.replace("/");
}
function handleDropdown(command: string) {
switch (command) {
case "logout":
handleLogout();
break;
}
}
onMounted(userStore.getMyProfile);
</script>
<template>
<el-menu router mode="horizontal" :default-active="$route.path">
<el-menu-item index="/">题库</el-menu-item>
<el-menu-item index="/contest">竞赛</el-menu-item>
<el-menu-item index="/status">提交</el-menu-item>
<el-menu-item index="/rank">排名</el-menu-item>
</el-menu>
<div v-if="userStore.isLoaded && !userStore.isAuthed" class="actions">
<el-button @click="loginStore.show">登录</el-button>
<el-button @click="signupStore.show">注册</el-button>
</div>
<div v-if="userStore.isLoaded && userStore.isAuthed" class="actions">
<el-dropdown @command="handleDropdown">
<h3>{{ userStore.user.username }}</h3>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>我的主页</el-dropdown-item>
<el-dropdown-item>我的提交</el-dropdown-item>
<el-dropdown-item>我的设置</el-dropdown-item>
<el-dropdown-item v-if="userStore.isAdminRole">
后台管理
</el-dropdown-item>
<el-dropdown-item divided command="logout">退出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<style scoped>
.el-menu {
flex: 1;
}
.actions {
display: flex;
align-items: center;
}
</style>
<script setup lang="ts">
import { useLoginStore } from "../../shared/stores/login"
import { useSignupStore } from "../stores/signup"
import { useUserStore } from "../../shared/stores/user"
import { onMounted } from "vue"
import { logout } from "../../shared/api"
import { useRouter } from "vue-router"
const loginStore = useLoginStore()
const signupStore = useSignupStore()
const userStore = useUserStore()
const router = useRouter()
async function handleLogout() {
await logout()
userStore.clearMyProfile()
router.replace("/")
}
function handleDropdown(command: string) {
switch (command) {
case "logout":
handleLogout()
break
}
}
onMounted(userStore.getMyProfile)
</script>
<template>
<el-menu router mode="horizontal" :default-active="$route.path">
<el-menu-item index="/">题库</el-menu-item>
<el-menu-item index="/contest">竞赛</el-menu-item>
<el-menu-item index="/status">提交</el-menu-item>
<el-menu-item index="/rank">排名</el-menu-item>
</el-menu>
<div v-if="userStore.isLoaded && !userStore.isAuthed" class="actions">
<el-button @click="loginStore.show">登录</el-button>
<el-button @click="signupStore.show">注册</el-button>
</div>
<div v-if="userStore.isLoaded && userStore.isAuthed" class="actions">
<el-dropdown @command="handleDropdown">
<el-button>{{ userStore.user.username }}</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>我的主页</el-dropdown-item>
<el-dropdown-item>我的提交</el-dropdown-item>
<el-dropdown-item>我的设置</el-dropdown-item>
<el-dropdown-item v-if="userStore.isAdminRole">
后台管理
</el-dropdown-item>
<el-dropdown-item divided command="logout">退出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<style scoped>
.el-menu {
flex: 1;
}
.actions {
display: flex;
align-items: center;
border-bottom: solid 1px var(--el-menu-border-color);
}
</style>

15
src/oj/contest/list.vue
View File

@@ -1,10 +1,5 @@
<script setup lang="ts">
</script>
<template>
contest list
</template>
<style scoped>
</style>
<script setup lang="ts"></script>
<template>contest list</template>
<style scoped></style>

10
src/oj/contests/index.vue
View File

@@ -1,10 +0,0 @@
<script setup lang="ts">
</script>
<template>
contests
</template>
<style scoped>
</style>

44
src/oj/index.vue
View File

@@ -1,22 +1,22 @@
<script setup lang="ts">
import Login from "../shared/user/login.vue";
import Signup from "./user/signup.vue";
import Header from "./components/header.vue";
</script>
<template>
<el-container>
<el-header>
<Header />
</el-header>
<el-main><router-view></router-view></el-main>
<Login />
<Signup />
</el-container>
</template>
<style scoped>
.el-header {
display: flex;
}
</style>
<script setup lang="ts">
import Login from "../shared/user/login.vue"
import Signup from "./user/signup.vue"
import Header from "./components/header.vue"
</script>
<template>
<el-container>
<el-header>
<Header />
</el-header>
<el-main><router-view></router-view></el-main>
<Login />
<Signup />
</el-container>
</template>
<style scoped>
.el-header {
display: flex;
}
</style>

15
src/oj/problem/detail.vue
View File

@@ -1,10 +1,5 @@
<script setup lang="ts">
</script>
<template>
problem id
</template>
<style scoped>
</style>
<script setup lang="ts"></script>
<template>problem id</template>
<style scoped></style>

465
src/oj/problem/list.vue
View File

@@ -1,211 +1,254 @@
<script setup lang="ts">
import { onMounted, ref, reactive, watch, VueElement } from "vue";
import { useRoute, useRouter } from "vue-router";
import { filterEmptyValue } from "../../utils/functions";
import { getProblemList, getProblemTagList } from "../api";
const difficultyOptions = [
{ label: "全部", value: "" },
{ label: "简单", value: "Low" },
{ label: "中等", value: "Mid" },
{ label: "困难", value: "High" },
];
const router = useRouter();
const route = useRoute();
const problems = ref([]);
const tags = ref(<{ id: number; name: string }[]>[]);
const total = ref(0);
const query = reactive({
keyword: route.query.keyword || "",
difficulty: route.query.difficulty || "",
tag: route.query.tag || "",
page: parseInt(<string>route.query.page) || 1,
limit: parseInt(<string>route.query.limit) || 10,
});
function getTagColor(tag: string) {
return {
简单: "success",
中等: "",
困难: "danger",
}[tag];
}
async function listTags() {
const res = await getProblemTagList();
tags.value = res.data;
}
async function listProblems() {
query.keyword = route.query.keyword || "";
query.difficulty = route.query.difficulty || "";
query.tag = route.query.tag || "";
query.page = parseInt(<string>route.query.page) || 1;
query.limit = parseInt(<string>route.query.limit) || 10;
if (query.page < 1) query.page = 1;
const offset = (query.page - 1) * query.limit;
const res = await getProblemList(offset, query.limit, {
keyword: query.keyword,
tag: query.tag,
difficulty: query.difficulty,
});
total.value = res.total;
problems.value = res.results;
}
function routePush() {
router.push({
path: "/",
query: filterEmptyValue(query),
});
}
function search() {
query.page = 1;
routePush();
}
function clear() {
query.keyword = "";
query.tag = "";
query.difficulty = "";
query.page = 1;
routePush();
}
watch(() => query.page, routePush);
watch(
() => query.tag || query.difficulty || query.limit,
() => {
query.page = 1;
routePush();
}
);
watch(() => route.query, listProblems);
onMounted(() => {
listTags();
listProblems();
});
</script>
<template>
<el-form :inline="true">
<el-form-item label="难度">
<el-select v-model="query.difficulty">
<el-option
v-for="item in difficultyOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="标签">
<el-select v-model="query.tag" clearable>
<el-option
v-for="item in tags"
:key="item.id"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="搜索">
<el-input
v-model="query.keyword"
placeholder="输入编号或标题后回车"
clearable
@change="search"
/>
</el-form-item>
<el-form-item>
<el-button type="" @click="clear">重置</el-button>
</el-form-item>
</el-form>
<el-table class="hidden-md-and-up" :data="problems" stripe>
<el-table-column prop="displayID" label="ID" width="80" />
<el-table-column prop="title" label="标题" />
<el-table-column label="难度" width="100">
<template #default="scope">
<el-tag disable-transitions :type="getTagColor(scope.row.difficulty)">
{{ scope.row.difficulty }}
</el-tag>
</template>
</el-table-column>
</el-table>
<el-table class="hidden-sm-and-down pointer" :data="problems" stripe>
<el-table-column prop="my_status" label="状态" width="80">
</el-table-column>
<el-table-column prop="displayID" label="编号" width="100" />
<el-table-column prop="title" label="标题" />
<el-table-column label="难度" width="100">
<template #default="scope">
<el-tag disable-transitions :type="getTagColor(scope.row.difficulty)">
{{ scope.row.difficulty }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="标签" width="200">
<template #default="scope">
<el-space>
<el-tag
disable-transitions
v-for="tag in scope.row.tags"
:key="tag"
type="info"
>{{ tag }}</el-tag
>
</el-space>
</template>
</el-table-column>
<el-table-column prop="submission" label="提交数" width="100" />
<el-table-column prop="rate" label="通过率" width="100" />
</el-table>
<el-pagination
class="right hidden-md-and-up margin"
layout="sizes,prev,next"
background
:total="total"
:page-sizes="[10, 30, 50, 100]"
v-model:page-size="query.limit"
v-model:current-page="query.page"
/>
<el-pagination
class="right margin hidden-sm-and-down"
layout="sizes,prev,pager,next"
background
:total="total"
:page-sizes="[10, 30, 50, 100]"
v-model:page-size="query.limit"
v-model:current-page="query.page"
/>
</template>
<style scoped>
.margin {
margin-top: 24px;
}
.right {
float: right;
}
.pointer {
cursor: pointer;
}
.panel {
width: 400px;
padding: 0 4px;
}
.panel-tag {
margin: 4px;
}
</style>
<script setup lang="ts">
import { onMounted, ref, reactive, watch, VueElement } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useUserStore } from "../../shared/stores/user"
import { filterEmptyValue } from "../../utils/functions"
import { getProblemList, getProblemTagList, getRandomProblemID } from "../api"
const difficultyOptions = [
{ label: "全部", value: "" },
{ label: "简单", value: "Low" },
{ label: "中等", value: "Mid" },
{ label: "困难", value: "High" },
]
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const problems = ref([])
const tags = ref(<{ id: number; name: string }[]>[])
const total = ref(0)
const query = reactive({
keyword: route.query.keyword || "",
difficulty: route.query.difficulty || "",
tag: route.query.tag || "",
page: parseInt(<string>route.query.page) || 1,
limit: parseInt(<string>route.query.limit) || 10,
})
function getTagColor(tag: string) {
return {
简单: "success",
中等: "",
困难: "danger",
}[tag]
}
async function listTags() {
const res = await getProblemTagList()
tags.value = res.data
}
async function listProblems() {
query.keyword = route.query.keyword || ""
query.difficulty = route.query.difficulty || ""
query.tag = route.query.tag || ""
query.page = parseInt(<string>route.query.page) || 1
query.limit = parseInt(<string>route.query.limit) || 10
if (query.page < 1) query.page = 1
const offset = (query.page - 1) * query.limit
const res = await getProblemList(offset, query.limit, {
keyword: query.keyword,
tag: query.tag,
difficulty: query.difficulty,
})
total.value = res.total
problems.value = res.results
}
function routePush() {
router.push({
path: "/",
query: filterEmptyValue(query),
})
}
function search() {
query.page = 1
routePush()
}
function clear() {
query.keyword = ""
query.tag = ""
query.difficulty = ""
query.page = 1
routePush()
}
async function getRandom() {
const res = await getRandomProblemID()
router.push("/problem/" + res.data)
}
function goProblem(row: any) {
router.push("/problem/" + row.displayID)
}
watch(() => query.page, routePush)
watch(
() => query.tag || query.difficulty || query.limit,
() => {
query.page = 1
routePush()
}
)
watch(
() => route.path === "/" && route.query,
(newVal) => {
if (newVal) listProblems()
}
)
// TODO: 这里会在登录时候执行两次，有BUG
watch(() => userStore.isLoaded && userStore.isAuthed, listProblems)
onMounted(() => {
listTags()
listProblems()
})
</script>
<template>
<el-form :inline="true">
<el-form-item label="难度">
<el-select v-model="query.difficulty">
<el-option
v-for="item in difficultyOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="标签">
<el-select v-model="query.tag" clearable>
<el-option
v-for="item in tags"
:key="item.id"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="搜索">
<el-input
v-model="query.keyword"
placeholder="输入编号或标题后回车"
clearable
@change="search"
/>
</el-form-item>
<el-form-item>
<el-button type="" @click="clear">重置</el-button>
<el-button type="" @click="getRandom">随机一题</el-button>
</el-form-item>
</el-form>
<el-table
class="hidden-md-and-up"
:data="problems"
stripe
@row-click="goProblem"
>
<el-table-column prop="displayID" label="ID" width="80" />
<el-table-column prop="title" label="标题" />
<el-table-column label="难度" width="100">
<template #default="scope">
<el-tag disable-transitions :type="getTagColor(scope.row.difficulty)">
{{ scope.row.difficulty }}
</el-tag>
</template>
</el-table-column>
</el-table>
<el-table
class="hidden-sm-and-down pointer"
:data="problems"
stripe
@row-click="goProblem"
>
<el-table-column label="状态" width="80">
<template #default="scope">
<el-icon
v-if="scope.row.status === 'done'"
color="var(--el-color-success)"
><i-ep-select
/></el-icon>
<el-icon
v-if="scope.row.status === 'tried'"
color="var(--el-color-error)"
><i-ep-semi-select
/></el-icon>
</template>
</el-table-column>
<el-table-column prop="displayID" label="编号" width="100" />
<el-table-column prop="title" label="标题" />
<el-table-column label="难度" width="100">
<template #default="scope">
<el-tag disable-transitions :type="getTagColor(scope.row.difficulty)">
{{ scope.row.difficulty }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="标签" width="200">
<template #default="scope">
<el-space>
<el-tag
disable-transitions
v-for="tag in scope.row.tags"
:key="tag"
type="info"
>{{ tag }}</el-tag
>
</el-space>
</template>
</el-table-column>
<el-table-column prop="submission" label="提交数" width="100" />
<el-table-column prop="rate" label="通过率" width="100" />
</el-table>
<el-pagination
class="right hidden-md-and-up margin"
layout="prev,next,sizes"
background
:total="total"
:page-sizes="[10, 20, 30]"
v-model:page-size="query.limit"
v-model:current-page="query.page"
/>
<el-pagination
class="right margin hidden-sm-and-down"
layout="prev,pager,next,sizes"
background
:total="total"
:page-sizes="[10, 20, 30]"
:pager-count="5"
v-model:page-size="query.limit"
v-model:current-page="query.page"
/>
</template>
<style scoped>
.margin {
margin-top: 24px;
}
.right {
float: right;
}
.pointer {
cursor: pointer;
}
.panel {
width: 400px;
padding: 0 4px;
}
.panel-tag {
margin: 4px;
}
</style>

15
src/oj/rank/list.vue
View File

@@ -1,10 +1,5 @@
<script setup lang="ts">
</script>
<template>
rank list
</template>
<style scoped>
</style>
<script setup lang="ts"></script>
<template>rank list</template>
<style scoped></style>

15
src/oj/status/list.vue
View File

@@ -1,10 +1,5 @@
<script setup lang="ts">
</script>
<template>
status list
</template>
<style scoped>
</style>
<script setup lang="ts"></script>
<template>status list</template>
<style scoped></style>

32
src/oj/stores/signup.ts
View File

@@ -1,16 +1,16 @@
import { defineStore } from "pinia";
import { ref } from "vue";
export const useSignupStore = defineStore("signup", () => {
const visible = ref(false);
function show() {
visible.value = true;
}
function hide() {
visible.value = false;
}
return { visible, show, hide };
});
import { defineStore } from "pinia"
import { ref } from "vue"
export const useSignupStore = defineStore("signup", () => {
const visible = ref(false)
function show() {
visible.value = true
}
function hide() {
visible.value = false
}
return { visible, show, hide }
})

32
src/oj/user/signup.vue
View File

@@ -1,16 +1,16 @@
<script setup lang="ts">
import { useSignupStore } from "../stores/signup";
const store = useSignupStore();
</script>
<template>
<el-dialog
:close-on-click-modal="false"
:close-on-press-escape="false"
v-model="store.visible"
title="注册"
>
</el-dialog>
</template>
<style scoped></style>
<script setup lang="ts">
import { useSignupStore } from "../stores/signup"
const store = useSignupStore()
</script>
<template>
<el-dialog
:close-on-click-modal="false"
:close-on-press-escape="false"
v-model="store.visible"
title="注册"
>
</el-dialog>
</template>
<style scoped></style>