lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化文本编辑器

Browse Source
This commit is contained in:
jmal 2023-08-05 20:06:02 +08:00
parent 60106bbed8
commit cc4571f98c
1 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/preview/SimTextPreview.vue
View File

@ -55,16 +55,16 @@
<el-button v-if="isShowUpdateBtn" @click="saveAll(false)" :class="lightTheme?'':'dark-button'" size="small" :loading="updating">保存所有</el-button>
<!-- <el-button-->
<!-- v-if="editableTabsValue.endsWith('.md')"-->
<!-- :class="lightTheme?'':'dark-button'"-->
<!-- size="small"-->
<!-- circle-->
<!-- @click="changePreviewMode"-->
<!-- :title="previewMode?'编辑':'预览'"-->
<!-- >-->
<!-- <icon :type="previewMode?lightTheme?'icon-quxiaoyulan1':'icon-quxiaoyulan1-copy':lightTheme?'icon-yulan':'icon-yulan-copy'"></icon>-->
<!-- </el-button>-->
<el-button
v-if="editableTabsValue.endsWith('.md') && editableTabs.length > 0"
:class="lightTheme?'':'dark-button'"
size="small"
circle
@click="changePreviewMode"
:title="previewMode?'编辑':'预览'"
>
<icon :type="previewMode?lightTheme?'icon-quxiaoyulan1':'icon-quxiaoyulan1-copy':lightTheme?'icon-yulan':'icon-yulan-copy'"></icon>
</el-button>
<el-button
:class="lightTheme?'':'dark-button'"
size="small"
@ -82,7 +82,7 @@
</div>
</div>
<div class="content" :style="{height: editorHieght+26+'px'}">
<div class="file-contents" :style="{width: contentsWidth+'px',height: editorHieght+32+'px',transition: transition,left: panelReadOnly || moblie ?`-${contentsWidth}px`:`0px`}">
<div class="file-contents" :style="{width: contentsWidth+'px',height: editorHieght+32+'px',transition: transition,left: panelReadOnly || moblie || contentsHide ?`-${contentsWidth}px`:`0px`}">
<div class="content-tree">
<fancy-tree
ref="fancTree"
@ -101,12 +101,12 @@
</fancy-tree>
</div>
</div>
<div class="editor-resize" :style="{marginLeft: panelReadOnly || moblie ?`0px`:`${contentsWidth}px`,transition: transition}">
<div class="editor-resize" :style="{marginLeft: panelReadOnly || moblie || contentsHide ?`0px`:`${contentsWidth}px`,transition: transition}">
<div class="darg-resize-conter"></div>
<i v-show="!panelReadOnly && !moblie " class="editor-resize-conter" icon="el-icon-arrow-right" title="隐藏文件目录" @click="hideContents"/>
</div>
<div :style="{width: editorWidth-2+'px'}">
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab()">
<el-tab-pane
v-for="(item,index) in editableTabs"
:key="item.name"
@ -199,7 +199,7 @@
data(){
return{
lightTheme: true,
contentsHide: false,
contentsHide: true,
defalutLanguage: 'redis',
lineWrapping: false,
moblie: false,
@ -402,6 +402,7 @@
},
// loading
viewHistoryFile({historyInfo, diff, recovery}) {
this.previewMode = false
const pathname = this.editableTabsValue
let currentIndex = this.editableTabs.findIndex(editable => editable.name === pathname)
const tab = this.editableTabs[currentIndex]
@ -590,7 +591,7 @@
that.dialogWidth = dialogWidth + moveX
that.editorWidth = editorWidth + moveX
that.editorHieght = editorHieght + (endY - startY)
that.loadConterSize()
that.loadContentSize()
}
}
// 鼠标松开事件
@ -714,7 +715,7 @@
fileName: row.name,
username: this.$store.state.user.name
}
api.previewTextByPath(params).then((res)=>{
api.previewTextByPath(params).then(()=>{
this.loading.close()
// 添加一个tab
let tab = {
@ -797,11 +798,7 @@
this.loadEditorSize()
},
checkMobile() {
if (!this.$pc) {
this.moblie = true
} else {
this.moblie = false
}
this.moblie = !this.$pc;
},
checkReadOnly(fileUserId){
if(this.$store.state.user.token && this.$store.state.user.userId === fileUserId){
@ -827,12 +824,12 @@
this.editorWidth = this.dialogWidth - this.contentsWidth
}
this.editorHieght = document.body.clientHeight * this.dialogWidthPercent - 76
this.loadConterSize()
this.loadContentSize()
},
loadConterSize(){
let conter = document.querySelector('.editor-resize .editor-resize-conter');
if(conter){
conter.style.marginTop = ((this.editorHieght+26)/2 - conter.clientHeight/2) + 'px'
loadContentSize(){
let content = document.querySelector('.editor-resize .editor-resize-conter');
if(content){
content.style.marginTop = ((this.editorHieght+26)/2 - content.clientHeight/2) + 'px'
}
},
handleClose(done) {
@ -866,6 +863,7 @@
}
},
closeDialog() {
this.previewMode = false
this.textPreviewVisible = false
this.$emit('update:status', this.textPreviewVisible)
this.isSaveDialogVisible = false
@ -1037,8 +1035,10 @@
this.clickTab()
},
clickTab() {
// this.editorWidth += 0.001
// this.editorHieght += 0.001
this.editorWidth += 0.001
this.editorHieght += 0.001
// 加载历史版本
this.$refs.historyPopover.loadHistoryPathList(this.editableTabsValue)
},
removeTab(targetName) {
let tabs = this.editableTabs;
@ -1534,13 +1534,20 @@
.nwse-resize {
z-index: 99999;
position: fixed;
width: 15px;
background: #00000000;
width: 12px;
margin-left: 3px;
background: #f0f0f0;
height: 15px;
margin-top: -15px;
float: right;
cursor: nwse-resize;
}
.nwse-resize::before {
content: "⠿";
display: inline-block;
padding-right: 5px;
vertical-align: middle;
}
.el-button--small.is-circle {
padding: 9px 9px;
}