From 02eb8cfe1c544928748db610e43a1fc075dec2b3 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 14 Apr 2026 08:03:15 +0900
Subject: [PATCH] Update room.vue

---
 packages/frontend/src/pages/room.vue | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/frontend/src/pages/room.vue b/packages/frontend/src/pages/room.vue
index 85b3cb2af4..2bc5d3dfb6 100644
--- a/packages/frontend/src/pages/room.vue
+++ b/packages/frontend/src/pages/room.vue
@@ -62,6 +62,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkButton v-if="isEditMode" @click="exitEditMode">Exit edit mode</MkButton>
 			<MkButton v-if="!isEditMode" @click="enterEditMode">Edit mode</MkButton>
 			<MkButton v-if="isEditMode" @click="addObject">addObject</MkButton>
+			<MkButton @click="expor">Export</MkButton>
+			<MkButton @click="impor">Import</MkButton>
 		</div>
 	</template>
 </div>
@@ -412,6 +414,37 @@ function save() {
 	localStorage.setItem('roomData', JSON.stringify(engine.value.roomState));
 }
 
+function expor() {
+	if (engine.value == null) return;
+	const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(engine.value.roomState));
+	const dlAnchorElem = window.document.createElement('a');
+	dlAnchorElem.setAttribute('href', dataStr);
+	dlAnchorElem.setAttribute('download', 'room.json');
+	dlAnchorElem.click();
+}
+
+function impor() {
+	if (engine.value == null) return;
+	const inputElem = window.document.createElement('input');
+	inputElem.setAttribute('type', 'file');
+	inputElem.setAttribute('accept', 'application/json');
+	inputElem.addEventListener('change', () => {
+		const file = inputElem.files?.[0];
+		if (file == null) return;
+		const reader = new FileReader();
+		reader.onload = () => {
+			try {
+				localStorage.setItem('roomData', reader.result as string);
+				window.location.reload();
+			} catch (e) {
+				alert('Failed to load room data: ' + e);
+			}
+		};
+		reader.readAsText(file);
+	});
+	inputElem.click();
+}
+
 definePage(() => ({
 	title: 'Room',
 	icon: 'ti ti-door',