updated code highlight

This commit is contained in:
Marvin Zhang
2019-07-26 10:47:51 +08:00
parent 2fda41d9ee
commit 1e8afe6923
7 changed files with 70 additions and 40 deletions

View File

@@ -5,9 +5,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script>
</script>
<title>Crawlab</title>
</head>
<body>

View File

@@ -3,39 +3,28 @@
class="file-content"
:options="options"
v-model="fileContent"
@change="onChange"
/>
</template>
<script>
import { codemirror } from 'vue-codemirror'
import { codemirror } from 'vue-codemirror-lite'
require('codemirror/mode/python/python.js')
require('codemirror/mode/javascript/javascript.js')
require('codemirror/mode/go/go.js')
require('codemirror/mode/shell/shell.js')
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')
import 'codemirror/lib/codemirror.js'
// language
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/go/go.js'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/mode/markdown/markdown.js'
import 'codemirror/mode/php/php.js'
export default {
name: 'FileDetail',
components: { codemirror },
data () {
return {
internalFileContent: '',
options: {
theme: 'darcula',
// mode: 'javascript',
mode: { name: 'javascript', json: true },
lineNumbers: true,
line: true,
matchBrackets: true
}
internalFileContent: ''
}
},
computed: {
@@ -46,6 +35,34 @@ export default {
set (value) {
return this.$store.commit('file/SET_FILE_CONTENT', value)
}
},
options () {
return {
mode: this.lanaguage,
theme: 'darcula',
styleActiveLine: true,
lineNumbers: true,
line: true,
matchBrackets: true
}
},
lanaguage () {
const fileName = this.$store.state.file.currentPath
if (fileName.match(/\.js$/)) {
return 'text/javascript'
} else if (fileName.match(/\.py$/)) {
return 'text/x-python'
} else if (fileName.match(/\.go$/)) {
return 'text/x-go'
} else if (fileName.match(/\.sh$/)) {
return 'text/x-shell'
} else if (fileName.match(/\.php$/)) {
return 'text/x-php'
} else if (fileName.match(/\.md$/)) {
return 'text/x-markdown'
} else {
return 'text'
}
}
},
created () {

View File

@@ -111,7 +111,7 @@ export default {
} else {
// 文件
this.showFile = true
this.$store.commit('file/SET_CURRENT_CONTENT', '')
this.$store.commit('file/SET_FILE_CONTENT', '')
this.$store.commit('file/SET_CURRENT_PATH', item.path)
this.$store.dispatch('file/getFileContent', { path: item.path })
}

View File

@@ -36,15 +36,17 @@ export default {
},
nodes () {
let nodes = this.$store.state.node.nodeList
nodes = nodes.map(d => {
d.id = d._id
d.x = Math.floor(100 * Math.random())
d.y = Math.floor(100 * Math.random())
d.itemStyle = {
color: d.is_master ? '#409EFF' : '#e6a23c'
}
return d
})
nodes = nodes
.filter(d => d.status !== 'offline')
.map(d => {
d.id = d._id
d.x = Math.floor(100 * Math.random())
d.y = Math.floor(100 * Math.random())
d.itemStyle = {
color: d.is_master ? '#409EFF' : '#e6a23c'
}
return d
})
// mongodb
nodes.push({
@@ -73,6 +75,7 @@ export default {
links () {
const links = []
for (let i = 0; i < this.nodes.length; i++) {
if (this.nodes[i].status === 'offline') continue
if (['redis', 'mongodb'].includes(this.nodes[i].id)) continue
// mongodb
links.push({
@@ -115,7 +118,15 @@ export default {
title: {
text: this.$t('Node Network')
},
tooltip: {},
tooltip: {
formatter: params => {
let str = '<span style="margin-right:5px;display:inline-block;height:12px;width:12px;border-radius:6px;background:' + params.color + '"></span>'
if (params.data.name) str += '<span>' + params.data.name + '</span><br>'
if (params.data.ip) str += '<span>IP: ' + params.data.ip + '</span><br>'
if (params.data.mac) str += '<span>MAC: ' + params.data.mac + '</span><br>'
return str
}
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
@@ -141,9 +152,9 @@ export default {
focusOneNodeAdjacency: true,
force: {
initLayout: 'force',
repulsion: 50,
repulsion: 30,
gravity: 0.001,
edgeLength: 40
edgeLength: 30
},
draggable: true,
data: this.nodes,

View File

@@ -15,7 +15,8 @@ import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.js'
import { codemirror } from 'vue-codemirror-lite'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/darcula.css'

View File

@@ -62,6 +62,9 @@
<template v-else-if="ex.file_name.match(/^node/)">
<font-awesome-icon :icon="['fab','node-js']"/>
</template>
<template v-else-if="ex.file_name.match(/^php/)">
<font-awesome-icon :icon="['fab','php']"/>
</template>
<template v-else>
<font-awesome-icon :icon="['fas', 'terminal']"/>
</template>

View File

@@ -8479,7 +8479,8 @@ vue-ba@^1.2.5:
vue-codemirror-lite@^1.0.4:
version "1.0.4"
resolved "http://registry.npm.taobao.org/vue-codemirror-lite/download/vue-codemirror-lite-1.0.4.tgz#48a5cd7d17c0914503c8cd9d9b56b438e49c3410"
resolved "https://registry.npm.taobao.org/vue-codemirror-lite/download/vue-codemirror-lite-1.0.4.tgz#48a5cd7d17c0914503c8cd9d9b56b438e49c3410"
integrity sha1-SKXNfRfAkUUDyM2dm1a0OOScNBA=
dependencies:
codemirror "^5.22.0"