From dcbb3e02a7d63e4c8a4a821589ca60b3feba5ec2 Mon Sep 17 00:00:00 2001
From: danchaotaiyang <yuxiaolong00@qq.com>
Date: Thu, 22 Jan 2026 01:15:41 +0800
Subject: [PATCH] =?UTF-8?q?=3D=20=E8=81=8C=E4=B8=9A=E8=A7=84=E5=88=92?=
 =?UTF-8?q?=E6=8E=A8=E8=8D=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/service/career-planning.vue             | 189 ++-----
 pages/service/components/CareerPath.vue       | 512 ++++--------------
 pages/service/components/CareerRecommend.vue  |  86 ++-
 pages/service/components/SkillDevelopment.vue | 487 +++--------------
 stores/useCareerPathStore.js                  | 110 ++--
 stores/useCareerRecommendationStore.js        |  41 +-
 stores/useSkillDevelopmentStore.js            | 114 ++--
 7 files changed, 426 insertions(+), 1113 deletions(-)

diff --git a/pages/service/career-planning.vue b/pages/service/career-planning.vue
index 5eab772..7a35d07 100644
--- a/pages/service/career-planning.vue
+++ b/pages/service/career-planning.vue
@@ -26,15 +26,9 @@ const activeTab = ref(0);
 const selectedJobTitle = ref('');
 const selectedJobPossessedSkills = ref([]);
 const selectedJobImprovementSkills = ref([]);
-const isLoadingJobSkill = ref(false);
 const currentJobId = ref(null);
 const currentJobName = ref('');
 
