Refactor frontend build process in fly-deploy.yml and update pnpm cac…

…he setup
xijaja · Nov 14, 2024 · d1ffc37 · d1ffc37
1 parent 71f99db
commit d1ffc37
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 101 deletions.
diff --git a/.github/workflows/fly-deploy.yml b/.github/workflows/fly-deploy.yml
@@ -32,20 +32,17 @@ jobs:
           version: 9 # 使用 pnpm 9.x 版本
 
       # 步骤4: 配置 pnpm 缓存
-      # 获取 pnpm 存储目录路径，用于后续缓存
       - name: Get pnpm store directory
+        id: pnpm-cache
         shell: bash
         run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
 
       # 步骤5: 设置依赖缓存
-      # 这可以显著提升后续构建的速度
       - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
-          # 缓存 pnpm store 目录
-          path: ${{ env.STORE_PATH }}
-          # 使用 pnpm-lock.yaml 的哈希作为缓存键
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

diff --git a/svelte/src/lib/components/footer.svelte b/svelte/src/lib/components/footer.svelte
@@ -0,0 +1,16 @@
+<footer class="fixed bottom-0 left-0 right-0 py-12 text-center font-mono text-sm text-gray-500">
+	Made with ❤️ by <a
+		href="https://github.com/xijaja"
+		class="hover:decoration-primary font-bold decoration-2 underline-offset-8 hover:underline hover:decoration-dashed"
+	>
+		希嘉嘉
+	</a>
+	using
+	<a
+		href="https://github.com/xijaja/gone"
+		class="hover:decoration-primary font-bold decoration-2 underline-offset-8 hover:underline hover:decoration-dashed"
+	>
+		Gone
+	</a>
+	Template
+</footer>
diff --git a/svelte/src/lib/components/todo-example.svelte b/svelte/src/lib/components/todo-example.svelte
@@ -1,20 +1,9 @@
 <script lang="ts">
-	import { flip } from 'svelte/animate';
-	import { quintOut } from 'svelte/easing';
-	import { crossfade } from 'svelte/transition';
 	import { toast } from 'svelte-sonner';
 	import { Button } from './ui/button';
-	import { Checkbox } from './ui/checkbox';
 	import Input from './ui/input/input.svelte';
