From 76b166e65bc5297b11e53495a2eefcf0abc2d5a8 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Thu, 6 Mar 2025 22:37:52 +0800
Subject: [PATCH] feat(stage-web): impl settings

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
---
 apps/stage-web/src/App.vue                    |   4 +-
 .../src/components/Layouts/Header.vue         |  21 +---
 .../src/components/Layouts/HeaderLink.vue     |  26 +++++
 .../src/components/Menu/IconItem.vue          |  33 ++++++
 apps/stage-web/src/layouts/default.vue        |  23 ++--
 apps/stage-web/src/layouts/stage.vue          |  19 ++++
 apps/stage-web/src/pages/index.vue            |   4 +-
 apps/stage-web/src/pages/settings/index.vue   | 105 +++++++++++++++++-
 .../src/pages/settings/modules/index.vue      |   6 +
 .../src/pages/settings/providers/index.vue    |   6 +
 .../src/components/StageTransitionGroup.vue   |   2 +-
 11 files changed, 211 insertions(+), 38 deletions(-)
 create mode 100644 apps/stage-web/src/components/Layouts/HeaderLink.vue
 create mode 100644 apps/stage-web/src/components/Menu/IconItem.vue
 create mode 100644 apps/stage-web/src/layouts/stage.vue

diff --git a/apps/stage-web/src/App.vue b/apps/stage-web/src/App.vue
index b57c11d1d..7dafc387e 100644
--- a/apps/stage-web/src/App.vue
+++ b/apps/stage-web/src/App.vue
@@ -17,9 +17,9 @@ watch(settings.language, () => {
 <template>
   <StageTransitionGroup
     primary-color="#FF57C8"
-    secondary-color="#60C7FF"
+    secondary-color="#946BFF"
     tertiary-color="#121212"
-    :colors="['#FF57C8', '#60C7FF', '#936AFF', '#121212']"
+    :colors="['#FF57C8', '#946BFF', '#64BCFF', '#121212']"
     :z-index="100"
   >
     <RouterView />
diff --git a/apps/stage-web/src/components/Layouts/Header.vue b/apps/stage-web/src/components/Layouts/Header.vue
index 931e6c02f..a8ce50a5a 100644
--- a/apps/stage-web/src/components/Layouts/Header.vue
+++ b/apps/stage-web/src/components/Layouts/Header.vue
@@ -1,29 +1,12 @@
 <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'
-
-const dark = useDark()
+import HeaderLink from './HeaderLink.vue'
 </script>
 
 <template>
   <header mb-1 w-full gap-2>
-    <a
-      href="https://github.com/moeru-ai/airi" rel="noreferrer noopener" target="_blank" flex="~ 1" w-full items-center
-      gap-2 px-2 text-nowrap text-2xl outline-none
-    >
-      <template v-if="dark">
-        <img :src="LogoDark" h-8 w-8>
-      </template>
-      <template v-else>
-        <img :src="Logo" h-8 w-8>
-      </template>
-      <div font-cute>
-        <span>アイリ</span>
-      </div>
-    </a>
+    <HeaderLink />
     <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"
diff --git a/apps/stage-web/src/components/Layouts/HeaderLink.vue b/apps/stage-web/src/components/Layouts/HeaderLink.vue
new file mode 100644
index 000000000..2754b3fbe
--- /dev/null
+++ b/apps/stage-web/src/components/Layouts/HeaderLink.vue
@@ -0,0 +1,26 @@
+<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'
+
+const dark = useDark()
+</script>
+
+<template>
+  <RouterLink
+    to="/" flex="~ 1" w-full items-center
+    gap-2 px-2 text-nowrap text-2xl outline-none
+  >
+    <template v-if="dark">
+      <img :src="LogoDark" h-8 w-8>
+    </template>
+    <template v-else>
+      <img :src="Logo" h-8 w-8>
+    </template>
+    <div font-cute>
+      <span>アイリ</span>
+    </div>
+  </RouterLink>
+</template>
diff --git a/apps/stage-web/src/components/Menu/IconItem.vue b/apps/stage-web/src/components/Menu/IconItem.vue
new file mode 100644
index 000000000..2c21ce6fd
--- /dev/null
+++ b/apps/stage-web/src/components/Menu/IconItem.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description: string
+  icon: string
+  to: string
+}>()
+</script>
+
+<template>
+  <RouterLink
+    flex="~ row" bg="neutral-100 dark:neutral-800" hover="bg-neutral-200 dark:bg-neutral-700"
+    class="[&_.settings-section-icon]:hover:scale-120" transition="all ease-in-out duration-200" relative w-full
+    items-center overflow-hidden rounded-lg p-5 text-left
+    :to="to"
+  >
+    <div z-1 flex-1>
+      <div text-lg font-semibold>
+        {{ title }}
+      </div>
+      <div text="sm neutral-600 dark:neutral-400">
+        <span>{{ description }}</span>
+      </div>
+    </div>
+    <div
+      class="settings-section-icon"
+      transition="all ease-in-out duration-500"
+      absolute right-0 size-24 translate-y-4
+      text="neutral-400/50 dark:neutral-600/50"
+      :class="[icon]"
+    />
+  </RouterLink>
+</template>
diff --git a/apps/stage-web/src/layouts/default.vue b/apps/stage-web/src/layouts/default.vue
index 7606983a6..b9b574415 100644
--- a/apps/stage-web/src/layouts/default.vue
+++ b/apps/stage-web/src/layouts/default.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import { useScreenSafeArea } from '@vueuse/core'
+import { RouterView } from 'vue-router'
 
-const { top, right, bottom, left } = useScreenSafeArea()
+import HeaderLink from '../components/Layouts/HeaderLink.vue'
 </script>
 
 <template>
-  <main
-    text="gray-700 dark:gray-200" h-full font-cuteen
-    :style="{
-      paddingTop: `${top}px`,
-      paddingRight: `${right}px`,
-      paddingBottom: `${bottom}px`,
-      paddingLeft: `${left}px`,
-    }"
-  >
-    <RouterView />
-  </main>
+  <div p-2>
+    <div mb-1 w-full gap-2 p-2>
+      <HeaderLink />
+    </div>
+    <div p-5 flex="~ col gap-4">
+      <RouterView />
+    </div>
+  </div>
 </template>
