diff --git a/src/components/FancyTree/index.vue b/src/components/FancyTree/index.vue index a255323..5d16a3b 100644 --- a/src/components/FancyTree/index.vue +++ b/src/components/FancyTree/index.vue @@ -19,7 +19,16 @@ 上一级 刷新 新建 - 搜索 + + + + + 搜索 + +
@@ -77,21 +86,17 @@ { iconClass: 'menu-rename', label: '重命名', operation: 'rename' }, { iconClass: 'menu-remove', label: '删除', operation: 'remove' } ], + fileMenus1: [ + { iconClass: 'menu-addtab', label: '在新的标签打开', operation: 'openFileOfNewTab' }, + { iconClass: 'menu-rename', label: '重命名', operation: 'rename' }, + { iconClass: 'menu-remove', label: '删除', operation: 'remove' } + ], newFileMenus: [ { iconClass: 'add-file', label: '新建文件', operation: 'addFile' }, { iconClass: 'folder-add', label: '新建目录', operation: 'addFolder' } ], } }, - watch: { - directoryTreeData(newVal) { - this.directoryTreeData = newVal - this.loadTreeData(newVal,true) - }, - editableTabs(newVal){ - this.editableTabs = newVal - } - }, mounted() { this.loadTreeData(this.directoryTreeData) }, @@ -130,7 +135,11 @@ data.originalEvent.preventDefault(); return false } - return that.nameValid(data.input.val(), data.node.data, data.node) + if(data.node.data.path){ + return that.nameValid(data.input.val(), data.node.data, data.node) + }else{ + return true + } }, save: function(event, data){ if(data.node.data.path){ @@ -141,13 +150,18 @@ return true; }, close: function(event, data){ - let title = data.node.span.querySelector('.fancytree-title') - that.$refs.contextmenu.addRef({el:title,vnode: title}) + if(data.node) { + that.addRef(data.node) + } return false } } }); }, + addRef(node){ + let title = node.span.querySelector('.fancytree-title') + this.$refs.contextmenu.addRef({el:title,vnode: title}) + }, contextmenu(vnode){ this.rightClicking = true const that = this @@ -166,6 +180,10 @@ }else{ this.menus = this.fileMenus + const tabExist = this.editableTabs.some(item => item.name === this.contextData.path) + if(!tabExist && suffix.simText.includes(this.contextData.suffix)){ + this.menus = this.fileMenus1 + } } } }, @@ -188,6 +206,10 @@ case 'addFolder': this.editCreateNode(node,true) break + case 'openFileOfNewTab': + this.contextData.isAddTab = true + this.$emit('treeNodeClick',this.contextData) + break default: break } @@ -403,20 +425,13 @@ row.name = newFileName row.suffix = newFileName.replace(/.+\./,"") Bus.$emit('renameRow',row) - const oldPath = row.path + row.oldPath = row.path row.path = row.path.substring(0,row.path.length - row.oldName.length) + newFileName node.setTitle(newFileName) + this.addRef(node) this.$message.success("修改成功！") - // 同步到 editableTabs - this.editableTabs.map(item => { - if(item.name === oldPath){ - item.title = row.name - item.copyTitle = row.name - item.name = row.path - } - return item - }) - if(this.editableTabsValue === oldPath){ + this.$emit('onRename', row) + if(this.editableTabsValue === row.oldPath){ this.$emit('update:editableTabsValue', row.path) } } @@ -482,8 +497,7 @@ }, createNode(event, data){ if(data.node.statusNodeType !== 'nodata'){ - let title = data.node.span.querySelector('.fancytree-title') - this.$refs.contextmenu.addRef({el:title,vnode: title}) + this.addRef(data.node) }else{ data.node.span.querySelector('.fancytree-title').innerText = '无数据' } diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue index f11a9a2..5a9d605 100644 --- a/src/components/preview/SimTextPreview.vue +++ b/src/components/preview/SimTextPreview.vue @@ -52,7 +52,7 @@
-
-
+
+
+ + +
+
leftTools.style.minWidth.split('\px')[0]){ @@ -313,16 +318,18 @@ if(600 > contentsWidth){ that.contentsWidth = contentsWidth that.editorWidth = document.body.clientWidth * that.dialogWidth - (contentsStartWidth + moveLen) + console.log('contentsWidth:',that.contentsWidth) + console.log('editorWidth:',that.editorWidth) } } } // 鼠标松开事件 document.onmouseup = function (evt) { - document.onmousemove = null; - document.onmouseup = null; - resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉 + document.onmousemove = null + document.onmouseup = null + resize.releaseCapture && resize.releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉 } - resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获 + resize.setCapture && resize.setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获 return false; } } @@ -330,6 +337,18 @@ loadPath(data){ this.$refs.fancTree.loadPath(data) }, + onRename(row){ + // 同步到 editableTabs + this.editableTabs.map(item => { + if(item.name === row.oldPath){ + item.title = row.name + item.copyTitle = row.name + item.name = row.path + } + return item + }) + this.editableTabsValue = row.path + }, onLoadTreePath(path){ this.filePathNav = path }, @@ -340,14 +359,6 @@ if(!suffix.simText.includes(row.suffix)){ return } - this.loading = this.$message({ - iconClass: 'el-icon-loading', - type: 'info', - duration: 0, - dangerouslyUseHTMLString: true, - offset: document.body.clientHeight/3, - message: '  正在加载数据...' - }) let languages = monaco.languages.getLanguages(); const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.'+row.suffix)) if(languagesIndex > -1){ @@ -361,12 +372,20 @@ }else{ this.options.wordWrap = '' } - api.previewTextByPath({ - path: row.path, - username: this.$store.state.user.name - }).then((res)=>{ - this.loading.close() - if(this.editableTabs.findIndex(tab=> tab.name===row.path) < 0){ + if(this.editableTabs.findIndex(tab=> tab.name===row.path) < 0){ + this.loading = this.$message({ + iconClass: 'el-icon-loading', + type: 'info', + duration: 0, + dangerouslyUseHTMLString: true, + offset: document.body.clientHeight/3, + message: '  正在加载数据...' + }) + api.previewTextByPath({ + path: row.path, + username: this.$store.state.user.name + }).then((res)=>{ + this.loading.close() // 添加一个tab let tab = { title:row.name, @@ -376,17 +395,23 @@ name:row.path, content:res.data.contentText } - let thisTabIndex = this.editableTabs.findIndex(tab=> tab.status===undefined) - if(thisTabIndex > -1){ - this.editableTabs[thisTabIndex] = tab - }else{ + if(row.isAddTab){ this.editableTabs.push(tab) + }else{ + let thisTabIndex = this.editableTabs.findIndex(tab=> tab.status===undefined) + if(thisTabIndex > -1){ + this.editableTabs[thisTabIndex] = tab + }else{ + this.editableTabs.push(tab) + } } - } + this.editableTabsValue = row.path + }).catch(() => { + this.loading.close() + }) + }else{ this.editableTabsValue = row.path - }).catch(() => { - this.loading.close() - }) + } }, containerResize() { this.editorWidth = document.body.clientWidth * this.dialogWidth - this.contentsWidth @@ -535,6 +560,7 @@ this.setTheme() }, setTheme(){ + let dialog = document.querySelector('.simtext-dialog .el-dialog') let header = document.querySelector('.simtext-dialog .el-dialog .el-dialog__header') let fileContests = document.querySelector('.content'); if(this.lightTheme){ @@ -543,12 +569,18 @@ if(fileContests){ fileContests.setAttribute('data-theme', 'light') } + if(dialog){ + dialog.style.background = '#FFF' + } if(header){ header.setAttribute('data-theme', 'light') } }else{ header.style.background = '#292929' header.style.color = '#fff' + if(dialog){ + dialog.style.background = '#1e1e1e' + } if(fileContests){ fileContests.setAttribute('data-theme', 'dark') } @@ -603,8 +635,9 @@ border-radius: unset!important; } &::-webkit-scrollbar-track-piece { - background-color: unset!important; - border-radius: 3px; + border: unset!important; + background-color: #ececec !important; + border-radius: unset!important; } } @@ -615,12 +648,13 @@ } &::-webkit-scrollbar-thumb { border: unset!important; - background-color: #4b4b4b !important; + background-color: #aeaeae !important; border-radius: unset!important; } &::-webkit-scrollbar-track-piece { - background-color: unset!important; - border-radius: 3px; + border: unset!important; + background-color: #565656 !important; + border-radius: unset!important; } } @@ -754,10 +788,14 @@ } .file-contents{ + + transition: left 500ms ease 0s; + position: absolute; + .content-tree{ background: #fff; - box-shadow: inset #ececec -7px 0px; + //box-shadow: inset #ececec -7px 0px; #dir-tree { overflow-y: scroll; @@ -798,10 +836,61 @@ } + .editor-resize { + width: 2px; + bottom: 0; + top: 0; + cursor: col-resize; + transition: margin-left 500ms ease 0s; + + .darg-resize-conter { + width: 2px; + } + .editor-resize-conter{ + height: 50px; + width: 14px; + position: absolute; + z-index: 999; + top: 48%; + background: #e2e2e2; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + border: 1px solid #ececec; + border-left: none; + cursor: pointer; + } + .editor-resize-conter:after { + content: " "; + display: inline-block; + height: 10px; + width: 10px; + position: absolute; + top: 50%; + margin-top: -6.5px; + left: 4px; + z-index: 999; + border-width: 2px 2px 0 0; + border-color: #9a9a9a; + border-style: solid; + -webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0); + transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0); + } + } + &[data-theme=dark] { background: $bg-color; + .editor-resize { + .editor-resize-conter{ + background: #222; + border: 1px solid #525252; + } + .editor-resize-conter:after { + border-color: #b2b2b2; + } + } + .el-tabs--card>.el-tabs__header { border-bottom: 1px solid #565656; .el-tabs__nav { @@ -821,10 +910,6 @@ } } - .editor-resize { - background: $bg-color; - } - .file-contents{ background: #565656; @@ -835,7 +920,7 @@ .content-tree { background: $bg-color; - box-shadow: inset #2d2d2d -7px 0px; + //box-shadow: inset #2d2d2d -7px 0px; #dir-tree { @include scrollBarDarkStyle; span.fancytree-title { diff --git a/src/icons/svg/menu-addtab.svg b/src/icons/svg/menu-addtab.svg new file mode 100644 index 0000000..3219893 --- /dev/null +++ b/src/icons/svg/menu-addtab.svg @@ -0,0 +1 @@ +