gypsy-crm-frontend-vu/components/cwg-rich-text.vue

<template>
    <rich-text :nodes="props.nodes" @itemclick="handleTap" />
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'

const props = defineProps({
    nodes: {
        type: String,
        default: ''
    }
})

// 🔥 核心：保留原有 a 标签样式 + 增加 data-href 实现点击
const formattedNodes = computed(() => {
    let html = props.nodes || ''
    // if (!html) return ''

    // // 替换 a 标签 → 保留所有原有样式，只加 data-href + cursor
    // html = html.replace(
    //     /<a([^>]+)>(.*?)<\/a>/gi,
    //     (match, attr, text) => {
    //         return `<span${attr} data-href="${getHref(attr)}" style="cursor:pointer;">${text}</span>`
    //     }
    // )

    return html
})

// 从 a 标签属性里提取 href
function getHref(attr: string) {
    const match = attr.match(/href\s*=\s*["']([^"']+)["']/i)
    return match ? match[1] : ''
}

// 点击跳转逻辑
const handleTap = (e) => {
    const href = e?.detail?.node?.attrs?.href
    if (!href) return
    // #ifdef H5
    window.open(href, '_blank')
    // #endif

    // #ifdef APP-PLUS
    if (href.startsWith('http')) {
        plus.runtime.openURL(href)
    } else {
        uni.navigateTo({ url: href })
    }
    // #endif
}
</script>

<style scoped>
/* 无需额外样式 */
</style>