-
+
+
+
+
- 上一级
- 刷新
- 新建
- 搜索
+ 上一级
+ 刷新
+ 新建
+ 搜索
-
-
-
+
-
@@ -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;*/
+ /*}*/
+ /*}*/
}
}
+
+
+
+
+
+