修改树形结构名称不显示问题

src/components/CommonTree.vue

@@ -23,8 +23,9 @@
       -->
       <span class="custom_tree_node" slot-scope="{ node, data }">
         <!-- 节点名称区域 -->
-        <span class="node_label" :title="data.label">
-          {{ data.label }}
+        <span class="node_label" :title="data[treeProps.label]">
+          <!-- 名称文本单独包裹一层，确保省略号只作用于真正承载文字的元素 -->
+          <span class="node_label_text">{{ data[treeProps.label] }}</span>
           <!-- 右侧计数（可选，数据存在 count 字段时显示） -->
           <span class="node_count" v-if="data.count !== undefined && data.count !== null">
             ({{ data.count }})
@@ -198,7 +199,7 @@ export default {
       console.log('========== [CommonTree] AI讲解点击 ==========');
       console.log('当前节点数据 data:', data);
       console.log('当前节点对象 node:', node);
-      console.log('节点标签 label:', data.label || (data[this.treeProps.label]));
+      console.log('节点标签 label:', data[this.treeProps.label]);
       console.log('节点唯一键 key:', data[this.nodeKey]);
       console.log('节点层级 level:', node.level);
       console.log('是否叶子节点 isLeaf:', node.isLeaf);
@@ -209,7 +210,7 @@ export default {
         nodeData: data,           // 当前节点的用户数据
         nodeInstance: node,       // el-tree 节点实例
         nodeKey: data[this.nodeKey], // 当前节点 key
-        nodeLabel: data.label || (data[this.treeProps.label]) // 当前节点显示名称
+        nodeLabel: data[this.treeProps.label] // 当前节点显示名称
       });
     },
 
@@ -542,6 +543,7 @@ $btn_color: #4F3EFF; // AI讲解按钮颜色  （用户要求）
   overflow: hidden;
   position: relative;
   z-index: 2;
+  min-width: 0; /* flex子项关键：允许收缩到内容宽度以下 */
 
   /* ===== 节点文字（用户要求：400 / 14px / #333333） ===== */
   .node_label {
@@ -551,15 +553,25 @@ $btn_color: #4F3EFF; // AI讲解按钮颜色  （用户要求）
     font-weight: 400;
     font-size: 14px;
     color: #333333;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    min-width: 0; /* flex子项关键：允许收缩 */
+
+    /* 名称文本：唯一承载文字的元素，在这里设置省略号 */
+    .node_label_text {
+      display: inline-block;
+      flex: 1;
+      min-width: 0; /* 关键：防止flex子项被最小宽度撑开 */
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1;
+    }
 
-    /* 计数（60）：灰色小字 */
+    /* 计数（60）：灰色小字，不收缩 */
     .node_count {
       color: #909399;
       margin-left: 4px;
       font-size: 13px;
+      flex-shrink: 0;
     }
   }
 }

src/http/api/konwledgGraph.js

@@ -0,0 +1,11 @@
+import { get, post,downLoadByBlob} from "../common/http";
+import base from "../common/base";
+
+const report = {
+    // 知识点分区
+    knowledgePartition(data){
+        return post(`${base.prefix}/api/v1/studentTarge/knowledge_partition`,data);
+    },
+}
+
+export default report;

src/views/targetImprove/practice/knowledgeGraph.vue

@@ -35,63 +35,18 @@
 
     <!-- 区域展示组件 -->
     <region :allKnowledgeList="displayAllKnowledgeList" @add-practice="handleAddPractice" />
