|
|
@@ -41,9 +41,9 @@ new Vue({
|
|
|
methods: {
|
|
|
format: function () {
|
|
|
if (!this.sourceContent.trim()) {
|
|
|
- return alert('内容为空,不需要美化处理!');
|
|
|
+ return this.toast('内容为空,不需要美化处理!', 'warning');
|
|
|
}else{
|
|
|
- this.toast('格式化进行中...');
|
|
|
+ this.toast('格式化进行中...', 'info');
|
|
|
}
|
|
|
|
|
|
let beauty = (result) => {
|
|
|
@@ -55,51 +55,71 @@ new Vue({
|
|
|
this.$nextTick(() => {
|
|
|
Prism.highlightAll();
|
|
|
this.showCopyBtn = true;
|
|
|
- this.toast('格式化完成!');
|
|
|
+ this.toast('格式化完成!', 'success');
|
|
|
});
|
|
|
};
|
|
|
|
|
|
switch (this.selectedType) {
|
|
|
case 'Javascript':
|
|
|
- let opts = {
|
|
|
- brace_style: "collapse",
|
|
|
- break_chained_methods: false,
|
|
|
- indent_char: " ",
|
|
|
- indent_scripts: "keep",
|
|
|
- indent_size: "4",
|
|
|
- keep_array_indentation: true,
|
|
|
- preserve_newlines: true,
|
|
|
- space_after_anon_function: true,
|
|
|
- space_before_conditional: true,
|
|
|
- unescape_strings: false,
|
|
|
- wrap_line_length: "120",
|
|
|
- "max_preserve_newlines": "5",
|
|
|
- "jslint_happy": false,
|
|
|
- "end_with_newline": false,
|
|
|
- "indent_inner_html": false,
|
|
|
- "comma_first": false,
|
|
|
- "e4x": false
|
|
|
- };
|
|
|
- beauty(js_beautify(this.sourceContent, opts));
|
|
|
+ try {
|
|
|
+ let opts = {
|
|
|
+ brace_style: "collapse",
|
|
|
+ break_chained_methods: false,
|
|
|
+ indent_char: " ",
|
|
|
+ indent_scripts: "keep",
|
|
|
+ indent_size: "4",
|
|
|
+ keep_array_indentation: true,
|
|
|
+ preserve_newlines: true,
|
|
|
+ space_after_anon_function: true,
|
|
|
+ space_before_conditional: true,
|
|
|
+ unescape_strings: false,
|
|
|
+ wrap_line_length: "120",
|
|
|
+ "max_preserve_newlines": "5",
|
|
|
+ "jslint_happy": false,
|
|
|
+ "end_with_newline": false,
|
|
|
+ "indent_inner_html": false,
|
|
|
+ "comma_first": false,
|
|
|
+ "e4x": false
|
|
|
+ };
|
|
|
+ beauty(js_beautify(this.sourceContent, opts));
|
|
|
+ } catch (error) {
|
|
|
+ this.toast('JavaScript格式化失败,请检查代码语法!', 'error');
|
|
|
+ }
|
|
|
break;
|
|
|
case 'CSS':
|
|
|
- css_beautify(this.sourceContent, {}, result => beauty(result));
|
|
|
+ try {
|
|
|
+ css_beautify(this.sourceContent, {}, result => beauty(result));
|
|
|
+ } catch (error) {
|
|
|
+ this.toast('CSS格式化失败,请检查代码语法!', 'error');
|
|
|
+ }
|
|
|
break;
|
|
|
case 'HTML':
|
|
|
- beauty(html_beautify(this.sourceContent,{indent_size:4}));
|
|
|
+ try {
|
|
|
+ beauty(html_beautify(this.sourceContent,{indent_size:4}));
|
|
|
+ } catch (error) {
|
|
|
+ this.toast('HTML格式化失败,请检查代码语法!', 'error');
|
|
|
+ }
|
|
|
break;
|
|
|
case 'SQL':
|
|
|
- beauty(vkbeautify.sql(this.sourceContent, 4));
|
|
|
+ try {
|
|
|
+ beauty(vkbeautify.sql(this.sourceContent, 4));
|
|
|
+ } catch (error) {
|
|
|
+ this.toast('SQL格式化失败,请检查代码语法!', 'error');
|
|
|
+ }
|
|
|
break;
|
|
|
default:
|
|
|
- beauty(vkbeautify.xml(this.sourceContent));
|
|
|
+ try {
|
|
|
+ beauty(vkbeautify.xml(this.sourceContent));
|
|
|
+ } catch (error) {
|
|
|
+ this.toast('XML格式化失败,请检查代码语法!', 'error');
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
copy: function () {
|
|
|
|
|
|
- let _copyToClipboard = function (text) {
|
|
|
+ let _copyToClipboard = (text) => {
|
|
|
let input = document.createElement('textarea');
|
|
|
input.style.position = 'fixed';
|
|
|
input.style.opacity = 0;
|
|
|
@@ -109,7 +129,7 @@ new Vue({
|
|
|
document.execCommand('Copy');
|
|
|
document.body.removeChild(input);
|
|
|
|
|
|
- alert('复制成功,随处粘贴可用!')
|
|
|
+ this.toast('复制成功,随处粘贴可用!', 'success')
|
|
|
};
|
|
|
|
|
|
let txt = this.$refs.jfContentBox.textContent;
|
|
|
@@ -117,26 +137,129 @@ new Vue({
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
- * 自动消失的Alert弹窗
|
|
|
- * @param content
|
|
|
+ * 自动消失的通知弹窗,仿Notification效果
|
|
|
+ * @param content 通知内容
|
|
|
+ * @param type 通知类型:success、error、warning、info(默认)
|
|
|
*/
|
|
|
- toast (content) {
|
|
|
+ toast (content, type = 'info') {
|
|
|
window.clearTimeout(window.feHelperAlertMsgTid);
|
|
|
let elAlertMsg = document.querySelector("#fehelper_alertmsg");
|
|
|
+
|
|
|
+ // 根据类型配置样式
|
|
|
+ const typeConfig = {
|
|
|
+ info: {
|
|
|
+ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
|
+ borderColor: '#4ade80',
|
|
|
+ icon: 'ℹ'
|
|
|
+ },
|
|
|
+ success: {
|
|
|
+ background: 'linear-gradient(135deg, #4ade80 0%, #16a34a 100%)',
|
|
|
+ borderColor: '#22c55e',
|
|
|
+ icon: '✓'
|
|
|
+ },
|
|
|
+ error: {
|
|
|
+ background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
|
|
|
+ borderColor: '#f87171',
|
|
|
+ icon: '✕'
|
|
|
+ },
|
|
|
+ warning: {
|
|
|
+ background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
|
|
|
+ borderColor: '#fbbf24',
|
|
|
+ icon: '⚠'
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const config = typeConfig[type] || typeConfig.info;
|
|
|
+
|
|
|
if (!elAlertMsg) {
|
|
|
let elWrapper = document.createElement('div');
|
|
|
- elWrapper.innerHTML = '<div id="fehelper_alertmsg" style="position:fixed;bottom:5px;left:5px;z-index:1000000">' +
|
|
|
- '<p style="background:#000;display:inline-block;color:#fff;text-align:center;' +
|
|
|
- 'padding:10px 10px;margin:0 auto;font-size:14px;border-radius:4px;">' + content + '</p></div>';
|
|
|
- elAlertMsg = elWrapper.childNodes[0];
|
|
|
+ elWrapper.innerHTML = `
|
|
|
+ <div id="fehelper_alertmsg" style="
|
|
|
+ position: fixed;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ z-index: 10000000;
|
|
|
+ min-width: 300px;
|
|
|
+ max-width: 400px;
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateX(100%);
|
|
|
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
+ ">
|
|
|
+ <div class="toast-inner" style="
|
|
|
+ background: ${config.background};
|
|
|
+ color: #fff;
|
|
|
+ padding: 16px 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 1.4;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ ">
|
|
|
+ <div class="toast-border" style="
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 4px;
|
|
|
+ height: 100%;
|
|
|
+ background: ${config.borderColor};
|
|
|
+ "></div>
|
|
|
+ <div style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ ">
|
|
|
+ <div class="toast-icon" style="
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ ">${config.icon}</div>
|
|
|
+ <div class="toast-content" style="flex: 1;">${content}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ elAlertMsg = elWrapper.childNodes[1]; // 第一个是文本节点,第二个才是div
|
|
|
document.body.appendChild(elAlertMsg);
|
|
|
+
|
|
|
+ // 触发动画
|
|
|
+ setTimeout(() => {
|
|
|
+ elAlertMsg.style.opacity = '1';
|
|
|
+ elAlertMsg.style.transform = 'translateX(0)';
|
|
|
+ }, 10);
|
|
|
} else {
|
|
|
- elAlertMsg.querySelector('p').innerHTML = content;
|
|
|
+ // 更新现有通知的内容和样式
|
|
|
+ const toastInner = elAlertMsg.querySelector('.toast-inner');
|
|
|
+ const toastBorder = elAlertMsg.querySelector('.toast-border');
|
|
|
+ const toastIcon = elAlertMsg.querySelector('.toast-icon');
|
|
|
+ const toastContent = elAlertMsg.querySelector('.toast-content');
|
|
|
+
|
|
|
+ toastInner.style.background = config.background;
|
|
|
+ toastBorder.style.background = config.borderColor;
|
|
|
+ toastIcon.innerHTML = config.icon;
|
|
|
+ toastContent.innerHTML = content;
|
|
|
+
|
|
|
elAlertMsg.style.display = 'block';
|
|
|
+ elAlertMsg.style.opacity = '1';
|
|
|
+ elAlertMsg.style.transform = 'translateX(0)';
|
|
|
}
|
|
|
|
|
|
window.feHelperAlertMsgTid = window.setTimeout(function () {
|
|
|
- elAlertMsg.style.display = 'none';
|
|
|
+ // 淡出动画
|
|
|
+ elAlertMsg.style.opacity = '0';
|
|
|
+ elAlertMsg.style.transform = 'translateX(100%)';
|
|
|
+
|
|
|
+ // 动画完成后隐藏
|
|
|
+ setTimeout(() => {
|
|
|
+ elAlertMsg.style.display = 'none';
|
|
|
+ }, 300);
|
|
|
}, 3000);
|
|
|
},
|
|
|
|
|
|
@@ -154,6 +277,7 @@ new Vue({
|
|
|
|
|
|
this.sourceContent = this.examples[type];
|
|
|
this.selectedType = typeMap[type];
|
|
|
+ this.toast(`已加载${typeMap[type]}示例代码`, 'info');
|
|
|
this.$nextTick(() => {
|
|
|
this.format();
|
|
|
});
|