云文件管理系统上传组件优化

web-vue/src/components/FileToolbar.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="file-toolbar">
     <!-- 第一行：视图切换 + 搜索框 + 上传/新建 -->
     <div class="toolbar-top">
@@ -29,7 +29,7 @@
         </el-button>
         <el-button @click="$emit('newFolder')">
           <el-icon><FolderAdd /></el-icon>
-          <span style="margin-left: 4px">新建文件夹</span>
+          <span style="margin-left: 4px">新建目录</span>
         </el-button>
       </el-button-group>
       
@@ -39,28 +39,40 @@
       </el-button>
     </div>
 
-    <!-- 第二行：前进后退 + 路径 -->
-    <div class="toolbar-bottom">
-      <div class="path-controls">
-        <el-button v-if="showBack" @click="$emit('goBack')" circle title="返回上级">
-          <el-icon><Back /></el-icon>
-        </el-button>
-        <span class="current-path">{{ currentPath }}</span>
-      </div>
+    <!-- 第二行：面包屑导航 -->
+    <div class="toolbar-bottom" v-if="menuType !== 'trash'">
+      <el-icon class="breadcrumb-icon"><Folder /></el-icon>
+      <el-breadcrumb separator="/" v-if="folderStack.length > 0">
+        <el-breadcrumb-item>
+          <span class="breadcrumb-link" @click="$emit('goBack', -1)">根目录</span>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item 
+          v-for="(folder, index) in folderStack" 
+          :key="index"
+        >
+          <span 
+            class="breadcrumb-link" 
+            :class="{ 'is-last': index === folderStack.length - 1 }"
+            @click="handleBreadcrumbClick(index)"
+          >{{ folder.name }}</span>
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+      <span v-else class="current-path">根目录</span>
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
-import { List, Grid, Upload, FolderAdd, Delete, Back, Search } from '@element-plus/icons-vue'
+import { List, Grid, Upload, FolderAdd, Delete, Search, Folder } from '@element-plus/icons-vue'
 
 const props = defineProps({
   viewMode: { type: String, default: 'table' },
   searchKeyword: { type: String, default: '' },
   menuType: { type: String, default: 'my-files' },
   currentPath: { type: String, default: '/' },
-  showBack: { type: Boolean, default: false }
+  showBack: { type: Boolean, default: false },
+  folderStack: { type: Array, default: () => [] }
 })
 
 const emit = defineEmits([
@@ -97,6 +109,12 @@ const onSearchInput = (val) => {
 const doSearch = () => {
   emit('search')
 }
+
+const handleBreadcrumbClick = (index) => {
+  // 点击当前项不跳转
+  if (index === props.folderStack.length - 1) return
+  emit('goBack', index)
+}
 </script>
 
 <style scoped>
@@ -105,7 +123,6 @@ const doSearch = () => {
   flex-direction: column;
   background: #fff;
   border-bottom: 1px solid #e4e7ed;
-  gap: 12px;
   padding: 12px 16px;
 }
 
@@ -122,17 +139,56 @@ const doSearch = () => {
 .toolbar-bottom {
   display: flex;
   align-items: center;
+  min-height: 32px;
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px solid #ebeef5;
 }
 
-.path-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.breadcrumb-icon {
+  margin-right: 8px;
+  color: #f7b32b;
+  font-size: 18px;
 }
 
 .current-path {
-  font-size: 13px;
+  font-size: 14px;
   color: #606266;
-  word-break: break-all;
+}
+
+.breadcrumb-link {
+  cursor: pointer;
+  color: #409eff;
+}
+
+.breadcrumb-link:hover {
+  color: #66b1ff;
+}
+
+.breadcrumb-link.is-last {
+  color: #303133;
+  cursor: default;
+  font-weight: 500;
+}
+
+:deep(.el-breadcrumb) {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.el-breadcrumb__item) {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.el-breadcrumb__inner) {
+  color: #606266;
+  display: flex;
+  align-items: center;
+}
+
+:deep(.el-breadcrumb__separator) {
+  display: flex;
+  align-items: center;
 }
 </style>