修改知识点树高度计算逻辑

src/api/flyio.ts

@@ -3,7 +3,6 @@ import Fly from "flyio/dist/npm/wx"
 import config from "@/config";
 import { useUserStore } from '@/store/userStore';
 const { serverBaseUrl } = config;
-console.log(serverBaseUrl)
 const requestConfig = {
   baseURL: serverBaseUrl,
   timeout: 30000,

src/config.ts

@@ -7,7 +7,6 @@ const config = {
   paySiteUrl: '',
   responseErrorCatch: true,
 };
-console.log(process.env.IE_ENV)
 export const env = {
   development: {
     serverBaseUrl: 'https://dz.shineking.top/prod-api',

src/pagesStudy/components/knowledge-tree-node.vue

@@ -26,11 +26,11 @@
     </view>
 
     <!-- 子节点容器 -->
-    <view v-if="nodeData.children && nodeData.children.length > 0"
-      :class="['ml-40 overflow-hidden transition-all duration-300 h-0']"
-      :style="{ height: nodeData.actualHeight + 'px' }">
+    <view v-if="nodeData.children && nodeData.children.length > 0" :id="`knowledge-children-${nodeData.id}`"
+      :class="['ml-40 overflow-hidden transition-all duration-300', { 'is-measuring': isMeasuringHeight }]"
+      :style="{ height: measuredHeight + 'px' }">
       <knowledge-tree-node v-for="child in nodeData.children" :key="child.name" :node-data="child"
-        :parent-data="nodeData" @node-click="handleNodeClick" @update-height="handleUpdateHeight"
+        :parent-data="nodeData" @node-click="handleNodeClick"
         @start-practice="handleChildStartPractice">
         <template #default>
           <slot></slot>
@@ -54,9 +54,10 @@ const props = defineProps({
     default: null
   }
 });
-
+const isMeasuringHeight = ref(false);
+const measuredHeight = ref(0);
 // 定义 emits
-const emit = defineEmits(['nodeClick', 'updateHeight', 'startPractice']);
+const emit = defineEmits(['nodeClick', 'startPractice']);
 
 // 计算子节点高度
 const calculateChildrenHeight = (node: Study.KnowledgeNode): number => {
@@ -78,28 +79,38 @@ const calculateChildrenHeight = (node: Study.KnowledgeNode): number => {
   return height;
 };
 
+const getRect = (selector: string) => {
+  return new Promise((resolve: (rect: { top: number, height: number }) => void) => {
+    const query = uni.createSelectorQuery();
+    query.select(selector).boundingClientRect(function (rect) {
+      resolve(rect as { top: number, height: number });
+    }).exec();
+  });
+}
+
+const measureHeight = () => {
+  isMeasuringHeight.value = true;
+  nextTick(() => {
+    getRect(`#knowledge-children-${props.nodeData.id}`).then((res: any) => {
+      isMeasuringHeight.value = false;
+      setTimeout(() => {
+        nextTick(() => {
+          measuredHeight.value = res.height;
+        });
+      }, 0);
+    });
+  });
+}
+
 // 处理节点点击
 const handleClick = () => {
 
   // 切换展开状态
   props.nodeData.isExpanded = !props.nodeData.isExpanded;
-
-  // 计算并设置实际高度
   if (props.nodeData.isExpanded) {
-    props.nodeData.actualHeight = calculateChildrenHeight(props.nodeData);
+    measureHeight();
   } else {
-    props.nodeData.actualHeight = 0;
-  }
-
-  // 通知父组件节点被点击
-  emit('nodeClick', {
-    node: props.nodeData,
-    parent: props.parentData
-  });
-
-  // 如果有父节点，通知父节点更新高度
-  if (props.parentData) {
-    emit('updateHeight', props.parentData);
+    measuredHeight.value = 0;
   }
 };
 
@@ -119,20 +130,6 @@ const handleNodeClick = (eventData: { node: Study.KnowledgeNode; parent: Study.K
   emit('nodeClick', eventData);
 };
 
-// 处理高度更新事件
-const handleUpdateHeight = (parentNode: Study.KnowledgeNode) => {
-
-  // 重新计算父节点高度
-  if (parentNode.isExpanded) {
-    parentNode.actualHeight = calculateChildrenHeight(parentNode);
-  }
-
-  // 继续向上传递高度更新事件
-  if (props.parentData) {
-    emit('updateHeight', props.parentData);
-  }
-};
-
 const getCorrectRate = (rate: number): number => {
   if (!rate) {
     return 0;
@@ -152,4 +149,12 @@ const getProgressPercent = (nodeData: Study.KnowledgeNode): number => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.is-measuring {
+  opacity: 0;
+  position: fixed;
+  z-index: -1;
+  transform: translateX(-100%);
+  height: auto !important;
+}
+</style>

src/pagesStudy/components/knowledge-tree.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="knowledge-tree">
     <knowledge-tree-node v-for="item in initializedData" :key="item.id" :node-data="item"
-      @node-click="handleNodeClick" @update-height="handleUpdateHeight" @start-practice="handleStartPractice">
+      @node-click="handleNodeClick" @start-practice="handleStartPractice">
       <template #default>
         <slot></slot>
       </template>
@@ -12,14 +12,14 @@
 import * as Study from '@/types/study';
 import KnowledgeTreeNode from './knowledge-tree-node.vue';
 // 定义 emits
-const emit = defineEmits(['update:treeData', 'nodeClick', 'startPractice']);
+const emit = defineEmits(['nodeClick', 'startPractice']);
 
 // 定义 props
 const props = defineProps({
   treeData: {
     type: Array as PropType<Study.KnowledgeNode[]>,
     default: () => []
-  }
+  },
 });
 
 // 初始化后的数据
@@ -33,9 +33,6 @@ const ensureItemProperties = (item: Study.KnowledgeNode) => {
   if (item.isLeaf === undefined) {
     item.isLeaf = !item.children || item.children.length === 0;
   }
-  if (item.actualHeight === undefined) {
-    item.actualHeight = 0;
-  }
   // 递归处理子项
   item.children?.forEach(child => ensureItemProperties(child));
 }
@@ -47,9 +44,8 @@ const initializeData = (sourceData: Study.KnowledgeNode[]): Study.KnowledgeNode[
     const children = initializeData(item.children || []);
     return {
       ...item,
-      isExpanded: oldItem?.isExpanded ?? false,
+      isExpanded: item.id === oldItem?.id ? oldItem?.isExpanded ?? false : false,
       isLeaf: !item.children || item.children.length === 0,
-      actualHeight: oldItem?.actualHeight ?? 0,
       children
     };
   });
@@ -61,12 +57,6 @@ const handleNodeClick = (eventData: { node: Study.KnowledgeNode; parent: Study.K
   emit('nodeClick', eventData);
 };
 
-// 处理高度更新事件
-const handleUpdateHeight = (node: Study.KnowledgeNode) => {
-  // 通知父组件数据已更新
-  emit('update:treeData', initializedData.value);
-};
-
 // 处理开始练习事件
 const handleStartPractice = (node: Study.KnowledgeNode) => {
   emit('startPractice', node);

src/types/index.ts

@@ -38,7 +38,6 @@ export interface TreeData {
   children?: TreeData[];
   isExpanded?: boolean;
   isLeaf?: boolean;
-  actualHeight?: number;
 }
 
 export interface TableConfig {

src/types/study.ts

@@ -93,7 +93,6 @@ export interface Knowledge {
 export type KnowledgeNode = Pick<Knowledge, 'id' | 'name' | 'status' | 'questionCount' | 'finishedCount' | 'finishedRatio'> & {
   isExpanded: boolean;
   isLeaf: boolean;
-  actualHeight: number;
   children: KnowledgeNode[];
 }