From cda8f091029eacb5be0365f246bea30fbb8db66d Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 23 Jul 2025 02:03:39 +0800
Subject: [PATCH] feat(stage-web): improved, both all devtools and 404

---
 apps/stage-web/src/layouts/default.vue         |  2 +-
 apps/stage-web/src/pages/[...all].vue          | 18 ++++++++++++++++--
 .../devtools/background-gradient-blending.vue  |  4 ++--
 .../src/pages/devtools/gesture-circle.vue      |  7 +++++--
 apps/stage-web/src/pages/devtools/polaroid.vue |  7 ++++---
 5 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/apps/stage-web/src/layouts/default.vue b/apps/stage-web/src/layouts/default.vue
index 03697b4d2..e917d47bc 100644
--- a/apps/stage-web/src/layouts/default.vue
+++ b/apps/stage-web/src/layouts/default.vue
@@ -23,7 +23,7 @@ import HeaderLink from '../components/Layouts/HeaderLink.vue'
       <HeaderLink />
     </div>
     <!-- Content -->
-    <div class="px-3 py-2 md:px-5 md:py-5" flex="~ col" mx-auto h-full max-w-screen-xl>
+    <div class="px-3 py-2 md:px-5 md:py-5" flex="~ col" h="[calc(100%-56px)]">
       <RouterView />
     </div>
   </div>
diff --git a/apps/stage-web/src/pages/[...all].vue b/apps/stage-web/src/pages/[...all].vue
index 6bda8c141..14b8c4e97 100644
--- a/apps/stage-web/src/pages/[...all].vue
+++ b/apps/stage-web/src/pages/[...all].vue
@@ -1,5 +1,19 @@
+<script setup lang="ts">
+import { Button } from '@proj-airi/stage-ui/components'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+</script>
+
 <template>
-  <div>
-    404 - Page not found
+  <div h-full w-full flex flex-col items-center justify-center gap-4>
+    <div text-3xl>
+      Where are we?
+    </div>
+    <div>
+      <Button @click="router.go(-1)">
+        Go Back
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/apps/stage-web/src/pages/devtools/background-gradient-blending.vue b/apps/stage-web/src/pages/devtools/background-gradient-blending.vue
index 397b40c3f..f9833a489 100644
--- a/apps/stage-web/src/pages/devtools/background-gradient-blending.vue
+++ b/apps/stage-web/src/pages/devtools/background-gradient-blending.vue
@@ -164,7 +164,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="h-fit w-full flex flex-col gap-4">
+  <div class="h-full w-full flex flex-col gap-4">
     <div class="relative w-full overflow-hidden rounded-xl">
       <div class="pointer-events-none left-0 right-0 top-0 z-10 flex items-center justify-center backdrop-blur-md" :style="{ background: topBar }">
         <div class="py-4 text-center text-sm text-white font-medium">
@@ -177,7 +177,7 @@ onUnmounted(() => {
       <img
         ref="imageRef"
         :src="images[0]"
-        class="h-full max-h-[calc(100dvh-25rem)] w-full object-cover"
+        class="h-full max-h-[calc(100dvh-28rem)] w-full object-cover"
       >
 
       <!-- Live2D area placeholder -->
diff --git a/apps/stage-web/src/pages/devtools/gesture-circle.vue b/apps/stage-web/src/pages/devtools/gesture-circle.vue
index ab93324b4..0ff7fdab6 100644
--- a/apps/stage-web/src/pages/devtools/gesture-circle.vue
+++ b/apps/stage-web/src/pages/devtools/gesture-circle.vue
@@ -68,7 +68,10 @@ watch([x, y], () => {
 
   canvasContext.value.beginPath()
   canvasContext.value.fillStyle = 'red'
-  canvasContext.value.arc(x.value, y.value, 4, 0, 2 * Math.PI)
+  // 20: padding left
+  // 40: padding top
+  // 40: header
+  canvasContext.value.arc(x.value - 20, y.value - 40 - 40, 4, 0, 2 * Math.PI)
   canvasContext.value.closePath()
   canvasContext.value.fill()
 })
@@ -126,7 +129,7 @@ watch(pointThrottled, (point) => {
 </script>
 
 <template>
-  <div ref="containerRef" h-full>
+  <div ref="containerRef" h="[calc(100dvh-40px)]">
     <div relative h-full>
       <div bg="neutral-100/50 dark:neutral-900/50" absolute inset-0 h-fit rounded-xl px-3 py-2 font-mono shadow-md backdrop-blur-md grid="~ cols-[150px_1fr]">
         <div text="neutral-400 dark:neutral-600">
diff --git a/apps/stage-web/src/pages/devtools/polaroid.vue b/apps/stage-web/src/pages/devtools/polaroid.vue
index dadcf4112..a581f91ac 100644
--- a/apps/stage-web/src/pages/devtools/polaroid.vue
+++ b/apps/stage-web/src/pages/devtools/polaroid.vue
@@ -77,10 +77,11 @@ function handleShot() {
         </option>
       </select>
     </div>
-    <div border="2px solid white" flex items-center justify-center rounded-full p-1>
+    <div border="2px solid black dark:white" flex items-center justify-center rounded-full p-1>
       <button
-        h-18 w-18 rounded-full bg="white active:gray-50" outline-none
-        transition-colors duration-200 ease-in-out
+        class="h-15 w-15 md:h-18 md:w-18"
+        bg="black active:neutral-950 dark:white dark:active:neutral-50"
+        rounded-full outline-none transition-colors duration-200 ease-in-out
         @click="handleShot"
       />
     </div>