feat: support project font collection

spx-gui/src/apps/xbuilder/.env.production-cn

@@ -9,5 +9,6 @@ VITE_SENTRY_DSN="https://3b532e8d49bece95a4ad2d14c73c2e0b@o4509472134987776.inge
 VITE_SHOW_LICENSE="true"
 VITE_SHOW_TUTORIALS_ENTRY="true"
 VITE_DEFAULT_LANG="zh"
+VITE_DEFAULT_FONT_PREFERENCES="basic-chinese, default"
 
 VITE_ACCOUNT_OAUTH_CLIENT_ID="1"

spx-gui/src/apps/xbuilder/env.ts

@@ -5,6 +5,7 @@ export const disableAIGC = import.meta.env.VITE_DISABLE_AIGC === 'true'
 export const showLicense = import.meta.env.VITE_SHOW_LICENSE === 'true'
 export const showTutorialsEntry = import.meta.env.VITE_SHOW_TUTORIALS_ENTRY === 'true'
 export const defaultLang = (import.meta.env.VITE_DEFAULT_LANG as string) || 'en'
+export const defaultFontPreferences = (import.meta.env.VITE_DEFAULT_FONT_PREFERENCES as string) || 'default'
 export const accountOAuthClientId = import.meta.env.VITE_ACCOUNT_OAUTH_CLIENT_ID as string
 const sentryTracesSampleRate = parseFloat(import.meta.env.VITE_SENTRY_TRACES_SAMPLE_RATE as string)
 const sentryLSPSampleRate = parseFloat(import.meta.env.VITE_SENTRY_LSP_SAMPLE_RATE as string)

spx-gui/src/apps/xbuilder/setup.ts

@@ -8,6 +8,7 @@ import { initUserState } from '@/stores/user'
 import { configureApp, setup } from '@/setup'
 import { provideDisableAIGC } from '@/components/asset/preprocessing/config'
 import { provideCommunityConfig } from '@/components/community/config'
+import { provideProjectConfig } from '@/components/project/config'
 
 import * as env from './env'
 
@@ -28,5 +29,6 @@ export function configureXBuilderApp(app: VueApp, router?: Router) {
     showTutorialsEntry: env.showTutorialsEntry
   })
   provideDisableAIGC(app, env.disableAIGC)
+  provideProjectConfig(app, { defaultFontPreferences: env.defaultFontPreferences })
   configureApp(app, router, env)
 }

spx-gui/src/assets/fonts/basic-chinese/README.md

@@ -0,0 +1,4 @@
+# Noto Sans CJK SC
+
+`NotoSansCJKsc-Regular.otf` is the Noto Sans CJK SC Regular font from
+<https://github.com/notofonts/noto-cjk> and is licensed under the SIL Open Font License 1.1.

spx-gui/src/assets/fonts/default/README.md

@@ -0,0 +1,4 @@
+# Noto Sans
+
+`NotoSans-Medium.ttf` is a temporary Latin placeholder for SPX's `default` font.
+It is from [Noto Sans](https://github.com/notofonts/latin-greek-cyrillic) and is licensed under the SIL Open Font License 1.1.

spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue

@@ -19,7 +19,7 @@ import RemoveMenuItem from '@/components/editor/common/corner-menu-item/RemoveMe
 import GenItem from '../common/GenItem.vue'
 import CostumesAutoPlayer from '@/components/common/CostumesAutoPlayer.vue'
 import { useHovered } from '@/utils/dom'
-import { useRenderableImageUrl } from '@/utils/img-rendering'
+import { useFontAwareRenderableImageUrl } from '@/utils/img-rendering'
 import animationSVG from '../common/animation.svg?raw'
 
 const props = defineProps<{
@@ -35,7 +35,7 @@ const emit = defineEmits<{
 
 const wrapperRef = ref<InstanceType<typeof GenItem>>()
 
-const [imgSrc, imgLoading] = useRenderableImageUrl(() => props.gen.result?.costumes[0].img)
+const [imgSrc, imgLoading] = useFontAwareRenderableImageUrl(() => props.gen.result?.costumes[0].img)
 const hovered = useHovered(() => wrapperRef.value?.$el ?? null)
 
 const isLoading = computed(() => isAnimationLoading(props.gen) || imgLoading.value)

spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRenderableImageUrl } from '@/utils/img-rendering'
+import { useFontAwareRenderableImageUrl } from '@/utils/img-rendering'
 import type { File } from '@/models/common/file'
 import { UIBlockItem, UIImg } from '@/components/ui'
 import { useImageSelectorCompact, useImageSelectorDisabled } from '../common/ImageSelector.vue'
@@ -21,7 +21,7 @@ const props = withDefaults(
 
 const disabled = useImageSelectorDisabled()
 const compact = useImageSelectorCompact()
-const [url, fileLoading] = useRenderableImageUrl(() => props.file)
+const [url, fileLoading] = useFontAwareRenderableImageUrl(() => props.file)
 const loading = computed(() => props.loading || fileLoading.value)
 </script>