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:
2026-05-28 16:09:01 +08:00
parent 1f232e69fc
commit b5301ec7d1
22 changed files with 458 additions and 432 deletions

View File

@@ -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);
}