91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
|
<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>
|