mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-13 12:49:30 +00:00
refactor(frontend): 项目代码重构与优化
1. 重构主题切换动画、路由动画、滚动条样式等全局样式拆分模块化 2. 调整Pinia持久化配置，精细化存储字段 3. 重构路由相关文件结构与导入路径 4. 迁移OAuth工具函数至auth模块 5. 拆分query工具函数为独立模块 6. 优化表格详情弹窗逻辑，预加载数据避免抖动 7. 修复混合菜单滚动按钮样式与图标选择器宽度类型 8. 清理README冗余内容，调整Star提示位置 9. 优化工作标签页与头部栏功能
This commit is contained in:
zhangtao
@@ -1,72 +1,3 @@
|
||||
// ================================================================
|
||||
// NProgress 样式（从 nprogress/nprogress.css 完整迁移至 SCSS 管线）
|
||||
// ================================================================
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2400;
|
||||
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);
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translate(0, -4px);
|
||||
}
|
||||
|
||||
#nprogress .spinner {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 2400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理移动端组件兼容性
|
||||
@media screen and (width <= 640px) {
|
||||
* {
|
||||
@@ -132,100 +63,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 盒子默认边框
|
||||
.page-content {
|
||||
border: 1px solid var(--fa-card-border) !important;
|
||||
}
|
||||
|
||||
@mixin fa-card-base($border-color, $shadow: none, $radius-diff: 4px) {
|
||||
background: var(--default-box-color);
|
||||
border: 1px solid #{$border-color} !important;
|
||||
border-radius: calc(var(--custom-radius) + #{$radius-diff}) !important;
|
||||
box-shadow: #{$shadow} !important;
|
||||
|
||||
--el-card-border-color: var(--default-border) !important;
|
||||
}
|
||||
|
||||
// 全局统一 ElCard 卡片圆角，与 dashboard 首页一致
|
||||
.el-card {
|
||||
--el-card-border-radius: calc(var(--custom-radius) + 2px);
|
||||
}
|
||||
|
||||
.fa-card,
|
||||
.fa-card-sm,
|
||||
.fa-card-xs {
|
||||
border: 1px solid var(--fa-card-border);
|
||||
}
|
||||
|
||||
.fa-card {
|
||||
border-radius: calc(var(--custom-radius) + 4px);
|
||||
}
|
||||
|
||||
.fa-card-sm {
|
||||
border-radius: calc(var(--custom-radius) + 2px);
|
||||
}
|
||||
|
||||
.fa-card-xs {
|
||||
border-radius: calc(var(--custom-radius) - 4px);
|
||||
}
|
||||
|
||||
// 盒子边框
|
||||
[data-box-mode="border-mode"] {
|
||||
.page-content,
|
||||
.fa-table-card {
|
||||
border: 1px solid var(--fa-card-border) !important;
|
||||
}
|
||||
|
||||
.fa-card {
|
||||
@include fa-card-base(var(--fa-card-border), none, 4px);
|
||||
}
|
||||
|
||||
.fa-card-sm {
|
||||
@include fa-card-base(var(--fa-card-border), none, 2px);
|
||||
}
|
||||
|
||||
.fa-card-xs {
|
||||
@include fa-card-base(var(--fa-card-border), none, -4px);
|
||||
}
|
||||
}
|
||||
|
||||
// 盒子阴影
|
||||
[data-box-mode="shadow-mode"] {
|
||||
.page-content,
|
||||
.fa-table-card {
|
||||
border: 1px solid var(--fa-gray-200) !important;
|
||||
box-shadow: 0 0 4px 0 rgb(0 0 0 / 4%) !important;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
border-right: 1px solid var(--fa-card-border) !important;
|
||||
}
|
||||
|
||||
.fa-card {
|
||||
@include fa-card-base(
|
||||
var(--fa-gray-200),
|
||||
(0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 1px 2px -1px rgba(0, 0, 0, 0.08)),
|
||||
4px
|
||||
);
|
||||
}
|
||||
|
||||
.fa-card-sm {
|
||||
@include fa-card-base(
|
||||
var(--fa-gray-200),
|
||||
(0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 1px 2px -1px rgba(0, 0, 0, 0.08)),
|
||||
2px
|
||||
);
|
||||
}
|
||||
|
||||
.fa-card-xs {
|
||||
@include fa-card-base(
|
||||
var(--fa-gray-200),
|
||||
(0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 1px -1px rgba(0, 0, 0, 0.08)),
|
||||
-4px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 元素全屏
|
||||
.el-full-screen {
|
||||
position: fixed;
|
||||
@@ -0,0 +1,98 @@
|
||||
// 盒子边框/阴影模式
|
||||
// 通过 `data-box-mode` 属性切换
|
||||
// border-mode: 边框模式（默认）
|
||||
// shadow-mode: 阴影模式
|
||||
|
||||
// 盒子默认边框
|
||||
.page-content {
|
||||
border: 1px solid var(--fa-card-border) !important;
|
||||
}
|
||||
|
||||
@mixin fa-card-base($border-color, $shadow: none, $radius-diff: 4px) {
|
||||
background: var(--default-box-color);
|
||||
border: 1px solid #{$border-color} !important;
|
||||
border-radius: calc(var(--custom-radius) + #{$radius-diff}) !important;
|
||||
box-shadow: #{$shadow} !important;
|
||||
|
||||
--el-card-border-color: var(--default-border) !important;
|
||||
}
|
||||
|
||||
// 全局统一 ElCard 卡片圆角，与 dashboard 首页一致
|
||||
.el-card {
|
||||
--el-card-border-radius: calc(var(--custom-radius) + 2px);
|
||||
}
|
||||
|
||||
.fa-card,
|
||||
.fa-card-sm,
|
||||
.fa-card-xs {
|
||||
border: 1px solid var(--fa-card-border);
|
||||
}
|
||||
|
||||
.fa-card {
|
||||
border-radius: calc(var(--custom-radius) + 4px);
|
||||
}
|
||||
|
||||
.fa-card-sm {
|
||||
border-radius: calc(var(--custom-radius) + 2px);
|
||||
}
|
||||
|
||||
.fa-card-xs {
|
||||
border-radius: calc(var(--custom-radius) - 4px);
|
||||
}
|
||||
|
||||
// 盒子边框
|
||||
[data-box-mode="border-mode"] {
|
||||
.page-content,
|
||||
.fa-table-card {
|
||||
border: 1px solid var(--fa-card-border) !important;
|
||||
}
|
||||
|
||||
.fa-card {
|
||||
@include fa-card-base(var(--fa-card-border), none, 4px);
|
||||
}
|
||||
|
||||
.fa-card-sm {
|
||||
@include fa-card-base(var(--fa-card-border), none, 2px);
|
||||
}
|
||||
|
||||
.fa-card-xs {
|
||||
@include fa-card-base(var(--fa-card-border), none, -4px);
|
||||
}
|
||||
}
|
||||
|
||||
// 盒子阴影
|
||||
[data-box-mode="shadow-mode"] {
|
||||
.page-content,
|
||||
.fa-table-card {
|
||||
border: 1px solid var(--fa-gray-200) !important;
|
||||
box-shadow: 0 0 4px 0 rgb(0 0 0 / 4%) !important;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
border-right: 1px solid var(--fa-card-border) !important;
|
||||
}
|
||||
|
||||
.fa-card {
|
||||
@include fa-card-base(
|
||||
var(--fa-gray-200),
|
||||
(0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 1px 2px -1px rgba(0, 0, 0, 0.08)),
|
||||
4px
|
||||
);
|
||||
}
|
||||
|
||||
.fa-card-sm {
|
||||
@include fa-card-base(
|
||||
var(--fa-gray-200),
|
||||
(0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 1px 2px -1px rgba(0, 0, 0, 0.08)),
|
||||
2px
|
||||
);
|
||||
}
|
||||
|
||||
.fa-card-xs {
|
||||
@include fa-card-base(
|
||||
var(--fa-gray-200),
|
||||
(0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 1px -1px rgba(0, 0, 0, 0.08)),
|
||||
-4px
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// ================================================================
|
||||
// NProgress 样式（从 nprogress/nprogress.css 完整迁移至 SCSS 管线）
|
||||
// ================================================================
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2400;
|
||||
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);
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translate(0, -4px);
|
||||
}
|
||||
|
||||
#nprogress .spinner {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 2400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -2,15 +2,15 @@
|
||||
// 全局样式入口（src/styles/index.scss）
|
||||
// ============================================================
|
||||
// 目录结构：
|
||||
// core/ 全局基础（重置、mixin、Tailwind、tokens）
|
||||
// element-plus/ EP 主题与样式覆写（theme / overrides / dark）
|
||||
// animations/ 全局动画（路由切换、主题切换）
|
||||
// vendors/ 第三方组件样式覆写（highlight.js、markdown）
|
||||
// custom/ 业务页专属样式
|
||||
// core/ 全局基础（重置、mixin、Tailwind、tokens、NProgress）
|
||||
// element-plus/ EP 主题与样式覆写（theme / overrides / dark）
|
||||
// animations/ 全局动画（路由切换、主题切换、列表入场）
|
||||
// ============================================================
|
||||
|
||||
// ---------- core/ ----------
|
||||
@use "./core/reset";
|
||||
@use "./core/nprogress";
|
||||
@use "./core/box-mode";
|
||||
@use "./core/app";
|
||||
|
||||
// ---------- element-plus/ ----------
|
||||
|
||||
Reference in New Issue
Block a user