From 9327ec0ae4dd2db6a6f3b4e598eaca24bb848f4e Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Mon, 9 Jun 2025 11:43:04 +0800
Subject: [PATCH] fix(stage-web,stage-tamagotchi,stage-ui): eliminate reactive
 use

---
 .../src/pages/settings/providers/ollama.vue        |  4 ++--
 .../src/components/Backgrounds/SakuraPetal.vue     |  8 ++++----
 .../src/pages/settings/providers/ollama.vue        |  4 ++--
 .../components/Form/Field/FieldKeyValues.story.vue | 14 +++++++-------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue b/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue
index a3227ac33..efd8ab09e 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue
@@ -11,7 +11,7 @@ import {
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
 import { FieldKeyValues } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, reactive, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -52,7 +52,7 @@ function handleResetSettings() {
   }
 }
 
-const headers = reactive<{ key: string, value: string }[]>([
+const headers = ref<{ key: string, value: string }[]>([
   { key: '', value: '' },
 ])
 
diff --git a/apps/stage-web/src/components/Backgrounds/SakuraPetal.vue b/apps/stage-web/src/components/Backgrounds/SakuraPetal.vue
index bb96ca67c..1e1b01237 100644
--- a/apps/stage-web/src/components/Backgrounds/SakuraPetal.vue
+++ b/apps/stage-web/src/components/Backgrounds/SakuraPetal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, reactive } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 interface Props {
   petalCount?: number
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   baseColor: '#FFB6C1',
 })
 
-const petals = reactive<Petal[]>([])
+const petals = ref<Petal[]>([])
 let animationInterval: number | null = null
 
 function createPetalStyle() {
@@ -43,9 +43,9 @@ function createPetalStyle() {
 }
 
 function createPetals() {
-  petals.length = 0
+  petals.value.length = 0
   for (let i = 0; i < props.petalCount; i++) {
-    petals.push({
+    petals.value.push({
       id: Date.now() + i,
       style: createPetalStyle(),
     })
diff --git a/apps/stage-web/src/pages/settings/providers/ollama.vue b/apps/stage-web/src/pages/settings/providers/ollama.vue
index 1a4e5887b..3ba2f72ca 100644
--- a/apps/stage-web/src/pages/settings/providers/ollama.vue
+++ b/apps/stage-web/src/pages/settings/providers/ollama.vue
@@ -11,7 +11,7 @@ import {
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
 import { FieldKeyValues } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, reactive, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -52,7 +52,7 @@ function handleResetSettings() {
   }
 }
 
-const headers = reactive<{ key: string, value: string }[]>([
+const headers = ref<{ key: string, value: string }[]>([
   { key: '', value: '' },
 ])
 
diff --git a/packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue b/packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue
index eed5f1422..b2bd109b8 100644
--- a/packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue
+++ b/packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { FieldKeyValues } from '@proj-airi/ui'
-import { reactive, watch } from 'vue'
+import { ref, watch } from 'vue'
 
-const emptyHeaders = reactive<{ key: string, value: string }[]>([
+const emptyHeaders = ref<{ key: string, value: string }[]>([
   { key: '', value: '' },
 ])
-const singleHeader = reactive<{ key: string, value: string }[]>([
+const singleHeader = ref<{ key: string, value: string }[]>([
   { key: 'Content-Type', value: 'application/json' },
 ])
-const multipleHeaders = reactive<{ key: string, value: string }[]>([
+const multipleHeaders = ref<{ key: string, value: string }[]>([
   { key: 'Authorization', value: 'Bearer token123' },
   { key: 'Accept', value: 'application/json' },
   { key: 'X-API-Key', value: 'abc123xyz456' },
@@ -36,7 +36,7 @@ function removeKeyValue(index: number, headers: { key: string, value: string }[]
 
 watch(emptyHeaders, (headers) => {
   if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
-    emptyHeaders.push({ key: '', value: '' })
+    emptyHeaders.value.push({ key: '', value: '' })
   }
 }, {
   deep: true,
@@ -45,7 +45,7 @@ watch(emptyHeaders, (headers) => {
 
 watch(singleHeader, (headers) => {
   if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
-    singleHeader.push({ key: '', value: '' })
+    singleHeader.value.push({ key: '', value: '' })
   }
 }, {
   deep: true,
@@ -54,7 +54,7 @@ watch(singleHeader, (headers) => {
 
 watch(multipleHeaders, (headers) => {
   if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
-    multipleHeaders.push({ key: '', value: '' })
+    multipleHeaders.value.push({ key: '', value: '' })
   }
 }, {
   deep: true,