xuyue/ojnext
1
0
Fork 0
Code Issues Pull Requests Actions 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

3
components.d.ts vendored
View File

@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader'] ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElMain: typeof import('element-plus/es')['ElMain'] ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
@@ -29,6 +30,8 @@ declare module '@vue/runtime-core' {
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag'] ElTag: typeof import('element-plus/es')['ElTag']
IEpSelect: typeof import('~icons/ep/select')['default']
IEpSemiSelect: typeof import('~icons/ep/semi-select')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
} }

690
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@@ -6,9 +6,11 @@
"scripts": { "scripts": {
"start": "vite", "start": "vite",
"build": "vue-tsc && vite build", "build": "vue-tsc && vite build",
"preview": "vite preview" "preview": "vite preview",
"fmt": "prettier --write src *.d.ts *.ts"
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.0.10",
"axios": "^1.2.2", "axios": "^1.2.2",
"element-plus": "^2.2.28", "element-plus": "^2.2.28",
"pinia": "^2.0.28", "pinia": "^2.0.28",
@@ -16,11 +18,14 @@
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },
"devDependencies": { "devDependencies": {
"@iconify-json/ep": "^1.1.8",
"@vitejs/plugin-vue": "^4.0.0", "@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.3", "prettier": "^2.8.1",
"typescript": "^4.9.4",
"unplugin-auto-import": "^0.12.1", "unplugin-auto-import": "^0.12.1",
"unplugin-icons": "^0.15.0",
"unplugin-vue-components": "^0.22.12", "unplugin-vue-components": "^0.22.12",
"vite": "^4.0.0", "vite": "^4.0.4",
"vue-tsc": "^1.0.11" "vue-tsc": "^1.0.20"
} }
} }

1
src/.prettierrc.toml Normal file
View File

@@ -0,0 +1 @@
semi=false

26
src/App.vue
View File

@@ -1,13 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import zhCn from "element-plus/dist/locale/zh-cn.mjs"; import zhCn from "element-plus/dist/locale/zh-cn.mjs"
const locale = zhCn; const locale = zhCn
</script> </script>
<template> <template>
<el-config-provider :locale="locale"> <el-config-provider :locale="locale">
<router-view></router-view> <router-view></router-view>
</el-config-provider> </el-config-provider>
</template> </template>
<style scoped></style> <style scoped></style>

17
src/admin/index.vue
View File

@@ -1,10 +1,7 @@
<script setup lang="ts"> <script setup lang="ts"></script>
</script> <template>
<router-view></router-view>
<template> </template>
<router-view></router-view>
</template> <style scoped></style>
<style scoped>
</style>

46
src/main.ts
View File

@@ -1,14 +1,14 @@
import { createApp } from "vue"; import { createApp } from "vue"
import { createRouter, createWebHistory } from "vue-router"; import { createRouter, createWebHistory } from "vue-router"
import { createPinia } from "pinia"; import { createPinia } from "pinia"
import "element-plus/theme-chalk/display.css"; import "element-plus/theme-chalk/display.css"
import App from "./App.vue"; import App from "./App.vue"
import Home from "./oj/index.vue"; import Home from "./oj/index.vue"
import Problems from "./oj/problem/list.vue"; import Problems from "./oj/problem/list.vue"
import storage from "./utils/storage"; import storage from "./utils/storage"
import { STORAGE_KEY } from "./utils/constants"; import { STORAGE_KEY } from "./utils/constants"
import { useLoginStore } from "./shared/stores/login"; import { useLoginStore } from "./shared/stores/login"
const routes = [ const routes = [
{ {
@@ -45,30 +45,30 @@ const routes = [
], ],
}, },
{ path: "/admin", component: () => import("./admin/index.vue") }, { path: "/admin", component: () => import("./admin/index.vue") },
]; ]
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes, routes,
}); })
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta.requiresAuth)) { if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!storage.get(STORAGE_KEY.AUTHED)) { if (!storage.get(STORAGE_KEY.AUTHED)) {
const login = useLoginStore(); const login = useLoginStore()
login.show(); login.show()
next("/"); next("/")
} else { } else {
next(); next()
} }
} else { } else {
next(); next()
} }
}); })
const pinia = createPinia(); const pinia = createPinia()
const app = createApp(App); const app = createApp(App)
app.use(router); app.use(router)
app.use(pinia); app.use(pinia)
app.mount("#app"); app.mount("#app")

