最近在研究monaco做开发，发现侧边栏的使用还比较高频，所以想基于vue抽取实现一个仿vscode的侧边栏，同时也借鉴了webstorm的实现效果，取百家之长吧，先看一眼效果：

链接地址： vs-code-slider

基于vue3实现仿vs-code的侧边文件管理菜单

使用

pnpm install vs-code-slider

1. 文件类型的图标：

如不满足，可以issues留言增加

如何使用组件呢，参考demo：

<script setup lang="ts">
import { VsCodeSlider } from 'vs-code-slider';
import {ref} from 'vue';

const arr = ref([
    'vue/d.js',
    'vue/README.md',
    'vue/12.vue',
    'vue/test.md'
]);

</script>

<template>
    <VsCodeSlider
        :files="arr"
    />
</template>
<style scoped>
</style>

组件的props说明如下：

prop	类型	可选值	默认值	说明
baseDir	string	-	-	展示在组件左上角的名称，当不传时，默认是file解析之后的最外层目录名称，如果解析之后有多个，则显示'未命名'
files	Array	-	[]	文件数组,当前支持的是完整文件的path组成的数组，具体可以参考例子,组件会自动对层级进行处理和排序
theme	string	-	light/dark	暗黑主题和白色主题
width	number	-	280	侧边栏的默认宽度
defaultOpen	bool	-	false	是否默认展示一级目录
currentFile	sting	-	最后一次点击的文件名称	当前正在查看的文件，为了顶部的定位到当前文件来使用
bgColor	string	-	-	侧边栏的背景色，优先级最高
disabled	bool	-	false	是否禁用操作

2.功能

部分功能完善中，欢迎pr

2.1 文件排序

已支持，默认对文件的按照字母序升序进行排序，同级内文件和字母各自按照升序排列

2.2 全部展开和全部收起

已支持

2.3 查找

待支持

2.4 定位

待支持

2.5 增加文件夹

待支持

2.6 增加文件

待支持

2.7 配置主题

最新0.0.5版本支持配置主题

暗黑系	白色系	自定义bgColor

欢迎提需求