diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx index 024725def..14725ed95 100644 --- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx +++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx @@ -91,7 +91,7 @@ const WorkspaceDetail: React.FC = () => { key: 'environments', title: ( - Environments + Environments ), onClick: () => history.push("/setting/environments") @@ -100,7 +100,7 @@ const WorkspaceDetail: React.FC = () => { key: 'environment', title: ( - {environment.environmentName} + {environment.environmentName} ), onClick: () => history.push(`/setting/environments/${environment.environmentId}`) diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx index fb9e7f70b..9d0621458 100644 --- a/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx +++ b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx @@ -1,6 +1,8 @@ import React, { ReactNode } from 'react'; -import { Breadcrumb } from 'antd'; +import { default as AntdBreadcrumb } from 'antd/es/breadcrumb'; import { BreadcrumbProps } from 'antd/lib/breadcrumb'; +import styled from 'styled-components'; +import { ArrowIcon } from 'lowcoder-design'; interface ModernBreadcrumbsProps extends Omit { /** @@ -13,56 +15,52 @@ interface ModernBreadcrumbsProps extends Omit { }[]; } -/** - * Modern styled breadcrumb component with consistent styling - */ +const Breadcrumb = styled(AntdBreadcrumb)` + margin-bottom: 10px; + font-size: 20px; + li:not(:last-child) { + color: #8b8fa3; + } + + li:last-child { + font-weight: 500; + color: #222222; + } + + li.ant-breadcrumb-separator { + display: flex; + flex-direction: column; + justify-content: center; + } +`; + +const BreadcrumbItem = styled.div` + cursor: pointer; +`; + + const ModernBreadcrumbs: React.FC = ({ items = [], ...props }) => { - // Convert custom items format to Antd's expected format + // Convert custom items format to the standard format used throughout the application const breadcrumbItems = items.map(item => ({ key: item.key, - title: item.onClick ? ( - { - e.currentTarget.style.color = '#096dd9'; - e.currentTarget.style.textDecoration = 'underline'; - }} - onMouseLeave={(e) => { - e.currentTarget.style.color = '#1890ff'; - e.currentTarget.style.textDecoration = 'none'; - }} - > - {item.title} - - ) : ( - - {item.title} - - ) + title: item.title, + onClick: item.onClick })); return ( -

- /} - items={breadcrumbItems} - /> -

+ } + items={breadcrumbItems} + itemRender={(item) => ( + + {item.title} + + )} + /> ); }; pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: