ks-app-employment-service/pages/service/components/SkillDevelopment.vue

<template>
    <view class="skill-development">
        <view class="content-section">
            <view class="section-title">
                <uni-icons type="person-filled" size="18" color="#000000"></uni-icons>
                <text class="title-text">技能发展路径</text>
            </view>
            
            <view class="intro-text">
                基于您的当前职业和目标职业,以下是您需要重点发展的技能:
            </view>
            
            <view class="skill-list">
                <view 
                    class="skill-item" 
                    v-for="(skill, index) in skillList" 
                    :key="index"
                    @click="handleSkillItemClick(skill)"
                >
                    <view class="skill-header">
                        <text class="skill-name">{{ skill.name }}</text>
                        <text class="skill-weight">权重: {{ skill.weight }}</text>
                    </view>
                    <view class="skill-tags">
                        <view 
                            class="skill-tag" 
                            v-for="(tag, tagIndex) in skill.tags" 
                            :key="tagIndex"
                        >
                            {{ tag }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 技能权重弹出层 -->
        <SkillWeightPopup
            ref="skillWeightPopup"
            :skill-name="selectedSkillName"
            :weight="selectedSkillWeight"
            :current-level="selectedSkillLevel"
            @close="handlePopupClose"
        />
    </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import SkillWeightPopup from './SkillWeightPopup.vue';

const props = defineProps({
    // 来自职业推荐 tab 的数据
    currentJobSkills: {
        type: Array,
        default: () => []
    },
    recommendedJobs: {
        type: Array,
        default: () => []
    },
    // 来自职业路径 tab 的数据
    pathData: {
        type: Object,
        default: () => ({
            start: { title: '', skills: [] },
            steps: [],
            end: { title: '', skills: [] }
        })
    },
    targetCareer: {
        type: String,
        default: ''
    }
});

// 综合技能列表（基于前两个 tab 的数据）
const skillList = computed(() => {
    const skillMap = new Map();
    
    // 1. 收集当前职位技能（已有技能，权重较低）
    props.currentJobSkills.forEach(skill => {
        if (skill && skill.trim()) {
            const existing = skillMap.get(skill) || { name: skill, weight: 0, tags: [], currentLevel: 0 };
            existing.weight = Math.max(existing.weight, 0.3); // 已有技能权重较低
            existing.tags.push('当前技能');
            skillMap.set(skill, existing);
        }
    });
    
    // 2. 收集推荐职位的技能（需要发展的技能，权重较高）
    props.recommendedJobs.forEach(job => {
        if (Array.isArray(job.skills)) {
            job.skills.forEach(skill => {
                if (skill && skill.trim()) {
                    const existing = skillMap.get(skill) || { name: skill, weight: 0, tags: [], currentLevel: 0 };
                    existing.weight = Math.max(existing.weight, 0.7); // 推荐职位技能权重较高
                    if (!existing.tags.includes('推荐技能')) {
                        existing.tags.push('推荐技能');
                    }
                    skillMap.set(skill, existing);
                }
            });
        }
    });
    
    // 3. 收集职业路径中的技能（发展路径技能，权重最高）
    const pathSkills = [];
    if (props.pathData.start && Array.isArray(props.pathData.start.skills)) {
        pathSkills.push(...props.pathData.start.skills);
    }
    if (Array.isArray(props.pathData.steps)) {
        props.pathData.steps.forEach(step => {
            if (Array.isArray(step.skills)) {
                pathSkills.push(...step.skills);
            }
        });
    }
    if (props.pathData.end && Array.isArray(props.pathData.end.skills)) {
        pathSkills.push(...props.pathData.end.skills);
    }
    
    pathSkills.forEach(skill => {
        if (skill && skill.trim()) {
            const existing = skillMap.get(skill) || { name: skill, weight: 0, tags: [], currentLevel: 0 };
            existing.weight = Math.max(existing.weight, 0.9); // 路径技能权重最高
            if (!existing.tags.includes('路径技能')) {
                existing.tags.push('路径技能');
            }
            skillMap.set(skill, existing);
        }
    });
    
    // 转换为数组并按权重排序
    const result = Array.from(skillMap.values())
        .map(item => ({
            name: item.name,
            weight: item.weight.toFixed(2),
            tags: [...new Set(item.tags)], // 去重
            currentLevel: item.currentLevel || Math.floor(item.weight * 5) + 1 // 根据权重计算等级
        }))
        .sort((a, b) => parseFloat(b.weight) - parseFloat(a.weight)); // 按权重降序
    
    return result;
});

// 弹出层引用
const skillWeightPopup = ref(null);

// 选中的技能信息
const selectedSkillName = ref('');
const selectedSkillWeight = ref('');
const selectedSkillLevel = ref(0);

// 处理技能项点击
function handleSkillItemClick(skill) {
    selectedSkillName.value = skill.name || '';
    selectedSkillWeight.value = skill.weight || '0';
    selectedSkillLevel.value = skill.currentLevel || 0;
    skillWeightPopup.value?.open();
}

// 处理弹出层关闭
function handlePopupClose() {
    // 可以在这里处理关闭后的逻辑
}
</script>

<style lang="scss" scoped>
.skill-development {
    padding: 10rpx 0 20rpx;
    background-color: #EBF4FF;
    min-height:95%;
}

.content-section {
    background-color: #EBF4FF;
    padding: 28rpx;
    box-sizing: border-box;
    overflow: visible;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 24rpx;
    margin-top: -20rpx;
}

.title-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #167CF1;
}

.intro-text {
    font-size: 24rpx;
    line-height: 34rpx;
    color: rgba(154, 154, 154, 1);
    text-align: left;
    font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    font-weight: 600;
    margin-bottom: 90rpx;
    width: 672rpx;
}

.skill-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.skill-item {
    width: 100%;
    max-width: 796rpx;
    min-height: 162rpx;
    line-height: 40rpx;
    border-radius: 20rpx;
    background-color: rgba(239, 239, 239, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
    text-align: center;
    padding: 24rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    position: relative;
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    width: 100%;
    box-sizing: border-box;
}

.skill-name {
    font-size: 32rpx;
    line-height: 46rpx;
    color: rgb(16, 16, 16);
    text-align: left;
    font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-weight {
    font-size: 24rpx;
    line-height: 34rpx;
    border-radius: 10rpx;
    background-color: rgba(49, 100, 239, 0.1);
    color: rgba(44, 101, 247, 1);
    text-align: center;
    padding: 6rpx 12rpx;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 16rpx;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
}

.skill-tag {
    background-color: rgba(49, 100, 239, 0.1);
    color: rgba(44, 101, 247, 1);
    padding: 6rpx 12rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    line-height: 34rpx;
    text-align: center;
    white-space: nowrap;
}
</style>