AI_Design/src/views/AIDesign/diagnoseResult.vue

<template>
    <div class="diagnosis-page AI-Design-container">
        <!-- 顶部导航 -->
        <div class="header">
            <van-nav-bar title="诊断结果" left-arrow @click-left="returnPage" @click-right="toHome">
                <template #right>
                    <van-icon name="wap-home-o" color="#333" size="26" />
                </template>
            </van-nav-bar>
        </div>
        <div>
            <!-- 历史诊断 -->
            <div class="history-section">
                <div class="history-header" @click="viewHistory">
                    <van-icon name="clock-o" color="#EC8868" />
                    <span>历史诊断</span>
                    <span v-if="!readState" class="badge-dot"></span>
                </div>
            </div>
            <section class="infoWrapper">
                <div v-if="canvasImg" class="canvasImgWrapper">
                    <img :src="canvasImg" alt="">
                </div>
                <!-- 诊断内容容器（用于生成图片） -->
                <div class="diagnosis-container" ref="diagnosisRef">
                    <div class="diagnosis-img-box">
                        <img src="../../assets/AIDesign/diagnoseTit.png" class="diagnoseTitBg">
                        <img class="diagnosis-image" :src="UserFilePathUrl" v-show="UserFilePathUrl"
                            @click="imgClick(UserFilePathUrl)" style="object-fit: contain;" />

                        <p v-show="!apiLoading && StateCode == 2">该建筑的墙面诊断报告如下，长按可保存分享</p>
                    </div>
                    <div class="diagnosis-content" v-if="!apiLoading && wallInfo && wallInfo.wallFinishing">
                        <div class="diagnosis-box">
                            <h2>
                                <van-icon name="play" color="#2484F2" size="24" class="triangle" />
                                墙面装修类型
                            </h2>
                            <div class="content-item">
                                <p class="item-desc">{{ wallInfo.wallFinishing }}</p>
                            </div>
                        </div>

                        <div class="diagnosis-box">
                            <h2>
                                <van-icon name="play" color="#2484F2" size="24" class="triangle" />
                                表面状况
                            </h2>
                            <div class="content-item" v-for="(item, index) in wallInfo.surfaceConditions"
                                :key="'surfaceConditions' + index">
                                <p class="item-desc"> {{ item }}</p>
                            </div>
                        </div>
                        <div class="diagnosis-box">
                            <h2>
                                <van-icon name="play" color="#2484F2" size="24" class="triangle" />
                                损坏说明
                            </h2>
                            <div class="content-item" v-for="(item, index) in wallInfo.damageNotes"
                                :key="'damageNotes' + index">
                                <p class="item-desc">{{ item }}</p>
                            </div>
                        </div>
                        <!-- 外墙-解决方案 -->
                        <section v-if="wallType === 'outside'">
                            <div class="diagnosis-box" v-if="wallInfo.Solutions && wallInfo.Solutions.length > 0">
                                <h2>
                                    <van-icon name="play" color="#2484F2" size="24" class="triangle" />
                                    解决方案
                                </h2>
                                <div class="content-item" v-for="(item, index) in wallInfo.Solutions"
                                    :key="'solutions' + index">
                                    <h3 class="item-title">{{ numberToChinese(index + 1) }}、{{ item.name }}</h3>
                                    <div class="item-desc" v-for="(items, indexs) in item.solution"
                                        :key="'solution' + indexs">
                                        <h4 class="items-title">{{ indexs + 1 }}.{{ items.title }}</h4>
                                        <p class="items-desc">{{ items.description }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="diagnosis-box" v-if="wallInfo.DetectionDetails  && wallInfo.DetectionDetails.length > 0">
                                <h2>
                                    <van-icon name="play" color="#2484F2" size="24" class="triangle" />
                                    墙病诊断详情
                                </h2>
                                <div class="content-item content-item-detectionDetails"
                                    v-for="(item, index) in wallInfo.DetectionDetails"
                                    :key="'detectionDetails' + index">
                                    <div class="reason-title">
                                        <div class="reason-title-l">{{ index + 1 }}.{{ item.Name }} </div>
                                    </div>
                                    <section>
                                        <!-- 原因分析 -->
                                        <div class="detail-title">原因分析</div>
                                        <div v-for="(cause, i) in item.Causes" :key="'causes' + i" :value="cause"
                                            class="detail-item">
                                            <van-icon name="location-o" />
                                            {{ cause }}
                                        </div>
                                        <!-- 潜在危害 -->
                                        <div class="detail-title">潜在危害</div>
                                        <div v-for="(hazard, i) in item.Hazards" :key="'hazards' + i" :value="hazard"
                                            class="detail-item hazard-item">
                                            <van-icon name="warning-o" />
                                            {{ hazard }}
                                        </div>
                                        <!-- 修复工艺 -->
                                        <div class="detail-title">推荐修复工艺</div>
                                        <div class="detail-item" v-for="(items, indexs) in item.RepairProcesses"
                                            :key="'RepairProcesses' + indexs">
                                            {{ indexs + 1 }}.{{ items }}
                                        </div>
                                    </section>
                                </div>
                            </div>
                        </section>
                        <!-- 内墙-墙病诊断详情 -->
                        <section v-if="wallType === 'inside'">
                            <div class="diagnosis-box">
                                <h2>
                                    <van-icon name="play" color="#2484F2" size="24" class="triangle" />
                                    墙病诊断详情
                                </h2>
                                <div class="content-item content-item-detectionDetails"
                                    v-for="(item, index) in wallInfo.detectionDetails"
                                    :key="'detectionDetails' + index">
                                    <div class="reason-title">
                                        <div class="reason-title-l">{{ index + 1 }}.{{ item.name }} </div>
                                    </div>
                                    <section>
                                        <!-- 原因分析 -->
                                        <div class="detail-title">原因分析</div>
                                        <div v-for="(cause, i) in item.causes" :key="'causes' + i" :value="cause"
                                            class="detail-item">
                                            <van-icon name="location-o" />
                                            {{ cause }}
                                        </div>
                                        <!-- 潜在危害 -->
                                        <div class="detail-title">潜在危害</div>
                                        <div v-for="(hazard, i) in item.hazards" :key="'hazards' + i" :value="hazard"
                                            class="detail-item hazard-item">
                                            <van-icon name="warning-o" />
                                            {{ hazard }}
                                        </div>
                                        <!-- 修复工艺 -->
                                        <div class="detail-title">推荐修复工艺</div>
                                        <div class="process-tags">
                                            <span v-for="(process, i) in item.repairProcesses"
                                                :key="'repairProcesses' + i" class="process-tag">
                                                {{ process }}
                                            </span>
                                        </div>
                                    </section>
                                </div>
                            </div>
                        </section>
                        <!-- 内墙-解决方案 -->
                        <section v-if="wallType === 'inside'">
                            <div class="diagnosis-box">
                                <h2>
                                    <van-icon name="play" color="#2484F2" size="24" class="triangle" />
                                    工艺说明
                                </h2>
                                <div class="content-item" v-for="(item, index) in wallInfo.solutions"
                                    :key="'solutions' + index">
                                    <h3 class="item-title">{{ numberToChinese(index + 1) }}、{{ item.name }}</h3>
                                    <p class="item-desc">{{ item.description }}</p>
                                </div>
                            </div>
                        </section>
                    </div>
                    <!-- 诊断中 -->
                    <div v-show="!apiLoading && StateCode == 1" class="diagnoseing-wrapper">
                        <h3>正在为您飞速诊断...</h3>
                        <ul>
                            <li>为了提供给您更好的诊断效果，请避免上传模糊、光线不佳、非{{ wallType == "outside" ? "外墙" : "内墙" }}的图片。</li>
                            <li>立邦AI诊断建议仅作参考，请结合专业人员现场复核。</li>
                            <li><span class="blod">无需等待</span>，诊断结果会由<span class="blod">企微推送</span>给您。</li>
                        </ul>
                    </div>
                    <!-- 诊断失败 -->
                    <div v-show="!apiLoading && (StateCode == 3 || StateCode == 4)" class="diagnoseing-wrapper">
                        <h3>{{ errDescription }}</h3>
                        <ul>
                            <li>为了提供给您更好的诊断效果，请避免上传模糊、光线不佳、非{{ wallType == "outside" ? "外墙" : "内墙" }}的图片。</li>
                            <li>立邦诊断仅作参考，请结合现场实际情况，由施工团队提出具体落地方案。</li>
                        </ul>
                        <p></p>
                    </div>
                </div>
            </section>

            <!-- 保存图片状态提示 -->
            <van-loading v-if="isSavingImage" class="save-loading" type="spinner" :text="savingText" />
            <!-- AI设计 -->
            <div class="generate-section" v-show="!apiLoading && StateCode === 2">
                <van-button type="primary" block @click="handleAIDesignClick" color="#2484F2">AI设计</van-button>
            </div>
            <div class="generate-section" v-show="!apiLoading && (StateCode === 3 || StateCode === 4)">
                <van-button type="primary" block @click="handleAgainClick" color="#2484F2">重新上传</van-button>
            </div>
        </div>

        <!-- 全屏加载遮罩 -->
        <div class="fullscreen-loading" v-if="isLoading">
            <van-loading type="spinner" color="#ffffff" size="50" />
            <p class="loading-text">诊断生成中...</p>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Ref, Watch } from 'vue-property-decorator';
