AI回复内容，岗位卡片的点击事件绑定问题解决

components/md-render/md-render.vue

@@ -2,17 +2,44 @@
     <view class="markdown-body">
         <!-- 根据不同平台使用不同的渲染方式 -->
         <!-- #ifdef MP-WEIXIN -->
-        <rich-text class="markdownRich" id="markdown-content" :nodes="renderedHtml" @itemclick="handleItemClick" />
+        <!-- 微信小程序端：使用v-for遍历岗位卡片列表，每个卡片单独渲染，支持点击事件 -->
+        <scroll-view class="markdownRich" id="markdown-content">
+            <!-- 渲染普通markdown内容 -->
+            <rich-text :nodes="renderedHtml" />
+            
+            <!-- 单独渲染岗位卡片，支持点击事件 -->
+            <view v-if="localJobCardsList.length > 0" class="job-cards-container">
+                <view 
+                    v-for="(card, index) in localJobCardsList" 
+                    :key="index"
+                    class="custom-card"
+                    @tap="navigateToJobDetail(card.jobId)"
+                >
+                    <view class="card-title">
+                        <text class="title-text">{{ card.jobTitle }}</text>
+                        <view class="card-salary">{{ card.salary }}</view>
+                    </view>
+                    <view class="card-company">{{ card.location }}·{{ card.companyName }}</view>
+                    <view class="card-info">
+                        <view class="info-item">
+                            <view class="card-tag">{{ card.education }}</view>
+                            <view class="card-tag">{{ card.experience }}</view>
+                        </view>
+                        <view class="info-item">查看详情<view class="position-nav"></view></view>
+                    </view>
+                </view>
+            </view>
+        </scroll-view>
         <!-- #endif -->
         <!-- #ifndef MP-WEIXIN -->
-        <view class="markdown-body" v-html="renderedHtml"></view>
+        <view class="markdown-body" v-html="renderedHtml" @click="handleH5Click"></view>
         <!-- #endif -->
     </view>
 </template>
 
 <script setup>
