ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2024-12-27 16:55:06 +08:00
parent 99299fb91c
commit 0ebbf82ae7
2 changed files with 94 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
frontend/src/pages/Login/index.module.css
View File

@ -44,41 +44,102 @@
color: #000; color: #000;
} }
/* 输入框和下拉框通用样式 */
.input { .input {
width: 100%; width: 100% !important;
height: 2.5rem; height: 40px !important;
border-radius: 0.375rem; border-radius: 6px !important;
border: 1px solid #e2e8f0; border: 1px solid #e5e7eb !important;
padding: 0.5rem 1rem; background-color: #f9fafb !important;
margin-bottom: 1rem; transition: all 0.2s ease-in-out !important;
transition: all 0.2s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
} }
.input:hover { .input:hover {
border-color: #cbd5e0; border-color: #d1d5db !important;
background-color: #ffffff !important;
} }
.input:focus { .input:focus {
border-color: #3182ce; border-color: #2563eb !important;
box-shadow: 0 0 0 1px #3182ce; 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 { .loginButton {
width: 100%; width: 100% !important;
height: 2.5rem; height: 40px !important;
background-color: #000; background-color: #2563eb !important;
color: white; border: none !important;
border: none; border-radius: 6px !important;
border-radius: 0.375rem; color: white !important;
font-weight: 500; font-weight: 500 !important;
transition: all 0.2s; 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 { .loginButton:hover {
background-color: #1a1a1a; background-color: #1d4ed8 !important;
}
.loginButton:active {
background-color: #1e40af !important;
} }
.loginButton:disabled { .loginButton:disabled {
background-color: #e2e8f0; background-color: #e5e7eb !important;
cursor: not-allowed; cursor: not-allowed !important;
}
/* 加载状态 */
:global(.ant-btn-loading-icon) {
margin-right: 8px !important;
} }

20
frontend/src/pages/Login/index.tsx
View File

@ -82,10 +82,8 @@ const Login: React.FC = () => {
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<blockquote className="text-2xl font-medium"> <blockquote className="text-2xl font-medium">
"这个平台帮助我们显著提升了部署效率，让团队可以更专注于业务开发。" "平台帮助我们显著提升了部署效率，让团队可以更专注于业务开发。"
</blockquote> </blockquote>
<p className="text-lg">张工</p>
<p className="text-zinc-400">高级运维工程师</p>
</div> </div>
</div> </div>
@ -94,6 +92,7 @@ const Login: React.FC = () => {
<div className={styles.loginBox}> <div className={styles.loginBox}>
<div className={styles.logo}> <div className={styles.logo}>
<h1>管理系统</h1> <h1>管理系统</h1>
<p className="text-gray-500 mt-2">输入您的账号密码登录系统</p>
</div> </div>
<Form<LoginForm> <Form<LoginForm>
form={form} form={form}
@ -101,18 +100,23 @@ const Login: React.FC = () => {
onFinish={handleFinish} onFinish={handleFinish}
autoComplete="off" autoComplete="off"
size="large" size="large"
layout="vertical"
> >
<Form.Item <Form.Item
name="tenantId" name="tenantId"
rules={[{required: true, message: '请选择租户!'}]} rules={[{required: true, message: '请选择租户!'}]}
> >
<Select <Select
placeholder="请选择租户" placeholder="系统管理租户"
options={tenants.map(tenant => ({ options={tenants.map(tenant => ({
label: tenant.name, label: tenant.name,
value: tenant.code value: tenant.code
}))} }))}
className={styles.input} className={styles.input}
dropdownStyle={{
padding: '8px',
borderRadius: '8px',
}}
/> />
</Form.Item> </Form.Item>
@ -121,7 +125,7 @@ const Login: React.FC = () => {
rules={[{required: true, message: '请输入用户名!'}]} rules={[{required: true, message: '请输入用户名!'}]}
> >
<Input <Input
placeholder="用户名" placeholder="admin"
className={styles.input} className={styles.input}
/> />
</Form.Item> </Form.Item>
@ -131,7 +135,7 @@ const Login: React.FC = () => {
rules={[{required: true, message: '请输入密码!'}]} rules={[{required: true, message: '请输入密码!'}]}
> >
<Input.Password <Input.Password
placeholder="密码" placeholder="········"
className={styles.input} className={styles.input}
/> />
</Form.Item> </Form.Item>
@ -151,11 +155,11 @@ const Login: React.FC = () => {
<div className="text-center text-sm text-gray-500 mt-4"> <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>
和 和
<a href="#" className="text-blue-600 hover:text-blue-800 mx-1"> <a href="#" className="text-[#2563eb] hover:text-[#1d4ed8] mx-1">
隐私政策 隐私政策
</a> </a>
</div> </div>