px7sihb6k
/
coeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize something

Browse Source
master
lc 8 months ago
parent 2ca10823c4
commit f9107dd04f
5 changed files with 82 additions and 196 deletions
Show Stats Download Patch File Download Diff File

3
coeditor_frontend/package.json
Unescape View File

@ -39,7 +39,8 @@
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,
"env": { "env": {
"node": true "node": true,
"vue/setup-compiler-macros": true
}, },
"extends": [ "extends": [
"plugin:vue/vue3-essential", "plugin:vue/vue3-essential",

74
coeditor_frontend/src/components/FileFiled.vue
Unescape View File

@ -3,29 +3,38 @@
:class="{ 'file-item-selected' : item.is_selected }" :class="{ 'file-item-selected' : item.is_selected }"
> >
<div class="file-item-icon" > <div class="file-item-icon" >
<img src="@/assets/file_icon.png" alt=""> <img v-if="item.type === 'file'" src="@/assets/file_icon.png" alt="">
<img v-if="item.type === 'folder'" src="@/assets/folder_icon.png" alt="">
</div>
<div class="file-item-title" @click.stop="titleclick">
<input v-if="item.editable" @click.stop="" @dblclick.stop="" type="text" :value="filename"
@input="$emit('update:filename', $event.target.value)"/>
<div v-else >
{{ item.name }}
</div>
</div> </div>
<FileTitle @leftclick="leftclick" @changetitlestate="changetitlestate" @changetitle="changetitle" :item="item" />
</div> </div>
</template> </template>
<script> <script>
import { useStore } from 'vuex';
import FileTitle from './FileTitle.vue';
export default { export default {
name: 'FileFiled', name: 'FileFiled',
components:{
FileTitle,
},
props:{ props:{
item:{ item:{
type:Object, type:Object,
required:true, required:true,
},
filename:{
type:String,
required:true,
} }
}, },
setup(props,context){ setup(props,context){
let store = useStore();
const leftclick = () => { const leftclick = () => {
context.emit('fileleftclick',props.item); context.emit('fileleftclick',props.item);
} }
@ -41,15 +50,30 @@ export default {
} }
const doubleclick = () => { const doubleclick = () => {
context.emit('open_file'); if(props.item.type === 'file'){
context.emit('openFile');
}
else {
store.commit('forwardPath',props.item.name + '/');
context.emit('ls');
}
} }
const changetitlestate = () => { const titleclick = () => {
context.emit('changetitlestate',props.item); if (props.item.is_selected) {
context.emit("changeTitleState",props.item);
}
else {
context.emit("leftclick");
}
}
const changeTitleState = () => {
context.emit('changeTitleState',props.item);
} }
const changetitle = (newname) => { const changeTitle = (newname) => {
context.emit('changetitle',{ context.emit('changeTitle',{
item:props.item, item:props.item,
newname, newname,
}); });
@ -59,8 +83,9 @@ export default {
leftclick, leftclick,
rightclick, rightclick,
doubleclick, doubleclick,
changetitle, changeTitle,
changetitlestate, changeTitleState,
titleclick,
} }
} }
} }
@ -85,4 +110,25 @@ export default {
border: 0.1vh solid #99d1ff; border: 0.1vh solid #99d1ff;
background: #cce8ff; background: #cce8ff;
} }
.file-item-title{
width: 6vw;
height: 4vw;
text-align: center;
overflow: hidden;
font-size: 1.2vw;
word-break: break-all;
}
.file-item-selected {
border: 0.1vh solid #99d1ff;
background: #cce8ff;
}
input {
width: 6vw;
height: 1.8vw;
overflow: hidden;
font-size: 1.2vw;
}
</style> </style>

60
coeditor_frontend/src/components/FileTitle.vue
Unescape View File

@ -1,60 +0,0 @@
<template>
<div class="file-item-title" @click.stop="titleclick">
<input v-if="item.editable" @click.stop="" @dblclick.stop="" type="text" v-model="item.name"/>
<div v-else >
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
name: 'FileTitle',
props:{
item:{
type:Object,
required:true,
}
},
setup(props,context){
const titleclick = () => {
if (props.item.is_selected) {
context.emit("changetitlestate");
}
else {
context.emit("leftclick");
}
}
return {
titleclick,
}
}
}
</script>
<style scoped>
.file-item-title{
width: 6vw;
height: 4vw;
text-align: center;
overflow: hidden;
font-size: 1.2vw;
word-break: break-all;
}
.file-item-selected {
border: 0.1vh solid #99d1ff;
background: #cce8ff;
}
input {
width: 6vw;
height: 1.8vw;
overflow: hidden;
font-size: 1.2vw;
}
</style>

