Bläddra i källkod

修改导航栏选中时背景蓝色时文字为白色

pm 5 månader sedan
förälder
incheckning
a2d6c9ee24
2 ändrade filer med 51 tillägg och 37 borttagningar
  1. 8 6
      src/Dashboard.tsx
  2. 43 31
      src/views/Login.tsx

+ 8 - 6
src/Dashboard.tsx

@@ -699,9 +699,9 @@ export default function Dashboard() {
                               : 'text-gray-600 hover:bg-blue-50 hover:text-blue-600'
                           }`}
                         >
-                          <Icon className="w-4 h-4" strokeWidth={2.5} />
-                          <span className="text-sm">{item.name || t(`nav.${item.key}`)}</span>
-                          <ChevronDown className={`w-3 h-3 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
+                          <Icon className={`w-4 h-4 ${isActive ? 'text-white' : ''}`} strokeWidth={2.5} />
+                          <span className={`text-sm ${isActive ? 'text-white' : ''}`}>{item.name || t(`nav.${item.key}`)}</span>
+                          <ChevronDown className={`w-3 h-3 transition-transform ${isDropdownOpen ? 'rotate-180' : ''} ${isActive ? 'text-white' : ''}`} />
                         </button>
                         
                         {/* 下拉菜单 - 网格布局 */}
@@ -764,8 +764,8 @@ export default function Dashboard() {
                           : 'text-gray-600 hover:bg-blue-50 hover:text-blue-600'
                       }`}
                     >
-                      <Icon className="w-4 h-4" strokeWidth={2.5} />
-                      <span className="text-sm">{item.name || t(`nav.${item.key}`)}</span>
+                      <Icon className={`w-4 h-4 ${isActive ? 'text-white' : ''}`} strokeWidth={2.5} />
+                      <span className={`text-sm ${isActive ? 'text-white' : ''}`}>{item.name || t(`nav.${item.key}`)}</span>
                     </button>
                   );
                 })}
@@ -895,7 +895,9 @@ export default function Dashboard() {
                         : 'text-gray-700 hover:bg-blue-50 hover:text-blue-600'
                     }`}
                   >
-                    {item.name || t(`${menuKey}.${item.key}`)}
+                    <span className={isActive ? 'text-white' : ''}>
+                      {item.name || t(`${menuKey}.${item.key}`)}
+                    </span>
                   </button>
                 );
               })}

+ 43 - 31
src/views/Login.tsx

@@ -792,9 +792,9 @@ export default function Login() {
                       boxShadow: '0 10px 25px -5px rgba(77, 121, 248, 0.4)'
                     }}
                   >
-                    <span className="relative z-10">{isLoading ? t('login.loggingIn') : t('login.loginButton')}</span>
+                    <span className="relative z-10 text-white">{isLoading ? t('login.loggingIn') : t('login.loginButton')}</span>
                     {!isLoading && (
-                      <ArrowRight className="relative z-10 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                      <ArrowRight className="relative z-10 w-5 h-5 text-white group-hover:translate-x-1 transition-transform" />
                     )}
                     <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                   </button>
