提交代码

frontend/src/pages/ChatBotPage.tsx

@@ -237,9 +237,6 @@ export const ChatBotPage = () => {
     const stored = getStorage(STORAGE_KEYS.HAS_SHOWN_PROGRESS_BAR_TOOLTIP);
     return stored === 'true';
   });
-  // 临时能量石动画状态
-  const [isTempStoneAnimating, setIsTempStoneAnimating] = useState(false);
-  const [isTempStoneVisible, setIsTempStoneVisible] = useState(true);
   const progressBarTooltipTimerRef = useRef<number | null>(null);
   const progressBarTooltipRef = useRef<HTMLImageElement | null>(null);
   const [isAvatarCUnlocked, setIsAvatarCUnlocked] = useState(() => {
@@ -2271,109 +2268,6 @@ export const ChatBotPage = () => {
             );
       })}
 
-      {/* 临时能量石+光晕 - 用于测试/展示 - 可点击，点击后沿黑线移动到动画形象中心 */}
-      {isTempStoneVisible && (
-        <div
-          className={`energy-stone-container energy-stone-mission ${isTempStoneAnimating ? 'temp-stone-animating' : ''}`}
-          style={{
-            position: 'absolute',
-            left: '50%',
-            // 起点：能量石区域 top + 30% 高度（动画时由CSS动画控制）
-            ...(isTempStoneAnimating ? {} : {
-              top: `calc(${px2vmin(126)} + ${px2vmin(172)} * 0.3)`,
-            }),
-            transform: 'translate(-50%, -50%)',
-            width: px2vmin(48),
-            height: px2vmin(48),
-            pointerEvents: isTempStoneAnimating ? 'none' : 'auto',
-            cursor: isTempStoneAnimating ? 'default' : 'pointer',
-            zIndex: 5,
-          }}
-          onClick={() => {
-            if (!isTempStoneAnimating) {
-              console.log('[临时能量石] 点击触发动画');
-              setIsTempStoneAnimating(true);
-              // 动画完成后隐藏元素
-              setTimeout(() => {
-                console.log('[临时能量石] 动画完成，隐藏元素');
-                setIsTempStoneVisible(false);
-              }, 1000);
-            }
-          }}
-        >
-        {/* 光晕层 */}
-        <img
-          src={missionEnergyStoneHint}
-          alt=""
-          className="energy-stone-hint"
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            transformOrigin: 'center center',
-            width: px2vmin(92),
-            height: px2vmin(92),
-            pointerEvents: 'none',
-            zIndex: 0,
-            maxWidth: 'none',
-            maxHeight: 'none',
-            objectFit: 'contain',
-          }}
-        />
-        {/* 能量石图片 */}
-        <div
-          className="energy-stone"
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            transformOrigin: 'center center',
-            width: px2vmin(48),
-            height: px2vmin(48),
-            zIndex: 1,
-            pointerEvents: 'none',
-          }}
-        >
-          <img src={missionEnergyStone} alt="" aria-hidden="true" />
-        </div>
-      </div>
-      )}
-
-      {/* 临时连接线 - 从临时能量石中心到动画形象中心 */}
-      <svg
-        className="absolute pointer-events-none"
-        style={{
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          zIndex: 3,
-        }}
-      >
-        {/* 
-          起点：临时能量石中心
-          - 能量石区域 top: 126px, height: 172px
-          - 临时能量石在区域内 top: 30%
-          - 绝对位置: 126 + 172 * 0.3 = 177.6px
-          - 在设计稿 812px 高度下: 177.6 / 812 = 21.87%
-          
-          终点：动画形象距离顶部60%位置
-          - 动画形象 top: 248px, height: 340px
-          - 60%位置: 248 + 340 * 0.6 = 452px
-          - 在设计稿 812px 高度下: 452 / 812 = 55.67%
-        */}
-        <line
-          x1="50%"
-          y1="21.87%"
-          x2="50%"
-          y2="55.67%"
-          stroke="black"
-          strokeWidth="2"
-        />
-      </svg>
-
       {/* AnimaZone 头像 - 使用设计稿 375×812 基准 + px2vmin 适配 */}
       <div
         className="chatbot-anima-zone-avatar absolute"
