agilebuilder-ui 1.1.21 → 1.1.22

package/lib/{tab-content-iframe-index-b65e508f.js → tab-content-iframe-index-e6bc24b5.js}

@@ -1,5 +1,5 @@
 import { openBlock as r, createElementBlock as t, createCommentVNode as o } from "vue";
-import { _ as s } from "./index-ea3abd65.js";
+import { _ as s } from "./index-e23f840f.js";
 const u = ["src"], f = s({ data: () => ({ src: null }), watch: { $route(n, c) {
   this.src = this.$route.query.src;
 } }, mounted() {

package/lib/{tab-content-index-10776fd9.js → tab-content-index-5a36eab4.js}

@@ -1,4 +1,4 @@
-import { _ as f, c as $, g as x, b as P, s as h, m as M, M as O, i as I } from "./index-ea3abd65.js";
+import { _ as f, c as $, g as x, b as P, s as h, m as M, M as O, i as I } from "./index-e23f840f.js";
 import { resolveComponent as u, openBlock as l, createBlock as b, withCtx as g, createVNode as v, TransitionGroup as L, createElementBlock as p, Fragment as T, renderList as C, createElementVNode as m, toDisplayString as w, normalizeClass as S, createCommentVNode as y } from "vue";
 const k = { class: "no-redirect" }, A = f({ name: "Breadcrumb", data: () => ({ levelList: null }), computed: { levelListWithTitle() {
   return this.levelList.filter((e) => e.meta.title !== void 0 && e.meta.title !== null);
@@ -96,7 +96,7 @@ const k = { class: "no-redirect" }, A = f({ name: "Breadcrumb", data: () => ({ l
 } } }, V = ["src"], Q = { key: 1, class: "default-page-tip" }, R = { class: "default-page-tip-msg" }, q = { class: "default-page-tip-item" }, z = { class: "default-page-tip-item" }, j = { class: "main-container" }, W = f({ name: "Layout", components: { Menubar: O, Breadcrumb: A, TabContent: f(N, [["render", function(e, t, a, r, o, s) {
   const d = u("el-tab-pane"), n = u("el-tabs");
   return e.openTab && e.openTab.length > 0 ? (l(), b(n, { key: 0, modelValue: s.activeIndex, "onUpdate:modelValue": t[0] || (t[0] = (i) => s.activeIndex = i), class: "nav-tab menu-tab-container", closable: "", onTabRemove: s.closeSelectedTag }, { default: g(() => [(l(!0), p(T, null, C(e.openTab, (i) => (l(), b(d, { key: i.code, label: i.name, name: i.code }, { default: g(() => [m("iframe", { ref_for: !0, ref: "tabMainContent", src: s.getFullPath(i), class: "tab-main-content", name: "tab-main-content", frameborder: "0" }, null, 8, V)]), _: 2 }, 1032, ["label", "name"]))), 128))]), _: 1 }, 8, ["modelValue", "onTabRemove"])) : (l(), p("div", Q, [m("div", R, [m("div", q, w(o.defaultPageTipCn), 1), m("div", z, w(o.defaultPageTipEn), 1)])]));
-}], ["__scopeId", "data-v-4a4e865b"]]) }, mixins: [E], data: () => ({ showMenuRoute: I(), systemCode: null }), computed: { sidebar() {
+}], ["__scopeId", "data-v-a5252a92"]]) }, mixins: [E], data: () => ({ showMenuRoute: I(), systemCode: null }), computed: { sidebar() {
   return this.$store.state.app.sidebar;
 }, device() {
   return this.$store.state.app.device;

package/lib/{tache-subprocess-history-da3e7545.js → tache-subprocess-history-59bda1ed.js}

@@ -1,5 +1,5 @@
 import { resolveComponent as t, openBlock as a, createElementBlock as s, createElementVNode as y, createVNode as l, withCtx as r, createTextVNode as n, toDisplayString as p, createCommentVNode as c, createBlock as h } from "vue";
-import { _ as I } from "./index-ea3abd65.js";
+import { _ as I } from "./index-e23f840f.js";
 const g = { style: { "padding-bottom": "10px" } }, k = { key: 0, class: "graphDiv" }, N = I({ name: "TacheSubprocessHistory", data: () => ({ type: "graph", workflowId: null }), created() {
   const o = this.$route.query.workflowId;
   o && (this.workflowId = parseInt(o));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agilebuilder-ui",
-  "version": "1.1.21",
+  "version": "1.1.22",
   "type": "module",
   "private": false,
   "main": "./lib/super-ui.js",

package/packages/index.js

@@ -45,8 +45,10 @@ import ScanCodeInputBrowser from './scan-code-input-browser'
 import WorkgroupTreeMobile from './workgroup-tree-mobile'
 import RowForm from './row-form'
 import * as ElementPlusIconsVue from "@element-plus/icons-vue"
+import YxAffix from '../src/components/Affix';
 // 将所有组件都存储起来,方便后续统一注册
 const components = [
+  YxAffix,
   Breadcrumb,
   DepartmentTree,
   Hamburger,

package/packages/super-grid/src/index-column.vue

@@ -2,7 +2,7 @@
   <el-table-column
     align="center"
     :fixed="fixed"
-    :width="column.width ? column.width : '80'"
+    :width="70"
   >
     <template v-slot:header>
       <span class="cell--span">{{ $t('superGrid.index') }}</span>

package/packages/super-grid/src/super-grid.vue

@@ -111,7 +111,7 @@
             :title="$t('superGrid.columnConfig')"
             @click="configColumns"
           >
-            <el-icon-setting style="width: 1em; height: 1em; color: #777; cursor: pointer;" />
+            <el-icon-setting style="width: 16px; height: 16px; color: #777; cursor: pointer;" />
           </div>
 
           <div
@@ -120,7 +120,7 @@
             :title="$t('superGrid.refresh')"
             @click="refreshGridData"
           >
-            <el-icon-refresh style="width: 1em; height: 1em; color: #777; cursor: pointer;" />
+            <el-icon-refresh style="width: 16px; height: 16px; color: #777; cursor: pointer;" />
           </div>
 
         </div>

package/src/components/Affix/index.vue

@@ -0,0 +1,265 @@
+<template>
+    <div ref="affixMainRef" class="yx-affix">
+      <div v-if="isFixed" :style="placeholderStyle" class="yx-affix-placeholder" />
+      <div
+        ref="affixRef"
+        :style="affixStyle"
+        :class="{
+          'yx-affix-content': true,
+          'is-fixed': isFixed,
+          'is-top': props.position === 'top',
+          'is-bottom': props.position === 'bottom'
+        }"
+      >
+        <slot />
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { defineProps, defineEmits, ref, onMounted, onUnmounted, nextTick, computed, watchEffect } from 'vue';
+  import type { PropType, CSSProperties } from 'vue';
+  
+  type Position = 'top' | 'bottom';
+  type Target = string | HTMLElement | Window;
+  
+  const props = defineProps({
+    offset: {
+      type: Number,
+      default: 0
+    },
+    position: {
+      type: String as PropType<Position>,
+      default: 'top',
+      validator: (value: string): value is Position => ['top', 'bottom'].includes(value)
+    },
+    target: {
+      type: [String, HTMLElement] as PropType<Target>,
+      default: () => window
+    },
+    autoDetectParentScroll: {
+      type: Boolean,
+      default: true
+    },
+    stickyInScrollContainer: {
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: Number,
+      default: 100
+    },
+    // 是否开启间隔监听
+    enableIntervalUpdate: {
+      type: Boolean,
+      default: true
+    },
+    enableIntervalTime: {
+      type: Number,
+      default: 2000
+    }
+  });
+  
+  const emits = defineEmits<{
+    (e: 'change', fixed: boolean): void;
+  }>();
+  
+  // 父级容器
+  const affixMainRef = ref<HTMLElement | null>(null);
+  // 悬浮容器
+  const affixRef = ref<HTMLElement | null>(null);
+  // 是否浮动
+  const isFixed = ref(false);
+  const placeholderStyle = ref<{ width?: string; height?: string }>({});
+  const scrollContainerDatas = ref<Array<HTMLElement | Window>>([]);
+  const scrollContainer = ref<HTMLElement | Window>(window);
+  const adjustedOffset = ref<number>(0);
+  const intervalId = ref<number | null>(null);
+  
+  // 用于获取 距离顶部 底部 距离 
+  const getAffixOffset = (containerRect: DOMRect) => {
+    const isTop = ['top'].includes(props.position);
+    const isBottom = ['bottom'].includes(props.position);
+    if (!affixMainRef.value) return { isTop, isBottom };
+  
+    const affixMainRect = affixMainRef.value.getBoundingClientRect();
+    const offsetTop = affixMainRect.top - containerRect.top;
+    const offsetLeft = affixMainRect.left - containerRect.left;
+    const offsetBottom = containerRect.height - affixMainRect.height - offsetTop;
+    // 容器距离浏览器顶部
+    const containerTop = containerRect.top;
+    // 容器距离浏览器底部
+    const containerBottom = window.innerHeight - containerRect.bottom;
+    // 是否开启顶部悬浮
+    const isFixTop = isTop && offsetTop <= 0;
+    // 是否开启底部悬浮
+    const isFixBottom = isBottom && offsetBottom <= 0;
+    // 偏移距离
+    const containerOffset = isTop ? containerTop : isBottom ? containerBottom : 0;
+    return {
+      isTop,
+      isBottom,
+      containerTop,
+      containerBottom,
+      containerOffset,
+      offsetTop,
+      offsetLeft,
+      offsetBottom,
+      // 是否开启顶部悬浮
+      isFixTop,
+      // 是否开启底部悬浮
+      isFixBottom,
+    };
+  };
+  
+  // 获取滚动容器
+  const getScrollContainer = (): Array<HTMLElement | Window> => {
+    if (props.autoDetectParentScroll && affixRef.value) {
+      const list: Array<HTMLElement | Window> = [];
+      let parent: HTMLElement | null = affixRef.value.parentElement;
+      while (parent && parent !== document.body) {
+        const { overflowY } = window.getComputedStyle(parent);
+        if (/(auto|scroll)/.test(overflowY)) {
+          list.push(parent);
+        }
+        parent = parent.parentElement;
+      }
+      return [...list, window];
+    }
+  
+    if (typeof props.target === 'string') {
+      const el = document.querySelector(props.target);
+      return [...(el ? [el as HTMLElement] : []), window];
+    }
+    return [window];
+  };
+  
+  // 检测滚动节点
+  const update = () => {
+    try {
+      if (!affixRef.value) return;
+      const rect = affixRef.value.getBoundingClientRect();
+      const container = scrollContainer.value;
+      if (container === window) {
+        const shouldFix = props.position === 'top' ? rect.top <= props.offset : rect.bottom >= window.innerHeight - props.offset;
+        adjustedOffset.value = 0;
+        updateFixedState(shouldFix, rect);
+      } else if (props.stickyInScrollContainer) {
+        const containerRect = (container as HTMLElement).getBoundingClientRect();
+        const { isFixTop, isFixBottom, containerOffset } = getAffixOffset(containerRect);
+        adjustedOffset.value = containerOffset ?? 0;
+        updateFixedState(isFixTop || isFixBottom || false, rect);
+      }
+    } catch (error) {
+        console.error(error)
+    }
+  };
+  
+  // 更新固定状态
+  const updateFixedState = (shouldFix: boolean, rect: DOMRect) => {
+    if (shouldFix !== isFixed.value || placeholderStyle.value?.height !== `${rect.height}px`) {
+      isFixed.value = shouldFix;
+      emits('change', shouldFix);
+  
+      if (shouldFix) {
+        placeholderStyle.value = {
+          width: `100%`,
+          height: `${rect.height}px`
+        };
+      } else {
+        placeholderStyle.value = {};
+      }
+    }
+  };
+  
+  // 滚动事件处理
+  const handleScroll = () => {
+    requestAnimationFrame(update);
+  };
+  
+  // 窗口大小变化处理
+  let resizeTimer: number;
+  const handleResize = () => {
+    isFixed.value = false;
+    clearTimeout(resizeTimer);
+    resizeTimer = window.setTimeout(() => {
+      update();
+    }, 100);
+  };
+  
+  // 组件挂载
+  onMounted(() => {
+    setTimeout(() => {
+      nextTick(() => {
+        try {
+          // eslint-disable-next-line no-debugger
+          if (props.enableIntervalUpdate) {
+            intervalId.value = setInterval(handleScroll, props.enableIntervalTime);
+          }
+          const scrollList = getScrollContainer();
+          console.log('检测父级滚动节点', scrollList)
+          scrollContainerDatas.value = scrollList;
+          scrollContainer.value = scrollList[0];
+          scrollContainerDatas.value.forEach(dom => dom.addEventListener('scroll', handleScroll));
+          window.addEventListener('resize', handleResize);
+          update();
+        } catch (error) {
+          console.error(error)
+        }
+      });
+    }, 100)
+  });
+  
+  // 组件卸载
+  onUnmounted(() => {
+    if (scrollContainer.value) {
+      scrollContainerDatas.value.forEach(dom => dom.removeEventListener('scroll', handleScroll));
+    }
+    window.removeEventListener('resize', handleResize);
+    clearTimeout(resizeTimer);
+    if (intervalId.value) clearInterval(intervalId.value);
+  });
+
+  watchEffect(() => {
+    nextTick(() => {
+      handleScroll();
+    });
+  });
+  
+  // 计算样式
+  const affixStyle = computed(() => {
+    if (isFixed.value) {
+      return {
+        position: 'fixed',
+        width: `${affixRef.value?.offsetWidth}px`,
+        zIndex: props.zIndex,
+        [props.position]: `${props.offset + adjustedOffset.value}px`
+      } as CSSProperties;
+    }
+    return {
+      position: 'relative',
+    } as CSSProperties;
+  });
+  </script>
+      
+<style lang="scss" scoped>
+.yx-affix {
+  &:has(.yx-affix-content:empty) {
+      display: none;
+  }
+  .yx-affix-content {
+    &.is-fixed {
+      &.is-top {
+        & > .yx-fixed-box-container {
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+      }
+      &.is-bottom {
+        & > .yx-fixed-box-container {
+          box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
+        }
+      }
+    }
+  }
+}
+</style>

package/src/styles/_layout-custom-properties.scss

@@ -3,7 +3,7 @@
     --admin-layout-left-menu-expand: 240px; // 系统侧边导航栏 展开
     --admin-layout-left-menu-collapse: 54px; // 系统侧边导航栏 收起
     --admin-layout-main-gap: 20px; // 页面布局内间距
-    --app-main-padding: 20px; // 页面外框内间距
+    --app-main-padding: 15px; // 页面外框内间距
     --dec-page-main-padding: 20px; // 页面外框内间距
     --app-container-padding: 20px; // 页面外框内间距
     --runtime-page-container-padding: 20px; // 页面卡片容器内间距
@@ -18,7 +18,7 @@
 @media (max-width: 768px) {
     :root {
         --admin-layout-main-gap: 10px;
-        --app-main-padding: 0px;
+        --app-main-padding: 10px;
         --dec-page-main-padding: 0px;
         --app-container-padding: 15px;
         --runtime-page-container-padding: 10px;

package/src/styles/display-layout.scss

@@ -14,6 +14,13 @@
   }
 }
 
+.el-tree {
+  span.custom-tree-node {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 .el-form-item {
   display: flex;
   align-items: center;
@@ -58,14 +65,14 @@
 }
 
 .three-column-layout {
-  height: calc(100vh - (var(--app-main-padding, 20px) * 2));
+  height: calc(100vh - (var(--app-main-padding, 15px) * 2));
 
   .el-container {
-    gap: var(--admin-layout-main-gap, 20px);
+    gap: var(--app-main-padding, 15px);
   }
 
   .el-aside {
-    padding-top: 5px;
+    padding: var(--app-main-padding, 15px);
     background-color: #FFFFFF;
     box-shadow: 0px 1px 8px 0px #00000019;
     border-radius: 6px;
@@ -77,7 +84,7 @@
   }
 
   .el-main {
-    padding: 20px;
+    padding: var(--app-main-padding, 15px);
     border-radius: 6px;
     background: #FFFFFF;
     box-shadow: 0px 1px 8px 0px #00000019;

package/src/styles/index.scss

@@ -194,10 +194,6 @@ body .el-table colgroup.gutter {
   overflow: auto;
 }
 
-.form-container-bottom-button {
-  margin-bottom: 50px;
-}
-
 .form-container .el-form .el-card {
   margin-bottom: 10px;
 }

package/src/styles/page-list.scss

@@ -1,6 +1,6 @@
 // 列表初始样式
 .amb-page-list-main {
-    display: flex;
+    display: flex !important;
     flex-direction: column;
     align-items: stretch;
     gap: var(--layout-flex-gap, 15px);
@@ -29,14 +29,24 @@
     }
 }
 // 搜索栏目初始样式
-.amb-page-list-search-main {
+.amb-page-list-search-main, .operation-area {
     @extend .flex-gap-15;
     flex-wrap: wrap;
 
-    @media (max-width: 450px) {
-        & {
-            flex-direction: column;
-        }
+    & > [style*='margin-left: 10px'] {
+        margin-left: 0;
+    }
+
+    & > .el-input__wrapper {
+        flex-grow: 0;
+    }
+
+    & > .el-select {
+        width: 200px;
+    }
+
+    .el-input-group {
+        width: auto;
     }
 
     .el-form {
@@ -52,5 +62,14 @@
         @extend .flex-gap-15;
         margin-left: auto;
         margin-top: auto;
+
+        & > .el-input__wrapper {
+            flex-grow: 0;
+        }
+    }
+
+    .btn-main {
+        @extend .flex-gap-15;
+        gap: var(--super-grid-main-btn-view-gap, 10px);
     }
 }

package/src/styles/theme/dark-blue/index.scss

@@ -204,33 +204,6 @@
     margin-left: 10px;
   }
 
-  // .el-main {
-  //   padding: 0px;
-  // }
-
-  // .el-aside {
-  //   margin-right: 20px;
-  // }
-
-  // .three-column-layout {
-  //   height: calc(100vh - 20px);
-
-  //   .el-aside {
-  //   margin-right: 20px;
-  //     padding-top: 20px;
-  //     background-color: #FFFFFF;
-  //     box-shadow: 0px 1px 8px 0px #00000019;
-
-  //   }
-
-  // .el-main {
-  //   padding: 20px 0 0 20px;
-  //   border-radius: 6px;
-  //   background: #FFFFFF;
-  //   box-shadow: 0px 1px 8px 0px #00000019;
-  // }
-  // }
-
   // 清除 app-container 类样式
   .clear_app_container {
     padding: 0;

package/src/styles/theme/dark-blue/sidebar.scss

@@ -10,11 +10,6 @@
       // padding-left: 24px;
       position: relative;
       background: #F8F9FA;
-
-      .nav-tab {
-        padding-top: 5px;
-        padding-left: 5px;
-      }
     }
 
     // 侧边栏

package/src/styles/theme/default.scss

@@ -1,6 +1,6 @@
 // 主题基础 默认样式
 
-.app-container {
+.app-container:not(:has( > .three-column-layout, > .el-container)) {
     padding: var(--app-container-padding, 20px);
     border-radius: 6px;
     box-shadow: 0px 1px 8px 0px #00000019;
@@ -22,34 +22,7 @@
 }
 
 .operation-area {
-    @extend .flex-gap-15;
-    flex-wrap: wrap;
-
-    @media (max-width: 450px) {
-        & {
-            flex-direction: column;
-        }
-    }
-
-    .el-form {
-        @extend .flex-gap-15;
-        flex-wrap: wrap;
-
-        .el-form-item {
-            margin: 0;
-        }
-    }
-
-    .align-right {
-        @extend .flex-gap-15;
-        margin-left: auto;
-        margin-top: auto;
-    }
-
-    &:empty {
-        display: none;
-    }
-    margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 
 .operation-area-chart {

package/src/styles/theme/gray/sidebar.scss

@@ -8,11 +8,6 @@
       transition: margin-left .28s;
       margin-left: 224px;
       position: relative;
-
-      .nav-tab {
-        padding-top: 5px;
-        padding-left: 5px;
-      }
     }
 
     // 侧边栏

package/src/styles/theme/green/index.scss

@@ -205,33 +205,6 @@
     margin-left: 10px;
   }
 
-  // .el-main {
-  //   padding: 0px;
-  // }
-
-  // .el-aside {
-  //   margin-right: 20px;
-  // }
-
-  // .three-column-layout {
-  //   height: calc(100vh - 20px);
-
-  //   .el-aside {
-  //   margin-right: 20px;
-  //     padding-top: 20px;
-  //     background-color: #FFFFFF;
-  //     box-shadow: 0px 1px 8px 0px #00000019;
-
-  //   }
-
-  // .el-main {
-  //   padding: 20px 0 0 20px;
-  //   border-radius: 6px;
-  //   background: #FFFFFF;
-  //   box-shadow: 0px 1px 8px 0px #00000019;
-  // }
-  // }
-
   // 清除 app-container 类样式
   .clear_app_container {
     padding: 0;

package/src/styles/theme/green/sidebar.scss

@@ -11,11 +11,6 @@
       // padding-left: 24px;
       position: relative;
       background: #F8F9FA;
-
-      .nav-tab {
-        padding-top: 5px;
-        padding-left: 5px;
-      }
     }
 
     // 侧边栏

package/src/styles/theme/ocean-blue/index.scss

@@ -205,33 +205,6 @@
     margin-left: 10px;
   }
 
-  // .el-main {
-  //   padding: 0px;
-  // }
-
-  // .el-aside {
-  //   margin-right: 20px;
-  // }
-
-  // .three-column-layout {
-  //   height: calc(100vh - 20px);
-
-  //   .el-aside {
-  //   margin-right: 20px;
-  //     padding-top: 20px;
-  //     background-color: #FFFFFF;
-  //     box-shadow: 0px 1px 8px 0px #00000019;
-
-  //   }
-
-  // .el-main {
-  //   padding: 20px 0 0 20px;
-  //   border-radius: 6px;
-  //   background: #FFFFFF;
-  //   box-shadow: 0px 1px 8px 0px #00000019;
-  // }
-  // }
-
   // 清除 app-container 类样式
   .clear_app_container {
     padding: 0;

package/src/styles/theme/ocean-blue/sidebar.scss

@@ -11,11 +11,6 @@
       // padding-left: 24px;
       position: relative;
       background: #F8F9FA;
-
-      .nav-tab {
-        padding-top: 5px;
-        padding-left: 5px;
-      }
     }
 
     // 侧边栏