mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-04 01:10:36 +00:00
refactor: 大规模代码整理与功能优化
1. 重构后端API路由、CRUD与模块结构，整合日志管理，移除废弃demo代码 2. 优化前端组件类型定义、样式与路由配置，修复权限判断逻辑 3. 调整默认排序规则、滚动条样式与工具类函数，更新依赖与配置文件 4. 修复多处类型不匹配与默认值问题，完善表单与菜单验证逻辑
This commit is contained in:
zhangtao
@@ -1,19 +1,70 @@
|
||||
// 全局样式
|
||||
// 顶部进度条颜色
|
||||
// ================================================================
|
||||
// NProgress 样式（从 nprogress/nprogress.css 完整迁移至 SCSS 管线）
|
||||
// ================================================================
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2400;
|
||||
background-color: color-mix(in srgb, var(--theme-color) 70%, white);
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: color-mix(in srgb, var(--theme-color) 70%, white);
|
||||
}
|
||||
|
||||
#nprogress .peg {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow:
|
||||
0 0 10px var(--theme-color),
|
||||
0 0 5px var(--theme-color) !important;
|
||||
0 0 5px var(--theme-color);
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translate(0, -4px);
|
||||
}
|
||||
|
||||
#nprogress .spinner {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 2400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
border-top-color: var(--theme-color) !important;
|
||||
border-left-color: var(--theme-color) !important;
|
||||
box-sizing: border-box;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: solid 2px transparent;
|
||||
border-top-color: var(--theme-color);
|
||||
border-left-color: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent #nprogress .spinner,
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@keyframes nprogress-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理移动端组件兼容性
|
||||
|
||||
@@ -207,6 +207,7 @@ $font-color: #24292e;
|
||||
overflow-wrap: break-word;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.markdown-body details {
|
||||
|
||||
@@ -52,6 +52,7 @@
|
||||
$animate: mymove 2s 1 linear infinite
|
||||
) {
|
||||
-webkit-animation: $animate;
|
||||
-moz-animation: $animate;
|
||||
-o-animation: $animate;
|
||||
animation: $animate;
|
||||
|
||||
|
||||
@@ -15,14 +15,14 @@
|
||||
|
||||
/* 滚动条的滑块按钮 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #ccc !important;
|
||||
background-color: var(--theme-color) !important;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #b0abab !important;
|
||||
background-color: color-mix(in srgb, var(--theme-color) 80%, black) !important;
|
||||
}
|
||||
|
||||
/* 滚动条的上下两端的按钮 */
|
||||
@@ -37,6 +37,6 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--fa-gray-300) !important;
|
||||
background-color: color-mix(in srgb, var(--theme-color) 60%, transparent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -133,54 +133,60 @@
|
||||
@layer utilities {
|
||||
/* Flexbox Layout Utilities */
|
||||
.flex-c {
|
||||
@apply flex items-center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-b {
|
||||
@apply flex justify-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-cc {
|
||||
@apply flex items-center justify-center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-cb {
|
||||
@apply flex items-center justify-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Transition Utilities */
|
||||
.tad-200 {
|
||||
@apply transition-all duration-200;
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.tad-300 {
|
||||
@apply transition-all duration-300;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
/* Border Utilities */
|
||||
.border-full-d {
|
||||
@apply border border-(--default-border);
|
||||
border: 1px solid var(--default-border);
|
||||
}
|
||||
|
||||
.border-b-d {
|
||||
@apply border-b border-(--default-border);
|
||||
border-bottom: 1px solid var(--default-border);
|
||||
}
|
||||
|
||||
.border-t-d {
|
||||
@apply border-t border-(--default-border);
|
||||
border-top: 1px solid var(--default-border);
|
||||
}
|
||||
|
||||
.border-l-d {
|
||||
@apply border-l border-(--default-border);
|
||||
border-left: 1px solid var(--default-border);
|
||||
}
|
||||
|
||||
.border-r-d {
|
||||
@apply border-r border-(--default-border);
|
||||
border-right: 1px solid var(--default-border);
|
||||
}
|
||||
|
||||
/* Cursor Utilities */
|
||||
.c-p {
|
||||
@apply cursor-pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -188,18 +194,28 @@
|
||||
@layer components {
|
||||
/* Fa Card Header Component */
|
||||
.fa-card-header {
|
||||
@apply flex justify-between pr-6 pb-1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: 1.5rem;
|
||||
padding-bottom: 0.25rem;
|
||||
|
||||
.title {
|
||||
h4 {
|
||||
@apply text-lg font-medium text-g-900;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.75rem;
|
||||
color: var(--fa-gray-900);
|
||||
}
|
||||
|
||||
p {
|
||||
@apply mt-1 text-sm text-g-600;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: var(--fa-gray-600);
|
||||
|
||||
span {
|
||||
@apply ml-2 font-medium;
|
||||
margin-left: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* 浅蓝色系主题 — #1975FC
|
||||
*
|
||||
* 来源：花瓣网 B端淡蓝色配色参考
|
||||
* 主色 #1975FC — 明快透亮、B端专业感
|
||||
*
|
||||
* 【启用方式】在本文件中取消注释对应主题模式的变量块，
|
||||
* 并在 src/styles/index.scss 中 @use "./core/theme-blue";
|
||||
* 同时在 src/config/setting.ts 中将 themeColor 改为 "#1975FC"。
|
||||
*
|
||||
* 【色阶 palette】
|
||||
* #f8fcff 最浅底色（页面背景）
|
||||
* #f0f5ff 浅蓝悬停态
|
||||
* #e5f2ff 选中态 / tag 背景
|
||||
* #c5ddff 浅蓝边框 / 分割线点缀
|
||||
* #82b8ff 中浅蓝（图标辅助色）
|
||||
* #1975FC ★ 主色
|
||||
* #115ac8 深蓝（hover 按下态）
|
||||
*
|
||||
* 【功能色】
|
||||
* success: #16a34a
|
||||
* warning: #d97706
|
||||
* danger: #dc2626
|
||||
* error: #fa896b
|
||||
* info: #8b92a0
|
||||
*
|
||||
* ================================================================
|
||||
*/
|
||||
|
||||
// ================================================================
|
||||
// 亮色主题 — 浅蓝色系
|
||||
// ================================================================
|
||||
|
||||
// :root {
|
||||
// /* ---- 侧边栏 ---- */
|
||||
// --sidebar-bg-color: #ffffff;
|
||||
// --sidebar-border-color: #edf0f2;
|
||||
// --sidebar-text-color: #485260;
|
||||
// --sidebar-text-hover-color: #1975fc;
|
||||
// --sidebar-text-active-color: #1975fc;
|
||||
// --sidebar-bg-hover-color: #f0f5ff;
|
||||
// --sidebar-bg-active-color: #e5f2ff;
|
||||
// --sidebar-logo-color: #121926;
|
||||
// --sidebar-section-title-color: #8b92a0;
|
||||
//
|
||||
// /* ---- 页面 ---- */
|
||||
// --main-bg-color: #f4f6f9;
|
||||
// --header-bg-color: #ffffff;
|
||||
// --header-border-color: #edf0f2;
|
||||
//
|
||||
// /* ---- 卡片 ---- */
|
||||
// --card-bg-color: #ffffff;
|
||||
// --card-border-color: #edf0f2;
|
||||
//
|
||||
// /* ---- 表格 ---- */
|
||||
// --table-header-bg: #f8fafc;
|
||||
// --table-header-color: #8b92a0;
|
||||
// --table-row-hover-bg: #f8fafc;
|
||||
// --table-border-color: #edf0f2;
|
||||
//
|
||||
// /* ---- 文字 ---- */
|
||||
// --text-primary: #121926;
|
||||
// --text-regular: #334155;
|
||||
// --text-secondary: #8b92a0;
|
||||
//
|
||||
// /* ---- 标签 ---- */
|
||||
// --tag-bg-color: #e5f2ff;
|
||||
// --tag-text-color: #1975fc;
|
||||
//
|
||||
// /* ---- 按钮 —— 由 Element Plus 通过 primary 色阶自动生成 ---- */
|
||||
// /* ---- 进度条 ---- */
|
||||
// --nprogress-color: #1975fc;
|
||||
//
|
||||
// /* ---- 边框模式 ---- */
|
||||
// --fa-card-border: #edf0f2;
|
||||
// --default-box-color: #ffffff;
|
||||
// --default-border: #edf0f2;
|
||||
// --custom-radius: 0.75rem;
|
||||
// }
|
||||
|
||||
// ================================================================
|
||||
// 暗色主题 — 浅蓝色系（可选）
|
||||
// ================================================================
|
||||
|
||||
// html.dark {
|
||||
// --sidebar-bg-color: #0c1031;
|
||||
// --sidebar-border-color: #1a1e3d;
|
||||
// --sidebar-text-color: #a8adcc;
|
||||
// --sidebar-text-hover-color: #5c9fff;
|
||||
// --sidebar-text-active-color: #1975fc;
|
||||
// --sidebar-bg-hover-color: rgba(25, 117, 252, 0.15);
|
||||
// --sidebar-bg-active-color: rgba(25, 117, 252, 0.25);
|
||||
// --sidebar-logo-color: #ffffff;
|
||||
// --sidebar-section-title-color: #6b7094;
|
||||
//
|
||||
// --main-bg-color: #0f1420;
|
||||
// --header-bg-color: #151a2d;
|
||||
// --header-border-color: #1a1e3d;
|
||||
//
|
||||
// --card-bg-color: #151a2d;
|
||||
// --card-border-color: #1a1e3d;
|
||||
//
|
||||
// --table-header-bg: #1a1e3d;
|
||||
// --table-header-color: #6b7094;
|
||||
// --table-row-hover-bg: #1a1e3d;
|
||||
// --table-border-color: #1a1e3d;
|
||||
//
|
||||
// --text-primary: #e5e7eb;
|
||||
// --text-regular: #a8adcc;
|
||||
// --text-secondary: #6b7094;
|
||||
//
|
||||
// --tag-bg-color: rgba(25, 117, 252, 0.2);
|
||||
// --tag-text-color: #5c9fff;
|
||||
// }
|
||||
@@ -32,22 +32,18 @@
|
||||
"info": (
|
||||
"base": #909399,
|
||||
),
|
||||
),
|
||||
$button: (
|
||||
"hover-bg-color": var(--el-color-primary-light-9),
|
||||
"hover-border-color": var(--el-color-primary),
|
||||
"border-color": var(--el-color-primary),
|
||||
"text-color": var(--el-color-primary),
|
||||
),
|
||||
$messagebox: (
|
||||
"border-radius": "12px",
|
||||
),
|
||||
$popover: (
|
||||
"padding": "14px",
|
||||
"border-radius": "10px",
|
||||
)
|
||||
);
|
||||
|
||||
:root {
|
||||
@each $type in (success, warning, danger, error, info) {
|
||||
--el-color-#{$type}: #{map.get(ep.$colors, $type, "base")} !important;
|
||||
|
||||
@each $i in (3, 5, 7, 8, 9) {
|
||||
--el-color-#{$type}-light-#{$i}: #{map.get(ep.$colors, $type, "light-#{$i}")} !important;
|
||||
}
|
||||
|
||||
--el-color-#{$type}-dark-2: #{map.get(ep.$colors, $type, "dark-2")} !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** 暗黑主题 */
|
||||
html.dark {
|
||||
--el-color-primary: #{map.get(ep.$colors, "primary", "base")} !important;
|
||||
}
|
||||
|
||||
@@ -69,7 +69,8 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 0;
|
||||
padding-bottom: 0;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
|
||||
/* 盖过 Tailwind overflow-y-auto：仅卡片内滚动，外层不出滚动条 */
|
||||
overflow: hidden;
|
||||
@@ -83,38 +84,37 @@
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* 悬浮卡片：居中模式尺寸与原先一致（520 宽、720/视口上限），无边框 + 主色高亮阴影 */
|
||||
/* 悬浮卡片：玻璃拟态，圆角透明 */
|
||||
.login-auth-split--center .auth-right-wrap {
|
||||
width: min(520px, calc(100vw - 2rem)) !important;
|
||||
max-width: min(520px, calc(100vw - 2rem));
|
||||
width: min(480px, calc(100vw - 2rem)) !important;
|
||||
max-width: min(480px, calc(100vw - 2rem));
|
||||
height: auto;
|
||||
max-height: calc(100dvh - 6.5rem);
|
||||
padding: 1.75rem 2rem 2rem;
|
||||
max-height: calc(100dvh - 8rem);
|
||||
padding: 1.25rem 1.75rem;
|
||||
overflow: hidden auto;
|
||||
background-color: var(--el-bg-color);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
background: color-mix(in srgb, var(--el-bg-color) 72%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--el-border-color-lighter) 60%, transparent);
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 6px 20px rgb(15 23 42 / 9%),
|
||||
0 14px 36px rgb(15 23 42 / 10%),
|
||||
0 0 18px color-mix(in srgb, var(--el-color-primary) 16%, transparent),
|
||||
0 0 32px color-mix(in srgb, var(--el-color-primary) 7%, transparent);
|
||||
0 1px 8px rgb(15 23 42 / 5%),
|
||||
0 0 16px color-mix(in srgb, var(--el-color-primary) 6%, transparent);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.login-auth-split--center .auth-right-wrap .form {
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
html.dark .login-auth-split--center .auth-right-wrap {
|
||||
border: none;
|
||||
background: color-mix(in srgb, var(--el-bg-color) 55%, transparent);
|
||||
border-color: rgb(255 255 255 / 8%);
|
||||
box-shadow:
|
||||
0 8px 28px rgb(0 0 0 / 42%),
|
||||
0 16px 44px rgb(0 0 0 / 46%),
|
||||
0 0 22px color-mix(in srgb, var(--el-color-primary) 20%, transparent),
|
||||
0 0 36px color-mix(in srgb, var(--el-color-primary) 9%, transparent);
|
||||
0 1px 8px rgb(0 0 0 / 18%),
|
||||
0 0 16px color-mix(in srgb, var(--el-color-primary) 10%, transparent);
|
||||
}
|
||||
|
||||
/* 居中模式下页脚弱化，减少「分区后台」感 */
|
||||
@@ -126,6 +126,25 @@ html.dark .login-page-footer--floating-layout {
|
||||
border-top-color: rgb(255 255 255 / 8%);
|
||||
}
|
||||
|
||||
/* 居中模式 footer 单行展示 */
|
||||
.login-auth-split--center .login-page-footer--floating-layout {
|
||||
.login-footer-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.login-footer-row {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.login-footer-row + .login-footer-row {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.login-footer-sep-center {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width <= 1180px) {
|
||||
.login-auth-split {
|
||||
flex-direction: column !important;
|
||||
@@ -144,8 +163,8 @@ html.dark .login-page-footer--floating-layout {
|
||||
|
||||
/* 窄屏横排切竖排：恢复插画；居中模式本身无插画，不受影响 */
|
||||
.login-auth-split--center .auth-right-wrap {
|
||||
width: min(520px, calc(100vw - 1.5rem)) !important;
|
||||
max-width: min(520px, calc(100vw - 1.5rem));
|
||||
width: min(420px, calc(100vw - 1.5rem)) !important;
|
||||
max-width: min(420px, calc(100vw - 1.5rem));
|
||||
max-height: calc(100dvh - 6rem);
|
||||
}
|
||||
}
|
||||
@@ -155,7 +174,7 @@ html.dark .login-page-footer--floating-layout {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 440px;
|
||||
height: 720px;
|
||||
height: 670px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
overflow: hidden;
|
||||
@@ -175,7 +194,7 @@ html.dark .login-page-footer--floating-layout {
|
||||
|
||||
.form {
|
||||
height: 100%;
|
||||
padding-top: 40px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
@@ -307,6 +326,18 @@ html.dark {
|
||||
color: var(--el-text-color-secondary) !important;
|
||||
}
|
||||
|
||||
.login-footer-row {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.login-footer-row + .login-footer-row {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.login-footer-sep-center {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-page-footer__link {
|
||||
color: var(--el-text-color-regular);
|
||||
text-decoration: none;
|
||||
@@ -324,7 +355,6 @@ html.dark {
|
||||
|
||||
.login-page-footer__record {
|
||||
display: inline-block;
|
||||
margin-left: 0.35rem;
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user