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>

packages/core/client/src/schema-component/antd/menu/Menu.styles.ts

@@ -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;
+      }
+    `,
   };
 });

packages/core/client/src/schema-component/antd/menu/Menu.tsx

@@ -11,8 +11,8 @@ import {
 } from '@tachybase/schema';
 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 { 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
+        <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 />
       </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}>

pnpm-lock.yaml

@@ -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