From 939a5ed2082feb2dc3b7c486f067baecd1775369 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Mon, 14 Apr 2025 00:11:05 +0800
Subject: [PATCH] chore(stage-ui|stage-tamagotchi): icon

---
 apps/stage-tamagotchi/locales/en.yml          |  3 +
 apps/stage-tamagotchi/locales/zh-CN.yml       |  3 +
 .../src/pages/settings/airi-card/index.vue    | 44 ++++++------
 .../src/pages/settings/appearance/index.vue   |  3 +-
 .../src/pages/settings/index.vue              | 45 +++++++++---
 .../src/pages/settings/memory/index.vue       |  8 ++-
 .../src/pages/settings/models/index.vue       | 34 +++++++--
 .../pages/settings/modules/consciousness.vue  | 13 +++-
 .../src/pages/settings/modules/index.vue      | 45 +++++++++---
 .../src/pages/settings/modules/speech.vue     | 12 +++-
 .../src/pages/settings/providers/index.vue    | 32 +++++++--
 .../src/pages/settings/scene/index.vue        | 72 +++++++++++++++++++
 apps/stage-web/locales/en.yml                 |  3 +
 apps/stage-web/locales/zh-CN.yml              |  3 +
 .../src/pages/settings/airi-card/index.vue    |  3 +-
 .../src/pages/settings/appearance/index.vue   |  3 +-
 apps/stage-web/src/pages/settings/index.vue   | 23 +++---
 .../src/pages/settings/memory/index.vue       |  3 +-
 .../src/pages/settings/models/index.vue       |  5 +-
 .../pages/settings/modules/consciousness.vue  |  3 +-
 .../src/pages/settings/modules/index.vue      | 17 ++---
 .../src/pages/settings/modules/speech.vue     |  3 +-
 .../src/pages/settings/providers/index.vue    |  5 +-
 .../src/pages/settings/scene/index.vue        | 72 +++++++++++++++++++
 24 files changed, 374 insertions(+), 83 deletions(-)
 create mode 100644 apps/stage-tamagotchi/src/pages/settings/scene/index.vue
 create mode 100644 apps/stage-web/src/pages/settings/scene/index.vue

diff --git a/apps/stage-tamagotchi/locales/en.yml b/apps/stage-tamagotchi/locales/en.yml
index c97d14b8b..489378307 100644
--- a/apps/stage-tamagotchi/locales/en.yml
+++ b/apps/stage-tamagotchi/locales/en.yml
@@ -330,6 +330,9 @@ settings:
           description: x.ai
           title: xAI
       title: Providers
+    scene:
+      description: Configure the environment where the character lives
+      title: Scene
     themes:
       description: Customize your stage!
       sections:
diff --git a/apps/stage-tamagotchi/locales/zh-CN.yml b/apps/stage-tamagotchi/locales/zh-CN.yml
index 0888e44a1..5039e739c 100644
--- a/apps/stage-tamagotchi/locales/zh-CN.yml
+++ b/apps/stage-tamagotchi/locales/zh-CN.yml
@@ -317,6 +317,9 @@ settings:
           description: X.AI
           title: xAI
       title: 提供商
+    scene:
+      description: 配置角色所在环境
+      title: 场景
     themes:
       description: 自定义你的舞台外观！
       sections:
diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
index 8db952fac..457698bef 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
@@ -31,6 +31,15 @@ const sortOption = ref('nameAsc')
 
 const inputFiles = ref<File[]>([])
 
