QingdaoU/OnlineJudgeFE
1
0
Fork 0
mirror of https://github.com/QingdaoU/OnlineJudgeFE.git synced 2024-12-29 16:01:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

add breadcrumb.

Browse Source
This commit is contained in:
zemal 2017-06-27 14:34:02 +08:00
parent b690f5bae3
commit eb9d3ce4bd
10 changed files with 214 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
oj/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "oj", "name": "onlinejudge",
"version": "1.0.0", "version": "2.0.0",
"description": "A Vue.js project", "description": "A Vue.js project",
"author": "zemal <rawidn@163.com>", "author": "zemal <rawidn@163.com>",
"private": true, "private": true,

13
oj/src/components/App.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div> <div>
<Navbar></Navbar> <Navbar></Navbar>
<breadcrumb></breadcrumb>
<div class="content-app"> <div class="content-app">
<router-view></router-view> <router-view></router-view>
<div class="footer"> <div class="footer">
@ -12,7 +13,7 @@
<script> <script>
import Navbar from './NavBar.vue' import Navbar from './NavBar.vue'
// import api from './api.js' import breadcrumb from './Breadcrumb.vue'
export default { export default {
name: 'app', name: 'app',
@ -22,7 +23,8 @@
} }
}, },
components: { components: {
Navbar Navbar,
breadcrumb
}, },
methods: {} methods: {}
} }
@ -36,19 +38,18 @@
box-sizing: border-box; box-sizing: border-box;
} }
a { a {
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
&:active, &:hover{ &:active, &:hover {
outline-width:0 ; outline-width: 0;
} }
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
overflow: auto; overflow: auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
background-color: #edf0f2;; background-color: #edf0f2;;

58
oj/src/components/Breadcrumb.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div id="breadcrumb">
<Breadcrumb>
<Breadcrumb-item >Home</Breadcrumb-item>
<Breadcrumb-item :key="b" v-for="b in breads">{{b}}</Breadcrumb-item>
</Breadcrumb>
</div>
</template>
<script>
import bus from '../utils/eventBus'
export default {
name: 'bread',
data() {
return {
breads: []
}
},
methods: {
// 根据路由生成breadcrumb
generateBread(route) {
// 去重空导航
this.breads = route.path.split('/').filter((element) => {
return !!element
})
}
},
mounted() {
this.generateBread(this.$route)
// 可以通过eventbus传一个字符串，该字符串会替换掉最后一个breadcrumb项，如：Problem.vue
bus.$on('changeBread', (res) => {
let i = this.breads.length - 1
this.breads.splice(i, 1)
this.breads.push(res)
})
},
watch: {
'$route'(to, from) {
this.generateBread(to)
}
}
}
</script>
<style scoped lang="less">
#breadcrumb {
background: #f8f8f9;
padding: 20px 30px;
.ivu-breadcrumb{
text-transform: capitalize;
&>span:last-child{
font-size: 20px;
font-weight:300;
}
}
}
</style>

28
oj/src/components/CodeMirror.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<div style="margin: 25px 0px"> <div style="margin: 25px 0px">
<el-row class="header"> <Row class="header">
<el-col :span=12> <Col :span=12>
<span> <span>
Language: Language:
<el-select v-model="lang" @change="onLangChange"> <Select v-model="lang" @change="onLangChange">
<el-option v-for="item in languages" :label="item" :value="item"> <Option v-for="item in languages" :key="item" :value="item">{{item}}
</el-option> </Option>
</el-select> </Select>
</span> </span>
</el-col> </Col>
<el-col :span=12> <Col :span=12>
<span style="float: right"> <span style="float: right">
Theme: Theme:
<el-select v-model="options.theme"> <Select v-model="options.theme">
<el-option v-for="item in themes" :label="item.label" :value="item.value"> <Option v-for="item in themes" :key="item.label" :value="item.value">{{item.label}}
</el-option> </Option>
</el-select> </Select>
</span> </span>
</el-col> </Col>
</el-row> </Row>
<codemirror :code="currentValue" :options="options" @change="onEditorCodeChange" ref="myEditor"> <codemirror :code="currentValue" :options="options" @change="onEditorCodeChange" ref="myEditor">
</codemirror> </codemirror>
</div> </div>

2
oj/src/components/NavBar.vue
View File

@ -110,6 +110,6 @@
.btn-menu { .btn-menu {
font-size: 16px; font-size: 16px;
margin-top: 12px; margin-top: 13px;
} }
</style> </style>

10
oj/src/routers/routes.js
View File

@ -15,6 +15,11 @@ export default [
// } // }
// } // }
}, },
{
name: 'problem-details',
path: '/problem/:id',
component: () => import('@/views/problem/Problem.vue')
},
{ {
name: 'logout', name: 'logout',
path: '/logout', path: '/logout',
@ -25,11 +30,6 @@ export default [
path: '/problems', path: '/problems',
component: ProblemList component: ProblemList
}, },
{
name: 'problem-details',
path: '/problem/:id',
component: Test
},
{ {
path: '/test', path: '/test',
name: 'Test', name: 'Test',

2
oj/src/utils/eventBus.js
View File

@ -1,4 +1,4 @@
// 这个文件用来做同级组件间的数据传递,见Login.vue // 这个文件用来做同级组件间的数据传递,例如Login.vue和navbar直接之间的传递
import Vue from 'vue' import Vue from 'vue'

185
oj/src/views/problem/Problem.vue
View File

@ -1,92 +1,86 @@
<template> <template>
<el-row type="flex" justify="space-around"> <Row type="flex" justify="space-around">
<!--problem main--> <!--problem main-->
<el-col :span=16> <Col :span=16>
<panel :title="problem.title"> <Card :padding="20" class="problem-main">
<template slot="header"> <p class="title" style="margin-top: 0">Description</p>
<el-button type="warning" icon="edit" @click="openDialog">Submit</el-button> <p class="content" v-html=problem.description></p>
</template>
<h4>Description</h4>
<p v-html=problem.description></p>
<h4>Input</h4> <p class="title">Input</p>
<p v-html=problem.input_description></p> <p class="content" v-html=problem.input_description></p>
<h4>Output</h4> <p class="title">Output</p>
<p v-html=problem.output_description></p> <p class="content" v-html=problem.output_description></p>
<div v-if="problem.hint"> <div v-if="problem.hint">
<h4>Hint</h4> <p class="title">Hint</p>
<el-card :body-style=cardStyle> <Card dis-hover>
<div v-html=problem.hint></div> <div class="content" v-html=problem.hint></div>
</el-card> </Card>
</div> </div>
<div v-for="sample, index in problem.samples"> <div v-for="sample, index in problem.samples">
<el-row> <Row type="flex" justify="space-between">
<el-col :span=9> <Col :span=11>
<h4>Sample Input {{index + 1}}</h4> <p class="title">Sample Input {{index + 1}}</p>
<el-card :body-style=cardStyle> <Card dis-hover :padding="10">
<div>{{sample.input}}</div> <div>{{sample.input}}</div>
</el-card> </Card>
</el-col> </Col>
<el-col :span=10 :offset=2> <Col :span=11>
<h4>Sample Output {{index + 1}}</h4> <p class="title">Sample Output {{index + 1}}</p>
<el-card :body-style=cardStyle> <Card dis-hover :padding="10">
<div>{{sample.output}}</div> <div>{{sample.output}}</div>
</el-card> </Card>
</el-col> </Col>
</el-row> </Row>
</div> </div>
</panel> </Card>
</el-col> </Col>
<!--problem main end--> <!--problem main end-->
<el-col :span=6> <Col :span=6>
<Card> <Card style="overflow: hidden;">
<div class="header"> <div slot="title">
Problem Info Information
</div> </div>
<dl> <dl>
<dt>Time Limit</dt> <dt>Time Limit</dt>
<dd>{{problem.time_limit}}ms</dd> <dd>{{problem.time_limit}}ms</dd>
<dt>Memory Limit</dt> <dt>Memory Limit</dt>
<dd>{{problem.memory_limit}}MB</dd> <dd>{{problem.memory_limit}}MB</dd>
<dt>Created By</dt> <dt>Created By</dt>
<dd>{{problem.created_by.username}}</dd> <dd>{{problem.created_by.username}}</dd>
<dt>Source</dt> <dt>Source</dt>
<dd>{{problem.source}}</dd> <dd>{{problem.source}}</dd>
</dl> </dl>
</Card> </Card>
</el-col> </Col>
<el-dialog title="Submit Code" :visible.sync="dialogVisible"> <!--<el-dialog title="Submit Code" :visible.sync="dialogVisible">-->
Baidu INC. <!--Baidu INC.-->
<!--<CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>--> <!--&lt;!&ndash;<CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>&ndash;&gt;-->
<!--<span v-show="submissionId">Status: {{sumissionStatus}}</span>--> <!--&lt;!&ndash;<span v-show="submissionId">Status: {{sumissionStatus}}</span>&ndash;&gt;-->
<!--<el-button type="warning" class="fl-right" @click="submitCode"> Submit </el-button>--> <!--&lt;!&ndash;<Button type="warning" class="fl-right" @click="submitCode"> Submit </Button>&ndash;&gt;-->
</el-dialog> <!--</el-dialog>-->
</el-row> </Row>
</template> </template>
<script> <script>
import CodeMirror from '../../components/CodeMirror' import CodeMirror from '../../components/CodeMirror'
import Card from '../../components/Card'
import api from '../../api' import api from '../../api'
import {STATUS} from '../../utils/utils' import {STATUS} from '../../utils/utils'
import Panel from '../../components/Panel' import bus from '@/utils/eventBus'
export default { export default {
name: 'Problem', name: 'Problem',
components: { components: {
Panel, CodeMirror
CodeMirror,
Card
}, },
data() { data() {
return { return {
@ -104,15 +98,13 @@
created_by: { created_by: {
username: '' username: ''
} }
},
cardStyle: {
padding: '5px 10px'
} }
} }
}, },
mounted() { mounted() {
api.getProblem(this.$route.params.id).then(res => { api.getProblem(this.$route.params.id).then(res => {
this.problem = res.data.data this.problem = res.data.data
bus.$emit('changeBread', this.problem.title)
}) })
}, },
methods: { methods: {
@ -123,7 +115,6 @@
this.language = newLang this.language = newLang
}, },
openDialog() { openDialog() {
console.log(this.dialogVisible)
this.dialogVisible = true this.dialogVisible = true
}, },
submitCode() { submitCode() {
@ -156,39 +147,49 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.problem-main {
.el-card { .title {
box-shadow: none; font-size: 19px;
background-color: #F9FAFC; font-weight:500;
margin: 25px 0 8px 0;
}
.content {
text-indent: 1.3em;
font-size: 15px
}
} }
/*.Card {*/
/*box-shadow: none;*/
/*background-color: #F9FAFC;*/
/*}*/
h4 { /*h4 {*/
color: #324057; /*color: #324057;*/
font-weight: 500; /*font-weight: 500;*/
} /*}*/
p { /*p {*/
font-weight: 400; /*font-weight: 400;*/
margin: 10px 10px; /*margin: 10px 10px;*/
color: #475669; /*color: #475669;*/
} /*}*/
hr { /*hr {*/
margin: 20px 5px; /*margin: 20px 5px;*/
border: 0; /*border: 0;*/
border-top: 1px solid #eee; /*border-top: 1px solid #eee;*/
} /*}*/
.fl-right { .fl-right {
float: right; float: right;
} }
.header { /*.header {*/
line-height: 40px; /*line-height: 40px;*/
font-size: 18px; /*font-size: 18px;*/
margin-bottom: 10px; /*margin-bottom: 10px;*/
} /*}*/
dl { dl {
margin: 0; margin: 0;

6
oj/src/views/problem/ProblemList.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Row type="flex" justify="space-around"> <Row type="flex" justify="space-around">
<Col :span=18> <Col :span=18>
<Card dis-hover :padding="0"> <Card :bordered="false" dis-hover :padding="0">
<div slot="title"> <div slot="title">
<Form id="filterForm" ref="filterForm" :model="filterForm"> <Form id="filterForm" ref="filterForm" :model="filterForm">
<Row type="flex" justify="space-between"> <Row type="flex" justify="space-between">
@ -107,7 +107,7 @@
], ],
problemList: [], problemList: [],
pageSize: 1, pageSize: 2,
total: 0, total: 0,
problemLoading: false, problemLoading: false,
tagLoading: false, tagLoading: false,
@ -173,7 +173,7 @@
#filterForm { #filterForm {
.ivu-form-item { .ivu-form-item {
margin-bottom: 0; margin-bottom: 0;
margin-right: 30px; margin-right: 10px;
} }
} }

34
oj/src/views/test.vue
View File

@ -1,20 +1,46 @@
<template> <template>
<div> <div>
Hello world <div id="breadcrumb">
<Breadcrumb>
<Breadcrumb-item>Home</Breadcrumb-item>
<Breadcrumb-item>Test</Breadcrumb-item>
</Breadcrumb>
</div>
<CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>
</div> </div>
</template> </template>
<script> <script>
// import api from '@/api' // import api from '@/api'
import CodeMirror from '../components/CodeMirror.vue'
export default { export default {
name: 'test',
components: {
CodeMirror
},
data() {
return {
code: ''
}
},
mounted() { mounted() {
// api.getProblem('1').then((res) => { // api.getProblem('1').then((res) => {
// console.log(res.data) // console.log(res.data)
// }) // })
},
methods: {
onChangeCode(newCode) {
this.code = newCode
},
onChangeLang(newLang) {
this.language = newLang
}
} }
} }
</script> </script>
<style> <style scoped lang="less">
#breadcrumb {
outline: 1px;
}
</style> </style>