-import { computed, onMounted, inject } from 'vue';
+import { computed, onMounted, inject, ref, watch, nextTick } from 'vue';
-import { parseMarkdown, codeDataList } from '@/utils/markdownParser';
+import { parseMarkdown, codeDataList, jobCardsList } from '@/utils/markdownParser';
 const { navTo } = inject('globalFunction');
 const props = defineProps({
     content: {
@@ -26,30 +53,191 @@ const props = defineProps({
 });
 
 const renderedHtml = computed(() => parseMarkdown(props.content));
+const markdownContainer = ref(null);
+// 响应式岗位卡片列表，用于微信小程序端单独渲染
+const localJobCardsList = ref([]);
 
-const handleItemClick = (e) => {
+// 监听content的变化，当内容更新时，解析岗位卡片
-    let { attrs } = e.detail.node;
+watch(() => props.content, (newContent) => {
-    console.log(attrs);
+    if (newContent) {
-    let { 'data-copy-index': codeDataIndex, 'data-job-id': jobId, class: className } = attrs;
+        // 直接调用parseMarkdown来触发jobCardsList的更新
-    switch (className) {
+        parseMarkdown(newContent);
-        case 'custom-card':
+        // 将解析器生成的岗位卡片列表赋值给响应式数据
-            return navTo('/packageA/pages/post/post?jobId=' + jobId);
+        localJobCardsList.value = [...jobCardsList];
-        case 'custom-more':
+        console.log('Content changed, jobCardsList updated:', localJobCardsList.value);
-            return navTo('/packageA/pages/moreJobs/moreJobs?jobId=' + jobId);
+    }
-        case 'copy-btn':
+}, { immediate: true });
-            uni.setClipboardData({
+
-                data: codeDataList[codeDataIndex],
+// 同时监听renderedHtml的变化作为备份
-                showToast: false,
+watch(() => renderedHtml.value, (newVal) => {
-                success() {
+    console.log('renderedHtml changed, jobCardsList from parser:', jobCardsList);
-                    uni.showToast({
+    // 将解析器生成的岗位卡片列表赋值给响应式数据
-                        title: '复制成功',
+    localJobCardsList.value = [...jobCardsList];
-                        icon: 'none',
+});
-                    });
+
-                },
+// 微信小程序端导航到岗位详情页面
-            });
+const navigateToJobDetail = (jobId) => {
-            break;
+    console.log('navigateToJobDetail called with jobId:', jobId);
+    if (jobId && jobId !== 'undefined' && jobId !== 'null') {
+        // 跳转到岗位详情页面
+        uni.navigateTo({
+            url: `/packageA/pages/post/post?jobId=${jobId}`,
+            success: (res) => {
+                console.log('navigateTo success:', res);
+            },
+            fail: (err) => {
+                console.error('navigateTo failed:', err);
+                // 如果navigateTo失败，尝试redirectTo
+                uni.redirectTo({
+                    url: `/packageA/pages/post/post?jobId=${jobId}`,
+                    success: (res2) => {
+                        console.log('redirectTo success:', res2);
+                    },
+                    fail: (err2) => {
+                        console.error('redirectTo also failed:', err2);
+                        // 如果还是失败，显示错误提示
+                        uni.showToast({
+                            title: '跳转失败，请稍后重试',
+                            icon: 'none'
+                        });
+                    }
+                });
+            }
+        });
+    } else {
+        console.error('Invalid jobId:', jobId);
+        uni.showToast({
+            title: '岗位信息不完整',
+            icon: 'none'
+        });
     }
 };
+
+// 微信小程序端点击事件处理已移除，改用v-for遍历岗位卡片列表，每个卡片单独渲染，支持点击事件
+// 微信小程序端和H5端的jobId取值方式一致，都是从JSON数据的appJobUrl字段提取
+// 不同的是，微信小程序端现在使用v-for遍历渲染，而H5端使用v-html渲染
+
+// H5平台点击事件处理
+// 微信小程序端和H5端的jobId取值方式一致，都是从JSON数据的appJobUrl字段提取
+// 不同的是，H5端可以直接从DOM属性获取，而微信小程序端使用v-for遍历渲染
+const handleH5Click = (e) => {
+    console.log('H5 click event triggered:', e.target);
+    let target = e.target;
+    // 查找最接近的带有class的元素
+    while (target && target.tagName !== 'BODY') {
+        console.log('Checking target:', target, 'className:', target.className, 'tagName:', target.tagName);
+        
+        // 直接使用closest方法查找，不依赖className
+        const cardElement = target.closest('.custom-card');
+        const moreElement = target.closest('.custom-more');
+        
+        console.log('Found elements:', { cardElement, moreElement });
+        
+        if (cardElement) {
+            // 尝试多种方式获取jobId
+            let jobId = cardElement.getAttribute('data-job-id');
+            console.log('Found custom-card, data-job-id attribute:', jobId);
+            
+            // 如果data-job-id为空，尝试从onclick事件中提取jobId
+            if (!jobId) {
+                const onclick = cardElement.getAttribute('onclick');
+                if (onclick) {
+                    const match = onclick.match(/jobId=(\w+)/);
+                    if (match && match[1]) {
+                        jobId = match[1];
+                        console.log('Extracted jobId from onclick:', jobId);
+                    }
+                }
+            }
+            
+            if (jobId) {
+                console.log('Final jobId for navigation:', jobId);
+                try {
+                    // 直接使用uni.navigateTo，避免navTo函数的潜在问题
+                    uni.navigateTo({
+                        url: `/packageA/pages/post/post?jobId=${jobId}`,
+                        success: (res) => {
+                            console.log('navigateTo success:', res);
+                        },
+                        fail: (err) => {
+                            console.error('navigateTo failed:', err);
+                            // 如果navigateTo失败，尝试redirectTo
+                            uni.redirectTo({
+                                url: `/packageA/pages/post/post?jobId=${jobId}`,
+                                success: (res2) => {
+                                    console.log('redirectTo success:', res2);
+                                },
+                                fail: (err2) => {
+                                    console.error('redirectTo also failed:', err2);
+                                }
+                            });
+                        }
+                    });
+                } catch (error) {
+                    console.error('Navigation error:', error);
+                }
+                return;
+            } else {
+                console.error('No jobId found for custom-card');
+            }
+        } else if (moreElement) {
+            // 尝试多种方式获取jobId
+            let jobId = moreElement.getAttribute('data-job-id');
+            console.log('Found custom-more, data-job-id attribute:', jobId);
+            
+            // 如果data-job-id为空，尝试从onclick事件中提取jobId
+            if (!jobId) {
+                const onclick = moreElement.getAttribute('onclick');
+                if (onclick) {
+                    const match = onclick.match(/jobId=(\w+)/);
+                    if (match && match[1]) {
+                        jobId = match[1];
+                        console.log('Extracted jobId from onclick:', jobId);
+                    }
+                }
+            }
+            
+            if (jobId) {
+                console.log('Final jobId for more jobs:', jobId);
+                try {
+                    // 直接使用uni.navigateTo，避免navTo函数的潜在问题
+                    uni.navigateTo({
+                        url: `/packageA/pages/moreJobs/moreJobs?jobId=${jobId}`,
+                        success: (res) => {
+                            console.log('navigateTo success:', res);
+                        },
+                        fail: (err) => {
+                            console.error('navigateTo failed:', err);
+                            // 如果navigateTo失败，尝试redirectTo
+                            uni.redirectTo({
+                                url: `/packageA/pages/moreJobs/moreJobs?jobId=${jobId}`,
+                                success: (res2) => {
+                                    console.log('redirectTo success:', res2);
+                                },
+                                fail: (err2) => {
+                                    console.error('redirectTo also failed:', err2);
+                                }
+                            });
+                        }
+                    });
+                } catch (error) {
+                    console.error('Navigation error:', error);
+                }
+                return;
+            } else {
+                console.error('No jobId found for custom-more');
+            }
+        }
+        
+        target = target.parentElement;
+    }
+};
+
+// 移除旧的事件监听逻辑，改用全局点击处理
+
+onMounted(() => {
+    console.log('onMounted called');
+});
 </script>
 
 <style lang="scss">
@@ -322,107 +510,422 @@ ol {
     padding: 0
 /* #endif */
 
+/* H5端和小程序端样式优化 */
 .custom-card
-    background: #FFFFFF
+    background: #FFFFFF !important
-    box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04)
+    box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04) !important
-    border-radius: 20rpx
+    border-radius: 20rpx !important
-    padding: 28rpx 24rpx
+    padding: 28rpx 24rpx !important
-    font-weight: 400
+    font-weight: 400 !important
-    font-size: 28rpx
+    font-size: 28rpx !important
-    color: #333333
+    color: #333333 !important
-    margin-bottom: 20rpx
+    margin-bottom: 22rpx !important
-    position: relative
+    position: relative !important
-    display: flex
+    display: block !important
-    flex-direction: column
+    flex-direction: column !important
-    /* 确保在小程序中边距正确应用 */
+    /* 确保在所有平台中边距正确应用 */
-    /* #ifdef MP-WEIXIN */
+    margin-left: auto !important
-    margin-left: auto
+    margin-right: auto !important
-    margin-right: auto
+    width: 100% !important
-    width: 100%
+    box-sizing: border-box !important
-    box-sizing: border-box
+    text-decoration: none !important
-    /* #endif */
+    overflow: hidden !important
-    
-    .card-title
-        font-weight: 600
-        display: flex
-        align-items: center
-        justify-content: space-between
-        margin-bottom: 16rpx
-        
-        .title-text
-            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif
-            max-width: calc(100% - 160rpx)
-            overflow: hidden
-            text-overflow: ellipsis
-            font-size: 30rpx
-            line-height: 1.4
-        
-        .card-salary
-            font-family: DIN-Medium
-            font-size: 28rpx
-            color: #FF6E1C
-            line-height: 1.4
 
-    .card-company
+.custom-card .card-title
-        margin-bottom: 22rpx
+    font-weight: 600 !important
-        max-width: 100%
+    display: flex !important
-        overflow: hidden
+    align-items: center !important
-        text-overflow: ellipsis
+    justify-content: space-between !important
-        color: #6C7282
+    margin-bottom: 16rpx !important
-        line-height: 1.4
+
+.custom-card .card-title .title-text
+    font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif !important
+    max-width: calc(100% - 160rpx) !important
+    overflow: hidden !important
+    text-overflow: ellipsis !important
+    font-size: 32rpx !important
+    line-height: 1.4 !important
+    white-space: nowrap !important
+    margin-bottom: 0 !important
+
+.custom-card .card-title .card-salary
+    font-family: DIN-Medium !important
+    font-size: 32rpx !important
+    color: #4C6EFB !important
+    line-height: 1.4 !important
+    font-weight: 500 !important
+    margin-bottom: 0 !important
+
+.custom-card .card-company
+    margin-bottom: 18rpx !important
+    max-width: 100% !important
+    overflow: hidden !important
+    text-overflow: ellipsis !important
+    color: #6C7282 !important
+    line-height: 1.4 !important
+    white-space: nowrap !important
+    font-size: 28rpx !important
+    margin-top: 0 !important
+    display: block !important
+
+.custom-card .card-tags
+    display: flex !important
+    flex-wrap: wrap !important
+    margin-bottom: 24rpx !important
+
+.custom-card .card-tag
+    font-weight: 400 !important
+    font-size: 24rpx !important
+    color: #6C7282 !important
+    width: fit-content !important
+    background: #F4F4F4 !important
+    border-radius: 4rpx !important
+    padding: 6rpx 20rpx !important
+    margin-right: 20rpx !important
+    margin-bottom: 14rpx !important
+    display: inline-flex !important
+    align-items: center !important
+    justify-content: center !important
+    height: 30rpx !important
+    line-height: 30rpx !important
+
+.custom-card .card-bottom
+    display: flex !important
+    justify-content: space-between !important
+    font-size: 24rpx !important
+    color: #6C7282 !important
+    margin-top: 0 !important
+    margin-bottom: 0 !important
+
+.custom-card .card-bottom .info-item
+    display: flex !important
+    align-items: center !important
+    justify-content: center !important
+    margin-bottom: 0 !important
+
+.custom-card .card-info
+    display: flex !important
+    align-items: center !important
+    justify-content: space-between !important
+    padding-right: 40rpx !important
+
+.custom-card .card-info .info-item
+    display: flex !important
+    position: relative !important
+    align-items: center !important
+
+.custom-card .card-info .info-item:last-child
+    color: #256BFA !important
+    font-size: 28rpx !important
+    padding-right: 10rpx !important
+
+.custom-card .position-nav
+    position: absolute !important
+    right: -10rpx !important
+    top: 50% !important
+    transform: translateY(-50%) !important
+
+.custom-card .position-nav::before
+    position: absolute !important
+    left: 0 !important
+    top: -4rpx !important
+    content: '' !important
+    width: 4rpx !important
+    height: 16rpx !important
+    border-radius: 2rpx !important
+    background: #256BFA !important
+    transform: translate(0, -50%) rotate(-45deg) !important
+
+.custom-card .position-nav::after
+    position: absolute !important
+    left: 0 !important
+    top: -4rpx !important
+    content: '' !important
+    width: 4rpx !important
+    height: 16rpx !important
+    border-radius: 2rpx !important
+    background: #256BFA !important
+    transform: rotate(45deg) !important
+
+/* 为微信小程序专门优化的样式选择器 */
+/* #ifdef MP-WEIXIN */
+.job-cards-container .custom-card
+    background: #FFFFFF !important
+    box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04) !important
+    border-radius: 20rpx !important
+    padding: 28rpx 24rpx !important
+    font-weight: 400 !important
+    font-size: 28rpx !important
+    color: #333333 !important
+    margin-bottom: 22rpx !important
+    position: relative !important
+    display: block !important
+    flex-direction: column !important
+    margin-left: auto !important
+    margin-right: auto !important
+    width: 100% !important
+    box-sizing: border-box !important
+    text-decoration: none !important
+    overflow: hidden !important
+
+.job-cards-container .custom-card .card-title
+    font-weight: 600 !important
+    display: flex !important
+    align-items: center !important
+    justify-content: space-between !important
+    margin-bottom: 16rpx !important
+
+.job-cards-container .custom-card .card-title .title-text
+    font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif !important
+    max-width: calc(100% - 160rpx) !important
+    overflow: hidden !important
+    text-overflow: ellipsis !important
+    font-size: 32rpx !important
+    line-height: 1.4 !important
+    white-space: nowrap !important
+    margin-bottom: 0 !important
+
+.job-cards-container .custom-card .card-title .card-salary
+    font-family: DIN-Medium !important
+    font-size: 32rpx !important
+    color: #4C6EFB !important
+    line-height: 1.4 !important
+    font-weight: 500 !important
+    margin-bottom: 0 !important
+
+.job-cards-container .custom-card .card-company
+    margin-bottom: 18rpx !important
+    max-width: 100% !important
+    overflow: hidden !important
+    text-overflow: ellipsis !important
+    color: #6C7282 !important
+    line-height: 1.4 !important
+    white-space: nowrap !important
+    font-size: 28rpx !important
+    margin-top: 0 !important
+    display: block !important
+
+.job-cards-container .custom-card .card-info
+    display: flex !important
+    align-items: center !important
+    justify-content: space-between !important
+    padding-right: 40rpx !important
+
+.job-cards-container .custom-card .card-info .info-item
+    display: flex !important
+    position: relative !important
+    align-items: center !important
+
+.job-cards-container .custom-card .card-info .info-item:last-child
+    color: #256BFA !important
+    font-size: 28rpx !important
+    padding-right: 10rpx !important
+
+.job-cards-container .custom-card .card-info .info-item .card-tag
+    font-weight: 400 !important
+    font-size: 24rpx !important
+    color: #6C7282 !important
+    width: fit-content !important
+    background: #F4F4F4 !important
+    border-radius: 4rpx !important
+    padding: 6rpx 20rpx !important
+    margin-right: 20rpx !important
+    margin-bottom: 14rpx !important
+    display: inline-flex !important
+    align-items: center !important
+    justify-content: center !important
+    height: 30rpx !important
+    line-height: 30rpx !important
+
+.job-cards-container .custom-card .position-nav
+    position: absolute !important
+    right: -10rpx !important
+    top: 50% !important
+    transform: translateY(-50%) !important
+
+.job-cards-container .custom-card .position-nav::before
+    position: absolute !important
+    left: 0 !important
+    top: -4rpx !important
+    content: '' !important
+    width: 4rpx !important
+    height: 16rpx !important
+    border-radius: 2rpx !important
+    background: #256BFA !important
+    transform: translate(0, -50%) rotate(-45deg) !important
+
+.job-cards-container .custom-card .position-nav::after
+    position: absolute !important
+    left: 0 !important
+    top: -4rpx !important
+    content: '' !important
+    width: 4rpx !important
+    height: 16rpx !important
+    border-radius: 2rpx !important
+    background: #256BFA !important
+    transform: rotate(45deg) !important
+/* #endif */
+
+/* 额外的H5端样式优化 */
+/* #ifndef MP-WEIXIN */
+/* 确保样式能正确应用到v-html生成的内容，使用深度选择器 */
+.markdown-body {
+    /* 确保样式能正确应用到v-html生成的内容 */
+    & > div {
+        display: flex !important;
+        flex-direction: column !important;
+    }
     
-    .card-info
+    /* 为v-html生成的a标签添加样式，使用!important确保优先级 */
-        display: flex
+    & > div > a.custom-card,
-        align-items: center
+    & > a.custom-card,
-        justify-content: space-between
+    & * > a.custom-card,
-        padding-right: 40rpx
+    & * * > a.custom-card {
-        
+        display: block !important;
-        .info-item
+        margin-bottom: 22rpx !important;
-            display: flex
+        background: #FFFFFF !important;
-            position: relative
+        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04) !important;
-            align-items: center
+        border-radius: 20rpx !important;
-            
+        padding: 28rpx 24rpx !important;
-            &:last-child
+        font-weight: 400 !important;
-                color: #256BFA
+        font-size: 28rpx !important;
-                font-size: 28rpx
+        color: #333333 !important;
-                padding-right: 10rpx
+        text-decoration: none !important;
+        overflow: hidden !important;
+    }
     
-    .position-nav
+    /* 为v-html生成的内容添加样式 */
-        position: absolute
+    & > div > a.custom-card .card-title,
-        right: -10rpx
+    & > a.custom-card .card-title,
-        top: 50%
+    & * > a.custom-card .card-title,
-        transform: translateY(-50%)
+    & * * > a.custom-card .card-title {
+        font-weight: 600 !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        margin-bottom: 16rpx !important;
+    }
     
-    .position-nav::before
+    & > div > a.custom-card .card-title .title-text,
-        position: absolute
+    & > a.custom-card .card-title .title-text,
-        left: 0
+    & * > a.custom-card .card-title .title-text,
-        top: -4rpx
+    & * * > a.custom-card .card-title .title-text {
-        content: ''
+        font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif !important;
-        width: 4rpx
+        font-size: 32rpx !important;
-        height: 16rpx
+        line-height: 1.4 !important;
-        border-radius: 2rpx
+        color: #333333 !important;
-        background: #256BFA
+        max-width: calc(100% - 160rpx) !important;
-        transform: translate(0, -50%) rotate(-45deg)
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        margin-bottom: 0 !important;
+    }
     
-    .position-nav::after
+    & > div > a.custom-card .card-title .card-salary,
-        position: absolute
+    & > a.custom-card .card-title .card-salary,
-        left: 0
+    & * > a.custom-card .card-title .card-salary,
-        top: -4rpx
+    & * * > a.custom-card .card-title .card-salary {
-        content: ''
+        font-family: DIN-Medium !important;
-        width: 4rpx
+        font-size: 32rpx !important;
-        height: 16rpx
+        color: #4C6EFB !important;
-        border-radius: 2rpx
+        line-height: 1.4 !important;
-        background: #256BFA
+        font-weight: 500 !important;
-        transform: rotate(45deg)
+        margin-bottom: 0 !important;
+    }
     
-    .card-tag
+    & > div > a.custom-card .card-company,
-        font-weight: 500
+    & > a.custom-card .card-company,
-        font-size: 24rpx
+    & * > a.custom-card .card-company,
-        color: #333333
+    & * * > a.custom-card .card-company {
-        width: fit-content
+        margin-bottom: 18rpx !important;
-        background: #F4F4F4
+        font-size: 28rpx !important;
-        border-radius: 4rpx
+        color: #6C7282 !important;
-        padding: 4rpx 20rpx
+        line-height: 1.4 !important;
-        margin-right: 16rpx
+        max-width: 100% !important;
-        margin-bottom: 0
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        margin-top: 0 !important;
+        display: block !important;
+    }
+    
+    & > div > a.custom-card .card-tags,
+    & > a.custom-card .card-tags,
+    & * > a.custom-card .card-tags,
+    & * * > a.custom-card .card-tags {
+        display: flex !important;
+        flex-wrap: wrap !important;
+        margin-bottom: 24rpx !important;
+    }
+    
+    & > div > a.custom-card .card-tag,
+    & > a.custom-card .card-tag,
+    & * > a.custom-card .card-tag,
+    & * * > a.custom-card .card-tag {
+        font-weight: 400 !important;
+        font-size: 24rpx !important;
+        color: #6C7282 !important;
+        width: fit-content !important;
+        background: #F4F4F4 !important;
+        border-radius: 4rpx !important;
+        padding: 6rpx 20rpx !important;
+        margin-right: 20rpx !important;
+        margin-bottom: 14rpx !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        height: 30rpx !important;
+        line-height: 30rpx !important;
+    }
+    
+    & > div > a.custom-card .card-bottom,
+    & > a.custom-card .card-bottom,
+    & * > a.custom-card .card-bottom,
+    & * * > a.custom-card .card-bottom {
+        display: flex !important;
+        justify-content: space-between !important;
+        font-size: 24rpx !important;
+        color: #6C7282 !important;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+    
+    & > div > a.custom-card .card-bottom .info-item,
+    & > a.custom-card .card-bottom .info-item,
+    & * > a.custom-card .card-bottom .info-item,
+    & * * > a.custom-card .card-bottom .info-item {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        margin-bottom: 0 !important;
+    }
+    
+    & > div > a.custom-card .card-info,
+    & > a.custom-card .card-info,
+    & * > a.custom-card .card-info,
+    & * * > a.custom-card .card-info {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        padding-right: 40rpx !important;
+    }
+    
+    & > div > a.custom-card .card-info .info-item,
+    & > a.custom-card .card-info .info-item,
+    & * > a.custom-card .card-info .info-item,
+    & * * > a.custom-card .card-info .info-item {
+        display: flex !important;
+        align-items: center !important;
+    }
+    
+    & > div > a.custom-card .card-info .info-item:last-child,
+    & > a.custom-card .card-info .info-item:last-child,
+    & * > a.custom-card .card-info .info-item:last-child,
+    & * * > a.custom-card .card-info .info-item:last-child {
+        color: #256BFA !important;
+        font-size: 28rpx !important;
+        padding-right: 10rpx !important;
+    }
+}
+/* #endif */
 </style>

utils/markdownParser.js

@@ -1,157 +1,194 @@
-import MarkdownIt from '@/lib/markdown-it.min.js';
+import MarkdownIt from '@/lib/markdown-it.min.js';
-import hljs from "@/lib/highlight/highlight-uni.min.js";
+import hljs from "@/lib/highlight/highlight-uni.min.js";
-import parseHtml from '@/lib/html-parser.js';
+import parseHtml from '@/lib/html-parser.js';
-// import DOMPurify from '@/lib/dompurify@3.2.4es.js';
+// import DOMPurify from '@/lib/dompurify@3.2.4es.js';
-
+
-export let codeDataList = []
+export let codeDataList = []
-export let jobMoreMap = new Map()
+export let jobMoreMap = new Map()
-
+export let jobCardsList = []
-const md = new MarkdownIt({
+
-    html: true, // 允许 HTML 标签
+const md = new MarkdownIt({
-    linkify: true, // 自动解析 URL
+    html: true, // 允许 HTML 标签
-    typographer: true, // 美化标点符号
+    linkify: true, // 自动解析 URL
-    tables: true,
+    typographer: true, // 美化标点符号
-    breaks: true, // 让 \n 自动换行
+    tables: true,
-    langPrefix: 'language-', // 代码高亮前缀
+    breaks: true, // 让 \n 自动换行
-    // 如果结果以 <pre ... 开头，内部包装器则会跳过。
+    langPrefix: 'language-', // 代码高亮前缀
-    highlight: function(str, lang) {
+    // 如果结果以 <pre ... 开头，内部包装器则会跳过。
-        if (lang === 'job-json') {
+    highlight: function(str, lang) {
-            const result = safeExtractJson(str);
+        if (lang === 'job-json') {
-            if (result) { // json解析成功
+            const result = safeExtractJson(str);
-                const jobId = result.appJobUrl.split('jobId=')[1]
+            if (result) { // json解析成功
-                let domContext = `<a class="custom-card" data-job-id="${jobId}"><div class="card-title"><span class="title-text">${result.jobTitle}</span><div class="card-salary">${result.salary}</div></div><div class="card-company">${result.location}·${result.companyName}</div><div class="card-info"><div class="info-item"><div class="card-tag">${result.education}</div><div class="card-tag">${result.experience}</div></div><div class="info-item">查看详情<div class="position-nav"></div></div></div></a>`
+                let jobId = result.appJobUrl;
-                if (result.data) {
+                // If appJobUrl contains 'jobId=', extract the value after it, otherwise use it directly
-                    jobMoreMap.set(jobId, result.data)
+                if (jobId && jobId.includes('jobId=')) {
-                    domContext += `<a class="custom-more" data-job-id="${jobId}">查看更多岗位<div class="more-icon"></div></a>`
+                    jobId = jobId.split('jobId=')[1];
-                }
+                    // 如果还有额外的参数，只取jobId部分
-                return domContext
+                    if (jobId.includes('&')) {
-            }
+                        jobId = jobId.split('&')[0];
-        }
+                    }
-        // 代码块
+                }
-        let preCode = ""
+                console.log('Job JSON result:', result, 'Extracted jobId:', jobId);
-        try {
+                
-            preCode = hljs.highlightAuto(str).value
+                // 确保jobId有效
-        } catch (err) {
+                if (!jobId || jobId === 'undefined' || jobId === 'null') {
-            preCode = md.utils.escapeHtml(str);
+                    console.error('Invalid jobId extracted:', jobId, 'from appJobUrl:', result.appJobUrl);
-        }
+                    // 尝试从其他字段获取jobId
-        // 以换行进行分割 , 按行拆分代码
+                    if (result.jobId) {
-        const lines = preCode.split(/\n/).slice(0, -1);
+                        jobId = result.jobId;
-        const html = lines
+                        console.log('Using jobId from result.jobId:', jobId);
-            .map((line, index) =>
+                    }
-                line ?
+                }
-                `<li><span class="line-num" data-line="${index + 1}"></span>${line}</li>` :
+                
-                '<li></li>'
+                // 添加到岗位卡片列表，供小程序端单独渲染
-            )
+                jobCardsList.push({
-            .join('');
+                    jobId,
-
+                    jobTitle: result.jobTitle,
-        // 代码复制功能
+                    salary: result.salary,
-        const cacheIndex = codeDataList.length;
+                    location: result.location,
-        codeDataList.push(str);
+                    companyName: result.companyName,
-        return `
+                    education: result.education,
-            <div class="code-container">
+                    experience: result.experience
-                <div class="code-header">
+                });
-                    <span class="lang-label">${lang || 'plaintext'}</span>
+                
-                    <a class="copy-btn" data-copy-index="${cacheIndex}">复制代码</a>
+                // 生成岗位卡片HTML，注意：微信小程序rich-text组件只支持部分HTML属性
-                </div>
+                // 使用普通的href属性，微信小程序rich-text会将其转换为可点击链接
-                <pre class="hljs"><code><ol>${html}</ol></code></pre>
+                // 添加data-job-id属性，方便获取jobId
-            </div>
+                // 为所有平台添加onclick事件，微信小程序可能会忽略，但H5端会生效
-        `;
+                let domContext = `<a class="custom-card" href="/packageA/pages/post/post?jobId=${jobId}" data-job-id="${jobId}" data-jobid="${jobId}" onclick="if(typeof uni !== 'undefined'){uni.navigateTo({url: '/packageA/pages/post/post?jobId=${jobId}'});return false;}"><div class="card-title"><span class="title-text">${result.jobTitle}</span><div class="card-salary">${result.salary}</div></div><div class="card-company">${result.location}·${result.companyName}</div><div class="card-info"><div class="info-item"><div class="card-tag">${result.education}</div><div class="card-tag">${result.experience}</div></div><div class="info-item">查看详情<div class="position-nav"></div></div></div></a>`
-    }
+                if (result.data) {
-})
+                    jobMoreMap.set(jobId, result.data)
-
+                    domContext += `<a class="custom-more" href="/packageA/pages/moreJobs/moreJobs?jobId=${jobId}" data-job-id="${jobId}" data-jobid="${jobId}" onclick="if(typeof uni !== 'undefined'){uni.navigateTo({url: '/packageA/pages/moreJobs/moreJobs?jobId=${jobId}'});return false;}">查看更多岗位<div class="more-icon"></div></a>`
-function extractFirstJson(text) {
+                }
-    let stack = [];
+                return domContext
-    let startIndex = -1;
+            }
-    let endIndex = -1;
+        }
-
+        // 代码块
-    for (let i = 0; i < text.length; i++) {
+        let preCode = ""
-        const char = text[i];
+        try {
-
+            preCode = hljs.highlightAuto(str).value
-        if (char === '{') {
+        } catch (err) {
-            if (stack.length === 0) startIndex = i; // 记录第一个 '{' 的位置
+            preCode = md.utils.escapeHtml(str);
-            stack.push(char);
+        }
-        } else if (char === '}') {
+        // 以换行进行分割 , 按行拆分代码
-            stack.pop();
+        const lines = preCode.split(/\n/).slice(0, -1);
-            if (stack.length === 0) {
+        const html = lines
-                endIndex = i; // 找到配对的 '}'
+            .map((line, index) =>
-                break;
+                line ?
-            }
+                `<li><span class="line-num" data-line="${index + 1}"></span>${line}</li>` :
-        }
+                '<li></li>'
-    }
+            )
-
+            .join('');
-    if (startIndex !== -1 && endIndex !== -1) {
+
-        const jsonString = text.slice(startIndex, endIndex + 1);
+        // 代码复制功能
-        try {
+        const cacheIndex = codeDataList.length;
-            const jsonObject = JSON.parse(jsonString);
+        codeDataList.push(str);
-            return jsonObject;
+        return `
-        } catch (e) {
+            <div class="code-container">
-            return null; // 如果不是有效的 JSON
+                <div class="code-header">
-        }
+                    <span class="lang-label">${lang || 'plaintext'}</span>
-    }
+                    <a class="copy-btn" data-copy-index="${cacheIndex}">复制代码</a>
-
+                </div>
-    return null; // 如果没有找到有效的 JSON 对象
+                <pre class="hljs"><code><ol>${html}</ol></code></pre>
-}
+            </div>
-
+        `;
-
+    }
-function safeExtractJson(text) {
+})
-    try {
+
-        const jsonObject = extractFirstJson(text);
+function extractFirstJson(text) {
-        return jsonObject
+    let stack = [];
-    } catch (e) {
+    let startIndex = -1;
-        console.error('JSON 解析失败:', e);
+    let endIndex = -1;
-    }
+
-    return null;
+    for (let i = 0; i < text.length; i++) {
-}
+        const char = text[i];
-
+
-export function clearJobMoreMap() { // 切换对话清空
+        if (char === '{') {
-    jobMoreMap.clear()
+            if (stack.length === 0) startIndex = i; // 记录第一个 '{' 的位置
-}
+            stack.push(char);
-
+        } else if (char === '}') {
-export function parseMarkdown(content) {
+            stack.pop();
-    if (!content) {
+            if (stack.length === 0) {
-        return [] //处理特殊情况，比如网络异常导致的响应的 content 的值为空
+                endIndex = i; // 找到配对的 '}'
-    }
+                break;
-    
+            }
-    // 过滤掉<think>标签及其内容，这些是AI内部思考过程，不应该显示给用户
+        }
-    // 1. 处理原始标签（支持多行）
+    }
-    content = content.replace(/<\s*think\s*>[\s\S]*?<\s*\/\s*think\s*>/gi, '')
+
-    // 2. 处理HTML编码的标签
+    if (startIndex !== -1 && endIndex !== -1) {
-    content = content.replace(/&lt;\s*think\s*&gt;[\s\S]*?&lt;\s*\/\s*think\s*&gt;/gi, '')
+        const jsonString = text.slice(startIndex, endIndex + 1);
-    // 3. 处理部分编码的标签
+        try {
-    content = content.replace(/&lt;\s*think\s*>/gi, '')
+            const jsonObject = JSON.parse(jsonString);
-    content = content.replace(/<\s*\/\s*think\s*&gt;/gi, '')
+            return jsonObject;
-    
+        } catch (e) {
-    codeDataList = []
+            return null; // 如果不是有效的 JSON
-    const unsafeHtml = md.render(content || '')
+        }
-    
+    }
-    // 在markdown渲染后再次过滤，确保没有遗漏
+
-    let filteredHtml = unsafeHtml
+    return null; // 如果没有找到有效的 JSON 对象
-    // 1. 处理原始标签（支持多行）
+}
-    filteredHtml = filteredHtml.replace(/<\s*think\s*>[\s\S]*?<\s*\/\s*think\s*>/gi, '')
+
-    // 2. 处理HTML编码的标签
+
-    filteredHtml = filteredHtml.replace(/&lt;\s*think\s*&gt;[\s\S]*?&lt;\s*\/\s*think\s*&gt;/gi, '')
+function safeExtractJson(text) {
-    // 3. 处理部分编码的标签
+    try {
-    filteredHtml = filteredHtml.replace(/&lt;\s*think\s*>/gi, '')
+        const jsonObject = extractFirstJson(text);
-    filteredHtml = filteredHtml.replace(/<\s*\/\s*think\s*&gt;/gi, '')
+        return jsonObject
-    // 4. 单独处理剩余的think标签对
+    } catch (e) {
-    filteredHtml = filteredHtml.replace(/&lt;think&gt;/gi, '')
+        console.error('JSON 解析失败:', e);
-    filteredHtml = filteredHtml.replace(/&lt;\/think&gt;/gi, '')
+    }
-    filteredHtml = filteredHtml.replace(/<think>/gi, '')
+    return null;
-    filteredHtml = filteredHtml.replace(/<\/think>/gi, '')
+}
-    
+
-    // 根据平台返回不同的内容格式
+export function clearJobMoreMap() { // 切换对话清空
-    // 微信小程序：返回rich-text组件支持的nodes格式
+    jobMoreMap.clear()
-    // H5：直接返回HTML字符串，避免HTML解析错误
+}
-    if (process.env.UNI_PLATFORM === 'mp-weixin') {
+
-        try {
+export function parseMarkdown(content) {
-            return parseHtml(filteredHtml)
+    if (!content) {
-        } catch (error) {
+        return [] //处理特殊情况，比如网络异常导致的响应的 content 的值为空
-            console.error('HTML解析失败:', error)
+    }
-            // 解析失败时返回空数组，避免页面崩溃
+    
-            return []
+    // 过滤掉<think>标签及其内容，这些是AI内部思考过程，不应该显示给用户
-        }
+    // 1. 处理原始标签（支持多行）
-    } else {
+    content = content.replace(/<\s*think\s*>[\s\S]*?<\s*\/\s*think\s*>/gi, '')
-        // H5端直接返回HTML字符串
+    // 2. 处理HTML编码的标签
-        return filteredHtml
+    content = content.replace(/&lt;\s*think\s*&gt;[\s\S]*?&lt;\s*\/\s*think\s*&gt;/gi, '')
-    }
+    // 3. 处理部分编码的标签
-}
+    content = content.replace(/&lt;\s*think\s*>/gi, '')
+    content = content.replace(/<\s*\/\s*think\s*&gt;/gi, '')
+    
+    codeDataList = []
+    jobCardsList = [] // 清空岗位卡片列表，避免重复
+    const unsafeHtml = md.render(content || '')
+    
+    // 在markdown渲染后再次过滤，确保没有遗漏
+    let filteredHtml = unsafeHtml
+    // 1. 处理原始标签（支持多行）
+    filteredHtml = filteredHtml.replace(/<\s*think\s*>[\s\S]*?<\s*\/\s*think\s*>/gi, '')
+    // 2. 处理HTML编码的标签
+    filteredHtml = filteredHtml.replace(/&lt;\s*think\s*&gt;[\s\S]*?&lt;\s*\/\s*think\s*&gt;/gi, '')
+    // 3. 处理部分编码的标签
+    filteredHtml = filteredHtml.replace(/&lt;\s*think\s*>/gi, '')
+    filteredHtml = filteredHtml.replace(/<\s*\/\s*think\s*&gt;/gi, '')
+    // 4. 单独处理剩余的think标签对
+    filteredHtml = filteredHtml.replace(/&lt;think&gt;/gi, '')
+    filteredHtml = filteredHtml.replace(/&lt;\/think&gt;/gi, '')
+    filteredHtml = filteredHtml.replace(/<think>/gi, '')
+    filteredHtml = filteredHtml.replace(/<\/think>/gi, '')
+    
+    // 根据平台返回不同的内容格式
+    // 微信小程序：返回rich-text组件支持的nodes格式
+    // H5：直接返回HTML字符串，避免HTML解析错误
+    if (process.env.UNI_PLATFORM === 'mp-weixin') {
+        try {
+            return parseHtml(filteredHtml)
+        } catch (error) {
+            console.error('HTML解析失败:', error)
+            // 解析失败时返回空数组，避免页面崩溃
+            return []
+        }
+    } else {
+        // H5端直接返回HTML字符串
+        return filteredHtml
+    }
+}