fix

src/components/HorizontalListWrapper/index.vue

@@ -47,8 +47,8 @@ import {
   useScroll,
 } from "@vueuse/core";
 
-const isTightlyConnectedToLeft = ref(false);
-const isTightlyConnectedToRight = ref(false);
+const isTightlyConnectedToLeft = ref(true);
+const isTightlyConnectedToRight = ref(true);
 const containerRef = ref<Element | null>(null);
 
 useMutationObserver(

src/components/Menu/syMenu.vue

+<template>
+  <ElMenu
+    class="syMenu"
+    mode="horizontal"
+    @select="handleSelect"
+    :default-active="defaultModelValue"
+    background-color="#ffff"
+    :text-color="textColor"
+    :active-text-color="activeTextColor"
+  >
+    <ElMenuItem
+      v-for="(menu, index) in menuList"
+      :key="menu.value"
+      :index="menu.value"
+    >
+      <div
+        :style="{
+          fontWeight:
+            modelValue === menu.value ? activeTextFontWeight : textFontWeight,
+        }"
+      >
+        <ElTooltip
+          :content="menu.label"
+          placement="top"
+          :disabled="menu.label.length <= 5"
+        >
+          {{
+            menu.label.length > 5 ? menu.label.slice(0, 5) + "..." : menu.label
+          }}
+        </ElTooltip>
+      </div>
+      <div
+        class="line short"
+        :style="{
+          backgroundColor:
+            modelValue === menu.value ? activeTextColor : 'transparent',
+        }"
+        v-if="index === 0 || index === menuList.length - 1"
+      ></div>
+      <div
+        class="line"
+        :style="{
+          backgroundColor:
+            modelValue === menu.value ? activeTextColor : 'transparent',
+        }"
+        v-else
+      ></div>
+    </ElMenuItem>
+  </ElMenu>
+</template>
+
+<script setup lang="ts">
+import { ElMenu, ElMenuItem, ElTooltip } from "element-plus";
+const props = withDefaults(
+  defineProps<{
+    menuList: {
+      value: any;
+      label: string;
+    }[];
+    modelValue: any;
+    textColor?: string;
+    activeTextColor?: string;
+    textFontWeight?: number;
+    activeTextFontWeight?: number;
+    maxStrNum?: number;
+  }>(),
+  {
+    textColor: "var(--sy-black)",
+    activeTextColor: "var(--sy-blue)",
+    textFontWeight: 500,
+    activeTextFontWeight: 500,
+    maxStrNum: 10,
+  }
+);
+// eslint-disable-next-line vue/no-setup-props-destructure
+const defaultModelValue = props.modelValue;
+const emit = defineEmits(["update:modelValue"]);
+const handleSelect = (k: any) => {
+  emit("update:modelValue", k);
+};
+
+const getLineWidth = (index: number, length: number) => {
+  if (index === 0 || index === length - 1) {
+    return "calc(100% - 24px)" as any;
+  } else {
+    return "calc(100% - 38px)" as any;
+  }
+};
+</script>
+
+<style lang="scss">
+.syMenu.el-menu {
+  border-bottom: 0;
+}
+.syMenu {
+  .el-menu-item.is-active {
+    border-bottom: 0px;
+    .line {
+      background-color: var(--sy-blue);
+    }
+  }
+  .el-menu-item {
+    border-bottom: 0;
+    padding-left: 14px;
+    padding-right: 14px;
+    &:first-of-type {
+      padding-left: 0;
+    }
+    &:last-of-type {
+      padding-right: 0;
+    }
+  }
+  .line.short {
+    width: calc(100% - 24px);
+  }
+  .line {
+    position: absolute;
+    bottom: 0;
+    width: calc(100% - 38px);
+    min-width: 10px;
+    height: 2px;
+  }
+}
+.syMenu.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
+.syMenu.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+  background-color: transparent;
+}
+</style>

src/views/TemplateManagement/index.vue

@@ -183,7 +183,6 @@ import {
   syMoreOperate,
   syMessage,
   syCommonDialog,
-  syMenu,
 } from "cqk-sy-ui";
 import Search from "@/components/Search/index.vue";
 import Layout from "@/components/Layout.vue";
@@ -206,6 +205,7 @@ import EditCategoryDialog from "./components/EditCategoryDialog/index.vue";
 import { watchStrChangeDebounceTime } from "@/config/time";
 import { router } from "@/router";
 import { useRoute } from "vue-router";
+import syMenu from "@/components/Menu/syMenu.vue";
 
 const route = useRoute();
 const addTemplateRef = ref<any>();