+// Card list data structure
+interface CardItem {
+  id: string
+  name: string
+  description?: string
+  deprecated?: boolean
+  customizable?: boolean
+}
+
 watch(inputFiles, async (newFiles) => {
   const file = newFiles[0]
   if (!file)
@@ -49,15 +58,6 @@ watch(inputFiles, async (newFiles) => {
   }
 })
 
-// Card list data structure
-interface CardItem {
-  id: string
-  name: string
-  description?: string
-  deprecated?: boolean
-  customizable?: boolean
-}
-
 // Transform cards Map to array for display
 const cardsArray = computed<CardItem[]>(() =>
   Array.from(cards.value.entries()).map(([id, card]) => ({
@@ -221,16 +221,18 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
       <InputFile v-model="inputFiles" accept="*.json">
         <template #default="{ isDragging }">
           <template v-if="!isDragging">
-            <div i-solar:upload-square-line-duotone mb-4 text-5xl text="neutral-400 dark:neutral-500" />
-            <p font-medium text="center neutral-600 dark:neutral-300">
-              {{ t('settings.pages.card.upload') }}
-            </p>
-            <p text="center neutral-500 dark:neutral-400" mt-2 text-sm>
-              {{ t('settings.pages.card.upload_desc') }}) }}
-            </p>
+            <div flex flex-col items-center>
+              <div i-solar:upload-square-line-duotone mb-4 text-5xl text="neutral-400 dark:neutral-500" />
+              <p font-medium text="neutral-600 dark:neutral-300">
+                {{ t('settings.pages.card.upload') }}
+              </p>
+              <p text="neutral-500 dark:neutral-400" mt-2 text-sm>
+                {{ t('settings.pages.card.upload_desc') }}
+              </p>
+            </div>
           </template>
           <template v-else>
-            <div class="text-center">
+            <div flex flex-col items-center>
               <div i-solar:upload-minimalistic-bold class="text-primary-500 dark:text-primary-400 mb-2 text-5xl" />
               <p font-medium text="primary-600 dark:primary-300">
                 {{ t('settings.pages.card.drop_here') }}
@@ -304,12 +306,14 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
   <div
     v-motion
     text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[72dvh]" right--15 z--1
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
     :initial="{ scale: 0.9, opacity: 0, x: 20 }"
     :enter="{ scale: 1, opacity: 1, x: 0 }"
-    :duration="250"
+    :duration="500"
+    size-60
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:id-card />
+    <div text="60" i-solar:emoji-funny-square-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue b/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue
index b3e09b4ea..cbd206b2f 100644
--- a/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue
@@ -269,8 +269,9 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions],
     :initial="{ scale: 0.9, opacity: 0, rotate: 30 }"
     :enter="{ scale: 1, opacity: 1, rotate: 0 }"
     :duration="250"
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:paintbrush />
+    <div text="60" i-solar:filters-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-tamagotchi/src/pages/settings/index.vue b/apps/stage-tamagotchi/src/pages/settings/index.vue
index 75f95ecc5..54ef1c1db 100644
--- a/apps/stage-tamagotchi/src/pages/settings/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/index.vue
@@ -5,8 +5,11 @@ import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
+import IconAnimation from '../../components/IconAnimation.vue'
+
 const router = useRouter()
 const iconAnimationStarted = ref(false)
+const iconAnimation = ref<InstanceType<typeof IconAnimation>>()
 const resolveAnimation = ref<() => void>()
 const { t } = useI18n()
 
@@ -15,6 +18,10 @@ const animationPosition = ref('')
 const showAnimationComponent = ref(false)
 const settingsStore = useSettings()
 
+function handleAnimationEnded() {
+  resolveAnimation.value?.()
+}
+
 async function handleIconItemClick(event: MouseEvent, setting: typeof settings.value[0]) {
   const target = event.currentTarget as HTMLElement
   const iconElement = target.querySelector('.menu-icon-item-icon') as HTMLElement
@@ -56,37 +63,43 @@ const settings = computed(() => [
   {
     title: t('settings.pages.card.title'),
     description: t('settings.pages.card.description'),
-    icon: 'i-lucide:id-card',
+    icon: 'i-solar:emoji-funny-square-bold-duotone',
     to: '/settings/airi-card',
   },
   {
     title: t('settings.pages.modules.title'),
     description: t('settings.pages.modules.description'),
-    icon: 'i-lucide:blocks',
+    icon: 'i-solar:layers-bold-duotone',
     to: '/settings/modules',
   },
+  {
+    title: t('settings.pages.scene.title'),
+    description: t('settings.pages.scene.description'),
+    icon: 'i-solar:armchair-2-bold-duotone',
+    to: '/settings/scene',
+  },
   {
     title: t('settings.pages.models.title'),
     description: t('settings.pages.models.description'),
-    icon: 'i-lucide:person-standing',
+    icon: 'i-solar:people-nearby-bold-duotone',
     to: '/settings/models',
   },
   {
     title: t('settings.pages.memory.title'),
     description: t('settings.pages.memory.description'),
-    icon: 'i-lucide:sprout',
+    icon: 'i-solar:leaf-bold-duotone',
     to: '/settings/memory',
   },
   {
     title: t('settings.pages.providers.title'),
     description: t('settings.pages.providers.description'),
-    icon: 'i-lucide:brain',
+    icon: 'i-solar:box-minimalistic-bold-duotone',
     to: '/settings/providers',
   },
   {
     title: t('settings.pages.themes.title'),
     description: t('settings.pages.themes.description'),
-    icon: 'i-lucide:paintbrush',
+    icon: 'i-solar:filters-bold-duotone',
     to: '/settings/appearance',
   },
 ])
@@ -126,15 +139,29 @@ const settings = computed(() => [
         @click="(e: MouseEvent) => handleIconItemClick(e, setting)"
       />
     </div>
+    <IconAnimation
+      v-if="showAnimationComponent && !settingsStore.disableTransitions && settingsStore.usePageSpecificTransitions"
+      ref="iconAnimation"
+      :icon="animationIcon"
+      :icon-size="6 * 1.2"
+      :position="animationPosition"
+      :duration="1000"
+      text-color="text-neutral-400/50 dark:text-neutral-600/20"
+      :started="iconAnimationStarted"
+      @animation-ended.once="handleAnimationEnded"
+    />
     <div
+      v-else
       v-motion
       text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-      fixed top="[75dvh]" right--15 z--1
-      :initial="{ scale: 0.9, opacity: 0, rotate: 45 }"
+      fixed top="[calc(100dvh-12rem)]" bottom-0 right--10 z--1
+      :initial="{ scale: 0.9, opacity: 0, rotate: 180 }"
       :enter="{ scale: 1, opacity: 1, rotate: 0 }"
       :duration="500"
+      size-60
+      flex items-center justify-center
     >
-      <div v-motion text="60" i-lucide:cog />
+      <div v-motion text="60" i-solar:settings-bold-duotone />
     </div>
   </div>
 </template>
diff --git a/apps/stage-tamagotchi/src/pages/settings/memory/index.vue b/apps/stage-tamagotchi/src/pages/settings/memory/index.vue
index bab94751e..4089e954a 100644
--- a/apps/stage-tamagotchi/src/pages/settings/memory/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/memory/index.vue
@@ -38,12 +38,14 @@ const { t } = useI18n()
     <div
       v-motion
       text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-      fixed top="[65dvh]" right--15 z--1
+      fixed top="[calc(100dvh-20rem)]" bottom-0 right--15 z--1
       :initial="{ scale: 0.9, opacity: 0, y: 40 }"
       :enter="{ scale: 1, opacity: 1, y: 0 }"
-      :duration="250"
+      :duration="500"
+      size-60
+      flex items-center justify-center
     >
-      <div text="60" i-lucide:sprout />
+      <div text="60" i-solar:leaf-bold-duotone />
     </div>
   </div>
 </template>
diff --git a/apps/stage-tamagotchi/src/pages/settings/models/index.vue b/apps/stage-tamagotchi/src/pages/settings/models/index.vue
index 79e0d4576..a982c6779 100644
--- a/apps/stage-tamagotchi/src/pages/settings/models/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/models/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import Live2DCanvas from '@proj-airi/stage-ui/components/Live2D/Canvas.vue'
 import Live2DModel from '@proj-airi/stage-ui/components/Live2D/Model.vue'
-import { useSettings } from '@proj-airi/stage-ui/stores'
 import { useElementBounding } from '@vueuse/core'
 import { Vibrant } from 'node-vibrant/browser'
 import { ref } from 'vue'
@@ -9,13 +8,13 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import Live2DSettings from '../../../components/Widgets/Live2DSettings.vue'
+import { useIconAnimation } from '../../../composables/useIconAnimation'
 
 const { t } = useI18n()
 const router = useRouter()
 const live2dContainerRef = ref<HTMLDivElement>()
 const live2dCanvasRef = ref<InstanceType<typeof Live2DCanvas>>()
 const { width, height } = useElementBounding(live2dContainerRef)
-const settingsStore = useSettings()
 
 const palette = ref<string[]>([])
 
@@ -40,6 +39,12 @@ async function extractColorsFromModel() {
     URL.revokeObjectURL(frameUrl)
   }
 }
+
+const {
+  iconAnimationStarted,
+  showIconAnimation,
+  animationIcon,
+} = useIconAnimation('i-solar:people-nearby-bold-duotone')
 </script>
 
 <template>
@@ -70,8 +75,29 @@ async function extractColorsFromModel() {
     <Live2DSettings w="50%" h="80vh" :palette="palette" @extract-colors-from-model="extractColorsFromModel" />
   </div>
 
-  <div v-if="!settingsStore.usePageSpecificTransitions" text="neutral-200/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 z--1 translate-x-10 translate-y-10>
-    <div text="40" i-lucide:person-standing />
+  <IconAnimation
+    v-if="showIconAnimation"
+    :z-index="-1"
+    :icon="animationIcon"
+    :icon-size="12"
+    :duration="1000"
+    :started="iconAnimationStarted"
+    :is-reverse="true"
+    position="calc(100dvw - 9.5rem), calc(100dvh - 9.5rem)"
+    text-color="text-neutral-200/50 dark:text-neutral-600/20"
+  />
+  <div
+    v-else
+    v-motion
+    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, y: 15 }"
+    :enter="{ scale: 1, opacity: 1, y: 0 }"
+    :duration="500"
+    size-60
+    flex items-center justify-center
+  >
+    <div text="60" i-solar:people-nearby-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue b/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
index e9c4df044..d261b311f 100644
--- a/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
@@ -214,8 +214,17 @@ function updateCustomModelName(value: string) {
     </div>
   </div>
 
-  <div text="neutral-200/50 dark:neutral-600/20" pointer-events-none fixed bottom-0 right-0 z--1 translate-x-10 translate-y-10>
-    <div text="40" i-lucide:ghost />
+  <div
+    v-motion
+    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, x: 20 }"
+    :enter="{ scale: 1, opacity: 1, x: 0 }"
+    :duration="500"
+    size-60
+    flex items-center justify-center
+  >
+    <div text="60" i-solar:ghost-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-tamagotchi/src/pages/settings/modules/index.vue b/apps/stage-tamagotchi/src/pages/settings/modules/index.vue
index 7793e6cb4..f32a6fe79 100644
--- a/apps/stage-tamagotchi/src/pages/settings/modules/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/modules/index.vue
@@ -4,6 +4,9 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
+import IconAnimation from '../../../components/IconAnimation.vue'
+import { useIconAnimation } from '../../../composables/useIconAnimation'
+
 const router = useRouter()
 const { t } = useI18n()
 
@@ -24,7 +27,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'consciousness',
     name: t('settings.pages.modules.consciousness.title'),
     description: t('settings.pages.modules.consciousness.description'),
-    icon: 'i-lucide:ghost',
+    icon: 'i-solar:ghost-bold-duotone',
     to: '/settings/modules/consciousness',
     configured: false,
   },
@@ -32,7 +35,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'speech',
     name: t('settings.pages.modules.speech.title'),
     description: t('settings.pages.modules.speech.description'),
-    icon: 'i-lucide:mic',
+    icon: 'i-solar:user-speak-rounded-bold-duotone',
     to: '/settings/modules/speech',
     configured: false,
   },
@@ -40,7 +43,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'hearing',
     name: t('settings.pages.modules.hearing.title'),
     description: t('settings.pages.modules.hearing.description'),
-    icon: 'i-lucide:ear',
+    icon: 'i-solar:microphone-3-bold-duotone',
     to: '',
     configured: false,
   },
