mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-08-31 10:18:57 +00:00
Leon.Schmidt
a9dd46f98f
Make the App Store part of the phone shell (remove preload helper/loadAppStoreComponent and App.vue preload) by importing AppStoreApp in PhoneAppWindow and selecting it when app.id === 'app-store'. Update the apps registry to use an inline import for the async component. Replace unsupported CSS features (:has, color-mix) with CEF-safe alternatives using semantic tokens (--sky-app-accent-soft, --sky-danger-soft) and add explicit .store-action-button/.store-action-button--icon and .store-detail__action classes. Add contract tests to assert the App Store is bundled with the shell and that styles remain compatible with the FiveM CEF target.
44 lines
1.3 KiB
Vue
44 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import CustomAppFrame from '@/components/CustomAppFrame.vue'
|
|
import { getPhoneApp, isExternalPhoneApp } from '@/config/apps'
|
|
import { usePhoneStore } from '@/stores/phone'
|
|
import { getCustomAppFrameKey } from '@/utils/customAppLifecycle'
|
|
import AppStoreApp from '@/views/apps/AppStoreApp.vue'
|
|
|
|
const route = useRoute()
|
|
const phone = usePhoneStore()
|
|
const app = computed(() => getPhoneApp(route.params.appId))
|
|
const builtinAppComponent = computed(() =>
|
|
app.value?.id === 'app-store' ? AppStoreApp : app.value?.component,
|
|
)
|
|
const launchStyle = computed(() => {
|
|
const origin = phone.launchOrigin
|
|
return {
|
|
'--launch-radius': `${origin?.borderRadius ?? 72}px`,
|
|
'--launch-scale-x': origin?.scaleX ?? 0.82,
|
|
'--launch-scale-y': origin?.scaleY ?? 0.82,
|
|
'--launch-x': `${origin?.x ?? 35}px`,
|
|
'--launch-y': `${origin?.y ?? 70}px`,
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="app" class="app-window" :style="launchStyle">
|
|
<CustomAppFrame
|
|
v-if="isExternalPhoneApp(app)"
|
|
:key="getCustomAppFrameKey(app)"
|
|
:app="app"
|
|
/>
|
|
<Suspense v-else>
|
|
<component :is="builtinAppComponent" />
|
|
<template #fallback>
|
|
<div class="app-loading">{{ phone.t('Common.loading') }}</div>
|
|
</template>
|
|
</Suspense>
|
|
</div>
|
|
</template>
|