lanyuanxiaoyao/Alfred
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 移除 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
Download Patch File Download Diff File Expand all files Collapse all files

59
tests/web/components/Sidebar/index.test.tsx
View File

@@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/no-empty-function */
import { screen } from "@testing-library/react";
import { describe, expect, test } from "bun:test";
import { createElement } from "react";
@@ -8,73 +7,29 @@ import { renderWithProviders } from "../../test-utils";
describe("Sidebar", () => {
test("渲染菜单项", () => {
renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: () => {} }));
renderWithProviders(createElement(Sidebar));
expect(screen.getByText("仪表盘")).not.toBeNull();
expect(screen.getByText("项目管理")).not.toBeNull();
expect(screen.getByText("用户管理")).not.toBeNull();
expect(screen.getByText("系统设置")).not.toBeNull();
});
test("折叠状态下仍渲染菜单项", () => {
renderWithProviders(createElement(Sidebar, { collapsed: true, onToggleCollapsed: () => {} }));
expect(screen.getByText("仪表盘")).not.toBeNull();
expect(screen.getByText("项目管理")).not.toBeNull();
expect(screen.getByText("用户管理")).not.toBeNull();
expect(screen.getByText("系统设置")).not.toBeNull();
});
test("项目管理菜单项可导航到 /projects", () => {
renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: () => {} }), {
renderWithProviders(createElement(Sidebar), {
initialRoute: "/projects",
});
const activeItem = document.querySelector(".t-is-active");
const activeItem = document.querySelector(".ant-menu-item-selected");
expect(activeItem).not.toBeNull();
expect(activeItem?.textContent).toContain("项目管理");
});
test("高亮当前路由对应的菜单项", () => {
renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: () => {} }), {
initialRoute: "/users",
renderWithProviders(createElement(Sidebar), {
initialRoute: "/",
});
const activeItem = document.querySelector(".t-is-active");
const activeItem = document.querySelector(".ant-menu-item-selected");
expect(activeItem).not.toBeNull();
expect(activeItem?.textContent).toContain("用户管理");
});
test("展开态底部渲染折叠按钮", () => {
renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: () => {} }));
const collapseBtn = document.querySelector(".app-sidebar-collapse-btn");
expect(collapseBtn).not.toBeNull();
});
test("点击底部按钮调用 onToggleCollapsed", () => {
let called = false;
const onToggle = () => {
called = true;
};
renderWithProviders(createElement(Sidebar, { collapsed: false, onToggleCollapsed: onToggle }));
const btn = document.querySelector<HTMLButtonElement>(".app-sidebar-collapse-btn");
expect(btn).not.toBeNull();
btn!.click();
expect(called).toBe(true);
});
test("折叠态底部按钮仍渲染且菜单项高亮不变", () => {
renderWithProviders(createElement(Sidebar, { collapsed: true, onToggleCollapsed: () => {} }), {
initialRoute: "/users",
});
const collapseBtn = document.querySelector(".app-sidebar-collapse-btn");
expect(collapseBtn).not.toBeNull();
const activeItem = document.querySelector(".t-is-active");
expect(activeItem).not.toBeNull();
expect(activeItem?.textContent).toContain("用户管理");
expect(activeItem?.textContent).toContain("仪表盘");
});
});