import html2canvas from 'html2canvas';
import { NavBar, Button, Image, Loading, Empty, Toast, ImagePreview, Tag } from 'vant';
import { diagGetEntity, diagGetReadState, diagUpdateReadState } from "@/api/indexAI";
import { getWecomType, toLBHome, getWxconfig, checkAndSaveUserWecomType } from '@/utils/index';
import axios from "axios";
declare let wx: any;
@Component({
    components: {
        VanNavBar: NavBar,
        VanButton: Button,
        VanImage: Image,
        VanLoading: Loading,
        VanEmpty: Empty,
        VanToast: Toast,
        VanTag: Tag
    }
})
export default class DiagnosisPage extends Vue {
    @Ref('diagnosisRef') private diagnosisRef!: HTMLElement | null;
    private designPageApi = {
        outside: '/AIDesign/design',
        inside: '/AIDesign/insideDesign'
    };

    private agentFrom = window.localStorage.getItem('agentFromAI');
    private UserFilePathUrl = '';//用户原图
    private pollingTimer: number | null = null; // 轮询定时器引用
    private timer = null;
    private StateCode = null;
    private regenerateDisable = true;
    private readState = true;
    private wallType = '';
    private wallInfo = null;
    private isLoading = true; // 数据加载状态
    private apiLoading = true;// 接口加载状态
    private isSavingImage = false; // 图片保存状态
    private savingText = '正在保存图片...'; // 保存提示文字
    private errDescription = '图片模糊/光线不佳，请重新上传';
    private appearPosterFlag = true;
    private aiImg = "https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc_gen_image/7b6fbb743f984de4b6a2ed36e0b69c95preview.jpeg~tplv-a9rns2rl98-downsize_watermark_1_5_b.png?rcl=202511241033234D2C3B74A04216BD29F0&rk3s=8e244e95&rrcfp=ddbb2dc7&x-expires=2079311619&x-signature=LmTn71nSgdI%2F5kcqJ8L561SedVQ%3D"
    private longPressTimer: NodeJS.Timeout | null = null; // 长按计时器
    private canvasImg = null;
    // 页面挂载时请求数据
    created() {
        checkAndSaveUserWecomType();
        getWxconfig();
    }
    activated() {
        // 初始化数据
        this.initialize();
        this.GetReadStateFn();
        this.GetEntityDataFirst()
    }
    deactivated() {
        clearInterval(this.pollingTimer);
        clearTimeout(this.timer);
        clearTimeout(this.longPressTimer);
        this.pollingTimer = null;
        this.timer = null;
        this.longPressTimer = null;
        sessionStorage.removeItem("diagnoseSelectedImage")
    }
    // 初始化数据
    initialize() {
        clearInterval(this.pollingTimer);
        clearTimeout(this.timer);
        clearTimeout(this.longPressTimer);
        this.UserFilePathUrl = sessionStorage.getItem("diagnoseSelectedImage") || '';
        this.pollingTimer = null; // 轮询定时器引用
        this.timer = null;
        this.StateCode = null;
        this.regenerateDisable = true;
        this.readState = true;
        this.wallInfo = null;
        this.isLoading = true; // 数据加载状态
        this.apiLoading = true;
        this.isSavingImage = false; // 图片保存状态
        this.savingText = '正在保存图片...'; // 保存提示文字
        this.appearPosterFlag = true;
        this.longPressTimer = null; // 长按计时器 
        this.wallType = this.$route.query.wallType || 'outside';
    }
    //进入页面首次调用获取状态
    GetEntityDataFirst() {
        let that = this;
        const F_ID = this.$route.query.F_id || "";
        const formData = new FormData();
        formData.append('F_id', F_ID);
        diagGetEntity(formData).then(response => {
            if (response.StatusCode == 200) {
                if (response.Data == null) {
                    that.isLoading = false;
                    that.apiLoading = false;
                    that.regenerateDisable = true;
                    that.StateCode = 1;
                    if (that.timer) {
                        clearTimeout(that.timer);
                        that.timer = null;
                    }
                    that.timer = setTimeout(() => {
                        that.startPolling();
                    }, 20000);
                } else {
                    this.StateCode = response.Data.StateCode;
                    that.UserFilePathUrl = response.Data.F_UserFilePath;
                    const wallInfoObj = response.Data.wallInfo || '';
                    const WallRepairAnalysisObj = response.Data.WallRepairAnalysis || '';

                    if (this.wallType === 'outside') {
                        that.wallInfo = wallInfoObj;
                    } else if (this.wallType === 'inside') {
                        that.wallInfo = WallRepairAnalysisObj;
                    }
                    // that.isLoading = false;
                    that.apiLoading = false;
                    sessionStorage.removeItem("diagnoseSelectedImage");
                    // 生成图片
                    that.longPressTimer = setTimeout(() => {
                        that.handleLongPress();
                    }, 500);
                    if (response.Data.StateCode == 1) {
                        let createTime = new Date(response.Data.CreateDate);
                        let currentTime = new Date().getTime();
                        if (currentTime - createTime > 20000) {
                            that.startPolling();
                        } else {
                            if (that.timer) {
                                clearTimeout(that.timer);
                                that.timer = null;
                            }
                            that.timer = setTimeout(() => {
                                that.startPolling();
                            }, currentTime - createTime);
                        }
                    } else {
                        if (response.Data.StateCode == 2 || response.Data.StateCode == 3 || response.Data.StateCode == 4) {
                            that.regenerateDisable = false;
                            if (response.Data.Description) {
                                that.errDescription = response.Data.Description;
                            }
                        } else {
                            that.regenerateDisable = true;
                        }
                    }
                }
            } else {
                this.$toast.fail(response.Info);
                that.isLoading = false;
                that.apiLoading = false;
            }
        })
    }
    returnPage() {
        this.$router.push({ path: 'diagnose', query: { wallType: this.wallType } });
        // this.$router.back();
    }
    toHome() {
        toLBHome()
    }
    private startPolling(): void {
        // 立即执行一次检查
        this.GetEntityData();
        // 设置定时器每秒执行一次检查
        this.pollingTimer = window.setInterval(() => {
            if (!this.wallInfo) {
                if (this.StateCode == 3 || this.StateCode == 4) {
                    clearInterval(this.pollingTimer);
                    this.pollingTimer = null;
                } else {
                    this.GetEntityData();
                }

            } else {
                if (this.pollingTimer) {
                    clearInterval(this.pollingTimer);
                    this.pollingTimer = null;
                }
            }
        }, 3000);
    }
    GetEntityData() {
        let that = this;
        const F_ID = this.$route.query.F_id || "";
        const formData = new FormData();
        formData.append('F_id', F_ID);
        diagGetEntity(formData).then(response => {
            if (response.StatusCode == 200) {
                if (response.Data) {
                    this.StateCode = response.Data.StateCode;
                    that.UserFilePathUrl = response.Data.F_UserFilePath;
                    //   const regex = /^\d+\.\s*/; // 匹配数字+.+空格
                    if (this.wallType === 'outside') {
                        that.wallInfo = response.Data.wallInfo || '';
                    } else if (this.wallType === 'inside') {
                        that.wallInfo = response.Data.WallRepairAnalysis || '';
                    }
                    // that.isLoading = false;
                    that.apiLoading = false;
                    sessionStorage.removeItem("diagnoseSelectedImage");
                    // 生成图片
                    that.longPressTimer = setTimeout(() => {
                        that.handleLongPress();
                    }, 500);
                    if (response.Data.StateCode == 2 || response.Data.StateCode == 3 || response.Data.StateCode == 4) {
                        that.regenerateDisable = false;
                        if (response.Data.Description) {
                            that.errDescription = response.Data.Description;
                        }
                    } else {
                        that.regenerateDisable = true;
                    }
                } else {
                    that.regenerateDisable = true;
                }
            } else {
                that.isLoading = false;
                that.apiLoading = false;
                this.$toast.fail(response.Info);
            }
        })
    }