-	import { Label } from './ui/label';
-	import { X } from 'lucide-svelte';
-
-	// 定义 todo 的类型
-	interface Todo {
-		id: string; // 唯一标识
-		content: string; // 内容
-		done: boolean; // 是否完成
-	}
+	import TodoList from './todo-list.svelte';
+	import type { Todo } from '$lib/todo-type';
 
 	// 定义 todo 的初始值
 	const initialTodos: Todo[] = [
@@ -52,23 +41,6 @@
 	function deleteTodo(id: string) {
 		todos = todos.filter((todo) => todo.id !== id);
 	}
-
-	// 创建 crossfade 动画
-	const [send, receive] = crossfade({
-		duration: 400,
-		fallback(node, params) {
-			const style = getComputedStyle(node); // 获取节点的样式
-			const transform = style.transform === 'none' ? '' : style.transform; // 获取 transform 属性
-			return {
-				duration: 400, // 动画持续时间
-				easing: quintOut, // 动画缓动函数
-				css: (t) => `
-					transform: ${transform} scale(${t});
-					opacity: ${t}
-				` // 动画样式，t 是动画进度
-			};
-		}
-	});
 </script>
 
 <form class="mb-10 flex w-full gap-2" onsubmit={addTodo}>
@@ -79,59 +51,11 @@
 <div class="grid grid-cols-2 gap-4">
 	<div>
 		<h2 class="text-lg font-bold">Todo List</h2>
-		<div class="mt-4 flex flex-col gap-2">
-			{#each todos.filter((todo) => !todo.done).reverse() as todo (todo.id)}
-				<div
-					class="hover:bg-muted group flex items-center gap-2 rounded-md p-2 transition-colors"
-					in:receive={{ key: todo.id }}
-					out:send={{ key: todo.id }}
-					animate:flip
-				>
-					<Checkbox id={todo.id} bind:checked={todo.done} />
-					<Label
-						id={todo.id}
-						for={todo.id}
-						class="break-all text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-					>
-						{todo.content}
-					</Label>
-					<button
-						class="text-muted-foreground ml-auto hidden size-4 cursor-pointer hover:text-red-500 group-hover:block"
-						onclick={() => deleteTodo(todo.id)}
-					>
-						<X />
-					</button>
-				</div>
-			{/each}
-		</div>
+		<TodoList todos={todos.filter((todo) => !todo.done)} {deleteTodo} />
 	</div>
 
 	<div>
 		<h2 class="text-lg font-bold">Done List</h2>
-		<div class="mt-4 flex flex-col gap-2">
-			{#each todos.filter((todo) => todo.done).reverse() as todo (todo.id)}
-				<div
-					class="hover:bg-muted group flex items-center gap-2 rounded-md p-2 transition-colors"
-					in:receive={{ key: todo.id }}
-					out:send={{ key: todo.id }}
-					animate:flip
-				>
-					<Checkbox id={todo.id} bind:checked={todo.done} />
-					<Label
-						id={todo.id}
-						for={todo.id}
-						class="break-all text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-					>
-						{todo.content}
-					</Label>
-					<button
-						class="text-muted-foreground ml-auto hidden size-4 cursor-pointer hover:text-red-500 group-hover:block"
-						onclick={() => deleteTodo(todo.id)}
-					>
-						<X />
-					</button>
-				</div>
-			{/each}
-		</div>
+		<TodoList todos={todos.filter((todo) => todo.done)} {deleteTodo} />
 	</div>
 </div>
diff --git a/svelte/src/lib/components/todo-list.svelte b/svelte/src/lib/components/todo-list.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { X } from 'lucide-svelte';
+	import { flip } from 'svelte/animate';
+	import { quintOut } from 'svelte/easing';
+	import { crossfade } from 'svelte/transition';
+	import { Checkbox } from './ui/checkbox';
+	import { Label } from './ui/label';
+	import type { Todo } from '$lib/todo-type';
+
+	// 定义 props 的类型
+	interface Props {
+		todos: Todo[];
+		deleteTodo: (id: string) => void;
+	}
+
+	// todo list
+	// 使用 $bindable 绑定 props，这样可以在组件内部修改 todos 的值
+	let { todos = $bindable<Todo[]>([]), deleteTodo }: Props = $props();
+
+	// 创建 crossfade 动画
+	const [send, receive] = crossfade({
+		duration: 400,
+		fallback(node, params) {
+			const style = getComputedStyle(node); // 获取节点的样式
+			const transform = style.transform === 'none' ? '' : style.transform; // 获取 transform 属性
+			return {
+				duration: 400, // 动画持续时间
+				easing: quintOut, // 动画缓动函数
+				css: (t) => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				` // 动画样式，t 是动画进度
+			};
+		}
+	});
+</script>
+
+{#if todos && todos.length > 0}
+	<div class="mt-4 flex flex-col gap-2">
+		{#each todos.reverse() as todo (todo.id)}
+			<div
+				class="hover:bg-muted group flex items-center gap-2 rounded-md p-2 transition-colors"
+				in:receive={{ key: todo.id }}
+				out:send={{ key: todo.id }}
+				animate:flip
+			>
+				<Checkbox id={todo.id} bind:checked={todo.done} />
+				<Label
+					id={todo.id}
+					for={todo.id}
+					class="break-all text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+				>
+					{todo.content}
+				</Label>
+				<button
+					class="text-muted-foreground ml-auto hidden size-4 cursor-pointer hover:text-red-500 group-hover:block"
+					onclick={() => deleteTodo(todo.id)}
+				>
+					<X size={16} />
+				</button>
+			</div>
+		{/each}
+	</div>
+{/if}
diff --git a/svelte/src/lib/todo-type.ts b/svelte/src/lib/todo-type.ts
@@ -0,0 +1,6 @@
+// 定义 todo 的类型
+export interface Todo {
+  id: string; // 唯一标识
+  content: string; // 内容
+  done: boolean; // 是否完成
+}
diff --git a/svelte/src/routes/+page.svelte b/svelte/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import Footer from '$lib/components/footer.svelte';
 	import TodoExample from '$lib/components/todo-example.svelte';
 </script>
 
@@ -8,18 +9,4 @@
 	<TodoExample />
 </div>
 
-<footer class="fixed bottom-0 left-0 right-0 py-12 text-center font-mono text-sm text-gray-500">
-	Made with ❤️ by <a
-		href="https://github.com/xijaja"
-		class="font-bold decoration-2 underline-offset-8 hover:underline hover:decoration-primary hover:decoration-dashed"
-	>
-		希嘉嘉
-	</a>
-	using
-	<a
-		href="https://github.com/xijaja/gone"
-		class="font-bold decoration-2 underline-offset-8 hover:underline hover:decoration-primary hover:decoration-dashed"
-	>
-		Gone Template
-	</a>
-</footer>
+<Footer />