菜单长按、箭头状态、背景

src/layout/components/AppMain.vue

@@ -36,7 +36,7 @@ function addIframe() {
 <style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  min-height: 100vh;
   width: 100%;
   position: relative;
   overflow: auto;

src/layout/components/Sidebar/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div :class="{ 'has-logo': showLogo }">
     <div class="sidebar_box_bottom">
-      <div class="arrow-icon_left" @click="arrowBack">
-        <el-icon size="60" color="#0077fa">
+      <div class="arrow-icon_left" @click="arrowBack" @mousedown="handleMouseDown" @mouseup="handleMouseUp">
+        <el-icon size="60" :color="getShowLeft ? '#0077fa' : 'rgb(0, 51, 115)'">
           <ArrowLeft />
         </el-icon>
         <div class="white_box_left">
-          <el-icon size="30" color="#ffffff">
+          <el-icon size="30" :color="getShowLeft ? '#ffffff' : 'rgb(87, 94, 113)'">
             <ArrowLeftBold />
           </el-icon>
         </div>
         <div class="white_box_left_il">
-          <el-icon size="22" color="rgb(25, 148, 219)">
+          <el-icon size="22" :color="getShowLeft ? 'rgb(25, 148, 219)' : 'rgb(10, 61, 105)'">
             <CaretLeft />
           </el-icon>
         </div>
@@ -43,17 +43,18 @@
           </div>
         </div>
       </div>
-      <div class="arrow-icon_right" @click="arrowForward">
-        <el-icon size="60" color="#0077fa">
+      <div class="arrow-icon_right" @click="arrowForward" @mousedown="handleMouseDownRight"
+        @mouseup="handleMouseUpRight">
+        <el-icon size="60" :color="getShowRight ? '#0077fa' : 'rgb(0, 51, 115)'">
           <ArrowRight />
         </el-icon>
         <div class="white_box">
-          <el-icon size="30" color="#ffffff">
+          <el-icon size="30" :color="getShowRight ? '#ffffff' : 'rgb(87, 94, 113)'">
             <ArrowRightBold />
           </el-icon>
         </div>
         <div class="white_box_il">
-          <el-icon size="22" color="rgb(25, 148, 219)">
+          <el-icon size="22" :color="getShowRight ? 'rgb(25, 148, 219)' : 'rgb(10, 61, 105)'">
             <CaretRight />
           </el-icon>
         </div>
@@ -91,6 +92,26 @@ const sideTheme = computed(() => settingsStore.sideTheme);
 const theme = computed(() => settingsStore.theme);
 const isCollapse = computed(() => !appStore.sidebar.opened);
 
+const getShowLeft = computed(() => {
+  if (tabScroll.value == 0) {
+    return false
+  } else {
+    return true
+  }
+});
+const getShowRight = computed(() => {
+  // 内容的宽度
+  if (scrollWrapper.value) {
+    let navSize = scrollWrapper.value.scrollWidth;
+    let boxWidth = tagBox.value.scrollWidth
+    let width = navSize - boxWidth
+    if (tabScroll.value == width) {
+      return false
+    } else {
+      return true
+    }
+  }
+});
 // 获取菜单背景色
 const getMenuBackground = computed(() => {
   if (settingsStore.isDark) {
@@ -131,16 +152,17 @@ function iconName(iconClass) {
 
 function goBack(event) {
   let path = '/system/' + event
-  console.log(event, 222);
   if (event == "/") {
     router.push("/index");
   } else {
     router.push({ path: path || "/" });
   }
 }
+const timeTag = ref(null)
+const isLongPress = ref(false);
 // 向右
 function arrowBack() {
-  if (tabScroll.value > 0) {
+  if (tabScroll.value > 0 && !isLongPress.value) {
     let diffWidth = tabScroll.value - 100;
     if (diffWidth > 100) {
       tabScroll.value = diffWidth;
@@ -150,34 +172,83 @@ function arrowBack() {
     scrollWrapper.value.scrollLeft = tabScroll.value
   }
 }
+function handleMouseDown() {
+  timeTag.value = setInterval(() => {
+    isLongPress.value = true;
+    handleLongPress();
+  }, 100)
+}
+function handleMouseUp() {
+  clearInterval(timeTag.value)
+  if (!isLongPress.value) {
+    arrowBack(); // 如果不是长按，则处理点击逻辑
+  }
+  tabScroll.value = tabScroll.value + 100
+  isLongPress.value = false
+}
+function handleLongPress() {
+  if (tabScroll.value > 0) {
+    let diffWidth = tabScroll.value - 10;
+    if (diffWidth > 10) {
+      tabScroll.value = diffWidth;
+    } else {
+      tabScroll.value = 0;// 否则移动到开始位置
+    }
+    scrollWrapper.value.scrollLeft = tabScroll.value
+  }
+}
 // 向左
+const timeTagil = ref(null)
+const isLongPressil = ref(false);
 function arrowForward() {
   let scrollWidth = scrollWrapper.value.scrollWidth; //内容宽度
   let boxWidth = tagBox.value.scrollWidth
-  if (tabScroll.value < (scrollWidth - boxWidth)) {
+  if (tabScroll.value < (scrollWidth - boxWidth) && !isLongPressil.value) {
     let diffWidth = tabScroll.value + 100;
     if (diffWidth < scrollWidth) {
-      tabScroll.value = diffWidth
+      if ((diffWidth + 100) > (scrollWidth - boxWidth)) {
+        tabScroll.value = (scrollWidth - boxWidth)
+      } else {
+        tabScroll.value = diffWidth
+      }
     } else {
       tabScroll.value = scrollWidth
     }
     scrollWrapper.value.scrollLeft = tabScroll.value
   }
 }
+function handleMouseDownRight() {
+  timeTagil.value = setInterval(() => {
+    isLongPressil.value = true;
+    handleLongPressil();
+  }, 100)
+}
+function handleMouseUpRight() {
+  clearInterval(timeTagil.value)
+  if (!isLongPressil.value) {
+    arrowForward(); // 如果不是长按，则处理点击逻辑
+  }
+  tabScroll.value = tabScroll.value - 100
+  isLongPressil.value = false
+}
 
-function checkButtonStatus() {
-  if (!scrollWrapper.value) return;
-  // 盒子的宽度
-  let containerSize = tagBox.value.clientWidth;
-  // 内容的宽度
-  let navSize = scrollWrapper.value.scrollWidth;
-  if (containerSize > navSize || containerSize == navSize) {
-    showButton.value = false;
-  } else {
-    showButton.value = true;
+function handleLongPressil() {
+  let scrollWidth = scrollWrapper.value.scrollWidth; //内容宽度
+  let boxWidth = tagBox.value.scrollWidth
+  if (tabScroll.value < (scrollWidth - boxWidth)) {
+    let diffWidth = tabScroll.value + 10;
+    if (diffWidth < scrollWidth) {
+      if ((diffWidth + 10) > (scrollWidth - boxWidth)) {
+        tabScroll.value = (scrollWidth - boxWidth)
+      } else {
+        tabScroll.value = diffWidth
+      }
+    } else {
+      tabScroll.value = scrollWidth
+    }
+    scrollWrapper.value.scrollLeft = tabScroll.value
   }
 }
-checkButtonStatus()
 </script>
 
 <style lang="scss" scoped>

src/layout/index.vue

@@ -66,8 +66,11 @@ function setLayout() {
 @import "@/assets/styles/variables.module.scss";
 
 .app {
-  background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
-
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: radial-gradient(at 50% 50%, rgb(29, 52, 94) 1%, rgb(3, 22, 46) 60%);
 }
 
 .app-wrapper {
@@ -78,13 +81,9 @@ function setLayout() {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  // background-image: linear-gradient(to bottom, transparent 80px, rgb(9, 24, 57) 1px), linear-gradient(to right, transparent 80px, rgb(9, 24, 57) 1px);
-  // background-size: 81px 81px;
-  // background-repeat: repeat;
-  background: 
-      linear-gradient(135deg, black 12.5%, transparent 12.5%, transparent 37.5%, black 37.5%, black 62.5%, transparent 62.5%, transparent 87.5%, black 87.5%) 0 0,
-      linear-gradient(225deg, black 12.5%, transparent 12.5%, transparent 37.5%, black 37.5%, black 62.5%, transparent 62.5%, transparent 87.5%, black 87.5%) 0 0;
-    background-size: 100px 100px;
+  background-image:
+    repeating-linear-gradient(35deg, rgba(13, 28, 61, .5), rgba(13, 28, 61, .5) 1px, transparent 1px, transparent 70px),
+    repeating-linear-gradient(-35deg, rgba(13, 28, 61, .5), rgba(13, 28, 61, .5) 1px, transparent 1px, transparent 70px),
 }
 
 .drawer-bg {

vite.config.js

@@ -31,8 +31,8 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy 
         '/dev-api': {
-          target: 'http://192.168.11.46:8080',
-          // target: 'http://182.43.195.17:8099',
+          // target: 'http://192.168.11.46:8080',
+          target: 'http://182.43.195.17:8010',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }