mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-02 08:29:21 +00:00
style: 优化前端代码格式和样式顺序
refactor: 调整样式属性顺序以提高可读性 fix: 修复请求异常处理中的错误日志输出 chore: 添加stylelint相关依赖和配置 docs: 更新存储工具类的文档注释
This commit is contained in:
zhangtao
@@ -102,8 +102,8 @@ const handleLock = async () => {
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
font-size: 14px;
|
||||
color: var(--top-header-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -147,35 +147,35 @@ function handleShowForm(show = false) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lockpage {
|
||||
z-index: 3000;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
z-index: 3000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
backdrop-filter: blur(8px);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.unlock-container {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 50%;
|
||||
padding-top: 1.25rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 12px;
|
||||
height: 4rem;
|
||||
padding: 0.5rem 1rem;
|
||||
padding-top: 1.25rem;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@media (min-width: 640px) {
|
||||
font-size: 0.875rem;
|
||||
@@ -188,47 +188,42 @@ function handleShowForm(show = false) {
|
||||
|
||||
.time-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.hour-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 16px;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 220px;
|
||||
font-weight: 700;
|
||||
color: #bababa;
|
||||
background-color: #141313;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 220px;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.minute-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 16px;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
font-size: 220px;
|
||||
font-weight: 700;
|
||||
color: #bababa;
|
||||
background-color: #141313;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 220px;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
}
|
||||
|
||||
.meridiem {
|
||||
position: absolute;
|
||||
left: 1.25rem;
|
||||
top: 1.25rem;
|
||||
left: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@@ -236,18 +231,18 @@ function handleShowForm(show = false) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.entry-content {
|
||||
width: 260px;
|
||||
text-align: center;
|
||||
color: #bababa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
@@ -263,8 +258,8 @@ function handleShowForm(show = false) {
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 0.875rem;
|
||||
margin: 0.625rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--logo-title-text-color);
|
||||
}
|
||||
|
||||
@@ -274,22 +269,22 @@ function handleShowForm(show = false) {
|
||||
|
||||
.error-message {
|
||||
display: inline-block;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
color: #ed6f6f;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: space-between; // 左右对齐
|
||||
align-items: center;
|
||||
justify-content: space-between; // 左右对齐
|
||||
margin-top: 0.5rem;
|
||||
|
||||
.back-button,
|
||||
.login-button,
|
||||
.entry-button {
|
||||
padding: 0;
|
||||
min-width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
@@ -315,8 +310,8 @@ function handleShowForm(show = false) {
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 3rem;
|
||||
|
||||
.meridiem-display {
|
||||
font-size: 1.875rem;
|
||||
|
||||
@@ -648,6 +648,123 @@ const handleCloseDrawer = () => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 主题颜色选择器样式 */
|
||||
.theme-color-selector {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
.color-label {
|
||||
flex-shrink: 0;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.color-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-option {
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
border: 2px solid var(--el-border-color-light);
|
||||
border-radius: 6px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
transition: all 0.3s var(--el-transition-duration);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-color: var(--el-color-primary);
|
||||
box-shadow: var(--el-box-shadow-dark);
|
||||
transform: translateY(-1px) scale(1.08);
|
||||
}
|
||||
|
||||
.color-check {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 10px;
|
||||
color: var(--el-color-white);
|
||||
background: var(--el-overlay-color-lighter);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-wrapper {
|
||||
.custom-color-picker {
|
||||
:deep(.el-color-picker__trigger) {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid var(--el-border-color-light);
|
||||
border-radius: 6px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
transition: all 0.3s var(--el-transition-duration);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-color-picker__color) {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-color-picker__color-inner) {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-color-picker__icon) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式适配 */
|
||||
.dark & {
|
||||
.color-option {
|
||||
border-color: var(--el-border-color);
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-wrapper {
|
||||
.custom-color-picker {
|
||||
:deep(.el-color-picker__trigger) {
|
||||
border-color: var(--el-border-color);
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式适配 */
|
||||
.dark {
|
||||
.action-footer {
|
||||
@@ -677,125 +794,6 @@ const handleCloseDrawer = () => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 主题颜色选择器样式 */
|
||||
.theme-color-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.color-label {
|
||||
flex-shrink: 0;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.color-options {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.color-option {
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
border: 2px solid var(--el-border-color-light);
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s var(--el-transition-duration);
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-color: var(--el-color-primary);
|
||||
transform: translateY(-1px) scale(1.08);
|
||||
box-shadow: var(--el-box-shadow-dark);
|
||||
}
|
||||
|
||||
.color-check {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--el-color-white);
|
||||
background: var(--el-overlay-color-lighter);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-wrapper {
|
||||
.custom-color-picker {
|
||||
:deep(.el-color-picker__trigger) {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid var(--el-border-color-light);
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s var(--el-transition-duration);
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-color-picker__color) {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-color-picker__color-inner) {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-color-picker__icon) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式适配 */
|
||||
.dark {
|
||||
.theme-color-selector {
|
||||
.color-option {
|
||||
border-color: var(--el-border-color);
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-wrapper {
|
||||
.custom-color-picker {
|
||||
:deep(.el-color-picker__trigger) {
|
||||
border-color: var(--el-border-color);
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 复制配置对话框样式 */
|
||||
:deep(.copy-config-dialog) {
|
||||
.el-message-box__content {
|
||||
|
||||
@@ -790,8 +790,8 @@ onUnmounted(() => {
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-color-primary);
|
||||
background-color: var(--el-fill-color-light);
|
||||
|
||||
.el-icon {
|
||||
transform: scale(1.1);
|
||||
|
||||
Reference in New Issue
Block a user