    imgClick(url) {
        ImagePreview([url]);
    }

    GetReadStateFn() {
        const formData = new FormData();
        // const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
        // formData.append('WXuserid', userInfo.loginName);
        // 0外墙 1内墙
        const Entrytype = this.wallType === 'inside' ? 1 : 0;
        formData.append('Entrytype', Entrytype);
        diagGetReadState(formData).then(response => {
            if (response.StatusCode == 200) {
                this.readState = response.Data.readState;
            }
        });
    }

    // 跳转AI设计页面
    private handleAIDesignClick() {
        // this.$router.push({ path: this.designPageApi[this.wallType], query: { from: 'diagnoseResult', diagnoseResultImg: this.UserFilePathUrl } });
        this.$router.push({ path: this.designPageApi[this.wallType], query: { from: 'diagnoseResult' } });
    }
    // 重新上传
    private handleAgainClick() {
        this.$router.push({ path: '/AIDesign/diagnose', query: { F_id: this.$route.query.F_id } });

    }
    // 历史生成
    private viewHistory() {
        this.UpdateReadStateFn();
        // 实现查看历史生成逻辑
        this.$router.push({ path: '/AIDesign/diagnoseHistory', query: { wallType: this.wallType } });
    }
    // 更新未读状态
    UpdateReadStateFn() {
        const formData = new FormData();
        // const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
        // formData.append('WXuserid', userInfo.loginName);
        // 0外墙 1内墙
        const Entrytype = this.wallType === 'inside' ? 1 : 0;
        formData.append('Entrytype', Entrytype);
        diagUpdateReadState(formData).then(response => { });
    }
    // 转化汉字排序
    private numberToChinese(num: number): string {
        const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
        if (num <= 10) {
            return chineseNumbers[num];
        }
        const shi = Math.floor(num / 10);
        const ge = num % 10;
        if (ge === 0) {
            return chineseNumbers[shi] + '十';
        } else {
            return chineseNumbers[shi] + '十' + chineseNumbers[ge];
        }
    }

