style(stage-web): new transitions

Signed-off-by: Neko Ayaka <neko@ayaka.moe>

apps/stage-web/package.json

@@ -99,6 +99,7 @@
     "@proj-airi/elevenlabs": "workspace:^",
     "@proj-airi/lobe-icons": "workspace:^",
     "@proj-airi/provider-transformers": "workspace:^",
+    "@proj-airi/ui-transitions": "workspace:^",
     "@proj-airi/unplugin-download": "workspace:^",
     "@proj-airi/unplugin-live2d-sdk": "workspace:^",
     "@shikijs/markdown-it": "^3.1.0",

apps/stage-web/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
+import { StageTransitionGroup } from '@proj-airi/ui-transitions'
 import { storeToRefs } from 'pinia'
 import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -14,5 +15,13 @@ watch(settings.language, () => {
 </script>
 
 <template>
-  <RouterView />
+  <StageTransitionGroup
+    primary-color="#FF57C8"
+    secondary-color="#60C7FF"
+    tertiary-color="#121212"
+    :colors="['#FF57C8', '#60C7FF', '#936AFF', '#121212']"
+    :z-index="100"
+  >
+    <RouterView />
+  </StageTransitionGroup>
 </template>

apps/stage-web/src/components/Layouts/Header.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useDark } from '@vueuse/core'
+import { RouterLink } from 'vue-router'
 
 import LogoDark from '../../assets/logo-dark.svg'
 import Logo from '../../assets/logo.svg'
-import DesktopSettings from '../Widgets/DesktopSettings.vue'
 
 const dark = useDark()
 </script>
@@ -24,6 +24,11 @@ const dark = useDark()
         <span>アイリ</span>
       </div>
     </a>
-    <DesktopSettings />
+    <RouterLink
+      class="m-1 block max-h-[10lh] min-h-[1lh] rounded-lg bg-zinc-100 p-2 text-lg text-zinc-500 outline-none dark:bg-zinc-800 dark:text-zinc-400"
+      to="/settings"
+    >
+      <div i-solar:settings-minimalistic-bold-duotone />
+    </RouterLink>
   </header>
 </template>

apps/stage-web/src/pages/settings/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div p2>
+    <h1>Settings</h1>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+</route>

apps/stage-web/src/pages/settings/modules/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    A
+  </div>
+</template>

apps/stage-web/src/pages/settings/providers/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    A
+  </div>
+</template>

apps/stage-web/tsconfig.json

@@ -9,6 +9,9 @@
     "paths": {
       "@proj-airi/stage-ui/*": [
         "../../packages/stage-ui/src/*"
+      ],
+      "@proj-airi/ui-transitions": [
+        "../../packages/ui-transitions/src/index.ts"
       ]
     },
     "resolveJsonModule": true,

apps/stage-web/vite.config.ts

@@ -53,6 +53,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@proj-airi/stage-ui': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src')),
+      '@proj-airi/ui-transitions': resolve(join(import.meta.dirname, '..', '..', 'packages', 'ui-transitions', 'src')),
       '@proj-airi/stage-ui/stores': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src', 'stores')),
     },
   },
@@ -64,6 +65,7 @@ export default defineConfig({
           include: [/\.vue$/, /\.md$/],
           ...templateCompilerOptions,
         }),
+        vueJsx: false,
       },
     }),