feat: 更新导航组件，添加新图标并优化布局；新增数据集和设置页面

2026-03-26 17:02:21 +08:00
parent 1255584f93
commit c1cff94114
11 changed files with 134 additions and 23 deletions
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -1,18 +1,35 @@
 <script>
+import Setting from '$lib/components/icons/Setting.svelte';
+import { openedDatasetDir } from '$lib/stores/dataset';
 import { currentActivate } from '$lib/stores/navigate';
+import { isNil } from 'es-toolkit';
 </script>

-<div class="flex flex-row items-center px-2">
-  <div role="tablist" class="tabs tabs-border tabs-sm">
-    <a role="tab" class={['tab', $currentActivate === 'dataset' && 'tab-active']} href="/"
-      >Dataset</a>
-    <a role="tab" class={['tab', $currentActivate === 'settings' && 'tab-active']} href="/#"
-      >Settings</a>
-    <a role="tab" class={['tab', $currentActivate === 'pictures' && 'tab-active']} href="/#"
-      >Pictures</a>
-    <a role="tab" class={['tab', $currentActivate === 'analysis' && 'tab-active']} href="/#"
-      >Analysis</a>
-  </div>
+<div role="tablist" class="tabs tabs-border tabs-sm px-2">
+  <a role="tab" class={['tab', $currentActivate === 'dataset' && 'tab-active']} href="/dataset"
+    >Dataset</a>
+  <a
+    role="tab"
+    class={[
+      'tab',
+      $currentActivate === 'pictures' && 'tab-active',
+      isNil($openedDatasetDir) && 'tab-disabled',
+    ]}
+    href="/#">Pictures</a>
+  <a
+    role="tab"
+    class={[
+      'tab',
+      $currentActivate === 'analysis' && 'tab-active',
+      isNil($openedDatasetDir) && 'tab-disabled',
+    ]}
+    href="/#">Analysis</a>
  <div class="grow"></div>
-  <div></div>
+  <a
+    role="tab"
+    class={['tab gap-1', $currentActivate === 'settings' && 'tab-active']}
+    href="/settings">
+    <Setting width="16" />
+    Settings
+  </a>
 </div>
--- a/src/lib/components/icons/Close.svelte
+++ b/src/lib/components/icons/Close.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...$$props}>
+  <path
+    fill="currentColor"
+    d="m12 12.727l-3.592 3.592q-.16.16-.354.15T7.7 16.3t-.16-.364q0-.203.16-.363L11.273 12L7.681 8.433q-.16-.16-.15-.364t.169-.363t.364-.16q.203 0 .363.16L12 11.298l3.567-3.592q.16-.16.354-.16t.354.16q.166.165.166.366t-.166.36L12.702 12l3.592 3.592q.16.16.16.354t-.16.354q-.165.166-.366.166t-.36-.166z" />
+</svg>
--- a/src/lib/components/icons/NewFolder.svelte
+++ b/src/lib/components/icons/NewFolder.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...$$props}>
+  <path
+    fill="currentColor"
+    d="M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h4.31q.323 0 .628.13q.305.132.522.349L11.596 7h7.789q.69 0 1.153.463T21 8.616v8.769q0 .69-.462 1.153T19.385 19zm0-1h14.769q.269 0 .442-.173t.173-.442v-8.77q0-.269-.173-.442T19.385 8h-8.19L9.366 6.173q-.096-.096-.202-.134Q9.06 6 8.946 6h-4.33q-.269 0-.442.173T4 6.616v10.769q0 .269.173.442t.443.173M4 18V6zm10.5-4.5V15q0 .214.143.357T15 15.5t.357-.143T15.5 15v-1.5H17q.214 0 .357-.143T17.5 13t-.143-.357T17 12.5h-1.5V11q0-.213-.143-.357T15 10.5t-.357.143T14.5 11v1.5H13q-.213 0-.357.143T12.5 13t.143.357t.357.143z" />
+</svg>
--- a/src/lib/components/icons/OpenFolder.svelte
+++ b/src/lib/components/icons/OpenFolder.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...$$props}>
+  <path
+    fill="currentColor"
+    d="M4.5 19q-.633 0-1.066-.434Q3 18.133 3 17.5V6.616q0-.633.491-1.125Q3.983 5 4.615 5h4.31q.323 0 .628.13q.305.132.522.349L11.596 7h8.731q.214 0 .357.143t.143.357t-.143.357t-.357.143h-9.133l-2-2H4.615q-.269 0-.442.173T4 6.616V18q0-.27.106-.202t.279.164l1.917-6.422q.162-.515.593-.835t.967-.32h12.823q.813 0 1.305.649q.49.649.254 1.425l-1.646 5.482q-.142.476-.545.768q-.403.291-.9.291zm.927-1h13.65q.211 0 .375-.115q.163-.116.221-.327l1.608-5.385q.096-.308-.097-.548q-.192-.24-.5-.24H7.861q-.211 0-.375.115t-.22.327zM4 11.546V6zM5.427 18l1.839-6.173q.057-.212.096-.327l.038-.115l-.067.24q-.067.24-.164.548l-1.607 5.385q-.058.211-.096.326z" />
+</svg>
--- a/src/lib/components/icons/Setting.svelte
+++ b/src/lib/components/icons/Setting.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...$$props}>
+  <path
+    fill="currentColor"
+    d="M10.96 21q-.349 0-.605-.229q-.257-.229-.319-.571l-.263-2.092q-.479-.145-1.036-.454q-.556-.31-.947-.664l-1.915.824q-.317.14-.644.03t-.504-.415L3.648 15.57q-.177-.305-.104-.638t.348-.546l1.672-1.25q-.045-.272-.073-.559q-.03-.288-.03-.559q0-.252.03-.53q.028-.278.073-.626l-1.672-1.25q-.275-.213-.338-.555t.113-.648l1.06-1.8q.177-.287.504-.406t.644.021l1.896.804q.448-.373.97-.673q.52-.3 1.013-.464l.283-2.092q.061-.342.318-.571T10.96 3h2.08q.349 0 .605.229q.257.229.319.571l.263 2.112q.575.202 1.016.463t.909.654l1.992-.804q.318-.14.645-.021t.503.406l1.06 1.819q.177.306.104.638t-.348.547L18.36 10.92q.082.31.092.569t.01.51q0 .233-.02.491q-.019.259-.088.626l1.69 1.27q.275.213.358.546t-.094.638l-1.066 1.839q-.176.306-.513.415q-.337.11-.654-.03l-1.923-.824q-.467.393-.94.673t-.985.445l-.264 2.111q-.061.342-.318.571t-.605.23zm.04-1h1.956l.369-2.708q.756-.2 1.36-.549q.606-.349 1.232-.956l2.495 1.063l.994-1.7l-2.189-1.644q.125-.427.166-.786q.04-.358.04-.72q0-.38-.04-.72t-.166-.747l2.227-1.683l-.994-1.7l-2.552 1.07q-.454-.499-1.193-.935q-.74-.435-1.4-.577L13 4h-1.994l-.312 2.689q-.756.161-1.39.52q-.633.358-1.26.985L5.55 7.15l-.994 1.7l2.169 1.62q-.125.336-.175.73t-.05.82q0 .38.05.755t.156.73l-2.15 1.645l.994 1.7l2.475-1.05q.589.594 1.222.953q.634.359 1.428.559zm.973-5.5q1.046 0 1.773-.727T14.473 12t-.727-1.773t-1.773-.727q-1.052 0-1.776.727T9.473 12t.724 1.773t1.776.727M12 12" />
+</svg>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import '../app.css';
+// Keep import sequence
 import Navigation from '$lib/components/Navigation.svelte';

 let { children } = $props();
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,5 +1,21 @@
 // Tauri doesn't have a Node.js server to do proper SSR
 // so we use adapter-static with a fallback to index.html to put the site in SPA mode
 // See: https://svelte.dev/docs/kit/single-page-apps
