云文件系统初始化

web-vue/src/components/FileToolbar.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="file-toolbar">
+    <!-- 第一行：视图切换 + 搜索框 + 上传/新建 -->
+    <div class="toolbar-top">
+      <el-button-group>
+        <el-button :type="currentMode === 'table' ? 'primary' : ''" @click="changeMode('table')">
+          <el-icon><List /></el-icon>
+        </el-button>
+        <el-button :type="currentMode === 'grid' ? 'primary' : ''" @click="changeMode('grid')">
+          <el-icon><Grid /></el-icon>
+        </el-button>
+      </el-button-group>
+
+      <el-input
+        v-model="searchText"
+        placeholder="搜索文件..."
+        clearable
+        class="search-input"
+        @keyup.enter="doSearch"
+        @input="onSearchInput"
+      >
+        <template #prefix><el-icon><Search /></el-icon></template>
+      </el-input>
+
+      <el-button-group v-if="menuType === 'my-files'">
+        <el-button type="primary" @click="$emit('upload')">
+          <el-icon><Upload /></el-icon>
+          <span style="margin-left: 4px">上传文件</span>
+        </el-button>
+        <el-button @click="$emit('newFolder')">
+          <el-icon><FolderAdd /></el-icon>
+          <span style="margin-left: 4px">新建文件夹</span>
+        </el-button>
+      </el-button-group>
+      
+      <el-button type="danger" v-if="menuType === 'trash'" @click="$emit('emptyTrash')">
+        <el-icon><Delete /></el-icon>
+        <span style="margin-left: 4px">清空回收站</span>
+      </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>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { List, Grid, Upload, FolderAdd, Delete, Back, Search } 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 }
+})
+
+const emit = defineEmits([
+  'update:viewMode', 
+  'update:searchKeyword', 
+  'search', 
+  'refresh', 
+  'upload', 
+  'newFolder', 
+  'emptyTrash',
+  'goBack'
+])
+
+const currentMode = ref(props.viewMode)
+const searchText = ref(props.searchKeyword)
+
+watch(() => props.viewMode, (val) => {
+  currentMode.value = val
+})
+
+watch(() => props.searchKeyword, (val) => {
+  searchText.value = val
+})
+
+const changeMode = (mode) => {
+  currentMode.value = mode
+  emit('update:viewMode', mode)
+}
+
+const onSearchInput = (val) => {
+  emit('update:searchKeyword', val)
+}
+
+const doSearch = () => {
+  emit('search')
+}
+</script>
+
+<style scoped>
+.file-toolbar {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  gap: 12px;
+  padding: 12px 16px;
+}
+
+.toolbar-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.search-input {
+  flex: 1;
+}
+
+.toolbar-bottom {
+  display: flex;
+  align-items: center;
+}
+
+.path-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.current-path {
+  font-size: 13px;
+  color: #606266;
+  word-break: break-all;
+}
+</style>