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

add breakpoints.

Browse Source
This commit is contained in:
yuetsh
2023-01-07 15:29:47 +08:00
parent b9c6b404d3
commit bb70ae2200
13 changed files with 136 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@@ -42,5 +42,6 @@ declare module '@vue/runtime-core' {
IEpSemiSelect: typeof import('~icons/ep/semi-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']
UseNetwork: typeof import('@vueuse/components')['UseNetwork']
} }
} }

45
package-lock.json generated
View File

@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.0.10", "@element-plus/icons-vue": "^2.0.10",
"@monaco-editor/loader": "^1.3.2", "@monaco-editor/loader": "^1.3.2",
"@vueuse/core": "^9.10.0",
"axios": "^1.2.2", "axios": "^1.2.2",
"element-plus": "^2.2.28", "element-plus": "^2.2.28",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
@@ -745,13 +746,13 @@
"integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==" "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
}, },
"node_modules/@vueuse/core": { "node_modules/@vueuse/core": {
"version": "9.9.0", "version": "9.10.0",
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.9.0.tgz", "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.10.0.tgz",
"integrity": "sha512-JdDb7TrE0imZnwBhMF4+0PCJqGD3AxzH8S2sfk54P0rqvklK+EAtAR/mPb1HwV/JPujQFQJhghQ190Yq03YpVw==", "integrity": "sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA==",
"dependencies": { "dependencies": {
"@types/web-bluetooth": "^0.0.16", "@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.9.0", "@vueuse/metadata": "9.10.0",
"@vueuse/shared": "9.9.0", "@vueuse/shared": "9.10.0",
"vue-demi": "*" "vue-demi": "*"
} }
}, },
@@ -778,14 +779,14 @@
} }
}, },
"node_modules/@vueuse/metadata": { "node_modules/@vueuse/metadata": {
"version": "9.9.0", "version": "9.10.0",
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.9.0.tgz", "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.10.0.tgz",
"integrity": "sha512-pgxsUJv/d7IjKpLeB6TthggEsaBwM3ffc5jPrr5TmxAm/fup0mGR5VTzrdA/PSx85tpb+CIvP92D+55qBNc8ag==" "integrity": "sha512-G5VZhgTCapzU9rv0Iq2HBrVOSGzOKb+OE668NxhXNcTjUjwYxULkEhAw70FtRLMZc+hxcFAzDZlKYA0xcwNMuw=="
}, },
"node_modules/@vueuse/shared": { "node_modules/@vueuse/shared": {
"version": "9.9.0", "version": "9.10.0",
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.9.0.tgz", "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.10.0.tgz",
"integrity": "sha512-+D0XFwHG0T+uaIbCSlROBwm1wzs71B7n3KyDOxnvfEMMHDOzl09rYKwaE2AENmYwYPXfHPbSBRDD2gBVHbvTcg==", "integrity": "sha512-vakHJ2ZRklAzqmcVBL38RS7BxdBA4+5poG9NsSyqJxrt9kz0zX3P5CXMy0Hm6LFbZXUgvKdqAS3pUH1zX/5qTQ==",
"dependencies": { "dependencies": {
"vue-demi": "*" "vue-demi": "*"
} }
@@ -2620,13 +2621,13 @@
"integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==" "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
}, },
"@vueuse/core": { "@vueuse/core": {
"version": "9.9.0", "version": "9.10.0",
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.9.0.tgz", "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.10.0.tgz",
"integrity": "sha512-JdDb7TrE0imZnwBhMF4+0PCJqGD3AxzH8S2sfk54P0rqvklK+EAtAR/mPb1HwV/JPujQFQJhghQ190Yq03YpVw==", "integrity": "sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA==",
"requires": { "requires": {
"@types/web-bluetooth": "^0.0.16", "@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.9.0", "@vueuse/metadata": "9.10.0",
"@vueuse/shared": "9.9.0", "@vueuse/shared": "9.10.0",
"vue-demi": "*" "vue-demi": "*"
}, },
"dependencies": { "dependencies": {
@@ -2639,14 +2640,14 @@
} }
}, },
"@vueuse/metadata": { "@vueuse/metadata": {
"version": "9.9.0", "version": "9.10.0",
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.9.0.tgz", "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.10.0.tgz",
"integrity": "sha512-pgxsUJv/d7IjKpLeB6TthggEsaBwM3ffc5jPrr5TmxAm/fup0mGR5VTzrdA/PSx85tpb+CIvP92D+55qBNc8ag==" "integrity": "sha512-G5VZhgTCapzU9rv0Iq2HBrVOSGzOKb+OE668NxhXNcTjUjwYxULkEhAw70FtRLMZc+hxcFAzDZlKYA0xcwNMuw=="
}, },
"@vueuse/shared": { "@vueuse/shared": {
"version": "9.9.0", "version": "9.10.0",
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.9.0.tgz", "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.10.0.tgz",
"integrity": "sha512-+D0XFwHG0T+uaIbCSlROBwm1wzs71B7n3KyDOxnvfEMMHDOzl09rYKwaE2AENmYwYPXfHPbSBRDD2gBVHbvTcg==", "integrity": "sha512-vakHJ2ZRklAzqmcVBL38RS7BxdBA4+5poG9NsSyqJxrt9kz0zX3P5CXMy0Hm6LFbZXUgvKdqAS3pUH1zX/5qTQ==",
"requires": { "requires": {
"vue-demi": "*" "vue-demi": "*"
}, },

1
package.json
View File

@@ -12,6 +12,7 @@
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.0.10", "@element-plus/icons-vue": "^2.0.10",
"@monaco-editor/loader": "^1.3.2", "@monaco-editor/loader": "^1.3.2",
"@vueuse/core": "^9.10.0",
"axios": "^1.2.2", "axios": "^1.2.2",
"element-plus": "^2.2.28", "element-plus": "^2.2.28",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",

1
src/App.vue
View File

@@ -1,6 +1,5 @@
<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>

1
src/main.ts
View File

@@ -2,7 +2,6 @@ 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 "normalize.css" import "normalize.css"
import "element-plus/theme-chalk/display.css"
import loader from "@monaco-editor/loader" import loader from "@monaco-editor/loader"
import App from "./App.vue" import App from "./App.vue"

15
src/oj/problem/components/editor.vue
View File

@@ -7,6 +7,7 @@ import {
LANGUAGE_VALUE, LANGUAGE_VALUE,
SOURCES, SOURCES,
} from "../../../utils/constants" } from "../../../utils/constants"
import { isDesktop } from "../../../utils/breakpoints"
const { problem } = defineProps<{ const { problem } = defineProps<{
problem: { problem: {
@@ -61,11 +62,13 @@ async function init() {
monaco.editor.create(monacoEditorRef.value, { monaco.editor.create(monacoEditorRef.value, {
value: state.values[state.language], // 编辑器初始显示文字 value: state.values[state.language], // 编辑器初始显示文字
language: LANGUAGE_VALUE[state.language], language: LANGUAGE_VALUE[state.language],
automaticLayout: true, // 自适应布局
theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark
minimap: { minimap: {
enabled: false, enabled: false,
}, },
lineNumbersMinChars: 3,
automaticLayout: true, // 自适应布局
tabSize: 4,
fontSize: 24, // 字体大小 fontSize: 24, // 字体大小
scrollBeyondLastLine: false, // 取消代码后面一大段空白 scrollBeyondLastLine: false, // 取消代码后面一大段空白
}) })
@@ -92,7 +95,10 @@ async function init() {
<el-button @click="reset">重置</el-button> <el-button @click="reset">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div ref="monacoEditorRef" class="editor"></div> <div
ref="monacoEditorRef"
:class="isDesktop ? 'editor' : 'editorMobile'"
></div>
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="测试用例"> 1 </el-tab-pane> <el-tab-pane label="测试用例"> 1 </el-tab-pane>
<el-tab-pane label="执行结果"> 2 </el-tab-pane> <el-tab-pane label="执行结果"> 2 </el-tab-pane>
@@ -113,6 +119,11 @@ async function init() {
.editor { .editor {
height: 70%; height: 70%;
} }
.editorMobile {
height: 500px;
}
.actions { .actions {
margin-top: 16px; margin-top: 16px;
float: right; float: right;

58
src/oj/problem/components/problem-content.vue
View File

@@ -3,41 +3,39 @@ const { problem } = defineProps(["problem"])
</script> </script>
<template> <template>
<el-scrollbar height="calc(100vh - 171px)" noresize> <h1>{{ problem.title }}</h1>
<h1>{{ problem.title }}</h1> <p class="title">描述</p>
<p class="title">描述</p> <div class="content" v-html="problem.description"></div>
<div class="content" v-html="problem.description"></div>
<p class="title">输入</p> <p class="title">输入</p>
<div class="content" v-html="problem.input_description"></div> <div class="content" v-html="problem.input_description"></div>
<p class="title">输出</p> <p class="title">输出</p>
<div class="content" v-html="problem.output_description"></div> <div class="content" v-html="problem.output_description"></div>
<div v-if="problem.hint"> <div v-if="problem.hint">
<p class="title">提示</p> <p class="title">提示</p>
<el-card shadow="never"> <el-card shadow="never">
<div class="content" v-html="problem.hint"></div> <div class="content" v-html="problem.hint"></div>
</el-card> </el-card>
</div> </div>
<div v-for="(sample, index) of problem.samples" :key="index"> <div v-for="(sample, index) of problem.samples" :key="index">
<p class="title">测试用例 {{ index + 1 }}</p> <p class="title">测试用例 {{ index + 1 }}</p>
<el-descriptions border direction="vertical"> <el-descriptions border direction="vertical">
<el-descriptions-item width="50%" label="输入"> <el-descriptions-item width="50%" label="输入">
<div class="testcase">{{ sample.input }}</div> <div class="testcase">{{ sample.input }}</div>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item width="50%" label="输出"> <el-descriptions-item width="50%" label="输出">
<div class="testcase">{{ sample.output }}</div> <div class="testcase">{{ sample.output }}</div>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> </div>
<div v-if="problem.source"> <div v-if="problem.source">
<p class="title">来源</p> <p class="title">来源</p>
<div class="content" v-html="problem.source"></div> <div class="content" v-html="problem.source"></div>
</div> </div>
</el-scrollbar>
</template> </template>
<style scoped> <style scoped>

16
src/oj/problem/components/problem-info.vue
View File

@@ -1,12 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { DIFFICULTY, getTagColor } from "../../../utils/constants" import { DIFFICULTY } from "../../../utils/constants"
import { getACRate } from "../../../utils/functions" import { getACRate, getTagColor } from "../../../utils/functions"
import { isDesktop } from "../../../utils/breakpoints"
const { problem } = defineProps(["problem"]) const { problem } = defineProps(["problem"])
</script> </script>
<template> <template>
<el-descriptions border> <el-descriptions border :column="isDesktop ? 3 : 1">
<el-descriptions-item label="编号"> <el-descriptions-item label="编号">
{{ problem._id }} {{ problem._id }}
</el-descriptions-item> </el-descriptions-item>
@@ -14,7 +15,7 @@ const { problem } = defineProps(["problem"])
{{ problem.created_by.username }} {{ problem.created_by.username }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="难度"> <el-descriptions-item label="难度">
<el-tag :type="getTagColor(problem.difficulty)"> <el-tag disable-transitions :type="getTagColor(problem.difficulty)">
{{ DIFFICULTY[<"Low" | "Mid" | "High">problem.difficulty] }} {{ DIFFICULTY[<"Low" | "Mid" | "High">problem.difficulty] }}
</el-tag> </el-tag>
</el-descriptions-item> </el-descriptions-item>
@@ -40,7 +41,12 @@ const { problem } = defineProps(["problem"])
<el-descriptions-item :span="3" label="标签"> <el-descriptions-item :span="3" label="标签">
<el-space> <el-space>
<el-tag type="info" v-for="tag in problem.tags" :key="tag"> <el-tag
disable-transitions
type="info"
v-for="tag in problem.tags"
:key="tag"
>
{{ tag }} {{ tag }}
</el-tag> </el-tag>
</el-space> </el-space>

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

@@ -2,9 +2,10 @@
import { onMounted, ref } from "vue" import { onMounted, ref } from "vue"
import { useRoute } from "vue-router" import { useRoute } from "vue-router"
import Editor from "./components/editor.vue" import Editor from "./components/editor.vue"
import { getProblem } from "../api"
import ProblemContent from "./components/problem-content.vue" import ProblemContent from "./components/problem-content.vue"
import ProblemInfo from "./components/problem-info.vue" import ProblemInfo from "./components/problem-info.vue"
import { getProblem } from "../api"
import { isDesktop, isMobile } from "../../utils/breakpoints"
const route = useRoute() const route = useRoute()
const contestID = route.params.contestID as string const contestID = route.params.contestID as string
@@ -33,19 +34,25 @@ onMounted(() => {
<template> <template>
<el-row v-if="problem._id"> <el-row v-if="problem._id">
<el-col :span="12"> <el-col :span="isDesktop ? 12 : 24">
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="题目描述"> <el-tab-pane label="题目描述" lazy>
<ProblemContent :problem="problem" /> <el-scrollbar v-if="isDesktop" height="calc(100vh - 171px)" noresize>
<ProblemContent :problem="problem" />
</el-scrollbar>
<ProblemContent v-else :problem="problem" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="比赛信息" v-if="contestID"></el-tab-pane> <el-tab-pane v-if="isMobile" label="代码编辑" lazy>
<el-tab-pane label="题目信息"> <Editor :problem="problem" />
</el-tab-pane>
<el-tab-pane label="比赛信息" v-if="contestID" lazy></el-tab-pane>
<el-tab-pane label="题目信息" lazy>
<ProblemInfo :problem="problem" /> <ProblemInfo :problem="problem" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="提交情况">3</el-tab-pane> <el-tab-pane label="提交情况">3</el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
<el-col :span="12"> <el-col v-if="isDesktop" :span="12">
<Editor :problem="problem" /> <Editor :problem="problem" />
</el-col> </el-col>
</el-row> </el-row>

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

@@ -2,8 +2,8 @@
import { onMounted, ref, reactive, watch } from "vue" import { onMounted, ref, reactive, watch } from "vue"
import { useRoute, useRouter } from "vue-router" import { useRoute, useRouter } from "vue-router"
import { useUserStore } from "../../shared/stores/user" import { useUserStore } from "../../shared/stores/user"
import { filterEmptyValue } from "../../utils/functions" import { filterEmptyValue, getTagColor } from "../../utils/functions"
import { getTagColor } from "../../utils/constants" import { isDesktop } from "../../utils/breakpoints"
import { getProblemList, getProblemTagList, getRandomProblemID } from "../api" import { getProblemList, getProblemTagList, getRandomProblemID } from "../api"
const difficultyOptions = [ const difficultyOptions = [
@@ -143,29 +143,8 @@ onMounted(() => {
<el-button type="" @click="getRandom">随机一题</el-button> <el-button type="" @click="getRandom">随机一题</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table <el-table class="pointer" :data="problems" stripe @row-click="goProblem">
class="hidden-md-and-up" <el-table-column v-if="isDesktop" label="状态" :width="80">
: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"> <template #default="scope">
<el-icon <el-icon
v-if="scope.row.status === 'done'" v-if="scope.row.status === 'done'"
@@ -179,7 +158,11 @@ onMounted(() => {
/></el-icon> /></el-icon>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="displayID" label="编号" width="100" /> <el-table-column
prop="displayID"
label="编号"
:width="isDesktop ? 100 : 60"
/>
<el-table-column prop="title" label="标题" /> <el-table-column prop="title" label="标题" />
<el-table-column label="难度" width="100"> <el-table-column label="难度" width="100">
<template #default="scope"> <template #default="scope">
@@ -188,7 +171,7 @@ onMounted(() => {
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="标签" width="200"> <el-table-column v-if="isDesktop" label="标签" :width="200">
<template #default="scope"> <template #default="scope">
<el-space> <el-space>
<el-tag <el-tag
@@ -201,21 +184,17 @@ onMounted(() => {
</el-space> </el-space>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="submission" label="提交数" width="100" /> <el-table-column
<el-table-column prop="rate" label="通过率" width="100" /> v-if="isDesktop"
prop="submission"
label="提交数"
width="100"
/>
<el-table-column v-if="isDesktop" prop="rate" label="通过率" width="100" />
</el-table> </el-table>
<el-pagination <el-pagination
class="right hidden-md-and-up margin" class="right margin"
layout="prev,next,sizes" :layout="isDesktop ? 'prev,pager,next,sizes' : '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 background
:total="total" :total="total"
:page-sizes="[10, 20, 30]" :page-sizes="[10, 20, 30]"

6
src/utils/breakpoints.ts Normal file
View File

@@ -0,0 +1,6 @@
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
const breakpoints = useBreakpoints(breakpointsTailwind)
export const isMobile = breakpoints.smallerOrEqual("md")
export const isDesktop = breakpoints.greater("md")

19
src/utils/constants.ts
View File

@@ -116,7 +116,6 @@ export const PROBLEM_PERMISSION = {
export const STORAGE_KEY = { export const STORAGE_KEY = {
AUTHED: "authed", AUTHED: "authed",
PROBLEM_CODE: "problemCode", PROBLEM_CODE: "problemCode",
USER: "user",
} }
export const DIFFICULTY = { export const DIFFICULTY = {
@@ -125,24 +124,6 @@ export const DIFFICULTY = {
High: "困难", High: "困难",
} }
export function getTagColor(tag: string) {
return {
Low: "success",
Mid: "",
High: "danger",
简单: "success",
中等: "",
困难: "danger",
}[tag]
}
export function buildProblemCodeKey(problemID: string, contestID = "") {
if (contestID) {
return `${STORAGE_KEY.PROBLEM_CODE}_${contestID}_${problemID}`
}
return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`
}
const cSource = const cSource =
'#include<stdio.h>\r\n\r\nint main()\r\n{\r\n printf("黄岩一职");\r\n return 0;\r\n}' '#include<stdio.h>\r\n\r\nint main()\r\n{\r\n printf("黄岩一职");\r\n return 0;\r\n}'
const cppSource = const cppSource =

20
src/utils/functions.ts
View File

@@ -1,3 +1,5 @@
import { STORAGE_KEY } from "./constants"
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}%`
@@ -12,3 +14,21 @@ export function filterEmptyValue(object: any) {
}) })
return query return query
} }
export function buildProblemCodeKey(problemID: string, contestID = "") {
if (contestID) {
return `${STORAGE_KEY.PROBLEM_CODE}_${contestID}_${problemID}`
}
return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`
}
export function getTagColor(tag: string) {
return {
Low: "success",
Mid: "",
High: "danger",
简单: "success",
中等: "",
困难: "danger",
}[tag]
}