fix: 修改导航栏顶部菜单显示样式 (#1425)
Co-authored-by: sealday <zhanglin@daoyoucloud.com> Reviewed-on: daoyoucloud/tachybase#1425 Co-authored-by: wjh <wwwjh0710@163.com> Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
		
							parent
							
								
									7c9411dcfe
								
							
						
					
					
						commit
						c35cc6c2dd
					
				| @ -1,6 +1,6 @@ | |||||||
| import { createStyles } from 'antd-style'; | import { createStyles } from 'antd-style'; | ||||||
| 
 | 
 | ||||||
| export const useStyles = createStyles(({ css }) => { | export const useStyles = createStyles(({ css, token }) => { | ||||||
|   return { |   return { | ||||||
|     subMenuDesignerCss: css` |     subMenuDesignerCss: css` | ||||||
|       position: relative; |       position: relative; | ||||||
| @ -156,5 +156,40 @@ export const useStyles = createStyles(({ css }) => { | |||||||
|         background: inherit; |         background: inherit; | ||||||
|       } |       } | ||||||
|     `,
 |     `,
 | ||||||
|  | 
 | ||||||
|  |     menuItem: css` | ||||||
|  |       &:hover { | ||||||
|  |         border-radius: ${token.borderRadius}px; | ||||||
|  |         background: rgba(0, 0, 0, 0.045); | ||||||
|  |         overflow: hidden; | ||||||
|  |       } | ||||||
|  |       .ant-btn { | ||||||
|  |         display: flex; | ||||||
|  |         flex-direction: column; | ||||||
|  |         align-items: center; | ||||||
|  |         justify-content: center; | ||||||
|  |         border: none; | ||||||
|  |         box-shadow: none; | ||||||
|  |         padding-left: 0; | ||||||
|  |         padding-right: 0; | ||||||
|  |         width: 100%; | ||||||
|  |         span { | ||||||
|  |           display: block; | ||||||
|  |           text-align: center; | ||||||
|  |           font-size: ${token.fontSizeSM}px; | ||||||
|  |         } | ||||||
|  |         .anticon { | ||||||
|  |           font-size: 1.2rem; | ||||||
|  |           margin-bottom: 0.3rem; | ||||||
|  |           text-align: center; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |       .ant-btn-default { | ||||||
|  |         box-shadow: none; | ||||||
|  |       } | ||||||
|  |       .general-schema-designer { | ||||||
|  |         background: none; | ||||||
|  |       } | ||||||
|  |     `,
 | ||||||
|   }; |   }; | ||||||
| }); | }); | ||||||
|  | |||||||
| @ -11,8 +11,8 @@ import { | |||||||
| } from '@tachybase/schema'; | } from '@tachybase/schema'; | ||||||
| import { error } from '@tachybase/utils/client'; | import { error } from '@tachybase/utils/client'; | ||||||
| 
 | 
 | ||||||
| import { MoreOutlined } from '@ant-design/icons'; | import { AppstoreOutlined, InsertRowAboveOutlined, MoreOutlined } from '@ant-design/icons'; | ||||||
| import { Menu as AntdMenu, Button, Dropdown, MenuProps } from 'antd'; | import { Menu as AntdMenu, Button, Card, Col, Dropdown, MenuProps, Popover, Row } from 'antd'; | ||||||
| import { createPortal } from 'react-dom'; | import { createPortal } from 'react-dom'; | ||||||
| import { useTranslation } from 'react-i18next'; | import { useTranslation } from 'react-i18next'; | ||||||
| 
 | 
 | ||||||