    // 长按诊断区域生成图片
    private async handleLongPress(e: Event): void {
        let that = this;
        if (!this.diagnosisRef) {
            this.$toast('未找到诊断内容');
            that.isLoading = false;
            return;
        }
        // this.isSavingImage = true;
        try {
            // 使用html2canvas将DOM转为canvas
            const canvas = await html2canvas(this.diagnosisRef, {
                scale: 3, // 提高清晰度（2倍缩放）
                useCORS: true, // 允许跨域图片
                allowTaint: true,
                logging: true, // 关闭日志false
                backgroundColor: '#ffffff', // 背景色
            });

            // 转为图片URL
            const imageUrl = canvas.toDataURL('image/png');
            this.canvasImg = imageUrl;
            that.isLoading = false;
            clearTimeout(this.longPressTimer);
            this.longPressTimer = null;
            // 保存图片到手机
            // await this.saveImageToGallery(imageUrl);
            // this.savingText = '保存成功';
        } catch (error) {
            that.isLoading = false;
            // console.error('图片生成/保存失败:', error);
            // this.savingText = '保存失败';
            // this.$toast('保存失败，请重试');
        } finally {
            that.isLoading = false;
            // 延迟关闭加载提示，确保用户看到结果
            // setTimeout(() => {
            //     this.isSavingImage = false;
            //     this.savingText = '正在保存图片...';
            // }, 1500);
        }
    }