diff --git a/apps/stage-web/src/layouts/stage.vue b/apps/stage-web/src/layouts/stage.vue
new file mode 100644
index 000000000..7606983a6
--- /dev/null
+++ b/apps/stage-web/src/layouts/stage.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useScreenSafeArea } from '@vueuse/core'
+
+const { top, right, bottom, left } = useScreenSafeArea()
+</script>
+
+<template>
+  <main
+    text="gray-700 dark:gray-200" h-full font-cuteen
+    :style="{
+      paddingTop: `${top}px`,
+      paddingRight: `${right}px`,
+      paddingBottom: `${bottom}px`,
+      paddingLeft: `${left}px`,
+    }"
+  >
+    <RouterView />
+  </main>
+</template>
diff --git a/apps/stage-web/src/pages/index.vue b/apps/stage-web/src/pages/index.vue
index 1134952b9..08bd82e7d 100644
--- a/apps/stage-web/src/pages/index.vue
+++ b/apps/stage-web/src/pages/index.vue
@@ -40,5 +40,7 @@ function handleSettingsOpen(open: boolean) {
 
 <route lang="yaml">
 meta:
-  layout: default
+  layout: stage
+  stageTransition:
+    name: bubble-wave-out
 </route>
diff --git a/apps/stage-web/src/pages/settings/index.vue b/apps/stage-web/src/pages/settings/index.vue
index cbcced5ed..edb5b5161 100644
--- a/apps/stage-web/src/pages/settings/index.vue
+++ b/apps/stage-web/src/pages/settings/index.vue
@@ -1,6 +1,107 @@
+<script setup lang="ts">
+import { useSettings } from '@proj-airi/stage-ui/stores'
+import { useDark } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+
+import IconItem from '../../components/Menu/IconItem.vue'
+
+const { t } = useI18n()
+const settings = storeToRefs(useSettings())
+const dark = useDark()
+
+function handleLanguageChange(event: Event) {
+  const target = event.target as HTMLSelectElement
+  settings.language.value = target.value
+}
+</script>
+
 <template>
-  <div p2>
-    <h1>Settings</h1>
+  <div>
+    <h1 text-3xl>
+      Settings
+    </h1>
+  </div>
+  <div flex="~ col gap-4">
+    <div flex="~ col gap-4">
+      <IconItem title="Modules" description="Thinking, vision, speech synthesis, gaming, etc." icon="i-lucide:blocks" to="/settings/modules" />
+      <IconItem title="Providers" description="LLMs, speech providers, etc." icon="i-lucide:brain" to="/settings/providers" />
+      <IconItem title="Themes" description="Customize your stage!" icon="i-lucide:paintbrush" to="/settings/themes" />
+    </div>
+    <div>
+      <h2 text-2xl>
+        General
+      </h2>
+    </div>
+    <div flex="~ col gap-4">
+      <!-- Language Setting -->
+      <div
+        grid="~ cols-[150px_1fr]"
+        bg="neutral-100 dark:neutral-800"
+        hover="bg-neutral-200 dark:bg-neutral-700"
+        transition="all ease-in-out duration-250"
+        items-center gap-1.5 rounded-lg px-4 py-3
+      >
+        <div text="sm">
+          <span>{{ t('settings.language.title') }}</span>
+        </div>
+        <div flex="~ row" w-full justify-end>
+          <select
+            class="w-32"
+            bg="transparent"
+            text="sm right neutral-800 dark:neutral-100"
+            transition="all ease-in-out duration-250"
+            outline="none"
+            @change="handleLanguageChange"
+          >
+            <option value="en-US">
+              {{ t('settings.language.english') }}
+            </option>
+            <option value="zh-CN">
+              {{ t('settings.language.chinese') }}
+            </option>
+          </select>
+        </div>
+      </div>
+      <!-- Theme Setting -->
+      <label
+        bg="neutral-100 dark:neutral-800"
+        hover="bg-neutral-200 dark:bg-neutral-700"
+        transition="all ease-in-out duration-250"
+        w-full flex cursor-pointer rounded-lg px-4 py-3
+      >
+        <input
+          v-model="dark"
+          text="neutral-800 dark:neutral-100"
+          :checked="dark"
+          :aria-checked="dark"
+          type="checkbox"
+          hidden appearance-none outline-none
+        >
+        <div flex="~ row" w-full items-center gap-1.5>
+          <div text="sm" w-full flex-1>
+            <span>{{ t('settings.theme') }}</span>
+          </div>
+          <div select-none>
+            <Transition name="slide-away" mode="out-in">
+              <div
+                v-if="dark"
+                i-solar:moon-stars-bold-duotone
+                transition="all ease-in-out duration-250"
+              />
+              <div
+                v-else
+                i-solar:sun-fog-bold-duotone
+                transition="all ease-in-out duration-250"
+              />
+            </Transition>
+          </div>
+        </div>
+      </label>
+    </div>
+    <div fixed bottom-0 right-0 text="neutral-100/50 dark:neutral-500/20">
+      <div text="40" i-lucide:cog translate-x-10 translate-y-10 />
+    </div>
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/modules/index.vue b/apps/stage-web/src/pages/settings/modules/index.vue
index 335a7b582..929e6b5b3 100644
--- a/apps/stage-web/src/pages/settings/modules/index.vue
+++ b/apps/stage-web/src/pages/settings/modules/index.vue
@@ -3,3 +3,9 @@
     A
   </div>
 </template>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+</route>
diff --git a/apps/stage-web/src/pages/settings/providers/index.vue b/apps/stage-web/src/pages/settings/providers/index.vue
index 335a7b582..929e6b5b3 100644
--- a/apps/stage-web/src/pages/settings/providers/index.vue
+++ b/apps/stage-web/src/pages/settings/providers/index.vue
@@ -3,3 +3,9 @@
     A
   </div>
 </template>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+</route>
diff --git a/packages/ui-transitions/src/components/StageTransitionGroup.vue b/packages/ui-transitions/src/components/StageTransitionGroup.vue
index ae288104b..1a63dabaf 100644
--- a/packages/ui-transitions/src/components/StageTransitionGroup.vue
+++ b/packages/ui-transitions/src/components/StageTransitionGroup.vue
@@ -92,7 +92,7 @@ const transitions = shallowRef<Record<string, TransitionOptions>>({
   },
   'bubble-wave-out': {
     component: BubbleWaveOutTransition,
-    duration: 2700,
+    duration: 850,
   },
 })