mirror of
https://github.com/QingdaoU/OnlineJudge.git
synced 2025-01-16 17:26:38 +00:00
统一部分样式和写法
This commit is contained in:
parent
976a66abc6
commit
37f12b6bb2
@ -24,6 +24,10 @@
|
||||
@import "../../static/css/bootstrap.css";
|
||||
@import "../../static/css/todc-bootstrap.css";
|
||||
|
||||
label {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
@ -9,7 +9,7 @@
|
||||
|
||||
<div class="form-group col-md-12">
|
||||
<label>{{ $t("adminUtils.description") }}</label>
|
||||
<simditor></simditor>
|
||||
<simditor v-ref:problemdescription></simditor>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
@ -45,32 +45,36 @@
|
||||
<tag-input :tag-list.sync="tagList"></tag-input>
|
||||
</div>
|
||||
|
||||
<problem-sample v-ref:sample></problem-sample>
|
||||
<test-case-mgnt v-ref:testcase></test-case-mgnt>
|
||||
<problem-sample :samples.sync="samples"></problem-sample>
|
||||
<test-case-mgnt :mode="mode" :test-case-list="testCaseList"></test-case-mgnt>
|
||||
|
||||
<div class="col-md-12">
|
||||
<code-mirror></code-mirror>
|
||||
<label>Special Judge</label>
|
||||
<code-mirror :selected-language-name="selectedLanguageName" :language-list="languageList"></code-mirror>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import testCaseMgnt from "./testCaseMgnt.vue"
|
||||
import problemSample from "./problemSample.vue"
|
||||
import testCaseMgnt from "../utils/testCaseMgnt.vue"
|
||||
import problemSample from "../utils/problemSample.vue"
|
||||
|
||||
import back from "../utils/back.vue"
|
||||
import simditor from "../utils/simditor.vue"
|
||||
import tagInput from "../utils/tagInput.vue"
|
||||
import codeMirror from "../utils/codeMirror.vue"
|
||||
import help from "../utils/help.vue"
|
||||
import helpLink from "../utils/helpLink.vue"
|
||||
|
||||
export default({
|
||||
data() {
|
||||
return {
|
||||
tagList: ["1234", "呵呵哒"]
|
||||
tagList: ["1234", "呵呵哒"],
|
||||
selectedLanguageName: "C",
|
||||
languageList: [{name: "C", description: "xxxxxx"}],
|
||||
samples: [{input: "", output: "", visible: true}],
|
||||
mode: "ACM",
|
||||
testCaseList: [{input_name: "1.in", output_name: "1.out"}]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@ -80,10 +84,8 @@
|
||||
simditor,
|
||||
tagInput,
|
||||
codeMirror,
|
||||
help
|
||||
},
|
||||
ready() {
|
||||
this.$refs.testcase.setTestCase([{input_name: "1.in", output_name: "1.out"}], false);
|
||||
help,
|
||||
helpLink
|
||||
}
|
||||
})
|
||||
</script>
|
9
frontend/admin/src/components/problem/spj.vue
Normal file
9
frontend/admin/src/components/problem/spj.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="col-md-12">
|
||||
<code-mirror></code-mirror>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import codeMirror from "../utils/codeMirror.vue"
|
||||
</script>
|
@ -1,27 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<p>{{ $t("problem.chooseLanguage") }}</p>
|
||||
<div id="language-radio">
|
||||
<template v-for="language in languageList">
|
||||
<span class="radio-inline">
|
||||
<input type="radio" value="{{ language.name }}" name="language" v-model="selectedLanguageName">
|
||||
{{ language.name }} ({{ language.description }})
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ $t("problem.submitCode") }}</p>
|
||||
<textarea id="{{ editorId }}"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeMirror from "codemirror"
|
||||
import "codemirror/mode/javascript/javascript"
|
||||
import "codemirror/mode/python/python"
|
||||
import "codemirror/mode/clike/clike"
|
||||
import "codemirror/mode/meta"
|
||||
|
||||
function getMime(languageName) {
|
||||
for (let item of CodeMirror.modeInfo) {
|
||||
if (item.name == languageName) {
|
||||
return item.mime;
|
||||
}
|
||||
}
|
||||
throw "Invalid language " + languageName;
|
||||
}
|
||||
|
||||
export default({
|
||||
props: {
|
||||
languageList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
selectedLanguageName: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: {},
|
||||
editorId: Math.random().toString(36).substr(2),
|
||||
language: "python"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
language(newVal, oldVal) {
|
||||
this.editor.setOption("mode", getMime(newVal.name))
|
||||
}
|
||||
},
|
||||
attached() {
|
||||
CodeMirror.fromTextArea(document.getElementById(this.editorId), {
|
||||
this.editor = CodeMirror.fromTextArea(document.getElementById(this.editorId), {
|
||||
lineNumbers: true,
|
||||
mode: this.language,
|
||||
mode: getMime(this.selectedLanguageName),
|
||||
indentUnit: 4,
|
||||
matchBrackets: true
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
setLanguage(languageName) {
|
||||
this.selectedLanguageName = languageName;
|
||||
},
|
||||
setCode(code) {
|
||||
this.editor.setValue(code);
|
||||
},
|
||||
getCode() {
|
||||
return this.editor.getValue();
|
||||
},
|
||||
getLanguage() {
|
||||
return this.selectedLanguageName;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -42,4 +97,8 @@
|
||||
position: relative;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#language-radio {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
@ -12,7 +12,10 @@
|
||||
|
||||
export default({
|
||||
props: {
|
||||
name: ""
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
translate() {
|
||||
|
14
frontend/admin/src/components/utils/helpLink.vue
Normal file
14
frontend/admin/src/components/utils/helpLink.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<a href="{{ link }}" target="_blank"><span class="glyphicon glyphicon-link"></span></a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default ({
|
||||
props: {
|
||||
link: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
@ -18,13 +18,13 @@
|
||||
<div class="panel-body row" v-show="sample.visible">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label>{{ $t("problem.sample") }}{{ $t("adminUtils.input") }}</label>
|
||||
<p>{{ $t("problem.sample") }}{{ $t("adminUtils.input") }}</p>
|
||||
<textarea class="form-control" rows="5" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label>{{ $t("problem.sample") }}{{ $t("adminUtils.output") }}</label>
|
||||
<p>{{ $t("problem.sample") }}{{ $t("adminUtils.output") }}</p>
|
||||
<textarea class="form-control" rows="5" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
@ -36,9 +36,10 @@
|
||||
|
||||
<script>
|
||||
export default({
|
||||
data() {
|
||||
return {
|
||||
samples: [{input: "", output: "", visible: true}]
|
||||
props: {
|
||||
samples: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -70,8 +71,14 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.add-sample-btn {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.panel-heading {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.panel-body {
|
||||
padding-top: 5px;
|
||||
}
|
||||
</style>
|
@ -19,12 +19,14 @@
|
||||
props: {
|
||||
tagList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: ()=>{
|
||||
return []
|
||||
}
|
||||
},
|
||||
tagAutoCompleteList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: ()=>{
|
||||
return []
|
||||
}
|
||||
@ -32,20 +34,20 @@
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
text: '',
|
||||
text: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addTag (text) {
|
||||
if (text.trim() != '') {
|
||||
if (text.trim() != "" && this.tagList.indexOf(text.trim()) == -1) {
|
||||
var count = this.tagList.length;
|
||||
this.tagList.$set(count, text);
|
||||
this.text = ''
|
||||
}
|
||||
this.text = ""
|
||||
},
|
||||
delTag (index, way) {
|
||||
if (way) {
|
||||
if (index >= 0 && this.text == '') {
|
||||
if (index >= 0 && this.text == "") {
|
||||
this.tagList.splice(index, 1)
|
||||
}
|
||||
} else {
|
||||
|
@ -2,15 +2,22 @@
|
||||
<div class="col-md-12">
|
||||
<label>
|
||||
{{ $t("problem.testCase") }}
|
||||
<a href="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0"
|
||||
target="_blank">{{ $t("adminUtils.help") }}
|
||||
</a>
|
||||
<a v-show="downloadUrl" v-bind:href="downloadUrl">{{ $t("adminUtils.download") }}</a>
|
||||
<help-link :link="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0"></help-link>
|
||||
<a v-show="downloadURL" v-bind:href="downloadURL">{{ $t("adminUtils.download") }}</a>
|
||||
</label>
|
||||
<br>
|
||||
<input type="checkbox" v-model="OIMode"> {{ $t("problem.OIMode") }}
|
||||
<br>
|
||||
<label>{{ $t("problem.uploadProgress") }}</label>
|
||||
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<p>{{ $t("problem.mode") }}</p>
|
||||
<div>
|
||||
<span class="radio-inline"><input type="radio" name="mode" value="ACM" checked>{{ $t("problem.ACMMode") }}</span>
|
||||
<span class="radio-inline"><input type="radio" name="mode" value="OI">{{ $t("problem.OIMode") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>{{ $t("problem.uploadProgress") }}</p>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar " aria-valuenow="{{ uploadProgress }}"
|
||||
aria-valuemin="0"
|
||||
@ -19,6 +26,7 @@
|
||||
{{ uploadProgress }} %
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table table-striped" v-if="testCaseList">
|
||||
<tr>
|
||||
@ -31,7 +39,8 @@
|
||||
<td>{{ $index + 1 }}</td>
|
||||
<td>{{ testCase.input_name }}</td>
|
||||
<td>{{ testCase.output_name }}</td>
|
||||
<td v-if="OIMode"><input class="score" v-model="testCase.score" type="number" min="1" required></td>
|
||||
<td v-if="mode == 'OI'"><input class="score" v-model="testCase.score" type="number" min="1" required>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="form-group">
|
||||
@ -47,18 +56,34 @@
|
||||
|
||||
<script>
|
||||
import uploader from "../utils/uploader.vue"
|
||||
import helpLink from "../utils/helpLink.vue"
|
||||
|
||||
export default({
|
||||
props: {
|
||||
downloadURL: {
|
||||
type: String,
|
||||
required: false,
|
||||
default() {
|
||||
return ""
|
||||
}
|
||||
},
|
||||
testCaseList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
downloadUrl: "",
|
||||
uploadProgress: 0,
|
||||
testCaseList: [],
|
||||
OIMode: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uploader
|
||||
uploader,
|
||||
helpLink
|
||||
},
|
||||
methods: {
|
||||
uploadSuccess(f, response){
|
||||
@ -66,12 +91,11 @@
|
||||
},
|
||||
uploadError(f, reason){
|
||||
this.uploadProgress = 0;
|
||||
alert($t("request.error"));
|
||||
alert(this.$t("request.error"));
|
||||
},
|
||||
setTestCase(mode, testCaseList) {
|
||||
this.OIMode = mode == "OI";
|
||||
// attr must be set firstly so vue can track it's changes
|
||||
if (this.OIMode) {
|
||||
if (this.mode == "OI") {
|
||||
for (let item of testCaseList) {
|
||||
item.score = 0;
|
||||
}
|
||||
@ -80,7 +104,7 @@
|
||||
},
|
||||
getTestCase() {
|
||||
var testCaseList = this.testCaseList;
|
||||
if (!this.OIMode) {
|
||||
if (this.mode != "OI") {
|
||||
for (let item of testCaseList) {
|
||||
delete item.score;
|
||||
}
|
@ -65,7 +65,9 @@ export default {
|
||||
deleteThisSample: "删除这组样例?",
|
||||
testCase: "测试用例",
|
||||
uploadProgress: "上传进度",
|
||||
mode: "模式",
|
||||
OIMode: "OI模式",
|
||||
ACMMode: "ACM模式",
|
||||
score: "分数",
|
||||
timeLimit: "时间限制",
|
||||
memoryLimit: "内存限制",
|
||||
@ -73,7 +75,9 @@ export default {
|
||||
hard: "难",
|
||||
medium: "中等",
|
||||
easy: "简单",
|
||||
difficulty: "难度"
|
||||
difficulty: "难度",
|
||||
chooseLanguage: "选择语言",
|
||||
submitCode: "提交代码"
|
||||
},
|
||||
tag: {
|
||||
hint: "回车创建标签"
|
||||
|
Loading…
x
Reference in New Issue
Block a user