diff --git a/coeditor_frontend/package.json b/coeditor_frontend/package.json
index 3a40c46..7cbfef0 100644
--- a/coeditor_frontend/package.json
+++ b/coeditor_frontend/package.json
@@ -39,7 +39,8 @@
   "eslintConfig": {
     "root": true,
     "env": {
-      "node": true
+      "node": true,
+      "vue/setup-compiler-macros": true
     },
     "extends": [
       "plugin:vue/vue3-essential",
diff --git a/coeditor_frontend/src/components/FileFiled.vue b/coeditor_frontend/src/components/FileFiled.vue
index 47a01cc..07ae358 100644
--- a/coeditor_frontend/src/components/FileFiled.vue
+++ b/coeditor_frontend/src/components/FileFiled.vue
@@ -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 changetitlestate = () => {
-      context.emit('changetitlestate',props.item);
+    const titleclick = () => {
+        if (props.item.is_selected) {
+            context.emit("changeTitleState",props.item);
+        }
+        else {
+            context.emit("leftclick");
+        }
+      }
+
+    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>
diff --git a/coeditor_frontend/src/components/FileTitle.vue b/coeditor_frontend/src/components/FileTitle.vue
deleted file mode 100644
index 9c0fbc4..0000000
--- a/coeditor_frontend/src/components/FileTitle.vue
+++ /dev/null
@@ -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>
diff --git a/coeditor_frontend/src/components/FolderFiled.vue b/coeditor_frontend/src/components/FolderFiled.vue
deleted file mode 100644
index 757585d..0000000
--- a/coeditor_frontend/src/components/FolderFiled.vue
+++ /dev/null
@@ -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>
diff --git a/coeditor_frontend/src/views/HomeView.vue b/coeditor_frontend/src/views/HomeView.vue
index d027e9f..91662ee 100644
--- a/coeditor_frontend/src/views/HomeView.vue
+++ b/coeditor_frontend/src/views/HomeView.vue
@@ -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,