Skip to content
This repository was archived by the owner on Apr 17, 2023. It is now read-only.

Commit 4c1c8b8

Browse files
author
maguohao2018
committed
feat(notice): 消息通知页面优化
1 parent 6bbe6d1 commit 4c1c8b8

7 files changed

Lines changed: 311 additions & 7 deletions

File tree

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@fortawesome/vue-fontawesome": "^0.1.9",
1818
"axios": "^0.19.0",
1919
"core-js": "^3.4.3",
20+
"diffable-html": "^4.0.0",
2021
"echarts": "^4.6.0",
2122
"element-ui": "^2.13.0",
2223
"js-base64": "^3.4.4",

‎frontend/src/business/components/common/components/RsCodeEdit.vue‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<template>
2+
<editor v-model="formatData" :lang="mode" @init="editorInit" :theme="theme" :height="height"/>
3+
</template>
4+
5+
<script>
6+
import {formatJson, formatXml} from "../../../../common/js/format-utils";
7+
import toDiffableHtml from 'diffable-html';
8+
/* eslint-disable */
9+
export default {
10+
name: "RsCodeEdit",
11+
components: { editor: require('vue2-ace-editor')},
12+
data() {
13+
return {
14+
formatData: ''
15+
}
16+
},
17+
props: {
18+
height: [String, Number],
19+
data: {
20+
type: String
21+
},
22+
theme: {
23+
type: String,
24+
default() {
25+
return 'chrome'
26+
}
27+
},
28+
init: {
29+
type: Function
30+
},
31+
enableFormat: {
32+
type: Boolean,
33+
default() {
34+
return true;
35+
}
36+
},
37+
readOnly: {
38+
type: Boolean,
39+
default() {
40+
return false;
41+
}
42+
},
43+
mode: {
44+
type: String,
45+
default() {
46+
return 'text';
47+
}
48+
},
49+
modes: {
50+
type: Array,
51+
default() {
52+
return ['text', 'json', 'xml', 'html'];
53+
}
54+
}
55+
},
56+
mounted() {
57+
if (!this.data) {
58+
this.formatData = "";
59+
}
60+
this.format();
61+
},
62+
watch: {
63+
formatData() {
64+
this.$emit('update:data', this.formatData);
65+
},
66+
mode() {
67+
this.format();
68+
}
69+
},
70+
methods: {
71+
editorInit: function (editor) {
72+
require('brace/ext/language_tools') //language extension prerequsite...
73+
this.modes.forEach(mode => {
74+
require('brace/mode/' + mode); //language
75+
});
76+
require('brace/theme/' + this.theme)
77+
require('brace/snippets/javascript') //snippet
78+
if (this.readOnly) {
79+
editor.setReadOnly(true);
80+
}
81+
if (this.init) {
82+
this.init(editor);
83+
}
84+
},
85+
format() {
86+
if (this.enableFormat) {
87+
if (this.data) {
88+
switch (this.mode) {
89+
case 'json':
90+
this.formatData = formatJson(this.data);
91+
break;
92+
case 'html':
93+
this.formatData = toDiffableHtml(this.data);
94+
break;
95+
case 'xml':
96+
this.formatData = formatXml(this.data);
97+
break;
98+
default:
99+
this.formatData = this.data;
100+
}
101+
}
102+
} else {
103+
this.formatData = this.data;
104+
}
105+
}
106+
}
107+
}
108+
</script>
109+
110+
<style scoped>
111+
112+
</style>

‎frontend/src/business/components/settings/system/ResourceNotification.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
<el-button icon="el-icon-circle-plus-outline" plain size="mini" @click="handleAddTaskModel">
77
{{ $t('system_parameter_setting.message.create_new_notification') }}
88
</el-button>
9-
<el-popover placement="right-end" title="示例" width="400" trigger="click" :content="content">
9+
<el-popover placement="right-end" title="示例" width="400" trigger="click">
10+
<rs-code-edit :read-only="true" height="400px" :data.sync="content" :modes="modes" :mode="'html'"/>
1011
<el-button icon="el-icon-warning" plain size="mini" slot="reference">
1112
{{ $t('system_parameter_setting.message.mail_template_example') }}
1213
</el-button>
1314
</el-popover>
1415
</el-col>
1516
</el-row>
1617

17-
1818
<el-row>
1919
<el-col :span="24">
2020
<el-table :data="resourceTask" class="tb-edit" border :cell-style="rowClass" :header-cell-style="headClass">
@@ -64,11 +64,13 @@
6464
</template>
6565

