Files tab: multi-selection, drag-and-drop, keyboard shortcuts, custom confirm modal, SVG icons

2026-06-01 01:16:51 +08:00
parent 645d8878cc
commit 2487d3bbaa
33 changed files with 2325 additions and 50 deletions
@@ -0,0 +1,69 @@
+<script>
+  import { createEventDispatcher } from 'svelte'
+
+  export let crumbs = []
+
+  const dispatch = createEventDispatcher()
+
+  function navigateTo(index) {
+    dispatch('navigate', index)
+  }
+</script>
+
+<nav class="breadcrumbs">
+  {#each crumbs as crumb, i}
+    {#if i > 0}
+      <span class="sep">/</span>
+    {/if}
+    {#if i === crumbs.length - 1}
+      <span class="crumb crumb--current">{crumb.name}</span>
+    {:else}
+      <button class="crumb crumb--link" on:click={() => navigateTo(i)}>{crumb.name}</button>
+    {/if}
+  {/each}
+</nav>
+
+<style>
+  .breadcrumbs {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 0;
+    font-size: 13px;
+    color: #999;
+  }
+
+  .sep {
+    color: #444;
+  }
+
+  .crumb {
+    font-size: 13px;
+  }
+
+  .crumb--current {
+    color: #ccc;
+  }
+
+  .crumb--link {
+    background: none;
+    border: none;
+    padding: 2px 4px;
+    color: #888;
+    cursor: pointer;
+    border-radius: 3px;
+    font-family: inherit;
+    font-size: 13px;
+    transition: color 0.12s, background 0.12s;
+  }
+
+  .crumb--link:hover {
+    color: #ccc;
+    background: #1e1e30;
+  }
+
+  .crumb--link:focus-visible {
+    outline: 2px solid #5588ff;
+    outline-offset: 1px;
+  }
+</style>