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

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

    //内边距样式
    configPadding(obj, themeContext.theme.value, props.padding as any);
    //外边距样式
    configMargin(obj, themeContext.theme.value, props.margin as any);

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

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

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

    return obj
  });

  return {
    commonStyle
  }
}