    // 保存图片到手机相册（适配移动端）
    private async saveImageToGallery(imageUrl: string) {
        // 1. 若在H5环境：创建a标签触发下载
        if (typeof window !== 'undefined') {
            const link = document.createElement('a');
            link.href = imageUrl;
            link.download = '墙面诊断报告.png';
            link.click();
            return;
        }
    }
}
</script>

<style scoped lang="scss">
.van-tag {
    margin-left: 34px;
    font-size: 14px;
    padding: 3px 10px 4px;
}

.margin-top-10 {
    margin-top: 10px;
}

.diagnosis-page {
    background-color: #f8f9fa;
    min-height: 100vh;
    flex-direction: column;

    // ul {
    //     list-style-type: disc;
    // }
    .history-section {
        margin: 10px 0;
        padding: 0 16px;
        height: 46px;

        .history-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background-color: #ffffff;
            border-radius: 8px;
            font-size: 14px;
        }

        .icon-clock {
            font-size: 12px;
            margin-right: 8px;
        }

        .history-header span {
            font-weight: 500;
            color: #EC8868;
        }

        .history-header .badge-dot {
            width: 5px;
            height: 5px;
            background-color: #ff4d4f;
            border-radius: 50%;
        }
    }

    .infoWrapper {
        position: relative;

        .canvasImgWrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    // 诊断内容容器（长按区域）
    .diagnosis-container {
        margin: 0 15px;
        padding: 20px 0;
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        position: relative;
        user-select: none;
        /* 可选：禁止选中文字 */

        // 诊断图片
        .diagnosis-img-box {
            padding: 0 20px;
            text-align: center;
            margin-bottom: 30px;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                display: block;
            }

            .diagnoseTitBg {
                width: 228px;
                height: auto;
                margin: 0 auto 15px;

            }

            .diagnosis-image {
                width: 60%;
                height: auto;
            }

            p {
                color: #86909C;
                font-size: 14px;
            }

        }

        // 内容列表
        .diagnosis-content {
            .diagnosis-box {
                // border-bottom: 1px solid #f0f0f0;
                margin-bottom: 15px;
                padding-bottom: 15px;

                h2 {
                    font-size: 20px;
                }

                .content-item {
                    margin-top: 10px;

                    &:last-child {
                        border-bottom: none;
                        margin-bottom: 0;
                        padding-bottom: 0;
                    }

                    .item-title {
                        font-size: 16px;
                        color: #333333;
                        margin: 15px 0 8px;
                        font-weight: bold;
                    }

                    .item-desc {
                        font-size: 14px;
                        color: #333;
                        line-height: 1.4;
                        margin: 10px 0;
                    }

                    .item-title,
                    .item-desc {
                        padding: 0 34px;

                    }

                    .items-title {
                        font-size: 14px;
                        margin-bottom: 8px;
                    }

                    .items-desc {
                        color: #696868;
                        padding: 0 10px;
                    }

                    .items-desc1 {
                        color: #333;
                    }
                }

                .content-item-detectionDetails {
                    padding: 0 34px;
                    margin-bottom: 30px;

                    .reason-title {
                        color: #333;
                        display: flex;
                        justify-content: space-between;
                        // align-items: center;
                        align-items: flex-start;

                        .reason-title-l {
                            margin: 5px 0 0 0;
                            font-size: 16px;
                            font-weight: 600;
                            color: #262626;
                            line-height: 30px;
                        }

                        .confidence-badge {
                            background: #f0f7ff;
                            border: 1px solid #91d5ff;
                            border-radius: 16px;
                            padding: 2px 6px;
                            font-size: 10px;
                            color: #1890ff;
                            white-space: nowrap;
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            cursor: help;
                            position: relative;
                            margin-top: 12px;
                        }

                    }

                    .detail-title {
                        font-size: 14px;
                        font-weight: 600;
                        color: #434343;
                        margin: 10px 0 8px 0;
                        display: flex;
                        align-items: center;

                    }

                    .detail-title::before {
                        content: '';
                        width: 4px;
                        height: 14px;
                        background: #1890ff;
                        border-radius: 2px;
                        margin-right: 6px;
                        margin-left: 4px;
                    }

                    .detail-item {
                        padding: 4px;
                        position: relative;
                        font-size: 14px;
                        line-height: 1.5;
                        color: #666;
                    }

                    .process-tags {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 6px;
                        padding: 0 4px;

                        .process-tag {
                            background: #ffffff;
                            border: 1px solid #EC8868;
                            color: #EC8868;
                            padding: 4px 12px;
                            border-radius: 16px;
                            font-size: 12px;
                            font-weight: 500;
                        }
                    }

                }
            }
        }

        // 加载状态
        .loading {
            display: block;
            margin: 40px auto;
        }
    }

    // 保存图片加载提示
    .save-loading {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.7);
        padding: 15px 20px;
        border-radius: 8px;
    }

    .generate-section {
        width: 90%;
        margin: 20px auto 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        overflow: hidden;
    }

    .fullscreen-loading {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7); // 半透明遮罩
        z-index: 9999; // 确保在最上层
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(7px);

        .loading-text {
            margin-top: 16px;
            color: #fff;
            font-size: 15px;
        }
    }

    // 诊断中
    .diagnoseing-wrapper {
        padding: 0 20px;
        text-align: left;

        h3 {
            font-size: 18px;
            font-weight: bold;

        }

        h5 {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-bottom: 6px;
        }

        ul {
            padding-top: 20px;
            font-size: 14px;
            list-style-type: disc;
            padding-left: 16px;

            li {
                line-height: 20px;

                .blod {
                    font-weight: bold;
                }
            }
        }
    }
}
</style>