agilebuilder-ui 1.1.13-tmp2 → 1.1.13-tmp4

package/src/components/Scrollbar/index.vue

@@ -0,0 +1,197 @@
+<template>
+    <el-scrollbar v-bind="mergedAttrs" ref="scrollbarRef">
+        <slot />
+    </el-scrollbar>
+</template>
+
+<script setup>
+import { ElScrollbar } from 'element-plus';
+// import { useStore } from 'vuex';
+import store from '../../store';
+import { toRefs, reactive, mergeProps, ref, onMounted, watch, useAttrs, computed, defineEmits, useSlots } from 'vue';
+
+const slots = useSlots();
+
+// const store = useStore();
+
+store?.dispatch?.('startListeningToResize');
+
+const scrollbarRef = ref(null);
+
+const scrollToEmitValue = ref(undefined)
+
+const emits = defineEmits(['scrollToTop', 'scrollToBottom']);
+
+const resizeProps = computed(() => ({
+    // 宽度
+    windowWidth: store.getters.windowWidth,
+    // 高度
+    windowHeight: store.getters.windowHeight,
+    // 是否移动端
+    isMobileResize: store.getters.isMobileResize,
+}));
+
+// 定义初始化参数
+const defaultAttrs = reactive({
+    always: false, // 滚动条是否总是显示
+    // wrapStyle: 'height: 100%', // 滚动区域的样式
+});
+
+const props = defineProps({
+    // 是否开启滚动距离阴影
+    showScrollShadow: {
+        type: Boolean,
+        default: true
+    },
+    triggerDistance: {
+        type: Number,
+        default: 0
+    },
+    // 动态计算 max-height
+    setMaxHeight: {
+        type: [Function, undefined],
+        default: () => undefined
+    },
+    // 动态计算 height
+    setHeight: {
+        type: [Function, undefined],
+        default: () => undefined
+    }
+});
+
+const { attrs } = useAttrs();
+
+// 统一写入
+const setHeightFun = (fun) => {
+    try {
+        return fun?.(resizeProps.value)
+    } catch (error) {
+        console.error(error)
+    }
+    return
+}
+
+// 合并初始化参数和传入的属性
+const mergedAttrs = computed(() => {
+    const attrsData = mergeProps(defaultAttrs, attrs)
+    return {
+        ...({
+            // 绑定 setMaxHeight 事件 返回 最大高度
+            ...(props.setMaxHeight ? { maxHeight: setHeightFun(props.setMaxHeight) } : {}),
+            // 绑定 setHeight 事件 返回 高度
+            ...(props.setHeight ? { height: setHeightFun(props.setHeight) } : {}),
+        }),
+        ...attrsData
+    }
+});
+
+// 滚动距离回调事件
+const scrollToEmits = (scrollElement) => {
+    if (!scrollElement) return
+    const isAtTop = scrollElement.scrollTop <= props.triggerDistance;
+    const isAtBottom = scrollElement.scrollTop + scrollElement.clientHeight >= (scrollElement.scrollHeight - props.triggerDistance);
+    if (isAtBottom) {
+        // scrollToEmitValue 校验确保只执行一次
+        // 底部事件 
+        !['at-bottom'].includes(scrollToEmitValue.value) && emits('scrollToBottom');
+        scrollToEmitValue.value = 'at-bottom'
+    } else if (isAtTop) {
+        // 顶部事件
+        !['at-top'].includes(scrollToEmitValue.value) && emits('scrollToTop');
+        scrollToEmitValue.value = 'at-top'
+    } else {
+        scrollToEmitValue.value = undefined
+    }
+}
+
+// 滚动阴影事件
+const handleScroll = () => {
+    const scrollElement = scrollbarRef.value?.$el.querySelector('.el-scrollbar__wrap');
+    if (scrollElement) {
+        const isAtTop = scrollElement.scrollTop === 0;
+        const isAtBottom = scrollElement.scrollTop + scrollElement.clientHeight === scrollElement.scrollHeight;
+        if (props.showScrollShadow) {
+            if (!isAtTop) {
+                scrollbarRef.value.$el.classList.add('scroll-top-shadow');
+            } else {
+                scrollbarRef.value.$el.classList.remove('scroll-top-shadow');
+            }
+            if (!isAtBottom) {
+                scrollbarRef.value.$el.classList.add('scroll-bottom-shadow');
+            } else {
+                scrollbarRef.value.$el.classList.remove('scroll-bottom-shadow');
+            }
+        } else {
+            scrollbarRef.value.$el.classList.remove('scroll-top-shadow', 'scroll-bottom-shadow');
+        }
+        scrollToEmits(scrollElement);
+    }
+};
+
+onMounted(() => {
+    const scrollElement = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
+    if (scrollElement) {
+        scrollElement.addEventListener('scroll', handleScroll);
+        handleScroll();
+        scrollToEmits(scrollElement);
+    }
+});
+
+watch(() => props.showScrollShadow, () => {
+    handleScroll();
+});
+
+watch(() => mergedAttrs?.maxHeight, () => {
+    setTimeout(handleScroll, 500);
+});
+
+watch(() => mergedAttrs?.height, () => {
+    setTimeout(handleScroll, 500);
+});
+watch(
+  () => slots.default?.(),
+  (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+        setTimeout(handleScroll, 500);
+    }
+  },
+  { deep: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.el-scrollbar ::v-deep {
+    position: relative;
+
+    &.scroll-top-shadow {
+        &::before {
+            content: ' ';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 8px;
+            box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.2);
+            z-index: 2;
+        }
+    }
+
+    &.scroll-bottom-shadow {
+        &::after {
+            content: ' ';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 8px;
+            box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.2);
+            z-index: 2;
+        }
+    }
+
+    &>.el-scrollbar__wrap {
+        position: relative;
+        z-index: 1;
+    }
+}
+</style>

