From fe3f324b2296159d472ba83d40fdfdf6c29eea65 Mon Sep 17 00:00:00 2001
From: lafay <2021211506@stu.hit.edu.cn>
Date: Sat, 10 Jan 2026 02:55:43 +0800
Subject: [PATCH] refactor: enhance SkinCard and SkinViewer components for
 improved visuals

- Updated background gradient colors in SkinCard for better contrast.
- Wrapped SkinViewer in a div for consistent styling and layout.
- Adjusted overlay gradient opacity in SkinCard for a subtler effect.
- Increased global light intensity and adjusted camera light in SkinViewer to enhance skin visibility and reduce harsh shadows.
---
 src/components/SkinCard.tsx   | 30 ++++++++++++++++--------------
 src/components/SkinViewer.tsx |  4 ++++
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/SkinCard.tsx b/src/components/SkinCard.tsx
index d3216ae..9bd84f0 100644
--- a/src/components/SkinCard.tsx
+++ b/src/components/SkinCard.tsx
@@ -146,7 +146,7 @@ export default function SkinCard({
       }}
     >
       {/* 3D预览区域 */}
-      <div className="relative aspect-square bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-600 overflow-hidden">
+      <div className="relative aspect-square bg-gradient-to-br from-orange-100 to-amber-100 dark:from-gray-600 dark:to-gray-500 overflow-hidden">
         {/* 加载状态 */}
         <AnimatePresence>
           {!imageLoaded && (
@@ -171,18 +171,20 @@ export default function SkinCard({
         </AnimatePresence>
 
         {texture.type === 'SKIN' ? (
-          <SkinViewer
-            skinUrl={texture.url}
-            isSlim={texture.is_slim}
-            width={300}
-            height={300}
-            className={`w-full h-full transition-all duration-500 ${
-              imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
-            } ${isHovered ? 'scale-110' : ''}`}
-            autoRotate={isHovered}
-            walking={false}
-            onImageLoaded={() => setImageLoaded(true)}
-          />
+          <div className="relative w-full h-full bg-white dark:bg-gray-800">
+            <SkinViewer
+              skinUrl={texture.url}
+              isSlim={texture.is_slim}
+              width={300}
+              height={300}
+              className={`w-full h-full transition-all duration-500 ${
+                imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
+              } ${isHovered ? 'scale-110' : ''}`}
+              autoRotate={isHovered}
+              walking={false}
+              onImageLoaded={() => setImageLoaded(true)}
+            />
+          </div>
         ) : (
           <div className="absolute inset-0 flex items-center justify-center">
             <motion.div 
@@ -208,7 +210,7 @@ export default function SkinCard({
             initial={{ opacity: 0 }}
             animate={{ opacity: isHovered ? 1 : 0 }}
             transition={{ duration: 0.3 }}
-            className="absolute inset-0 bg-gradient-to-br from-black/40 via-black/30 to-transparent flex items-center justify-center"
+            className="absolute inset-0 bg-gradient-to-br from-black/10 via-black/5 to-transparent flex items-center justify-center"
           >
             <div className="flex gap-3">
               <motion.button
diff --git a/src/components/SkinViewer.tsx b/src/components/SkinViewer.tsx
index 8355572..579fbbf 100644
--- a/src/components/SkinViewer.tsx
+++ b/src/components/SkinViewer.tsx
@@ -101,6 +101,10 @@ export default function SkinViewer({
       viewer.background = null; // 透明背景
       viewer.autoRotate = false; // 完全禁用自动旋转
       
+      // 调整光照设置，避免皮肤发黑
+      viewer.globalLight.intensity = 0.8; // 增加环境光强度
+      viewer.cameraLight.intensity = 0.4; // 降低相机光源强度，避免过强的阴影
+      
       // 外部预览时禁用所有动画和旋转
       if (isExternalPreview) {
         viewer.autoRotate = false;