diff --git a/nezha-fronted/src/assets/css/font/iconfont.eot b/nezha-fronted/src/assets/css/font/iconfont.eot new file mode 100644 index 000000000..3714fcb06 Binary files /dev/null and b/nezha-fronted/src/assets/css/font/iconfont.eot differ diff --git a/nezha-fronted/src/assets/css/font/iconfont.svg b/nezha-fronted/src/assets/css/font/iconfont.svg new file mode 100644 index 000000000..b445cf02a --- /dev/null +++ b/nezha-fronted/src/assets/css/font/iconfont.svg @@ -0,0 +1,41 @@ + + + + + +Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/nezha-fronted/src/assets/css/font/iconfont.ttf b/nezha-fronted/src/assets/css/font/iconfont.ttf new file mode 100644 index 000000000..c23554392 Binary files /dev/null and b/nezha-fronted/src/assets/css/font/iconfont.ttf differ diff --git a/nezha-fronted/src/assets/css/font/iconfont.woff b/nezha-fronted/src/assets/css/font/iconfont.woff new file mode 100644 index 000000000..3ae03a932 Binary files /dev/null and b/nezha-fronted/src/assets/css/font/iconfont.woff differ diff --git a/nezha-fronted/src/assets/css/font/iconfont.woff2 b/nezha-fronted/src/assets/css/font/iconfont.woff2 new file mode 100644 index 000000000..cd45a6d94 Binary files /dev/null and b/nezha-fronted/src/assets/css/font/iconfont.woff2 differ diff --git a/nezha-fronted/src/assets/css/main.css b/nezha-fronted/src/assets/css/main.css index d027e59e5..da97c5906 100644 --- a/nezha-fronted/src/assets/css/main.css +++ b/nezha-fronted/src/assets/css/main.css @@ -55,20 +55,6 @@ html { .right-child-box .line-100 { background: #DCDFE6; } -/*侧滑文字*/ -.el-form-item .el-form-item__label{ - font-size: 10px; - text-align : left; -} -/*侧滑输入框高度*/ -.el-input .el-input__inner{ - line-height: 26px; - height: 26px; -} -/*侧滑输入框宽度*/ -.right-menu .el-form-item__content .el-input{ - width: 90%; -} /* begin--按钮组件*/ .nz-btn { border-radius: 4px; @@ -87,7 +73,7 @@ html { line-height: 18px; padding: 2px 12px; } -.nz-btn.nz-btn-style-normal { +.nz-btn.nz-btn-style-normal { /* 蓝色按钮 */ background-color: #16b; background-image: linear-gradient(#2d8cec, #16b); border: 1px solid #0b4075; @@ -95,7 +81,7 @@ html { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); } -.nz-btn.nz-btn-style-light { +.nz-btn.nz-btn-style-light { /* 浅色按钮 */ background-color: #dedede; background-image: linear-gradient(white,#dedede); border: 1px solid #b8b8b8; @@ -103,6 +89,12 @@ html { color: #444; text-shadow: 0 1px 1px rgba(255,255,255,.75); } +.nz-btn.nz-btn-size-small.nz-btn-style-square { /* 单图标无文字的情况下使用*/ + padding: 2px 5px; +} +.nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标无文字的情况下使用*/ + padding: 4px 6px; +} .nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) { background-image: linear-gradient(#dedede,#c5c5c5); } @@ -269,7 +261,7 @@ html { border-radius: 8px; box-shadow: 0 0 15px #ccc; background-color: white; - padding: 0 20px; + padding: 0 0 0 20px; } /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/ @@ -284,46 +276,47 @@ html { /* begin--右侧弹框--顶部按钮*/ .right-box-top-btns { text-align: center; -} -.right-box-top-btn { - text-align: center; - border-radius: 0 0 9px 9px; float: right; - color: #656565; - height: 30px; - font-size: 12px; - padding: 3px 8px 1px 8px; - border: 1px solid #aaaaaa; - border-top: none; - cursor: pointer; - margin-left: 20px; -} -.right-box-top-btn-full { - background-color: #656565; - border: 1px solid #656565; - border-top: none; - color: white; + padding-right: 20px; + padding-top: 5px; } /* end--右侧弹框--顶部按钮*/ /* begin--右侧弹框--内容*/ .right-box-title { - height: 30px; + height: 56px; line-height: 40px; text-align: left; display: inline-block; + font-weight: bold; +} +.right-box-form-box { + height: calc(100% - 63px); + width: 100%; +} +.right-box-form-box .el-scrollbar__wrap { + overflow-x: hidden !important; } .right-box-form { - margin-top: 30px; - height: 100%; + width: calc(100% - 20px); +} +.right-box-form .el-form-item { + margin-bottom: 15px; +} +.right-box-form .el-select { + width: 100%; +} +.right-box-form .el-form-item .el-form-item__label { + padding: 0; + font-size: 16px; + color: black; +} +.right-box-form .el-form-item__content { + line-height: 32px; } .right-box-form-row { margin-top: 16px; } -.right-box-form-label { - margin-bottom: 8px; - text-align: left; -} .right-box-form-content { line-height: 32px; text-align: left; @@ -336,8 +329,56 @@ html { color: #d0d4dC; font-size: 14px; line-height: 20px; - min-height: 64px; } +.right-box-form-param>label { + width: 100%; +} +.right-box-form-btns { + display: inline-block; + float: right; +} +/* start--param*/ +.param-box { + border: 1px solid #DCDFE6; + border-radius: 4px; + padding: 0 10px; +} +.param-box-endpoint { + height: 325px; +} +.param-box-module { + min-height: 225px; +} +.param-box-row { + padding: 7px 0 0 0; + position: relative; +} +.param-box-row:last-of-type { + padding-bottom: 7px; +} +.param-box-row>div { + display: inline-block; +} +.param-box-row-key, .param-box-row-value { + display: inline-block; + width: 43%; +} +.param-box-row-eq { + display: inline-block; + width: 22px; + text-align: center; + height: 32px; + line-height: 32px; + color: #c4c7cF; +} +.param-box-row-symbol { + display: inline-block; + padding-left: 3px; + font-size: 12px; + color: #DCDFE6; + cursor: pointer; +} +/* end--param*/ .right-box-form-content .el-select { width: 100%; } @@ -419,9 +460,10 @@ html { font-size: 13px; } /* end--endpoint->子弹框asset搜索框前缀和后缀*/ + /* begin--自定义可编辑的el-select下拉框样式*/ -.config-dropdown { - width: 520px; +.config-dropdown { /* 若宽度不合适，自行增加新类覆盖宽度 */ + width: 500px; } .config-dropdown-btn { display: inline-block; diff --git a/nezha-fronted/src/assets/css/nzIcon.css b/nezha-fronted/src/assets/css/nzIcon.css new file mode 100644 index 000000000..6a58dc492 --- /dev/null +++ b/nezha-fronted/src/assets/css/nzIcon.css @@ -0,0 +1,37 @@ +@font-face {font-family: "nz-icon"; + src: url('font/iconfont.eot?t=1577436728098'); /* IE9 */ + src: url('font/iconfont.eot?t=1577436728098#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAU8AAsAAAAAC4wAAATwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqJbIgeATYCJAMYCw4ABCAFhG0HahvmCciemjwpESGwDZgsrYyxwfNTPDyule8nmexe5koEDoglsCWSVRXmXJWo8VVVQELv0Hv6l83JUA1896R0MHKXQcWlTes0e4D/YH9C+AQ8dfPHOq8N+N7k6As4oLHOA3nxhslYhnWgKyywH+6XepF4dJrPvh3IEZ9QZi0acJQ4Gmg3Fk0sCqipgWDOW2TXHqGDCTSLjUAdLqvhQIBCUQRUPBFNOhAQMio5lDDU1JQNy2ZqCegM0yd0GfDZvv34KykCSLpMWfH8vVIjKPhRvfW9p/yT2yYKiNqzg9qMjI2AQrxJdT7j7co32sqW9h58nASMG0rKj6fPmmfja/025v9/QlLFG8bVf3lkRSckogLlOI4/rehWUKQjZH40CIUfI0LHX40Q/PeNEmhri+1zgfgCpAHgN+6uyDpV3TskKKhM9YlWqIM0hkHh4/2FdMD08dyA09EAnIMid8FIDqB560dGcbn8wOOlAxHDDz6XDkb5OGZv/xiewtEb2Gg+jxt0omwQ5ngGHc7kEbc7DgFuYgTi8LEUjsZHsjjM74nHFL9Wi3l0svPui+99/J0H3b7xua//hrtlp2+4/k63n9J/nHL+dvXD3BTzdoT/x+0GFep1AxN7iuLIzXjftVc6Q8GulYdvxPms2sfN2zbXZ/nSK+fvDN+Pa+P1PMW8bUzJM3gxKekXDGjQi+4+gxCz4qWiT+0qptFqoDWcvgPoaCDrVb3LrrxHwzla2vxjym1a366F+Xmr0VcYxDMt+4Zso+cFeHPCr2VBfLJC0Vbc/lhWpJ1Kql5/5VBpW1B+myLl8JUDaRWXVFL0Y8UFteXnk/LmE8waqCK7goWVHMocMya3qfQEUe0Sgo9nmSg466ZcbqU6p2ZxXCNltVKNKs/kGz38nNyGigpfX13dYF8dTB5hu4L9IcoQ2OXqV7gvBvnfU7bTr7gn3JXsN5+luAKoEnJPyQFLcqa1a5Z7z0crjHD1DvV8zXb1sfkzMH3n8ezT+M8aK9Tz0wvTvhXLKqbWTW1aU/+nYnp397GByCvPv3rAlNYZ8EifGMh5+x9JGTC1pZ+nb7zwsTy8bVH5otbI4s+r6svry5bhVvwLt02Cqt7hxdcVx4y+0CVmUNpTeRerorySvDmS+4bfd0t/E4SPXGvavqR9RnOMAi5ND7/Dj+IYVY8RTAAwKt/I523dWZXvB+6Udu8pqngr5hu5/HIZmvNV9IWc8E0+j5CkvPBtVxFEv0VX6QCAcouW4KZaeJHOcVtYyl29eI+ukNA0/Aze6Z62pZ5VWum/U8/yIRlYBNnQSnTBb4RObydUQ/ug2aB8894MEm9RxrDeTAzCVHshmewrZFNdQRf8E+jM9haqqeENzdVQ77C3OkS6WCI6mRihfiwUDU6HoFlk2qlsIqZem04KSmwaJpJHjMBENiGaKScOIrWximeUKUmWBShITjssww5HbDYndElOCzHIrFmWXVlarZB2QazBaQe0QySEjowwgvTGgkQGTg6COb6Mjt18E8Kkl42OlNOnwI4REg9x7lAiVkIJdLnSUarPsdR7jGKSREZxASRQ5U52UBmyEzY16QS50uezIAxkLHONuEsWLRpLKKtk+1fbj/IMaJS1aqTIUaKLGgP92n/Ebo+ZjDOLgYLOYbL26sTE4LGiwzSaOMb2jtU5EkPGmZ1BnS+xAw1jAQA=') format('woff2'), + url('font/iconfont.woff?t=1577436728098') format('woff'), + url('font/iconfont.ttf?t=1577436728098') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ + url('font/iconfont.svg?t=1577436728098#iconfont') format('svg'); /* iOS 4.1- */ +} + +.nz-icon { + font-family: "nz-icon" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.nz-icon-gear:before { + content: "\eb8d"; +} + +.nz-icon-minus-square:before { + content: "\ed1b"; +} + +.nz-icon-lang-en:before { + content: "\e66d"; +} + +.nz-icon-lang-cn:before { + content: "\e66f"; +} + +.nz-icon-python:before { + content: "\e674"; +} + diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue index 25c9a2799..abcfde494 100644 --- a/nezha-fronted/src/components/common/header.vue +++ b/nezha-fronted/src/components/common/header.vue @@ -23,7 +23,7 @@ - + @@ -43,85 +43,86 @@
{{item.name}} -
+
- - - + @@ -303,7 +305,15 @@ this.editProject = {id: '', name: '', remark: ''}; } else if (item.type == 2) { this.$refs.moduleBox.show(true); - this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []}; + this.editModule = { + id: '', + name: '', + project: this.$store.state.currentProject, + port: '', + path: '', + param: '', + paramObj: [] + }; } else if (item.type == 3) { this.$refs.addEndpointBox.show(true); this.$refs.addEndpointBox.clearEndpoints(); @@ -359,7 +369,7 @@ duration: 2000 }) this.$store.state.flushDataSign = true - }else{ + } else { this.$notify({ message: h('i', {style: 'color: teal'}, res.msg), duration: 2000 @@ -446,7 +456,7 @@ } }, watch: { - getIdcData:{ + getIdcData: { handler(newVal, oldVal) { this.getAssetData() }, @@ -463,48 +473,60 @@ diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index e6474e7a4..758f99f7c 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -38,7 +38,15 @@ const en = { title:'MetricPreview', } }, + validate: { //校验规则 + required: 'Required', + number: 'Must be a number', + config: { + account: { + } + } + }, search: { searchTip: 'Press Enter or click to search', recentSearch: 'Recent Searches', @@ -257,7 +265,7 @@ const en = { severity: "Severity", description: "Desc", summary: "Summary", - startAt: "Time", + startAt: "Start Time", endAt: "End Time", list: { //表头 diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue index 294ef73f0..2ba4cc534 100644 --- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue +++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue @@ -3,31 +3,18 @@
-
-
- -
- {{$t('overall.esc')}} -
-
-
- -
- {{$t('overall.edit')}} -
-
-
- -
- {{$t('overall.save')}} - {{$t('overall.edit')}} -
-
-
- -
- {{$t('overall.delete')}} -
+ + + +
@@ -36,6 +23,10 @@ +
@@ -124,12 +115,6 @@
- -
-
{{$t('overall.cancel')}}
{{$t('overall.save')}}
-
- -
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue index 5e57019e6..4ed29b077 100644 --- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue +++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue @@ -3,11 +3,21 @@
-
+ + + + +
@@ -29,78 +39,131 @@ -
- -
-
{{$t("project.project.project")}}
-
+ + + -
-
- -
-
{{$t("project.module.moduleName")}}
-
+ + -
-
- -
-
{{$t("project.module.description")}}
-
+ + + +
+ {{$t('project.module.tip.defaultEndpointSet')}} +
+ {{$t('project.module.tip.relation')}}
-
- -
-
-
- {{$t('project.module.tip.defaultEndpointSet')}} -
- {{$t('project.module.tip.relation')}} -
-
-
- -
-
{{$t("project.endpoint.port")}}
-
- -
-
- -
-
{{$t("project.endpoint.path")}}
-
+ + + + -
-
- -
-
- {{$t("project.endpoint.param")}} - {{$t('overall.add')}} - {{$t('overall.clearAll')}} -
-
+ + +
- + + + = - - + + + +
+ + + + + -
+
@@ -119,6 +182,17 @@ show: false, title: '' }, + rules: { + name: [ + {required: true, message: this.$t('validate.required'), trigger: 'blur'} + ], + project: [ + {required: true, message: this.$t('validate.required'), trigger: 'blur'} + ], + port: [ + {type: 'number', message: this.$t('validate.number'), trigger: 'blur'} + ], + }, projectList: [], } }, @@ -135,28 +209,35 @@ /*保存*/ save() { this.module.param = this.paramToJson(this.module.paramObj); - if (this.module.id) { - this.$put('module', this.module).then(response => { - if (response.code === 200) { - this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); - this.$emit("reload"); - this.rightBox.show = false; + this.$refs.moduleForm.validate((valid) => { + if (valid) { + if (this.module.id) { + this.$put('module', this.module).then(response => { + if (response.code === 200) { + this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); + this.$emit("reload"); + this.rightBox.show = false; + } else { + this.$message.error(response.msg); + } + }); } else { - this.$message.error(response.msg); + this.module.projectId = this.module.project.id; + this.$post('module', this.module).then(response => { + if (response.code === 200) { + this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); + this.$emit("reload"); + this.rightBox.show = false; + } else { + this.$message.error(response.msg); + } + }); } - }); - } else { - this.module.projectId = this.module.project.id; - this.$post('module', this.module).then(response => { - if (response.code === 200) { - this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); - this.$emit("reload"); - this.rightBox.show = false; - } else { - this.$message.error(response.msg); - } - }); - } + } else { + console.log('error submit!!'); + return false; + } + }); }, /*删除*/ @@ -216,7 +297,7 @@ paramToJson: function(param) { let tempParam = {}; for (let i = 0; i < param.length; i++) { - eval('tempParam.' + param[i].key + '="' + param[i].value + '"'); + eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"'); } let jsonString = JSON.stringify(tempParam); if (jsonString == '{}') { @@ -245,78 +326,4 @@ diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue index 13f31bb9d..af56a97a7 100644 --- a/nezha-fronted/src/components/common/rightBox/projectBox.vue +++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue @@ -3,39 +3,31 @@
-
-
- -
- {{$t('overall.esc')}} -
-
-
- -
- {{$t('overall.save')}} -
-
-
- -
- {{$t('overall.delete')}} -
+ + +
{{rightBox.title}}
- - - - - - - - - + + + + + + + + + + -
-
{{$t('config.account.language')}}
-
- English - 中文 - +
{{$t('config.account.enable')}}
@@ -276,22 +276,19 @@ export default { label: this.$t("config.account.account"), prop: 'username', show: true, - width: 240 }, { label: 'E-mail', prop: 'email', show: true, - width: 240 - }, { + }, /*{ label: this.$t("config.account.language"), prop: 'lang', show: true, width: 200 - }, { + },*/ { label: this.$t('config.account.receiver'), prop: 'receiver', show: false, - width: 240 }, { label: this.$t('config.account.createTime'), prop: 'createTime', diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue index 11cdf5875..9106ca778 100644 --- a/nezha-fronted/src/components/page/config/promServer.vue +++ b/nezha-fronted/src/components/page/config/promServer.vue @@ -65,7 +65,7 @@
{{$t('config.config')}}
-
{{$t('config.account.accountList')}}
+
{{$t('config.account.account')}}
{{$t('config.promServer.promServerList')}}
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue index efef9c44e..403afa88b 100644 --- a/nezha-fronted/src/components/page/project/project.vue +++ b/nezha-fronted/src/components/page/project/project.vue @@ -63,7 +63,7 @@ -
+