site: use css logical attributes (ant-design#56388)

Co-authored-by: 遇见同学 <1875694521@qq.com>

Author: li-jia-nan

.dumi/hooks/useMenu.tsx

@@ -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,14 +66,15 @@ 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;
   };
 
   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>

.dumi/theme/common/BehaviorMap/useMermaidCode.ts

@@ -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[] = [];
-
-    lines.push('graph LR');
-
-    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, "'");
-
-      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 (node.link) {
-        lines.push(`click ${safeId} "#${node.link}"`);
-      }
-
-      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');
+const generateMermaidCode = (root: BehaviorMapItem) => {
+  const lines: string[] = [];
+
+  lines.push('graph LR');
+
+  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, "'");
+
+    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 (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');
+};
 
-  const mermaidCode = useMemo(() => {
-    return generateMermaidCode(data);
-  }, [data]);
-
-  return mermaidCode;
+export const useMermaidCode = (data: BehaviorMapItem) => {
+  return useMemo(() => generateMermaidCode(data), [data]);
 };