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

修改SimTestPreview

Browse Source
This commit is contained in:
jmal 2020-06-18 09:53:08 +08:00
parent 95f400a8ab
commit ab545ff67b
8 changed files with 259 additions and 8747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8638
src/assets/js/jstree/jstree.js
View File

File diff suppressed because it is too large Load Diff

6
src/assets/js/jstree/jstree.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -1,5 +1,7 @@
<template>
<el-dialog v-bind="$attrs" v-on="$listeners"
<el-dialog
ref="simTextDialog"
v-bind="$attrs" v-on="$listeners"
:fullscreen="fullscreen"
:visible.sync="textPreviewVisible"
:title="file.name"
@ -22,11 +24,12 @@
</div>
</div>
<div class="content" @keydown="onKeyDown">
<div class="file-contents">
<file-tree :directoryTreeData="directoryTreeData" :localFileMode="true" @treeNodeClick="treeNodeClick"></file-tree>
<div class="editor_main_storey"></div>
<div class="file-contents" :style="{height: editorHieght+'px'}">
<!--<file-tree :directoryTreeData="directoryTreeData" :localFileMode="true" @treeNodeClick="treeNodeClick"></file-tree>-->
<fancy-tree v-if="directoryTreeData.length > 0" :directoryTreeData="directoryTreeData" @treeNodeClick="treeNodeClick"></fancy-tree>
</div>
<div class="editor">
<div class="editor_main_storey"></div>
<MonacoEditor
v-if="textPreviewVisible"
ref="monacoEditor"
@ -56,11 +59,12 @@
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import FileTree from"@/components/FileTree"
import FancyTree from"@/components/FancyTree"
export default {
name: "SimTextPreview",
components: {
MonacoEditor,FileTree
MonacoEditor,FileTree,FancyTree
},
props: {
file: {
@ -86,7 +90,7 @@
},
data(){
return{
lightTheme: false,
lightTheme: true,
defalutLanguage: 'redis',
language: this.defalutLanguage,
lineWrapping: false,
@ -103,6 +107,7 @@
textPreviewVisible: false,
fullscreen: false,
dialogWidth: 0.7,
lastTransform: undefined,
editorWidth: 1035,
editorHieght: 640,
content: '',
@ -183,7 +188,7 @@
username: this.$store.state.user.name
}).then((res)=>{
this.loading.close()
this.directoryTreeData = [{name: res.data.name, isFolder: true, isLeaf: false, path: res.data.path}]
this.directoryTreeData = [{name: res.data.name, isFolder: true, isLeaf: false, id: res.data.id, path: res.data.path}]
this.textPreviewVisible = true
this.content = res.data.contentText
}).catch(() => {
@ -229,8 +234,6 @@
username: this.$store.state.user.name
}).then((res)=>{
this.loading.close()
// this.directoryTreeData = [{name: res.data.name, isFolder: true, isLeaf: false, path: res.data.path}]
// this.textPreviewVisible = true
this.content = res.data.contentText
}).catch(() => {
this.loading.close()
@ -291,18 +294,23 @@
},
// 全屏
fullScreen() {
console.log(this.$refs.simTextDialog)
this.fullscreen = !this.fullscreen
const dragDom = document.querySelector('.simtext-dialog .el-dialog');
if(this.fullscreen){
this.lastTransform = dragDom.style.transform
this.dialogWidth = 1
dragDom.style.transform="translate("+0+"px,"+0+"px)";
}else{
this.dialogWidth = 0.7
let dialogWidth = document.body.clientWidth * this.dialogWidth;
let dialogWidth = document.body.clientWidth * this.dialogWidth
let x = (document.body.clientWidth - dialogWidth)/2
let y = (document.body.clientHeight - document.body.clientHeight * this.dialogWidth)/2
dragDom.style.transform="translate("+x+"px,"+y+"px)";
if(this.lastTransform){
dragDom.style.transform=this.lastTransform
}else{
dragDom.style.transform="translate("+x+"px,"+y+"px)"
}
}
this.containerResize()
},
@ -313,12 +321,19 @@
},
setTheme(){
let header = document.querySelector('.simtext-dialog .el-dialog .el-dialog__header')
let fileContests = document.querySelector('.content');
if(this.lightTheme){
header.style.background = '#FFF'
header.style.color = '#181818'
if(fileContests){
fileContests.setAttribute('data-theme', 'light')
}
}else{
header.style.background = '#292929'
header.style.color = '#fff'
if(fileContests){
fileContests.setAttribute('data-theme', 'dark')
}
}
},
changePreviewMode() {
@ -346,40 +361,48 @@
<style lang="scss" scoped>
@import "src/styles/markdown";
$bg-color: #1e1e1e;
$tree-title-bg-color: #3e3e3e;
@mixin scrollBarLightStyle() {
&::-webkit-scrollbar {
width: 7px!important;
height: 10px!important;
}
&::-webkit-scrollbar-thumb {
border: unset!important;
background-color: #c1c1c1 !important;
-webkit-border-radius: unset!important;
}
&::-webkit-scrollbar-track-piece {
background-color: unset!important;
-webkit-border-radius: 3px;
}
}
@mixin scrollBarDarkStyle() {
&::-webkit-scrollbar {
width: 7px!important;
height: 10px!important;
}
&::-webkit-scrollbar-thumb {
border: unset!important;
background-color: #4b4b4b !important;
-webkit-border-radius: unset!important;
}
&::-webkit-scrollbar-track-piece {
background-color: unset!important;
-webkit-border-radius: 3px;
}
}
/deep/.el-dialog {
/*width: 1035px;*/
margin: 0 !important;
overflow: hidden;
/*.content {*/
/*height: 600px;*/
/*overflow: scroll;*/
/*}*/
/deep/.content {
border-top: unset!important;
/*background-color: #1e1e1e;*/
background-color: #fff;
.editor_main_storey {
display: inline-block;
position: absolute;
z-index: 999;
width: 100%;
height: 5px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
}
}
.el-dialog__header {
padding: 5px 20px 5px;
/*background-color: #292929;*/
/*color: #fff;*/
/*.svg-icon {*/
/*font-size: 20px;*/
/*margin-top: 10px;*/
/*margin-left: 20px;*/
/*margin-right: 5px;*/
/*}*/
.dark-button {
background: #565656;
@ -398,7 +421,7 @@
}
.dark-button:hover {
color: #409EFF;
background-color: #1e1e1e;
background-color: $bg-color;
}
.el-dialog__headerbtn {
@ -444,49 +467,95 @@
word-break: normal;
}
.content {
border-top: 1px solid #ccc;
border-top: unset!important;
display: flex;
.editor_main_storey {
display: inline-block;
position: absolute;
z-index: 999;
width: 100%;
height: 5px;
background: linear-gradient(rgba(221,221,221,1), rgba(255, 255, 255, 0));
}
.file-contents{
background: #1e1e1e;
width: 300px;
/*overflow: auto;*/
overflow-y: scroll;
overflow-x: hidden;
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #2f2f2f;
}
@include scrollBarLightStyle;
background: #fff;
box-shadow: inset #eaeaea -7px 0px;
.el-tree {
background: #1e1e1e;
color: #c5c5c5;
.el-tree-node__content:hover{
background-color: #2f2f2f;
#dir-tree {
ul.fancytree-container{
padding: 3px 0 0 0;
}
}
.svg-icon {
font-size: 18px;
}
/deep/.el-tree-node>.el-tree-node__children{
overflow: unset;
#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;
}
}
}
&[data-theme=dark] {
.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;
}
.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title{
background-color: $tree-title-bg-color;
border-color: $bg-color;
}
}
}
.editor_main_storey {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
}
}
.monaco-editor {
padding: 3px 0 0 0;
.scroll-decoration{
box-shadow: unset!important;
}
}
}
}
::-webkit-scrollbar-thumb {
border: unset!important;
background-color: #565656!important;
-webkit-border-radius: unset!important;
}
::-webkit-scrollbar-track-piece {
background-color: unset!important;
-webkit-border-radius: 3px;
}
</style>

