Umi Max学习
在新做后台管理项目时，发现umi3已经升级，umi4已经发布了，发现其中umi的使用已经有了些变化，现将变化整理
创建项目
pnpm dlx create-umi@latest =>Ant Design Pro =>pnpm =>taobao
修改界面Layout
1 import { defineConfig } from '@umijs/max';
2
3 export default defineConfig({
4 antd: {},
5 access: {},
6 model: {},
7 initialState: {},
8 request: {},
9 layout: {
10 title: 'CF MES',
11 },
12 // routes: [
13 // {
14 // path: '/',
15 // redirect: '/home',
16 // },
17 // {
18 // name: '首页',
19 // path: '/home',
20 // component: './Home',
21 // },
22 // {
23 // name: '权限演示',
24 // path: '/access',
25 // component: './Access',
26 // },
27 // {
28 // name: ' CRUD 示例',
29 // path: '/table',
30 // component: './Table',
31 // },
32 // ],
33 npmClient: 'pnpm',
34 });
.umirc.ts
1 // 运行时配置
2
3 // 全局初始化数据配置，用于 Layout 用户信息和权限初始化
4 // 更多信息见文档：https://next.umijs.org/docs/api/runtime-config#getinitialstate
5
6 import { Button } from 'antd';
7 import {
8 CaretDownFilled,
9 DoubleRightOutlined,
10 GithubFilled,
11 InfoCircleFilled,
12 PlusCircleFilled,
13 QuestionCircleFilled,
14 SearchOutlined,
15 SmileFilled,
16 } from '@ant-design/icons';
17
18 export async function getInitialState(): Promise<{ name: string }> {
19 return { name: '@umijs/max' };
20 }
21
22 export const layout = () => {
23 return {
24 /**
25 * 应用的Logo
26 */
27 logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
28 /**
29 * 菜单
30 * locale：是否多语言
31 * collapsedShowGroupTitle：
32 */
33 menu: {
34 locale: false,
35 collapsedShowGroupTitle: true,
36 navTheme: 'dark',
37 },
38 /**
39 * layout：为mix才是普通的样式，即有头部，有左侧菜单等，
40 * 取消了该配置，则没有头部，只有左侧菜单
41 */
42 layout: 'mix',
43 /**
44 * 自动切割菜单，mix的专属能力
45 * 当为true时，可以把第一级菜单旋转到顶栏中
46 * 取消配置时，菜单则只显示在左侧菜单栏中
47 * 注意：为了体验良好，最好给每个一级菜单都设置一个重定向，这样可以防止切换到白屏页面
48 */
49 splitMenus: true,
50 /**
51 * 是否固定导航
52 */
53 fixSiderbar: true,
54 /**
55 * siderMenuType：会将菜单进行分组，并且显示对应的分隔线，以平面的形式显示
56 * 取消则会按树状进行显示菜单
57 */
58 // siderMenuType: "group",
59 /**
60 * 当非mix模式时，会出现在菜单的左下角，如果是min模式，则不起效果
61 */
62 // avatarProps: {
63 // src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
64 // size: 'small',
65 // title: '七妮妮',
66 // },
67 /**
68 * 退出登陆事件，当有退出事件时，头像图标才会出现【退出登陆】按钮
69 */
70 logout: () => { console.log('退出登陆系统') }, // do something
71 /**
72 * 背景图片，让系统更美观
73 * 不设置也不影响系统显示，只是没有那么美观而已
74 */
75 bgLayoutImgList: [
76 {
77 src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
78 left: 85,
79 bottom: 100,
80 height: '303px',
81 },
82 {
83 src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
84 bottom: -68,
85 right: -45,
86 height: '303px',
87 },
88 {
89 src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',
90 bottom: 0,
91 left: 0,
92 width: '331px',
93 },
94 ],
95 /**
96 * 此功能可以实现动态路由，用来渲染访问路由
97 * 如果该功能启用了，则会重写route中的数据
98 * @returns
99 */
100 // menuDataRender: () => [
101 // {
102 // path: '/',
103 // name: 'Home',
104 // },
105 // {
106 // path: '/about',
107 // name: 'About',
108 // children: [
109 // { path: '/about/company', name: 'Company' },
110 // { path: '/about/investors', name: 'Investors' },
111 // ],
112 // },
113 // ],
114 /**
115 * 菜单左侧出现应用的Icon
116 * 用于进行多站点之前的导航
117 */
118 appList: [
119 {
120 icon: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
121 title: 'Ant Design',
122 desc: '杭州市较知名的 UI 设计语言',
123 url: 'https://ant.design',
124 },
125 {
126 icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
127 title: 'AntV',
128 desc: '蚂蚁集团全新一代数据可视化解决方案',
129 url: 'https://antv.vision/',
130 target: '_blank',
131 },
132 ],
133 route: {
134 path: '/',
135 redirect: '/home',
136 default: '/',
137 routes: [
138 {
139 path: '/home',
140 name: '首页',
141 // icon: <SmileFilled />,
142 component: './Home',
143 },
144 {
145 path: '/access',
146 name: '管理页',
147 // icon: <CrownFilled />,
148 access: 'canAdmin',
149 component: './Access',
150 routes: [
151 {
152 path: '/access/sub-page1',
153 name: '一级页面',
154 // icon: <CrownFilled />,
155 component: './access/sub-page1',
156 },
157 {
158 path: '/access/sub-page2',
159 name: '二级页面',
160 // icon: <CrownFilled />,
161 component: './access/sub-page2',
162 },
163 {
164 path: '/access/sub-page3',
165 name: '三级页面',
166 // icon: <CrownFilled />,
167 component: './access/sub-page3',
168 },
169 ],
170 },
171 {
172 name: '列表页',
173 // icon: <TabletFilled />,
174 path: '/table',
175 component: './Table',
176 routes: [
177 {
178 path: '/list/sub-page',
179 name: '列表页面',
180 // icon: <CrownFilled />,
181 routes: [
182 {
183 path: 'sub-sub-page1',
184 name: '一一级列表页面',
185 // icon: <CrownFilled />,
186 component: './Welcome',
187 },
188 {
189 path: 'sub-sub-page2',
190 name: '一二级列表页面',
191 // icon: <CrownFilled />,
192 component: './Welcome',
193 },
194 {
195 path: 'sub-sub-page3',
196 name: '一三级列表页面',
197 // icon: <CrownFilled />,
198 component: './Welcome',
199 },
200 ],
201 },
202 {
203 path: '/list/sub-page2',
204 name: '二级列表页面',
205 // icon: <CrownFilled />,
206 component: './Welcome',
207 },
208 {
209 path: '/list/sub-page3',
210 name: '三级列表页面',
211 // icon: <CrownFilled />,
212 component: './Welcome',
213 },
214 ],
215 },
216 {
217 path: 'https://ant.design',
218 name: 'Ant Design 官网外链',
219 // icon: <ChromeFilled />,
220 },
221 ],
222 },
223 /**
224 * 菜单的样式设定，如果不设定则是灰色的菜单
225 */
226 // token: {
227 // colorBgAppListIconHover: 'rgba(0,0,0,0.06)',
228 // colorTextAppListIconHover: 'rgba(255,255,255,0.95)',
229 // colorTextAppListIcon: 'rgba(255,255,255,0.85)',
230 // sider: {
231 // colorBgCollapsedButton: '#fff',
232 // colorTextCollapsedButtonHover: 'rgba(0,0,0,0.65)',
233 // colorTextCollapsedButton: 'rgba(0,0,0,0.45)',
234 // colorMenuBackground: '#004FD9',
235 // colorBgMenuItemCollapsedHover: 'rgba(0,0,0,0.06)',
236 // colorBgMenuItemCollapsedSelected: 'rgba(0,0,0,0.15)',
237 // colorMenuItemDivider: 'rgba(255,255,255,0.15)',
238 // colorBgMenuItemHover: 'rgba(0,0,0,0.06)',
239 // colorBgMenuItemSelected: 'rgba(0,0,0,0.15)',
240 // colorTextMenuSelected: '#fff',
241 // colorTextMenu: 'rgba(255,255,255,0.75)',
242 // colorTextMenuSecondary: 'rgba(255,255,255,0.65)',
243 // colorTextMenuTitle: 'rgba(255,255,255,0.95)',
244 // colorTextMenuActive: 'rgba(255,255,255,0.95)',
245 // colorTextSubMenuSelected: '#fff',
246 // },
247 // },
248 };
249 };
app.ts
本地运行项目
pnpm dev
浏览器打开8000端口，即可查看项目运行
参考链接：https://blog.csdn.net/w544924116/article/details/120211891
未完待续
标签：25,sub,name,10,max,rgba,path,icon,255 From： https://www.cnblogs.com/weschen/p/16843494.html