222

schangxiang@126.com

2025-05-06 38b161e4d52362081bfe78fb5b51fbf384db7ce2

 HIAWms/web/src/provider/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,252 @@
<template>
  <el-config-provider :namespace="namespace" :z-index="100" :locale="local">
    <!-- é¡µé¢ -->
    <div v-if="!notPage" class="widget_slot_page_content" v-bind="widgetProps">
      <template v-if="hasNested">
        <!-- è‡ªå®šä¹‰å¥—壳 -->
        <slot name="nested"></slot>
      </template>
      <!-- ç»„件 -->
      <template v-else>
        <slot v-bind="customProps"></slot>
      </template>
    </div>
    <!-- ç»„件 -->
    <slot v-else v-bind="widgetProps"></slot>
  </el-config-provider>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  ref,
  provide,
  watch,
  useSlots,
  h,
} from 'vue'
import { isNil } from 'lodash'
import 'element-plus/theme-chalk/src/message.scss'
import 'element-plus/theme-chalk/src/message-box.scss'
import 'element-plus/theme-chalk/src/notification.scss'
import 'element-plus/theme-chalk/src/loading.scss'
import sdk from 'sdk'
declare global {
  interface Window {
    __BUILD_INFO__: Record<string, any>
    __BUILD_TIME__: string
    __COMMIT__: string
    __BRANCH__: string
    __USER_NAME__: string
  }
}

export default defineComponent({
  name: 'Provider',
  props: {
    isApp: {
      type: Boolean,
    },
    widgetName: {
      type: String,
    },
    widgetProps: {
      type: Object,
      default: () => ({}),
    },
    isFullyCover: {
      type: Boolean,
      default: false,
    },
    defaultConfig: {
      type: Object,
      default: () => ({}),
    },
    notPage: {
      type: Boolean,
    },
    NestedComponents: {
      type: [Function, Object] as any,
    },
  },
  setup(props, { attrs }: { attrs: any }) {
    const { models } = sdk
    const { Language } = models
    const { local } = Language.useElementPlusI18n()
    const slots = useSlots()
    const hasNested = computed(() => {
      return slots.nested
    })
    const namespace = import.meta.env.VITE_APP_NAMESPACE
    provide('isApp', props.isApp)
    const notPage = computed(() => {
      return props.notPage
    })
    const background = computed(() => {
      const { background } = props.defaultConfig
      return props.isApp ? '#fff' : background || '#fff'
    })
    const width = computed(() => {
      const { width } = props.defaultConfig
      return props.isApp ? '100%' : width || '1920px'
    })
    const height = computed(() => {
      const { height } = props.defaultConfig
      return props.isApp ? '100%' : height || '1080px'
    })

    const widgetProps = computed(() => {
      return props.widgetProps
    })

    const padding = computed(() => {
      const { padding } = props.defaultConfig
      const paddingValue = isNil(padding) ? '12px 18px 0 18px' : padding
      return props.isFullyCover ? '0px' : paddingValue
    })

    const customProps = ref({})

    window.__BUILD_INFO__ = {
      // ç¼–译时间
      time: window.__BUILD_TIME__,
      // ç»„件版本
      // ç»„件名
      widgetName: props.widgetName || '-',
    }

    const onUpdateWidgetProps = () => {
      const o = { ...props.widgetProps }
      delete o.style
      customProps.value = {
        ...o,
      }
    }

    watch(() => props.widgetProps, onUpdateWidgetProps, {
      deep: true,
      immediate: true,
    })

    onMounted(() => {
      onUpdateWidgetProps()
    })

    return {
      attrs,
      namespace,
      width,
      local,
      widgetProps,
      customProps,
      padding,
      height,
      background,
      notPage,
      hasNested,
    }
  },
})
</script>
<style lang="scss">
.cs-message--error,
.cs-message--success,
.cs-message--warning,
.cs-message--info {
  padding: 12px;
  box-shadow: 0px 2px 6px 0px rgba(1, 1, 1, 0.43);

  .cs-message__icon {
    font-size: 20px;

    &::before {
      // content: '\e6a4';
      font-family: 'iconfont' !important;
      font-style: normal;
    }
  }

  .cs-message__content {
    color: #fff;
  }
}

.cs-message--error {
  background: #33242b;
  border: 1px solid #a45769;

  .cs-message__icon {
    color: var(--cms-color-warning-darker);

    &::before {
      content: '\e6c5';
    }
  }
}

.cs-message--success {
  background: #192f1d;
  border: 1px solid #57d05b;
  color: #fff;
  width: 380px;
  .cs-message__content {
    color: #fff;
    overflow-wrap: anywhere;
  }
  .cs-message__icon {
    color: #57d05b;

    &::before {
      content: '\e6c7';
    }
  }
}

.cs-message--warning {
  background: #382c21;
  border: 1px solid #febf72;
  width: 380px;
  .cs-message__content {
    color: #fff;
    overflow-wrap: anywhere;
  }
  .cs-message__icon {
    color: #febf72;

    &::before {
      content: '\e6c6';
    }
  }
}

.cs-message--info {
  background: #333;
  border: 1px solid #111;
  width: 380px;
  .cs-message__content {
    color: #fff;
    overflow-wrap: anywhere;
  }
  .cs-message__icon {
    color: #fff;

    &::before {
      content: '\e6c6';
    }
  }
}
:root {
  --cs-disabled-bg-color: #f5f7fa;
  --cs-fill-color-light: #e8e8e8;
  --cs-disabled-text-color: #5c5c5c;
}
</style>
<style lang="scss" scoped>
.widget_slot_page_content {
  width: v-bind(width);
  padding: v-bind(padding);
  background: v-bind(background);
  height: v-bind(height);
}
</style>