fix(全局): 脑图组件&菜单组件问题修复

frontend/src/components/business/ms-menu/index.vue

@@ -376,7 +376,10 @@
             }}
           >
             <a-menu-item
-              class={['flex w-full items-center justify-between', collapsed.value ? 'h-[56px] w-[56px]' : '']}
+              class={[
+                'flex w-full items-center justify-between overflow-hidden',
+                collapsed.value ? 'h-[56px] w-[56px]' : '',
+              ]}
               key="personalInfo"
             >
               {
@@ -384,14 +387,14 @@
                   class={[
                     collapsed.value
                       ? 'relative flex h-full items-center justify-center hover:!bg-transparent'
-                      : 'relative flex items-center gap-[8px] hover:!bg-transparent',
+                      : 'relative flex flex-1 items-center gap-[8px] overflow-hidden hover:!bg-transparent',
                   ]}
                 >
-                  <MsAvatar is-user size={20} class="!mr-0 hover:!bg-transparent" />
-                  {collapsed.value ? null : userStore.name}
+                  <MsAvatar is-user size={20} class="!mr-0 w-[20px] hover:!bg-transparent" />
+                  <div class="one-line-text flex-1">{collapsed.value ? null : userStore.name}</div>
                 </div>
               }
-              {collapsed.value ? null : <icon-caret-down class="!m-0" />}
+              {collapsed.value ? null : <icon-caret-down class="!m-0 w-[16px]" />}
             </a-menu-item>
           </a-trigger>
         );

frontend/src/components/pure/ms-minder-editor/main/mainEditor.vue

@@ -9,13 +9,15 @@
     <Navigator />
     <div
       v-if="currentTreePath?.length > 0"
-      class="absolute left-[50%] top-[24px] z-50 translate-x-[-50%] bg-white p-[8px]"
+      class="absolute left-[50%] top-[16px] z-[9] w-[60%] translate-x-[-50%] overflow-hidden bg-white p-[8px]"
     >
-      <a-breadcrumb>
-        <a-breadcrumb-item v-for="crumb of currentTreePath" :key="crumb.name" @click="switchNode(crumb)">
-          {{ crumb.text }}
-        </a-breadcrumb-item>
-      </a-breadcrumb>
+      <a-menu v-model:selected-keys="selectedBreadcrumbKeys" mode="horizontal" class="ms-minder-breadcrumb">
+        <a-menu-item v-for="(crumb, i) of currentTreePath" :key="crumb.id" @click="switchNode(crumb, i)">
+          <a-tooltip :content="crumb.text" :mouse-enter-delay="300">
+            <div class="one-line-text">{{ crumb.text }}</div>
+          </a-tooltip>
+        </a-menu-item>
+      </a-menu>
     </div>
     <nodeFloatMenu
       v-if="props.canShowFloatMenu"
@@ -160,12 +162,19 @@
     return innerImportJson.value.treePath?.filter((e, i) => i <= index) || [];
   }
 
+  const selectedBreadcrumbKeys = computed({
+    get: () => [currentTreePath.value[currentTreePath.value.length - 1]?.id],
+    set: (val) => {
+      return val;
+    },
+  });
+
   /**
    * 切换脑图展示的节点层级
    * @param node 切换的节点
    */
-  async function switchNode(node?: MinderJsonNode | MinderJsonNodeData) {
-    if (!props.minderKey) return;
+  async function switchNode(node?: MinderJsonNode | MinderJsonNodeData, index?: number) {
+    if (!props.minderKey || index === currentTreePath.value.length - 1) return;
     if (minderStore.minderUnsaved) {
       // 切换前，如果脑图未保存，先把更改的节点信息同步一次
       replaceNodeInTree(
@@ -275,6 +284,7 @@
 </script>
 
 <style lang="less">
+  @import '@/assets/icon-font/iconfont.css';
   @import '../style/editor.less';
   .save-btn {
     @apply !absolute;
@@ -287,4 +297,47 @@
       max-height: none;
     }
   }
+  .ms-minder-breadcrumb {
+    @apply bg-white p-0;
+    .arco-menu-inner {
+      @apply bg-white p-0;
+      .arco-menu-item {
+        @apply relative p-0;
+
+        padding-right: 24px;
+        max-width: 200px;
+        &:hover {
+          color: rgb(var(--primary-4));
+        }
+        &:not(:last-child)::after {
+          @apply absolute;
+
+          top: 50%;
+          right: 7px;
+          font-size: 12px;
+          font-family: iconfont;
+          content: '\e6d5';
+          color: var(--color-text-brand);
+          line-height: 16px;
+          transform: translateY(-50%);
+        }
+      }
+      .arco-menu-item,
+      .arco-menu-overflow-sub-menu {
+        @apply ml-0 bg-white;
+
+        color: var(--color-text-4);
+      }
+      .arco-menu-selected {
+        color: rgb(var(--primary-4));
+        &:hover {
+          @apply !bg-white;
+        }
+      }
+      .arco-menu-pop::after,
+      .arco-menu-selected-label {
+        @apply hidden;
+      }
+    }
+  }
 </style>

frontend/src/views/setting/system/user/index.vue

@@ -362,6 +362,7 @@
       title: 'system.user.tableColumnPhone',
       dataIndex: 'phone',
       showDrag: true,
+      showTooltip: true,
       width: 140,
     },
     {