-
-    <!-- ==================== 测试：CommonTree 公共树形组件 ==================== -->
-    <div class="tree_test_section">
-      <div class="tree_test_title">
-        <span>📋 公共树形组件（CommonTree）测试区域</span>
-        <el-button-group>
-          <el-button size="mini" type="primary" @click="testGetChecked">获取选中节点</el-button>
-          <el-button size="mini" @click="testClearChecked">清空选中</el-button>
-        </el-button-group>
-      </div>
-
-      <!-- 左侧树形组件 -->
-      <div class="tree_test_body">
-        <div class="tree_panel">
-          <CommonTree
-            ref="treeTestRef"
-            :tree-data="mockTreeData"
-            :tree-props="{ label: 'label', children: 'children' }"
-            node-key="id"
-            show-checkbox
-            :default-expand-all="false"
-            @node-click="handleTestNodeClick"
-            @node-check="handleTestNodeCheck"
-            @ai-explain="handleTestAiExplain"
-          />
-        </div>
-
-        <!-- 右侧回传日志面板 -->
-        <div class="tree_log_panel">
-          <div class="log_title">回传事件日志：</div>
-          <div class="log_list">
-            <div v-for="(log, idx) in eventLogs" :key="idx" class="log_item" :class="'log-' + log.type">
-              <div class="log_tag">[{{ log.tag }}]</div>
-              <div class="log_time">{{ log.time }}</div>
-              <pre class="log_content">{{ log.msg }}</pre>
-            </div>
-            <div v-if="eventLogs.length === 0" class="log_empty">
-              请点击左侧树节点 / 勾选复选框 / 悬停后点"AI讲解"按钮 ↖
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
 import CircularDiffusion from './knowledgeGraph/circularDiffusion.vue';
 import Region from './knowledgeGraph/region.vue';
