From f7557eef6dcd30ab4b5f239dfedcc79a17254c97 Mon Sep 17 00:00:00 2001 From: jmal Date: Tue, 23 Jun 2020 08:54:07 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E6=9C=AC=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8;=E7=BC=96=E8=BE=91=E5=8C=BA=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0tab=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/markdown-api.js | 8 + src/components/MonacoEditorVue/index.js | 53 +++- src/components/preview/SimTextPreview.vue | 338 ++++++++++++++-------- 3 files changed, 276 insertions(+), 123 deletions(-) diff --git a/src/api/markdown-api.js b/src/api/markdown-api.js index c6c89bc..6ce12dc 100644 --- a/src/api/markdown-api.js +++ b/src/api/markdown-api.js @@ -26,4 +26,12 @@ export default { data }) }, + // 编辑文档 /markdown/edit + editMarkdownByPath: function(data) { + return request({ + url: '/markdown/edit1', + method: 'post', + data + }) + }, } diff --git a/src/components/MonacoEditorVue/index.js b/src/components/MonacoEditorVue/index.js index 791e32c..8f836c5 100644 --- a/src/components/MonacoEditorVue/index.js +++ b/src/components/MonacoEditorVue/index.js @@ -77,11 +77,41 @@ export default { render (h) { return ( -
+
{ + const isMac = navigator.platform.startsWith('Mac'); + const {key, code, keyCode, ctrlKey, metaKey} = event; + const isCmd = isMac && metaKey || !isMac && ctrlKey; + console.log('keydown',isCmd) + if (!isCmd) { + return; + } + const isS = key === 's' || code === 'KeyS' || keyCode === 83; + if (isS) { + this.$emit('save', this._getValue()); + event.stopPropagation(); + event.preventDefault(); + } + }} + >
); }, methods: { + keyDown(event){ + const isMac = navigator.platform.startsWith('Mac'); + const {key, code, keyCode, ctrlKey, metaKey} = event; + const isCmd = isMac && metaKey || !isMac && ctrlKey; + console.log('keydown',isCmd) + if (!isCmd) { + return; + } + const isS = key === 's' || code === 'KeyS' || keyCode === 83; + if (isS) { + this.$emit('save', this._getValue()); + event.stopPropagation(); + event.preventDefault(); + } + }, initMonaco() { const { value, language, theme, options } = this; Object.assign(options, this._editorBeforeMount()); //编辑器初始化前 @@ -95,6 +125,23 @@ export default { this._editorMounted(this.editor); //编辑器初始化后 }, + onKeyDown(event) { + const isMac = navigator.platform.startsWith('Mac'); + const {key, code, keyCode, ctrlKey, metaKey} = event; + const isCmd = isMac && metaKey || !isMac && ctrlKey; + if (!isCmd) { + return; + } + const isS = key === 's' || code === 'KeyS' || keyCode === 83; + if (isS && this.textPreviewVisible) { + if(this.newContent !== ''){ + this.save() + } + event.stopPropagation(); + event.preventDefault(); + } + }, + _getEditor() { if(!this.editor) return null; return this.diffEditor ? this.editor.modifiedEditor : this.editor; @@ -141,8 +188,8 @@ export default { } }, - _emitChange(value, event) { - this.$emit('change', value, event); + _emitChange(value) { + this.$emit('change', value); this.$emit('input', value); } } diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue index 29b14ba..dff59b5 100644 --- a/src/components/preview/SimTextPreview.vue +++ b/src/components/preview/SimTextPreview.vue @@ -15,42 +15,56 @@
{{file.name}}
- Ctrl-S 保存 + 保存所有 - -
-
-
-
-
+
+ +
+
- 上一级 - 刷新 - 新建 - 搜索 + 上一级 + 刷新 + 新建 + 搜索
- +
+ +
-
-
- +
+
+ + +
+ +
+ +
@@ -130,7 +144,9 @@ border: '1px solid #565656!important', color: '#ffffff!important' }, - directoryTreeData: [] + directoryTreeData: [], + editableTabsValue: '1', + editableTabs: [], } }, mounted() { @@ -156,6 +172,7 @@ }, watch: { //监听file的变化，进行相应的操作即可 file: function (file) { + this.editableTabs = [] this.editorWidth = document.body.clientWidth * this.dialogWidth - this.contentsWidth this.editorHieght = document.body.clientHeight * this.dialogWidth - 50 @@ -201,6 +218,15 @@ this.textPreviewVisible = true this.content = res.data.contentText + // 加载tabs + this.editableTabs.push({ + title: res.data.name, + copyTitle: res.data.name, + name: res.data.path.substring(1,res.data.path.length)+res.data.name, + content: res.data.contentText + }) + this.editableTabsValue = res.data.path.substring(1,res.data.path.length)+res.data.name + // 界面的渲染后的初始化工作 this.$nextTick(()=>{ this.dragControllerDiv() @@ -226,6 +252,8 @@ dragControllerDiv() { let resize = document.querySelector('.el-dialog__body .content .editor-resize'); let left = document.querySelector('.file-contents'); + let leftTools = document.querySelector('.file-contents .dir-tools'); + let leftTree = document.querySelector('.file-contents .content-tree'); if(resize){ // 鼠标按下事件 const that = this @@ -237,8 +265,13 @@ let endX = e.clientX; // 移动的距离。负数向左移动,正数向右移动 let moveLen = endX - startX - left.style.width = (contentsStartWidth + moveLen)+'px' - that.editorWidth = document.body.clientWidth * that.dialogWidth - (contentsStartWidth + moveLen) + // left.style.width = (contentsStartWidth + moveLen)+'px' + // leftTree.style.width = (contentsStartWidth + moveLen)+'px' + console.log(leftTools.style.minWidth.split('\px')[0]) + if((contentsStartWidth + moveLen) > leftTools.style.minWidth.split('\px')[0]){ + that.contentsWidth = contentsStartWidth + moveLen + that.editorWidth = document.body.clientWidth * that.dialogWidth - (contentsStartWidth + moveLen) + } } // 鼠标松开事件 document.onmouseup = function (evt) { @@ -284,7 +317,17 @@ username: this.$store.state.user.name }).then((res)=>{ this.loading.close() - this.content = res.data.contentText + if(this.editableTabs.findIndex(tab=> tab.name===row.path) < 0){ + console.log('添加一个tab') + // 添加一个tab + this.editableTabs.push({ + title: row.name, + copyTitle: row.name, + name: row.path, + content: res.data.contentText + }) + } + this.editableTabsValue = row.path }).catch(() => { this.loading.close() }) @@ -311,26 +354,39 @@ this.$emit('update:status', this.textPreviewVisible) this.isShowUpdateBtn = false }, - change(code) { - this.isShowUpdateBtn = true - this.newContent = code - if(code === this.content){ - this.isShowUpdateBtn = false + change(value,index) { + if(value === this.editableTabs[index].content){ + if(this.editableTabs[index].copyTitle !== this.editableTabs[index].title){ + this.editableTabs[index].title = this.editableTabs[index].copyTitle + // 没有任何改变 + if(this.editableTabs.findIndex(tab=>tab.title !== tab.copyTitle) < 0){ + this.isShowUpdateBtn = false + } + } + }else{ + if(this.editableTabs[index].copyTitle === this.editableTabs[index].title){ + this.editableTabs[index].title += '*' + this.isShowUpdateBtn = true + } + } + // this.isShowUpdateBtn = true + // this.newContent = code + // if(code === this.content){ + // this.isShowUpdateBtn = false + // } + }, + save(value,index) { + if(value !== this.editableTabs[index].content && this.isShowUpdateBtn){ + + this.update(value,this.editableTabs[index].name) } }, - save() { - if(this.isShowUpdateBtn){ - this.update() - } - }, - update() { + update(value,path) { this.updating = true - markdownApi.editMarkdown({ - fileId: this.file.id, - userId: this.$store.state.user.userId, + markdownApi.editMarkdownByPath({ + relativePath: path, username: this.$store.state.user.name, - filename: this.file.name, - contentText: this.newContent + contentText: value }).then(() => { this.updating = false this.isShowUpdateBtn = false @@ -388,22 +444,22 @@ changePreviewMode() { this.previewMode = !this.previewMode }, - onKeyDown(event) { - const isMac = navigator.platform.startsWith('Mac'); - const {key, code, keyCode, ctrlKey, metaKey} = event; - const isCmd = isMac && metaKey || !isMac && ctrlKey; - if (!isCmd) { - return; + removeTab(targetName) { + let tabs = this.editableTabs; + let activeName = this.editableTabsValue; + if (activeName === targetName) { + tabs.forEach((tab, index) => { + if (tab.name === targetName) { + let nextTab = tabs[index + 1] || tabs[index - 1]; + if (nextTab) { + activeName = nextTab.name; + } + } + }); } - const isS = key === 's' || code === 'KeyS' || keyCode === 83; - if (isS && this.textPreviewVisible) { - if(this.newContent !== ''){ - this.save() - } - event.stopPropagation(); - event.preventDefault(); - } - }, + this.editableTabsValue = activeName; + this.editableTabs = tabs.filter(tab => tab.name !== targetName); + } } } @@ -450,6 +506,15 @@ margin: 0 !important; overflow: hidden; + .el-button--small.is-circle { + padding: 9px 10px; + } + + .light-button { + background: #ececec; + border: 1px solid #ececec; + } + .dark-button { background: #565656; border: 1px solid #565656; @@ -486,6 +551,7 @@ .title-extension { float: right; margin-right: 30px; + margin-top: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; @@ -517,7 +583,15 @@ } .content { border-top: unset!important; - display: flex; + display: inline-flex; + + .el-tabs__header { + margin: 0 0 0; + .el-tabs__item { + height: 31px; + line-height: 31px; + } + } .editor_main_storey { display: inline-block; @@ -528,43 +602,58 @@ background: linear-gradient(rgba(221,221,221,1), rgba(255, 255, 255, 0)); } + .el-tabs__nav-wrap { + margin-left: -1px; + } + + .el-tabs--card>.el-tabs__header .el-tabs__nav { + border-radius: 0 0 0 0; + } + + .el-tabs__nav-next, .el-tabs__nav-prev { + line-height: 31px; + } + .file-contents{ - overflow-y: scroll; - overflow-x: hidden; + .content-tree{ + overflow-y: scroll; + overflow-x: hidden; - @include scrollBarLightStyle; - background: #fff; - box-shadow: inset #eaeaea -7px 0px; + @include scrollBarLightStyle; + background: #fff; + box-shadow: inset #ececec -7px 0px; - #dir-tree { - ul.fancytree-container{ - padding: 3px 0 0 0; + #dir-tree { + ul.fancytree-container{ + padding: 3px 0 0 0; + } + } + .svg-icon { + font-size: 18px; + } + #dir-tree { + .fancytree-plain span.fancytree-active span.fancytree-title{ + background-color: #409eff30; + border-color: #ffffff; + } + + .fancytree-plain span.fancytree-node:hover span.fancytree-title{ + background-color: #409eff30; + border-color: #ffffff; + } + + .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{ + background-color: #409eff30; + border-color: #ffffff; + } } } - .svg-icon { - font-size: 18px; - } - #dir-tree { - .fancytree-plain span.fancytree-active span.fancytree-title{ - background-color: #409eff30; - border-color: #ffffff; - } - - .fancytree-plain span.fancytree-node:hover span.fancytree-title{ - background-color: #409eff30; - border-color: #ffffff; - } - - .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{ - background-color: #409eff30; - border-color: #ffffff; - } - } - .dir-tools { - .el-button--mini, .el-button--mini.is-round { - padding: 7px 10px; + background: #ececec; + border-right: 5px solid #fff; + .el-button--small { + padding: 9px 10px; } } @@ -577,29 +666,38 @@ } .file-contents{ - @include scrollBarDarkStyle; - background: $bg-color; - box-shadow: inset #2d2d2d -7px 0px; - #dir-tree { - span.fancytree-title { - color: #dedede; - } - ul.fancytree-container { - background: #1e1e1e; - } - .fancytree-plain span.fancytree-active span.fancytree-title{ - background-color: $tree-title-bg-color; - border-color: $bg-color; - } - .fancytree-plain span.fancytree-node:hover span.fancytree-title{ - background-color: $tree-title-bg-color; - border-color: $bg-color; - } + background: #565656; - .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{ - background-color: $tree-title-bg-color; - border-color: $bg-color; + .dir-tools { + background: #565656; + } + + .content-tree { + @include scrollBarDarkStyle; + background: $bg-color; + box-shadow: inset #2d2d2d -7px 0px; + #dir-tree { + span.fancytree-title { + color: #dedede; + } + ul.fancytree-container { + background: #1e1e1e; + } + .fancytree-plain span.fancytree-active span.fancytree-title{ + background-color: $tree-title-bg-color; + border-color: $bg-color; + } + + .fancytree-plain span.fancytree-node:hover span.fancytree-title{ + background-color: $tree-title-bg-color; + border-color: $bg-color; + } + + .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{ + background-color: $tree-title-bg-color; + border-color: $bg-color; + } } } } @@ -608,13 +706,13 @@ } } - .monaco-editor { - padding: 3px 0 0 0; + /*.monaco-editor {*/ + /*padding: 3px 0 0 0;*/ - .scroll-decoration{ - box-shadow: unset!important; - } - } + /*.scroll-decoration{*/ + /*box-shadow: unset!important;*/ + /*}*/ + /*}*/ } }