@@ -48,7 +51,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'vision',
     name: t('settings.pages.modules.vision.title'),
     description: t('settings.pages.modules.vision.description'),
-    icon: 'i-lucide:eye',
+    icon: 'i-solar:eye-closed-bold-duotone',
     to: '',
     configured: false,
   },
@@ -56,7 +59,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'memory-short-term',
     name: t('settings.pages.modules.memory-short-term.title'),
     description: t('settings.pages.modules.memory-short-term.description'),
-    icon: 'i-lucide:book',
+    icon: 'i-solar:bookmark-bold-duotone',
     to: '/settings/modules/memory-short-term',
     configured: false,
   },
@@ -64,7 +67,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'memory-long-term',
     name: t('settings.pages.modules.memory-long-term.title'),
     description: t('settings.pages.modules.memory-long-term.description'),
-    icon: 'i-lucide:book-copy',
+    icon: 'i-solar:book-bookmark-bold-duotone',
     to: '/settings/modules/memory-long-term',
     configured: false,
   },
@@ -101,6 +104,12 @@ const modulesList = computed<Module[]>(() => [
     configured: false,
   },
 ])
+
+const {
+  iconAnimationStarted,
+  showIconAnimation,
+  animationIcon,
+} = useIconAnimation('i-solar:layers-bold-duotone')
 </script>
 
 <template>