| @ -47,35 +47,70 @@ const HeaderMenu = ({ | |||||||
|   children, |   children, | ||||||
| }) => { | }) => { | ||||||
|   const { Component, getMenuItems } = useMenuItem(); |   const { Component, getMenuItems } = useMenuItem(); | ||||||
|   const { styles } = useStyles(); |  | ||||||
|   const { token } = useToken(); |   const { token } = useToken(); | ||||||
|   const items = useMemo(() => { |   const [items, setItems] = useState([]); | ||||||
|  |   const { t } = useTranslation(); | ||||||
|  |   const { styles: itemStyle } = useStyles(); | ||||||
|  |   const result = getMenuItems(() => { | ||||||
|  |     return children; | ||||||
|  |   }); | ||||||
|  |   useEffect(() => { | ||||||
|  |     setItems(getItem()); | ||||||
|  |   }, [children, designable, getMenuItems]); | ||||||
|  |   const getItem = () => { | ||||||
|     const designerBtn = { |     const designerBtn = { | ||||||
|       key: 'x-designer-button', |       key: 'x-designer-button', | ||||||
|       style: { padding: '0 8px', order: -1 }, |  | ||||||
|       label: render({ |       label: render({ | ||||||
|         'data-testid': 'schema-initializer-Menu-header', |         'data-testid': 'schema-initializer-Menu-header', | ||||||
|         style: { background: 'none' }, |         style: { background: 'none', height: '100%' }, | ||||||
|       }), |       }), | ||||||
|       notdelete: true, |       notdelete: true, | ||||||
|       disabled: true, |       disabled: true, | ||||||
|     }; |     }; | ||||||
|     const result = getMenuItems(() => { |  | ||||||
|       return children; |  | ||||||
|     }); |  | ||||||
|     if (designable) { |     if (designable) { | ||||||
|       result.push(designerBtn); |       result.push(designerBtn); | ||||||
|     } |     } | ||||||
| 
 |  | ||||||
|     return result; |     return result; | ||||||
|   }, [children, designable, getMenuItems, render]); |   }; | ||||||
| 
 | 
 | ||||||
|  |   const onClick = (info) => { | ||||||
|  |     const s = schema.properties?.[info.key]; | ||||||
|  |     if (!s) { | ||||||
|  |       return; | ||||||
|  |     } | ||||||
|  |     if (mode === 'mix') { | ||||||
|  |       if (s['x-component'] !== 'Menu.SubMenu') { | ||||||
|  |         onSelect?.({ item: { props: info } }); | ||||||
|  |       } else { | ||||||
|  |         const menuItemSchema = findMenuItem(s); | ||||||
|  |         if (!menuItemSchema) { | ||||||
|  |           return onSelect?.({ item: { props: info } }); | ||||||
|  |         } | ||||||
|  |         setLoading(true); | ||||||
|  |         const keys = findKeysByUid(schema, menuItemSchema['x-uid']); | ||||||
|  |         setDefaultSelectedKeys(keys); | ||||||
|  |         setTimeout(() => { | ||||||
|  |           setLoading(false); | ||||||
|  |         }, 100); | ||||||
|  |         onSelect?.({ | ||||||
|  |           key: menuItemSchema.name, | ||||||
|  |           item: { | ||||||
|  |             props: { | ||||||
|  |               schema: menuItemSchema, | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |         }); | ||||||
|  |       } | ||||||
|  |     } else { | ||||||
|  |       onSelect?.({ item: { props: info } }); | ||||||
|  |     } | ||||||
|  |   }; | ||||||
|   return ( |   return ( | ||||||
|     <div style={{ display: 'flex' }}> |     <div style={{ display: 'flex' }}> | ||||||
|       <div style={{ flex: 1 }}></div> |       <div style={{ flex: 1 }}></div> | ||||||
|       <div |       <div | ||||||
|         className={css` |         className={css` | ||||||
|           .ant-btn { |           .iconButton { | ||||||
|             border: 0; |             border: 0; | ||||||
|             height: 46px; |             height: 46px; | ||||||
|             width: 46px; |             width: 46px; | ||||||
| @ -83,50 +118,93 @@ const HeaderMenu = ({ | |||||||
|             background: none; |             background: none; | ||||||
|             color: rgba(255, 255, 255, 0.65); |             color: rgba(255, 255, 255, 0.65); | ||||||
|             &:hover { |             &:hover { | ||||||
|               background: none !important; |               background: rgba(255, 255, 255, 0.1) !important; | ||||||
|             } |             } | ||||||
|           } |           } | ||||||
|         `}
 |         `}
 | ||||||
|       > |       > | ||||||
|         <Dropdown |         <Popover | ||||||
|           menu={{ |           placement="bottom" | ||||||
|             items, |           arrow={false} | ||||||
|             onClick(info) { |           content={() => { | ||||||
|               const s = schema.properties?.[info.key]; |             return ( | ||||||
|               if (!s) { |               <Card | ||||||
|                 return; |                 className={css` | ||||||
|               } |                   border: none; | ||||||
|               if (mode === 'mix') { |                   max-width: 21rem; | ||||||
|                 if (s['x-component'] !== 'Menu.SubMenu') { |                 `}
 | ||||||
|                   onSelect?.(info); |               > | ||||||
|                 } else { |                 {items?.map((item) => { | ||||||
|                   const menuItemSchema = findMenuItem(s); |                   const { icon, field, Designer, schema, styles } = item?.menu || {}; | ||||||
|                   if (!menuItemSchema) { |                   return ( | ||||||
|                     return onSelect?.(info); |                     <Card.Grid | ||||||
|                   } |                       style={{ | ||||||
|                   setLoading(true); |                         display: 'block', | ||||||
|                   const keys = findKeysByUid(schema, menuItemSchema['x-uid']); |                         color: 'inherit', | ||||||
|                   setDefaultSelectedKeys(keys); |                         padding: token.marginSM, | ||||||
|                   setTimeout(() => { |                         boxShadow: 'none', | ||||||
|                     setLoading(false); |                         width: '7rem', | ||||||
|                   }, 100); |                         height: '5rem', | ||||||
|                   onSelect?.({ |                       }} | ||||||
|                     key: menuItemSchema.name, |                       className={itemStyle.menuItem} | ||||||
|                     item: { |                       key={item.key} | ||||||
|                       props: { |                       onClick={() => { | ||||||
|                         schema: menuItemSchema, |                         onClick(item); | ||||||
|                       }, |                       }} | ||||||
|                     }, |                     > | ||||||
|                   }); |                       {item.menu ? ( | ||||||
|                 } |                         <SchemaContext.Provider value={schema}> | ||||||
|               } else { |                           <FieldContext.Provider value={field}> | ||||||
|                 onSelect?.(info); |                             <SortableItem | ||||||
|               } |                               role="button" | ||||||
|             }, |                               aria-label={t(field.title)} | ||||||
|  |                               className={styles.designerCss} | ||||||
|  |                               removeParentsIfNoChildren={false} | ||||||
|  |                               style={{ position: 'revert' }} | ||||||
|  |                             > | ||||||
|  |                               <a | ||||||
|  |                                 role="button" | ||||||
|  |                                 aria-label={t(field.title)} | ||||||
|  |                                 title={t(field.title)} | ||||||
|  |                                 className={css` | ||||||
|  |                                   display: block; | ||||||
|  |                                   color: inherit; | ||||||
|  |                                   &:hover { | ||||||
|  |                                     color: inherit; | ||||||
|  |                                   } | ||||||
|  |                                 `}
 | ||||||
|  |                               > | ||||||
|  |                                 <div style={{ fontSize: '1.2rem', textAlign: 'center', marginBottom: '0.3rem' }}> | ||||||
|  |                                   <Icon type={icon || 'QuestionCircleOutlined'} /> | ||||||
|  |                                 </div> | ||||||
|  |                                 <div | ||||||
|  |                                   style={{ | ||||||
|  |                                     textAlign: 'center', | ||||||
|  |                                     whiteSpace: 'nowrap', | ||||||
|  |                                     overflow: 'hidden', | ||||||
|  |                                     textOverflow: 'ellipsis', | ||||||
|  |                                     fontSize: token.fontSizeSM, | ||||||
|  |                                   }} | ||||||
|  |                                 > | ||||||
|  |                                   {t(field.title)} | ||||||
|  |                                 </div> | ||||||
|  |                               </a> | ||||||
|  |                               <Designer /> | ||||||
|  |                             </SortableItem> | ||||||
|  |                           </FieldContext.Provider> | ||||||
|  |                         </SchemaContext.Provider> | ||||||
|  |                       ) : ( | ||||||
|  |                         <>{item.label}</> | ||||||
|  |                       )} | ||||||
|  |                     </Card.Grid> | ||||||
|  |                   ); | ||||||
|  |                 })} | ||||||
|  |               </Card> | ||||||
|  |             ); | ||||||
|           }} |           }} | ||||||
|         > |         > | ||||||
|           <Button icon={<MoreOutlined style={{ color: token.colorTextHeaderMenu }} />} /> |           <Button className="iconButton" icon={<AppstoreOutlined style={{ color: token.colorTextHeaderMenu }} />} /> | ||||||
|         </Dropdown> |         </Popover> | ||||||
|         <Component /> |         <Component /> | ||||||
|       </div> |       </div> | ||||||
|     </div> |     </div> | ||||||
| @ -358,6 +436,7 @@ Menu.Item = observer( | |||||||
|         key: schema.name, |         key: schema.name, | ||||||
|         eventKey: schema.name, |         eventKey: schema.name, | ||||||
|         schema, |         schema, | ||||||
|  |         menu: { icon, field, Designer, schema, styles }, | ||||||
|         label: ( |         label: ( | ||||||
|           <SchemaContext.Provider value={schema}> |           <SchemaContext.Provider value={schema}> | ||||||
|             <FieldContext.Provider value={field}> |             <FieldContext.Provider value={field}> | ||||||
| @ -423,6 +502,7 @@ Menu.URL = observer( | |||||||
|         onClick: () => { |         onClick: () => { | ||||||
|           window.open(props.href, '_blank'); |           window.open(props.href, '_blank'); | ||||||
|         }, |         }, | ||||||
|  |         menu: { icon, field, Designer, schema, styles }, | ||||||
|         label: ( |         label: ( | ||||||
|           <SchemaContext.Provider value={schema}> |           <SchemaContext.Provider value={schema}> | ||||||
|             <FieldContext.Provider value={field}> |             <FieldContext.Provider value={field}> | ||||||
| @ -474,6 +554,7 @@ Menu.SubMenu = observer( | |||||||
|         className: styles.menuItemClass, |         className: styles.menuItemClass, | ||||||
|         key: schema.name, |         key: schema.name, | ||||||
|         eventKey: schema.name, |         eventKey: schema.name, | ||||||
|  |         menu: { icon, field, Designer, schema, styles }, | ||||||
|         label: ( |         label: ( | ||||||
|           <SchemaContext.Provider value={schema}> |           <SchemaContext.Provider value={schema}> | ||||||
|             <FieldContext.Provider value={field}> |             <FieldContext.Provider value={field}> | ||||||
|  | |||||||
| @ -22505,7 +22505,6 @@ packages: | |||||||
| 
 | 
 | ||||||
|   /glob@5.0.15: |   /glob@5.0.15: | ||||||
|     resolution: {integrity: sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==} |     resolution: {integrity: sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==} | ||||||
|     deprecated: Glob versions prior to v9 are no longer supported |  | ||||||
|     dependencies: |     dependencies: | ||||||
|       inflight: 1.0.6 |       inflight: 1.0.6 | ||||||
|       inherits: 2.0.4 |       inherits: 2.0.4 | ||||||
| @ -22528,7 +22527,6 @@ packages: | |||||||
| 
 | 
 | ||||||
|   /glob@7.1.7: |   /glob@7.1.7: | ||||||
|     resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==} |     resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==} | ||||||
|     deprecated: Glob versions prior to v9 are no longer supported |  | ||||||
|     dependencies: |     dependencies: | ||||||
|       fs.realpath: 1.0.0 |       fs.realpath: 1.0.0 | ||||||
|       inflight: 1.0.6 |       inflight: 1.0.6 | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user