From f5e9d2df450d2f917620fabf0074f847a9bbbe54 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 21 Mar 2024 14:28:12 +0800
Subject: [PATCH] docs: fix Menu ellipsis style (#47997)

---
 .dumi/hooks/useMenu.tsx | 91 ++++++++++++++++++++++++++---------------
 1 file changed, 59 insertions(+), 32 deletions(-)

diff --git a/.dumi/hooks/useMenu.tsx b/.dumi/hooks/useMenu.tsx
index ac1bbf8870..39232c994d 100644
--- a/.dumi/hooks/useMenu.tsx
+++ b/.dumi/hooks/useMenu.tsx
@@ -6,19 +6,50 @@ import { useFullSidebarData, useSidebarData } from 'dumi';
 import Link from '../theme/common/Link';
 import useLocation from './useLocation';
 
-const ItemTag: React.FC<{ tag?: string; show?: boolean }> = (props) => {
-  const { tag, show = true } = props;
-  if (!show || !tag) {
-    return null;
+const MenuItemLabelWithTag: React.FC<{
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+  link: string;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  search?: string;
+  tag?: string;
+  className?: string;
+}> = ({ before, after, link, title, subtitle, search, tag = '', className }) => {
+  if (!before && !after) {
+    return (
+      <Link
+        to={`${link}${search}`}
+        style={
+          tag
+            ? { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }
+            : undefined
+        }
+        className={className}
+      >
+        <span>
+          {title}
+          {subtitle && <span className="chinese">{subtitle}</span>}
+        </span>
+        {tag && (
+          <Tag
+            bordered={false}
+            color={tag === 'New' ? 'success' : 'processing'}
+            style={{ marginBlockEnd: 0 }}
+          >
+            {tag.replace('VERSION', version)}
+          </Tag>
+        )}
+      </Link>
+    );
   }
   return (
-    <Tag
-      bordered={false}
-      color={tag === 'New' ? 'success' : 'processing'}
-      style={{ marginInlineStart: 'auto', marginInlineEnd: 0, marginTop: -2 }}
-    >
-      {tag.replace('VERSION', version)}
-    </Tag>
+    <Link to={`${link}${search}`} className={className}>
+      {before}
+      {title}
+      {subtitle && <span className="chinese">{subtitle}</span>}
+      {after}
+    </Link>
   );
 };
 
@@ -120,18 +151,15 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
               key: group?.title,
               children: group.children?.map((item) => ({
                 label: (
-                  <Link
-                    to={`${item.link}${search}`}
-                    style={{ display: 'flex', alignItems: 'center' }}
-                  >
-                    {before}
-                    <span key="english">{item?.title}</span>
-                    <span className="chinese" key="chinese">
-                      {item.frontmatter?.subtitle}
-                    </span>
-                    <ItemTag tag={item.frontmatter?.tag} show={!before && !after} />
-                    {after}
-                  </Link>
+                  <MenuItemLabelWithTag
+                    before={before}
+                    after={after}
+                    link={item.link}
+                    title={item?.title}
+                    subtitle={item.frontmatter?.subtitle}
+                    search={search}
+                    tag={item.frontmatter?.tag}
+                  />
                 ),
                 key: item.link.replace(/(-cn$)/g, ''),
               })),
@@ -146,15 +174,14 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
           result.push(
             ...list.map((item) => ({
               label: (
-                <Link
-                  to={`${item.link}${search}`}
-                  style={{ display: 'flex', alignItems: 'center' }}
-                >
-                  {before}
-                  {item?.title}
-                  <ItemTag tag={item.frontmatter?.tag} show={!before && !after} />
-                  {after}
-                </Link>
+                <MenuItemLabelWithTag
+                  before={before}
+                  after={after}
+                  link={item.link}
+                  title={item?.title}
+                  search={search}
+                  tag={item.frontmatter?.tag}
+                />
               ),
               key: item.link.replace(/(-cn$)/g, ''),
             })),