plain-design 1.0.0-beta.37 → 1.0.0-beta.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.37",
+  "version": "1.0.0-beta.39",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Alert/alert.scss

@@ -7,12 +7,12 @@
 
   .alert-label {
     font-size: plv(font-size-small);
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   .alert-desc {
     font-size: plv(font-size-small);
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   &.alert-has-icon {

package/src/packages/components/Application/theme/theme.ts

@@ -75,6 +75,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'background-hover': referenceVariable("gray-2"),
     'scrollbar-color': referenceVariable("gray-3"),
     'loading-mask-color': 'rgba(255,255,255,0.5)',
+    'line-height': 'plv(line-height)',
 
     'font-size-mini': '12px',
     'font-size-small': '12px',

package/src/packages/components/AutoTable/filter/useTableOption.filter.form.tsx

@@ -171,6 +171,7 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
         initialState={state.data}
         onSearch={handler.onNormalSearch}
         column={config.filterFormColumn}
+        searchButtonAttrs={{ mode: 'flat' }}
         v-slots={{
           operation: () => (
             <Button label={i18n('base.collapse').d('收起')} icon="pi-shrink" onClick={methods.toggleShow}/>

package/src/packages/components/Button/button.scss

@@ -7,7 +7,7 @@
   outline: none;
   position: relative;
   text-align: center;
-  line-height: 1.5715;
+  line-height: plv(line-height);
   white-space: nowrap;
   display: inline-block;
   user-select: none;

package/src/packages/components/Card/card.scss

@@ -48,7 +48,7 @@
     width: 100%;
     color: plv(text-2);
     padding: 9px 12px;
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   .card-poster {

package/src/packages/components/FilterFormMultiple/index.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, watch} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "plain-design-composition";
 import {PlainObject} from "plain-utils/utils/event";
 import {Form} from "../Form";
 import {FormItem} from "../FormItem";
@@ -44,10 +44,14 @@ export type iFilterFormMultipleData = iFilterFormMultipleState & { filterQueryPa
 export const FilterFormMultiple = designComponent({
   name: 'filter-form-multiple',
   props: {
-    filterOptions: { type: Array as PropType<iFilterOption[]> },
-    initialState: { type: Object as PropType<iFilterFormMultipleState> },
-    formAttrs: { type: Object as PropType<typeof Form.use.props> },
-    column: { type: Number, default: 3 },
+    filterOptions: { type: Array as PropType<iFilterOption[]> },            // 删选表单配置对象
+    initialState: { type: Object as PropType<iFilterFormMultipleState> },   // 初始值
+    formAttrs: { type: Object as PropType<typeof Form.use.props> },         // 给Form传递的属性
+    column: { type: Number, default: 3 },                                   // 列数
+    hideSearchButton: { type: Boolean },                                    // 隐藏查询按钮
+    hideResetButton: { type: Boolean },                                     // 隐藏重置按钮
+    searchButtonAttrs: { type: Object as PropType<PlainObject> },           // 给查询按钮传递的属性
+    resetButtonAttrs: { type: Object as PropType<PlainObject> },            // 给重置按钮传递的属性
   },
   slots: ['operation'],
   emits: {
@@ -246,11 +250,28 @@ export const FilterFormMultiple = designComponent({
               if (formColumn == null) {return 1;}
               return Number(formColumn) - usingFilterOptions.value.length % Number(formColumn);
             })()}>
-              <div className="filter-form-multiple-operation">
-                {slots.operation()}
-                <Button label={i18n('base.reset').d('重置')} icon="pi-delete" onClick={methods.reset}/>
-                <Button label={i18n('base.query').d('查询')} mode="fill" icon="pi-search" onClick={methods.search}/>
-              </div>
+              {(!props.hideResetButton || !props.hideSearchButton || slots.operation.isExist()) && (
+                <div className="filter-form-multiple-operation">
+                  {slots.operation()}
+                  {!props.hideResetButton && (
+                    <Button {...mergeAttrs({
+                      label: i18n('base.reset').d('重置'),
+                      icon: "pi-delete",
+                      onClick: methods.reset
+                    }, props.resetButtonAttrs)}/>
+                  )}
+                  {!props.hideSearchButton && (
+                    <Button
+                      {...mergeAttrs({
+                        label: i18n('base.query').d('查询'),
+                        mode: "fill",
+                        icon: "pi-search",
+                        onClick: methods.search,
+                      }, props.searchButtonAttrs)}
+                    />
+                  )}
+                </div>
+              )}
             </FormItem>
           </Form>
         </div>

package/src/packages/components/Input/index.scss

@@ -41,7 +41,7 @@
     border: none;
     background-color: transparent;
     box-sizing: border-box;
-    line-height: 1.5715;
+    line-height: plv(line-height);
     padding-top: 3px;
     padding-bottom: 3px;
     color: plv(text-2);
@@ -352,7 +352,7 @@
         display: inline-block;
         padding: 3px 12px;
         box-sizing: border-box;
-        line-height: 1.5715;
+        line-height: plv(line-height);
         word-break: break-all;
       }
 

package/src/packages/components/InputNumber/number.scss

@@ -47,12 +47,21 @@
       }
     }
 
+    .number-prepend-button, .number-append-button {
+      transform: scale(0.9);
+    }
+
     @include sizeMixin(input, ()) {
       .number-button-container {
-        width: $height,
+        width: $height;
+        height: calc(#{$height} - 2px);
       }
     }
   }
+
+  .input-box {
+    align-self: center;
+  }
 }
 
 @include prefix(number-resize) {

package/src/packages/components/StackCard/index.tsx

@@ -10,13 +10,17 @@ export const StackCard = designComponent({
   name: 'stack-card',
   props: {
     modelValue: { type: [String, Number] },                                                         // 双向绑定值，当前显示哪一个子节点
-    leftBufferCount: { type: Number },                                                              // 左侧显示元素个数
-    rightBufferCount: { type: Number },                                                             // 右侧显示元素个数
+    prevBufferCount: { type: Number },                                                              // 左/上侧显示元素个数
+    nextBufferCount: { type: Number },                                                              // 右/下侧显示元素个数, 这个包含当前显示的元素，所以这个nextBufferCount不能小于1
     stackItemWidth: { type: Number, default: 24 },                                                  // 每一张折叠卡片横向偏移距离
-    stackItemHeight: { type: Number, default: 12 },                                                 //每一张折叠卡片纵向向偏移距离
-    scaleRate: { type: Number, default: 0.1 },                                                      // 缩放比例
-    verticalOffset: { type: Boolean },                                                              // 开启纵向偏移
-    verticalAlign: { type: String as PropType<'top' | 'center' | 'bottom'>, default: 'center' },    // 纵向对齐方式
+    stackItemHeight: { type: Number, default: 12 },                                                 // 每一张折叠卡片纵向向偏移距离
+    scaleRate: { type: Number, default: 0.1 },                                                      // 每一张折叠卡片缩放比例
+    demandRender: { type: Boolean },                                                                // 按需渲染内容，当卡片没有展示的时候不渲染内容
+    flick: { type: Boolean },                                                                       // 轻拂模式，拖拽的时候不会触发卡片滚动，松开的时候才会触发切换，如果卡片内容有复杂的内容比如表单因为transform变化显示异常的情况下可以启用这个属性
+
+    vertical: { type: Boolean },                                                                    // 设置为true之后，开启纵向切换
+    verticalOffset: { type: Boolean },                                                              // 横向切换下有效，开启纵向偏移
+    verticalAlign: { type: String as PropType<'top' | 'center' | 'bottom'>, default: 'center' },    // 横向切换下有效，纵向对齐方式
   },
   emits: {
     onUpdateModelValue: (val?: string | number) => true,
@@ -32,50 +36,129 @@ export const StackCard = designComponent({
 
     const classes = useClasses(() => [
       getComponentCls('stack-card'),
+      `stack-card-direction-${props.vertical ? 'vertical' : 'horizontal'}`,
       {
-        'stack-card-touching': draggier.draggierState.touching
+        'stack-card-touching': draggier.draggierState.touching,
       }
     ]);
 
     const draggier = (() => {
 
-      const draggierState = reactive({ left: 0, touching: false, });
+      /**
+       * 拖拽响应式状态
+       * @author  韦胜健
+       * @date    2024/2/1 14:34
+       * @param   lot 缩写，left or top
+       * @param   touching, 当前是否处于拖拽状态
+       */
+      const draggierState = reactive({ lot: 0, touching: false, });
 
       const touchstart = (e: TouchEvent | MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
 
         let staticState = {
-          startLeft: draggierState.left,
-          startX: 'touches' in e ? e.touches[0].clientX : e.clientX,
+          /*拖拽开始时的left or top*/
+          startLot: draggierState.lot,
+          /*拖拽开始时触点的x轴以及y轴位置*/
+          ...'touches' in e ? {
+            startX: e.touches[0].clientX,
+            startY: e.touches[0].clientY,
+          } : {
+            startX: e.clientX,
+            startY: e.clientY,
+          },
+          moveX: 0,
+          moveY: 0
         };
         const { effects: draggierEffects } = createEffects();
 
         const touchmove = (e: TouchEvent | MouseEvent) => {
-          let durX = Math.ceil(('touches' in e ? e.touches[0].clientX : e.clientX) - staticState.startX);
+
+          Object.assign(
+            staticState,
+            'touches' in e
+              ? {
+                moveX: e.touches[0].clientX,
+                moveY: e.touches[0].clientY
+              }
+              : {
+                moveX: e.clientX,
+                moveY: e.clientY
+              }
+          );
+
+          let { durX, durY } = {
+            durX: staticState.moveX - staticState.startX,
+            durY: staticState.moveY - staticState.startY
+          };
+
           if (!draggierState.touching) {
-            if (Math.abs(durX) > 10) {
+            /*横向切换状态下，横向移动距离超过10个像素*/
+            /*或者纵向切换状态下，纵向移动距离超过10个像素*/
+            if ((!props.vertical && Math.abs(durX) > 10) || (props.vertical && Math.abs(durY) > 10)) {
               draggierState.touching = true;
               draggierEffects.push(() => {
                 draggierState.touching = false;
-                if (!!renderData) {
-                  /**
-                   * 设置滚动位置为最近的子节点
-                   * @author  韦胜健
-                   * @date    2024/1/4 21:12
-                   */
-                  const { closestItem, itemsList, itemValList } = renderData;
-                  draggierState.left = itemsList.find(i => i.index === closestItem.index)!.startLeft;
-                  const newVal = itemValList[closestItem.index];
-                  if (newVal != model.value) {model.value = newVal;}
+                if (!props.flick) {
+                  if (!!renderData) {
+                    /**
+                     * 设置滚动位置为最近的子节点
+                     * @author  韦胜健
+                     * @date    2024/1/4 21:12
+                     */
+                    const { closestItem, itemsList, itemValList } = renderData;
+                    draggierState.lot = itemsList.find(
+                      (i) => i.index === closestItem.index
+                    )!.startLot;
+                    const newVal = itemValList[closestItem.index];
+                    if (newVal != model.value) {
+                      model.value = newVal;
+                      // delay(300).then(() => refreshItemArrowProvider.refresh());
+                    }
+                  }
+                } else {
+                  let activeIndex =
+                    model.value == null ? -1 : renderData.itemValList.indexOf(model.value);
+                  if (activeIndex == -1) {
+                    activeIndex = 0;
+                  }
+
+                  let index =
+                    ((): 1 | -1 => {
+                      if (!props.vertical) {
+                        return staticState.moveX > staticState.startX ? -1 : 1;
+                      } else {
+                        return staticState.moveY > staticState.startY ? -1 : 1;
+                      }
+                    })() + activeIndex;
+                  if (index < 0) {
+                    index = renderData.itemValList.length - 1;
+                  }
+                  if (index > renderData.itemValList.length - 1) {
+                    index = 0;
+                  }
+                  draggierState.lot = renderData.itemsList.find((i) => i.index === index)!.startLot;
+                  const newVal = renderData.itemValList[index];
+                  if (newVal != model.value) {
+                    model.value = newVal;
+                    // delay(300).then(() => refreshItemArrowProvider.refresh());
+                  }
                 }
               });
             }
           }
-          if (!draggierState.touching) {return;}
-          /*实时设置滚动位置*/
-          durX = Math.ceil(durX / 3);
-          draggierState.left = -durX + staticState.startLeft;
+          if (!draggierState.touching) {
+            return;
+          }
+          if (!props.flick) {
+            /*实时设置滚动位置*/
+            durX = Math.ceil(durX / 3);
+            durY = Math.ceil(durY / 10);
+            draggierState.lot = !props.vertical
+              ? -durX + staticState.startLot
+              : -durY + staticState.startLot;
+          }
         };
 
         draggierEffects.push(addWindowListener('mousemove', touchmove));
@@ -99,7 +182,7 @@ export const StackCard = designComponent({
         if (activeIndex === -1) {return;}
         const newItem = renderData.itemsList.find(i => i.index === activeIndex);
         if (!!newItem) {
-          draggier.draggierState.left = renderData.itemsList.find(i => i.index === activeIndex)!.startLeft;
+          draggier.draggierState.lot = renderData.itemsList.find(i => i.index === activeIndex)!.startLot;
         }
       },
     };
@@ -114,13 +197,13 @@ export const StackCard = designComponent({
 
     let renderData = {
       /*子节点信息，listLeft为子节点相对于o位置的偏移量*/
-      itemsList: [] as { index: number, startLeft: number, endLeft: number }[],
+      itemsList: [] as iStackItemDataMeta[],
       /*子节点的val数组*/
       itemValList: [] as (string | number)[],
       /*子节点转换为循环列表的信息，distance为循环列表中元素距离选中元素的偏移量*/
-      listData: [] as { index: number, startLeft: number, endLeft: number, distance: number }[],
+      listData: [] as (iStackItemDataMeta & { distance: number })[],
       /*最靠近选中元素的节点数据*/
-      closestItem: {} as { index: number, startLeft: number, endLeft: number },
+      closestItem: {} as iStackItemDataMeta,
     };
 
     return () => {
@@ -131,104 +214,162 @@ export const StackCard = designComponent({
       const itemValList = items.map((i, index) => i.props?.val == null ? index : i.props?.val);
       const total = items.length;
 
-      let leftBufferCount = props.leftBufferCount == null ? Math.ceil(total / 2) : props.leftBufferCount;
-      let rightBufferCount = props.rightBufferCount == null ? Math.ceil(total / 2) : props.rightBufferCount;
+      let prevBufferCount = props.prevBufferCount == null ? Math.ceil(total / 2) : props.prevBufferCount;
+      let nextBufferCount = props.nextBufferCount == null ? Math.ceil(total / 2) : props.nextBufferCount;
 
       const elStyles = {} as CSSProperties;
-      elStyles.paddingLeft = `${(leftBufferCount) * props.stackItemWidth}px`;
-      elStyles.paddingRight = `${(rightBufferCount - 1) * props.stackItemWidth}px`;
-      if (!!props.verticalOffset) {
-        elStyles.paddingBottom = `${Math.max(leftBufferCount, rightBufferCount - 1) * props.stackItemHeight}px`;
+      if (!props.vertical) {
+        elStyles.paddingLeft = `${(prevBufferCount) * props.stackItemWidth}px`;
+        elStyles.paddingRight = `${(nextBufferCount - 1) * props.stackItemWidth}px`;
+        if (!!props.verticalOffset) {
+          elStyles.paddingBottom = `${Math.max(prevBufferCount, nextBufferCount - 1) * props.stackItemHeight}px`;
+        }
+      } else {
+        elStyles.paddingTop = `${(prevBufferCount) * props.stackItemHeight}px`;
+        elStyles.paddingBottom = `${(nextBufferCount - 1) * props.stackItemHeight}px`;
+        /*if (!!props.verticalOffset) {
+          elStyles.paddingBottom = `${Math.max(leftBufferCount, rightBufferCount - 1) * props.stackItemHeight}px`;
+        }*/
       }
 
       let itemStyles: CSSProperties[] = [];
+      const stackItemSize = !props.vertical ? props.stackItemWidth : props.stackItemHeight;
 
       /*实际中拖拽的left距离，与item的startLeft匹配，item的startLeft实际上是item的中心距离*/
-      let pointLeft = draggier.draggierState.left;
+      let pointLot = draggier.draggierState.lot;
       /*拖拽的left距离向右偏移半个stackItemWidth得到offsetPointLeft, 通过offsetPointLeft在item的startLeft到endLeft之间的位置找到closetItem*/
-      let offsetPointLeft = Math.floor(props.stackItemWidth / 2 + pointLeft);
+      let offsetPointLot = Math.floor(stackItemSize / 2 + pointLot);
       /*计算每个item的startLeft以及endLeft*/
-      const itemsList: { index: number, startLeft: number, endLeft: number; }[] = itemValList.map((_, index) => ({ index, startLeft: index * props.stackItemWidth, endLeft: (index + 1) * props.stackItemWidth, }));
+      const itemsList: iStackItemDataMeta[] = itemValList.map((_, index) => ({ index, startLot: index * stackItemSize, endLot: (index + 1) * stackItemSize, }));
 
       /*总长度*/
-      const maxEndLeft = itemsList[itemsList.length - 1]?.endLeft;
+      const maxEndLot = itemsList[itemsList.length - 1]?.endLot;
 
       /*修正left，超出maxListLeft或者小于0时，循环计算left使其落在0到maxListLeft的范围*/
-      if (!!itemsList.length && !!maxEndLeft) {
-        while (offsetPointLeft > maxEndLeft) {
-          offsetPointLeft -= maxEndLeft;
-          pointLeft -= maxEndLeft;
+      if (!!itemsList.length && !!maxEndLot) {
+        while (offsetPointLot > maxEndLot) {
+          offsetPointLot -= maxEndLot;
+          pointLot -= maxEndLot;
         }
-        while (offsetPointLeft < 0) {
-          offsetPointLeft += maxEndLeft;
-          pointLeft += maxEndLeft;
+        while (offsetPointLot < 0) {
+          offsetPointLot += maxEndLot;
+          pointLot += maxEndLot;
         }
       }
 
       /*找到最靠近的位置*/
       const closestItem = itemsList.reduce((prev, item) => {
-        if (item.startLeft <= offsetPointLeft && item.endLeft >= offsetPointLeft) {
-          return { distance: Math.abs(item.startLeft - pointLeft), item };
+        if (item.startLot <= offsetPointLot && item.endLot >= offsetPointLot) {
+          return { distance: Math.abs(item.startLot - pointLot), item };
         } else {
           return prev;
         }
-      }, { distance: Infinity, item: null } as { distance: number, item: { index: number, startLeft: number, endLeft: number } | null }).item!;
+      }, { distance: Infinity, item: null } as { distance: number, item: iStackItemDataMeta | null }).item!;
 
       /*循环列表前半部分*/
-      const leftItemsList = itemsList.slice(0, closestItem.index);
+      const prevItemsList = itemsList.slice(0, closestItem.index);
       /*循环列表后半部分*/
-      const rightItemsList = itemsList.slice(closestItem.index);
+      const nextItemsList = itemsList.slice(closestItem.index);
 
       /*根据左侧右侧预留的空位填补前后列表*/
-      while (leftItemsList.length - rightItemsList.length > 1) {rightItemsList.push(leftItemsList.shift()!);}
-      while (rightItemsList.length - leftItemsList.length > 1) {leftItemsList.unshift(rightItemsList.pop()!);}
-      while (leftItemsList.length > leftBufferCount) {
-        const shiftItem = leftItemsList.shift()!;
-        if (rightItemsList.length < rightBufferCount) {
-          rightItemsList.push(shiftItem);
+      while (prevItemsList.length - nextItemsList.length > 1) {nextItemsList.push(prevItemsList.shift()!);}
+      while (nextItemsList.length - prevItemsList.length > 1) {prevItemsList.unshift(nextItemsList.pop()!);}
+      while (prevItemsList.length > prevBufferCount) {
+        const shiftItem = prevItemsList.shift()!;
+        if (nextItemsList.length < nextBufferCount) {
+          nextItemsList.push(shiftItem);
         }
       }
-      while (rightItemsList.length > rightBufferCount) {
-        const popItem = rightItemsList.pop()!;
-        if (leftItemsList.length < leftBufferCount) {
-          leftItemsList.unshift(popItem);
+      while (nextItemsList.length > nextBufferCount) {
+        const popItem = nextItemsList.pop()!;
+        if (prevItemsList.length < prevBufferCount) {
+          prevItemsList.unshift(popItem);
         }
       }
 
       /*此时后半部分的第一个元素就是选中的元素，索引就是前半部分列表的最后一个位置+1*/
-      const activeIndex = leftItemsList.length;
+      const activeIndex = prevItemsList.length;
       /*根据最靠近left的节点来计算当前的少量偏移*/
-      const offsetLeft = closestItem.startLeft - pointLeft;
+      const offsetLot = closestItem.startLot - pointLot;
       /*计算循环列表中每个节点距离选中节点的偏移距离*/
-      const list = [...leftItemsList, ...rightItemsList].map((item, index) => ({
+      const list = [...prevItemsList, ...nextItemsList].map((item, index) => ({
         ...item,
-        distance: (index - activeIndex) * props.stackItemWidth,
+        distance: (index - activeIndex) * stackItemSize,
         zIndex: 0,
       }));
       /*先排序，然后根据顺序设置zIndex，最靠近left的节点zIndex最大*/
       list.sort((a, b) => Math.abs(a.distance) - Math.abs(b.distance)).forEach((i, index) => {
         i.zIndex = total - index;
       });
+
+      const isPrevOfClosetItem = (index: number) => {
+        index = index + 1;
+        if (index >= total) {index = 0;}
+        return index === closestItem.index;
+      };
+      const isNextOfClosetItem = (index: number) => {
+        index = index - 1;
+        if (index < 0) {index = total - 1;}
+        return index === closestItem.index;
+      };
+
       /*计算子节点样式*/
-      itemStyles = itemsList.map((_, index) => {
+      itemStyles = itemsList.map((_, index): CSSProperties => {
         const item = list.find(i => i.index === index);
         if (!item) {
-          /*不在前部分列表后部分列表的元素，可能是因为预留位置不足，这里不做显示*/
-          return {
-            opacity: 0,
-            transition: 'none'
-          };
+          const isPrevHidden = isPrevOfClosetItem(_.index);
+          const isNextHidden = !isPrevHidden && isNextOfClosetItem(_.index);
+
+          if (isPrevHidden) {
+            /*下一个就是closetItem，但是当前item隐藏,提前缩放以及进行位置偏移*/
+            return {
+              opacity: 0,
+              zIndex: total + 2,
+              pointerEvents: 'none',
+              transformOrigin: !props.vertical ? 'left' + (' ' + props.verticalAlign) : 'top',
+              transform: !props.vertical ?
+                `translate3d(${Math.ceil(-stackItemSize * 0.5)}px,0,0) scale(${1 - props.scaleRate / 2})` :
+                `translate3d(0,${Math.ceil(-stackItemSize * 0.5)}px,0) scale(${1 - props.scaleRate / 2})`
+            };
+          } else if (isNextHidden) {
+            /*上一个就是closetItem，但是当前item隐藏,提前缩放以及进行位置偏移*/
+            return {
+              opacity: 0,
+              zIndex: total + 2,
+              pointerEvents: 'none',
+              transformOrigin: !props.vertical ? 'right' + (' ' + props.verticalAlign) : 'bottom',
+              transform: !props.vertical ?
+                `translate3d(${Math.ceil(stackItemSize * 0.5)}px,0,0) scale(${1 - props.scaleRate / 2})` :
+                `translate3d(0,${Math.ceil(stackItemSize * 0.5)}px,0) scale(${1 - props.scaleRate / 2})`
+            };
+          } else {
+            /*不在前部分列表后部分列表的元素，可能是因为预留位置不足，这里不做显示*/
+            return {
+              opacity: 0,
+              transition: 'none'
+            };
+          }
         }
         /*元素的偏移距离*/
-        const left = item.distance + offsetLeft;
+        const lot = item.distance + offsetLot;
         /*根据偏移距离实时计算缩放大小，越靠近left，越接近1*/
-        const scale = Math.max(0, 1 - Number((Math.abs(left) / props.stackItemWidth * props.scaleRate).toFixed(2)));
-        return {
-          transform: `translate3d(${left}px,${props.verticalOffset ? `${left / props.stackItemWidth * props.stackItemHeight}px` : 0},0) scale(${scale})`,
-          transformOrigin: `${left > 0 ? 'right' : 'left'} ${props.verticalAlign}`,
-          zIndex: item.zIndex,
-          // opacity: total - item.zIndex === 0 ? 1 : 0.75,
-        };
+        const scale = Math.max(0, 1 - Number((Math.abs(lot) / stackItemSize * props.scaleRate).toFixed(2)));
+
+        if (!props.vertical) {
+          return {
+            transform: `translate3d(${lot}px,${props.verticalOffset ? `${lot / props.stackItemWidth * props.stackItemHeight}px` : 0},0) scale(${scale})`,
+            transformOrigin: `${lot > 0 ? 'right' : 'left'} ${props.verticalAlign}`,
+            zIndex: item.zIndex,
+            // opacity: total - item.zIndex === 0 ? 1 : 0.75,
+          };
+        } else {
+          return {
+            transform: `translate3d(0,${lot}px,0) scale(${scale})`,
+            transformOrigin: `${lot > 0 ? 'bottom' : 'top'}`,
+            zIndex: item.zIndex,
+            // opacity: total - item.zIndex === 0 ? 1 : 0.75,
+          };
+        }
       });
 
       renderData = {
@@ -246,6 +387,15 @@ export const StackCard = designComponent({
               return (
                 <ItemComp
                   {...mergeAttrs({ style: itemStyles[index] || {} }, Item.props)}
+                  destroyContent={(() => {
+                    if (!props.demandRender) {return false;}
+                    if (!props.vertical) {
+                      if (index === 0) {return false;}
+                    }
+                    if (isPrevOfClosetItem(index)) {return false;}
+                    if (isNextOfClosetItem(index)) {return false;}
+                    return !list.find(i => i.index === index);
+                  })()}
                   key={index}
                 />
               );
@@ -258,3 +408,9 @@ export const StackCard = designComponent({
 });
 
 export default StackCard;
+
+interface iStackItemDataMeta {
+  index: number,
+  startLot: number,
+  endLot: number
+}

package/src/packages/components/StackCard/stack-card.scss

@@ -2,6 +2,18 @@
   display: block;
   box-sizing: border-box;
 
+  &.stack-card-direction-vertical {
+    height: 100%;
+
+    .stack-card-container {
+      height: 100%
+    }
+
+    @include comp(stack-card-item) {
+      height: 100%
+    }
+  }
+
   .stack-card-container {
     position: relative;
     @include comp(stack-card-item) {

package/src/packages/components/StackCardItem/index.tsx

@@ -4,6 +4,7 @@ export const StackCardItem = designComponent({
   name: 'stack-card-item',
   props: {
     val: { type: [String, Number] },
+    destroyContent: { type: Boolean }
   },
   slots: ['default'],
   setup({ props, slots, event: { emit } }) {
@@ -14,7 +15,7 @@ export const StackCardItem = designComponent({
 
     return () => (
       <div className={classes.value}>
-        {slots.default()}
+        {!props.destroyContent && slots.default()}
       </div>
     );
   },