1
src/icons/svg/file-conf.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1592375100186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1484" width="128" height="128"><path d="M913.566 192.978l-73.878-74.904-131.336 55.666-77.47-31.808-58.232-132.622h-104.404l-57.718 133.904-75.416 30.526-130.826-52.588-76.184 74.392 50.534 127.748-27.448 80.034L16 460.018v104.66l130.312 55.666 36.94 80.036-53.87 133.13 71.826 71.826 135.186-56.178 73.622 34.886 58.744 133.39h105.688l53.87-130.056 78.238-34.372 131.338 53.612 74.392-74.39-50.792-135.19 27.706-72.85 133.646-60.282V459.5l-128.26-56.948-34.376-76.958 53.356-132.616zM452.854 443.086c19.24-19.238 42.584-28.73 69.518-28.73 27.192 0 50.28 9.492 69.518 28.73 19.238 19.24 28.732 42.328 28.732 69.518 0 26.934-9.494 50.276-28.732 69.258-19.238 19.238-42.326 28.986-69.518 28.986-26.934 0-50.278-9.748-69.518-28.986-18.982-18.982-28.728-42.324-28.728-69.258 0-27.19 9.746-50.278 28.728-69.518z m45.406-126.978c6.926-0.77 14.11-1.282 21.292-1.282 7.182 0 14.108 0.512 20.778 1.282-6.67-0.77-13.596-1.026-20.778-1.026-7.184 0-14.366 0.256-21.292 1.026z m223.942-6.412c45.66 45.66 72.854 98.504 81.83 159.042h-89.268c-7.954-35.656-25.91-67.464-53.614-94.914-27.962-27.96-60.026-45.916-96.454-53.87v-91.578c60.028 9.238 112.616 36.428 157.506 81.32z m-244.464-82.344v91.834c-37.708 7.696-71.056 25.654-99.788 54.64-27.19 27.192-44.89 58.488-53.1 93.63h-93.886c8.978-60.026 36.17-112.612 81.318-157.76 46.942-46.946 102.096-74.392 165.456-82.344z m-165.456 492.266c-45.66-45.404-72.852-99.02-81.574-159.814h93.374c7.696 36.426 25.652 69.004 53.87 97.22 29.244 28.986 62.848 47.458 101.07 54.898v90.55c-63.876-7.952-119.284-35.398-166.74-82.854z m492.776-167.51c-7.696 64.13-35.14 120.052-82.856 167.51-44.89 45.146-97.478 72.336-157.504 81.572v-90.294c36.428-7.952 68.49-25.908 96.454-53.872 30.268-30.268 48.482-65.154 55.666-104.916h88.24z" fill="" p-id="1485"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