-// 技能发展所需的数据
-const recommendSkillsData = ref({
-    currentJobSkills: [],
-    recommendedJobs: []
-});
 
 const pathSkillsData = ref({
     pathData: {
@@ -319,121 +313,6 @@ function handleMoreClick() {
     // TODO: 实现更多功能
 }
 
-function normalizeSkillLevel(score) {
-    const numericScore = Number(score);
-    if (Number.isNaN(numericScore)) {
-        return 0;
-    }
-    const rounded = Math.round(numericScore);
-    return Math.max(1, Math.min(6, rounded));
-}
-
-function splitSkillListByScore(skills = []) {
-    if (!Array.isArray(skills) || skills.length === 0) {
-        return {
-            possessed: [],
-            improvement: []
-        };
-    }
-
-    const sorted = [...skills].sort((a, b) => (Number(b.skillScore) || 0) - (Number(a.skillScore) || 0));
-    const midpoint = Math.ceil(sorted.length / 2);
-    const mapSkill = (item) => ({
-        name: item?.skillName || '',
-        level: normalizeSkillLevel(item?.skillScore)
-    });
-
-    return {
-        possessed: sorted.slice(0, midpoint).map(mapSkill),
-        improvement: sorted.slice(midpoint).map(mapSkill)
-    };
-}
-
-// 处理职位卡片点击
-async function handleJobCardClick(job) {
-    if (!job) {
-        return;
-    }
-
-    selectedJobTitle.value = job.title || job.jobName || '';
-    selectedJobPossessedSkills.value = [];
-    selectedJobImprovementSkills.value = [];
-
-    if (isLoadingJobSkill.value) {
-        return;
-    }
-
-    isLoadingJobSkill.value = true;
-    uni.showLoading({
-        title: '加载中...',
-        mask: true
-    });
-
-    try {
-        // 从 appUserInfo 接口获取技能数据
-        const response = await appUserInfo();
-        const userInfo = response?.data || {};
-        const appSkillsList = Array.isArray(userInfo?.appSkillsList) ? userInfo.appSkillsList : [];
-
-        // 将 appSkillsList 转换为 splitSkillListByScore 需要的格式
-        const skillList = appSkillsList.map(item => ({
-            skillName: item?.name || item?.nameStr || '',
-            skillScore: item?.levels || item?.levelStr || 0
-        })).filter(item => item.skillName);
-
-        const { possessed, improvement } = splitSkillListByScore(skillList);
-
-        if (possessed.length === 0 && improvement.length === 0) {
-            // 如果 appUserInfo 中没有技能数据，尝试使用推荐职位数据中的技能信息
-            const fallbackSkills = Array.isArray(job?.rawSkills) ? job.rawSkills : [];
-            if (fallbackSkills.length === 0) {
-                uni.showToast({
-                    title: '暂无技能数据',
-                    icon: 'none'
-                });
-                return;
-            }
-            const fallbackSplit = splitSkillListByScore(fallbackSkills);
-            selectedJobPossessedSkills.value = fallbackSplit.possessed;
-            selectedJobImprovementSkills.value = fallbackSplit.improvement;
-        } else {
-            selectedJobPossessedSkills.value = possessed;
-            selectedJobImprovementSkills.value = improvement;
-        }
-        skillDetailPopup.value?.open();
-    } catch (error) {
-        // 接口调用失败，尝试使用推荐职位数据中的技能信息
-        const fallbackSkills = Array.isArray(job?.rawSkills) ? job.rawSkills : [];
-        if (fallbackSkills.length > 0) {
-            const fallbackSplit = splitSkillListByScore(fallbackSkills);
-            selectedJobPossessedSkills.value = fallbackSplit.possessed;
-            selectedJobImprovementSkills.value = fallbackSplit.improvement;
-            skillDetailPopup.value?.open();
-        } else {
-            uni.showToast({
-                title: '获取技能信息失败',
-                icon: 'none'
-            });
-        }
-    } finally {
-        isLoadingJobSkill.value = false;
-        uni.hideLoading();
-    }
-}
-
-// 处理技能弹出层关闭
-function handleSkillPopupClose() {
-    // 可以在这里处理关闭后的逻辑
-}
-
-// 处理职业推荐技能数据更新
-function handleRecommendSkillsUpdated(data) {
-    recommendSkillsData.value = {
-        currentJobSkills: data.currentJobSkills || [],
-        recommendedJobs: data.recommendedJobs || []
-    };
-}
-
 // 处理职业路径数据更新
 function handlePathDataUpdated(data) {
     pathSkillsData.value = {
@@ -485,7 +364,6 @@ onMounted(() => {
             :job-title="selectedJobTitle"
             :possessed-skills="selectedJobPossessedSkills"
             :improvement-skills="selectedJobImprovementSkills"
-            @close="handleSkillPopupClose"
         />
 
         <!-- 页面内容 -->
@@ -506,13 +384,7 @@ onMounted(() => {
 
             <!-- 内容区域 -->
             <scroll-view scroll-y class="content-scroll">
-                <CareerRecommend
-                    v-if="activeTab === 0"
-                    :current-job-id="currentJobId"
-                    :current-job-name="currentJobName"
-                    @job-card-click="handleJobCardClick"
-                    @skills-updated="handleRecommendSkillsUpdated"
-                />
+                <CareerRecommend v-if="activeTab === 0"/>
                 <CareerPath
                     v-else-if="activeTab === 1"
                     :current-job-name="currentJobName"
@@ -533,6 +405,65 @@ onMounted(() => {
     </div>
 </template>
 
+<style lang="scss">
+.query-btn {
+    width: 100%;
+    height: 80rpx;
+    line-height: 40rpx;
+    border-radius: 20rpx;
+    background: linear-gradient(180deg, rgba(18, 125, 240, 1) 0%, rgba(59, 14, 123, 0.71) 100%);
+    color: rgba(255, 255, 255, 1);
+    font-size: 28rpx;
+    text-align: center;
+    font-family: '阿里巴巴普惠体3.0-regular', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+    border: 2rpx solid rgba(187, 187, 187, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    padding: 0;
+}
+
+.empty-text {
+    font-size: 26rpx;
+    text-align: center;
+    line-height: 1.5;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 30rpx;
+}
+
+.input-item {
+    display: flex;
+    flex-direction: column;
+    gap: 12rpx;
+}
+
+.picker-field {
+    background-color: #F5F5F5;
+    border: 1rpx solid #E0E0E0;
+    border-radius: 12rpx;
+    padding: 20rpx 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.picker-text {
+    font-size: 28rpx;
+    color: #000000;
+}
+
+.picker-placeholder {
+    font-size: 28rpx;
+    color: #999999;
+}
+
+</style>
+
 <style lang="scss" scoped>
 .career-planning-page {
     width: 100vw;
diff --git a/pages/service/components/CareerPath.vue b/pages/service/components/CareerPath.vue
index b05ee54..b9bdf1d 100644
--- a/pages/service/components/CareerPath.vue
+++ b/pages/service/components/CareerPath.vue
@@ -1,374 +1,107 @@
+<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
+<script setup>
+import { useCareerPathStore } from '@/stores/useCareerPathStore';
+
+
+const store = useCareerPathStore();
+</script>
+
 <template>
-    <view class="career-path">
-        <!-- 职业路径查询区域 -->
-        <view class="query-section">
-            <view class="section-title">
-                <uni-icons type="search" size="18" color="#286BFA"></uni-icons>
-                <text class="title-text">职业路径查询</text>
-            </view>
-
-            <view class="input-group">
-                <view class="input-item">
-                    <text class="input-label">当前职位</text>
-                    <input
-                        class="input-field"
-                        :value="currentPosition"
-                        placeholder="市场专员"
-                        placeholder-style="color: #999999"
-                        disabled
-                    />
-                </view>
-
-                <view class="input-item">
-                    <text class="input-label">目标职业</text>
-                    <picker
-                        mode="selector"
-                        :range="targetCareerOptions"
-                        range-key="label"
-                        :value="selectedTargetIndex"
-                        @change="handleTargetChange"
-                    >
-                        <view class="picker-field">
-                            <text :class="selectedTargetIndex >= 0 ? 'picker-text' : 'picker-placeholder'">
-                                {{ selectedTargetIndex >= 0 ? targetCareerOptions[selectedTargetIndex].label : '请选择目标职业' }}
-                            </text>
-                            <uni-icons type="arrowdown" size="16" color="#999999"></uni-icons>
-                        </view>
-                    </picker>
-                </view>
-            </view>
-
-            <button class="query-btn" @click="handleQuery">
-                <text>查询职业发展路径</text>
+<div class="career-path">
+    <!-- 职业路径查询区域 -->
+    <div class="query-section">
+        <div class="section-title">
+            <uni-icons color="#286BFA" size="18" type="search"></uni-icons>
+            <span class="title-text">职业路径查询</span>
+        </div>
+        <div class="input-group">
+            <div class="input-item">
+                <span class="label">当前职位</span>
+                <picker @change="store.eventProfession" :value="store.professionIndex" :range="store.professionsRef" range-key="label">
+                    <div class="picker-field">
+                        <span :class="store.professionLabel ? 'picker-text' : 'picker-placeholder'">
+                            {{ store.professionLabel || '请选择职位' }}
+                        </span>
+                        <uni-icons color="#999999" size="16" type="down"></uni-icons>
+                    </div>
+                </picker>
+            </div>
+            <div class="input-item">
+                <span class="label">目标职业</span>
+                <picker :range="store.pathsRef" :value="store.targetCareerIndex" range-key="label" @change="store.eventTargetCareer">
+                    <div class="picker-field">
+                        <span :class="store.targetCareerLabel ? 'picker-text' : 'picker-placeholder'">
+                            {{ store.targetCareerLabel || '请选择目标职业' }}
+                        </span>
+                        <uni-icons color="#999999" size="16" type="down"></uni-icons>
+                    </div>
+                </picker>
+            </div>
+            <button class="query-btn" @click="store.eventSearch">
+                <span>查询职业发展路径</span>
                 <uni-icons type="search" size="18" color="#FFFFFF"></uni-icons>
             </button>
-            <view v-if="totalPathCount > 0" class="path-summary">
-                系统已收录 {{ totalPathCount }} 条职业路径
-            </view>
-        </view>
+        </div>
+    </div>
 
-        <!-- 职业发展路径区域 -->
-        <view class="path-section">
-            <view class="section-title">
-                <uni-icons type="person-filled" size="24" color="#000000"></uni-icons>
-                <text class="title-text">职业发展路径</text>
-            </view>
+    <!-- 职业发展路径区域 -->
+    <div class="path-section">
+        <div class="section-title">
+            <uni-icons color="#000000" size="24" type="person-filled"></uni-icons>
+            <text class="title-text">职业发展路径</text>
+        </div>
 
-            <view class="timeline">
-                <!-- 起点 -->
-                <view class="timeline-item start">
-                    <view class="timeline-marker start-marker"></view>
-                    <view class="timeline-content">
-                        <view class="step-title">起点: {{ pathData.start.title }}</view>
-                        <view class="skill-tags">
-                            <view
-                                class="skill-tag"
-                                v-for="(skill, index) in pathData.start.skills"
-                                :key="index"
-                            >
-                                {{ skill }}
-                            </view>
-                        </view>
-                    </view>
-                </view>
-
-                <!-- 步骤 -->
-                <view
-                    class="timeline-item step"
-                    v-for="(step, index) in pathData.steps"
-                    :key="index"
-                >
-                    <view class="timeline-marker step-marker"></view>
-                    <view class="timeline-content">
-                        <view class="step-title">第{{ index + 1 }}步: {{ step.title }}</view>
-                        <view class="skill-tags">
-                            <view
-                                class="skill-tag"
-                                v-for="(skill, sIndex) in step.skills"
-                                :key="sIndex"
-                            >
-                                {{ skill }}
-                            </view>
-                        </view>
-                    </view>
-                </view>
-
-                <!-- 终点 -->
-                <view class="timeline-item end">
-                    <view class="timeline-marker end-marker"></view>
-                    <view class="timeline-content">
-                        <view class="step-title">终点: {{ pathData.end.title }}</view>
-                        <view class="skill-tags">
-                            <view
-                                class="skill-tag"
-                                v-for="(skill, index) in pathData.end.skills"
-                                :key="index"
-                            >
-                                {{ skill }}
-                            </view>
-                        </view>
-                    </view>
-                </view>
-            </view>
-        </view>
-    </view>
+        <div class="timeline">
+            <div v-for="(step, index) in store.result" :key="index" class="timeline-item" :class="[step.type]">
+                <div class="timeline-marker" :class="[`${step.type}-marker`]"></div>
+                <div class="timeline-content">
+                    <div v-if="step.type === 'start'" class="step-title">起点: {{ step.title }}</div>
+                    <div v-else-if="step.type === 'end'" class="step-title">终点: {{ step.title }}</div>
+                    <div v-else class="step-title">第{{ step.step }}步: {{ step.title }}</div>
+                    <div class="skill-tags">
+                        <div v-for="(skill, sIndex) in step.tags" :key="sIndex" class="skill-tag">{{ skill }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 </template>
 
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { getJobPathPage, getJobPathDetail, getJobPathNum } from '@/apiRc/service/jobPath.js';
-
-// 接收父组件传递的当前职位名称
-const props = defineProps({
-    currentJobName: {
-        type: String,
-        default: ''
-    }
-});
-
-const emit = defineEmits(['path-data-updated']);
-
-// 当前职位（从父组件获取，统一使用）
-const currentPosition = computed(() => props.currentJobName || '市场专员');
-
-// 目标职业选项列表
-const targetCareerOptions = ref([]);
-const selectedTargetIndex = ref(-1);
-const selectedJobPathId = ref(null);
-
-// 职业路径数量
-const totalPathCount = ref(0);
-
-// 初始路径数据
-const emptyPathData = {
-    start: {
-        title: '暂无数据',
-        skills: []
-    },
-    steps: [],
-    end: {
-        title: '暂无数据',
-        skills: []
-    }
-};
-
-const pathData = ref({ ...emptyPathData });
-const isLoadingPath = ref(false);
-
-function parseSkillList(skillString) {
-    if (!skillString) {
-        return [];
-    }
-    return skillString
-        .split(/[,，]/)
-        .map(item => item.trim())
-        .filter(item => item.length > 0);
-}
-
-function resetPathData() {
-    pathData.value = {
-        start: { ...emptyPathData.start },
-        steps: [],
-        end: { ...emptyPathData.end }
-    };
-}
-
-async function fetchTargetCareerOptions(keyword = '') {
-    try {
-        const response = await getJobPathPage({
-            jobName: keyword,
-            pageNo: 1,
-            pageSize: 100
-        });
-
-        const list = response?.data?.list || response?.list || [];
-
-        targetCareerOptions.value = list.map(item => ({
-            label: item.endJob || item.startJob || '未知职位',
-            value: item.id,
-            startJob: item.startJob,
-            endJob: item.endJob,
-            jobOrder: item.jobOrder,
-            startJobId: item.startJobId,
-            endJobId: item.endJobId
-        }));
-
-        if (targetCareerOptions.value.length === 0) {
-            selectedTargetIndex.value = -1;
-            selectedJobPathId.value = null;
-        }
-    } catch (error) {
-        targetCareerOptions.value = [];
-        selectedTargetIndex.value = -1;
-        selectedJobPathId.value = null;
-        uni.showToast({
-            title: '职业路径列表获取失败',
-            icon: 'none'
-        });
-    }
-}
-
-async function fetchPathCount() {
-    try {
-        const response = await getJobPathNum();
-        totalPathCount.value = response?.data ?? 0;
-    } catch (error) {
-        totalPathCount.value = 0;
-    }
-}
-
-async function loadPathDetail(startJobId, endJobId) {
-    if (startJobId === null || startJobId === undefined || startJobId === '' || endJobId === null || endJobId === undefined || endJobId === '') {
-        uni.showToast({
-            title: '职业路径ID无效',
-            icon: 'none'
-        });
-        resetPathData();
-        return;
-    }
-
-    try {
-        const requestParams = {
-            startJobId,
-            endJobId
-        };
-
-        const response = await getJobPathDetail(requestParams);
-
-        const details = Array.isArray(response?.data) ? response.data : [];
-
-        if (details.length === 0) {
-            resetPathData();
-            uni.showToast({
-                title: '暂无职业路径数据',
-                icon: 'none'
-            });
-            return;
-        }
-
-        const normalized = details.map(item => ({
-            title: item?.name || '未命名职位',
-            skills: parseSkillList(item?.skillNameList)
-        }));
-
-        const start = normalized[0] || { title: '暂无数据', skills: [] };
-        const end = normalized[normalized.length - 1] || { title: '暂无数据', skills: [] };
-        const steps = normalized.slice(1, normalized.length - 1);
-
-        pathData.value = {
-            start,
-            steps,
-            end
-        };
-
-        // 通知父组件路径数据已更新
-        emit('path-data-updated', {
-            pathData: pathData.value,
-            targetCareer: targetCareerOptions.value[selectedTargetIndex.value]?.label || ''
-        });
-    } catch (error) {
-        console.warn(error, 22222);
-        uni.showToast({
-            title: '获取路径详情失败',
-            icon: 'none'
-        });
-        resetPathData();
-        emit('path-data-updated', {
-            pathData: { ...emptyPathData },
-            targetCareer: ''
-        });
-    }
-}
-
-function handleTargetChange(e) {
-    const index = Number(e.detail.value);
-    selectedTargetIndex.value = index;
-    const option = targetCareerOptions.value[index];
-    selectedJobPathId.value = option ? option.value : null;
-}
-
-async function handleQuery() {
-    if (selectedTargetIndex.value < 0) {
-        uni.showToast({
-            title: '请选择目标职业',
-            icon: 'none'
-        });
-        return;
-    }
-
-    const option = targetCareerOptions.value[selectedTargetIndex.value];
-    if (!option) {
-        uni.showToast({
-            title: '目标职业数据异常',
-            icon: 'none'
-        });
-        return;
-    }
-
-
-    isLoadingPath.value = true;
-    uni.showLoading({
-        title: '加载中...',
-        mask: true
-    });
-    console.log(option);
-    try {
-        let { value: jobPathId, startJobId, endJobId } = option;
-        /*if (!jobPathId) {
-            const response = await getJobPathPage({
-                jobName: option.label,
-                pageNo: 1,
-                pageSize: 100
-            });
-            jobPathId = response?.data?.list?.[0]?.id || null;
-        }
-
-        if (!jobPathId) {
-            uni.showToast({
-                title: '未找到职业路径',
-                icon: 'none'
-            });
-            resetPathData();
-            return;
-        }*/
-
-        // selectedJobPathId.value = jobPathId;
-        await loadPathDetail(startJobId, endJobId);
-    } catch (error) {
-        console.warn(error, 11111);
-        uni.showToast({
-            title: '查询失败，请重试',
-            icon: 'none'
-        });
-    } finally {
-        isLoadingPath.value = false;
-        uni.hideLoading();
-    }
-}
-
-// 获取当前职位信息（从接口获取）
-async function getCurrentPosition() {
-    // TODO: 调用接口获取当前职位
-    // const response = await getCareerCurrentPosition();
-    // if (response && response.code === 200) {
-    //     currentPosition.value = response.data?.position || '';
-    // }
-}
-
-onMounted(async () => {
-    await getCurrentPosition();
-    await Promise.all([
-        fetchTargetCareerOptions(),
-        fetchPathCount()
-    ]);
-});
-</script>
-
 <style lang="scss" scoped>
 .career-path {
     padding: 10rpx 28rpx 20rpx;
 }
 
+.card-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .label {
+        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;
+    }
+
+    .value {
+        font-size: 32rpx;
+        line-height: 46rpx;
+        color: rgb(16, 16, 16);
+        font-weight: 600;
+        text-align: left;
+        font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+
+        &.placeholder {
+            font-weight: 500;
+            color: #ccc;
+        }
+    }
+}
+
 .query-section {
     background-color: #FFFFFF;
     border-radius: 16rpx;
@@ -390,19 +123,6 @@ onMounted(async () => {
     color: #157DF0;
 }
 
-.input-group {
-    display: flex;
-    flex-direction: column;
-    gap: 20rpx;
-    margin-bottom: 24rpx;
-}
-
-.input-item {
-    display: flex;
-    flex-direction: column;
-    gap: 12rpx;
-}
-
 .input-label {
     font-size: 28rpx;
     color: #000000;
@@ -418,44 +138,6 @@ onMounted(async () => {
     color: #666666;
 }
 
-.picker-field {
-    background-color: #F5F5F5;
-    border: 1rpx solid #E0E0E0;
-    border-radius: 12rpx;
-    padding: 20rpx 24rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.picker-text {
-    font-size: 28rpx;
-    color: #000000;
-}
-
-.picker-placeholder {
-    font-size: 28rpx;
-    color: #999999;
-}
-
-.query-btn {
-    width: 100%;
-    height: 80rpx;
-    line-height: 40rpx;
-    border-radius: 20rpx;
-    background: linear-gradient(180deg, rgba(18, 125, 240, 1) 0%, rgba(59, 14, 123, 0.71) 100%);
-    color: rgba(255, 255, 255, 1);
-    font-size: 28rpx;
-    text-align: center;
-    font-family: '阿里巴巴普惠体3.0-regular', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
-    border: 2rpx solid rgba(187, 187, 187, 1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12rpx;
-    padding: 0;
-}
-
 .path-summary {
     margin-top: 16rpx;
     font-size: 24rpx;
@@ -491,11 +173,11 @@ onMounted(async () => {
         width: 2rpx;
         height: 100%;
         background: repeating-linear-gradient(
-            to bottom,
-            #E0E0E0 0,
-            #E0E0E0 6rpx,
-            transparent 6rpx,
-            transparent 12rpx
+                to bottom,
+                #E0E0E0 0,
+                #E0E0E0 6rpx,
+                transparent 6rpx,
+                transparent 12rpx
         );
         transform: translateX(-50%);
         z-index: 1;
diff --git a/pages/service/components/CareerRecommend.vue b/pages/service/components/CareerRecommend.vue
index d85359b..c10c399 100644
--- a/pages/service/components/CareerRecommend.vue
+++ b/pages/service/components/CareerRecommend.vue
@@ -1,36 +1,33 @@
 <!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
 <script setup>
-import { ref } from 'vue';
 import { useCareerRecommendationStore } from '@/stores/useCareerRecommendationStore';
-import uniList from '@/uni_modules/uni-list/components/uni-list/uni-list.vue';
-import uniListItem from '@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue';
 
 
 const store = useCareerRecommendationStore();
-
-const popupRef = ref();
-
-const eventSelectCurrentJob = () => {
-    popupRef.value?.open('bottom');
-};
-
-const eventCloseCurrentJob = () => {
-    popupRef.value?.close('bottom');
-};
-
-const eventProfession = (item) => {
-    store.eventProfession(item);
-    store.eventSearch();
-    popupRef.value?.close('bottom');
-};
 </script>
 
 <template>
 <div class="career-recommend">
     <div class="info-card">
-        <div class="card-title">当前职位信息</div>
-        <div class="card-content" @click="eventSelectCurrentJob">
-            <span class="label">当前职位</span> <span class="value">{{ store.professionLabel }}</span>
+        <div class="section-title">
+            <uni-icons color="#286BFA" size="18" type="search"></uni-icons>
+            <span class="title-text">我的职业</span>
+        </div>
+        <div class="input-group">
+            <div class="input-item">
+                <picker @change="store.eventProfession" :value="store.professionIndex" :range="store.professionsRef" range-key="label">
+                    <div class="picker-field">
+                        <span :class="store.professionLabel ? 'picker-text' : 'picker-placeholder'">
+                            {{ store.professionLabel || '请选择职业' }}
+                        </span>
+                        <uni-icons color="#999999" size="16" type="down"></uni-icons>
+                    </div>
+                </picker>
+            </div>
+            <button class="query-btn" @click="store.eventSearch">
+                <span>搜索</span>
+                <uni-icons type="search" size="18" color="#FFFFFF"></uni-icons>
+            </button>
         </div>
     </div>
     <div class="info-card">
@@ -59,19 +56,6 @@ const eventProfession = (item) => {
             </div>
         </div>
     </div>
-    <uni-popup ref="popupRef" :border-radius="'20rpx 20rpx 0 0'" :is-mask-click="true" background-color="#FFFFFF" mask-background-color="rgba(255, 255, 255, 0.6)" type="bottom" @mask-click="eventCloseCurrentJob">
-        <div class="professions">
-            <scroll-view scroll-y style="height: 100%;">
-                <div class="professions-list">
-                    <uni-list>
-                        <template v-for="item in store.professionsRef" :key="item.label">
-                        <uni-list-item :title="item.label" clickable showArrow @click="eventProfession(item)" />
-                        </template>
-                    </uni-list>
-                </div>
-            </scroll-view>
-        </div>
-    </uni-popup>
 </div>
 </template>
 
@@ -80,6 +64,21 @@ const eventProfession = (item) => {
     padding: 10rpx 28rpx 20rpx;
 }
 
+.section-title {
+    font-size: 32rpx;
+    color: #000000;
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    margin-bottom: 24rpx;
+}
+
+.title-text {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #157DF0;
+}
+
 .info-card {
     background-color: #FFFFFF;
     border-radius: 16rpx;
@@ -134,14 +133,6 @@ const eventProfession = (item) => {
     white-space: nowrap;
 }
 
-.section-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #000000;
-    margin-bottom: 20rpx;
-    margin-top: 8rpx;
-}
-
 .job-item-card {
     background-color: #FFFFFF;
     border-radius: 16rpx;
@@ -206,13 +197,4 @@ const eventProfession = (item) => {
 button::after {
     border: none;
 }
-
-.professions {
-    width: 100vw;
-    height: 80vh;
-
-    .professions-list {
-        padding-left: 20px;
-    }
-}
 </style>
diff --git a/pages/service/components/SkillDevelopment.vue b/pages/service/components/SkillDevelopment.vue
index b326bc3..a17e1aa 100644
--- a/pages/service/components/SkillDevelopment.vue
+++ b/pages/service/components/SkillDevelopment.vue
@@ -1,382 +1,85 @@
-<template>
-    <view class="skill-development">
-        <!-- 职业技能查询区域 -->
-        <view class="query-section">
-            <view class="section-title">
-                <uni-icons type="search" size="18" color="#286BFA"></uni-icons>
-                <text class="title-text">职业技能查询</text>
-            </view>
-
-            <view class="input-group">
-                <view class="input-item">
-                    <text class="input-label">当前职位</text>
-                    <input
-                        class="input-field"
-                        :value="currentPosition"
-                        placeholder="市场专员"
-                        placeholder-style="color: #999999"
-                        disabled
-                    />
-                </view>
-
-                <view class="input-item">
-                    <text class="input-label">目标职业</text>
-                    <picker
-                        mode="selector"
-                        :range="targetCareerOptions"
-                        range-key="label"
-                        :value="selectedTargetIndex"
-                        @change="handleTargetChange"
-                    >
-                        <view class="picker-field">
-                            <text :class="selectedTargetIndex >= 0 ? 'picker-text' : 'picker-placeholder'">
-                                {{ selectedTargetIndex >= 0 ? targetCareerOptions[selectedTargetIndex].label : '请选择目标职业' }}
-                            </text>
-                            <uni-icons type="arrowdown" size="16" color="#999999"></uni-icons>
-                        </view>
-                    </picker>
-                </view>
-            </view>
-
-            <button class="query-btn" @click="handleQuery">
-                <text>查询技能发展路径</text>
-                <uni-icons type="search" size="18" color="#FFFFFF"></uni-icons>
-            </button>
-            <view v-if="totalPathCount > 0" class="path-summary">
-                系统已收录 {{ totalPathCount }} 条职业路径
-            </view>
-        </view>
-
-        <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 v-if="isLoadingSkills" class="empty-text">加载中...</view>
-                <view v-else-if="!hasQueried" class="empty-text">请先查询职业路径以获取技能发展数据</view>
-                <view v-else-if="skillList.length === 0" class="empty-text">暂无数据</view>
-                <view
-                    v-else
-                    class="skill-item"
-                    v-for="(skill, index) in skillList"
-                    :key="index"
-                >
-                    <view class="skill-header">
-                        <text class="skill-name">{{ skill.name }}</text>
-                        <view class="skill-info">
-                            <text class="skill-score">技能分数: {{ skill.score }}</text>
-                            <text class="skill-weight">权重: {{ skill.weight }}</text>
-                        </view>
-                    </view>
-                    <view class="skill-tags" v-if="skill.tags && skill.tags.length > 0">
-                        <view
-                            class="skill-tag"
-                            v-for="(tag, tagIndex) in skill.tags"
-                            :key="tagIndex"
-                        >
-                            {{ tag }}
-                        </view>
-                    </view>
-                </view>
-            </view>
-        </view>
-    </view>
-</template>
-
+<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
 <script setup>
-import { ref, computed, onMounted } from 'vue';
-import { getJobPathPage, getJobPathDetail, getJobPathNum } from '@/apiRc/service/jobPath.js';
-import { getJobSkillWeight } from '@/apiRc/service/jobSkill.js';
+import { useSkillDevelopmentStore } from '@/stores/useSkillDevelopmentStore';
 
-const props = defineProps({
-    // 当前职位名称
-    currentJobName: {
-        type: String,
-        default: ''
-    }
-});
 
-const emit = defineEmits(['path-data-updated']);
-
-// 当前职位（从父组件获取）
-const currentPosition = computed(() => props.currentJobName || '市场专员');
-
-// 目标职业选项列表
-const targetCareerOptions = ref([]);
-const selectedTargetIndex = ref(-1);
-const selectedJobPathId = ref(null);
-
-// 职业路径数量
-const totalPathCount = ref(0);
-
-// 技能列表数据（从接口获取）
-const skillList = ref([]);
-const isLoadingSkills = ref(false);
-// 是否已经查询过（用于区分未查询和已查询但无数据）
-const hasQueried = ref(false);
-
-function parseSkillList(skillString) {
-    if (!skillString) {
-        return [];
-    }
-    return skillString
-        .split(/[,，]/)
-        .map(item => item.trim())
-        .filter(item => item.length > 0);
-}
-
-async function fetchTargetCareerOptions(keyword = '') {
-    try {
-        const response = await getJobPathPage({
-            jobName: keyword,
-            pageNo: 1,
-            pageSize: 100
-        });
-
-        const list = response?.data?.list || response?.list || [];
-
-        targetCareerOptions.value = list.map(item => ({
-            label: item.endJob || item.startJob || '未知职位',
-            value: item.id,
-            startJob: item.startJob,
-            endJob: item.endJob,
-            jobOrder: item.jobOrder
-        }));
-
-        if (targetCareerOptions.value.length === 0) {
-            selectedTargetIndex.value = -1;
-            selectedJobPathId.value = null;
-        }
-    } catch (error) {
-        targetCareerOptions.value = [];
-        selectedTargetIndex.value = -1;
-        selectedJobPathId.value = null;
-        uni.showToast({
-            title: '职业路径列表获取失败',
-            icon: 'none'
-        });
-    }
-}
-
-async function fetchPathCount() {
-    try {
-        const response = await getJobPathNum();
-        totalPathCount.value = response?.data ?? 0;
-    } catch (error) {
-        totalPathCount.value = 0;
-    }
-}
-
-async function loadPathDetail(jobPathId) {
-    if (!jobPathId || jobPathId === null || jobPathId === undefined || jobPathId === '') {
-        uni.showToast({
-            title: '职业路径ID无效',
-            icon: 'none'
-        });
-        localPathData.value = {
-            start: { title: '暂无数据', skills: [] },
-            steps: [],
-            end: { title: '暂无数据', skills: [] }
-        };
-        return;
-    }
-
-    try {
-        const requestParams = {
-            jobPathId: jobPathId
-        };
-
-        const response = await getJobPathDetail(requestParams);
-
-        const details = Array.isArray(response?.data) ? response.data : [];
-
-        if (details.length === 0) {
-            localPathData.value = {
-                start: { title: '暂无数据', skills: [] },
-                steps: [],
-                end: { title: '暂无数据', skills: [] }
-            };
-            uni.showToast({
-                title: '暂无职业路径数据',
-                icon: 'none'
-            });
-            return;
-        }
-
-        const normalized = details.map(item => ({
-            title: item?.name || '未命名职位',
-            skills: parseSkillList(item?.skillNameList)
-        }));
-
-        const start = normalized[0] || { title: '暂无数据', skills: [] };
-        const end = normalized[normalized.length - 1] || { title: '暂无数据', skills: [] };
-        const steps = normalized.slice(1, normalized.length - 1);
-
-        localPathData.value = {
-            start,
-            steps,
-            end
-        };
-
-        // 通知父组件路径数据已更新
-        emit('path-data-updated', {
-            pathData: localPathData.value,
-            targetCareer: targetCareerOptions.value[selectedTargetIndex.value]?.label || ''
-        });
-    } catch (error) {
-        uni.showToast({
-            title: '获取路径详情失败',
-            icon: 'none'
-        });
-        localPathData.value = {
-            start: { title: '暂无数据', skills: [] },
-            steps: [],
-            end: { title: '暂无数据', skills: [] }
-        };
-        emit('path-data-updated', {
-            pathData: localPathData.value,
-            targetCareer: ''
-        });
-    }
-}
-
-function handleTargetChange(e) {
-    const index = Number(e.detail.value);
-    selectedTargetIndex.value = index;
-    const option = targetCareerOptions.value[index];
-    selectedJobPathId.value = option ? option.value : null;
-    // 重新选择目标职业时，重置查询状态和技能列表
-    hasQueried.value = false;
-    skillList.value = [];
-}
-
-async function handleQuery() {
-    if (selectedTargetIndex.value < 0) {
-        uni.showToast({
-            title: '请选择目标职业',
-            icon: 'none'
-        });
-        return;
-    }
-
-    const option = targetCareerOptions.value[selectedTargetIndex.value];
-    if (!option) {
-        uni.showToast({
-            title: '目标职业数据异常',
-            icon: 'none'
-        });
-        return;
-    }
-
-    // 获取技能权重数据
-    await fetchSkillWeight();
-}
-
-// 获取技能权重数据
-async function fetchSkillWeight() {
-    // 获取当前职位（使用界面上显示的值）
-    const currentJob = currentPosition.value || props.currentJobName || '';
-
-    if (!currentJob) {
-        skillList.value = [];
-        uni.showToast({
-            title: '当前职位信息缺失',
-            icon: 'none'
-        });
-        return;
-    }
-
-    // 获取目标职业（使用界面上选择的值）
-    const targetCareer = selectedTargetIndex.value >= 0
-        ? targetCareerOptions.value[selectedTargetIndex.value]?.label
-        : '';
-
-    if (!targetCareer) {
-        skillList.value = [];
-        uni.showToast({
-            title: '请选择目标职业',
-            icon: 'none'
-        });
-        return;
-    }
-
-    isLoadingSkills.value = true;
-    uni.showLoading({
-        title: '加载中...',
-        mask: true
-    });
-
-    try {
-        const response = await getJobSkillWeight({
-            currentJobName: currentJob,
-            targetJobName: targetCareer
-        });
-
-        // 标记已经查询过
-        hasQueried.value = true;
-
-        // 处理接口返回的数据
-        const responseData = response?.data || response || [];
-        const dataItem = Array.isArray(responseData) ? responseData[0] : responseData;
-
-        // 合并当前职位和目标职位的技能列表
-        const currentSkills = Array.isArray(dataItem?.currentSkillDetList) ? dataItem.currentSkillDetList : [];
-        const targetSkills = Array.isArray(dataItem?.targetSkillDetList) ? dataItem.targetSkillDetList : [];
-        const allSkills = [...currentSkills, ...targetSkills];
-
-        // 转换为组件需要的格式
-        skillList.value = allSkills.map(item => ({
-            name: item?.skillName || item?.name || '',
-            weight: item?.skillWeight || item?.weight || '0',
-            score: item?.skillScore !== undefined && item?.skillScore !== null ? item.skillScore : 0,
-            tags: item?.tags || [],
-            currentLevel: item?.currentLevel || item?.level || 0
-        })).filter(item => item.name).sort((a, b) => {
-            // 按技能分数降序排序（skillScore）
-            const scoreA = parseFloat(a.score) || 0;
-            const scoreB = parseFloat(b.score) || 0;
-            return scoreB - scoreA;
-        });
-
-        if (skillList.value.length === 0) {
-            uni.showToast({
-                title: '暂无技能数据',
-                icon: 'none'
-            });
-        }
-    } catch (error) {
-        // 查询失败也标记为已查询
-        hasQueried.value = true;
-        uni.showToast({
-            title: '获取技能权重失败',
-            icon: 'none'
-        });
-        skillList.value = [];
-    } finally {
-        isLoadingSkills.value = false;
-        uni.hideLoading();
-    }
-}
-
-onMounted(async () => {
-    await Promise.all([
-        fetchTargetCareerOptions(),
-        fetchPathCount()
-    ]);
-});
+const store = useSkillDevelopmentStore();
 </script>
 
+<template>
+<div class="skill-development">
+    <!-- 职业技能查询区域 -->
+    <div class="query-section">
+        <div class="section-title">
+            <uni-icons color="#286BFA" size="18" type="search"></uni-icons>
+            <span class="title-text">技能发展路径查询</span>
+        </div>
+        <div class="input-group">
+            <div class="input-item">
+                <span class="input-label">当前职位</span>
+                <picker @change="store.eventProfession" :value="store.professionIndex" :range="store.professionsRef" range-key="label">
+                    <div class="picker-field">
+                        <span :class="store.professionLabel ? 'picker-text' : 'picker-placeholder'">
+                            {{ store.professionLabel || '请选择目标职业' }}
+                        </span>
+                        <uni-icons color="#999999" size="16" type="down"></uni-icons>
+                    </div>
+                </picker>
+            </div>
+            <div class="input-item">
+                <span class="input-label">目标职业</span>
+                <picker :range="store.pathsRef" :value="store.targetCareerIndex" range-key="label" @change="store.eventTargetCareer">
+                    <div class="picker-field">
+                        <span :class="store.targetCareerLabel ? 'picker-text' : 'picker-placeholder'">
+                            {{ store.targetCareerLabel || '请选择目标职业' }}
+                        </span>
+                        <uni-icons color="#999999" size="16" type="down"></uni-icons>
+                    </div>
+                </picker>
+            </div>
+            <button class="query-btn" @click="store.eventSearch">
+                <span>查询技能发展路径</span>
+                <uni-icons color="#FFFFFF" size="18" type="search"></uni-icons>
+            </button>
+        </div>
+    </div>
+
+    <div class="content-section">
+        <div class="section-title">
+            <uni-icons color="#000000" size="18" type="person-filled"></uni-icons>
+            <span class="title-text">技能发展路径</span>
+        </div>
+
+        <div class="intro-text">
+            基于您的当前职业和目标职业,以下是您需要重点发展的技能:
+        </div>
+
+        <div class="skill-list">
+            <div v-if="store.result.length === 0" class="empty-text">暂无数据</div>
+            <div v-for="(skill, index) in store.result" v-else :key="index" class="skill-item">
+                <div class="skill-header">
+                    <span class="skill-name">{{ skill.name }}</span>
+                    <div class="skill-info">
+                        <span class="skill-score">技能分数: {{ skill.score }}</span>
+                        <span class="skill-weight">权重: {{ skill.weight }}</span>
+                    </div>
+                </div>
+                <div v-if="skill.tags && skill.tags.length > 0" class="skill-tags">
+                    <div v-for="(tag, tagIndex) in skill.tags" :key="tagIndex" class="skill-tag">
+                        {{ tag }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
 <style lang="scss" scoped>
 .skill-development {
     padding: 10rpx 28rpx 20rpx;
     background-color: #EBF4FF;
-    min-height:95%;
+    min-height: 95%;
 }
 
 .query-section {
@@ -407,12 +110,6 @@ onMounted(async () => {
     margin-bottom: 24rpx;
 }
 
-.input-item {
-    display: flex;
-    flex-direction: column;
-    gap: 12rpx;
-}
-
 .input-label {
     font-size: 28rpx;
     color: #000000;
@@ -428,44 +125,6 @@ onMounted(async () => {
     color: #666666;
 }
 
-.picker-field {
-    background-color: #F5F5F5;
-    border: 1rpx solid #E0E0E0;
-    border-radius: 12rpx;
-    padding: 20rpx 24rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.picker-text {
-    font-size: 28rpx;
-    color: #000000;
-}
-
-.picker-placeholder {
-    font-size: 28rpx;
-    color: #999999;
-}
-
-.query-btn {
-    width: 100%;
-    height: 80rpx;
-    line-height: 40rpx;
-    border-radius: 20rpx;
-    background: linear-gradient(180deg, rgba(18, 125, 240, 1) 0%, rgba(59, 14, 123, 0.71) 100%);
-    color: rgba(255, 255, 255, 1);
-    font-size: 28rpx;
-    text-align: center;
-    font-family: '阿里巴巴普惠体3.0-regular', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
-    border: 2rpx solid rgba(187, 187, 187, 1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12rpx;
-    padding: 0;
-}
-
 .path-summary {
     margin-top: 16rpx;
     font-size: 24rpx;
diff --git a/stores/useCareerPathStore.js b/stores/useCareerPathStore.js
index dab04ba..fb3b97b 100644
--- a/stores/useCareerPathStore.js
+++ b/stores/useCareerPathStore.js
@@ -1,20 +1,43 @@
 import { computed, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
-import { useAuthUserStore, useBasicStore } from './index';
-import { getCurrentPosition, getPath, getPathDetail } from '@/apiRc/service';
+import { getCurrentPosition, getPath, getPathDetail } from '@/apiRc/service/careerPath';
+
 
 export const useCareerPathStore = defineStore('career-path', () => {
-    const storeBasic = useBasicStore();
-    const storeUser = useAuthUserStore();
+    const userInfo = ref({
+        userName: '',
+        professions: [],
+        skills: []
+    });
 
+    try {
+        const data = uni.getStorageSync('userInfo');
+
+        userInfo.value.professions = data.jobTitle.map((d) => {
+            return {
+                label: d,
+                value: d
+            };
+        });
+        userInfo.value.skills = data.appSkillsList.map((d) => {
+            return {
+                label: d.name,
+                value: d.name
+            };
+        });
+    } catch (e) {
+        console.warn(e);
+    }
+
+    const professionIndex = ref(0);
     const profession = ref('');
+    const professionLabel = ref('');
     const professions = ref([]);
     const professionsRef = computed(() => {
-        const userInfo = storeUser.userInfo;
-        if (!userInfo || !userInfo.professions || userInfo.professions.length === 0) {
+        if (!userInfo.value || !userInfo.value.professions || userInfo.value.professions.length === 0) {
             return professions.value;
         }
-        const userProfessionsLabels = userInfo.professions.map((d) => d.label);
+        const userProfessionsLabels = userInfo.value.professions.map((d) => d.label);
         let professionsA = [];
         let professionsB = [];
         professions.value.filter((d) => userProfessionsLabels.includes(d.label));
@@ -26,17 +49,19 @@ export const useCareerPathStore = defineStore('career-path', () => {
             }
         }
         if (professionsA.length === 0) {
-            professionsA = userInfo.professions;
+            professionsA = userInfo.value.professions;
             professionsB = professions.value;
         }
-        return [...professionsA, ...professionsB];
+        return [ ...professionsA, ...professionsB ];
     });
 
+    const targetCareerIndex = ref(0);
     const targetCareer = ref('');
+    const targetCareerLabel = ref('');
     const paths = ref([]);
     const pathsRef = computed(() => {
         return paths.value.filter((d) => {
-            return `${d.startJobId}` === profession.value;
+            return `${ d.startJobId }` === profession.value;
         });
     });
 
@@ -55,7 +80,7 @@ export const useCareerPathStore = defineStore('career-path', () => {
             professions.value = data.map((d) => {
                 return {
                     label: d.name,
-                    value: `${d.jobId}`
+                    value: `${ d.jobId }`
                 };
             });
         } catch (e) {
@@ -76,7 +101,7 @@ export const useCareerPathStore = defineStore('career-path', () => {
             paths.value = data.map((d) => {
                 return {
                     label: d.endJob,
-                    value: `${d.startJobId}-${d.endJobId}`,
+                    value: `${ d.startJobId }-${ d.endJobId }`,
                     startJobId: d.startJobId
                 };
             });
@@ -89,7 +114,7 @@ export const useCareerPathStore = defineStore('career-path', () => {
         if (!targetCareer.value) {
             return;
         }
-        const [startJobId, endJobId] = targetCareer.value.split('-');
+        const [ startJobId, endJobId ] = targetCareer.value.split('-');
         const params = {
             startJobId: Number(startJobId),
             endJobId: Number(endJobId)
@@ -105,7 +130,7 @@ export const useCareerPathStore = defineStore('career-path', () => {
             }
             result.value = data.map((d, i) => {
                 return {
-                    type: i === 0 ? 'start' : i === data.length - 1 ? 'end' : 'normal',
+                    type: i === 0 ? 'start' : i === data.length - 1 ? 'end' : 'step',
                     step: i,
                     title: d.name,
                     tags: d.skillNameList.split(',')
@@ -116,10 +141,6 @@ export const useCareerPathStore = defineStore('career-path', () => {
         }
     };
 
-    const eventChange = () => {
-        targetCareer.value = '';
-    };
-
     const eventSearch = () => {
         if (pathsRef.value.length === 0) {
             ElMessage.warning({
@@ -145,44 +166,49 @@ export const useCareerPathStore = defineStore('career-path', () => {
         void fetchResult();
     };
 
-    watch(
-        () => storeBasic.loaded,
-        () => {
-            if (storeBasic.loaded) {
-                void fetchData();
-                void fetchDataPath();
-            }
-        }
-    );
+    const eventProfession = (e) => {
+        professionIndex.value = Number(e.detail.value);
+        const item = professionsRef.value[e.detail.value]
+        profession.value = item.value;
+        professionLabel.value = item.label;
+        targetCareer.value = '';
+        targetCareerLabel.value = '';
+        result.value = [];
+    };
+
+    const eventTargetCareer = (e) => {
+        targetCareerIndex.value = Number(e.detail.value);
+        const item = pathsRef.value[e.detail.value]
+        targetCareer.value = item.value;
+        targetCareerLabel.value = item.label;
+        result.value = [];
+    };
+
+    void fetchData();
+    void fetchDataPath();
 
     watch(
         () => professionsRef.value,
         () => {
-            if (typeof professionsRef.value[0] !== 'undefined') {
-                if (professionsRef.value[0].value) {
-                    profession.value = professionsRef.value[0].value;
-                }
-            }
-        }
-    );
-
-    watch(
-        () => profession.value,
-        () => {
-            const userInfo = storeUser.userInfo;
-            if (userInfo.professions[0] && profession.value === userInfo.professions[0].value) {
-                targetCareer.value = '';
+            if (professionsRef.value[ 0 ]) {
+                profession.value = professionsRef.value[ 0 ].value;
+                professionLabel.value = professionsRef.value[ 0 ].label;
             }
         }
     );
 
     return {
+        professionIndex,
+        professionLabel,
         profession,
         professionsRef,
+        targetCareerIndex,
         targetCareer,
+        targetCareerLabel,
         pathsRef,
         result,
-        eventChange,
+        eventProfession,
+        eventTargetCareer,
         eventSearch
     };
 });
diff --git a/stores/useCareerRecommendationStore.js b/stores/useCareerRecommendationStore.js
index bce36ad..30639fb 100644
--- a/stores/useCareerRecommendationStore.js
+++ b/stores/useCareerRecommendationStore.js
@@ -1,6 +1,6 @@
 import { computed, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
-import { getProfessions, getSkillTags, getRecommend } from '@/apiRc/service/careerRecommendation';
+import { getProfessions, getRecommend, getSkillTags } from '@/apiRc/service/careerRecommendation';
 
 
 export const useCareerRecommendationStore = defineStore('career-recommendation', () => {
@@ -8,7 +8,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
         userName: '',
         professions: [],
         skills: []
-    })
+    });
 
     try {
         const data = uni.getStorageSync('userInfo');
@@ -29,6 +29,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
         console.warn(e);
     }
 
+    const professionIndex = ref(0);
     const profession = ref('');
     const professionLabel = ref('');
     const professions = ref([]);
@@ -51,12 +52,12 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
             professionsA = userInfo.value.professions;
             professionsB = professions.value;
         }
-        return [...professionsA, ...professionsB];
+        return [ ...professionsA, ...professionsB ];
     });
 
     const skills = ref([]);
     const skillTags = computed(() => {
-        if (userInfo.value.professions[0] && professionLabel.value === userInfo.value.professions[0].value) {
+        if (userInfo.value.professions[ 0 ] && professionLabel.value === userInfo.value.professions[ 0 ].value) {
             return userInfo.value.skills.map((d) => d.label);
         }
         return skills.value;
@@ -77,7 +78,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
             professions.value = data.map((d) => {
                 return {
                     label: d.name,
-                    value: `${d.jobId}`
+                    value: `${ d.jobId }`
                 };
             });
         } catch (e) {
@@ -95,8 +96,8 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
                 $emitter.emit('error-message', msg);
                 return;
             }
-            if (typeof data !== 'undefined' && Array.isArray(data) && data.length > 0 && data[0]) {
-                skills.value = data[0].skillDetList.map((d) => d.skillName);
+            if (typeof data !== 'undefined' && Array.isArray(data) && data.length > 0 && data[ 0 ]) {
+                skills.value = data[ 0 ].skillDetList.map((d) => d.skillName);
             }
         } catch (e) {
             console.warn(e);
@@ -128,15 +129,17 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
         }
     };
 
-    const eventProfession = (item) => {
-        profession.value = item.value;
-        professionLabel.value = item.label;
-    }
-
     const eventSearch = () => {
         void fetchRecommend();
     };
 
+    const eventProfession = (e) => {
+        professionIndex.value = Number(e.detail.value);
+        const item = professionsRef.value[e.detail.value]
+        profession.value = item.value;
+        professionLabel.value = item.label;
+    };
+
     void fetchData();
 
     watch(
@@ -144,7 +147,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
         () => {
             if (profession.value) {
                 void fetchSkillTags();
-                eventSearch();
+                result.value = [];
             }
         },
         {
@@ -155,21 +158,21 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
     watch(
         () => professionsRef.value,
         () => {
-            if (professionsRef.value[0]) {
-                profession.value = professionsRef.value[0].value;
-                professionLabel.value = professionsRef.value[0].label;
+            if (professionsRef.value[ 0 ]) {
+                profession.value = professionsRef.value[ 0 ].value;
+                professionLabel.value = professionsRef.value[ 0 ].label;
             }
         }
     );
 
     return {
+        professionIndex,
         profession,
         professionLabel,
-        professions,
         professionsRef,
         skillTags,
         result,
-        eventSearch,
-        eventProfession
+        eventProfession,
+        eventSearch
     };
 });
diff --git a/stores/useSkillDevelopmentStore.js b/stores/useSkillDevelopmentStore.js
index 5e5f1d4..8ec23dc 100644
--- a/stores/useSkillDevelopmentStore.js
+++ b/stores/useSkillDevelopmentStore.js
@@ -1,20 +1,44 @@
 import { computed, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
-import { useAuthUserStore, useBasicStore } from './index';
-import { getCurrentPosition, getPath, getSkill } from '@/apiRc/service';
+import { getCurrentPosition, getPath } from '@/apiRc/service/careerPath';
+import { getSkill } from '@/apiRc/service/skillDevelopment';
+
 
 export const useSkillDevelopmentStore = defineStore('skill-development', () => {
-    const storeBasic = useBasicStore();
-    const storeUser = useAuthUserStore();
+    const userInfo = ref({
+        userName: '',
+        professions: [],
+        skills: []
+    });
 
+    try {
+        const data = uni.getStorageSync('userInfo');
+
+        userInfo.value.professions = data.jobTitle.map((d) => {
+            return {
+                label: d,
+                value: d
+            };
+        });
+        userInfo.value.skills = data.appSkillsList.map((d) => {
+            return {
+                label: d.name,
+                value: d.name
+            };
+        });
+    } catch (e) {
+        console.warn(e);
+    }
+
+    const professionIndex = ref(0);
     const profession = ref('');
+    const professionLabel = ref('');
     const professions = ref([]);
     const professionsRef = computed(() => {
-        const userInfo = storeUser.userInfo;
-        if (!userInfo || !userInfo.professions || userInfo.professions.length === 0) {
+        if (!userInfo.value || !userInfo.value.professions || userInfo.value.professions.length === 0) {
             return professions.value;
         }
-        const userProfessionsLabels = userInfo.professions.map((d) => d.label);
+        const userProfessionsLabels = userInfo.value.professions.map((d) => d.label);
         let professionsA = [];
         let professionsB = [];
         professions.value.filter((d) => userProfessionsLabels.includes(d.label));
@@ -26,17 +50,19 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
             }
         }
         if (professionsA.length === 0) {
-            professionsA = userInfo.professions;
+            professionsA = userInfo.value.professions;
             professionsB = professions.value;
         }
-        return [...professionsA, ...professionsB];
+        return [ ...professionsA, ...professionsB ];
     });
 
+    const targetCareerIndex = ref(0);
     const targetCareer = ref('');
+    const targetCareerLabel = ref('');
     const paths = ref([]);
     const pathsRef = computed(() => {
         return paths.value.filter((d) => {
-            return `${d.startJobId}` === profession.value;
+            return `${ d.startJobId }` === profession.value;
         });
     });
 
@@ -55,7 +81,7 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
             professions.value = data.map((d) => {
                 return {
                     label: d.name,
-                    value: `${d.jobId}`
+                    value: `${ d.jobId }`
                 };
             });
         } catch (e) {
@@ -86,6 +112,9 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
     };
 
     const fetchResult = async () => {
+        if (!targetCareer.value) {
+            return;
+        }
         const current = professionsRef.value.find((d) => d.value === profession.value);
         const target = pathsRef.value.find((d) => d.value === targetCareer.value);
         if (!current || !target) {
@@ -101,9 +130,9 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
                 $emitter.emit('error-message', msg);
                 return;
             }
-            if (typeof data !== 'undefined' && Array.isArray(data) && data.length > 0 && data[0]) {
-                const excludes = data[0].currentSkillDetList.map((d) => d.skillId);
-                result.value = data[0].targetSkillDetList
+            if (typeof data !== 'undefined' && Array.isArray(data) && data.length > 0 && data[ 0 ]) {
+                const excludes = data[ 0 ].currentSkillDetList.map((d) => d.skillId);
+                result.value = data[ 0 ].targetSkillDetList
                     .filter((d) => !excludes.includes(d.skillId))
                     .map((d) => {
                         return {
@@ -120,10 +149,6 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
         }
     };
 
-    const eventChange = () => {
-        targetCareer.value = '';
-    };
-
     const eventSearch = () => {
         if (pathsRef.value.length === 0) {
             ElMessage.warning({
@@ -149,44 +174,49 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
         void fetchResult();
     };
 
-    watch(
-        () => storeBasic.loaded,
-        () => {
-            if (storeBasic.loaded) {
-                void fetchData();
-                void fetchDataPath();
-            }
-        }
-    );
+    const eventProfession = (e) => {
+        professionIndex.value = Number(e.detail.value);
+        const item = professionsRef.value[ e.detail.value ];
+        profession.value = item.value;
+        professionLabel.value = item.label;
+        targetCareer.value = '';
+        targetCareerLabel.value = '';
+        result.value = [];
+    };
+
+    const eventTargetCareer = (e) => {
+        targetCareerIndex.value = Number(e.detail.value);
+        const item = pathsRef.value[ e.detail.value ];
+        targetCareer.value = item.value;
+        targetCareerLabel.value = item.label;
+        result.value = [];
+    };
+
+    void fetchData();
+    void fetchDataPath();
 
     watch(
         () => professionsRef.value,
         () => {
-            if (typeof professionsRef.value[0] !== 'undefined') {
-                if (professionsRef.value[0].value) {
-                    profession.value = professionsRef.value[0].value;
-                }
-            }
-        }
-    );
-
-    watch(
-        () => profession.value,
-        () => {
-            const userInfo = storeUser.userInfo;
-            if (userInfo.professions[0] && profession.value === userInfo.professions[0].value) {
-                targetCareer.value = '';
+            if (professionsRef.value[ 0 ]) {
+                profession.value = professionsRef.value[ 0 ].value;
+                professionLabel.value = professionsRef.value[ 0 ].label;
             }
         }
     );
 
     return {
+        professionIndex,
+        professionLabel,
         profession,
         professionsRef,
+        targetCareerIndex,
         targetCareer,
+        targetCareerLabel,
         pathsRef,
         result,
-        eventChange,
+        eventProfession,
+        eventTargetCareer,
         eventSearch
     };
 });