vue实现版本树

Vue 实现版本树

版本树通常用于展示项目的版本历史或分支结构，类似 Git 的提交历史。以下是基于 Vue 的实现方法。

数据结构设计

使用树形结构存储版本信息，每个节点包含版本号、描述、子版本等属性：

const versionTree = {
  id: 'v1.0',
  description: 'Initial release',
  children: [
    {
      id: 'v1.1',
      description: 'Bug fixes',
      children: []
    },
    {
      id: 'v2.0',
      description: 'Major update',
      children: [
        {
          id: 'v2.1',
          description: 'Feature addition',
          children: []
        }
      ]
    }
  ]
}

递归组件实现

创建递归组件 VersionTreeNode.vue 来渲染树形结构：

<template>
  <div class="node">
    <div class="node-content">
      <span>{{ node.id }}</span>
      <p>{{ node.description }}</p>
    </div>
    <div class="children" v-if="node.children && node.children.length">
      <version-tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'VersionTreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.node {
  margin-left: 20px;
  padding-left: 10px;
  border-left: 1px solid #ccc;
}
.node-content {
  padding: 5px;
  background: #f5f5f5;
  margin-bottom: 5px;
}
</style>

主组件集成

在主组件中导入并使用递归组件：

<template>
  <div class="version-tree">
    <h3>Version History</h3>
    <version-tree-node :node="treeData" />
  </div>
</template>

<script>
import VersionTreeNode from './VersionTreeNode.vue'

export default {
  components: {
    VersionTreeNode
  },
  data() {
    return {
      treeData: {
        id: 'v1.0',
        description: 'Initial release',
        children: [
          {
            id: 'v1.1',
            description: 'Bug fixes',
            children: []
          },
          {
            id: 'v2.0',
            description: 'Major update',
            children: [
              {
                id: 'v2.1',
                description: 'Feature addition',
                children: []
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

交互功能增强

添加展开/折叠功能：

<template>
  <div class="node">
    <div class="node-content" @click="toggle">
      <span>{{ node.id }}</span>
      <p>{{ node.description }}</p>
    </div>
    <div 
      class="children" 
      v-if="node.children && node.children.length && expanded"
    >
      <version-tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'VersionTreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      expanded: true
    }
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded
    }
  }
}
</script>

可视化增强

使用第三方库如 d3.js 或 vue-orgchart 可以实现更专业的树形可视化效果。以下是使用 vue-orgchart 的示例：

npm install vue-orgchart

<template>
  <org-chart :datasource="treeData"></org-chart>
</template>

<script>
import OrgChart from 'vue-orgchart'
import 'vue-orgchart/dist/style.min.css'

export default {
  components: { OrgChart },
  data() {
    return {
      treeData: {
        name: 'v1.0',
        description: 'Initial release',
        children: [
          {
            name: 'v1.1',
            description: 'Bug fixes'
          },
          {
            name: 'v2.0',
            description: 'Major update',
            children: [
              {
                name: 'v2.1',
                description: 'Feature addition'
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

动态数据加载

对于大型版本树，可以实现异步加载：

methods: {
  async loadChildren(node) {
    if (!node.childrenLoaded && node.hasChildren) {
      const response = await fetch(`/api/versions/${node.id}/children`)
      node.children = await response.json()
      node.childrenLoaded = true
    }
  }
}

在模板中添加加载触发：

<div @click="loadChildren(node)">
  <!-- node content -->
</div>