feat: 接入 UserHome 前端业务代码（含真实 src/依赖，保留 projman 标准 CI）

2026-09-09 22:37:59 +08:00
parent a53ce07228
commit 4279f99be1
270 changed files with 12479 additions and 25715 deletions
@@ -0,0 +1,128 @@
+<template>
+    <Modal
+        v-model="isLightAppModalShow"
+        footer-hide
+        class-name="bsch-oepn-modal"
+        scrollable
+        :width="modalWidth"
+        :fullscreen="isFullscreen"
+        :title="modalTitle"
+        :transfer="false"
+        @on-cancel="handleModalCancel"
+    >
+        <template #header>
+            <div class="fix custom-title">
+                <div class="fl">{{ modalTitle }}</div>
+                <a class="fr" @click="isFullState = !isFullState">
+                    <Icon v-if="!isFullState" :size="18" type="ios-expand" />
+                    <Icon v-if="isFullState" :size="18" type="ios-contract" />
+                </a>
+            </div>
+        </template>
+        <div class="tc" :style="bschOpenIframeStyle" v-if="!!isLoading">
+            <img class="align-middle" style="width: 100px" :src="requireImg('page-loading.svg')" alt="" />
+        </div>
+        <iframe
+            v-if="isIframeShow"
+            v-show="!isLoading"
+            @load="onIframeLoad"
+            :style="bschOpenIframeStyle"
+            :src="iframeUrl"
+            frameborder="0"
+        ></iframe>
+    </Modal>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import mittBus from "@/utils/mitt";
+import { requireImg } from "@/utils/hook/useImg";
+import { LightAppModal } from "@/types";
+
+const isLightAppModalShow = ref(false),
+    isIframeShow = ref(false),
+    isLoading = ref(true),
+    modalWidth = ref(80),
+    modalHeight = ref(70),
+    modalTitle = ref(),
+    iframeUrl = ref();
+
+const isFullState = ref(false);
+const bschOpenIframeStyle = computed(() => {
+    if (isFullscreen.value)
+        return {
+            width: "100%",
+            height: "100%",
+            border: "none",
+        };
+    let height = ((document.documentElement.clientHeight - 52) * modalHeight.value) / 100;
+    return {
+        width: "100%",
+        height: height + "px",
+        border: "none",
+    };
+});
+
+const isFullscreen = computed(() => (modalWidth.value == 100 && modalHeight.value == 100) || !!isFullState.value);
+
+onMounted(function () {
+    mittBus.on("showLightAppModal", (params: LightAppModal) => {
+        const { title, url, width, height } = params;
+        isIframeShow.value = true;
+        isLoading.value = true;
+        modalTitle.value = title;
+        iframeUrl.value = url;
+        modalWidth.value = width;
+        modalHeight.value = height;
+        console.log(title, url, width, height);
+        isLightAppModalShow.value = true;
+        setTimeout(() => {
+            isLoading.value = false;
+        }, 300);
+    });
+});
+onUnmounted(function () {
+    mittBus.off("showLightAppModal");
+});
+
+function onIframeLoad() {
+    isLoading.value = false;
+}
+
+function handleModalCancel() {
+    setTimeout(() => {
+        isFullState.value = false;
+        isIframeShow.value = false;
+    }, 300);
+}
+</script>
+
+<style lang="scss">
+.bsch-oepn-modal {
+    iframe {
+        width: 100%;
+    }
+    .ivu-modal-body {
+        padding: 0;
+        max-height: inherit;
+    }
+}
+</style>
+
+<style lang="scss" scoped>
+.custom-title {
+    width: calc(100% - 30px);
+    line-height: 20px;
+    color: #17233d;
+    position: relative;
+    a {
+        color: #999 !important;
+        position: absolute;
+        top: 5px;
+        right: 0;
+        &:hover {
+            color: #17233d !important;
+        }
+    }
+}
+</style>