Layout 已知存在的问题

[luocong2016]

🥰 需求描述 Description of Requirement

🧐 解决方案 Solution

配置和实现有冲突，样式也有些问题

🚑 其他信息 Other information

[luocong2016]

已知 BUG

1. menuRender={false} 报错

// [Vue warn]: Invalid prop: type check failed for prop "menuRender". 
// Expected Object | Function, got Boolean with value false.)
// GlobalHeader/headerProps.ts ，false 报错；原因缺少 Boolean

menuRender: {
  type: [Object, Function, Boolean] as PropType<
    WithFalse<(props: ProProps /* HeaderViewProps */, defaultDom: CustomRender) => CustomRender>
  >,
  default: () => undefined,
},

2. 头部主题错误 headerTheme="dark"

// src/components/GlobalHeader/index.less 
// line:15  background: @pro-layout-header-bg; 需要替换
background: transparent; // 或更改变量默认值 transparent

详细分析，这里还是有明显问题

// ant-design-vue 中  /components/style/themes/default.less
@component-background: #fff;

很多组件因@component-background 变量遮挡，无法显示正确的主题色 如：".ant-pro-layout-page-container", 引用明细： https://github.com/vueComponent/pro-components/search?l=Less&q=component-background&type=

3. navTheme 没转换成 theme

// /components/SiderMenu/index.tsx
<SiderMenu {...attrs} {...props} theme={headerTheme as 'light' | 'dark'}

[luocong2016]

待排查

1. navTheme 无法更改全局的主题，只更改了部分菜单(sider)。
2. 主题颜色无法更改
3. 侧边菜单类型, 未实现

siderMenuType?: "sub" | "group";

[luocong2016]

切换主题各种问题

// 顺序调了好几次都只能这样，切换主题各种样式错误
@import url('@ant-design-vue/pro-layout/dist/style.less');
@import url("ant-design-vue/dist/antd.variable.min.css");

动态切换主题案例

1. 样式丢失
2. 样式无法覆盖
3. 样式缺失等问题

生成 dark 主题脚本

 "theme:pro-dark": "lessc --js --modify-var=\"ant-prefix=custom-dark\" node_modules/@ant-design-vue/pro-layout/dist/style.less src/styles/pro-theme-dark.css",
    "theme:dark": "lessc --js --modify-var=\"ant-prefix=custom-dark\" node_modules/ant-design-vue/dist/antd.variable.less src/styles/theme-dark.css",

实际组件

1. 样式混乱

2. "prefixCls" 其实是写入的，但渲染的是错误的。看了下代码，发现是有些用的是 pros,有些是非计算变量 所以造成了很多组件不一致。

<layout prefixCls={xxx} /> <Sider  prefixCls={xxx} />

[luocong2016]

使用 ConfigProvider.config 静态方法构建主题方案

建议不要直接用这个包，因为很多地方需要更改。 目前的感受是和 react 版本差距有点大，如果需要使用，建议拷贝到项目直接改吧。

[cuijiudai]

• 1.menu 的hidden ,hideInMenu 无效
• 2.layout :mix 实现不完整，top 未实现
• 3.prefixCls 设置未全部生效