Kawaxxxsaki/WebWork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(前端): 优化表单输入框样式并重构分页组件

Browse Source 
- 为所有管理页面和登录注册页添加统一的输入框聚焦样式
- 重构分页组件为通用实现，支持页码跳转和省略号显示
- 优化分页交互体验，减少代码重复
This commit is contained in:
祀梦
2025-12-22 23:54:11 +08:00
parent b1da021185
commit 84d5840391
12 changed files with 245 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/views/admin/data_export.html
View File

@@ -121,6 +121,12 @@
.main-content { margin-left: 0; }
.sidebar.active { left: 0; }
}
/* 表单控件聚焦样式优化 */
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.1);
}
</style>
</head>
<body>

6
frontend/views/admin/grade_statistics.html
View File

@@ -121,6 +121,12 @@
.main-content { margin-left: 0; }
.sidebar.active { left: 0; }
}
/* 表单控件聚焦样式优化 */
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.1);
}
</style>
</head>
<body>

6
frontend/views/admin/operation_logs.html
View File

@@ -121,6 +121,12 @@
.main-content { margin-left: 0; }
.sidebar.active { left: 0; }
}
/* 表单控件聚焦样式优化 */
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.1);
}
</style>
</head>
<body>

34
frontend/views/admin/student_management.html
View File

@@ -121,6 +121,40 @@
.main-content { margin-left: 0; }
.sidebar.active { left: 0; }
}
/* 输入框聚焦样式优化 */
.input-group {
border: 1px solid #dee2e6;
border-radius: 0.5rem;
overflow: hidden;
transition: all 0.2s;
background-color: #fff;
}
.input-group:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.1);
}
.input-group-text {
background-color: transparent;
border: none;
color: var(--secondary-color);
padding-left: 1rem;
padding-right: 0.5rem;
}
.form-control {
border: none !important;
}
.form-control:focus {
box-shadow: none;
}
.input-group:focus-within .input-group-text {
color: var(--primary-color);
}
</style>
</head>
<body>

6
frontend/views/admin/system_settings.html
View File

@@ -121,6 +121,12 @@
.main-content { margin-left: 0; }
.sidebar.active { left: 0; }
}
/* 表单控件聚焦样式优化 */
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.1);
}
</style>
</head>
<body>

34
frontend/views/admin/teacher_management.html
View File

@@ -121,6 +121,40 @@
.main-content { margin-left: 0; }
.sidebar.active { left: 0; }
}
/* 输入框聚焦样式优化 */
.input-group {
border: 1px solid #dee2e6;
border-radius: 0.5rem;
overflow: hidden;
transition: all 0.2s;
background-color: #fff;
}
.input-group:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.1);
}
.input-group-text {
background-color: transparent;
border: none;
color: var(--secondary-color);
padding-left: 1rem;
padding-right: 0.5rem;
}
.form-control {
border: none !important;
}
.form-control:focus {
box-shadow: none;
}
.input-group:focus-within .input-group-text {
color: var(--primary-color);
}
</style>
</head>
<body>

34
frontend/views/admin/user_management.html
View File

@@ -121,6 +121,40 @@
.main-content { margin-left: 0; }
.sidebar.active { left: 0; }
}
/* 输入框聚焦样式优化 */
.input-group {
border: 1px solid #dee2e6;
border-radius: 0.5rem;
overflow: hidden;
transition: all 0.2s;
background-color: #fff;
}
.input-group:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.1);
}
.input-group-text {
background-color: transparent;
border: none;
color: var(--secondary-color);
padding-left: 1rem;
padding-right: 0.5rem;
}
.form-control {
border: none !important;
}
.form-control:focus {
box-shadow: none;
}
.input-group:focus-within .input-group-text {
color: var(--primary-color);
}
</style>
</head>
<body>

36
frontend/views/auth/login.html
View File

@@ -66,11 +66,6 @@
margin-bottom: 1.25rem;
}
.form-control:focus {
box-shadow: none;
border-color: #764ba2;
}
.btn-login {
background: var(--primary-gradient);
border: none;
@@ -104,19 +99,38 @@
text-decoration: underline;
}
.input-group {
border: 1px solid #dee2e6;
border-radius: 0.75rem;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
background-color: #fff;
}
.input-group:focus-within {
border-color: #764ba2;
box-shadow: 0 0 0 0.2rem rgba(118, 75, 162, 0.1);
}
.input-group-text {
background-color: transparent;
border-right: none;
border: none;
color: #adb5bd;
padding-left: 1rem;
padding-right: 0.5rem;
}
.form-control {
border-left: none;
.form-control, .form-select {
border: none !important;
padding-left: 0.5rem;
}
.form-control:focus + .input-group-text,
.input-group-text:focus-within {
border-color: #764ba2;
.form-control:focus, .form-select:focus {
box-shadow: none;
}
.input-group:focus-within .input-group-text i {
color: #764ba2;
}
/* 角色图标 */

25
frontend/views/auth/register.html
View File

@@ -96,26 +96,39 @@
text-decoration: underline;
}
.input-group {
border: 1px solid #dee2e6;
border-radius: 0.75rem;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
background-color: #fff;
}
.input-group:focus-within {
border-color: #764ba2;
box-shadow: 0 0 0 0.2rem rgba(118, 75, 162, 0.1);
}
.input-group-text {
background-color: transparent;
border-right: none;
border: none;
color: #adb5bd;
width: 45px;
justify-content: center;
padding-left: 1rem;
}
.form-control, .form-select {
border-left: none;
border: none !important;
padding-left: 0.5rem;
}
.form-control:focus, .form-select:focus {
box-shadow: none;
border-color: #764ba2;
}
.form-control:focus + .input-group-text,
.input-group-text:focus-within {
border-color: #764ba2;
.input-group:focus-within .input-group-text i {
color: #764ba2;
}
#classField {