+
+import { openedDatasetDir } from "$lib/stores/dataset";
+import { redirect } from "@sveltejs/kit";
+import { isNil } from "es-toolkit";
+import { get } from "svelte/store";
+import type { LayoutLoad } from "./$types";
+
 // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
 export const ssr = false;
+
+export const load: LayoutLoad = async ({url}) => {
+  const currentOpenedDataset = get(openedDatasetDir);
+  console.debug('[Main Load]', currentOpenedDataset, url);
+
+  if (isNil(currentOpenedDataset) && url.pathname !== "/boot" && url.pathname !== "/settings") {
+    redirect(303, "/boot");
+  }
+}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,11 +0,0 @@
-<script lang="ts">
-import { afterNavigate } from '$app/navigation';
-import { currentActivate } from '$lib/stores/navigate';
-import '../app.css';
-
-afterNavigate(() => {
-  currentActivate.set('dataset');
-});
-</script>
-
-<main></main>
--- a/src/routes/boot/+page.svelte
+++ b/src/routes/boot/+page.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+import { afterNavigate } from '$app/navigation';
+import NewFolder from '$lib/components/icons/NewFolder.svelte';
+import OpenFolder from '$lib/components/icons/OpenFolder.svelte';
+import { currentActivate } from '$lib/stores/navigate';
+
+afterNavigate(() => {
+  currentActivate.set('dataset');
+});
+</script>
+
+<main class="flex flex-col justify-center items-center overflow-hidden size-full">
+  <div class="flex flex-col justify-center items-stretch gap-3">
+    <button class="btn">
+      <NewFolder width="20" />
+      New Dataset
+    </button>
+    <button class="btn">
+      <OpenFolder width="20" />
+      Open Dataset
+    </button>
+  </div>
+</main>
--- a/src/routes/dataset/+page.svelte
+++ b/src/routes/dataset/+page.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+import { afterNavigate } from '$app/navigation';
+import Close from '$lib/components/icons/Close.svelte';
+import NewFolder from '$lib/components/icons/NewFolder.svelte';
+import OpenFolder from '$lib/components/icons/OpenFolder.svelte';
+import { currentActivate } from '$lib/stores/navigate';
+
+afterNavigate(() => {
+  currentActivate.set('dataset');
+});
+</script>
+
+<main class="px-2 size-full flex flex-col items-stretch gap-1 overflow-hidden">
+  <div class="pt-1 flex flex-row items-center gap-1">
+    <button class="btn btn-ghost btn-sm">
+      <NewFolder width="20" />
+      Create new dataset
+    </button>
+    <button class="btn btn-ghost btn-sm">
+      <OpenFolder width="20" />
+      Open existing dataset
+    </button>
+    <button class="btn btn-ghost btn-sm">
+      <Close width="20" />
+      Close current dataset
+    </button>
+  </div>
+  <div class="grow flex flex-row items-stretch gap-2 px-2 pb-3">
+    <fieldset class="fieldset rounded-box border grow p-4">
+      <legend class="fieldset-legend px-1">Dataset settings</legend>
+    </fieldset>
+    <fieldset class="fieldset rounded-box border grow p-4">
+      <legend class="fieldset-legend px-1">Environment check</legend>
+    </fieldset>
+  </div>
+</main>
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { afterNavigate } from '$app/navigation';
+import { currentActivate } from '$lib/stores/navigate';
+
+afterNavigate(() => {
+  currentActivate.set('settings');
+});
+</script>