@@ -142,15 +151,29 @@ const modulesList = computed<Module[]>(() => [
       :configured="module.configured"
     />
   </div>
+  <IconAnimation
+    v-if="showIconAnimation"
+    :icon="animationIcon"
+    :icon-size="12"
+    :duration="1000"
+    :started="iconAnimationStarted"
+    :is-reverse="true"
+    :z-index="-1"
+    text-color="text-neutral-200/50 dark:text-neutral-600/20"
+    position="calc(100dvw - 9.5rem), calc(100dvh - 9.5rem)"
+  />
   <div
+    v-else
     v-motion
     text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[72dvh]" right--15 z--1
-    :initial="{ scale: 0.9, opacity: 0, y: 0 }"
-    :enter="{ scale: 1, opacity: 1, y: 10 }"
-    :duration="250"
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, y: 20 }"
+    :enter="{ scale: 1, opacity: 1, y: 0 }"
+    :duration="500"
+    size-60
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:blocks />
+    <div text="60" i-solar:layers-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue b/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
index a8316d787..7085cd55f 100644
--- a/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
@@ -518,10 +518,16 @@ function updateCustomModelName(value: string) {
   </div>
 
   <div
-    text="neutral-200/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 z--1 translate-x-10
-    translate-y-10
+    v-motion
+    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, x: 20 }"
+    :enter="{ scale: 1, opacity: 1, x: 0 }"
+    :duration="500"
+    size-60
+    flex items-center justify-center
   >
-    <div text="40" i-lucide:volume-2 />
+    <div text="60" i-solar:user-speak-rounded-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/index.vue b/apps/stage-tamagotchi/src/pages/settings/providers/index.vue
index 2b702a4ef..308dcfa3a 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/index.vue
@@ -5,10 +5,18 @@ import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
+import { useIconAnimation } from '../../../composables/useIconAnimation'
+
 const { t } = useI18n()
 const router = useRouter()
 const providersStore = useProvidersStore()
 const { allProvidersMetadata } = storeToRefs(providersStore)
+
+const {
+  iconAnimationStarted,
+  showIconAnimation,
+  animationIcon,
+} = useIconAnimation('i-solar:box-minimalistic-bold-duotone')
 </script>
 
 <template>
@@ -50,15 +58,29 @@ const { allProvidersMetadata } = storeToRefs(providersStore)
       :configured="provider.configured"
     />
   </div>
+  <IconAnimation
+    v-if="showIconAnimation"
+    :z-index="-1"
+    :icon="animationIcon"
+    :icon-size="12"
+    :duration="1000"
+    :started="iconAnimationStarted"
+    :is-reverse="true"
+    position="calc(100dvw - 9.5rem), calc(100dvh - 9.5rem)"
+    text-color="text-neutral-200/50 dark:text-neutral-600/20"
+  />
   <div
+    v-else
     v-motion
     text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[70dvh]" right--15 z--1
-    :initial="{ scale: 0.9, opacity: 0 }"
-    :enter="{ scale: 1, opacity: 1 }"
-    :duration="250"
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, y: 20 }"
+    :enter="{ scale: 1, opacity: 1, y: 0 }"
+    :duration="500"
+    size-60
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:brain />
+    <div text="60" i-solar:box-minimalistic-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-tamagotchi/src/pages/settings/scene/index.vue b/apps/stage-tamagotchi/src/pages/settings/scene/index.vue
new file mode 100644
index 000000000..7dbfe5a58
--- /dev/null
+++ b/apps/stage-tamagotchi/src/pages/settings/scene/index.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import { useIconAnimation } from '../../../composables/useIconAnimation'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const {
+  iconAnimationStarted,
+  showIconAnimation,
+  animationIcon,
+} = useIconAnimation('i-solar:armchair-2-bold-duotone')
+</script>
+
+<template>
+  <div
+    v-motion
+    flex="~ row" items-center gap-2
+    :initial="{ opacity: 0, x: 10 }"
+    :enter="{ opacity: 1, x: 0 }"
+    :leave="{ opacity: 0, x: -10 }"
+    :duration="250"
+  >
+    <button @click="router.back()">
+      <div i-solar:alt-arrow-left-line-duotone text-2xl />
+    </button>
+    <h1 relative>
+      <div absolute left-0 top-0 translate-y="[-80%]">
+        <span text="neutral-300 dark:neutral-500" text-nowrap>{{ t('settings.title') }}</span>
+      </div>
+      <div text-nowrap text-3xl font-semibold>
+        {{ t('settings.pages.scene.title') }}
+      </div>
+    </h1>
+  </div>
+  <div>
+    Scene
+  </div>
+  <IconAnimation
+    v-if="showIconAnimation"
+    :z-index="-1"
+    :icon="animationIcon"
+    :icon-size="12"
+    :duration="1000"
+    :started="iconAnimationStarted"
+    :is-reverse="true"
+    position="calc(100dvw - 9.5rem), calc(100dvh - 9.5rem)"
+    text-color="text-neutral-200/50 dark:text-neutral-600/20"
+  />
+  <div
+    v-else
+    v-motion
+    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, y: 20 }"
+    :enter="{ scale: 1, opacity: 1, y: 0 }"
+    :duration="500"
+    size-60
+    flex items-center justify-center
+  >
+    <div text="60" i-solar:armchair-2-bold-duotone />
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
diff --git a/apps/stage-web/locales/en.yml b/apps/stage-web/locales/en.yml
index 29c7bfc4b..d6d688617 100644
--- a/apps/stage-web/locales/en.yml
+++ b/apps/stage-web/locales/en.yml
@@ -339,6 +339,9 @@ settings:
           description: x.ai
           title: xAI
       title: Providers
