公开完整前后端的代码

front/src/lib/components/TraceDetail/ModalButton.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Ticket } from '$lib/types/apiResponse';
+	import { ModalFooter, Button } from 'carbon-components-svelte';
+	let {
+		src,
+		t,
+		loading = false,
+		view = $bindable<'trace' | 'cancel' | 'update'>(),
+		open = $bindable<boolean>()
+	}: {
+		src: 'user' | 'operator' | null;
+		t: Ticket | null;
+		loading: boolean;
+		view: 'trace' | 'cancel' | 'update';
+		open: boolean;
+	} = $props();
+
+	function isTicketActive(t: Ticket | null): boolean {
+		if (!t) return false;
+		return t.status !== 'canceled' && t.status !== 'solved';
+	}
+</script>
+
+{#if loading}
+	<div></div>
+{:else if src === 'user' && isTicketActive(t)}
+	<!-- 用户工单卡片的下方按钮 -->
+	<ModalFooter>
+		<Button kind="danger" on:click={() => (view = 'cancel')}>取消工单</Button>
+		<Button kind="secondary" on:click={() => ((open = false), (view = 'trace'))}>返回</Button>
+	</ModalFooter>
+{:else if src === 'operator'}
+	<!-- 后台工单记录视图下的下方按钮 -->
+	<ModalFooter>
+		<Button kind="secondary" on:click={() => ((open = false), (view = 'trace'))}>返回   </Button>
+		<Button kind="primary" on:click={() => (view = 'update')}>更新状态</Button>
+	</ModalFooter>
+{/if}