#文件管理器

<section class="file-manager" data-state="ready" data-view="list" aria-label="工作空间文件">
<aside data-file-manager-navigation><nav aria-label="文件位置"><a href="#workspace" aria-current="page">工作区</a><a href="#recent">最近</a></nav></aside>
<main>
  <header data-file-manager-header>
    <nav aria-label="当前位置"><ol><li><a href="#workspace">工作区</a></li><li aria-current="page">项目</li></ol></nav>
    <label data-file-manager-search><span class="sr-only">搜索文件</span><input type="search" /></label>
  </header>
  <div data-file-manager-toolbar>
    <button type="button" data-file-action="new-folder">新建文件夹</button>
    <button type="button" data-file-view="list" aria-pressed="true">列表</button>
  </div>
  <div data-file-manager-viewport data-view="list" role="listbox" aria-multiselectable="true">
    <button type="button" role="option" data-file-item data-file-value="design" aria-selected="true"><strong data-file-label>DESIGN.md</strong><span>Markdown</span></button>
  </div>
</main>
</section>
<script type="module">
import "@a3s-lab/ui";
import "@a3s-lab/ui/file-manager";
const manager = document.querySelector(".file-manager");
manager.addEventListener("a3s:file-manager-before-action", event => {
  if (!authorizeFileAction(event.detail)) event.preventDefault();
});
manager.addEventListener("a3s:file-manager-action", event => runFileAction(event.detail));
</script>