请写一个基于vue3+elementuiplus 的 windows资源管理示例代码，右侧文件信息采用中等图标的形式展示，左边资源树默认展开

下面是一个基于vue3+elementuiplus的windows资源管理示例代码，右侧文件信息采用中等图标的形式展示，左边资源树默认展开的实现：

<template>
  <div class="resource-management">
    <el-row>
      <el-col :span="6">
        <el-tree
          :data="treeData"
          show-checkbox
          default-expand-all
          node-key="id"
          :props="treeProps"
          @check-change="onCheckChange"
        ></el-tree>
      </el-col>
      <el-col :span="18">
        <el-row>
          <el-col :span="24">
            <el-input placeholder="请输入搜索内容" v-model="searchText" clearable></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-scrollbar>
              <el-row>
                <el-col :span="6" v-for="item in filteredItems" :key="item.id">
                  <div class="file-item" @click="onClickFile(item)">
                    <div class="file-icon">
                      <img :src="item.icon" />
                    </div>
                    <div class="file-name">{{ item.name }}</div>
                  </div>
                </el-col>
              </el-row>
            </el-scrollbar>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  name: 'ResourceManagement',

  data() {
    return {
      treeData: [
        {
          id: '1',
          label: '我的电脑',
          children: [
            {
              id: '11',
              label: 'C:',
              children: [
                {
                  id: '111',
                  label: 'Program Files',
                  children: [
                    {
                      id: '1111',
                      label: 'Google',
                      children: [
                        {
                          id: '11111',
                          label: 'Chrome',
                          icon: 'https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_chrome_icon_130645.png',
                          type: 'file',
                        },
                      ],
                    },
                    {
                      id: '1112',
                      label: 'Microsoft Office',
                      children: [
                        {
                          id: '11121',
                          label: 'Word',
                          icon: 'https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_word_icon_130301.png',
                          type: 'file',
                        },
                        {
                          id: '11122',
                          label: 'Excel',
                          icon: 'https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_excel_icon_130611.png',
                          type: 'file',
                        },
                        {
                          id: '11123',
                          label: 'PowerPoint',
                          icon: 'https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_ppt_icon_130525.png',
                          type: 'file',
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      checkedKeys: [],
      searchText: '',
      items: [
        {
          id: '11111',
          name: 'Chrome',
          icon: 'https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_chrome_icon_130645.png',
          type: 'file',
        },
        {
          id: '11121',
          name: 'Word',
          icon: 'https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_word_icon_130301.png',
          type: 'file',
        },
        {
          id: '11122',
          name: 'Excel',
          icon: 'https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_excel_icon_130611.png',
          type: 'file',
        },
        {
          id: '11123',
          name: 'PowerPoint',
          icon: 'https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_ppt_icon_130525.png',
          type: 'file',
        },
      ],
    }
  },

  setup() {
    const state = reactive({
      filteredItems: [],
    })

    const treeProps = {
      children: 'children',
      label: 'label',
    }

    const filteredItems = computed(() => {
      if (!state.searchText) {
        return state.items
      }

      return state.items.filter((item) => item.name.includes(state.searchText))
    })

    const onCheckChange = (checkedKeys) => {
      state.checkedKeys = checkedKeys
    }

    const onClickFile = (item) => {
      console.log(item)
    }

    return {
      treeProps,
      filteredItems,
      onCheckChange,
      onClickFile,
    }
  },
}
</script>

<style scoped>
.resource-management {
  height: 100%;
}

.file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.file-icon {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.file-icon img {
  width: 100%;
  height: 100%;
}

.file-name {
  font-size: 12px;
  text-align: center;
}
</style>

该示例代码中，使用了`el-tree`和`el-scrollbar`组件分别展示资源树和文件列表，并使用`computed`和`reactive`实现了搜索过滤功能。对于文件列表中的每一个文件，使用了`file-icon`和`file-name`两个样式类分别展示文件图标和名称。可以根据自己的需求进行样式的调整。