[+] Netease import dummy page

src/components/Button.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
     import { Layer } from "m3-svelte";
 
-let { icon, children, ...rest }: {
+let { icon, children, big, ...rest }: {
   icon?: string
   children?: any
+  big?: boolean
   [key: string]: any
 } = $props();
+
+let cls = $derived(big
+  ? "h-56px px-24px py-16px m3-font-title-medium w-full justify-center"
+  : "h-40px px-16px py-10px m3-font-label-large"
+)
 </script>
 
-<button class="hbox h-40px rounded-12px px-16px py-10px gap-8px mfg-on-primary-container mbg-inverse-primary m3-font-label-large relative" {...rest}>
+<button class="hbox gap-8px rounded-12px mfg-on-primary-container mbg-inverse-primary relative {cls}" {...rest}>
   <Layer/>
   {#if icon}
     <span class="size-20px {icon}"></span>

src/routes/+page.svelte

@@ -47,7 +47,7 @@
       {/each}
     </div>
     <div class="p-content">
-      <Button icon="i-material-symbols:cloud-download-outline">从网易云导入</Button>
+      <a href="/import/netease"><Button icon="i-material-symbols:cloud-download-outline">从网易云导入</Button></a>
     </div>
   </div>
 

src/routes/import/netease/+page.server.ts

@@ -0,0 +1,6 @@
+import type { PageServerLoad } from './$types';
+import { getSongsFromPlaylist, listPlaylists } from "$lib/server/songs.ts";
+
+export const load: PageServerLoad = async ({ params }) => ({
+  playlist: await getSongsFromPlaylist("14348145982")
+})

src/routes/import/netease/+page.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { LinearProgress, TextField, TextFieldOutlined } from "m3-svelte";
+  import AppBar from "../../../components/appbar/AppBar.svelte";
+  import Button from "../../../components/Button.svelte";
+    import type { NeteaseSongBrief } from "../../../shared/types";
+    import type { PageProps } from "./$types";
+
+  let link = $state('')
+
+  interface SongImportStatus {
+    song: NeteaseSongBrief
+    status: 'importing' | 'success' | 'failed-not-japanese' | 'failed-unknown'
+  }
+
+  let { data }: PageProps = $props()
+
+  let status = $state<'idle' | 'importing' | 'success' | 'error'>('importing')
+  let songs = $state(data.playlist.songs.map(song => ({ song, status: 'importing' })))
+  let progress = $derived({
+    total: songs.length,
+    done: songs.filter(song => song.status === 'success').length
+  })
+
+  function statusToIcon(stat: string): string {
+    switch (stat) {
+      case 'importing': return 'i-material-symbols:sync'
+      case 'success': return 'i-material-symbols:check'
+      case 'failed-not-japanese': return 'i-material-symbols:warning'
+      case 'failed-unknown': return 'i-material-symbols:error'
+    }
+    return ''
+  }
+</script>
+
+<AppBar title="从网易云导入"/>
+
+<div class="vbox gap-16px flex-1 min-h-0">
+  <div class="m3-font-body-medium mfg-on-surface-variant py-12px p-content">
+    去网易云 APP 找一个你喜欢的日本语歌单，点击分享，再点击复制链接，然后把链接粘贴到这里就可以开始导入了！
+  </div>
+  <div class="vbox p-content">
+    <TextFieldOutlined label="网易云歌单链接 / ID" bind:value={link} />
+  </div>
+
+  {#if status === 'importing'}
+    <div class="hbox gap-12px items-end! h-48px p-content">
+      <div class="m3-font-headline-small">正在导入</div>
+      <div class="m3-font-label-small pb-3px">{progress.done} / {progress.total} 首歌曲</div>
+    </div>
+    <LinearProgress percent={progress.done / progress.total * 100}/>
+  {/if}
+
+  <div class="vbox self-stretch flex-1 overflow-y-auto p-content min-h-0 gap-8px">
+    {#if status !== 'idle'}
+      {#each songs as song}
+        <div class="hbox gap-12px">
+          <span class={statusToIcon(song.status)}></span>
+          <span class="m3-font-title-large">{song.song.name}</span>
+        </div>
+      {/each}
+    {/if}
+  </div>
+
+  <div class="py-16px p-content">
+    <Button big icon="i-material-symbols:download">开始导入</Button>
+  </div>
+</div>

src/style/app.sass

@@ -3,6 +3,9 @@
     font-family: var(--m3-font)
     // color-scheme: light
 
+    *
+        flex-shrink: 0
+
 body
     margin: 0
     background: rgb(var(--m3-scheme-background))