From 55bf797dcc730b37bc691ebab2b51ff9db8ed245 Mon Sep 17 00:00:00 2001 From: zs <zhousong@weben-smart.com> Date: 周二, 06 5月 2025 17:37:23 +0800 Subject: [PATCH] 修改代码样式 --- HIAWms/web/src/provider/index.vue | 252 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 252 insertions(+), 0 deletions(-) diff --git a/HIAWms/web/src/provider/index.vue b/HIAWms/web/src/provider/index.vue new file mode 100644 index 0000000..526c17d --- /dev/null +++ b/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> -- Gitblit v1.9.3