+    scene:
+      description: Configure the environment where the character lives
+      title: Scene
     themes:
       description: Customize your stage!
       sections:
diff --git a/apps/stage-web/locales/zh-CN.yml b/apps/stage-web/locales/zh-CN.yml
index 94b1bd163..79cba343a 100644
--- a/apps/stage-web/locales/zh-CN.yml
+++ b/apps/stage-web/locales/zh-CN.yml
@@ -323,6 +323,9 @@ settings:
           description: X.AI
           title: xAI
       title: 提供商
+    scene:
+      description: 配置角色所在环境
+      title: 场景
     themes:
       description: 自定义你的舞台外观！
       sections:
diff --git a/apps/stage-web/src/pages/settings/airi-card/index.vue b/apps/stage-web/src/pages/settings/airi-card/index.vue
index ea89492bb..e4fe17ec5 100644
--- a/apps/stage-web/src/pages/settings/airi-card/index.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/index.vue
@@ -311,8 +311,9 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
     :enter="{ scale: 1, opacity: 1, x: 0 }"
     :duration="500"
     size-60
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:id-card />
+    <div text="60" i-solar:emoji-funny-square-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/appearance/index.vue b/apps/stage-web/src/pages/settings/appearance/index.vue
index b3e09b4ea..cbd206b2f 100644
--- a/apps/stage-web/src/pages/settings/appearance/index.vue
+++ b/apps/stage-web/src/pages/settings/appearance/index.vue
@@ -269,8 +269,9 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions],
     :initial="{ scale: 0.9, opacity: 0, rotate: 30 }"
     :enter="{ scale: 1, opacity: 1, rotate: 0 }"
     :duration="250"
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:paintbrush />
+    <div text="60" i-solar:filters-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/index.vue b/apps/stage-web/src/pages/settings/index.vue
index 0fafe7fb2..54ef1c1db 100644
--- a/apps/stage-web/src/pages/settings/index.vue
+++ b/apps/stage-web/src/pages/settings/index.vue
@@ -63,37 +63,43 @@ const settings = computed(() => [
   {
     title: t('settings.pages.card.title'),
     description: t('settings.pages.card.description'),
-    icon: 'i-lucide:id-card',
+    icon: 'i-solar:emoji-funny-square-bold-duotone',
     to: '/settings/airi-card',
   },
   {
     title: t('settings.pages.modules.title'),
     description: t('settings.pages.modules.description'),
-    icon: 'i-lucide:blocks',
+    icon: 'i-solar:layers-bold-duotone',
     to: '/settings/modules',
   },
+  {
+    title: t('settings.pages.scene.title'),
+    description: t('settings.pages.scene.description'),
+    icon: 'i-solar:armchair-2-bold-duotone',
+    to: '/settings/scene',
+  },
   {
     title: t('settings.pages.models.title'),
     description: t('settings.pages.models.description'),
-    icon: 'i-lucide:person-standing',
+    icon: 'i-solar:people-nearby-bold-duotone',
     to: '/settings/models',
   },
   {
     title: t('settings.pages.memory.title'),
     description: t('settings.pages.memory.description'),
-    icon: 'i-lucide:sprout',
+    icon: 'i-solar:leaf-bold-duotone',
     to: '/settings/memory',
   },
   {
     title: t('settings.pages.providers.title'),
     description: t('settings.pages.providers.description'),
-    icon: 'i-lucide:brain',
+    icon: 'i-solar:box-minimalistic-bold-duotone',
     to: '/settings/providers',
   },
   {
     title: t('settings.pages.themes.title'),
     description: t('settings.pages.themes.description'),
-    icon: 'i-lucide:paintbrush',
+    icon: 'i-solar:filters-bold-duotone',
     to: '/settings/appearance',
   },
 ])
