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:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user