127
src/oj/api.ts
View File

@@ -1,58 +1,69 @@
import { getACRate } from "./../utils/functions"; import { getACRate } from "./../utils/functions"
import http from "./../utils/http"; import http from "./../utils/http"
const difficultDict = { const difficultDict = {
Low: "简单", Low: "简单",
Mid: "中等", Mid: "中等",
High: "困难", High: "困难",
}; }
function filterResult(result: any) { function filterResult(result: any) {
const newResult = { const newResult: any = {
displayID: result._id, displayID: result._id,
title: result.title, title: result.title,
difficulty: difficultDict[<"Low" | "Mid" | "High">result.difficulty], difficulty: difficultDict[<"Low" | "Mid" | "High">result.difficulty],
tags: result.tags, tags: result.tags,
submission: result.submission_number, submission: result.submission_number,
rate: getACRate(result.accepted_number, result.submission_number), rate: getACRate(result.accepted_number, result.submission_number),
}; }
return newResult; if (result.my_status === null || result.my_status === undefined) {
} newResult.status = "none"
} else if (result.my_status === 0) {
export async function getProblemList( newResult.status = "done"
offset = 0, } else {
limit = 10, newResult.status = "tried"
searchParams: any = {} }
) { return newResult
let params: any = { }
paging: true,
offset, export async function getProblemList(
limit, offset = 0,
}; limit = 10,
Object.keys(searchParams).forEach((element) => { searchParams: any = {}
if (searchParams[element]) { ) {
params[element] = searchParams[element]; let params: any = {
} paging: true,
}); offset,
const res = await http.get("problem", { limit,
params, }
}); Object.keys(searchParams).forEach((element) => {
return { if (searchParams[element]) {
results: res.data.results.map(filterResult), params[element] = searchParams[element]
total: res.data.total, }
}; })
} const res = await http.get("problem", {
params,
export function getProblemTagList() { })
return http.get("problem/tags"); return {
} results: res.data.results.map(filterResult),
total: res.data.total,
export function getProblem(id: number) { }
return http.get("problem", { }
params: { problem_id: id },
}); export function getProblemTagList() {
} return http.get("problem/tags")
}
export function getWebsite() {
return http.get("website"); 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"> <script setup lang="ts">
import { useLoginStore } from "../../shared/stores/login"; import { useLoginStore } from "../../shared/stores/login"
import { useSignupStore } from "../stores/signup"; import { useSignupStore } from "../stores/signup"
import { useUserStore } from "../../shared/stores/user"; import { useUserStore } from "../../shared/stores/user"
import { onMounted } from "vue"; import { onMounted } from "vue"
import { logout } from "../../shared/api"; import { logout } from "../../shared/api"
import { useRouter } from "vue-router"; import { useRouter } from "vue-router"
const loginStore = useLoginStore(); const loginStore = useLoginStore()
const signupStore = useSignupStore(); const signupStore = useSignupStore()
const userStore = useUserStore(); const userStore = useUserStore()
const router = useRouter(); const router = useRouter()
async function handleLogout() { async function handleLogout() {
await logout(); await logout()
userStore.clearMyProfile(); userStore.clearMyProfile()
router.replace("/"); router.replace("/")
} }
function handleDropdown(command: string) { function handleDropdown(command: string) {
switch (command) { switch (command) {
case "logout": case "logout":
handleLogout(); handleLogout()
break; break
} }
} }
onMounted(userStore.getMyProfile); onMounted(userStore.getMyProfile)
</script> </script>
<template> <template>
<el-menu router mode="horizontal" :default-active="$route.path"> <el-menu router mode="horizontal" :default-active="$route.path">
<el-menu-item index="/">题库</el-menu-item> <el-menu-item index="/">题库</el-menu-item>
<el-menu-item index="/contest">竞赛</el-menu-item> <el-menu-item index="/contest">竞赛</el-menu-item>
<el-menu-item index="/status">提交</el-menu-item> <el-menu-item index="/status">提交</el-menu-item>
<el-menu-item index="/rank">排名</el-menu-item> <el-menu-item index="/rank">排名</el-menu-item>
</el-menu> </el-menu>
<div v-if="userStore.isLoaded && !userStore.isAuthed" class="actions"> <div v-if="userStore.isLoaded && !userStore.isAuthed" class="actions">
<el-button @click="loginStore.show">登录</el-button> <el-button @click="loginStore.show">登录</el-button>
<el-button @click="signupStore.show">注册</el-button> <el-button @click="signupStore.show">注册</el-button>
</div> </div>
<div v-if="userStore.isLoaded && userStore.isAuthed" class="actions"> <div v-if="userStore.isLoaded && userStore.isAuthed" class="actions">
<el-dropdown @command="handleDropdown"> <el-dropdown @command="handleDropdown">
<h3>{{ userStore.user.username }}</h3> <el-button>{{ userStore.user.username }}</el-button>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item>我的主页</el-dropdown-item> <el-dropdown-item>我的主页</el-dropdown-item>
<el-dropdown-item>我的提交</el-dropdown-item> <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 v-if="userStore.isAdminRole">
后台管理 后台管理
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item divided command="logout">退出</el-dropdown-item> <el-dropdown-item divided command="logout">退出</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.el-menu { .el-menu {
flex: 1; flex: 1;
} }
.actions { .actions {
display: flex; display: flex;
align-items: center; align-items: center;
} border-bottom: solid 1px var(--el-menu-border-color);
</style> }
</style>

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

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

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

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

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

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

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

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

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

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

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

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

30
src/shared/api.ts
View File

@@ -1,15 +1,15 @@
import http from "../utils/http"; import http from "../utils/http"
export function login(data: { username: string; password: string }) { export function login(data: { username: string; password: string }) {
return http.post("login", data); return http.post("login", data)
} }
export function logout() { export function logout() {
return http.get("logout"); return http.get("logout")
} }
export function getUserInfo(username: string) { export function getUserInfo(username: string) {
return http.get("profile", { return http.get("profile", {
params: { username }, params: { username },
}); })
} }

32
src/shared/stores/login.ts
View File

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

102
src/shared/stores/user.ts
View File

@@ -1,51 +1,51 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia"
import { computed, ref } from "vue"; import { computed, ref } from "vue"
import { import {
PROBLEM_PERMISSION, PROBLEM_PERMISSION,
STORAGE_KEY, STORAGE_KEY,
USER_TYPE, USER_TYPE,
} from "../../utils/constants"; } from "../../utils/constants"
import storage from "../../utils/storage"; import storage from "../../utils/storage"
import { getUserInfo } from "../api"; import { getUserInfo } from "../api"
export const useUserStore = defineStore("user", () => { export const useUserStore = defineStore("user", () => {
const profile = ref<any>({}); const profile = ref<any>({})
const isLoaded = ref(false); const isLoaded = ref(false)
const user = computed(() => profile.value.user || {}); const user = computed(() => profile.value.user || {})
const isAuthed = computed(() => !!user.value.email); const isAuthed = computed(() => !!user.value.email)
const isAdminRole = computed( const isAdminRole = computed(
() => () =>
user.value.admin_type === USER_TYPE.ADMIN || user.value.admin_type === USER_TYPE.ADMIN ||
user.value.admin_type === USER_TYPE.SUPER_ADMIN user.value.admin_type === USER_TYPE.SUPER_ADMIN
); )
const isSuperAdmin = computed( const isSuperAdmin = computed(
() => user.value.admin_type === USER_TYPE.SUPER_ADMIN () => user.value.admin_type === USER_TYPE.SUPER_ADMIN
); )
const hasProblemPermission = computed( const hasProblemPermission = computed(
() => user.value.problem_permission !== PROBLEM_PERMISSION.NONE () => user.value.problem_permission !== PROBLEM_PERMISSION.NONE
); )
async function getMyProfile() { async function getMyProfile() {
isLoaded.value = false; isLoaded.value = false
const res = await getUserInfo(""); const res = await getUserInfo("")
isLoaded.value = true; isLoaded.value = true
profile.value = res.data || {}; profile.value = res.data || {}
storage.set(STORAGE_KEY.AUTHED, !!user.value.email); storage.set(STORAGE_KEY.AUTHED, !!user.value.email)
} }
function clearMyProfile() { function clearMyProfile() {
profile.value = {}; profile.value = {}
storage.clear(); storage.clear()
} }
return { return {
profile, profile,
isLoaded, isLoaded,
user, user,
isAdminRole, isAdminRole,
isSuperAdmin, isSuperAdmin,
hasProblemPermission, hasProblemPermission,
isAuthed, isAuthed,
getMyProfile, getMyProfile,
clearMyProfile, clearMyProfile,
}; }
}); })

186
src/shared/user/login.vue
View File

@@ -1,93 +1,93 @@
<script setup lang="ts"> <script setup lang="ts">
import { FormInstance } from "element-plus"; import { FormInstance } from "element-plus"
import { reactive, ref } from "vue"; import { reactive, ref } from "vue"
import { useSignupStore } from "../../oj/stores/signup"; import { useSignupStore } from "../../oj/stores/signup"
import { login } from "../../shared/api"; import { login } from "../../shared/api"
import { useLoginStore } from "../stores/login"; import { useLoginStore } from "../stores/login"
import { useUserStore } from "../stores/user"; import { useUserStore } from "../stores/user"
const loginStore = useLoginStore(); const loginStore = useLoginStore()
const signupStore = useSignupStore(); const signupStore = useSignupStore()
const userStore = useUserStore(); const userStore = useUserStore()
const loading = ref(false); const loading = ref(false)
const errorMessage = ref(""); const errorMessage = ref("")
const loginRef = ref<FormInstance>(); const loginRef = ref<FormInstance>()
const form = reactive({ const form = reactive({
username: "", username: "",
password: "", password: "",
}); })
const rules = reactive({ const rules = reactive({
username: [{ required: true, message: "用户名必填", trigger: "blur" }], username: [{ required: true, message: "用户名必填", trigger: "blur" }],
password: [ password: [
{ required: true, message: "密码必填", trigger: "blur" }, { required: true, message: "密码必填", trigger: "blur" },
{ min: 6, max: 20, message: "长度在6到20位之间", trigger: "change" }, { min: 6, max: 20, message: "长度在6到20位之间", trigger: "change" },
], ],
}); })
async function submit() { async function submit() {
if (!loginRef.value) return; if (!loginRef.value) return
await loginRef.value.validate(async (valid) => { await loginRef.value.validate(async (valid) => {
if (valid) { if (valid) {
loading.value = true; loading.value = true
errorMessage.value = ""; errorMessage.value = ""
try { try {
await login(form); await login(form)
loginStore.hide(); loginStore.hide()
await userStore.getMyProfile(); await userStore.getMyProfile()
} catch (err) { } catch (err) {
errorMessage.value = "用户名或密码不正确"; errorMessage.value = "用户名或密码不正确"
} }
loading.value = false; loading.value = false
} }
}); })
} }
function goSignup() { function goSignup() {
loginStore.hide(); loginStore.hide()
signupStore.show(); signupStore.show()
} }
</script> </script>
<template> <template>
<el-dialog <el-dialog
style="max-width: 400px" style="max-width: 400px"
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false"
v-model="loginStore.visible" v-model="loginStore.visible"
title="登录" title="登录"
> >
<el-form <el-form
ref="loginRef" ref="loginRef"
:model="form" :model="form"
:rules="rules" :rules="rules"
label-position="right" label-position="right"
label-width="70px" label-width="70px"
> >
<el-form-item label="用户名" required prop="username"> <el-form-item label="用户名" required prop="username">
<el-input v-model="form.username"></el-input> <el-input v-model="form.username"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="密码" required prop="password"> <el-form-item label="密码" required prop="password">
<el-input <el-input
v-model="form.password" v-model="form.password"
type="password" type="password"
show-password show-password
@change="submit" @change="submit"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" :loading="loading" @click="submit" <el-button type="primary" :loading="loading" @click="submit"
>登录</el-button >登录</el-button
> >
<el-button @click="goSignup">没有账号，立即注册</el-button> <el-button @click="goSignup">没有账号，立即注册</el-button>
</el-form-item> </el-form-item>
<el-alert <el-alert
v-if="errorMessage" v-if="errorMessage"
:title="errorMessage" :title="errorMessage"
show-icon show-icon
type="error" type="error"
/> />
</el-form> </el-form>
</el-dialog> </el-dialog>
</template> </template>
<style scoped></style> <style scoped></style>

22
src/utils/constants.ts
View File

@@ -68,13 +68,13 @@ export const JUDGE_STATUS = {
color: "yellow", color: "yellow",
type: "warning", type: "warning",
}, },
}; }
export const CONTEST_STATUS = { export const CONTEST_STATUS = {
NOT_START: "1", NOT_START: "1",
UNDERWAY: "0", UNDERWAY: "0",
ENDED: "-1", ENDED: "-1",
}; }
export const CONTEST_STATUS_REVERSE = { export const CONTEST_STATUS_REVERSE = {
"1": { "1": {
@@ -89,41 +89,41 @@ export const CONTEST_STATUS_REVERSE = {
name: "Ended", name: "Ended",
color: "red", color: "red",
}, },
}; }
export const RULE_TYPE = { export const RULE_TYPE = {
ACM: "ACM", ACM: "ACM",
OI: "OI", OI: "OI",
}; }
export const CONTEST_TYPE = { export const CONTEST_TYPE = {
PUBLIC: "Public", PUBLIC: "Public",
PRIVATE: "Password Protected", PRIVATE: "Password Protected",
}; }
export const USER_TYPE = { export const USER_TYPE = {
REGULAR_USER: "Regular User", REGULAR_USER: "Regular User",
ADMIN: "Admin", ADMIN: "Admin",
SUPER_ADMIN: "Super Admin", SUPER_ADMIN: "Super Admin",
}; }
export const PROBLEM_PERMISSION = { export const PROBLEM_PERMISSION = {
NONE: "None", NONE: "None",
OWN: "Own", OWN: "Own",
ALL: "All", ALL: "All",
}; }
export const STORAGE_KEY = { export const STORAGE_KEY = {
AUTHED: "authed", AUTHED: "authed",
PROBLEM_CODE: "problemCode", PROBLEM_CODE: "problemCode",
USER: "user", USER: "user",
}; }
export function buildProblemCodeKey(problemID: number, contestID = null) { export function buildProblemCodeKey(problemID: number, contestID = null) {
if (contestID) { if (contestID) {
return `${STORAGE_KEY.PROBLEM_CODE}_${contestID}_${problemID}`; return `${STORAGE_KEY.PROBLEM_CODE}_${contestID}_${problemID}`
} }
return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`; return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`
} }
export const GOOGLE_ANALYTICS_ID = "UA-111499601-1"; export const GOOGLE_ANALYTICS_ID = "UA-111499601-1"

28
src/utils/functions.ts
View File

@@ -1,14 +1,14 @@
export function getACRate(acCount: number, totalCount: number) { export function getACRate(acCount: number, totalCount: number) {
let rate = totalCount === 0 ? 0.0 : ((acCount / totalCount) * 100).toFixed(2); let rate = totalCount === 0 ? 0.0 : ((acCount / totalCount) * 100).toFixed(2)
return `${rate}%`; return `${rate}%`
} }
export function filterEmptyValue(object: any) { export function filterEmptyValue(object: any) {
let query: any = {}; let query: any = {}
Object.keys(object).forEach((key) => { Object.keys(object).forEach((key) => {
if (object[key] || object[key] === 0 || object[key] === false) { if (object[key] || object[key] === 0 || object[key] === false) {
query[key] = object[key]; query[key] = object[key]
} }
}); })
return query; return query
} }

52
src/utils/http.ts
View File

@@ -1,26 +1,26 @@
import axios from "axios"; import axios from "axios"
const http = axios.create({ const http = axios.create({
baseURL: "/api", baseURL: "/api",
xsrfHeaderName: "X-CSRFToken", xsrfHeaderName: "X-CSRFToken",
xsrfCookieName: "csrftoken", xsrfCookieName: "csrftoken",
}); })
// TODO // TODO
http.interceptors.response.use( http.interceptors.response.use(
(res) => { (res) => {
if (res.data.error) { if (res.data.error) {
// 若后端返回为登录，则为session失效，应退出当前登录用户 // 若后端返回为登录，则为session失效，应退出当前登录用户
if (res.data.data.startsWith("Please login")) { if (res.data.data.startsWith("Please login")) {
} }
return Promise.reject(res.data); return Promise.reject(res.data)
} else { } else {
return Promise.resolve(res.data); return Promise.resolve(res.data)
} }
}, },
(err) => { (err) => {
return Promise.reject(err); return Promise.reject(err)
} }
); )
export default http; export default http

16
src/utils/storage.ts
View File

@@ -1,21 +1,21 @@
const localStorage = window.localStorage; const localStorage = window.localStorage
export default { export default {
set(key: string, value: any) { set(key: string, value: any) {
localStorage.setItem(key, JSON.stringify(value)); localStorage.setItem(key, JSON.stringify(value))
}, },
get(key: string) { get(key: string) {
const content = localStorage.getItem(key); const content = localStorage.getItem(key)
if (content) { if (content) {
return JSON.parse(content); return JSON.parse(content)
} else { } else {
return null; return null
} }
}, },
remove(key: string) { remove(key: string) {
localStorage.removeItem(key); localStorage.removeItem(key)
}, },
clear() { clear() {
localStorage.clear(); localStorage.clear()
}, },
}; }

32
vite.config.ts
View File

@@ -3,35 +3,35 @@ import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite"; import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite"; import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
const url = "https://oj.hyyz.izhai.net"; const url = "https://oj.hyyz.izhai.net";
const proxyConfig = {
target: url,
changeOrigin: true,
headers: { Referer: url },
};
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
AutoImport({ AutoImport({
resolvers: [ElementPlusResolver()], resolvers: [ElementPlusResolver(), IconsResolver()],
}), }),
Components({ Components({
resolvers: [ElementPlusResolver()], resolvers: [
ElementPlusResolver(),
IconsResolver({ enabledCollections: ["ep"] }),
],
}), }),
Icons({ autoInstall: true }),
], ],
server: { server: {
proxy: { proxy: {
"/api": { "/api": proxyConfig,
target: url, "/public": proxyConfig,
changeOrigin: true,
headers: {
Referer: url,
},
},
"/public": {
target: url,
changeOrigin: true,
headers: {
Referer: url,
},
},
}, },
}, },
}); });