提交

frontend/src/pages/BeginPage.tsx

@@ -730,7 +730,7 @@ export const BeginPage = () => {
                 position: 'absolute',
                 top: px2vmin(138),
                 left: '50%',
-                transform: `translateX(calc(-50% - ${px2vmin(54)})) translateZ(0)`,
+                transform: `translateX(calc(-50% - ${px2vmin(45)})) translateZ(0)`,
                 width: '100%',
                 height: px2vmin(113),
                 background: 'linear-gradient(97.3deg, rgba(245, 243, 240, 0.8) 2.21%, rgba(245, 243, 240, 0.3) 150.89%)',

frontend/src/pages/FirstLoginPage.tsx

@@ -297,7 +297,7 @@ export const FirstLoginPage = () => {
                 className="relative overflow-visible"
                 style={{
                   height: px2vmin(56),
-                  background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+                  background: 'rgba(0,0,0,0.1)',
                   borderTopRightRadius: '12PX',
                   borderBottomRightRadius: '2PX',
                   borderTopLeftRadius: '12PX',
@@ -322,17 +322,17 @@ export const FirstLoginPage = () => {
                   onFocus={() => setIsPhoneFocused(true)}
                   onBlur={() => setIsPhoneFocused(false)}
                 />
-                {phoneNumber && (
-                  <button
-                    className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
-                    style={{
-                      right: px2vmin(12),
-                      width: px2vmin(20),
-                      height: px2vmin(20),
-                    }}
-                    onClick={() => setPhoneNumber('')}
-                    aria-label="清除"
-                  >
+                <button
+                  className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
+                  style={{
+                    right: px2vmin(12),
+                    width: px2vmin(20),
+                    height: px2vmin(20),
+                    opacity: isPhoneFocused && phoneNumber ? 1 : 0.6,
+                  }}
+                  onClick={() => setPhoneNumber('')}
+                  aria-label="清除"
+                >
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                       <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                       <path
@@ -342,8 +342,7 @@ export const FirstLoginPage = () => {
                         strokeLinecap="round"
                       />
                     </svg>
-                  </button>
-                )}
+                </button>
               </div>
               <div
                 className="w-full transition-opacity duration-300"
@@ -364,7 +363,7 @@ export const FirstLoginPage = () => {
               className="relative overflow-visible"
               style={{
                 height: px2vmin(56),
-                background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+                background: 'rgba(0,0,0,0.1)',
                 borderTopLeftRadius: '12PX',
                 borderTopRightRadius: '12PX',
                 borderBottomLeftRadius: '2PX',
@@ -388,17 +387,17 @@ export const FirstLoginPage = () => {
                 onFocus={() => setIsEmailFocused(true)}
                 onBlur={() => setIsEmailFocused(false)}
               />
-              {email && (
-                <button
-                  className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
-                  style={{
-                    right: px2vmin(12),
-                    width: px2vmin(20),
-                    height: px2vmin(20),
-                  }}
-                  onClick={() => setEmail('')}
-                  aria-label="清除"
-                >
+              <button
+                className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
+                style={{
+                  right: px2vmin(12),
+                  width: px2vmin(20),
+                  height: px2vmin(20),
+                  opacity: isEmailFocused && email ? 1 : 0.6,
+                }}
+                onClick={() => setEmail('')}
+                aria-label="清除"
+              >
                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                     <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                     <path
@@ -408,8 +407,7 @@ export const FirstLoginPage = () => {
                       strokeLinecap="round"
                     />
                   </svg>
-                </button>
-              )}
+              </button>
             </div>
             <div
               className="w-full transition-opacity duration-300"

frontend/src/pages/FirstLoginRewardPage.tsx

@@ -17,7 +17,7 @@ import { getOssUrl } from '@/utils/oss';
 
 const backButton = getOssUrl('backbutn.png');
 // const shareProgressBar = getOssUrl('share-progress-bar.png'); // Unused
-const avatarAnimaZone = getOssUrl('avatar-anima-zone-copy.png');
+const avatarAnimaZone = getOssUrl('Lumi-cap.png');
 const shareBtn = getOssUrl('share-btn.png');
 const closeBtn = getOssUrl('close-btn.png');
 // const wechatIcon = getOssUrl('wechat.png'); // 已注释，未使用
@@ -653,7 +653,6 @@ export const FirstLoginRewardPage = () => {
                     border: 'none',
                     padding: 0,
                     background: 'none',
-                    width: px2vmin(140),
                     height: px2vmin(36),
                     cursor: 'pointer',
                   }}
@@ -662,8 +661,7 @@ export const FirstLoginRewardPage = () => {
                     src={claimGiftBtnImage}
                     alt="Claim Gift"
                     style={{
-                      width: '100%',
-                      height: 'auto',
+                      height: '100%',
                       display: 'block',
                     }}
                   />

frontend/src/pages/GreetingPage.tsx

@@ -323,7 +323,7 @@ export const GreetingPage = () => {
             className="relative w-full rounded-t-[4px] overflow-visible"
             style={{
               height: px2vh(layout.inputHeight),
-              background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+              background: 'rgba(0,0,0,0.1)',
               borderTopLeftRadius: '12PX',
               borderTopRightRadius: '12PX',
               borderBottomRightRadius: '2PX',
@@ -362,20 +362,20 @@ export const GreetingPage = () => {
                 }
               }}
             />
-            {isFocused && userName && (
-              <button
-                className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
-                style={{
-                  right: px2vw(12),
-                  width: px2vw(20),
-                  height: px2vh(20),
-                }}
-                onClick={() => {
-                  setHasUserEdited(true);
-                  setUserName('');
-                }}
-                aria-label="清除"
-              >
+            <button
+              className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
+              style={{
+                right: px2vw(12),
+                width: px2vw(20),
+                height: px2vh(20),
+                opacity: isFocused && userName ? 1 : 0.6,
+              }}
+              onClick={() => {
+                setHasUserEdited(true);
+                setUserName('');
+              }}
+              aria-label="清除"
+            >
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                   <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                   <path
@@ -385,8 +385,7 @@ export const GreetingPage = () => {
                     strokeLinecap="round"
                   />
                 </svg>
-              </button>
-            )}
+            </button>
           </div>
           <div
             className="w-full rounded-b-[4px] transition-opacity duration-300"

frontend/src/pages/LoginPage.tsx

@@ -342,7 +342,7 @@ export const LoginPage = () => {
                 className="relative overflow-visible"
                 style={{
                   height: px2vmin(56),
-                  background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+                  background: 'rgba(0,0,0,0.1)',
                   borderTopRightRadius: '12PX',
                   borderBottomRightRadius: '2PX',
                   borderTopLeftRadius: '12PX',
@@ -366,17 +366,17 @@ export const LoginPage = () => {
                   onFocus={() => setIsPhoneFocused(true)}
                   onBlur={() => setIsPhoneFocused(false)}
                 />
-                {phoneNumber && (
-                  <button
-                    className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
-                    style={{
-                      right: px2vmin(12),
-                      width: px2vmin(20),
-                      height: px2vmin(20),
-                    }}
-                    onClick={() => setPhoneNumber('')}
-                    aria-label="清除"
-                  >
+                <button
+                  className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
+                  style={{
+                    right: px2vmin(12),
+                    width: px2vmin(20),
+                    height: px2vmin(20),
+                    opacity: isPhoneFocused && phoneNumber ? 1 : 0.6,
+                  }}
+                  onClick={() => setPhoneNumber('')}
+                  aria-label="清除"
+                >
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                       <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                       <path
@@ -386,8 +386,7 @@ export const LoginPage = () => {
                         strokeLinecap="round"
                       />
                     </svg>
-                  </button>
-                )}
+                </button>
               </div>
               <div
                 className="w-full transition-opacity duration-300"
@@ -408,7 +407,7 @@ export const LoginPage = () => {
               className="relative overflow-visible"
               style={{
                 height: px2vmin(56),
-                background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+                background: 'rgba(0,0,0,0.1)',
                 borderTopLeftRadius: '12PX',
                 borderTopRightRadius: '12PX',
                 borderBottomLeftRadius: '2PX',
@@ -432,17 +431,17 @@ export const LoginPage = () => {
                 onFocus={() => setIsEmailFocused(true)}
                 onBlur={() => setIsEmailFocused(false)}
               />
-              {email && (
-                <button
-                  className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
-                  style={{
-                    right: px2vw(12),
-                    width: px2vw(20),
-                    height: px2vh(20),
-                  }}
-                  onClick={() => setEmail('')}
-                  aria-label="清除"
-                >
+              <button
+                className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
+                style={{
+                  right: px2vw(12),
+                  width: px2vw(20),
+                  height: px2vh(20),
+                  opacity: isEmailFocused && email ? 1 : 0.6,
+                }}
+                onClick={() => setEmail('')}
+                aria-label="清除"
+              >
                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                     <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                     <path
@@ -452,8 +451,7 @@ export const LoginPage = () => {
                       strokeLinecap="round"
                     />
                   </svg>
-                </button>
-              )}
+              </button>
             </div>
             <div
               className="w-full transition-opacity duration-300"

frontend/src/pages/LoginVerificationCodePage.tsx

@@ -303,7 +303,7 @@ export const LoginVerificationCodePage = () => {
                 className="relative overflow-visible"
                 style={{
                   height: px2vmin(56),
-                  background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+                  background: 'rgba(0,0,0,0.1)',
                   borderTopRightRadius: '12PX',
                   borderBottomRightRadius: '2PX',
                   borderTopLeftRadius: '12PX',
@@ -327,17 +327,17 @@ export const LoginVerificationCodePage = () => {
                   onFocus={() => setIsPhoneFocused(true)}
                   onBlur={() => setIsPhoneFocused(false)}
                 />
-                {phoneNumber && (
-                  <button
-                    className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
-                    style={{
-                      right: px2vmin(12),
-                      width: px2vmin(20),
-                      height: px2vmin(20),
-                    }}
-                    onClick={() => setPhoneNumber('')}
-                    aria-label="清除"
-                  >
+                <button
+                  className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
+                  style={{
+                    right: px2vmin(12),
+                    width: px2vmin(20),
+                    height: px2vmin(20),
+                    opacity: isPhoneFocused && phoneNumber ? 1 : 0.6,
+                  }}
+                  onClick={() => setPhoneNumber('')}
+                  aria-label="清除"
+                >
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                       <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                       <path
@@ -347,8 +347,7 @@ export const LoginVerificationCodePage = () => {
                         strokeLinecap="round"
                       />
                     </svg>
-                  </button>
-                )}
+                </button>
               </div>
               <div
                 className="w-full transition-opacity duration-300"
@@ -369,7 +368,7 @@ export const LoginVerificationCodePage = () => {
               className="relative overflow-visible"
               style={{
                 height: px2vmin(56),
-                background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+                background: 'rgba(0,0,0,0.1)',
                 borderTopLeftRadius: '12PX',
                 borderTopRightRadius: '12PX',
                 borderBottomLeftRadius: '2PX',
@@ -393,17 +392,17 @@ export const LoginVerificationCodePage = () => {
                 onFocus={() => setIsEmailFocused(true)}
                 onBlur={() => setIsEmailFocused(false)}
               />
-              {email && (
-                <button
-                  className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
-                  style={{
-                    right: px2vw(12),
-                    width: px2vw(20),
-                    height: px2vh(20),
-                  }}
-                  onClick={() => setEmail('')}
-                  aria-label="清除"
-                >
+              <button
+                className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
+                style={{
+                  right: px2vw(12),
+                  width: px2vw(20),
+                  height: px2vh(20),
+                  opacity: isEmailFocused && email ? 1 : 0.6,
+                }}
+                onClick={() => setEmail('')}
+                aria-label="清除"
+              >
                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                     <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                     <path
@@ -413,8 +412,7 @@ export const LoginVerificationCodePage = () => {
                       strokeLinecap="round"
                     />
                   </svg>
-                </button>
-              )}
+              </button>
             </div>
             <div
               className="w-full transition-opacity duration-300"

frontend/src/pages/LoginVerificationInputPage.tsx

@@ -436,7 +436,7 @@ export const LoginVerificationInputPage = () => {
                 className="relative overflow-visible"
                 style={{
                   height: px2vmin(56),
-                  background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+                  background: 'rgba(0,0,0,0.1)',
                   borderTopLeftRadius: '12PX',
                   borderBottomLeftRadius: '2PX',
                   borderTopRightRadius: '12PX',

frontend/src/pages/LumiNamingPage.tsx

@@ -178,7 +178,7 @@ export const LumiNamingPage = () => {
             className="relative w-full rounded-t-[4px] overflow-visible"
             style={{
               height: px2vh(layout.inputHeight),
-              background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+              background: 'rgba(0,0,0,0.1)',
               borderTopLeftRadius: '12PX',
               borderTopRightRadius: '12PX',
               borderBottomRightRadius: '2PX',
@@ -207,17 +207,17 @@ export const LumiNamingPage = () => {
                 }
               }}
             />
-            {isFocused && lumiName && (
-              <button
-                className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
-                style={{
-                  right: px2vw(12),
-                  width: px2vw(20),
-                  height: px2vh(20),
-                }}
-                onClick={() => setLumiName('')}
-                aria-label="清除"
-              >
+            <button
+              className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
+              style={{
+                right: px2vw(12),
+                width: px2vw(20),
+                height: px2vh(20),
+                opacity: isFocused && lumiName ? 1 : 0.6,
+              }}
+              onClick={() => setLumiName('')}
+              aria-label="清除"
+            >
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                   <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                   <path
@@ -227,8 +227,7 @@ export const LumiNamingPage = () => {
                     strokeLinecap="round"
                   />
                 </svg>
-              </button>
-            )}
+            </button>
           </div>
           <div
             className="w-full rounded-b-[4px] transition-opacity duration-300"

frontend/src/pages/VerificationCodePage.tsx

@@ -304,7 +304,7 @@ export const VerificationCodePage = () => {
                 className="relative overflow-visible"
                 style={{
                   height: px2vmin(56),
-                  background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+                  background: 'rgba(0,0,0,0.1)',
                   borderTopRightRadius: '12PX',
                   borderBottomRightRadius: '2PX',
                 borderTopLeftRadius: '12PX',
@@ -329,17 +329,17 @@ export const VerificationCodePage = () => {
                   onFocus={() => setIsPhoneFocused(true)}
                   onBlur={() => setIsPhoneFocused(false)}
                 />
-                {phoneNumber && (
-                  <button
-                    className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
-                    style={{
-                      right: px2vmin(12),
-                      width: px2vmin(20),
-                      height: px2vmin(20),
-                    }}
-                    onClick={() => setPhoneNumber('')}
-                    aria-label="清除"
-                  >
+                <button
+                  className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
+                  style={{
+                    right: px2vmin(12),
+                    width: px2vmin(20),
+                    height: px2vmin(20),
+                    opacity: isPhoneFocused && phoneNumber ? 1 : 0.6,
+                  }}
+                  onClick={() => setPhoneNumber('')}
+                  aria-label="清除"
+                >
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                       <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                       <path
@@ -349,8 +349,7 @@ export const VerificationCodePage = () => {
                         strokeLinecap="round"
                       />
                     </svg>
-                  </button>
-                )}
+                </button>
               </div>
               <div
                 className="w-full transition-opacity duration-300"
@@ -371,7 +370,7 @@ export const VerificationCodePage = () => {
               className="relative overflow-visible"
               style={{
                 height: px2vmin(56),
-                background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+                background: 'rgba(0,0,0,0.1)',
                 borderTopLeftRadius: '12PX',
                 borderTopRightRadius: '12PX',
                 borderBottomLeftRadius: '2PX',
@@ -395,17 +394,17 @@ export const VerificationCodePage = () => {
                 onFocus={() => setIsEmailFocused(true)}
                 onBlur={() => setIsEmailFocused(false)}
               />
-              {email && (
-                <button
-                  className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
-                  style={{
-                    right: px2vw(12),
-                    width: px2vw(20),
-                    height: px2vh(20),
-                  }}
-                  onClick={() => setEmail('')}
-                  aria-label="清除"
-                >
+              <button
+                className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
+                style={{
+                  right: px2vw(12),
+                  width: px2vw(20),
+                  height: px2vh(20),
+                  opacity: isEmailFocused && email ? 1 : 0.6,
+                }}
+                onClick={() => setEmail('')}
+                aria-label="清除"
+              >
                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                     <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                     <path
@@ -415,8 +414,7 @@ export const VerificationCodePage = () => {
                       strokeLinecap="round"
                     />
                   </svg>
-                </button>
-              )}
+              </button>
             </div>
             <div
               className="w-full transition-opacity duration-300"

frontend/src/pages/VerificationInputPage.tsx

@@ -458,7 +458,7 @@ export const VerificationInputPage = () => {
                 className="relative overflow-visible"
                 style={{
                   height: px2vmin(56),
-                  background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
+                  background: 'rgba(0,0,0,0.1)',
                   borderTopLeftRadius: '12PX',
                   borderBottomLeftRadius: '2PX',
                   borderTopRightRadius: '12PX',