提交

frontend/src/components/AnimatedCharacter.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import type { EmotionType, AnimationState } from '@/types';
-import avatarImage from '@/assets/IMG_0552.png';
-// import ellipseShadow from '@/assets/Ellipse-3677.png';
+import { getOssUrl } from '@/utils/oss';
+
+const avatarImage = getOssUrl('IMG_0552.png');
+// const ellipseShadow = getOssUrl('Ellipse-3677.png');
 
 interface AnimatedCharacterProps {
   emotion: EmotionType;

frontend/src/components/MissionEnergyStoneModal.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect } from 'react';
 import { px2vmin, px2vw } from '@/utils/viewport';
 import './MissionEnergyStoneModal.css';
-import missionEnergyStoneImage from '@/assets/Mission-Energy-Stone.png';
-import conversationEnergyStoneImage from '@/assets/Conversation-Energy-Stone.png';
+import { getOssUrl } from '@/utils/oss';
+
+const missionEnergyStoneImage = getOssUrl('Mission-Energy-Stone.png');
+const conversationEnergyStoneImage = getOssUrl('Conversation-Energy-Stone.png');
 
 interface MissionEnergyStoneModalProps {
   visible: boolean;

frontend/src/components/ProgressBarCanvas.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef } from 'react';
-import progressBarBgSvg from '@/assets/progress-bar-bgl.svg';
+import { getOssUrl } from '@/utils/oss';
+
+const progressBarBgSvg = getOssUrl('progress-bar-bgl.svg');
 
 interface ProgressBarCanvasProps {
   width: number;

frontend/src/components/RecordButton.tsx

@@ -3,8 +3,10 @@ import { Button, Space } from 'antd';
 import { SendOutlined, CloseOutlined } from '@ant-design/icons';
 import type { ClientState } from '@/types';
 import { px2vw } from '@/utils/viewport';
-import progressRing from '@/assets/progress-ring.svg';
-import micIcon from '@/assets/mic-icon.svg';
+import { getOssUrl } from '@/utils/oss';
+
+const progressRing = getOssUrl('progress-ring.svg');
+const micIcon = getOssUrl('mic-icon.svg');
 
 interface RecordButtonProps {
   state: ClientState;

frontend/src/index.css

@@ -50,7 +50,7 @@ body {
   padding: 0;
   /* 全局背景：在宽度超过 600px 时，左右区域仍然使用应用背景而不是纯白色 */
   background-color: #E8E8E8;
-  background-image: url("./assets/chatbot-bg.svg");
+  background-image: url("https://lyrria-pro.oss-cn-beijing.aliyuncs.com/chatbot-bg.svg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

frontend/src/pages/ChatBotPage.tsx

@@ -28,24 +28,26 @@ import { getUserInfo, updateUserUIState, getUserUIState, getAvatarGifs, type Ava
 import { px2vw, px2vh, px2vmin } from '@/utils/viewport';
 import type { Message, EnergyStoneSpawnMessage } from '@/types';
 import '@/styles/chatbot-fix.css';
-import avatarC from '@/assets/Avatar-C.svg';
-import avatarGift from '@/assets/avatar-gift.png';
-import audioButton from '@/assets/audio-button.png';
-import avatarHint from '@/assets/Avatar-hint.png';
+import { getOssUrl } from '@/utils/oss';
 import { AudioWave, type AudioWaveHandle } from '@/components/AudioWave';
-import microphoneIcon from '@/assets/microphone-icon.svg';
-import progressRing from '@/assets/progress-ring.svg';
-import progressFull from '@/assets/progress-full.svg';
-import tapToChat from '@/assets/TapToChat.svg';
-import cancelIcon from '@/assets/cancel-icon.svg';
-import sendIcon from '@/assets/send-icon.svg';
-import tooltipsCancel from '@/assets/tooltips-cancel.svg';
-import tooltipsSend from '@/assets/tooltips-send.svg';
-import tooltipsProgressBar from '@/assets/tooltips-progress-bar.svg';
-import missionEnergyStone from '@/assets/Mission-Energy-Stone.png';
-import conversationEnergyStone from '@/assets/Conversation-Energy-Stone.png';
-import missionEnergyStoneHint from '@/assets/Mission-Energy-Stone-hint.png';
-import conversationEnergyStoneHint from '@/assets/Conversation-Energy-Stone-hint.png';
+
+const avatarC = getOssUrl('Avatar-C.svg');
+const avatarGift = getOssUrl('avatar-gift.png');
+const audioButton = getOssUrl('audio-button.png');
+const avatarHint = getOssUrl('Avatar-hint.png');
+const microphoneIcon = getOssUrl('microphone-icon.svg');
+const progressRing = getOssUrl('progress-ring.svg');
+const progressFull = getOssUrl('progress-full.svg');
+const tapToChat = getOssUrl('TapToChat.svg');
+const cancelIcon = getOssUrl('cancel-icon.svg');
+const sendIcon = getOssUrl('send-icon.svg');
+const tooltipsCancel = getOssUrl('tooltips-cancel.svg');
+const tooltipsSend = getOssUrl('tooltips-send.svg');
+const tooltipsProgressBar = getOssUrl('tooltips-progress-bar.svg');
+const missionEnergyStone = getOssUrl('Mission-Energy-Stone.png');
+const conversationEnergyStone = getOssUrl('Conversation-Energy-Stone.png');
+const missionEnergyStoneHint = getOssUrl('Mission-Energy-Stone-hint.png');
+const conversationEnergyStoneHint = getOssUrl('Conversation-Energy-Stone-hint.png');
 import { useEnergyStones, type EnergyStoneEventPayload } from '@/hooks/useEnergyStones';
 import { MissionEnergyStoneModal } from '@/components/MissionEnergyStoneModal';
 

frontend/src/pages/ErrorPage.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { px2vw, px2vh, px2fluidFontSize } from '@/utils/viewport';
-import lumiImage from '@/assets/Lumi-image.png';
+import { getOssUrl } from '@/utils/oss';
+
+const lumiImage = getOssUrl('Lumi-image.png');
 import './WelcomePage.css';
 
 /**

frontend/src/pages/FirstLoginPage.tsx

@@ -3,13 +3,15 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage';
 import { updateUserUIState } from '@/utils/api';
 import { px2vmin, px2vw, px2vh } from '@/utils/viewport';
-import giftProgressBar from '@/assets/gift-progress-bar.png';
-// import wechatLogin from '@/assets/wechat-login.png';
-import qqLogin from '@/assets/qq-login.png';
-import phoneLogin from '@/assets/phone-login.png';
-import emailLogin from '@/assets/email-login.png';
-import continueBtn from '@/assets/continue-btn.png';
-import continueBtnA from '@/assets/continue-btn-a.png';
+import { getOssUrl } from '@/utils/oss';
+
+const giftProgressBar = getOssUrl('gift-progress-bar.png');
+// const wechatLogin = getOssUrl('wechat-login.png');
+const qqLogin = getOssUrl('qq-login.png');
+const phoneLogin = getOssUrl('phone-login.png');
+const emailLogin = getOssUrl('email-login.png');
+const continueBtn = getOssUrl('continue-btn.png');
+const continueBtnA = getOssUrl('continue-btn-a.png');
 
 interface LocationState {
   loginType?: 'phone' | 'qq' | 'email';

frontend/src/pages/FirstLoginRewardPage.tsx

@@ -3,15 +3,17 @@ import { useNavigate } from 'react-router-dom';
 import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage';
 import { updateUserUIState } from '@/utils/api';
 import { px2vmin, px2vw } from '@/utils/viewport';
-import backButton from '@/assets/backbutn.png';
-import shareProgressBar from '@/assets/share-progress-bar.png';
-import avatarAnimaZone from '@/assets/avatar-anima-zone-copy.png';
-import shareBtn from '@/assets/share-btn.png';
-import closeBtn from '@/assets/close-btn.png';
-import wechatIcon from '@/assets/wechat.png';
-import qqIcon from '@/assets/QQ.png';
-import saveIcon from '@/assets/save.png';
-import saveBtnImage from '@/assets/Save-btn.png';
+import { getOssUrl } from '@/utils/oss';
+
+const backButton = getOssUrl('backbutn.png');
+const shareProgressBar = getOssUrl('share-progress-bar.png');
+const avatarAnimaZone = getOssUrl('avatar-anima-zone-copy.png');
+const shareBtn = getOssUrl('share-btn.png');
+const closeBtn = getOssUrl('close-btn.png');
+const wechatIcon = getOssUrl('wechat.png');
+const qqIcon = getOssUrl('QQ.png');
+const saveIcon = getOssUrl('save.png');
+const saveBtnImage = getOssUrl('Save-btn.png');
 import { shareImages as fallbackShareImages } from '@/data/shareImages';
 import { getShareImages, type ShareImageItem } from '@/utils/api';
 

frontend/src/pages/GreetingPage.tsx

@@ -14,7 +14,9 @@ import {
 } from '../utils/storage';
 import { getUserInfo, updateUsername, updateUserUIState, createUser } from '../utils/api';
 import { px2vw, px2vh, px2vmin } from '../utils/viewport';
-import ConfirmBtnImage from '../assets/confirm-btn.png';
+import { getOssUrl } from '../utils/oss';
+
+const ConfirmBtnImage = getOssUrl('confirm-btn.png');
 
 const isBackendGeneratedName = (name: string): boolean => /^User\d+$/.test(name.trim());
 

frontend/src/pages/Level34WelcomePage.tsx

@@ -3,9 +3,11 @@ import { useNavigate } from 'react-router-dom';
 import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes, getUserLevel } from '@/utils/storage';
 import { updateUserUIState } from '@/utils/api';
 import { px2vw, px2vh, px2vmin } from '@/utils/viewport';
-import giftProgressBar from '@/assets/gift-progress-bar.png';
-import registerForGift from '@/assets/register-for-gift.png';
-import backButton from '@/assets/backbutn.png';
+import { getOssUrl } from '@/utils/oss';
+
+const giftProgressBar = getOssUrl('gift-progress-bar.png');
+const registerForGift = getOssUrl('register-for-gift.png');
+const backButton = getOssUrl('backbutn.png');
 
 export const Level34WelcomePage = () => {
   const navigate = useNavigate();

frontend/src/pages/Level5WelcomePage.tsx

@@ -3,8 +3,10 @@ import { useNavigate } from 'react-router-dom';
 import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage';
 import { updateUserUIState } from '@/utils/api';
 import { px2vw, px2vh, px2vmin } from '@/utils/viewport';
-import giftProgressBar from '@/assets/gift-progress-bar.png';
-import registerForGift from '@/assets/register-for-gift.png';
+import { getOssUrl } from '@/utils/oss';
+
+const giftProgressBar = getOssUrl('gift-progress-bar.png');
+const registerForGift = getOssUrl('register-for-gift.png');
 
 export const Level5WelcomePage = () => {
   const navigate = useNavigate();

frontend/src/pages/LoginPage.tsx

@@ -3,12 +3,14 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage';
 import { updateUserUIState } from '@/utils/api';
 import { px2vmin, px2vw, px2vh } from '@/utils/viewport';
-import qqLogin from '@/assets/qq-login.png';
-import phoneLogin from '@/assets/phone-login.png';
-import emailLogin from '@/assets/email-login.png';
-import continueBtn from '@/assets/continue-btn.png';
-import continueBtnA from '@/assets/continue-btn-a.png';
-import backButton from '@/assets/backbutn.png';
+import { getOssUrl } from '@/utils/oss';
+
+const qqLogin = getOssUrl('qq-login.png');
+const phoneLogin = getOssUrl('phone-login.png');
+const emailLogin = getOssUrl('email-login.png');
+const continueBtn = getOssUrl('continue-btn.png');
+const continueBtnA = getOssUrl('continue-btn-a.png');
+const backButton = getOssUrl('backbutn.png');
 
 interface LocationState {
   loginType?: 'phone' | 'qq' | 'email';

frontend/src/pages/LoginVerificationCodePage.tsx

@@ -4,10 +4,12 @@ import { message } from 'antd';
 import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage';
 import { updateUserUIState, sendCode } from '@/utils/api';
 import { px2vmin, px2vw, px2vh } from '@/utils/viewport';
-import giftProgressBar from '@/assets/gift-progress-bar.png';
-import sendCodeNo from '@/assets/send-code-no.png';
-import sendCodeImage from '@/assets/send-code.png';
-import backButton from '@/assets/backbutn.png';
+import { getOssUrl } from '@/utils/oss';
+
+const giftProgressBar = getOssUrl('gift-progress-bar.png');
+const sendCodeNo = getOssUrl('send-code-no.png');
+const sendCodeImage = getOssUrl('send-code.png');
+const backButton = getOssUrl('backbutn.png');
 
 interface LocationState {
   loginType?: 'phone' | 'email';

frontend/src/pages/LoginVerificationInputPage.tsx

@@ -4,8 +4,10 @@ import { message } from 'antd';
 import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage';
 import { updateUserUIState, verifyCode, loginWithPhone, loginWithEmail } from '@/utils/api';
 import { px2vmin, px2vw } from '@/utils/viewport';
-import sendCodeWaitNo from '@/assets/send-code-wait-no.png';
-import backButton from '@/assets/backbutn.png';
+import { getOssUrl } from '@/utils/oss';
+
+const sendCodeWaitNo = getOssUrl('send-code-wait-no.png');
+const backButton = getOssUrl('backbutn.png');
 
 interface LocationState {
   loginType?: 'phone' | 'email';

frontend/src/pages/LumiNamingPage.tsx

@@ -3,7 +3,9 @@ import { useNavigate } from 'react-router-dom';
 import { getStorage, setStorage, STORAGE_KEYS, markRouteVisited, getUserId, getVisitedRoutes } from '../utils/storage';
 import { updateBotName, updateUserUIState } from '../utils/api';
 import { px2vw, px2vh, px2vmin } from '../utils/viewport';
-import ConfirmBtnImage from '../assets/confirm-btn.png';
+import { getOssUrl } from '../utils/oss';
+
+const ConfirmBtnImage = getOssUrl('confirm-btn.png');
 
 const DEFAULT_LUMI_NAME = 'Lumi';
 

frontend/src/pages/ProfilePage.tsx

@@ -3,17 +3,19 @@ import { useNavigate } from 'react-router-dom';
 import { px2vmin, px2vmax, px2vw } from '@/utils/viewport';
 import { getUserInfo, updateUsername, updateBotName } from '@/utils/api';
 import { getUserId, getStorage, setStorage, STORAGE_KEYS } from '@/utils/storage';
-import closeBtn from '@/assets/close-btn.png';
-import editIcon from '@/assets/mode_edit_outline.png';
-import missionEnergyStoneCount from '@/assets/mission-energy-stone-count.png';
-import conversationEnergyStoneCount from '@/assets/conversion-energy-stone-count.png';
-import lumiNoCap from '@/assets/Lumi-no-cap.png';
-import lumiCap from '@/assets/Lumi-cap.png';
-import arrowRight from '@/assets/arrow_right.png';
-import headCap from '@/assets/head-cap.png';
-import bgHappyNewYear from '@/assets/bg-happynewyear.png';
-import starBg from '@/assets/star-bg.png';
-import rocketIcon from '@/assets/Rocket.png';
+import { getOssUrl } from '@/utils/oss';
+
+const closeBtn = getOssUrl('close-btn.png');
+const editIcon = getOssUrl('mode_edit_outline.png');
+const missionEnergyStoneCount = getOssUrl('mission-energy-stone-count.png');
+const conversationEnergyStoneCount = getOssUrl('conversion-energy-stone-count.png');
+const lumiNoCap = getOssUrl('Lumi-no-cap.png');
+const lumiCap = getOssUrl('Lumi-cap.png');
+const arrowRight = getOssUrl('arrow_right.png');
+const headCap = getOssUrl('head-cap.png');
+const bgHappyNewYear = getOssUrl('bg-happynewyear.png');
+const starBg = getOssUrl('star-bg.png');
+const rocketIcon = getOssUrl('Rocket.png');
 
 
 export const ProfilePage = () => {

frontend/src/pages/ShareSuccessPage.tsx

@@ -3,9 +3,11 @@ import { useNavigate } from 'react-router-dom';
 import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage';
 import { updateUserUIState } from '@/utils/api';
 import { px2vmin } from '@/utils/viewport';
-import fullProgressBar from '@/assets/full-progress-bar.png';
-import avatarAnimaZone from '@/assets/avatar-anima-zone-copy.png';
-import continueChatBtn from '@/assets/continue-chat.png';
+import { getOssUrl } from '@/utils/oss';
+
+const fullProgressBar = getOssUrl('full-progress-bar.png');
+const avatarAnimaZone = getOssUrl('avatar-anima-zone-copy.png');
+const continueChatBtn = getOssUrl('continue-chat.png');
 
 const BACKGROUND_IMAGE_URL = 'https://lyrria-pro.oss-cn-beijing.aliyuncs.com/happynewyear.jpg';
 

frontend/src/pages/VerificationCodePage.tsx

@@ -3,10 +3,12 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage';
 import { updateUserUIState } from '@/utils/api';
 import { px2vmin, px2vw, px2vh } from '@/utils/viewport';
-import giftProgressBar from '@/assets/gift-progress-bar.png';
-import sendCodeNo from '@/assets/send-code-no.png';
-import sendCode from '@/assets/send-code.png';
-import backButton from '@/assets/backbutn.png';
+import { getOssUrl } from '@/utils/oss';
+
+const giftProgressBar = getOssUrl('gift-progress-bar.png');
+const sendCodeNo = getOssUrl('send-code-no.png');
+const sendCode = getOssUrl('send-code.png');
+const backButton = getOssUrl('backbutn.png');
 
 interface LocationState {
   loginType?: 'phone' | 'email';

frontend/src/pages/VerificationInputPage.tsx

@@ -3,10 +3,12 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage';
 import { updateUserUIState, verifyCode } from '@/utils/api';
 import { px2vmin, px2vw } from '@/utils/viewport';
-import giftProgressBar from '@/assets/gift-progress-bar.png';
-import sendCodeWaitNo from '@/assets/send-code-wait-no.png';
-import registerForGift from '@/assets/register-for-gift.png';
-import backButton from '@/assets/backbutn.png';
+import { getOssUrl } from '@/utils/oss';
+
+const giftProgressBar = getOssUrl('gift-progress-bar.png');
+const sendCodeWaitNo = getOssUrl('send-code-wait-no.png');
+const registerForGift = getOssUrl('register-for-gift.png');
+const backButton = getOssUrl('backbutn.png');
 
 interface LocationState {
   loginType?: 'phone' | 'email';

frontend/src/pages/VideoIntroPage.tsx

@@ -5,7 +5,9 @@ import { setStorage, STORAGE_KEYS, getVisitedRoutes, markRouteVisited, getUserId
 import { updateUserUIState } from '@/utils/api';
 import 'video.js/dist/video-js.css';
 import './VideoIntroPage.css';
-import chatbotBg from '@/assets/chatbot-bg.svg';
+import { getOssUrl } from '@/utils/oss';
+
+const chatbotBg = getOssUrl('chatbot-bg.svg');
 
 // 扩展 videojs 的类型定义
 type VideoJsPlayer = ReturnType<typeof videojs>;

frontend/src/pages/WelcomePage.css

@@ -40,7 +40,7 @@
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  background-image: url('../assets/chatbot-bg.svg');
+  background-image: url('https://lyrria-pro.oss-cn-beijing.aliyuncs.com/chatbot-bg.svg');
   z-index: 0;
 }
 

frontend/src/pages/WelcomePage.tsx

@@ -5,7 +5,9 @@ import videojs from 'video.js';
 import { setStorage, STORAGE_KEYS, markRouteVisited, getVisitedRoutes, getUserId, getStorage } from '@/utils/storage';
 import { updateUserUIState } from '@/utils/api';
 import 'video.js/dist/video-js.css';
-import lumiImage from '@/assets/Lumi-image.png';
+import { getOssUrl } from '@/utils/oss';
+
+const lumiImage = getOssUrl('Lumi-image.png');
 import './WelcomePage.css';
 
 // 扩展 videojs 的类型定义

frontend/src/utils/oss.ts

@@ -0,0 +1,16 @@
+/**
+ * OSS 资源工具类
+ * 统一管理 OSS 资源地址
+ */
+
+const OSS_BASE_URL = 'https://lyrria-pro.oss-cn-beijing.aliyuncs.com';
+
+/**
+ * 获取 OSS 资源 URL
+ * @param filename 文件名（包含扩展名）
+ * @returns OSS 资源完整 URL
+ */
+export const getOssUrl = (filename: string): string => {
+  return `${OSS_BASE_URL}/${filename}`;
+};
+