system-file/web-vue/src/components/FileSidebar.vue

<template>
  <div class="sidebar">
    <el-menu
      :default-active="activeMenu"
      class="sidebar-menu"
      @select="handleSelect"
    >
      <el-menu-item index="my-files">
        <el-icon><FolderOpened /></el-icon>
        <span>我的文档</span>
      </el-menu-item>
      <el-menu-item index="my-share">
        <el-icon><Share /></el-icon>
        <span>我的共享</span>
      </el-menu-item>
      <el-menu-item index="shared-to-me">
        <el-icon><User /></el-icon>
        <span>共享给我</span>
      </el-menu-item>
      <el-menu-item index="trash">
        <el-icon><Delete /></el-icon>
        <span>回收站</span>
      </el-menu-item>
    </el-menu>
    
    <div class="storage-info">
      <div class="storage-title">存储空间</div>
      <el-progress :percentage="storagePercent" :stroke-width="8" />
      <div class="storage-text">{{ usedStorage }} / {{ totalStorage }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue'
import { FolderOpened, Share, User, Delete } from '@element-plus/icons-vue'

const props = defineProps({
  activeMenu: { type: String, default: 'my-files' },
  storagePercent: { type: Number, default: 35 },
  usedStorage: { type: String, default: '3.5 GB' },
  totalStorage: { type: String, default: '10 GB' }
})

const emit = defineEmits(['select'])

const handleSelect = (index) => {
  emit('select', index)
}
</script>

<style scoped>
.sidebar {
  width: 200px;
  background: #fff;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-menu {
  flex: 1;
  border-right: none;
  padding-top: 10px;
}

.sidebar-menu :deep(.el-menu-item) {
  height: 46px;
  line-height: 46px;
}

.storage-info {
  padding: 16px;
  border-top: 1px solid #e4e7ed;
}

.storage-title {
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
}

.storage-text {
  font-size: 12px;
  color: #909399;
  margin-top: 6px;
  text-align: center;
}
</style>