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": {
"root": true,
"env": {
"node": true
"node": true,
"vue/setup-compiler-macros": true
},
"extends": [
"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 }"
>
<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>
<FileTitle @leftclick="leftclick" @changetitlestate="changetitlestate" @changetitle="changetitle" :item="item" />
</div>
</template>
<script>
import FileTitle from './FileTitle.vue';
import { useStore } from 'vuex';
export default {
name: 'FileFiled',
components:{
FileTitle,
},
props:{
item:{
type:Object,
required:true,
},
filename:{
type:String,
required:true,
}
},
setup(props,context){
let store = useStore();
const leftclick = () => {
context.emit('fileleftclick',props.item);
}
@ -41,15 +50,30 @@ export default {
}
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 titleclick = () => {
if (props.item.is_selected) {
context.emit("changeTitleState",props.item);
}
else {
context.emit("leftclick");
}
}
const changetitlestate = () => {
context.emit('changetitlestate',props.item);
const changeTitleState = () => {
context.emit('changeTitleState',props.item);
}
const changetitle = (newname) => {
context.emit('changetitle',{
const changeTitle = (newname) => {
context.emit('changeTitle',{
item:props.item,
newname,
});
@ -59,8 +83,9 @@ export default {
leftclick,
rightclick,
doubleclick,
changetitle,
changetitlestate,
changeTitle,
changeTitleState,
titleclick,
}
}
}
@ -85,4 +110,25 @@ export default {
border: 0.1vh solid #99d1ff;
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>

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

Write Preview
Loading…
Cancel
Save