feat: 初始化Vue3项目并添加核心功能模块

新增项目基础结构，包括Vue3、Pinia、Element Plus等核心依赖
添加路由配置和用户认证状态管理
实现销售数据看板、客户画像、团队管理等核心功能模块
集成图表库和API请求工具，完成基础样式配置

my-vue-app/src/views/senorManger/components/ProblemRanking.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <h3>客户迫切解决的问题</h3>
+    </div>
+    <div class="chart-content">
+      <div class="problem-ranking">
+        <div v-for="(item, index) in sortedProblemData" :key="item.name" class="ranking-item" :class="getRankingClass(index)">
+          <div class="rank-number">
+            <span class="rank-badge" :class="getRankBadgeClass(index)">{{ index + 1 }}</span>
+          </div>
+          <div class="problem-info">
+            <div class="problem-name">{{ item.name }}</div>
+            <div class="problem-count">{{ item.value }}次咨询</div>
+          </div>
+          <div class="problem-percentage">
+            <span class="percentage">{{ getPercentage(item.value) }}%</span>
+            <div class="progress-bar">
+              <div class="progress-fill" :style="{ width: getPercentage(item.value) + '%' }"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed } from 'vue';
+
+// 问题排行榜数据
+const problemData = reactive([
+  { value: 180, name: '学习成绩提升' },
+  { value: 150, name: '学习习惯培养' },
+  { value: 120, name: '兴趣爱好发展' },
+  { value: 100, name: '心理健康问题' },
+  { value: 80, name: '升学规划' },
+  { value: 70, name: '亲子关系改善' }
+]);
+
+// 计算属性
+const sortedProblemData = computed(() => {
+  return [...problemData].sort((a, b) => b.value - a.value);
+});
+
+const totalProblemCount = computed(() => {
+  return problemData.reduce((sum, item) => sum + item.value, 0);
+});
+
+// 排行榜相关方法
+const getPercentage = (value) => ((value / totalProblemCount.value) * 100).toFixed(1);
+const getRankingClass = (index) => ({
+  'rank-first': index === 0,
+  'rank-second': index === 1,
+  'rank-third': index === 2,
+  'rank-other': index > 2
+});
+const getRankBadgeClass = (index) => ({
+  'badge-gold': index === 0,
+  'badge-silver': index === 1,
+  'badge-bronze': index === 2,
+  'badge-default': index > 2
+});
+</script>
+
+<style lang="scss" scoped>
+// 颜色变量
+$slate-200: #e2e8f0;
+$slate-900: #0f172a;
+$white: #ffffff;
+
+.chart-container {
+  background: $white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  height: 26rem !important;
+  max-height: 26rem;
+  // flex: 1;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid #ebeef5;
+  
+  h3 {
+    margin: 0;
+    color: $slate-900;
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+.chart-content {
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+  flex-grow: 1;
+  position: relative;
+  overflow-y: auto;
+}
+
+.ranking-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  
+  &:not(:last-child) {
+    border-bottom: 1px solid #f0f2f5;
+  }
+}
+
+.rank-number .rank-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  font-weight: bold;
+  font-size: 14px;
+  color: $white;
+  
+  &.badge-gold {
+    background: linear-gradient(135deg, #ffd700, #ffb300);
+  }
+  
+  &.badge-silver {
+    background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
+  }
+  
+  &.badge-bronze {
+    background: linear-gradient(135deg, #cd7f32, #b8860b);
+  }
+  
+  &.badge-default {
+    background: linear-gradient(135deg, #6c757d, #495057);
+  }
+}
+
+.problem-info {
+  flex: 1;
+  margin: 0 16px;
+}
+
+.problem-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: #212529;
+  margin-bottom: 4px;
+}
+
+.problem-count {
+  font-size: 13px;
+  color: #6c757d;
+}
+
+.problem-percentage {
+  min-width: 80px;
+  text-align: right;
+}
+
+.percentage {
+  font-size: 15px;
+  font-weight: bold;
+  color: #495057;
+  margin-bottom: 6px;
+  display: block;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 6px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #007bff, #0056b3);
+  border-radius: 3px;
+}
+
+.rank-first .progress-fill {
+  background: linear-gradient(90deg, #ffd700, #ffb300);
+}
+
+.rank-second .progress-fill {
+  background: linear-gradient(90deg, #c0c0c0, #a8a8a8);
+}
+
+.rank-third .progress-fill {
+  background: linear-gradient(90deg, #cd7f32, #b8860b);
+}
+</style>