@@ -149,12 +155,13 @@ const settings = computed(() => [
       v-motion
       text="neutral-200/50 dark:neutral-600/20" pointer-events-none
       fixed top="[calc(100dvh-12rem)]" bottom-0 right--10 z--1
-      :initial="{ scale: 0.9, opacity: 0, rotate: 45 }"
+      :initial="{ scale: 0.9, opacity: 0, rotate: 180 }"
       :enter="{ scale: 1, opacity: 1, rotate: 0 }"
       :duration="500"
       size-60
+      flex items-center justify-center
     >
-      <div v-motion text="60" i-lucide:cog />
+      <div v-motion text="60" i-solar:settings-bold-duotone />
     </div>
   </div>
 </template>
diff --git a/apps/stage-web/src/pages/settings/memory/index.vue b/apps/stage-web/src/pages/settings/memory/index.vue
index 2bfcb1696..4089e954a 100644
--- a/apps/stage-web/src/pages/settings/memory/index.vue
+++ b/apps/stage-web/src/pages/settings/memory/index.vue
@@ -43,8 +43,9 @@ const { t } = useI18n()
       :enter="{ scale: 1, opacity: 1, y: 0 }"
       :duration="500"
       size-60
+      flex items-center justify-center
     >
-      <div text="60" i-lucide:sprout />
+      <div text="60" i-solar:leaf-bold-duotone />
     </div>
   </div>
 </template>
diff --git a/apps/stage-web/src/pages/settings/models/index.vue b/apps/stage-web/src/pages/settings/models/index.vue
index d456cf751..a982c6779 100644
--- a/apps/stage-web/src/pages/settings/models/index.vue
+++ b/apps/stage-web/src/pages/settings/models/index.vue
@@ -44,7 +44,7 @@ const {
   iconAnimationStarted,
   showIconAnimation,
   animationIcon,
-} = useIconAnimation('i-lucide:person-standing')
+} = useIconAnimation('i-solar:people-nearby-bold-duotone')
 </script>
 
 <template>
@@ -95,8 +95,9 @@ const {
     :enter="{ scale: 1, opacity: 1, y: 0 }"
     :duration="500"
     size-60
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:person-standing />
+    <div text="60" i-solar:people-nearby-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/modules/consciousness.vue b/apps/stage-web/src/pages/settings/modules/consciousness.vue
index 593221cc3..d261b311f 100644
--- a/apps/stage-web/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-web/src/pages/settings/modules/consciousness.vue
@@ -222,8 +222,9 @@ function updateCustomModelName(value: string) {
     :enter="{ scale: 1, opacity: 1, x: 0 }"
     :duration="500"
     size-60
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:ghost />
+    <div text="60" i-solar:ghost-bold-duotone />
   </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 515b79da7..f32a6fe79 100644
--- a/apps/stage-web/src/pages/settings/modules/index.vue
+++ b/apps/stage-web/src/pages/settings/modules/index.vue
@@ -27,7 +27,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'consciousness',
     name: t('settings.pages.modules.consciousness.title'),
     description: t('settings.pages.modules.consciousness.description'),
-    icon: 'i-lucide:ghost',
+    icon: 'i-solar:ghost-bold-duotone',
     to: '/settings/modules/consciousness',
     configured: false,
   },
@@ -35,7 +35,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'speech',
     name: t('settings.pages.modules.speech.title'),
     description: t('settings.pages.modules.speech.description'),
-    icon: 'i-lucide:mic',
+    icon: 'i-solar:user-speak-rounded-bold-duotone',
     to: '/settings/modules/speech',
     configured: false,
   },
@@ -43,7 +43,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'hearing',
     name: t('settings.pages.modules.hearing.title'),
     description: t('settings.pages.modules.hearing.description'),
-    icon: 'i-lucide:ear',
+    icon: 'i-solar:microphone-3-bold-duotone',
     to: '',
     configured: false,
   },
