fix(stage-tamagotchi,stage-ui): withBase incorrectly used causes model url issues

Close #773

Author: nekomeowww

packages/stage-ui-three/package.json

@@ -15,6 +15,7 @@
     "directory": "packages/stage-ui-three"
   },
   "exports": {
+    "./assets/vrm": "./src/assets/vrm/index.ts",
     ".": "./src/index.ts"
   },
   "scripts": {

packages/stage-ui-three/src/assets/vrm/animations/index.ts

@@ -0,0 +1,3 @@
+export const animations = {
+  idleLoop: new URL('./idle_loop.vrma', import.meta.url),
+}

packages/stage-ui-three/src/assets/vrm/index.ts

@@ -0,0 +1 @@
+export * from './animations'

packages/stage-ui/package.json

@@ -74,7 +74,7 @@
     "@proj-airi/font-xiaolai": "workspace:^",
     "@proj-airi/i18n": "workspace:^",
     "@proj-airi/server-sdk": "workspace:^",
-    "@proj-airi/stage-shared": "workspace:*",
+    "@proj-airi/stage-shared": "workspace:^",
     "@proj-airi/stage-ui-three": "workspace:^",
     "@proj-airi/tauri-plugin-mcp": "workspace:^",
     "@proj-airi/ui": "workspace:^",

packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DisplayModel } from '../../../../stores/display-models'
 
-import { withBase } from '@proj-airi/stage-shared'
 import { useFileDialog } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger, EditableArea, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from 'reka-ui'
@@ -163,7 +162,7 @@ vrmDialog.onChange(handleAddVRMModel)
             aspect="12/16"
             px-1 py-2
           >
-            <img v-if="model.previewImage" :src="withBase(model.previewImage)" h-full w-full rounded-lg object-cover :class="[highlightDisplayModelCard && highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-400' : 'ring-0 ring-transparent']" transition="all duration-200 ease-in-out">
+            <img v-if="model.previewImage" :src="model.previewImage" h-full w-full rounded-lg object-cover :class="[highlightDisplayModelCard && highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-400' : 'ring-0 ring-transparent']" transition="all duration-200 ease-in-out">
             <div v-else bg="neutral-100 dark:neutral-900" relative h-full w-full flex flex-col items-center justify-center gap-2 overflow-hidden rounded-lg :class="[highlightDisplayModelCard && highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-400' : 'ring-0 ring-transparent']" transition="all duration-200 ease-in-out">
               <div i-solar:question-square-bold-duotone text-4xl opacity-75 />
               <div translate-y="100%" absolute top-0 flex flex-col translate-x--7 rotate-45 scale-250 gap-0 opacity-5>

packages/stage-ui/src/components/scenes/Stage.vue

@@ -9,8 +9,8 @@ import type { TTSChunkItem } from '../../utils/tts'
 
 import { drizzle } from '@proj-airi/drizzle-duckdb-wasm'
 import { getImportUrlBundles } from '@proj-airi/drizzle-duckdb-wasm/bundles/import-url-browser'
-import { withBase } from '@proj-airi/stage-shared'
 import { ThreeScene, useModelStore } from '@proj-airi/stage-ui-three'
+import { animations } from '@proj-airi/stage-ui-three/assets/vrm'
 import { useBroadcastChannel } from '@vueuse/core'
 // import { createTransformers } from '@xsai-transformers/embed'
 // import embedWorkerURL from '@xsai-transformers/embed/worker?worker&url'
@@ -336,7 +336,7 @@ onPlaybackStarted(({ text }) => {
         v-if="stageModelRenderer === 'vrm' && showStage"
         ref="vrmViewerRef"
         :model-src="stageModelSelectedUrl"
-        :idle-animation="withBase('/assets/vrm/animations/idle_loop.vrma')"
+        :idle-animation="animations.idleLoop.toString()"
         min-w="50% <lg:full" min-h="100 sm:100" h-full w-full flex-1
         :paused="paused"
         :show-axes="stageViewControlsEnabled"

packages/stage-ui/src/stores/settings.ts

@@ -2,7 +2,6 @@ import type { DisplayModel } from './display-models'
 
 import messages from '@proj-airi/i18n/locales'
 
-import { withBase } from '@proj-airi/stage-shared'
 import { useEventListener, useLocalStorage } from '@vueuse/core'
 import { converter } from 'culori'
 import { defineStore } from 'pinia'
@@ -81,7 +80,7 @@ export const useSettings = defineStore('settings', () => {
       stageModelSelectedUrl.value = URL.createObjectURL(model.file)
     }
     else {
-      stageModelSelectedUrl.value = withBase(model.url)
+      stageModelSelectedUrl.value = model.url
     }
 
     stageModelSelectedDisplayModel.value = model