云文件系统初始化

web-vue/src/components/FileSidebar.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="sidebar">
+    <el-menu
+      :default-active="activeMenu"
+      class="sidebar-menu"
+      @select="handleSelect"
+    >
+      <el-menu-item index="my-files">
+        <el-icon><Document /></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 { Document, 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>