优化这段代码的样式让他更美观template div div class=breadcrumb span v-for=folder index in currentPath key=folderid class=breadcrumb-item click=goToFolderindex folde

<template>
  <div>
    <div class="breadcrumb">
      <span
        v-for="(folder, index) in currentPath"
        :key="folder.id"
        class="breadcrumb-item"
        @click="goToFolder(index)"
      >
        {{ folder.name }}
      </span>
    </div>
<pre><code>&lt;div class=&quot;file-list&quot;&gt;
  &lt;div class=&quot;custom-tree-node&quot; v-for=&quot;folder in folders&quot; :key=&quot;folder.id&quot;&gt;
    &lt;span @click=&quot;goToFolder(folder)&quot;&gt;{{ folder.name }}&lt;/span&gt;
    &lt;span class=&quot;file-action&quot; @click=&quot;showContextMenu($event, folder)&quot;
      &gt;右键菜单&lt;/span
    &gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div
  class=&quot;context-menu&quot;
  v-if=&quot;contextMenu.show&quot;
  :style=&quot;{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }&quot;
&gt;
  &lt;ul&gt;
    &lt;li @click=&quot;createFolder&quot;&gt;新建目录&lt;/li&gt;
    &lt;li @click=&quot;deleteFolder(contextMenu.selectedNode)&quot;&gt;删除目录&lt;/li&gt;
    &lt;li @click=&quot;renameFolder(contextMenu.selectedNode)&quot;&gt;重命名目录&lt;/li&gt;
    &lt;li @click=&quot;uploadFile(contextMenu.selectedNode)&quot;&gt;上传文件&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      folders: [], // 文件夹列表
      currentPath: [], // 当前路径
      contextMenu: {
        x: 0,
        y: 0,
        show: false,
        selectedNode: null
      }
    };
  },
  methods: {
    goToFolder(folder) {
      // 切换到指定目录
      if (typeof folder === 'number') {
        // 如果传入的是索引，表示返回上一级目录
        this.currentPath.splice(folder + 1);
      } else {
        // 否则进入该目录
        this.currentPath.push(folder);
      }

      // 更新文件夹列表
      this.updateFolderList();
    },
    showContextMenu(e, node) {
      // 右键点击文件或文件夹时显示右键菜单
      e.preventDefault();
      this.contextMenu.selectedNode = node;
      this.contextMenu.x = e.clientX;
      this.contextMenu.y = e.clientY;
      this.contextMenu.show = true;
    },
    createFolder() {
      // 新建目录
      const folderName = prompt('请输入目录名称');
      if (folderName) {
        // 模拟创建目录
        const newFolder = { id: Date.now(), name: folderName, type: 'folder', children: [] };
        this.contextMenu.selectedNode.children.push(newFolder);
      }
    },
    deleteFolder(folder) {
      // 删除目录
      const confirmDelete = confirm(`确定要删除目录 ${folder.name} 吗？`);
      if (confirmDelete) {
        // 模拟删除目录
        const index = this.contextMenu.selectedNode.children.indexOf(folder);
        if (index !== -1) {
          this.contextMenu.selectedNode.children.splice(index, 1);
        }
      }
    },
    renameFolder(folder) {
      // 重命名目录
      const newName = prompt('请输入新的目录名称', folder.name);
      if (newName) {
        // 模拟重命名目录
        folder.name = newName;
      }
    },
    uploadFile(folder) {
      // 上传文件
      const fileName = prompt('请输入文件名称');
      if (fileName) {
        // 模拟上传文件
        const newFile = { id: Date.now(), name: fileName, type: 'file' };
        folder.children.push(newFile);
      }
    },
    updateFolderList() {
      // 模拟根据当前路径更新文件夹列表
      const currentFolder = this.currentPath.length
        ? this.currentPath[this.currentPath.length - 1]
        : null;
      this.folders = currentFolder ? currentFolder.children : [];
    }
  },
  mounted() {
    // 初始化文件夹列表
    this.folders = [
      {
        id: 1,
        name: '文件夹1',
        type: 'folder',
        children: [
          { id: 2, name: '文件1', type: 'file' },
          { id: 3, name: '文件2', type: 'file' },
          {
            id: 4,
            name: '文件夹2',
            type: 'folder',
            children: [
              { id: 5, name: '文件3', type: 'file' },
              { id: 6, name: '文件4', type: 'file' },
              { id: 7, name: '文件5', type: 'file' }
            ]
          }
        ]
      },
      {
        id: 8,
        name: '文件夹3',
        type: 'folder',
        children: [
          { id: 9, name: '文件6', type: 'file' },
          { id: 10, name: '文件7', type: 'file' },
          { id: 11, name: '文件8', type: 'file' }
        ]
      }
    ];
  }
};
</script>
<style scoped>
.breadcrumb {
  margin-bottom: 10px;
}

.breadcrumb-item {
  cursor: pointer;
}

.breadcrumb-separator {
  margin: 0 5px;
}

.file-list {
  margin-bottom: 10px;
}

.custom-tree-node {
  display: flex;
  align-items: center;
}

.file-action {
  margin-left: 5px;
  cursor: pointer;
}

.context-menu {
  position: fixed;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 9999;
}

.context-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.context-menu li {
  cursor: pointer;
  padding: 5px;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}
</style