feat: update Sidebar and Login components with icon integration and localization improvements

src/pages/Login/index.tsx

@@ -1,5 +1,6 @@
 import { type ChangeEvent, type FormEvent, useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { Lock, User } from 'lucide-react';
 
 import blueLogo from '../../assets/images/login/blue_logo.png';
 import loginBackground from '../../assets/images/login/login_bg.png';
@@ -25,6 +26,14 @@ const INITIAL_FORM: LoginFormValues = {
   randomStr: '',
 };
 
+const credentialFieldShellClass =
+  'flex h-11 items-center rounded-[10px] border border-black/10 bg-gray-50 transition focus-within:border-[#2B7FFF] focus-within:ring-2 focus-within:ring-[#2B7FFF]/10 dark:border-[#2a2a2d] dark:bg-[#222225]';
+
+const credentialFieldIconClass = 'ml-4 mr-3 h-4 w-4 shrink-0 text-[#99A0AE] dark:text-gray-500';
+
+const credentialFieldInputClass =
+  'h-full min-w-0 flex-1 border-0 bg-transparent pr-4 text-[14px] text-gray-800 outline-none placeholder:text-[#99A0AE] disabled:cursor-not-allowed dark:text-gray-100 dark:placeholder:text-gray-500';
+
 export default function LoginPage() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -133,37 +142,42 @@ export default function LoginPage() {
           <div className="mb-6 box-border flex flex-col items-center justify-center pt-10">
             <img className="mb-3 h-20 w-20" src={userIcon} alt="" />
             <div className="mb-1 text-[24px] leading-[32px] font-medium text-gray-800 dark:text-gray-100">
-              欢迎回到 zn-ai
+              欢迎回到登录
             </div>
             <div className="text-[16px] leading-[24px] text-gray-500 dark:text-gray-400">
-              请输入账号信息完成登录
+              24小时在岗，从不打烊的数字员工
             </div>
           </div>
 
           <form className="mx-auto flex w-[392px] flex-col gap-4" onSubmit={handleSubmit}>
             <div>
               <label className="mb-2 block text-[14px] text-gray-600 dark:text-gray-300" htmlFor="login-username">
-                用户名
+                账号
               </label>
-              <input
-                id="login-username"
-                className="h-10 w-full rounded-[10px] border border-black/10 bg-gray-50 px-4 text-[14px] text-gray-800 outline-none transition focus:border-[#2B7FFF] dark:border-[#2a2a2d] dark:bg-[#222225] dark:text-gray-100"
-                autoComplete="username"
-                disabled={submitting}
-                placeholder="请输入用户名"
-                value={form.username}
-                onChange={(event) => handleInputChange('username', event)}
-              />
-              {errors.username ? <div className="pt-2 text-[12px] text-[#dc2626]">{errors.username}</div> : null}
+              <div className={credentialFieldShellClass}>
+                <User aria-hidden="true" className={credentialFieldIconClass} />
+                <input
+                  id="login-username"
+                  className={credentialFieldInputClass}
+                  autoComplete="username"
+                  disabled={submitting}
+                  placeholder="请输入账号"
+                  value={form.username}
+                  onChange={(event) => handleInputChange('username', event)}
+                />
+              </div>
+                {errors.username ? <div className="pt-2 text-[12px] text-[#dc2626]">{errors.username}</div> : null}
             </div>
 
             <div>
               <label className="mb-2 block text-[14px] text-gray-600 dark:text-gray-300" htmlFor="login-password">
                 密码
               </label>
+              <div className={credentialFieldShellClass}>
+                <Lock aria-hidden="true" className={credentialFieldIconClass} />
               <input
                 id="login-password"
-                className="h-10 w-full rounded-[10px] border border-black/10 bg-gray-50 px-4 text-[14px] text-gray-800 outline-none transition focus:border-[#2B7FFF] dark:border-[#2a2a2d] dark:bg-[#222225] dark:text-gray-100"
+                className={credentialFieldInputClass}
                 autoComplete="current-password"
                 disabled={submitting}
                 placeholder="请输入密码"
@@ -171,6 +185,7 @@ export default function LoginPage() {
                 value={form.password}
                 onChange={(event) => handleInputChange('password', event)}
               />
+              </div>
               {errors.password ? <div className="pt-2 text-[12px] text-[#dc2626]">{errors.password}</div> : null}
             </div>