@@ -51,7 +51,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'vision',
     name: t('settings.pages.modules.vision.title'),
     description: t('settings.pages.modules.vision.description'),
-    icon: 'i-lucide:eye',
+    icon: 'i-solar:eye-closed-bold-duotone',
     to: '',
     configured: false,
   },
@@ -59,7 +59,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'memory-short-term',
     name: t('settings.pages.modules.memory-short-term.title'),
     description: t('settings.pages.modules.memory-short-term.description'),
-    icon: 'i-lucide:book',
+    icon: 'i-solar:bookmark-bold-duotone',
     to: '/settings/modules/memory-short-term',
     configured: false,
   },
@@ -67,7 +67,7 @@ const modulesList = computed<Module[]>(() => [
     id: 'memory-long-term',
     name: t('settings.pages.modules.memory-long-term.title'),
     description: t('settings.pages.modules.memory-long-term.description'),
-    icon: 'i-lucide:book-copy',
+    icon: 'i-solar:book-bookmark-bold-duotone',
     to: '/settings/modules/memory-long-term',
     configured: false,
   },
@@ -109,7 +109,7 @@ const {
   iconAnimationStarted,
   showIconAnimation,
   animationIcon,
-} = useIconAnimation('i-lucide:blocks')
+} = useIconAnimation('i-solar:layers-bold-duotone')
 </script>
 
 <template>
