mirror of
https://gitee.com/la-vie/console-pro-free.git
synced 2024-12-26 03:39:18 +00:00
477 lines
16 KiB
JavaScript
477 lines
16 KiB
JavaScript
|
const clipboard = require(Editor.url('packages://console-pro/node_modules/clipboard/dist/clipboard.js'))
|
|||
|
|
const axios = require(Editor.url('packages://console-pro/node_modules/axios/dist/axios.js'))
|
|||
|
|
const packageJSON = require(Editor.url('packages://console-pro/package.json'))
|
|||
|
|
const childProcess = require('child_process')
|
|||
|
|
const path = require('path')
|
|||
|
|
const fs = require('fs')
|
|||
|
|
const os = require('os')
|
|||
|
|
|
|||
|
|
|
|||
|
|
const translate = (key) => Editor.T(`${packageJSON.name}.${key}`)
|
|||
|
|
var vm = null
|
|||
|
|
|
|||
|
|
// panel/index.js, this filename needs to match the one registered in package.json
|
|||
|
|
Editor.Panel.extend({
|
|||
|
|
// css style for panel
|
|||
|
|
style: fs.readFileSync(Editor.url('packages://console-pro/static/style/default/index.css', 'utf8')),
|
|||
|
|
|
|||
|
|
// html template for panel
|
|||
|
|
template: fs.readFileSync(Editor.url('packages://console-pro/static/template/default/index.html', 'utf8')),
|
|||
|
|
|
|||
|
|
// element and variable binding
|
|||
|
|
$: {
|
|||
|
|
app: '#app',
|
|||
|
|
logDetail: '#log-detail'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
close() {
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// method executed when template and styles are successfully loaded and initialized
|
|||
|
|
ready () {
|
|||
|
|
vm = new window.Vue({
|
|||
|
|
el: this.shadowRoot,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
openSettingsI18n: translate('openSettings'),
|
|||
|
|
clearLogI18n: translate('clearLog'),
|
|||
|
|
openLogI18n: translate('openLog'),
|
|||
|
|
searchPlaceholderI18n: translate('searchPlaceholder'),
|
|||
|
|
iconI18n: translate('icon'),
|
|||
|
|
timeI18n: translate('time'),
|
|||
|
|
typeI18n: translate('type'),
|
|||
|
|
contentI18n: translate('content'),
|
|||
|
|
copyI18n: translate('copy'),
|
|||
|
|
deleteI18n: translate('delete'),
|
|||
|
|
expandI18n: translate('expand'),
|
|||
|
|
collapseI18n: translate('collapse'),
|
|||
|
|
developI18n: translate('develop'),
|
|||
|
|
backI18n: translate('back'),
|
|||
|
|
|
|||
|
|
currentPage: 'log',
|
|||
|
|
|
|||
|
|
settingsImgPath: Editor.url('packages://console-pro/static/images/settings.png'),
|
|||
|
|
clearImgPath: Editor.url('packages://console-pro/static/images/clear.png'),
|
|||
|
|
openLogImgPath: Editor.url('packages://console-pro/static/images/log.png'),
|
|||
|
|
searchImgPath: Editor.url('packages://console-pro/static/images/search.png'),
|
|||
|
|
matchCaseImgPath: Editor.url('packages://console-pro/static/images/match-case.png'),
|
|||
|
|
matchWholeImgPath: Editor.url('packages://console-pro/static/images/match-whole.png'),
|
|||
|
|
matchRegImgPath: Editor.url('packages://console-pro/static/images/match-reg.png'),
|
|||
|
|
logNumImgPath: Editor.url('packages://console-pro/static/images/log-color.png'),
|
|||
|
|
infoNumImgPath: Editor.url('packages://console-pro/static/images/info-color.png'),
|
|||
|
|
warnNumImgPath: Editor.url('packages://console-pro/static/images/warn-color.png'),
|
|||
|
|
errorNumImgPath: Editor.url('packages://console-pro/static/images/error-color.png'),
|
|||
|
|
copyImgPath: Editor.url('packages://console-pro/static/images/copy.png'),
|
|||
|
|
deleteImgPath: Editor.url('packages://console-pro/static/images/delete.png'),
|
|||
|
|
expandImgPath: Editor.url('packages://console-pro/static/images/expand.png'),
|
|||
|
|
collapseImgPath: Editor.url('packages://console-pro/static/images/collapse.png'),
|
|||
|
|
|
|||
|
|
isMatchCase: false,
|
|||
|
|
isMatchWhole: false,
|
|||
|
|
isMatchReg: false,
|
|||
|
|
matchCaseBtnClass: 'transparent',
|
|||
|
|
matchWholeBtnClass: 'transparent',
|
|||
|
|
matchRegBtnClass: 'transparent',
|
|||
|
|
|
|||
|
|
logNum: 0,
|
|||
|
|
infoNum: 0,
|
|||
|
|
warnNum: 0,
|
|||
|
|
errorNum: 0,
|
|||
|
|
isLogTypeShown: true,
|
|||
|
|
isInfoTypeShown: true,
|
|||
|
|
isWarnTypeShown: true,
|
|||
|
|
isErrorTypeShown: true,
|
|||
|
|
|
|||
|
|
currentLogDataArray: [],
|
|||
|
|
searchResultArray: [],
|
|||
|
|
keyword: '',
|
|||
|
|
|
|||
|
|
isClearLogOnPreview: false,
|
|||
|
|
isCurrentItemExpanded: false,
|
|||
|
|
currentLogIndex: 0,
|
|||
|
|
isSearching: false,
|
|||
|
|
|
|||
|
|
logDetailHTML: null,
|
|||
|
|
menuHTML: null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
created() {
|
|||
|
|
// 如果不需要更新提示，注释这行代码即可
|
|||
|
|
// this.checkUpdate()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
currentLogDataArrayComputed() {
|
|||
|
|
return this.currentLogDataArray
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
checkUpdate() {
|
|||
|
|
// 检查是否有更新
|
|||
|
|
axios.get('https://la-vie.gitee.io/console-pro2x/package.json', {headers: {'Cache-Control': 'no-cache'}})
|
|||
|
|
.then(function(response) {
|
|||
|
|
let remoteVersion = response.data.version;
|
|||
|
|
if (packageJSON.version != remoteVersion) {
|
|||
|
|
Editor.warn(`[v${remoteVersion}] ${translate('updateWarn')}`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
storeELements(event) {
|
|||
|
|
// v-el和v-ref都获取不到，只能通过这种方式获取先
|
|||
|
|
// 获取id为log-detail的元素
|
|||
|
|
this.logDetailHTML = event.currentTarget
|
|||
|
|
|
|||
|
|
// 获取右键菜单元素
|
|||
|
|
this.menuHTML = event.currentTarget.parentElement.parentElement.getElementsByClassName('menu')[0]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
back() {
|
|||
|
|
this.currentPage = 'log'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setClearOnPreview() {
|
|||
|
|
this.isClearLogOnPreview = !this.isClearLogOnPreview
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
escape(str) {
|
|||
|
|
return str.replace(/[\-\/\\\^\$\*\+\?\.\(\)\|\[\]\{\}]/g, '\\$&')
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
search(keyword) {
|
|||
|
|
// 关键词搜索
|
|||
|
|
this.keyword = keyword
|
|||
|
|
|
|||
|
|
// 没有关键词则直接返回
|
|||
|
|
if (!keyword.length) {
|
|||
|
|
this.isSearching = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 构造正则表达式
|
|||
|
|
this.isSearching = true
|
|||
|
|
this.searchResultArray = []
|
|||
|
|
let matchCaseRegPart = 'i'
|
|||
|
|
let matchWholeRegPart1 = ''
|
|||
|
|
let matchWholeRegPart2 = ''
|
|||
|
|
let regStr = keyword
|
|||
|
|
|
|||
|
|
if (!this.isMatchReg) {
|
|||
|
|
regStr = this.escape(regStr)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.isMatchCase) {
|
|||
|
|
matchCaseRegPart = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.isMatchWhole) {
|
|||
|
|
matchWholeRegPart1 = '\\b'
|
|||
|
|
matchWholeRegPart2 = '\\b'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
regStr = `${matchWholeRegPart1}${regStr}${matchWholeRegPart2}`
|
|||
|
|
let regExp = new RegExp(regStr, matchCaseRegPart+'g')
|
|||
|
|
|
|||
|
|
// 将符合条件的日志放入searchResultArray中
|
|||
|
|
for (let i=0; i<this.currentLogDataArray.length; i++) {
|
|||
|
|
if (this.currentLogDataArray[i].message.search(regExp) > -1) {
|
|||
|
|
this.searchResultArray.push(this.currentLogDataArray[i])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
showContextMenu(event, index) {
|
|||
|
|
// 显示右键菜单
|
|||
|
|
event.preventDefault()
|
|||
|
|
|
|||
|
|
let logDetailLeft = this.logDetailHTML.getBoundingClientRect().left
|
|||
|
|
let logDetailTop = this.logDetailHTML.getBoundingClientRect().top
|
|||
|
|
let x = event.clientX - logDetailLeft
|
|||
|
|
let y = event.clientY - logDetailTop
|
|||
|
|
|
|||
|
|
if (y > this.logDetailHTML.clientHeight/2) {
|
|||
|
|
this.menuHTML.style.top = y - 30 + 'px'
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.menuHTML.style.top = y + 30 + 'px'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.menuHTML.style.left = x + 10+ 'px'
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.currentLogIndex = index
|
|||
|
|
this.isCurrentItemExpanded = this.currentLogDataArray[index].isExpanded
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
hideContextMenu(event) {
|
|||
|
|
if (this.menuHTML) {
|
|||
|
|
this.menuHTML.style.top = '-1000px'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
copyLog(index) {
|
|||
|
|
clipboard.copy(this.currentLogDataArray[index].message)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
deleteLog(index) {
|
|||
|
|
let logType = this.currentLogDataArray[index].type
|
|||
|
|
this.currentLogDataArray.splice(index, 1)
|
|||
|
|
if (logType == 'log') {
|
|||
|
|
this.logNum -= 1
|
|||
|
|
}
|
|||
|
|
else if (logType == 'info') {
|
|||
|
|
this.infoNum -= 1
|
|||
|
|
}
|
|||
|
|
else if (logType == 'warn') {
|
|||
|
|
this.warnNum -= 1
|
|||
|
|
}
|
|||
|
|
else if (logType == 'error') {
|
|||
|
|
this.errorNum -= 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
truncate(item) {
|
|||
|
|
// 截断
|
|||
|
|
// 若处于展开状态，则不截断
|
|||
|
|
if (item.isExpanded) {
|
|||
|
|
return item.message
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 若大于100个字符，则截断
|
|||
|
|
if (item.message.length > 100) {
|
|||
|
|
return item.message.substring(0, 100) + '...'
|
|||
|
|
}
|
|||
|
|
return item.message
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
clearLog() {
|
|||
|
|
// 清空当前显示的日志
|
|||
|
|
Editor.Ipc.sendToMain('console-pro:clear-log')
|
|||
|
|
|
|||
|
|
this.currentLogDataArray = []
|
|||
|
|
this.previousLogDataArray = JSON.stringify([])
|
|||
|
|
|
|||
|
|
this.logNum = 0
|
|||
|
|
this.infoNum = 0
|
|||
|
|
this.warnNum = 0
|
|||
|
|
this.errorNum = 0
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
openSettings() {
|
|||
|
|
// 进入到设置页面
|
|||
|
|
this.currentPage = 'settings'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
openLog() {
|
|||
|
|
// 打开日志文件
|
|||
|
|
let logFilePath = path.join(os.homedir(), '.CocosCreator/logs/CocosCreator.log')
|
|||
|
|
if (fs.existsSync(logFilePath)) {
|
|||
|
|
if (os.type() == "Windows_NT") {
|
|||
|
|
childProcess.exec(`explorer.exe ${logFilePath}`)
|
|||
|
|
}
|
|||
|
|
else if (os.type() == "Darwin") {
|
|||
|
|
childProcess.exec(`open ${logFilePath}`)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
Editor.Dialog.messageBox({
|
|||
|
|
message: translate('noLogFile'),
|
|||
|
|
buttons: ['Ok'],
|
|||
|
|
title: 'Cocos Console Pro',
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onMatchCaseBtnClicked() {
|
|||
|
|
// 当点击了大小写匹配按钮
|
|||
|
|
this.isMatchCase = !this.isMatchCase
|
|||
|
|
this.matchCaseBtnClass = this.isMatchCase ? 'blue transparent' : 'transparent'
|
|||
|
|
|
|||
|
|
this.search(this.keyword)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onMatchWholeBtnClicked() {
|
|||
|
|
// 当点击了全字符匹配按钮
|
|||
|
|
this.isMatchWhole = !this.isMatchWhole
|
|||
|
|
this.matchWholeBtnClass = this.isMatchWhole ? 'blue transparent' : 'transparent'
|
|||
|
|
|
|||
|
|
this.search(this.keyword)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onMatchRegBtnClicked() {
|
|||
|
|
// 当点击了正则匹配按钮
|
|||
|
|
this.isMatchReg = !this.isMatchReg
|
|||
|
|
this.matchRegBtnClass = this.isMatchReg ? 'blue transparent' : 'transparent'
|
|||
|
|
|
|||
|
|
this.search(this.keyword)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
showHideCertainTypeOfLog(logType) {
|
|||
|
|
// 当点击了右上角某个类型日志，可显示或隐藏对应类型的所有日志
|
|||
|
|
if (logType == 'log') {
|
|||
|
|
this.isLogTypeShown = !this.isLogTypeShown
|
|||
|
|
this.logNumImgPath = this.isLogTypeShown ? Editor.url('packages://console-pro/static/images/log-color.png') : Editor.url('packages://console-pro/static/images/log-gray.png')
|
|||
|
|
|
|||
|
|
for (let i=0; i<this.currentLogDataArray.length; i++) {
|
|||
|
|
if (this.currentLogDataArray[i]['type'] == 'log') {
|
|||
|
|
this.currentLogDataArray[i]['isShown'] = this.isLogTypeShown
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else if (logType == 'info') {
|
|||
|
|
this.isInfoTypeShown = !this.isInfoTypeShown
|
|||
|
|
this.infoNumImgPath = this.isInfoTypeShown ? Editor.url('packages://console-pro/static/images/info-color.png') : Editor.url('packages://console-pro/static/images/info-gray.png')
|
|||
|
|
|
|||
|
|
for (let i=0; i<this.currentLogDataArray.length; i++) {
|
|||
|
|
if (this.currentLogDataArray[i]['type'] == 'info') {
|
|||
|
|
this.currentLogDataArray[i]['isShown'] = this.isInfoTypeShown
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else if (logType == 'warn') {
|
|||
|
|
this.isWarnTypeShown = !this.isWarnTypeShown
|
|||
|
|
this.warnNumImgPath = this.isWarnTypeShown ? Editor.url('packages://console-pro/static/images/warn-color.png') : Editor.url('packages://console-pro/static/images/warn-gray.png')
|
|||
|
|
|
|||
|
|
for (let i=0; i<this.currentLogDataArray.length; i++) {
|
|||
|
|
if (this.currentLogDataArray[i]['type'] == 'warn') {
|
|||
|
|
this.currentLogDataArray[i]['isShown'] = this.isWarnTypeShown
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else if (logType == 'error') {
|
|||
|
|
this.isErrorTypeShown = !this.isErrorTypeShown
|
|||
|
|
this.errorNumImgPath = this.isErrorTypeShown ? Editor.url('packages://console-pro/static/images/error-color.png') : Editor.url('packages://console-pro/static/images/error-gray.png')
|
|||
|
|
|
|||
|
|
for (let i=0; i<this.currentLogDataArray.length; i++) {
|
|||
|
|
if (this.currentLogDataArray[i]['type'] == 'error') {
|
|||
|
|
this.currentLogDataArray[i]['isShown'] = this.isErrorTypeShown
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 滑动条下滑
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
if (this.isScrollAtBottom()) {
|
|||
|
|
this.logDetailHTML.scrollTop = Number.MAX_SAFE_INTEGER
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
expandLog(index) {
|
|||
|
|
// 展开日志
|
|||
|
|
this.currentLogDataArray[index].isExpanded = !this.currentLogDataArray[index].isExpanded
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
logTypeTologPath(logType) {
|
|||
|
|
// 将日志类型转换为日志图标
|
|||
|
|
return Editor.url(`packages://console-pro/static/images/${logType}-color.png`)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
timeStampToDateTime(timestamp) {
|
|||
|
|
// 将时间戳转换为日期时间
|
|||
|
|
let date = new Date(timestamp)
|
|||
|
|
let year = date.getFullYear()
|
|||
|
|
let month = date.getMonth() + 1
|
|||
|
|
let day = date.getDate()
|
|||
|
|
let hour = date.getHours()
|
|||
|
|
let minute = date.getMinutes()
|
|||
|
|
let second = date.getSeconds()
|
|||
|
|
|
|||
|
|
// 小于10的话，前面补齐'0'
|
|||
|
|
let monthStr = month < 10 ? '0'+month : month.toString()
|
|||
|
|
let dayStr = day < 10 ? '0'+day : day.toString()
|
|||
|
|
let hourStr = hour < 10 ? '0'+hour : hour.toString()
|
|||
|
|
let minuteStr = minute < 10 ? '0'+minute : minute.toString()
|
|||
|
|
let secondStr = second < 10 ? '0'+second : second.toString()
|
|||
|
|
|
|||
|
|
return `${year}-${monthStr}-${dayStr} ${hourStr}:${minuteStr}:${secondStr}`
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
isScrollAtBottom() {
|
|||
|
|
// 判断滚动条是否在底部
|
|||
|
|
if (!this.logDetailHTML) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let clientHeight = this.logDetailHTML.clientHeight
|
|||
|
|
let scrollTop = this.logDetailHTML.scrollTop
|
|||
|
|
let scrollHeight = this.logDetailHTML.scrollHeight
|
|||
|
|
if (clientHeight + scrollTop >= scrollHeight * 0.98) {
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
return false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updateLog(logType, msg) {
|
|||
|
|
let item = {
|
|||
|
|
'type': logType,
|
|||
|
|
'message': msg,
|
|||
|
|
'time': new Date().valueOf(),
|
|||
|
|
'isExpanded': false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (logType == 'log') {
|
|||
|
|
this.logNum += 1
|
|||
|
|
item.isShown = this.isLogTypeShown
|
|||
|
|
}
|
|||
|
|
else if (logType == 'info') {
|
|||
|
|
this.infoNum += 1
|
|||
|
|
item.isShown = this.isInfoTypeShown
|
|||
|
|
}
|
|||
|
|
else if (logType == 'warn') {
|
|||
|
|
this.warnNum += 1
|
|||
|
|
item.isShown = this.isWarnTypeShown
|
|||
|
|
}
|
|||
|
|
else if (logType == 'error') {
|
|||
|
|
this.errorNum += 1
|
|||
|
|
item.isShown = this.isErrorTypeShown
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.currentLogDataArray.push(item)
|
|||
|
|
|
|||
|
|
// 滑动条下滑
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
if (this.isScrollAtBottom()) {
|
|||
|
|
this.logDetailHTML.scrollTop = Number.MAX_SAFE_INTEGER
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// register your ipc messages here
|
|||
|
|
messages: {
|
|||
|
|
'editor:console-log': (event, msg)=>{
|
|||
|
|
vm.updateLog('log', msg)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
'editor:console-success': (event, msg)=>{
|
|||
|
|
vm.updateLog('log', msg)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
'editor:console-failed': (event, msg)=>{
|
|||
|
|
vm.updateLog('error', msg)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
'editor:console-info': (event, msg)=>{
|
|||
|
|
vm.updateLog('info', msg)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
'editor:console-warn': (event, msg)=>{
|
|||
|
|
vm.updateLog('warn', msg)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
'editor:console-error': (event, msg)=>{
|
|||
|
|
vm.updateLog('error', msg)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
'scene:play-on-device': (event)=>{
|
|||
|
|
if (vm.isClearLogOnPreview) {
|
|||
|
|
vm.clearLog()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
});
|