fix: 修复 #1300 #1274 #1062 #1303

packages/devui-vue/devui/mention/src/mention.tsx

@@ -63,7 +63,7 @@ export default defineComponent({
       e.stopPropagation();
       e.preventDefault();
       showSuggestions.value = false;
-      textContext.value += item[props.dmValueParse.value as keyof IMentionSuggestionItem];
+      textContext.value = textContext.value.substring(0, 1) + item[props.dmValueParse.value as keyof IMentionSuggestionItem];
     };
 
     const arrowKeyDown = (e: KeyboardEvent) => {
@@ -98,7 +98,9 @@ export default defineComponent({
           e.stopPropagation();
           e.preventDefault();
           showSuggestions.value = false;
-          textContext.value += filteredSuggestions.value[currentIndex.value][props.dmValueParse.value as keyof IMentionSuggestionItem];
+          textContext.value =
+            textContext.value.substring(0, 1) +
+            filteredSuggestions.value[currentIndex.value][props.dmValueParse.value as keyof IMentionSuggestionItem];
           emit('select', filteredSuggestions.value[currentIndex.value]);
         }
       }

packages/devui-vue/devui/modal/src/modal.scss

@@ -45,13 +45,14 @@
     align-items: center;
 
     &-icon {
-      display: inline-block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       vertical-align: middle;
       margin-right: 8px;
       width: 24px;
       height: 24px;
       line-height: 16px;
-      text-align: center;
     }
 
     &-text {

packages/devui-vue/devui/select/src/use-select.ts

@@ -131,7 +131,7 @@ export default function useSelect(
         const newOption = {
           name: value,
           value: value,
-          _checked: false,
+          _checked: true,
         };
         return value ? newOption : option;
       } else {
@@ -236,7 +236,7 @@ export default function useSelect(
   const tagDelete = (data: OptionObjectItem) => {
     let { modelValue } = props;
     const checkedItems = [];
-    for (const child of injectOptions.value.values()) {
+    for (const child of selectedOptions.value) {
       if (data.value === child.value) {
         child._checked = false;
       }

packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.scss

@@ -293,6 +293,16 @@ $devui-tab-slider-bg: $devui-list-item-hover-bg;
   align-items: center;
   list-style: none;
   padding-left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  user-select: none;
+  // 隐藏滚动条
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   li {
     a {

packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.tsx

@@ -1,4 +1,17 @@
-import { computed, defineComponent, inject, onBeforeMount, onMounted, onUpdated, reactive, SetupContext, shallowRef, watch } from 'vue';
+import {
+  computed,
+  defineComponent,
+  inject,
+  onBeforeMount,
+  onMounted,
+  onUpdated,
+  onUnmounted,
+  reactive,
+  SetupContext,
+  shallowRef,
+  watch,
+  nextTick,
+} from 'vue';
 import { TabsData, tabsProps, TabsProps, TabsStateData } from '../../tabs-types';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 import { useTabNavRender } from './composables/use-tab-nav-render';
@@ -21,9 +34,60 @@ export default defineComponent({
     const { update, beforeMount, mounted, activeClick, tabCanClose } = useTabNavFunction(props, tabs, tabsList, data, ctx, tabsEle);
     const { onTabRemove, onTabAdd } = useTabNavEvent(ctx);
 
+    // 添加新的tab选项
+    const handleTabAdd = () => {
+      onTabAdd();
+      nextTick(() => {
+        // 使每次添加新tab后，滚动条都在最右侧
+        if (tabsEle.value) {
+          tabsEle.value.scrollLeft = tabsEle.value.scrollWidth;
+        }
+      });
+    };
+
+    // 鼠标是否在滑动
+    let isSlide = false;
+    // tab滑动
+    const handleSlideTab = (mousedownEvent: MouseEvent) => {
+      if (tabsEle.value) {
+        // 鼠标按下x坐标
+        const mousedownX = mousedownEvent.clientX;
+        // 当前滚动条距离
+        const scrollLeft = tabsEle.value.scrollLeft;
+        isSlide = true;
+        // 监听鼠标滑动
+        tabsEle.value.addEventListener('mousemove', (mousemoveEvent: MouseEvent) => {
+          if (isSlide && tabsEle.value) {
+            // 当前鼠标移动x坐标
+            const mousemoveX = mousemoveEvent.clientX;
+            // 滑动距离
+            const scrollWidth = mousemoveX - mousedownX;
+            tabsEle.value.scrollLeft = scrollLeft - scrollWidth;
+          }
+        });
+        tabsEle.value.addEventListener('mouseup', () => {
+          isSlide = false;
+        });
+        tabsEle.value.addEventListener('mouseleave', () => {
+          isSlide = false;
+        });
+      }
+    };
+
     onUpdated(() => update());
     onBeforeMount(() => beforeMount());
-    onMounted(() => mounted());
+    onMounted(() => {
+      mounted();
+      // tab超出容器后监听滑动
+      if (tabsEle.value) {
+        tabsEle.value.addEventListener('mousedown', handleSlideTab);
+      }
+    });
+    onUnmounted(() => {
+      if (tabsEle.value) {
+        tabsEle.value.removeEventListener('mousedown', handleSlideTab);
+      }
+    });
 
     watch(
       () => props.modelValue,
@@ -44,7 +108,7 @@ export default defineComponent({
         ) : null;
       };
       const newButton = props.addable ? (
-        <li class={ns.e('new-tab')} onClick={onTabAdd}>
+        <li class={ns.e('new-tab')} onClick={handleTabAdd}>
           <d-icon name="add"></d-icon>
         </li>
       ) : null;