@@ -171,8 +171,9 @@ const {
     :enter="{ scale: 1, opacity: 1, y: 0 }"
     :duration="500"
     size-60
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:blocks />
+    <div text="60" i-solar:layers-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/modules/speech.vue b/apps/stage-web/src/pages/settings/modules/speech.vue
index 54d2b37cc..7085cd55f 100644
--- a/apps/stage-web/src/pages/settings/modules/speech.vue
+++ b/apps/stage-web/src/pages/settings/modules/speech.vue
@@ -525,8 +525,9 @@ function updateCustomModelName(value: string) {
     :enter="{ scale: 1, opacity: 1, x: 0 }"
     :duration="500"
     size-60
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:mic />
+    <div text="60" i-solar:user-speak-rounded-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/providers/index.vue b/apps/stage-web/src/pages/settings/providers/index.vue
index 9fca830c3..308dcfa3a 100644
--- a/apps/stage-web/src/pages/settings/providers/index.vue
+++ b/apps/stage-web/src/pages/settings/providers/index.vue
@@ -16,7 +16,7 @@ const {
   iconAnimationStarted,
   showIconAnimation,
   animationIcon,
-} = useIconAnimation('i-lucide:brain')
+} = useIconAnimation('i-solar:box-minimalistic-bold-duotone')
 </script>
 
 <template>
@@ -78,8 +78,9 @@ const {
     :enter="{ scale: 1, opacity: 1, y: 0 }"
     :duration="500"
     size-60
+    flex items-center justify-center
   >
-    <div text="60" i-lucide:brain />
+    <div text="60" i-solar:box-minimalistic-bold-duotone />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/scene/index.vue b/apps/stage-web/src/pages/settings/scene/index.vue
new file mode 100644
index 000000000..7dbfe5a58
--- /dev/null
+++ b/apps/stage-web/src/pages/settings/scene/index.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import { useIconAnimation } from '../../../composables/useIconAnimation'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const {
+  iconAnimationStarted,
+  showIconAnimation,
+  animationIcon,
+} = useIconAnimation('i-solar:armchair-2-bold-duotone')
+</script>
+
+<template>
+  <div
+    v-motion
+    flex="~ row" items-center gap-2
+    :initial="{ opacity: 0, x: 10 }"
+    :enter="{ opacity: 1, x: 0 }"
+    :leave="{ opacity: 0, x: -10 }"
+    :duration="250"
+  >
+    <button @click="router.back()">
+      <div i-solar:alt-arrow-left-line-duotone text-2xl />
+    </button>
+    <h1 relative>
+      <div absolute left-0 top-0 translate-y="[-80%]">
+        <span text="neutral-300 dark:neutral-500" text-nowrap>{{ t('settings.title') }}</span>
+      </div>
+      <div text-nowrap text-3xl font-semibold>
+        {{ t('settings.pages.scene.title') }}
+      </div>
+    </h1>
+  </div>
+  <div>
+    Scene
+  </div>
+  <IconAnimation
+    v-if="showIconAnimation"
+    :z-index="-1"
+    :icon="animationIcon"
+    :icon-size="12"
+    :duration="1000"
+    :started="iconAnimationStarted"
+    :is-reverse="true"
+    position="calc(100dvw - 9.5rem), calc(100dvh - 9.5rem)"
+    text-color="text-neutral-200/50 dark:text-neutral-600/20"
+  />
+  <div
+    v-else
+    v-motion
+    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
+    :initial="{ scale: 0.9, opacity: 0, y: 20 }"
+    :enter="{ scale: 1, opacity: 1, y: 0 }"
+    :duration="500"
+    size-60
+    flex items-center justify-center
+  >
+    <div text="60" i-solar:armchair-2-bold-duotone />
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>