package/src/store/getters.js

@@ -1,6 +1,9 @@
 const getters = {
   sidebar: (state) => state.app.sidebar,
   device: (state) => state.app.device,
+  windowWidth: (state) => state.app.windowWidth,
+  windowHeight: (state) => state.app.windowHeight,
+  isMobileResize: (state) => state.app.isMobileResize,
   token: (state) => state.user.token,
   name: (state) => state.user.name,
   // routers: state => state.permission.routers,

package/src/store/modules/app.js

@@ -10,18 +10,16 @@ const app = {
     preventReclick: false,
     whiteList: [],
     systemWidth: [],
-    windowWidth: window.innerWidth,
-    windowHeight: window.innerHeight,
-    targetDomWidth: 0,
-    isModel: false,
+    windowWidth: null, // 网页宽度
+    windowHeight: null, // 网页高度
+    isMobileResize: false, // 是否移动端
   },
   mutations: {
+    // 写入网页 高度 宽度 是否移动端
     updateWindowSize(state, { width, height }) {
       state.windowWidth = width;
       state.windowHeight = height;
-    },
-    updateTargetDomWidth(state, width) {
-        state.targetDomWidth = width;
+      state.isMobileResize = !!width && width <= 768
     },
     toggleSidebar: (state) => {
       if (state.sidebar.opened) {
@@ -50,17 +48,34 @@ const app = {
     },
   },
   actions: {
-    startListeningToResize({ commit }) {
-        const handleResize = () => {
-            commit('updateWindowSize', {
-                width: window.innerWidth,
-                height: window.innerHeight
-            });
-        };
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
+    startListeningToResize({ state, commit }) {
+      const handleResize = (data) => {
+        commit('updateWindowSize', {
+            width: data?.width ?? window.innerWidth,
+            height: data?.height ?? window.innerHeight,
+        });
+      };
+      if (!state.windowWidth && !state.windowHeight) {
+        const element = document.querySelector('.amb-design-board');
+        if (element) {
+          handleResize({
+            width: element.clientWidth,
+            height: element.clientHeight,
+          });
+          const designObserver = new ResizeObserver(entries => {
+              for (const entry of entries) {
+                  handleResize({
+                    width: entry?.['target']?.clientWidth,
+                    height: entry?.['target']?.clientHeight,
+                  });
+              }
+          });
+          designObserver.observe(element);
+        } else {
+          window.addEventListener('resize', handleResize);
+          handleResize();
+        }
+      }
     },
     toggleSidebar: ({ commit }) => {
       commit('toggleSidebar')

package/src/styles/display-layout.scss

@@ -97,6 +97,14 @@
   &[header-padding] {
     & > .el-card__header {
       padding: 0 !important;
+      overflow: hidden;
+      min-height: 50px;
+
+      & > .yx-flex-wrap {
+        gap: 10px;
+        height: 100%;
+        padding: 5px var(--el-card-padding);
+      }
     }
   }
   &[body-padding] {
@@ -107,6 +115,36 @@
   .el-card__header {
     & > .yx-flex-wrap {
       flex: 1 1 auto;
+
+      [layout-title] {
+        max-width: calc(100% - 40px);
+
+        a, div, span {
+          display: block !important;
+        }
+        .ellipsis {
+          width: auto !important;
+          text-align: left !important;
+        }
+      }
+    }
+  }
+  .yx-card-body {
+    padding: var(--el-card-padding);
+  }
+  @media (max-width: 450px) {
+    &[header-padding] {
+      & > .el-card__header {
+        & > .yx-flex-wrap {
+          padding: 5px 10px;
+        }
+      }
+    }
+    & > .el-card__footer {
+      padding: 5px 10px;
+    }
+    .yx-card-body {
+      padding: 10px;
     }
   }
 }
@@ -163,4 +201,63 @@
     height: 0px !important;
     overflow: hidden !important;
   }
-}
+}
+
+@media (max-width: 450px) {
+  // 该样式临时处理移动端展示结构问题，如果冲突请清理
+  .app-wrapper {
+    .tab-main-container {
+      & > .app-main {
+        padding: 10px 0;
+
+        & > [style*='min-height'] {
+          min-height: calc(100vh - 20px) !important;
+
+          & .app-container {
+            min-height: calc(100vh - 20px) !important;
+
+            & > [style*='padding'] {
+              padding: 0 !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.yx-drawer {
+  .el-drawer {
+      .el-drawer__header {
+          padding: var(--el-drawer-padding-primary);
+          margin: 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: var(--el-drawer-padding-primary);
+      }
+
+      .el-drawer__body {
+          & > .yx-flex-wrap {
+              height: 100%;
+
+          }
+          & > .el-scrollbar {
+              height: 100%;
+          }
+      }
+  }
+
+  &.yx-scrollbar-body {
+      .el-drawer__body {
+          padding: 0;
+          & > .el-scrollbar {
+              & > .el-scrollbar__wrap {
+                  & > .el-scrollbar__view {
+                      padding: var(--el-drawer-padding-primary);
+                  }
+              }
+          }
+      }
+  }
+}

package/src/views/layout/tab-content-index.vue

@@ -69,7 +69,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import 'agilebuilder-ui/src/styles/mixin.scss';
+@import '../../styles/mixin.scss';
 @include clearfix;
 .app-wrapper {
   position: relative;