51
src/styles/sim-text-dark.scss Normal file
View File

@ -0,0 +1,51 @@
$bg-color: #1e1e1e;
$tree-title-bg-color: #3e3e3e;
//#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;
// }
//}
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;
}

51
src/styles/sim-text-light.scss Normal file
View File

@ -0,0 +1,51 @@
$bg-color: #ffffff;
$tree-title-bg-color: #dddddd;
//#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;
// }
//}
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;
}

5
src/utils/file-type.js
View File

@ -2,10 +2,10 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
export const suffix = {
simText: [
'vue','asp','jsp',
'vue','asp','jsp','TXT',
'xml','xsl','iml','m','bas','prg','cmd',
'sass','sas','php','lst','key','pem','log',
'cmake','db','gradle','bat',''
'cmake','db','gradle','bat','','conf'
],
compressedFile: [
'zip','tar','jar','tar.gz','tgz','tar.bz2'
@ -40,6 +40,7 @@ iconClass.set('go','file-go')
iconClass.set('DS_Store','file-Ds-store')
iconClass.set('jar','file-jar')
iconClass.set('properties','file-properties')
iconClass.set('conf','file-conf')
iconClass.set('factories','file-factories')
iconClass.set('class','file-class')
iconClass.set('excel','file-excel')

51
src/views/demo/index.vue
View File

@ -1,48 +1,36 @@
<template>
<div id="dir-tree">
<!--<file-tree :directoryTreeData="compressedFileData"></file-tree>-->
<div>
<fancy-tree v-if="source.length > 0" :directoryTreeData="source"></fancy-tree>
</div>
</template>
<script>
import $ from "jquery";
import 'jquery.fancytree/dist/skin-lion/ui.fancytree.less'; // CSS or LESS
import {createTree} from 'jquery.fancytree';
import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';
import FancyTree from"@/components/FancyTree"
import api from '@/api/file-api'
import FileTree from"@/components/FileTree"
export default {
components: {FileTree},
components: {FancyTree},
data() {
return {
compressedFileData: []
source: []
}
},
mounted() {
const tree = createTree('#dir-tree', {
extensions: ['edit', 'filter'],
source: [ { "title": "Node 1", "key": "1" },
{"title": "Folder 2","key": "2","folder": true,"children": [
{ "title": "Node 2.1", "key": "3" },
{ "title": "Node 2.2", "key": "4" }
]}
]
});
created() {
api.listfiles({
username: this.$store.state.user.name,
path: "",
tempDir: this.tempDir
}).then(res => {
this.compressedFileData = res.data
this.source = res.data
console.log(this.source)
})
},
mounted() {
api.listfiles({
username: this.$store.state.user.name,
path: "",
tempDir: this.tempDir
}).then(res => {
this.source = res.data
})
},
computed: {
@ -53,10 +41,5 @@
</script>
<style lang="scss" scoped>
#dir-tree{
height: 500px;
width: 250px;
overflow: auto;
}
</style>