@@ -2403,24 +2297,6 @@ export const ChatBotPage = () => {
         />
       </div>
 
-      {/* 能量石动画终点位置标记 - 红色圆圈 */}
-      <div
-        style={{
-          position: 'absolute',
-          // 终点：动画形象距离顶部60%位置 = 248 + 340 * 0.6 = 452px
-          top: px2vmin(452),
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          width: px2vmin(20),
-          height: px2vmin(20),
-          borderRadius: '50%',
-          backgroundColor: 'red',
-          border: `2px solid red`,
-          zIndex: 10,
-          pointerEvents: 'none',
-        }}
-      />
-
       {/* 音频波形 - 宽度 100% 自适应 */}
       <div
         className="chatbot-audio-wave overflow-hidden"

frontend/src/styles/chatbot-fix.css

@@ -69,66 +69,6 @@ body[data-too-small="true"] .chatbot-bg,
   animation-duration: 8s;
 }
 
-/* 临时能量石动画时禁用浮动动画，但应用移动动画 */
-.energy-stone-container.temp-stone-animating {
-  /* 移除浮动动画，应用移动动画 */
-  animation: tempStoneMoveToAvatar 1s ease-in-out forwards !important;
-}
-
-/* 临时能量石动画时，能量石和光晕同步缩小 */
-.energy-stone-container.temp-stone-animating .energy-stone {
-  animation: tempStoneShrink 1s ease-in-out forwards !important;
-}
-
-.energy-stone-container.temp-stone-animating .energy-stone-hint {
-  /* 禁用呼吸灯动画，应用缩小动画 */
-  animation: tempStoneHintShrink 1s ease-in-out forwards !important;
-}
-
-/* 临时能量石移动到动画形象中心的动画 */
-@keyframes tempStoneMoveToAvatar {
-  0% {
-    /* 起点：能量石区域 top + 30% 高度 */
-    /* 使用与React代码完全相同的计算方式 */
-    top: calc(min(calc(126 * min(100vw, 600PX) / 375), calc(15.517241379310345 * var(--vh, 1vh))) + min(calc(172 * min(100vw, 600PX) / 375), calc(21.182266009852217 * var(--vh, 1vh))) * 0.3) !important;
-    left: 50% !important;
-    transform: translate(-50%, -50%) !important;
-    opacity: 1 !important;
-  }
-  100% {
-    /* 终点：动画形象距离顶部60%位置 = 248 + 340 * 0.6 = 452px */
-    /* 使用与动画形象相同的 px2vmin 计算方式 */
-    top: min(calc(452 * min(100vw, 600PX) / 375), calc(452 / 812 * 100 * var(--vh, 1vh))) !important;
-    left: 50% !important;
-    transform: translate(-50%, -50%) !important;
-    opacity: 0 !important;
-  }
-}
-
-/* 能量石缩小动画 - 从 48px 缩小到 4.8px (10%) */
-@keyframes tempStoneShrink {
-  0% {
-    width: min(calc(48 * min(100vw, 600PX) / 375), calc(5.911330049261084 * var(--vh, 1vh))) !important;
-    height: min(calc(48 * min(100vw, 600PX) / 375), calc(5.911330049261084 * var(--vh, 1vh))) !important;
-  }
-  100% {
-    width: min(calc(4.8 * min(100vw, 600PX) / 375), calc(0.5911330049261084 * var(--vh, 1vh))) !important;
-    height: min(calc(4.8 * min(100vw, 600PX) / 375), calc(0.5911330049261084 * var(--vh, 1vh))) !important;
-  }
-}
-
-/* 光晕缩小动画 - 从 92px 缩小到 9.2px (10%) */
-@keyframes tempStoneHintShrink {
-  0% {
-    width: min(calc(92 * min(100vw, 600PX) / 375), calc(11.330049261083744 * var(--vh, 1vh))) !important;
-    height: min(calc(92 * min(100vw, 600PX) / 375), calc(11.330049261083744 * var(--vh, 1vh))) !important;
-  }
-  100% {
-    width: min(calc(9.2 * min(100vw, 600PX) / 375), calc(1.1330049261083744 * var(--vh, 1vh))) !important;
-    height: min(calc(9.2 * min(100vw, 600PX) / 375), calc(1.1330049261083744 * var(--vh, 1vh))) !important;
-  }
-}
-
 /* 正式能量石动画时禁用浮动动画，但应用移动动画 */
 /* 使用更具体的选择器，避免与旧的 data-fading 规则冲突 */
 .energy-stone-container[data-fading='true']:not([data-stone-id]) {