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';
|
||||
|
||||
export const useStyles = createStyles(({ css }) => {
|
||||
export const useStyles = createStyles(({ css, token }) => {
|
||||
return {
|
||||
subMenuDesignerCss: css`
|
||||
position: relative;
|
||||
@ -156,5 +156,40 @@ export const useStyles = createStyles(({ css }) => {
|
||||
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';
|
||||
import { error } from '@tachybase/utils/client';
|
||||
|
||||
import { MoreOutlined } from '@ant-design/icons';
|
||||
import { Menu as AntdMenu, Button, Dropdown, MenuProps } from 'antd';
|
||||
import { AppstoreOutlined, InsertRowAboveOutlined, MoreOutlined } from '@ant-design/icons';
|
||||
import { Menu as AntdMenu, Button, Card, Col, Dropdown, MenuProps, Popover, Row } from 'antd';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
@ -47,35 +47,70 @@ const HeaderMenu = ({
|
||||
children,
|
||||
}) => {
|
||||
const { Component, getMenuItems } = useMenuItem();
|
||||
const { styles } = useStyles();
|
||||
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 = {
|
||||
key: 'x-designer-button',
|
||||
style: { padding: '0 8px', order: -1 },
|
||||
label: render({
|
||||
'data-testid': 'schema-initializer-Menu-header',
|
||||
style: { background: 'none' },
|
||||
style: { background: 'none', height: '100%' },
|
||||
}),
|
||||
notdelete: true,
|
||||
disabled: true,
|
||||
};
|
||||
const result = getMenuItems(() => {
|
||||
return children;
|
||||
});
|
||||
if (designable) {
|
||||
result.push(designerBtn);
|
||||
}
|
||||
|
||||
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 (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ flex: 1 }}></div>
|
||||
<div
|
||||
className={css`
|
||||
.ant-btn {
|
||||
.iconButton {
|
||||
border: 0;
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
@ -83,50 +118,93 @@ const HeaderMenu = ({
|
||||
background: none;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
&:hover {
|
||||
background: none !important;
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items,
|
||||
onClick(info) {
|
||||
const s = schema.properties?.[info.key];
|
||||
if (!s) {
|
||||
return;
|
||||
}
|
||||
if (mode === 'mix') {
|
||||
if (s['x-component'] !== 'Menu.SubMenu') {
|
||||
onSelect?.(info);
|
||||
} else {
|
||||
const menuItemSchema = findMenuItem(s);
|
||||
if (!menuItemSchema) {
|
||||
return onSelect?.(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?.(info);
|
||||
}
|
||||
},
|
||||
<Popover
|
||||
placement="bottom"
|
||||
arrow={false}
|
||||
content={() => {
|
||||
return (
|
||||
<Card
|
||||
className={css`
|
||||
border: none;
|
||||
max-width: 21rem;
|
||||
`}
|
||||
>
|
||||
{items?.map((item) => {
|
||||
const { icon, field, Designer, schema, styles } = item?.menu || {};
|
||||
return (
|
||||
<Card.Grid
|
||||
style={{
|
||||
display: 'block',
|
||||
color: 'inherit',
|
||||
padding: token.marginSM,
|
||||
boxShadow: 'none',
|
||||
width: '7rem',
|
||||
height: '5rem',
|
||||
}}
|
||||
className={itemStyle.menuItem}
|
||||
key={item.key}
|
||||
onClick={() => {
|
||||
onClick(item);
|
||||
}}
|
||||
>
|
||||
{item.menu ? (
|
||||
<SchemaContext.Provider value={schema}>
|
||||
<FieldContext.Provider value={field}>
|
||||
<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 }} />} />
|
||||
</Dropdown>
|
||||
<Button className="iconButton" icon={<AppstoreOutlined style={{ color: token.colorTextHeaderMenu }} />} />
|
||||
</Popover>
|
||||
<Component />
|
||||
</div>
|
||||
</div>
|
||||
@ -358,6 +436,7 @@ Menu.Item = observer(
|
||||
key: schema.name,
|
||||
eventKey: schema.name,
|
||||
schema,
|
||||
menu: { icon, field, Designer, schema, styles },
|
||||
label: (
|
||||
<SchemaContext.Provider value={schema}>
|
||||
<FieldContext.Provider value={field}>
|
||||
@ -423,6 +502,7 @@ Menu.URL = observer(
|
||||
onClick: () => {
|
||||
window.open(props.href, '_blank');
|
||||
},
|
||||
menu: { icon, field, Designer, schema, styles },
|
||||
label: (
|
||||
<SchemaContext.Provider value={schema}>
|
||||
<FieldContext.Provider value={field}>
|
||||
@ -474,6 +554,7 @@ Menu.SubMenu = observer(
|
||||
className: styles.menuItemClass,
|
||||
key: schema.name,
|
||||
eventKey: schema.name,
|
||||
menu: { icon, field, Designer, schema, styles },
|
||||
label: (
|
||||
<SchemaContext.Provider value={schema}>
|
||||
<FieldContext.Provider value={field}>
|
||||
|
||||
@ -22505,7 +22505,6 @@ packages:
|
||||
|
||||
/glob@5.0.15:
|
||||
resolution: {integrity: sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==}
|
||||
deprecated: Glob versions prior to v9 are no longer supported
|
||||
dependencies:
|
||||
inflight: 1.0.6
|
||||
inherits: 2.0.4
|
||||
@ -22528,7 +22527,6 @@ packages:
|
||||
|
||||
/glob@7.1.7:
|
||||
resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
|
||||
deprecated: Glob versions prior to v9 are no longer supported
|
||||
dependencies:
|
||||
fs.realpath: 1.0.0
|
||||
inflight: 1.0.6
|
||||
|
||||
Loading…
Reference in New Issue
Block a user