98
coeditor_frontend/src/components/FolderFiled.vue
Unescape View File

@ -1,98 +0,0 @@
<template>
<div @click.stop="leftclick()" @dblclick="doubleclick()" @contextmenu.stop.prevent="rightclick($event)"
:class="{ 'file-item-selected' : item.is_selected }"
>
<div class="file-item-icon" >
<img src="@/assets/folder_icon.png" alt="">
</div>
<FileTitle @leftclick="leftclick" @changetitlestate="changetitlestate" @changetitle="changetitle" :item="item" />
</div>
</template>
<script>
import FileTitle from './FileTitle.vue';
import { useStore } from 'vuex';
export default {
name: 'FolderFiled',
components:{
FileTitle,
},
props:{
item:{
type:Object,
required:true,
}
},
setup(props,context){
let store = useStore();
const leftclick = () => {
context.emit('fileleftclick',props.item);
}
const rightclick = (event) => {
context.emit('filerightclick',{
item:props.item,
menuposition:{
top: event.clientY + 'px',
left: event.clientX + 'px',
},
})
}
const doubleclick = () => {
store.commit('forwardPath',props.item.name + '/');
context.emit('ls');
}
const changetitlestate = () => {
context.emit('changetitlestate',props.item);
}
const changetitle = () => {
context.emit('changetitle',props.item);
}
return {
leftclick,
rightclick,
doubleclick,
changetitle,
changetitlestate,
}
}
}
</script>
<style scoped>
.file-item {
width: 8vw;
height: 8vw;
overflow: hidden;
display: inline-block;
margin: 0 0.1vw 1vw 0.1vw;
border: 0.1vh solid white;
}
.file-item-icon > img {
width: 6vw;
height: 6vw;
}
.file-item-title{
width: 6vw;
height: 4vw;
text-align: center;
overflow: hidden;
font-size: 1.2vw;
word-break: break-all;
}
.file-item-selected {
border: 0.1vh solid #99d1ff;
background: #cce8ff;
}
</style>

43
coeditor_frontend/src/views/HomeView.vue
Unescape View File

