mirror of
https://github.com/0xJacky/nginx-ui.git
synced 2025-05-11 10:25:52 +02:00
use brace as code editor
This commit is contained in:
0xJacky
parent
1f57b04e1b
commit
22da4ba879
14 changed files with 134 additions and 1543 deletions
|
|
@ -40,6 +40,7 @@
|
|||
"@vue/cli-service": "~4.5.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-import": "^1.13.3",
|
||||
"brace": "https://github.com/nightwing/brace",
|
||||
"easygettext": "^2.17.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
|
|
@ -54,7 +55,8 @@
|
|||
"vue-cli-plugin-generate-build-id": "^0.2.0",
|
||||
"vue-cropper": "^0.5.6",
|
||||
"vue-template-babel-compiler": "^1.1.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vue2-ace-editor": "^0.0.15"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
@text-color-secondary: #bdbdbd;
|
||||
@heading-color: #fff;
|
||||
|
||||
@item-hover-bg: @black_bg;
|
||||
|
||||
@body-background: @black_bg;
|
||||
@component-background: @black_content;
|
||||
@layout-body-background: @black_bg;
|
||||
|
|
@ -22,7 +24,7 @@
|
|||
|
||||
@item-active-bg: #161717;
|
||||
|
||||
@link-color: #fff;
|
||||
@link-color: #bcbcbc;
|
||||
@table-row-hover-bg: @black_bg;
|
||||
@table-selected-row-bg: @black_bg;
|
||||
|
||||
|
|
@ -45,7 +47,6 @@
|
|||
// ---
|
||||
@alert-message-color: @black;
|
||||
|
||||
|
||||
.ant-select-dropdown-menu-item:hover {
|
||||
background: @black_bg;
|
||||
}
|
||||
|
|
@ -65,4 +66,9 @@
|
|||
background-color: @black_bg !important;
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
// box-shadow: 0 0 30px rgb(0, 0, 0, 10%) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -31,7 +31,6 @@ a {
|
|||
text-decoration: none;
|
||||
-webkit-transition: all .3s ease;
|
||||
-moz-transition: all .3s ease;
|
||||
-ms-transition: all .3s ease;
|
||||
-o-transition: all .3s ease;
|
||||
transition: all .3s ease;
|
||||
|
||||
|
|
@ -149,9 +148,34 @@ button {
|
|||
box-shadow: 0 0 30px rgba(200, 200, 200, 0.25);
|
||||
}
|
||||
|
||||
.ant-collapse {
|
||||
background: #ffffff;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: #28292c;
|
||||
}
|
||||
.ant-list-item-action {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/*@media (max-width: 900px) {
|
||||
|
||||
.ant-steps-navigation > .ant-steps-item::after {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.ant-steps-navigation > .ant-steps-item.ant-steps-item-active::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: unset;
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: calc(100% - 24px);
|
||||
}
|
||||
|
||||
.ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item, .ant-steps-horizontal.ant-steps-label-horizontal {
|
||||
display: block;
|
||||
}
|
||||
}*/
|
||||
|
|
|
|||
|
|
@ -19,13 +19,20 @@ export default {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.logo {
|
||||
margin: 8px 18px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 8px 25px;
|
||||
-webkit-box-shadow: 1px 1px 0 0 #e8e8e8;
|
||||
box-shadow: 1px 1px 0 0 #e8e8e8;
|
||||
transition: all 0.3s;
|
||||
height: 56px;
|
||||
width: 80%;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
background-color: #ffffff;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: transparent;
|
||||
-webkit-box-shadow: 1px 1px 0 0 #404040;
|
||||
box-shadow: 1px 1px 0 0 #404040;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 46px;
|
||||
|
|
@ -33,11 +40,11 @@ export default {
|
|||
}
|
||||
|
||||
.text {
|
||||
font-weight: 300;
|
||||
font-size: 23px;
|
||||
float: left;
|
||||
font-size: 22px;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
padding-left: 52px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export default {
|
|||
padding: 16px 32px 0;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: transparent;
|
||||
background: #28292c;
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<codemirror v-model="current_value" :options="cmOptions"/>
|
||||
<!-- <codemirror v-model="current_value" :options="cmOptions"/>-->
|
||||
<editor v-model="current_value" @init="editorInit" lang="nginx" theme="monokai" width="100%" height="1000"></editor>
|
||||
</template>
|
||||
<style lang="less">
|
||||
.cm-s-monokai {
|
||||
|
|
@ -7,7 +8,7 @@
|
|||
}
|
||||
</style>
|
||||
<script>
|
||||
import {codemirror} from 'vue-codemirror'
|
||||
//import {codemirror} from 'vue-codemirror'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import 'codemirror/theme/monokai.css'
|
||||
|
||||
|
|
@ -16,7 +17,8 @@ import 'codemirror/mode/nginx/nginx'
|
|||
export default {
|
||||
name: 'vue-itextarea',
|
||||
components: {
|
||||
codemirror
|
||||
// codemirror
|
||||
editor: require('vue2-ace-editor'),
|
||||
},
|
||||
props: {
|
||||
value: {},
|
||||
|
|
@ -48,5 +50,12 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
editorInit: function () {
|
||||
require('brace/ext/language_tools') //language extension prerequsite...
|
||||
require('brace/mode/nginx') //language
|
||||
require('brace/theme/monokai')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
:collapsible="true"
|
||||
:style="{zIndex: 11}"
|
||||
theme="light"
|
||||
class="layout-sider"
|
||||
>
|
||||
<side-bar/>
|
||||
</a-layout-sider>
|
||||
|
|
@ -47,7 +48,7 @@ import HeaderLayout from './HeaderLayout'
|
|||
import SideBar from './SideBar'
|
||||
import FooterLayout from './FooterLayout'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader'
|
||||
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
|
||||
import zh_CN from 'ant-design-vue/es/locale/zh_CN'
|
||||
|
||||
export default {
|
||||
name: 'BaseLayout',
|
||||
|
|
@ -55,7 +56,7 @@ export default {
|
|||
return {
|
||||
collapsed: this.collapse(),
|
||||
zh_CN,
|
||||
clientWidth: document.body.clientWidth
|
||||
clientWidth: document.body.clientWidth,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -73,7 +74,28 @@ export default {
|
|||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.layout-sider .sidebar {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
|
||||
ul.ant-menu-inline.ant-menu-root {
|
||||
height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.ant-menu-item {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
ul.ant-menu-inline-collapsed {
|
||||
height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
@dark: ~"(prefers-color-scheme: dark)";
|
||||
|
||||
|
|
@ -90,7 +112,17 @@ p {
|
|||
@media @dark {
|
||||
background-color: #28292c;
|
||||
}
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.01);
|
||||
box-shadow: 2px 0 8px rgba(29, 35, 41, 0.05);
|
||||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
.sidebar .logo {
|
||||
box-shadow: 0 1px 0 0 #e8e8e8;
|
||||
}
|
||||
|
||||
.ant-menu-inline .ant-menu-selected::after, .ant-menu-inline .ant-menu-item-selected::after {
|
||||
border-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media @dark {
|
||||
|
|
|
|||
|
|
@ -34,17 +34,14 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.header {
|
||||
height: 64px;
|
||||
padding: 0 20px 0 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: #28292c;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
border-bottom: unset;
|
||||
box-shadow: 1px 1px 0 0 #404040;
|
||||
}
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -70,7 +70,9 @@ export default {
|
|||
},
|
||||
visible(sidebars) {
|
||||
return sidebars.filter(c => {
|
||||
return c.meta === undefined || (c.meta.hiddenInSidebar === undefined || c.meta.hiddenInSidebar !== true)
|
||||
return c.meta === undefined ||
|
||||
(c.meta.hiddenInSidebar === undefined || c.meta.hiddenInSidebar !== true)
|
||||
&& (c.meta.power === undefined || this.$store.state.user.power === c.meta.power)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -78,22 +80,7 @@ export default {
|
|||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
|
||||
.ant-menu-inline {
|
||||
height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.ant-menu-item {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<style lang="less">
|
||||
.ant-layout-sider-collapsed .logo {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -248,6 +248,10 @@ export default {
|
|||
|
||||
<style lang="less">
|
||||
.ant-collapse {
|
||||
background: #ffffff;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: #28292c;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
|
||||
.ant-collapse-item {
|
||||
|
|
|
|||
|
|
@ -2939,6 +2939,10 @@ brace-expansion@^1.1.7:
|
|||
balanced-match "^1.0.0"
|
||||
concat-map "0.0.1"
|
||||
|
||||
brace@^0.11.0, "brace@https://github.com/nightwing/brace":
|
||||
version "0.11.1"
|
||||
resolved "https://github.com/nightwing/brace#46be64e49976bca45a9425addd056142c53960eb"
|
||||
|
||||
braces@^2.3.1, braces@^2.3.2:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.npm.taobao.org/braces/download/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
|
||||
|
|
@ -10421,6 +10425,13 @@ vue-template-es2015-compiler@^1.9.0:
|
|||
resolved "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
|
||||
integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
|
||||
|
||||
vue2-ace-editor@^0.0.15:
|
||||
version "0.0.15"
|
||||
resolved "https://registry.yarnpkg.com/vue2-ace-editor/-/vue2-ace-editor-0.0.15.tgz#569b208e54ae771ae1edd3b8902ac42f0edc74e3"
|
||||
integrity sha512-e3TR9OGXc71cGpvYcW068lNpRcFt3+OONCC81oxHL/0vwl/V3OgqnNMw2/RRolgQkO/CA5AjqVHWmANWKOtNnQ==
|
||||
dependencies:
|
||||
brace "^0.11.0"
|
||||
|
||||
vue@^2.6.11:
|
||||
version "2.6.12"
|
||||
resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1614614707443&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue