refactor: 前端 UI 框架从 TDesign 迁移到 antd 6.x

- 移除 tdesign-react + tdesign-icons-react,新增 antd@6.4.3 + @ant-design/icons@6.2.3
- Layout/Header/Sider/Content 替换 TDesign Layout,Sider 内置折叠管理
- Segmented 替换 RadioGroup 主题切换,ConfigProvider 主题算法切换
- Menu items prop 模式,Sidebar 简化为无 props 纯组件
- Table/Modal/Form/Input.TextArea/Tabs/Tag/Popconfirm 全量迁移
- App.useApp().message 替换 MessagePlugin(hooks 模式)
- --td-* CSS 变量替换为 --ant-* antd CSS 变量
- 测试适配:ConfigProvider+App wrapper,.ant-menu-item-selected,antd CSS-in-JS jsdom 兼容
- 文档更新:frontend.md, development/README.md, config.yaml, deploy.md
- vendor-antd chunk 755KB gzipped 240KB
This commit is contained in:
2026-05-28 13:20:12 +08:00
parent cd1533328d
commit 15ba33db27
25 changed files with 478 additions and 489 deletions

View File

@@ -1,10 +1,6 @@
:root {
--td-brand-color: var(--td-brand-color-7);
}
.app-layout {
min-height: 100vh;
background: var(--td-bg-color-page);
background: var(--ant-color-bg-layout);
width: 100%;
}
@@ -12,41 +8,41 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--td-comp-paddingLR-l);
background: var(--td-bg-color-container);
border-bottom: 1px solid var(--td-component-border);
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 {
display: inline-flex;
align-items: center;
gap: var(--td-comp-margin-l);
gap: var(--ant-margin-lg);
}
.app-header-right {
display: inline-flex;
align-items: center;
gap: var(--td-comp-margin-s);
gap: var(--ant-margin-sm);
}
.app-brand-group {
display: inline-flex;
align-items: baseline;
gap: var(--td-comp-margin-s);
gap: var(--ant-margin-sm);
}
.app-brand {
margin: 0;
color: var(--td-text-color-primary);
font-size: calc(var(--td-font-size-title-large) + 6px);
color: var(--ant-color-text);
font-size: calc(var(--ant-font-size-heading-1) - 6px);
font-weight: 700;
line-height: 1;
}
.app-version {
color: var(--td-text-color-placeholder);
font-size: var(--td-font-size-body-small);
color: var(--ant-color-text-quaternary);
font-size: var(--ant-font-size-sm);
font-weight: 400;
line-height: 1;
}
@@ -54,38 +50,39 @@
.app-sidebar-collapse-btn {
width: 100%;
justify-content: center;
color: var(--td-text-color-secondary);
color: var(--ant-color-text-secondary);
}
.app-page-title {
color: var(--td-text-color-secondary);
font-size: var(--td-font-size-title-medium);
color: var(--ant-color-text-secondary);
font-size: var(--ant-font-size-heading-3);
font-weight: 500;
}
.app-sidebar {
background: var(--td-bg-color-container);
border-right: 1px solid var(--td-component-border);
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(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
padding: var(--ant-padding-xl) var(--ant-padding-xl);
min-height: calc(100vh - 64px);
}
.meta-response {
background: var(--td-bg-color-component);
border-radius: var(--td-radius-default);
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
font-size: var(--td-font-size-body-medium);
color: var(--td-text-color-primary);
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;
}
@@ -99,7 +96,7 @@
}
.text-disabled {
color: var(--td-text-color-disabled);
color: var(--ant-color-text-disabled);
}
.full-width-space {
@@ -107,7 +104,8 @@
}
.not-found-icon {
color: var(--td-warning-color);
color: var(--ant-color-warning);
font-size: 64px;
}
.tabular-nums {
@@ -119,5 +117,5 @@
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--td-comp-margin-l);
gap: var(--ant-margin-lg);
}