fix(editor): 修复组件名超长不省略的问题

packages/editor/src/fields/UISelect.vue

@@ -8,6 +8,7 @@
     <template v-if="val">
       <TMagicTooltip v-if="!isCompare" content="清除" placement="top">
         <TMagicButton
+          class="m-fields-ui-select__clear"
           style="padding: 0"
           type="danger"
           :icon="Close"
@@ -20,6 +21,7 @@
 
       <TMagicTooltip content="点击选中组件" placement="top">
         <TMagicButton
+          class="m-fields-ui-select__name"
           link
           style="padding: 0; margin: 0"
           :disabled="disabled"
@@ -27,7 +29,7 @@
           @click="selectNode(val)"
           @mouseenter="highlight(val)"
           @mouseleave="unhighlight"
-          >{{ `${toName}_${val}` }}</TMagicButton
+          ><span class="m-fields-ui-select__label">{{ `${toName}_${val}` }}</span></TMagicButton
         >
       </TMagicTooltip>
     </template>

packages/editor/src/theme/ui-select.scss

@@ -1,9 +1,40 @@
 .m-fields-ui-select {
   cursor: pointer;
+  min-width: 0;
+  max-width: 100%;
+
   i {
     margin-right: 3px;
   }
   span {
     color: var(--el-color-primary, #2882e0);
   }
+
+  .m-fields-ui-select__clear {
+    flex: none;
+  }
+
+  .m-fields-ui-select__name {
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+
+    // 按钮组件会把默认插槽再包一层 span，解除它的最小宽度后文案才能收缩打点
+    > span,
+    .t-button__text {
+      display: block;
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+
+  .m-fields-ui-select__label {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+  }
 }

packages/editor/tests/unit/fields/UISelect.spec.ts

@@ -32,11 +32,12 @@ vi.mock('@tmagic/design', () => ({
     name: 'TMagicButton',
     props: ['type', 'icon', 'disabled', 'size', 'link'],
     emits: ['click', 'mouseenter', 'mouseleave'],
-    setup(_p, { emit, slots }) {
+    setup(_p, { attrs, emit, slots }) {
       return () =>
         h(
           'button',
           {
+            class: attrs.class,
             onClick: (e: Event) => emit('click', e),
             onMouseenter: () => emit('mouseenter'),
             onMouseleave: () => emit('mouseleave'),
@@ -79,6 +80,16 @@ describe('UISelect', () => {
     expect(wrapper.html()).toContain('name_n1_n1');
   });
 
+  test('组件名超长时保留完整文案并交给样式打点', () => {
+    const longName = '弹窗-团被抢走了_26714348';
+    editorService.getNodeById.mockReturnValueOnce({ name: longName });
+    const wrapper = mount(UISelect, { props: baseProps({ model: { to: 'n1' } }) as any });
+
+    expect(wrapper.find('.m-fields-ui-select__clear').exists()).toBe(true);
+    expect(wrapper.find('.m-fields-ui-select__name').exists()).toBe(true);
+    expect(wrapper.find('.m-fields-ui-select__label').text()).toBe(`${longName}_n1`);
+  });
+
   test('startSelect 启用 uiSelectMode 并注册事件', async () => {
     const addSpy = vi.spyOn(globalThis.document, 'addEventListener');
     const wrapper = mount(UISelect, { props: baseProps() as any });
@@ -88,6 +99,16 @@ describe('UISelect', () => {
     addSpy.mockRestore();
   });
 
+  test('选中组件后回写 id 并退出选择模式', async () => {
+    const wrapper = mount(UISelect, { props: baseProps() as any });
+    await wrapper.find('button').trigger('click');
+
+    globalThis.document.dispatchEvent(new CustomEvent('ui-select', { detail: { id: 'n2' } }));
+
+    expect(wrapper.emitted('change')?.[0]?.[0]).toBe('n2');
+    expect(uiService.set).toHaveBeenLastCalledWith('uiSelectMode', false);
+  });
+
   test('cancelHandler 关闭 uiSelectMode', async () => {
     const removeSpy = vi.spyOn(globalThis.document, 'removeEventListener');
     const wrapper = mount(UISelect, { props: baseProps() as any });