-import CommonTree from '@/components/CommonTree.vue';
 
 export default {
   name: 'KnowledgeGraph',
   components: {
     CircularDiffusion,
-    Region,
-    CommonTree
+    Region
   },
   props: {
     activeView: {
@@ -151,84 +106,6 @@ export default {
         { label: '初二', value: 'grade2' },
         { label: '初三', value: 'grade3' }
       ],
-      // CommonTree 事件日志列表（用于右侧回传展示）
-      eventLogs: [],
-      // ========== 测试 CommonTree 组件的树形假数据 ==========
-      // 结构：id / label / count（可选）/ children（可选）
-      mockTreeData: [
-        {
-          id: 'chinese',
-          label: '语言文学应用',
-          count: 60,
-          children: [
-            {
-              id: 'modern-reading',
-              label: '现代文阅读',
-              count: 60,
-              children: [
-                { id: 'discourse', label: '论述类文本阅读', count: 60 },
-                { id: 'practical', label: '实用类文本阅读', count: 60 },
-                { id: 'literary', label: '文学类文本阅读', count: 60 }
-              ]
-            },
-            {
-              id: 'ancient-reading',
-              label: '古代诗文阅读',
-              count: 60,
-              children: [
-                { id: 'classical-chinese', label: '文言文阅读', count: 60 },
-                { id: 'ancient-poetry', label: '古代诗歌阅读', count: 60 },
-                { id: 'water-resource', label: '水资源跨区域调配对区域发展的影响', count: 60 }
-              ]
-            },
-            {
-              id: 'whole-book',
-              label: '整本书阅读',
-              count: 60,
-              children: [
-                {
-                  id: 'literary-classics',
-                  label: '文学名著',
-                  count: 60,
-                  children: [
-                    { id: 'luoshen', label: '《洛神赋》', count: 60 },
-                    { id: 'tengwang', label: '《滕王阁序》', count: 60 }
-                  ]
-                },
-                { id: 'culture-classics', label: '文化经典', count: 60 },
-                { id: 'academic-works', label: '学术著作', count: 60 }
-              ]
-            }
-          ]
-        },
-        {
-          id: 'math',
-          label: '数学知识体系',
-          count: 140,
-          children: [
-            {
-              id: 'math-function',
-              label: '函数与方程',
-              count: 30,
-              children: [
-                { id: 'quadratic', label: '一元二次方程', count: 20 },
-                { id: 'function-graph', label: '函数图像', count: 10 }
-              ]
-            },
-            {
-              id: 'math-geometry',
-              label: '几何图形',
-              count: 50,
-              children: [
-                { id: 'triangle', label: '三角形', count: 20 },
-                { id: 'circle-prop', label: '圆的性质', count: 30 }
-              ]
-            },
-            { id: 'math-probability', label: '概率统计', count: 30 },
-            { id: 'math-solid', label: '立体几何', count: 30 }
-          ]
-        }
-      ],
       // 假数据：表格树形结构数据（用于图表渲染）
       // knowledgeType: 1=薄弱(红色), 2=良好(黄色), 3=优秀(绿色)
       // gradeScoreRate: 年级得分率，用于判断节点是否有数据
@@ -517,95 +394,6 @@ export default {
     // 处理加入练习
     handleAddPractice(item) {
       this.$emit('add-practice', item);
-    },
-
-    // ==================== CommonTree 组件测试方法 ====================
-
-    /**
-     * 追加日志到右侧面板
-     * @param {String} type - 日志类型（info/warn/success/error）
-     * @param {String} tag  - 显示标签
-     * @param {String} msg  - 日志内容
-     */
-    appendLog(type, tag, msg) {
-      const now = new Date();
-      const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
-      this.eventLogs.unshift({ type, tag, time, msg });
-      // 只保留最近10条日志
-      if (this.eventLogs.length > 10) this.eventLogs.pop();
-    },
-
-    /**
-     * 【事件回传1】树节点点击（单选）
-     * @param {Object} data - 当前节点用户数据
-     * @param {Object} node - el-tree 节点实例
-     */
-    handleTestNodeClick(data, node) {
-      const logMsg =
-        `节点ID: ${data.id}\n` +
-        `节点名称: ${data.label}\n` +
-        `节点层级: ${node.level}\n` +
-        `是否叶子: ${node.isLeaf ? '是' : '否'}\n` +
-        `计数count: ${data.count ?? '无'}\n` +
-        `\n完整data: ${JSON.stringify(data, null, 2)}`;
-      console.log('%c[KnowledgeGraph] node-click 回传数据: ', 'background:#2E64FA;color:#fff;padding:4px 8px;border-radius:4px;', { data, node });
-      this.appendLog('info', '节点点击', logMsg);
-    },
-
-    /**
-     * 【事件回传2】复选框勾选变化（多选）
-     * @param {Object} data        - 当前操作的节点数据
-     * @param {Object} checkedInfo - 勾选状态详情 { checkedNodes, checkedKeys, halfCheckedKeys }
-     */
-    handleTestNodeCheck(data, checkedInfo) {
-      const selectedLabels = checkedInfo.checkedNodes.map(n => n.label).join('、') || '(无)';
-      const logMsg =
-        `当前操作节点: ${data.label}\n` +
-        `已勾选节点数: ${checkedInfo.checkedNodes.length}\n` +
-        `已勾选key: [${checkedInfo.checkedKeys.join(', ')}]\n` +
-        `半选key: [${(checkedInfo.halfCheckedKeys || []).join(', ') || '无'}]\n` +
-        `\n已勾选节点名称: ${selectedLabels}`;
-      console.log('%c[KnowledgeGraph] node-check 回传数据: ', 'background:#3BA272;color:#fff;padding:4px 8px;border-radius:4px;', { data, checkedInfo });
-      this.appendLog('success', '复选框勾选', logMsg);
-    },
-
-    /**
-     * 【事件回传3】AI讲解按钮点击
-     * @param {Object} payload { nodeData, nodeInstance, nodeKey, nodeLabel }
-     */
-    handleTestAiExplain(payload) {
-      const { nodeData, nodeKey, nodeLabel } = payload;
-      const logMsg =
-        `节点Key: ${nodeKey}\n` +
-        `节点名称: ${nodeLabel}\n` +
-        `节点层级: ${payload.nodeInstance.level}\n` +
-        `计数count: ${nodeData.count ?? '无'}\n` +
-        `\n完整节点数据: ${JSON.stringify(nodeData, null, 2)}`;
-      console.log('%c[KnowledgeGraph] ai-explain 回传数据: ', 'background:#FAC858;color:#333;padding:4px 8px;border-radius:4px;', payload);
-      this.appendLog('warn', 'AI讲解', logMsg);
-    },
-
-    /**
-     * 按钮测试：获取所有勾选的节点（调用组件暴露方法）
-     */
-    testGetChecked() {
-      const nodes = this.$refs.treeTestRef.getCheckedNodes(false);
-      const keys = this.$refs.treeTestRef.getCheckedKeys(false);
-      const logMsg =
-        `勾选节点对象数: ${nodes.length}\n` +
-        `勾选节点key数组: ${JSON.stringify(keys)}\n` +
-        `勾选节点名称: ${nodes.map(n => n.label).join('、') || '(无)'}`;
-      console.log('%c[KnowledgeGraph] getCheckedNodes 结果: ', 'background:#67C23A;color:#fff;padding:4px 8px;border-radius:4px;', nodes, keys);
-      this.appendLog('success', '获取选中节点', logMsg);
-    },
-
-    /**
-     * 按钮测试：清空所有勾选节点
-     */
-    testClearChecked() {
-      this.$refs.treeTestRef.clearChecked();
-      console.log('%c[KnowledgeGraph] clearChecked 已清空', 'background:#E6A23C;color:#fff;padding:4px 8px;border-radius:4px;');
-      this.appendLog('info', '清空选中', '已通过 clearChecked() 方法清空所有复选框勾选状态');
     }
   }
 };
@@ -666,131 +454,6 @@ export default {
     }
   }
 
-  /* ==================== CommonTree 测试区域样式 ==================== */
-  .tree_test_section {
-    margin-top: 15px;
-    background: #fff;
-    border-radius: 10px;
-    padding: 15px 20px 20px;
-
-    /* 测试区标题栏 */
-    .tree_test_title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding-bottom: 12px;
-      margin-bottom: 12px;
-      border-bottom: 1px solid #eceef3;
-      font-size: 15px;
-      font-weight: 600;
-      color: #333;
-    }
-
-    /* 测试区主体：左树右日志 */
-    .tree_test_body {
-      display: flex;
-      gap: 16px;
-    }
-
-    /* 左侧树形面板（必须白色，因为树形末尾竖线用白色块截断） */
-    .tree_panel {
-      flex: 1;
-      height: 420px;
-      border: 1px solid #eceef3;
-      border-radius: 8px;
-      padding: 8px 0 8px 4px;
-      overflow-y: auto;
-      background: #fff;
-    }
-
-    /* 右侧事件日志面板 */
-    .tree_log_panel {
-      width: 420px;
-      height: 420px;
-      border: 1px solid #eceef3;
-      border-radius: 8px;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-
-      .log_title {
-        padding: 10px 14px;
-        font-size: 13px;
-        font-weight: 600;
-        color: #666;
-        background: #f5f7fa;
-        border-bottom: 1px solid #eceef3;
-      }
-
-      .log_list {
-        flex: 1;
-        overflow-y: auto;
-        padding: 10px 12px;
-
-        /* 单条日志 */
-        .log_item {
-          border: 1px solid #eef0f3;
-          border-radius: 6px;
-          margin-bottom: 8px;
-          overflow: hidden;
-
-          .log_tag, .log_time {
-            display: inline-block;
-            padding: 2px 8px;
-            font-size: 12px;
-          }
-
-          .log_tag {
-            font-weight: 600;
-            color: #fff;
-          }
-
-          .log_time {
-            color: #909399;
-            background: #f5f7fa;
-            border-bottom: 1px solid #eef0f3;
-          }
-
-          .log_content {
-            margin: 0;
-            padding: 8px 10px;
-            font-size: 12px;
-            color: #444;
-            line-height: 1.6;
-            white-space: pre-wrap;
-            word-break: break-all;
-            font-family: Consolas, Monaco, monospace;
-          }
-
-          /* 按事件类型设置标签颜色 */
-          &.log-info {
-            .log_tag { background: #2E64FA; }
-            border-left: 3px solid #2E64FA;
-          }
-          &.log-success {
-            .log_tag { background: #3BA272; }
-            border-left: 3px solid #3BA272;
-          }
-          &.log-warn {
-            .log_tag { background: #E6A23C; }
-            border-left: 3px solid #E6A23C;
-          }
-          &.log-error {
-            .log_tag { background: #F56C6C; }
-            border-left: 3px solid #F56C6C;
-          }
-        }
-
-        .log_empty {
-          padding: 30px 12px;
-          text-align: center;
-          color: #909399;
-          font-size: 13px;
-        }
-      }
-    }
-  }
-
   /* 自定义滚动条样式 */
   &::-webkit-scrollbar {
     width: 6px;