diff --git a/apps/stage-tamagotchi/src/renderer/pages/index.vue b/apps/stage-tamagotchi/src/renderer/pages/index.vue index 9f15d32bf..6c345d517 100644 --- a/apps/stage-tamagotchi/src/renderer/pages/index.vue +++ b/apps/stage-tamagotchi/src/renderer/pages/index.vue @@ -15,6 +15,7 @@ import { useElectronRelativeMouse, } from '@proj-airi/electron-vueuse' import { useModelStore, useThreeSceneIsTransparentAtPoint } from '@proj-airi/stage-ui-three' +import { HoloCoupon } from '@proj-airi/stage-ui/components' import { createEmptyModelSettingsRuntimeSnapshot, resolveComponentStateToRuntimePhase, @@ -476,6 +477,7 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => { :x-offset="positionInPercentageString.x" :y-offset="positionInPercentageString.y" /> + diff --git a/apps/stage-web/src/pages/index.vue b/apps/stage-web/src/pages/index.vue index 700c61002..87e5f03fd 100644 --- a/apps/stage-web/src/pages/index.vue +++ b/apps/stage-web/src/pages/index.vue @@ -10,6 +10,7 @@ import workletUrl from '@proj-airi/stage-ui/workers/vad/process.worklet?worker&u import { BackgroundProvider } from '@proj-airi/stage-layouts/components/Backgrounds' import { useBackgroundThemeColor } from '@proj-airi/stage-layouts/composables/theme-color' import { useBackgroundStore } from '@proj-airi/stage-layouts/stores/background' +import { HoloCoupon } from '@proj-airi/stage-ui/components' import { WidgetStage } from '@proj-airi/stage-ui/components/scenes' import { useAudioRecorder } from '@proj-airi/stage-ui/composables/audio/audio-recorder' import { useVAD } from '@proj-airi/stage-ui/stores/ai/models/vad' @@ -179,6 +180,7 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => { + diff --git a/packages/i18n/src/locales/en/stage.yaml b/packages/i18n/src/locales/en/stage.yaml index 4b833a8fc..cf43eb220 100644 --- a/packages/i18n/src/locales/en/stage.yaml +++ b/packages/i18n/src/locales/en/stage.yaml @@ -41,4 +41,46 @@ profile-switcher: save-as-new: Save as New Profile new-profile-name: Profile name manage: Manage Profiles +promo-banner: + items: + signin: + watermark: Moon + fallbackLabel: Moon Gift + title: 7-Day Sign-In + eventName: Sign in to claim stardust, avatar frames, and launch gifts. + date: 03/28 - 04/10 + reward: Up to 120 Stardust + cta: Sign In + build: + watermark: Build + fallbackLabel: Build Bonus + title: Supply Box Bonus + eventName: Finish construction tasks to earn bonus vouchers and double materials. + date: 03/30 - 04/12 + reward: 5 Supply Vouchers + Upgrade Materials + cta: View Tasks + spring: + watermark: Spring + fallbackLabel: Spring Draw + title: Capsule Carnival + eventName: Join the spring draw to unlock bubbles, charms, and themed furniture. + date: 04/01 - 04/18 + reward: Half-Price First Pull + Rare Charm + cta: Draw Now + coupon: + watermark: Talk + fallbackLabel: Coupon + title: Top-Up Coupon + eventName: Finish chat interactions to claim coupons for expansion and voice packs. + date: 04/02 - 04/20 + reward: Save 6 on 30 / Save 15 on 68 + cta: Claim Coupon + home: + watermark: Home + fallbackLabel: Room Theme + title: Spring Theme Update + eventName: Unlock window, desk, and night-lamp themes to refresh your room. + date: 04/05 - 04/22 + reward: Free Theme Draw Ticket on Login + cta: View Theme waiting: Waiting diff --git a/packages/i18n/src/locales/es/stage.yaml b/packages/i18n/src/locales/es/stage.yaml index e776bfa6e..76a81d6c7 100644 --- a/packages/i18n/src/locales/es/stage.yaml +++ b/packages/i18n/src/locales/es/stage.yaml @@ -41,4 +41,46 @@ profile-switcher: save-as-new: Guardar como Nuevo Perfil new-profile-name: Nombre del perfil manage: Administrar Perfiles +promo-banner: + items: + signin: + watermark: Moon + fallbackLabel: Regalo lunar + title: Recompensa de 7 días + eventName: Inicia sesión para conseguir polvo estelar, marcos de avatar y regalos especiales. + date: 03/28 - 04/10 + reward: Hasta 120 de polvo estelar + cta: Iniciar sesión + build: + watermark: Build + fallbackLabel: Bono de obra + title: Caja de suministro extra + eventName: Completa tareas de construcción para obtener cupones y materiales al doble. + date: 03/30 - 04/12 + reward: 5 cupones + materiales de mejora + cta: Ver tareas + spring: + watermark: Spring + fallbackLabel: Sorteo primaveral + title: Carnaval cápsula + eventName: Participa en el sorteo de primavera y desbloquea burbujas, dijes y muebles temáticos. + date: 04/01 - 04/18 + reward: Primer intento a mitad + dije raro + cta: Ir al sorteo + coupon: + watermark: Talk + fallbackLabel: Cupón + title: Cupón de recarga + eventName: Completa interacciones para recibir cupones para paquetes de diálogo y voces. + date: 04/02 - 04/20 + reward: Ahorra 6 en 30 / 15 en 68 + cta: Recibir cupón + home: + watermark: Home + fallbackLabel: Tema del cuarto + title: Decoración de primavera + eventName: Desbloquea temas de ventana, escritorio y lámpara para renovar tu espacio. + date: 04/05 - 04/22 + reward: Ticket de tema gratis al iniciar sesión + cta: Ver tema waiting: Esperando... diff --git a/packages/i18n/src/locales/fr/stage.yaml b/packages/i18n/src/locales/fr/stage.yaml index aeee36eb1..3b96d27df 100644 --- a/packages/i18n/src/locales/fr/stage.yaml +++ b/packages/i18n/src/locales/fr/stage.yaml @@ -41,4 +41,46 @@ profile-switcher: save-as-new: Enregistrer comme Nouveau Profil new-profile-name: Nom du profil manage: Gérer les Profils +promo-banner: + items: + signin: + watermark: Moon + fallbackLabel: Cadeau lunaire + title: Cadeau de connexion 7 jours + eventName: Connectez-vous pour obtenir poussière d’étoile, cadre d’avatar et cadeaux spéciaux. + date: 03/28 - 04/10 + reward: Jusqu’à 120 poussières d’étoile + cta: Se connecter + build: + watermark: Build + fallbackLabel: Bonus chantier + title: Caisse bonus + eventName: Terminez les missions de construction pour obtenir des coupons et des matériaux doublés. + date: 03/30 - 04/12 + reward: 5 coupons + matériaux d’amélioration + cta: Voir les missions + spring: + watermark: Spring + fallbackLabel: Tirage printanier + title: Carnaval capsule + eventName: Participez au tirage du printemps pour débloquer bulles, charms et meubles thématiques. + date: 04/01 - 04/18 + reward: Premier tirage à moitié prix + charm rare + cta: Aller au tirage + coupon: + watermark: Talk + fallbackLabel: Coupon + title: Coupon de recharge + eventName: Terminez des interactions pour obtenir des coupons pour packs de dialogue et de voix. + date: 04/02 - 04/20 + reward: -6 sur 30 / -15 sur 68 + cta: Récupérer le coupon + home: + watermark: Home + fallbackLabel: Theme de chambre + title: Décor de printemps + eventName: Débloquez des thèmes de fenêtre, bureau et veilleuse pour renouveler votre espace. + date: 04/05 - 04/22 + reward: Ticket de thème offert à la connexion + cta: Voir le thème waiting: En attente diff --git a/packages/i18n/src/locales/ja/stage.yaml b/packages/i18n/src/locales/ja/stage.yaml index b5a3e0f77..4f2c599b9 100644 --- a/packages/i18n/src/locales/ja/stage.yaml +++ b/packages/i18n/src/locales/ja/stage.yaml @@ -41,4 +41,46 @@ profile-switcher: save-as-new: 新規プロファイルとして保存 new-profile-name: Profile name manage: プロファイルを管理 +promo-banner: + items: + signin: + watermark: Moon + fallbackLabel: 月の贈り物 + title: 7日間ログイン特典 + eventName: ログインで星砂、アイコンフレーム、登場記念ギフトを獲得できます。 + date: 03/28 - 04/10 + reward: 最大 120 星砂 + cta: 今すぐ受け取る + build: + watermark: Build + fallbackLabel: 建造ボーナス + title: 補給箱ボーナス + eventName: 建造任務を完了すると補給券と2倍素材報酬を獲得できます。 + date: 03/30 - 04/12 + reward: 補給券 x5 + 強化素材 + cta: 任務を見る + spring: + watermark: Spring + fallbackLabel: 春の抽選 + title: カプセルカーニバル + eventName: 春のガチャに参加して吹き出し、チャーム、テーマ家具を解放しましょう。 + date: 04/01 - 04/18 + reward: 初回半額 + レアチャーム + cta: 引きに行く + coupon: + watermark: Talk + fallbackLabel: クーポン + title: チャージクーポン + eventName: 会話ミッションを完了すると拡張パックや音声パック用クーポンを受け取れます。 + date: 04/02 - 04/20 + reward: 30で6割引 / 68で15割引 + cta: クーポンを受け取る + home: + watermark: Home + fallbackLabel: ルームテーマ + title: 春のルーム更新 + eventName: 窓辺、デスク、ナイトライトのテーマを開放して部屋を模様替えできます。 + date: 04/05 - 04/22 + reward: ログインでテーマ抽選券 + cta: テーマを見る waiting: 待機中 diff --git a/packages/i18n/src/locales/ko/stage.yaml b/packages/i18n/src/locales/ko/stage.yaml index 4338617bc..6b7709918 100644 --- a/packages/i18n/src/locales/ko/stage.yaml +++ b/packages/i18n/src/locales/ko/stage.yaml @@ -41,4 +41,46 @@ profile-switcher: save-as-new: Save as New Profile new-profile-name: Profile name manage: Manage Profiles +promo-banner: + items: + signin: + watermark: Moon + fallbackLabel: 달빛 선물 + title: 7일 출석 보상 + eventName: 출석만 해도 스타더스트, 아바타 프레임, 기념 보상을 받을 수 있어요. + date: 03/28 - 04/10 + reward: 최대 120 스타더스트 + cta: 지금 출석하기 + build: + watermark: Build + fallbackLabel: 건설 보너스 + title: 보급 상자 추가 지급 + eventName: 건설 임무를 완료하면 보급 쿠폰과 2배 재료 보상을 획득합니다. + date: 03/30 - 04/12 + reward: 보급 쿠폰 x5 + 강화 재료 + cta: 임무 보기 + spring: + watermark: Spring + fallbackLabel: 봄 추첨 + title: 캡슐 카니발 + eventName: 봄 뽑기에 참여해 말풍선, 장식, 테마 가구를 잠금 해제하세요. + date: 04/01 - 04/18 + reward: 첫 뽑기 반값 + 희귀 장식 + cta: 뽑기 하러 가기 + coupon: + watermark: Talk + fallbackLabel: 쿠폰 + title: 충전 쿠폰 + eventName: 대화 미션을 완료하면 확장팩과 음성팩에 사용할 쿠폰을 받을 수 있어요. + date: 04/02 - 04/20 + reward: 30 이상 6 할인 / 68 이상 15 할인 + cta: 쿠폰 받기 + home: + watermark: Home + fallbackLabel: 룸 테마 + title: 봄 배경 업데이트 + eventName: 창가, 책상, 무드등 테마를 열어 홈 화면을 새롭게 꾸며보세요. + date: 04/05 - 04/22 + reward: 로그인 시 테마 추첨권 지급 + cta: 테마 보기 waiting: 대기 중 diff --git a/packages/i18n/src/locales/ru/stage.yaml b/packages/i18n/src/locales/ru/stage.yaml index 72032eb96..b69d0fe14 100644 --- a/packages/i18n/src/locales/ru/stage.yaml +++ b/packages/i18n/src/locales/ru/stage.yaml @@ -41,4 +41,46 @@ profile-switcher: save-as-new: Сохранить как Новый Профиль new-profile-name: Profile name manage: Управление профилями +promo-banner: + items: + signin: + watermark: Moon + fallbackLabel: Лунный подарок + title: Подарок за 7 дней входа + eventName: За вход можно получить звёздную пыль, рамку аватара и памятные награды. + date: 03/28 - 04/10 + reward: До 120 звёздной пыли + cta: Войти сейчас + build: + watermark: Build + fallbackLabel: Бонус стройки + title: Дополнительный ящик снабжения + eventName: Выполняйте строительные задания и получайте купоны и двойные материалы. + date: 03/30 - 04/12 + reward: 5 купонов + материалы усиления + cta: Открыть задания + spring: + watermark: Spring + fallbackLabel: Весенний розыгрыш + title: Весенний карнавал + eventName: Участвуйте в розыгрыше и открывайте пузырьки, подвески и тематическую мебель. + date: 04/01 - 04/18 + reward: Первый розыгрыш со скидкой + редкая подвеска + cta: Перейти к розыгрышу + coupon: + watermark: Talk + fallbackLabel: Купон + title: Купон на пополнение + eventName: Завершите диалоговые задания и получите купоны на наборы диалогов и голосов. + date: 04/02 - 04/20 + reward: Скидка 6 от 30 / 15 от 68 + cta: Получить купон + home: + watermark: Home + fallbackLabel: Тема комнаты + title: Весеннее оформление + eventName: Откройте темы окна, стола и ночника, чтобы обновить домашнее пространство. + date: 04/05 - 04/22 + reward: Билет на тему за вход + cta: Открыть тему waiting: Ожидание diff --git a/packages/i18n/src/locales/vi/stage.yaml b/packages/i18n/src/locales/vi/stage.yaml index c9a192700..f76066ff6 100644 --- a/packages/i18n/src/locales/vi/stage.yaml +++ b/packages/i18n/src/locales/vi/stage.yaml @@ -41,4 +41,46 @@ profile-switcher: save-as-new: Save as New Profile new-profile-name: Profile name manage: Manage Profiles +promo-banner: + items: + signin: + watermark: Moon + fallbackLabel: Qua trang + title: Quà đăng nhập 7 ngày + eventName: Đăng nhập để nhận bụi sao, khung avatar và quà ra mắt đặc biệt. + date: 03/28 - 04/10 + reward: Tối đa 120 bụi sao + cta: Điểm danh ngay + build: + watermark: Build + fallbackLabel: Thuong xay dung + title: Thùng tiếp tế thêm quà + eventName: Hoàn thành nhiệm vụ xây dựng để nhận phiếu tiếp tế và nguyên liệu nhân đôi. + date: 03/30 - 04/12 + reward: 5 phiếu tiếp tế + nguyên liệu nâng cấp + cta: Xem nhiệm vụ + spring: + watermark: Spring + fallbackLabel: Rut thuong xuan + title: Lễ hội capsule + eventName: Tham gia vòng quay mùa xuân để mở khóa bong bóng chat, charm và nội thất chủ đề. + date: 04/01 - 04/18 + reward: Lượt đầu giảm nửa giá + charm hiếm + cta: Đến quay ngay + coupon: + watermark: Talk + fallbackLabel: Phieu giam gia + title: Phiếu ưu đãi nạp + eventName: Hoàn thành tương tác hội thoại để nhận phiếu cho gói mở rộng và gói giọng nói. + date: 04/02 - 04/20 + reward: Giảm 6 cho 30 / giảm 15 cho 68 + cta: Nhận phiếu + home: + watermark: Home + fallbackLabel: Chu de phong + title: Cập nhật chủ đề xuân + eventName: Mở khóa chủ đề cửa sổ, bàn và đèn ngủ để làm mới không gian trang chủ. + date: 04/05 - 04/22 + reward: Tặng vé quay chủ đề khi đăng nhập + cta: Xem chủ đề waiting: Đang chờ diff --git a/packages/i18n/src/locales/zh-Hans/stage.yaml b/packages/i18n/src/locales/zh-Hans/stage.yaml index 2972d6bb4..ed9597571 100644 --- a/packages/i18n/src/locales/zh-Hans/stage.yaml +++ b/packages/i18n/src/locales/zh-Hans/stage.yaml @@ -41,4 +41,46 @@ profile-switcher: save-as-new: 存为新角色 new-profile-name: 角色卡名称 manage: 管理角色卡 +promo-banner: + items: + signin: + watermark: Moon + fallbackLabel: 月光礼盒 + title: 七日签到礼 + eventName: 完成签到即可领取星砂、头像框与登场纪念礼 + date: 03/28 - 04/10 + reward: 累计可得 120 星砂 + cta: 立即签到 + build: + watermark: Build + fallbackLabel: 建造加成 + title: 补给箱加送 + eventName: 完成建造任务可额外掉落补给券，素材收益双倍结算 + date: 03/30 - 04/12 + reward: 补给券 x5 + 强化素材 + cta: 查看任务 + spring: + watermark: Spring + fallbackLabel: 春日抽奖 + title: 扭蛋嘉年华 + eventName: 参与春日池抽奖，解锁聊天气泡、挂件与主题家具 + date: 04/01 - 04/18 + reward: 首抽半价 + 稀有挂件 + cta: 前往抽取 + coupon: + watermark: Talk + fallbackLabel: 优惠券 + title: 充值优惠券 + eventName: 完成对话互动即可领取充值券，可用于对话扩展包与语音包 + date: 04/02 - 04/20 + reward: 满 30 减 6 / 满 68 减 15 + cta: 领取优惠券 + home: + watermark: Home + fallbackLabel: 房间主题 + title: 春季布景更新 + eventName: 解锁窗台、桌摆与晚安灯饰三套主题，快速焕新主页空间 + date: 04/05 - 04/22 + reward: 登录即送布景抽取券 + cta: 查看主题 waiting: 等待中 diff --git a/packages/i18n/src/locales/zh-Hant/stage.yaml b/packages/i18n/src/locales/zh-Hant/stage.yaml index 3ce854e0a..01e9b75d4 100644 --- a/packages/i18n/src/locales/zh-Hant/stage.yaml +++ b/packages/i18n/src/locales/zh-Hant/stage.yaml @@ -41,4 +41,46 @@ profile-switcher: save-as-new: Save as New Profile new-profile-name: Profile name manage: Manage Profiles +promo-banner: + items: + signin: + watermark: Moon + fallbackLabel: 月光贈禮 + title: 七日簽到禮 + eventName: 完成簽到即可領取星砂、頭像框與登場紀念禮 + date: 03/28 - 04/10 + reward: 累計可得 120 星砂 + cta: 立即簽到 + build: + watermark: Build + fallbackLabel: 建造加成 + title: 補給箱加送 + eventName: 完成建造任務可額外掉落補給券，素材收益雙倍結算 + date: 03/30 - 04/12 + reward: 補給券 x5 + 強化素材 + cta: 查看任務 + spring: + watermark: Spring + fallbackLabel: 春日抽獎 + title: 扭蛋嘉年華 + eventName: 參與春日池抽獎，解鎖聊天氣泡、掛件與主題家具 + date: 04/01 - 04/18 + reward: 首抽半價 + 稀有掛件 + cta: 前往抽取 + coupon: + watermark: Talk + fallbackLabel: 優惠券 + title: 充值優惠券 + eventName: 完成對話互動即可領取充值券，可用於對話擴展包與語音包 + date: 04/02 - 04/20 + reward: 滿 30 減 6 / 滿 68 減 15 + cta: 領取優惠券 + home: + watermark: Home + fallbackLabel: 房間主題 + title: 春季佈景更新 + eventName: 解鎖窗台、桌擺與晚安燈飾三套主題，快速煥新主頁空間 + date: 04/05 - 04/22 + reward: 登錄即送佈景抽取券 + cta: 查看主題 waiting: 等待中 diff --git a/packages/stage-ui/package.json b/packages/stage-ui/package.json index 880bc860b..251d9f8ab 100644 --- a/packages/stage-ui/package.json +++ b/packages/stage-ui/package.json @@ -103,6 +103,8 @@ "d3": "catalog:", "date-fns": "^4.1.0", "dompurify": "^3.3.3", + "embla-carousel-autoplay": "9.0.0-rc01", + "embla-carousel-vue": "catalog:", "es-toolkit": "catalog:", "gpuu": "^1.0.6", "hono": "catalog:", diff --git a/packages/stage-ui/src/components/scenarios/hologram/holo-coupon.vue b/packages/stage-ui/src/components/scenarios/hologram/holo-coupon.vue new file mode 100644 index 000000000..fae4a6903 --- /dev/null +++ b/packages/stage-ui/src/components/scenarios/hologram/holo-coupon.vue @@ -0,0 +1,276 @@ + + + + + diff --git a/packages/stage-ui/src/components/scenarios/hologram/index.ts b/packages/stage-ui/src/components/scenarios/hologram/index.ts new file mode 100644 index 000000000..2906cb068 --- /dev/null +++ b/packages/stage-ui/src/components/scenarios/hologram/index.ts @@ -0,0 +1 @@ +export { default as HoloCoupon } from './holo-coupon.vue' diff --git a/packages/stage-ui/src/components/scenarios/hologram/promo-banner.test.ts b/packages/stage-ui/src/components/scenarios/hologram/promo-banner.test.ts new file mode 100644 index 000000000..ad6f42fbb --- /dev/null +++ b/packages/stage-ui/src/components/scenarios/hologram/promo-banner.test.ts @@ -0,0 +1,41 @@ +import { describe, expect, it } from 'vitest' + +import { + getPromoBannerFallbackLabelKey, + promoBannerVisuals, +} from './promo-banner' + +describe('promo banner visuals', () => { + it('defines concrete actions for every promo banner item', () => { + expect(promoBannerVisuals).toMatchObject([ + { + key: 'signin', + action: { type: 'login' }, + }, + { + key: 'build', + action: { type: 'route', to: '/settings/modules/consciousness' }, + }, + { + key: 'spring', + action: { type: 'route', to: '/settings/flux' }, + }, + { + key: 'coupon', + action: { type: 'route', to: '/settings/flux' }, + }, + { + key: 'home', + action: { type: 'route', to: '/settings/scene' }, + }, + ]) + }) + + it('resolves fallback labels through locale keys instead of hard-coded English strings', () => { + expect(getPromoBannerFallbackLabelKey('signin')).toBe('stage.promo-banner.items.signin.fallbackLabel') + expect(getPromoBannerFallbackLabelKey('build')).toBe('stage.promo-banner.items.build.fallbackLabel') + expect(getPromoBannerFallbackLabelKey('spring')).toBe('stage.promo-banner.items.spring.fallbackLabel') + expect(getPromoBannerFallbackLabelKey('coupon')).toBe('stage.promo-banner.items.coupon.fallbackLabel') + expect(getPromoBannerFallbackLabelKey('home')).toBe('stage.promo-banner.items.home.fallbackLabel') + }) +}) diff --git a/packages/stage-ui/src/components/scenarios/hologram/promo-banner.ts b/packages/stage-ui/src/components/scenarios/hologram/promo-banner.ts new file mode 100644 index 000000000..07add2225 --- /dev/null +++ b/packages/stage-ui/src/components/scenarios/hologram/promo-banner.ts @@ -0,0 +1,79 @@ +import factorioPoster from '../../../assets/factorio-simple.png' +import onboardingPoster from '../../../assets/onboarding.avif' + +export interface PromoBannerItem { + watermark: string + title: string + eventName: string + date: string + reward: string + cta: string +} + +export type PromoBannerItemKey = 'signin' | 'build' | 'spring' | 'coupon' | 'home' + +export type PromoBannerAction + = | { type: 'login' } + | { type: 'route', to: string } + +export interface PromoBannerVisual { + key: PromoBannerItemKey + image: string + action: PromoBannerAction + accentClass: string + fallbackIcon: string + fallbackIconClass: string + fallbackClass: string +} + +export function getPromoBannerFallbackLabelKey(key: PromoBannerItemKey) { + return `stage.promo-banner.items.${key}.fallbackLabel` +} + +export const promoBannerVisuals: PromoBannerVisual[] = [ + { + key: 'signin', + image: onboardingPoster, + action: { type: 'login' }, + accentClass: 'from-fuchsia-500/30 via-rose-400/18 to-transparent', + fallbackIcon: 'i-solar:stars-line-duotone', + fallbackIconClass: 'text-amber-100', + fallbackClass: 'from-fuchsia-300/25 via-rose-300/14 to-violet-400/20', + }, + { + key: 'build', + image: factorioPoster, + action: { type: 'route', to: '/settings/modules/consciousness' }, + accentClass: 'from-cyan-500/30 via-sky-400/18 to-transparent', + fallbackIcon: 'i-solar:box-bold-duotone', + fallbackIconClass: 'text-cyan-100', + fallbackClass: 'from-cyan-300/25 via-sky-300/14 to-blue-400/20', + }, + { + key: 'spring', + image: '', + action: { type: 'route', to: '/settings/flux' }, + accentClass: 'from-amber-400/30 via-orange-300/18 to-transparent', + fallbackIcon: 'i-solar:gift-bold-duotone', + fallbackIconClass: 'text-white/88', + fallbackClass: 'from-amber-300/25 via-rose-300/14 to-fuchsia-400/20', + }, + { + key: 'coupon', + image: '', + action: { type: 'route', to: '/settings/flux' }, + accentClass: 'from-emerald-400/28 via-teal-300/16 to-transparent', + fallbackIcon: 'i-solar:ticket-sale-bold-duotone', + fallbackIconClass: 'text-emerald-100', + fallbackClass: 'from-emerald-300/24 via-cyan-300/12 to-teal-400/18', + }, + { + key: 'home', + image: '', + action: { type: 'route', to: '/settings/scene' }, + accentClass: 'from-sky-400/28 via-indigo-300/14 to-transparent', + fallbackIcon: 'i-solar:home-angle-bold-duotone', + fallbackIconClass: 'text-sky-100', + fallbackClass: 'from-sky-300/25 via-indigo-300/14 to-violet-400/18', + }, +] diff --git a/packages/stage-ui/src/components/scenarios/hologram/use-promo-banner-layout.ts b/packages/stage-ui/src/components/scenarios/hologram/use-promo-banner-layout.ts new file mode 100644 index 000000000..429a9f056 --- /dev/null +++ b/packages/stage-ui/src/components/scenarios/hologram/use-promo-banner-layout.ts @@ -0,0 +1,50 @@ +import type { Ref } from 'vue' + +import { computed } from 'vue' + +const cjkLocalePrefixes = ['zh', 'ja', 'ko'] + +export function usePromoBannerLayout(locale: Ref) { + const isCjkLocale = computed(() => + cjkLocalePrefixes.some(prefix => locale.value.startsWith(prefix)), + ) + + const titleClass = computed(() => + isCjkLocale.value + ? 'text-[28px] leading-none font-700' + : 'font-sans text-[22px] leading-tight font-600 tracking-normal', + ) + + const descriptionClass = computed(() => + isCjkLocale.value + ? 'max-w-58 text-[13px] leading-5' + : 'max-w-60 font-sans text-[12px] leading-4.5 font-500', + ) + + const metaClass = computed(() => + isCjkLocale.value + ? 'text-[11px]' + : 'font-sans text-[11px] font-500', + ) + + const buttonClass = computed(() => + isCjkLocale.value + ? 'text-xs font-700' + : 'font-sans text-[12px] font-600 tracking-normal', + ) + + const watermarkClass = computed(() => + isCjkLocale.value + ? 'text-5xl font-600' + : 'font-sans text-[44px] font-500 tracking-[0.08em]', + ) + + return { + buttonClass, + descriptionClass, + isCjkLocale, + metaClass, + titleClass, + watermarkClass, + } +} diff --git a/packages/stage-ui/src/components/scenarios/index.ts b/packages/stage-ui/src/components/scenarios/index.ts index cfbefc788..9928b6c43 100644 --- a/packages/stage-ui/src/components/scenarios/index.ts +++ b/packages/stage-ui/src/components/scenarios/index.ts @@ -1,6 +1,7 @@ export * from './about' export * from './chat' export * from './dialogs' +export * from './hologram' export * from './providers' export * from './settings' export * from './toasters' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5a94812cd..4152eee1f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2968,6 +2968,12 @@ importers: dompurify: specifier: ^3.3.3 version: 3.3.3 + embla-carousel-autoplay: + specifier: 9.0.0-rc01 + version: 9.0.0-rc01(embla-carousel@9.0.0-rc01) + embla-carousel-vue: + specifier: 'catalog:' + version: 9.0.0-rc01(vue@3.5.30(typescript@5.9.3)) es-toolkit: specifier: 'catalog:' version: 1.43.0 @@ -11964,6 +11970,11 @@ packages: email-addresses@3.1.0: resolution: {integrity: sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==} + embla-carousel-autoplay@9.0.0-rc01: + resolution: {integrity: sha512-gl7jUe0X9xd5v7IiyFF2FCR+KTBesnutM0gQ3S75oo9EizZi5tJMNdVaFwvzepz6kGzDkkSbKMWitQvAbFVfdQ==} + peerDependencies: + embla-carousel: 9.0.0-rc01 + embla-carousel-reactive-utils@9.0.0-rc01: resolution: {integrity: sha512-RnW0NMrL7wVAQb9jro+l96hLI2JairyFHS2Jv+fvXakveD/c5aD9aoNH94YRbTmi0G7PxrKSxydmCpTy5eFmrA==} peerDependencies: @@ -26230,6 +26241,10 @@ snapshots: email-addresses@3.1.0: {} + embla-carousel-autoplay@9.0.0-rc01(embla-carousel@9.0.0-rc01): + dependencies: + embla-carousel: 9.0.0-rc01 + embla-carousel-reactive-utils@9.0.0-rc01(embla-carousel@9.0.0-rc01): dependencies: embla-carousel: 9.0.0-rc01