@@ -830,7 +830,7 @@ export default function Login() {
                   {tenantEnable && (
                     <div>
                       <label className="block text-sm text-gray-700 mb-2 ml-1">
-                        {t('login.tenantNamePlaceholder') || '租户名称'}
+                        {t('reset.company')}
                       </label>
                       <div className="relative">
                         <div className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
@@ -838,11 +838,12 @@ export default function Login() {
                         </div>
                         <input
                           type="text"
-                          placeholder={t('login.tenantNamePlaceholder') || '请输入租户名称'}
+                          placeholder={t('reset.company')}
                           value={resetTenantName}
                           onChange={(e) => setResetTenantName(e.target.value)}
                           className="w-full h-13 pl-12 pr-4 bg-white border-2 border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all"
                           required={tenantEnable}
+                          disabled={resetPasswordLoading}
                         />
                       </div>
                     </div>
@@ -850,7 +851,7 @@ export default function Login() {
 
                   <div>
                     <label className="block text-sm text-gray-700 mb-2 ml-1">
-                      {t('login.mobileNumberPlaceholder') || '手机号'}
+                      {t('reset.phone')}
                     </label>
                     <div className="relative">
                       <div className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
@@ -858,41 +859,45 @@ export default function Login() {
                       </div>
                       <input
                         type="tel"
-                        placeholder={t('login.mobileNumberPlaceholder') || '请输入手机号'}
+                        placeholder={t('reset.phone')}
                         value={resetMobile}
                         onChange={(e) => setResetMobile(e.target.value)}
                         maxLength={11}
                         className="w-full h-13 pl-12 pr-4 bg-white border-2 border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all"
                         required
+                        disabled={resetPasswordLoading}
                       />
                     </div>
                   </div>
 
                   <div>
                     <label className="block text-sm text-gray-700 mb-2 ml-1">
-                      {t('login.codePlaceholder') || '验证码'}
+                      {t('reset.code')}
                     </label>
                     <div className="flex gap-2">
                       <div className="relative flex-1">
                         <input
                           type="text"
-                          placeholder={t('login.codePlaceholder') || '请输入验证码'}
+                          placeholder={t('reset.code')}
                           value={verificationCode}
                           onChange={(e) => setVerificationCode(e.target.value)}
                           className="w-full h-13 px-4 bg-white border-2 border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all"
                           required
+                          disabled={resetPasswordLoading}
                         />
                       </div>
                       <button
                         type="button"
                         onClick={getCodeForReset}
-                        disabled={mobileCodeTimer > 0}
+                        disabled={mobileCodeTimer > 0 || resetPasswordLoading}
                         className="px-5 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:shadow-lg hover:shadow-blue-400/40 transition-all text-sm whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
                       >
-                        {mobileCodeTimer > 0 
-                          ? `${mobileCodeTimer}秒后可重新获取`
-                          : (t('login.getSmsCode') || '获取验证码')
-                        }
+                        <span className="text-white">
+                          {mobileCodeTimer > 0 
+                            ? `${mobileCodeTimer}秒后可重新获取`
+                            : t('reset.sendCode')
+                          }
+                        </span>
                       </button>
                     </div>
                   </div>
@@ -909,11 +914,13 @@ export default function Login() {
                         onChange={(e) => setNewPassword(e.target.value)}
                         className="w-full h-13 pl-12 pr-12 bg-white border-2 border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all"
                         required
+                        disabled={resetPasswordLoading}
                       />
                       <button
                         type="button"
                         onClick={() => setShowNewPassword(!showNewPassword)}
                         className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+                        disabled={resetPasswordLoading}
                       >
                         {showNewPassword ? (
                           <EyeOff className="w-5 h-5" />
@@ -945,11 +952,13 @@ export default function Login() {
                         onChange={(e) => setConfirmPassword(e.target.value)}
                         className="w-full h-13 pl-12 pr-12 bg-white border-2 border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all"
                         required
+                        disabled={resetPasswordLoading}
                       />
                       <button
                         type="button"
                         onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                         className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+                        disabled={resetPasswordLoading}
                       >
                         {showConfirmPassword ? (
                           <EyeOff className="w-5 h-5" />
@@ -979,21 +988,6 @@ export default function Login() {
                   </div>
 
                   <div className="flex gap-3 pt-4">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setShowResetPassword(false);
-                        setResetTenantName('');
-                        setResetMobile('');
-                        setVerificationCode('');
-                        setNewPassword('');
-                        setConfirmPassword('');
-                        setMobileCodeTimer(0);
-                      }}
-                      className="flex-1 h-13 bg-white border-2 border-gray-200 text-gray-700 rounded-xl hover:bg-gray-50 transition-all"
-                    >
-                      {t('login.backLogin') || '返回登录'}
-                    </button>
                     <button
                       type="submit"
                       disabled={resetPasswordLoading || !newPassword || !confirmPassword || newPassword !== confirmPassword || !resetMobile || !verificationCode}
@@ -1003,16 +997,34 @@ export default function Login() {
                         boxShadow: '0 10px 25px -5px rgba(77, 121, 248, 0.4)'
                       }}
                     >
-                      <span className="relative z-10">
+                      <span className="relative z-10 text-white">
                         {resetPasswordLoading 
-                          ? (t('common.loading') || '处理中...')
-                          : (t('login.resetPassword') || '重置密码')
+                          ? t('common.loading')
+                          : t('reset.resetButton')
                         }
                       </span>
                       <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                     </button>
                   </div>
                 </form>
+                
+                <div className="flex gap-3 pt-2">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setShowResetPassword(false);
+                      setResetTenantName('');
+                      setResetMobile('');
+                      setVerificationCode('');
+                      setNewPassword('');
+                      setConfirmPassword('');
+                      setMobileCodeTimer(0);
+                    }}
+                    className="w-full h-13 bg-white border-2 border-gray-200 text-gray-700 rounded-xl hover:bg-gray-50 transition-all"
+                  >
+                    {t('reset.backButton')}
+                  </button>
+                </div>
 
                 <div className="mt-6 p-4 bg-blue-50/80 border border-blue-100/60 rounded-xl">
                   <p className="text-xs text-gray-600 leading-relaxed">