6666
<script>
67+
import RsCodeEdit from "@/business/components/common/components/RsCodeEdit";
6768
6869
/* eslint-disable */
6970
export default {
7071
name: "ResourceNotification",
7172
components: {
73+
RsCodeEdit
7274
},
7375
props: {
7476
receiverOptions: {
@@ -77,6 +79,7 @@ export default {
7779
},
7880
data() {
7981
return {
82+
modes: ['text', 'html'],
8083
content: '<!DOCTYPE html>\n' +
8184
'<html lang="en">\n' +
8285
'<head>\n' +

‎frontend/src/common/js/format-utils.js‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
/* eslint-disable */
2+
export function formatJson (json) {
3+
let i = 0,
4+
il = 0,
5+
tab = " ",
6+
newJson = "",
7+
indentLevel = 0,
8+
inString = false,
9+
currentChar = null;
10+
let flag = false;
11+
for (i = 0, il = json.length; i < il; i += 1) {
12+
currentChar = json.charAt(i);
13+
switch (currentChar) {
14+
case '{':
15+
if (i != 0 && json.charAt(i - 1) === '$') {
16+
newJson += currentChar;
17+
flag = true;
18+
} else if (!inString) {
19+
newJson += currentChar + "\n" + repeat(tab, indentLevel + 1);
20+
indentLevel += 1
21+
} else {
22+
newJson += currentChar
23+
}
24+
break;
25+
case '[':
26+
if (!inString) {
27+
newJson += currentChar + "\n" + repeat(tab, indentLevel + 1);
28+
indentLevel += 1
29+
} else {
30+
newJson += currentChar
31+
}
32+
break;
33+
case '}':
34+
if (flag) {
35+
newJson += currentChar;
36+
flag = false;
37+
} else if (!inString) {
38+
indentLevel -= 1;
39+
newJson += "\n" + repeat(tab, indentLevel) + currentChar
40+
} else {
41+
newJson += currentChar
42+
}
43+
break;
44+
case ']':
45+
if (!inString) {
46+
indentLevel -= 1;
47+
newJson += "\n" + repeat(tab, indentLevel) + currentChar
48+
} else {
49+
newJson += currentChar
50+
}
51+
break;
52+
case ',':
53+
if (!inString) {
54+
newJson += ",\n" + repeat(tab, indentLevel)
55+
} else {
56+
newJson += currentChar
57+
}
58+
break;
59+
case ':':
60+
if (!inString) {
61+
newJson += ": "
62+
} else {
63+
newJson += currentChar
64+
}
65+
break;
66+
case ' ':
67+
case "\n":
68+
case "\t":
69+
if (inString) {
70+
newJson += currentChar
71+
}
72+
break;
73+
case '"':
74+
if (i > 0 && json.charAt(i - 1) !== '\\') {
75+
inString = !inString
76+
}
77+
newJson += currentChar;
78+
break;
79+
default:
80+
newJson += currentChar;
81+
break
82+
}
83+
}
84+
return newJson;
85+
}
86+
87+
function repeat(s, count) {
88+
return new Array(count + 1).join(s)
89+
}
90+
91+
92+
93+
export function formatXml(text) {
94+
//去掉多余的空格
95+
text = '\n' + text.replace(/(<\w+)(\s.*?>)/g, function ($0, name, props) {
96+
return name + ' ' + props.replace(/\s+(\w+=)/g, " $1");
97+
}).replace(/>\s*?</g, ">\n<");
98+
//把注释编码
99+
text = text.replace(/\n/g, '\r').replace(/<!--(.+?)-->/g, function ($0, text) {
100+
var ret = '<!--' + escape(text) + '-->';
101+
//alert(ret);
102+
return ret;
103+
}).replace(/\r/g, '\n');
104+
//调整格式
105+
var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/mg;
106+
var nodeStack = [];
107+
var output = text.replace(rgx, function ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
108+
var isClosed = (isCloseFull1 == '/') || (isCloseFull2 == '/' ) || (isFull1 == '/') || (isFull2 == '/');
109+
//alert([all,isClosed].join('='));
110+
var prefix = '';
111+
if (isBegin == '!') {
112+
prefix = getPrefix(nodeStack.length);
113+
}
114+
else {
115+
if (isBegin != '/') {
116+
prefix = getPrefix(nodeStack.length);
117+
if (!isClosed) {
118+
nodeStack.push(name);
119+
}
120+
}
121+
else {
122+
nodeStack.pop();
123+
prefix = getPrefix(nodeStack.length);
124+
}
125+
}
126+
var ret = '\n' + prefix + all;
127+
return ret;
128+
});
129+
var prefixSpace = -1;
130+
var outputText = output.substring(1);
131+
//alert(outputText);
132+
//把注释还原并解码，调格式
133+
outputText = outputText.replace(/\n/g, '\r').replace(/(\s*)<!--(.+?)-->/g, function ($0, prefix, text) {
134+
//alert(['[',prefix,']=',prefix.length].join(''));
135+
if (prefix.charAt(0) == '\r')
136+
prefix = prefix.substring(1);
137+
text = unescape(text).replace(/\r/g, '\n');
138+
var ret = '\n' + prefix + '<!--' + text.replace(/^\s*/mg, prefix) + '-->';
139+
//alert(ret);
140+
return ret;
141+
});
142+
return outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n');
143+
}
144+
145+
/**
146+
* @param time 时间
147+
* @param cFormat 格式
148+
* @returns {string|null} 字符串
149+
* @example formatTime('2018-1-29', '{y}/{m}/{d} {h}:{i}:{s}') // -> 2018/01/29 00:00:00
150+
*/
151+
export function formatTime(time, cFormat) {
152+
if (arguments.length === 0) return null;
153+
if ((time + '').length === 10) {
154+
time = +time * 1000;
155+
}
156+
let format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}', date;
157+
if (typeof time === 'object') {
158+
date = time;
159+
} else {
160+
date = new Date(time);
161+
}
162+
let formatObj = {
163+
y: date.getFullYear(),
164+
m: date.getMonth() + 1,
165+
d: date.getDate(),
166+
h: date.getHours(),
167+
i: date.getMinutes(),
168+
s: date.getSeconds(),
169+
a: date.getDay()
170+
};
171+
return format.replace(/{([ymdhisa])+}/g, (result, key) => {
172+
let value = formatObj[key];
173+
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
174+
if (result.length > 0 && value < 10) {
175+
value = '0' + value;
176+
}
177+
return value || 0;
178+
});
179+
}
180+
181+
function getPrefix(prefixIndex) {
182+
var span = ' ';
183+
var output = [];
184+
for (var i = 0; i < prefixIndex; ++i) {
185+
output.push(span);
186+
}
187+
return output.join('');
188+
}

‎frontend/src/i18n/en-US.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -342,7 +342,7 @@ export default {
342342
schedule: {
343343
input_email:'Please enter your email account',
344344
event:'Event',
345-
receiving_mode:'Mailbox',
345+
receiving_mode:'Receiving method',
346346
receiver:'Receiver',
347347
operation:'Operation',
348348
task_notification:'Task notification',

‎frontend/src/i18n/zh-CN.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ export default {
292292
trigger_action: '触发操作',
293293
email_notification: '邮件通知',
294294
end_scan: '扫描结束',
295-
notes: '邮件配置，只有云账号一键扫描可以收到安全合规扫描通知!',
295+
notes: '邮件配置，只有云账号一键扫描可以收到安全合规扫描通知！',
296296
task_notification: '安全合规规则扫描资源通知',
297297
create_new_notification: '创建新通知',
298298
mail_template_example: '邮件模版',
@@ -342,7 +342,7 @@ export default {
342342
schedule: {
343343
input_email: '请输入邮箱账号',
344344
event: '事件',
345-
receiving_mode: '邮箱',
345+
receiving_mode: '接收方式',
346346
receiver: '接收人',
347347
operation: '操作',
348348
task_notification: '任务通知',

‎frontend/src/i18n/zh-TW.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ export default {
292292
trigger_action: '觸發操作',
293293
email_notification: '郵件通知',
294294
end_scan: '掃描結束',
295-
notes: '郵件配置，只有云賬號一鍵掃描可以收到安全合規掃描通知!',
295+
notes: '郵件配置，只有云賬號一鍵掃描可以收到安全合規掃描通知！',
296296
task_notification: '安全合規規則掃描資源通知',
297297
create_new_notification: '創建新通知',
298298
mail_template_example: '郵件模版',
@@ -342,7 +342,7 @@ export default {
342342
schedule: {
343343
input_email: '請輸入郵箱賬號',
344344
event: '事件',
345-
receiving_mode: '郵箱',
345+
receiving_mode: '接收方式',
346346
receiver: '接收人',
347347
operation: '操作',
348348
task_notification: '任務通知',

0 commit comments

Comments
 (0)