source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

site: use css logical attributes (#56388)

Browse Source 
Co-authored-by: 遇见同学 <1875694521@qq.com>
This commit is contained in:
lijianan
2025-12-27 18:12:05 +08:00
committed by GitHub
parent dbf71b5059
commit 39b7edd337
2 changed files with 36 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.dumi/hooks/useMenu.tsx
View File

@@ -46,7 +46,7 @@ const useStyle = createStyles(({ css, cssVar }) => ({
font-weight: normal;
font-size: ${cssVar.fontSizeSM};
opacity: 0.8;
margin-left: 4px;
margin-inline-start: ${cssVar.marginSM};
`,
}));
@@ -66,6 +66,7 @@ const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
const { before, after, link, title, subtitle, search, tag, className } = props;
const [locale] = useLocale(locales);
const getLocale = (name: string) => {
return (locale as any)[name.toLowerCase()] ?? name;
};
@@ -73,7 +74,7 @@ const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
if (!before && !after) {
return (
<Link to={`${link}${search}`} className={clsx(className, { [styles.link]: tag })}>
<Flex justify="flex-start" align="center" gap="small">
<Flex justify="flex-start" align="center">
<span>{title}</span>
{subtitle && <span className={styles.subtitle}>{subtitle}</span>}
</Flex>

71
.dumi/theme/common/BehaviorMap/useMermaidCode.ts
View File

@@ -2,50 +2,45 @@ import { useMemo } from 'react';
import type { BehaviorMapItem } from './BehaviorMap';
export const useMermaidCode = (data: BehaviorMapItem): string => {
const generateMermaidCode = (root: BehaviorMapItem): string => {
const lines: string[] = [];
const generateMermaidCode = (root: BehaviorMapItem) => {
const lines: string[] = [];
lines.push('graph LR');
lines.push('graph LR');
lines.push(`classDef baseNode fill:#fff,stroke:none,stroke-width:0px,rx:5,ry:5,font-size:14px`);
lines.push(`classDef baseNode fill:#fff,stroke:none,stroke-width:0px,rx:5,ry:5,font-size:14px`);
const traverse = (node: BehaviorMapItem, parentId?: string) => {
const safeId = `node_${node.id.replace(/[^a-z0-9]/gi, '_')}`;
let labelText = node.label.replace(/"/g, "'");
const traverse = (node: BehaviorMapItem, parentId?: string) => {
const safeId = `node_${node.id.replace(/[^a-z0-9]/gi, '_')}`;
let labelText = node.label.replace(/"/g, "'");
if (!parentId) {
lines.push(`style ${safeId} font-size:16px`);
labelText = `**${labelText}**`;
} else if (node.targetType === 'mvp') {
const blueDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(22, 119, 255);border-radius:50%;margin-right:8px;vertical-align:middle;"></span>`;
labelText = `${blueDot}${labelText}`;
} else if (node.targetType === 'extension') {
const grayDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(160, 160, 160);border-radius:50%;margin-right:8px;vertical-align:middle;"></span>`;
labelText = `${grayDot}${labelText}`;
}
lines.push(`${safeId}["${labelText}"]:::baseNode`);
if (!parentId) {
lines.push(`style ${safeId} font-size:16px`);
labelText = `**${labelText}**`;
} else if (node.targetType === 'mvp') {
const blueDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(22, 119, 255);border-radius:50%;margin-inline-end:8px;vertical-align:middle;"></span>`;
labelText = `${blueDot}${labelText}`;
} else if (node.targetType === 'extension') {
const grayDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(160, 160, 160);border-radius:50%;margin-inline-end:8px;vertical-align:middle;"></span>`;
labelText = `${grayDot}${labelText}`;
}
lines.push(`${safeId}["${labelText}"]:::baseNode`);
if (node.link) {
lines.push(`click ${safeId} "#${node.link}"`);
}
if (node.link) {
lines.push(`click ${safeId} "#${node.link}"`);
}
if (parentId) {
lines.push(`${parentId} --> ${safeId}`);
}
if (parentId) {
lines.push(`${parentId} --> ${safeId}`);
}
if (node.children && node.children.length > 0) {
node.children.forEach((child) => traverse(child, safeId));
}
};
traverse(root);
return lines.join('\n');
if (node.children && node.children.length > 0) {
node.children.forEach((child) => traverse(child, safeId));
}
};
const mermaidCode = useMemo(() => {
return generateMermaidCode(data);
}, [data]);
return mermaidCode;
traverse(root);
return lines.join('\n');
};
export const useMermaidCode = (data: BehaviorMapItem) => {
return useMemo(() => generateMermaidCode(data), [data]);
};