fix: resolve lint issues and refine avatar visuals

Author: CI

src/__tests__/properties/asr.property.test.ts

@@ -168,13 +168,11 @@ describe('ASR Service Properties', () => {
                     const asr = new ASRService();
 
                     // Multiple starts should not throw
-                    let allSucceeded = true;
                     for (let i = 0; i < startCount; i++) {
                         try {
                             await asr.start();
                         } catch {
                             // Errors are acceptable, but should not crash
-                            allSucceeded = false;
                         }
                     }
 
@@ -242,4 +240,4 @@ describe('ASR Service Properties', () => {
             { numRuns: 50 }
         );
     });
-});;
+});

src/__tests__/properties/performance.property.test.ts

@@ -157,7 +157,7 @@ describe('Performance Properties', () => {
                 fc.asyncProperty(
                     fc.boolean(), // Is page visible
                     fc.integer({ min: 50, max: 500 }), // Pause delay
-                    async (isVisible, pauseDelay) => {
+                    async (isVisible, _pauseDelay) => {
                         let processingPaused = false;
                         let pauseTime: number | null = null;
                         const visibilityChangeTime = Date.now();
@@ -198,11 +198,8 @@ describe('Performance Properties', () => {
         it('VisibilityOptimizer calls pause callbacks when hidden', () => {
             const optimizer = new VisibilityOptimizer({ pauseDelay: 0, resumeDelay: 0 });
 
-            let pauseCalled = false;
-            let resumeCalled = false;
-
-            optimizer.onPause(() => { pauseCalled = true; });
-            optimizer.onResume(() => { resumeCalled = true; });
+            optimizer.onPause(() => { });
+            optimizer.onResume(() => { });
 
             // Initially visible
             expect(optimizer.isVisible()).toBe(true);

src/__tests__/properties/store.property.test.ts

@@ -114,9 +114,6 @@ describe('Store Properties', () => {
      * disconnected → connecting → connected, or any state → error.
      */
     it('Property 29: Store Connection State Transitions - follows valid paths', async () => {
-        vi.resetModules();
-        const { useDigitalHumanStore } = await import('../../store/digitalHumanStore');
-
         const validTransitions: Record<string, string[]> = {
             'disconnected': ['connecting', 'error'],
             'connecting': ['connected', 'error', 'disconnected'],
@@ -160,9 +157,6 @@ describe('Store Properties', () => {
      * adding a new message SHALL remove the oldest message to maintain the limit.
      */
     it('Property 30: Store Chat History Limit - maintains max length', async () => {
-        vi.resetModules();
-        const { useDigitalHumanStore } = await import('../../store/digitalHumanStore');
-
         await fc.assert(
             fc.asyncProperty(
                 fc.integer({ min: 5, max: 20 }),
@@ -204,9 +198,6 @@ describe('Store Properties', () => {
      * Additional: Error queue length limit
      */
     it('Error queue respects max length', async () => {
-        vi.resetModules();
-        const { useDigitalHumanStore } = await import('../../store/digitalHumanStore');
-
         await fc.assert(
             fc.asyncProperty(
                 fc.array(fc.string({ minLength: 1, maxLength: 50 }), { minLength: 1, maxLength: 20 }),
@@ -236,9 +227,6 @@ describe('Store Properties', () => {
      * Additional: Dismiss error removes from queue
      */
     it('Dismiss error removes specific error', async () => {
-        vi.resetModules();
-        const { useDigitalHumanStore } = await import('../../store/digitalHumanStore');
-
         await fc.assert(
             fc.asyncProperty(
                 fc.array(fc.string({ minLength: 1, maxLength: 50 }), { minLength: 2, maxLength: 5 }),

src/__tests__/properties/vision.property.test.ts

@@ -41,20 +41,13 @@ vi.mock('@mediapipe/pose', () => ({
 
 describe('Vision Service Properties', () => {
     let mockStream: any;
-    let mockVideo: any;
-
     beforeEach(() => {
         mockStream = {
             getTracks: vi.fn(() => [
                 { stop: vi.fn(), kind: 'video' },
             ]),
         };
 
-        mockVideo = {
-            srcObject: null,
-            play: vi.fn().mockResolvedValue(undefined),
-        };
-
         // Mock navigator.mediaDevices
         Object.defineProperty(navigator, 'mediaDevices', {
             writable: true,
@@ -134,8 +127,6 @@ describe('Vision Service Properties', () => {
                     visionService.updateConfig({ emotionDebounceMs: debounceMs });
 
                     const emittedEmotions: string[] = [];
-                    const onEmotion = (emotion: any) => emittedEmotions.push(emotion);
-
                     // The debounce logic should filter rapid changes
                     // Stable emotions (repeated 3+ times) should be emitted
                     const stableEmotions = emotions.filter((e, i, arr) => {

src/__tests__/store.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 import { useDigitalHumanStore } from '../store/digitalHumanStore';
 
 // 每个测试前重置 store

src/components/DigitalHumanViewer.enhanced.tsx

@@ -49,7 +49,6 @@ function VisibilityOptimizer({
   onVisibilityChange?: (visible: boolean) => void;
 }) {
   const { gl, invalidate } = useThree();
-  const animationLoopRef = useRef<((time: number) => void) | null>(null);
 
   useEffect(() => {
     const handleVisibilityChange = () => {
@@ -111,13 +110,18 @@ const EMOTION_LIGHT_COLORS: Record<string, string> = {
 function CyberAvatar() {
   const group = useRef<THREE.Group>(null);
   const headGroupRef = useRef<THREE.Group>(null);
-  const bodyGroupRef = useRef<THREE.Group>(null);
   const headRef = useRef<THREE.Mesh>(null);
   const leftEyeRef = useRef<THREE.Mesh>(null);
   const rightEyeRef = useRef<THREE.Mesh>(null);
   const mouthRef = useRef<THREE.Mesh>(null);
   const leftBrowRef = useRef<THREE.Mesh>(null);
   const rightBrowRef = useRef<THREE.Mesh>(null);
+  const leftIrisRef = useRef<THREE.Mesh>(null);
+  const rightIrisRef = useRef<THREE.Mesh>(null);
+  const leftPupilRef = useRef<THREE.Mesh>(null);
+  const rightPupilRef = useRef<THREE.Mesh>(null);
+  const leftHighlightRef = useRef<THREE.Mesh>(null);
+  const rightHighlightRef = useRef<THREE.Mesh>(null);
   const ringsRef = useRef<THREE.Group>(null);
   const bodyRef = useRef<THREE.Mesh>(null);
   const leftArmRef = useRef<THREE.Group>(null);
@@ -146,6 +150,8 @@ function CyberAvatar() {
     leftArmRotX: 0,
     rightArmRotX: 0,
     bodyScale: 1,
+    eyeLookX: 0,
+    eyeLookY: 0,
   });
 
   const {
@@ -159,9 +165,9 @@ function CyberAvatar() {
 
   useFrame((state) => {
     const t = state.clock.elapsedTime;
-    const dt = state.clock.getDelta();
     const intensity = Math.max(0, Math.min(1, expressionIntensity ?? 1));
     const lerp = THREE.MathUtils.lerp;
+    const clamp = THREE.MathUtils.clamp;
     const anim = animState.current;
 
     // ---- 目标值初始化 ----
@@ -328,6 +334,36 @@ function CyberAvatar() {
     if (leftEyeRef.current) leftEyeRef.current.scale.y = anim.leftEyeScaleY;
     if (rightEyeRef.current) rightEyeRef.current.scale.y = anim.rightEyeScaleY;
 
+    const targetEyeLookX = clamp(mouse.current.x * 0.05 + Math.sin(t * 1.7) * 0.01, -0.06, 0.06);
+    const targetEyeLookY = clamp(mouse.current.y * 0.035 + Math.sin(t * 1.3) * 0.008, -0.045, 0.045);
+    anim.eyeLookX = lerp(anim.eyeLookX, targetEyeLookX, 0.12);
+    anim.eyeLookY = lerp(anim.eyeLookY, targetEyeLookY, 0.12);
+
+    if (leftIrisRef.current) {
+      leftIrisRef.current.position.x = -0.24 + anim.eyeLookX;
+      leftIrisRef.current.position.y = anim.eyeLookY;
+    }
+    if (rightIrisRef.current) {
+      rightIrisRef.current.position.x = 0.24 + anim.eyeLookX;
+      rightIrisRef.current.position.y = anim.eyeLookY;
+    }
+    if (leftPupilRef.current) {
+      leftPupilRef.current.position.x = -0.24 + anim.eyeLookX;
+      leftPupilRef.current.position.y = anim.eyeLookY;
+    }
+    if (rightPupilRef.current) {
+      rightPupilRef.current.position.x = 0.24 + anim.eyeLookX;
+      rightPupilRef.current.position.y = anim.eyeLookY;
+    }
+    if (leftHighlightRef.current) {
+      leftHighlightRef.current.position.x = -0.22 + anim.eyeLookX * 0.8;
+      leftHighlightRef.current.position.y = 0.02 + anim.eyeLookY * 0.8;
+    }
+    if (rightHighlightRef.current) {
+      rightHighlightRef.current.position.x = 0.26 + anim.eyeLookX * 0.8;
+      rightHighlightRef.current.position.y = 0.02 + anim.eyeLookY * 0.8;
+    }
+
     // ---- 眉毛动画 ----
     let targetLeftBrowY = 0;
     let targetRightBrowY = 0;
@@ -531,16 +567,16 @@ function CyberAvatar() {
 
   // 共享材质
   const skinMat = useMemo(() => (
-    <meshPhysicalMaterial color="#e8edf5" metalness={0.3} roughness={0.2} clearcoat={1} clearcoatRoughness={0.05} envMapIntensity={2.5} />
+    <meshPhysicalMaterial color="#e8edf5" metalness={0.25} roughness={0.18} clearcoat={1} clearcoatRoughness={0.05} envMapIntensity={2.8} />
   ), []);
   const armorMat = useMemo(() => (
-    <meshPhysicalMaterial color="#1a2332" metalness={0.9} roughness={0.1} clearcoat={1} clearcoatRoughness={0.03} envMapIntensity={2} />
+    <meshPhysicalMaterial color="#151f2e" metalness={0.95} roughness={0.08} clearcoat={1} clearcoatRoughness={0.025} envMapIntensity={2.3} />
   ), []);
   const frameMat = useMemo(() => (
-    <meshStandardMaterial color="#3a4a5c" metalness={0.85} roughness={0.15} />
+    <meshStandardMaterial color="#3f5266" metalness={0.8} roughness={0.18} />
   ), []);
   const glowCyan = useMemo(() => (
-    <meshStandardMaterial color="#22d3ee" emissive="#22d3ee" emissiveIntensity={3} toneMapped={false} />
+    <meshStandardMaterial color="#22d3ee" emissive="#22d3ee" emissiveIntensity={3.2} toneMapped={false} />
   ), []);
 
   return (
@@ -598,29 +634,29 @@ function CyberAvatar() {
             <meshStandardMaterial color="#e2e8f0" metalness={0.1} roughness={0.3} />
           </mesh>
           {/* 虹膜 */}
-          <mesh position={[-0.24, 0, 0.12]} scale={[1, 1, 0.3]}>
+          <mesh ref={leftIrisRef} position={[-0.24, 0, 0.12]} scale={[1, 1, 0.3]}>
             <sphereGeometry args={[0.065, 24, 24]} />
             <meshStandardMaterial color="#38bdf8" emissive="#38bdf8" emissiveIntensity={2} toneMapped={false} />
           </mesh>
-          <mesh position={[0.24, 0, 0.12]} scale={[1, 1, 0.3]}>
+          <mesh ref={rightIrisRef} position={[0.24, 0, 0.12]} scale={[1, 1, 0.3]}>
             <sphereGeometry args={[0.065, 24, 24]} />
             <meshStandardMaterial color="#38bdf8" emissive="#38bdf8" emissiveIntensity={2} toneMapped={false} />
           </mesh>
           {/* 瞳孔 */}
-          <mesh position={[-0.24, 0, 0.14]} scale={[1, 1, 0.2]}>
+          <mesh ref={leftPupilRef} position={[-0.24, 0, 0.14]} scale={[1, 1, 0.2]}>
             <sphereGeometry args={[0.035, 16, 16]} />
             <meshStandardMaterial color="#0284c7" emissive="#22d3ee" emissiveIntensity={5} toneMapped={false} />
           </mesh>
-          <mesh position={[0.24, 0, 0.14]} scale={[1, 1, 0.2]}>
+          <mesh ref={rightPupilRef} position={[0.24, 0, 0.14]} scale={[1, 1, 0.2]}>
             <sphereGeometry args={[0.035, 16, 16]} />
             <meshStandardMaterial color="#0284c7" emissive="#22d3ee" emissiveIntensity={5} toneMapped={false} />
           </mesh>
           {/* 高光点 */}
-          <mesh position={[-0.22, 0.02, 0.15]}>
+          <mesh ref={leftHighlightRef} position={[-0.22, 0.02, 0.15]}>
             <sphereGeometry args={[0.012, 8, 8]} />
             <meshBasicMaterial color="#ffffff" />
           </mesh>
-          <mesh position={[0.26, 0.02, 0.15]}>
+          <mesh ref={rightHighlightRef} position={[0.26, 0.02, 0.15]}>
             <sphereGeometry args={[0.012, 8, 8]} />
             <meshBasicMaterial color="#ffffff" />
           </mesh>

src/components/VRMAvatar.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState, useMemo } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
 import { VRM, VRMUtils } from '@pixiv/three-vrm';
 import { useDigitalHumanStore } from '../store/digitalHumanStore';
 import { useVRMLoader } from '../hooks/vrm/useVRMLoader';
-import { useVRMEmote } from '../hooks/vrm/useVRMEmote';
+import { useVRMEmote as createVRMEmote } from '../hooks/vrm/useVRMEmote';
 import { useVRMBlink } from '../hooks/vrm/useVRMBlink';
 import { useVRMLipSync } from '../hooks/vrm/useVRMLipSync';
 import { useVRMEyeSaccades } from '../hooks/vrm/useVRMEyeSaccades';
@@ -54,7 +54,7 @@ export default function VRMAvatar({ url, onLoad, onError, onProgress }: VRMAvata
   }, []);
 
   // 使用单例 VRM 加载器
-  const loader = useMemo(() => useVRMLoader(), []);
+  const loader = useVRMLoader();
 
   // 加载 VRM 模型
   useEffect(() => {
@@ -85,7 +85,7 @@ export default function VRMAvatar({ url, onLoad, onError, onProgress }: VRMAvata
         vrm.scene.position.set(0, -1.8, 0);
 
         // 初始化模块化控制器
-        emoteRef.current = useVRMEmote(vrm);
+        emoteRef.current = createVRMEmote(vrm);
 
         vrmRef.current = vrm;
         setLoaded(true);
@@ -116,7 +116,7 @@ export default function VRMAvatar({ url, onLoad, onError, onProgress }: VRMAvata
         vrmRef.current = null;
       }
     };
-  }, [url]);
+  }, [loader, onError, onLoad, onProgress, url]);
 
   // ============================================================
   // 每帧更新 — 模块化：表情 + 眨眼 + 唇形 + 眼球微动 + 骨骼

src/components/VisionMirrorPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { visionService, type VisionStatus } from '../core/vision/visionService';
+import { visionService } from '../core/vision/visionService';
 import type { UserEmotion } from '../core/vision/visionMapper';
 import { Camera, CameraOff, ScanFace, AlertCircle, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';