From 0ebbf82ae763d8f63e844c8f0921af771938fc2b Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Fri, 27 Dec 2024 16:55:06 +0800
Subject: [PATCH] 1

---
 frontend/src/pages/Login/index.module.css | 103 +++++++++++++++++-----
 frontend/src/pages/Login/index.tsx        |  20 +++--
 2 files changed, 94 insertions(+), 29 deletions(-)

diff --git a/frontend/src/pages/Login/index.module.css b/frontend/src/pages/Login/index.module.css
index 24ea3a87..304a5226 100644
--- a/frontend/src/pages/Login/index.module.css
+++ b/frontend/src/pages/Login/index.module.css
@@ -44,41 +44,102 @@
     color: #000;
 }
 
+/* 输入框和下拉框通用样式 */
 .input {
-    width: 100%;
-    height: 2.5rem;
-    border-radius: 0.375rem;
-    border: 1px solid #e2e8f0;
-    padding: 0.5rem 1rem;
-    margin-bottom: 1rem;
-    transition: all 0.2s;
+    width: 100% !important;
+    height: 40px !important;
+    border-radius: 6px !important;
+    border: 1px solid #e5e7eb !important;
+    background-color: #f9fafb !important;
+    transition: all 0.2s ease-in-out !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 
 .input:hover {
-    border-color: #cbd5e0;
+    border-color: #d1d5db !important;
+    background-color: #ffffff !important;
 }
 
 .input:focus {
-    border-color: #3182ce;
-    box-shadow: 0 0 0 1px #3182ce;
+    border-color: #2563eb !important;
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
+    background-color: #ffffff !important;
 }
 
+/* 下拉框特殊样式 */
+:global(.ant-select-selector) {
+    height: 40px !important;
+    padding: 4px 11px !important;
+    border-radius: 6px !important;
+    border: 1px solid #e5e7eb !important;
+    background-color: #f9fafb !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+}
+
+:global(.ant-select:not(.ant-select-disabled):hover .ant-select-selector) {
+    border-color: #d1d5db !important;
+    background-color: #ffffff !important;
+}
+
+:global(.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector) {
+    border-color: #2563eb !important;
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
+    background-color: #ffffff !important;
+}
+
+:global(.ant-select-selection-item) {
+    line-height: 30px !important;
+}
+
+/* 下拉框选项样式 */
+:global(.ant-select-dropdown) {
+    padding: 4px !important;
+    border-radius: 6px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+}
+
+:global(.ant-select-item) {
+    padding: 8px 12px !important;
+    border-radius: 4px !important;
+}
+
+:global(.ant-select-item-option-selected) {
+    background-color: #f3f4f6 !important;
+    font-weight: 500 !important;
+}
+
+:global(.ant-select-item-option-active) {
+    background-color: #f9fafb !important;
+}
+
+/* 登录按钮样式 */
 .loginButton {
-    width: 100%;
-    height: 2.5rem;
-    background-color: #000;
-    color: white;
-    border: none;
-    border-radius: 0.375rem;
-    font-weight: 500;
-    transition: all 0.2s;
+    width: 100% !important;
+    height: 40px !important;
+    background-color: #2563eb !important;
+    border: none !important;
+    border-radius: 6px !important;
+    color: white !important;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+    transition: all 0.2s ease-in-out !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 
 .loginButton:hover {
-    background-color: #1a1a1a;
+    background-color: #1d4ed8 !important;
+}
+
+.loginButton:active {
+    background-color: #1e40af !important;
 }
 
 .loginButton:disabled {
-    background-color: #e2e8f0;
-    cursor: not-allowed;
+    background-color: #e5e7eb !important;
+    cursor: not-allowed !important;
+}
+
+/* 加载状态 */
+:global(.ant-btn-loading-icon) {
+    margin-right: 8px !important;
 } 
\ No newline at end of file
diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx
index 7009c63e..318bfbb3 100644
--- a/frontend/src/pages/Login/index.tsx
+++ b/frontend/src/pages/Login/index.tsx
@@ -82,10 +82,8 @@ const Login: React.FC = () => {
                 </div>
                 <div className="space-y-4">
                     <blockquote className="text-2xl font-medium">
-                        "这个平台帮助我们显著提升了部署效率，让团队可以更专注于业务开发。"
+                        "平台帮助我们显著提升了部署效率，让团队可以更专注于业务开发。"
                     </blockquote>
-                    <p className="text-lg">张工</p>
-                    <p className="text-zinc-400">高级运维工程师</p>
                 </div>
             </div>
 
@@ -94,6 +92,7 @@ const Login: React.FC = () => {
                 <div className={styles.loginBox}>
                     <div className={styles.logo}>
                         <h1>管理系统</h1>
+                        <p className="text-gray-500 mt-2">输入您的账号密码登录系统</p>
                     </div>
                     <Form<LoginForm>
                         form={form}
@@ -101,18 +100,23 @@ const Login: React.FC = () => {
                         onFinish={handleFinish}
                         autoComplete="off"
                         size="large"
+                        layout="vertical"
                     >
                         <Form.Item
                             name="tenantId"
                             rules={[{required: true, message: '请选择租户!'}]}
                         >
                             <Select
-                                placeholder="请选择租户"
+                                placeholder="系统管理租户"
                                 options={tenants.map(tenant => ({
                                     label: tenant.name,
                                     value: tenant.code
                                 }))}
                                 className={styles.input}
+                                dropdownStyle={{
+                                    padding: '8px',
+                                    borderRadius: '8px',
+                                }}
                             />
                         </Form.Item>
 
@@ -121,7 +125,7 @@ const Login: React.FC = () => {
                             rules={[{required: true, message: '请输入用户名!'}]}
                         >
                             <Input 
-                                placeholder="用户名" 
+                                placeholder="admin" 
                                 className={styles.input}
                             />
                         </Form.Item>
@@ -131,7 +135,7 @@ const Login: React.FC = () => {
                             rules={[{required: true, message: '请输入密码!'}]}
                         >
                             <Input.Password 
-                                placeholder="密码" 
+                                placeholder="········" 
                                 className={styles.input}
                             />
                         </Form.Item>
@@ -151,11 +155,11 @@ const Login: React.FC = () => {
 
                     <div className="text-center text-sm text-gray-500 mt-4">
                         登录即表示您同意我们的
-                        <a href="#" className="text-blue-600 hover:text-blue-800 mx-1">
+                        <a href="#" className="text-[#2563eb] hover:text-[#1d4ed8] mx-1">
                             服务条款
                         </a>
                         和
-                        <a href="#" className="text-blue-600 hover:text-blue-800 mx-1">
+                        <a href="#" className="text-[#2563eb] hover:text-[#1d4ed8] mx-1">
                             隐私政策
                         </a>
                     </div>