xiangyuan-app/src/components/layout/BaseView.ts

import { computed } from "vue";
import { useTheme, type ThemePaddingMargin } from "../theme/ThemeDefine";
import type { FlexProps } from "./FlexView.vue";
import { configMargin, configPadding } from "../theme/ThemeTools";
import { ObjectUtils } from "@imengyu/imengyu-utils";

export function useBaseViewStyleBuilder(props: FlexProps) {
  

  const themeContext = useTheme();
  const commonStyle = computed(() => {
    const styleObj : Record<string, any> = {}; 
    styleObj.display = 'flex';
    styleObj.flexDirection = props.direction;
    styleObj.flexBasis = props.flexBasis;
    styleObj.flexGrow = props.flexGrow;
    styleObj.flexShrink = props.flexShrink;   
    styleObj.justifyContent = props.center ? (props.justify || 'center') : props.justify;
    styleObj.alignItems = props.center ? (props.align || 'center') : props.align;
    styleObj.position = props.position;
    styleObj.alignSelf = props.alignSelf;
    styleObj.flexWrap = props.wrap ? 'wrap' : 'nowrap';
    styleObj.backgroundColor = themeContext.resolveThemeColor(props.backgroundColor);
    styleObj.width = themeContext.resolveThemeSize(props.width);
    styleObj.height = themeContext.resolveThemeSize(props.height);
    styleObj.gap = !Array.isArray(props.gap) ? themeContext.resolveThemeSize(props.gap) : props.gap;
    styleObj.rowGap = Array.isArray(props.gap) ? themeContext.resolveSize(props.gap[0]) : undefined;
    styleObj.columnGap = Array.isArray(props.gap) ? themeContext.resolveSize(props.gap[1]) : undefined;
    styleObj.borderRadius = themeContext.resolveThemeSize(props.radius);
    styleObj.overflow = props.overflow;
    styleObj.border = props.border && !props.border.includes(' ') ? themeContext.getVar('border.' + props.border, undefined) : props.border;
    styleObj.borderColor = themeContext.resolveThemeColor(props.borderColor);
    styleObj.borderWidth = themeContext.resolveThemeSize(props.borderWidth);
    styleObj.borderStyle = props.borderStyle;
    styleObj.boxShadow = props.shadow ? themeContext.getVar('shadow.' + props.shadow, undefined) : undefined;
    styleObj.zIndex = props.zIndex;
    styleObj.pointerEvents = props.pointerEvents;

    //内边距样式
    configPadding(styleObj, themeContext, props.padding);
    //外边距样式
    configMargin(styleObj, themeContext, props.margin);

    if (props.innerStyle)
      ObjectUtils.cloneValuesToObject(props.innerStyle, styleObj);

    if (styleObj.paddingVertical) {
      if (styleObj.paddingTop === undefined)
        styleObj.paddingTop = styleObj.paddingVertical;
      if (styleObj.paddingBottom === undefined)
        styleObj.paddingBottom = styleObj.paddingVertical;
      delete styleObj.paddingVertical;
    }
    if (styleObj.paddingHorizontal) {
      if (styleObj.paddingLeft === undefined)
        styleObj.paddingLeft = styleObj.paddingHorizontal;
      if (styleObj.paddingRight === undefined)
        styleObj.paddingRight = styleObj.paddingHorizontal;
      delete styleObj.paddingHorizontal;
    }
    if (styleObj.marginVertical) {
      styleObj.marginTop = styleObj.marginVertical;
      styleObj.marginBottom = styleObj.marginVertical;
      delete styleObj.marginVertical;
    }
    if (styleObj.marginHorizontal) {
      styleObj.marginLeft = styleObj.marginHorizontal;
      styleObj.marginRight = styleObj.marginHorizontal;
      delete styleObj.marginHorizontal;
    }

    if (props.inset != undefined) {
      if (Array.isArray(props.inset)) {
        styleObj.top = themeContext.resolveThemeSize(props.inset[0]);
        styleObj.right = themeContext.resolveThemeSize(props.inset[1]);
        styleObj.bottom = themeContext.resolveThemeSize(props.inset[2]);
        styleObj.left = themeContext.resolveThemeSize(props.inset[3]);
      } else if (typeof props.inset === 'object') {
        styleObj.left = themeContext.resolveThemeSize(props.inset.l);
        styleObj.right = themeContext.resolveThemeSize(props.inset.r);
        styleObj.top = themeContext.resolveThemeSize(props.inset.t);
        styleObj.bottom = themeContext.resolveThemeSize(props.inset.b);
      } else {
        const v = themeContext.resolveThemeSize(props.inset);
        styleObj.left = v;
        styleObj.right = v;
        styleObj.top = v;
        styleObj.bottom = v;
      }
    }

    //绝对距样式
    if (typeof props.left !== 'undefined')
      styleObj.left = themeContext.resolveThemeSize(props.left);
    if (typeof props.right !== 'undefined')
      styleObj.right = themeContext.resolveThemeSize(props.right);
    if (typeof props.top !== 'undefined')
      styleObj.top = themeContext.resolveThemeSize(props.top);
    if (typeof props.bottom !== 'undefined')
      styleObj.bottom = themeContext.resolveThemeSize(props.bottom);
    if (typeof props.flex !== 'undefined')
      styleObj.flex = props.flex;
    return styleObj
  });

  return {
    commonStyle
  }
}