@ -2,17 +2,15 @@
<PathBar @ls="ls" /> <PathBar @ls="ls" />
<ContentBase @click="leftclick" @contextmenu.prevent="rightclick($event)"> <ContentBase @click="leftclick" @contextmenu.prevent="rightclick($event)">
<div v-for="item in items" :key="item.name" class="file-item"> <div v-for="item in items" :key="item.name" class="file-item">
<FolderFiled v-model="item.newname" @changetitlestate="changetitlestate" @changetitle="changetitle" @select_item='select_item' @filerightclick="filerightclick" @fileleftclick="fileleftclick" @ls="ls" v-if="item.type==='folder'" :item="item" /> <FileFiled v-model:filename="item.newname" @changeTitleState="changeTitleState" @changeTitle="changeTitle" @selectItem='selectItem' @filerightclick="filerightclick" @fileleftclick="fileleftclick" @openFile='openFile' @ls='ls' :item="item" />
<FileFiled v-model="item.newname" @changetitlestate="changetitlestate" @changetitle="changetitle" @select_item='select_item' @filerightclick="filerightclick" @fileleftclick="fileleftclick" @open_file='open_file' v-if="item.type==='file'" :item="item" />
</div> </div>
<RightMenu v-if="menuvisible" @open_file="open_file" @turn_back="turn_back" :menutype="menutype" :menuposition="menuposition" /> <RightMenu v-if="menuvisible" @openFile="openFile" @turnBack="turnBack" :menutype="menutype" :menuposition="menuposition" />
</ContentBase> </ContentBase>
</template> </template>
<script> <script>
import ContentBase from '../components/ContentBase'; import ContentBase from '../components/ContentBase';
import FileFiled from '../components/FileFiled'; import FileFiled from '../components/FileFiled';
import FolderFiled from '../components/FolderFiled';
import RightMenu from '../components/RightMenu.vue'; import RightMenu from '../components/RightMenu.vue';
import PathBar from '../components/PathBar.vue'; import PathBar from '../components/PathBar.vue';
import { ref } from 'vue'; import { ref } from 'vue';
@ -20,13 +18,11 @@ import { useStore } from 'vuex';
import router from '@/router/index.js'; import router from '@/router/index.js';
import axios from 'axios'; import axios from 'axios';
export default { export default {
name: 'HomeView', name: 'HomeView',
components:{ components:{
ContentBase, ContentBase,
FileFiled, FileFiled,
FolderFiled,
RightMenu, RightMenu,
PathBar, PathBar,
}, },
@ -57,6 +53,7 @@ export default {
let item = resp.data.items[i]; let item = resp.data.items[i];
item.is_selected = false; item.is_selected = false;
item.editable = false; item.editable = false;
item.newname = item.name;
tmp.push(item); tmp.push(item);
} }
items.value = tmp; items.value = tmp;
@ -64,12 +61,12 @@ export default {
); );
} }
const select_item = (item) => { const selectItem = (item) => {
console.log("select");
let tmp = items.value; let tmp = items.value;
for (let i = 0;i < tmp.length;i++){ for (let i = 0;i < tmp.length;i++){
if (tmp[i].editable){ if (tmp[i].editable){
//rename //rename
console.log('rename',tmp[i].newname);
tmp[i].editable = false; tmp[i].editable = false;
} }
if (tmp[i] === item){ if (tmp[i] === item){
@ -83,7 +80,7 @@ export default {
selected_item = item; selected_item = item;
} }
const open_file = () => { const openFile = () => {
menuvisible.value = false; menuvisible.value = false;
menutype.value = "filemenu"; menutype.value = "filemenu";
if (!selected_item){ if (!selected_item){
@ -111,19 +108,19 @@ export default {
} }
// const add_file = () => { // const addFile = () => {
// } // }
const turn_back = () => { const turnBack = () => {
console.log('turn_back',store.state.user.path.join("")); console.log('turnBack',store.state.user.path.join(""));
store.commit('backPath'); store.commit('backPath');
ls(); ls();
} }
const leftclick = () => { const leftclick = () => {
menuvisible.value = false; menuvisible.value = false;
select_item(null); selectItem(null);
} }
const rightclick = (event) => { const rightclick = (event) => {
@ -133,26 +130,26 @@ export default {
top: event.clientY + 'px', top: event.clientY + 'px',
left: event.clientX + 'px', left: event.clientX + 'px',
}; };
select_item(null); selectItem(null);
} }
const fileleftclick = (item) => { const fileleftclick = (item) => {
menuvisible.value = false; menuvisible.value = false;
select_item(item); selectItem(item);
} }
const filerightclick = (data) => { const filerightclick = (data) => {
menutype.value = "filemenu"; menutype.value = "filemenu";
menuposition.value = data.menuposition; menuposition.value = data.menuposition;
menuvisible.value = true; menuvisible.value = true;
select_item(data.item); selectItem(data.item);
} }
const changetitlestate = (item) => { const changeTitleState = (item) => {
item.editable = true; item.editable = true;
} }
const changetitle = (data) => { const changeTitle = (data) => {
data.item.editable = true; data.item.editable = true;
rename(data.item,data.newname); rename(data.item,data.newname);
} }
@ -184,15 +181,15 @@ export default {
items, items,
selected_item, selected_item,
ls, ls,
select_item, selectItem,
fileleftclick, fileleftclick,
filerightclick, filerightclick,
leftclick, leftclick,
rightclick, rightclick,
open_file, openFile,
turn_back, turnBack,
changetitle, changeTitle,
changetitlestate, changeTitleState,
menuvisible, menuvisible,
menuposition, menuposition,
menutype, menutype,

Write Preview
Loading…
Cancel
Save