refactor: 前端 antd 组件使用最佳实践重构
- 修正 API 响应类型,增加 ProjectResponse 包装类型 - ConfigProvider 配置中文 locale (zhCN) - 生产入口启用 ErrorBoundary,使用 Result 组件 - ReactQueryDevtools 仅开发环境渲染 - Sider 增加 collapsible 配置,使用 antd 默认折叠行为 - 项目页面拆分为 ProjectToolbar/ProjectTable/ProjectFormModal - 搜索改用 Input.Search,表单增加 whitespace 校验 - 404/ErrorBoundary/Dashboard 使用 antd Result/Typography/Card/Descriptions - 清理未使用的 ProtectedRoute 和冗余样式类 - styles.css 仅保留必要布局样式,无 antd 内部类覆盖 - 更新测试覆盖,避免依赖 antd 内部类名 - 更新 docs/development/frontend.md 开发规范
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
min-height: 100vh;
|
||||
background: var(--ant-color-bg-layout);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
@@ -11,7 +14,6 @@
|
||||
padding: 0 var(--ant-padding-lg);
|
||||
background: var(--ant-color-bg-container);
|
||||
border-bottom: 1px solid var(--ant-color-border-secondary);
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.app-header-left {
|
||||
@@ -47,75 +49,6 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.app-sidebar-collapse-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
color: var(--ant-color-text-secondary);
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
color: var(--ant-color-text-secondary);
|
||||
font-size: var(--ant-font-size-heading-3);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
background: var(--ant-color-bg-container);
|
||||
border-right: 1px solid var(--ant-color-border-secondary);
|
||||
height: calc(100vh - 64px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-sidebar-menu {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
box-sizing: border-box;
|
||||
padding: var(--ant-padding-xl) var(--ant-padding-xl);
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.meta-response {
|
||||
background: var(--ant-color-fill-tertiary);
|
||||
border-radius: var(--ant-border-radius);
|
||||
padding: var(--ant-padding-lg) var(--ant-padding-lg);
|
||||
font-size: var(--ant-font-size);
|
||||
color: var(--ant-color-text);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.error-boundary-fallback {
|
||||
padding-top: 20vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text-disabled {
|
||||
color: var(--ant-color-text-disabled);
|
||||
}
|
||||
|
||||
.full-width-space {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.not-found-icon {
|
||||
color: var(--ant-color-warning);
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.tabular-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.projects-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--ant-margin-lg);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user