test-repo/docs/.vitepress/theme/components/appendix/git-intro/GitBranchMergeDemo.vue

<template>
  <div class="branch-demo">
    <div class="panel">
      <div class="controls">
        <button
          :disabled="inited || mergePending"
          class="btn"
          @click="init"
        >
          初始化
        </button>
        <button
          :disabled="!inited || mergePending"
          class="btn"
          @click="commit"
        >
          提交
        </button>
        <button
          :disabled="!inited || hasBranch"
          class="btn"
          @click="branch"
        >
          创建分支
        </button>
        <button
          :disabled="!hasBranch || mergePending"
          class="btn"
          @click="prepareMerge"
        >
          准备合并
        </button>
        <button
          :disabled="!mergePending"
          class="btn"
          @click="finishMerge"
        >
          完成合并
        </button>
        <button
          class="btn secondary"
          @click="reset"
        >
          重置
        </button>
      </div>

      <div class="graph">
        <svg viewBox="0 0 400 120">
          <line
            x1="50"
            y1="40"
            x2="350"
            y2="40"
            stroke="#3b82f6"
            stroke-width="3"
          />
          <line
            v-if="hasBranch"
            x1="150"
            y1="40"
            x2="150"
            y2="80"
            stroke="#10b981"
            stroke-width="3"
          />
          <line
            v-if="hasBranch"
            x1="150"
            y1="80"
            x2="300"
            y2="80"
            stroke="#10b981"
            stroke-width="3"
          />
          <circle
            v-for="(c, i) in main"
            :cx="60 + i * 50"
            cy="40"
            r="8"
            fill="#3b82f6"
          />
          <circle
            v-for="(c, i) in feat"
            :cx="180 + i * 50"
            cy="80"
            r="8"
            fill="#10b981"
          />
        </svg>
      </div>

      <div class="status">
        <span>提交: {{ main.length }}</span>
        <span>分支: {{ hasBranch ? 2 : 1 }}</span>
      </div>
    </div>

    <div class="info-box">
      <p><strong>💡 分支策略:</strong> 并行开发，互不干扰，最后合并</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const inited = ref(false)
const hasBranch = ref(false)
const mergePending = ref(false)
const main = ref([])
const feat = ref([])

const init = () => {
  inited.value = true
  main.value = [1]
}
const commit = () => {
  if (inited.value) main.value.push(1)
}
const branch = () => {
  if (inited.value) {
    hasBranch.value = true
    feat.value = [1]
  }
}
const prepareMerge = () => {
  if (!hasBranch.value) return
  mergePending.value = true
}
const finishMerge = () => {
  if (!mergePending.value) return
  main.value.push(1)
  hasBranch.value = false
  feat.value = []
  mergePending.value = false
}
const reset = () => {
  inited.value = false
  hasBranch.value = false
  mergePending.value = false
  main.value = []
  feat.value = []
}
</script>

<style scoped>
.branch-demo {
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  background-color: var(--vp-c-bg-soft);
  padding: 1.5rem;
  margin: 0.5rem 0;
}
.controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--vp-c-brand);
  background: var(--vp-c-bg);
  color: var(--vp-c-brand);
  border-radius: 6px;
  cursor: pointer;
}
.btn:hover:not(:disabled) {
  background: var(--vp-c-brand);
  color: var(--vp-c-bg);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn.secondary {
  border-color: var(--vp-c-divider);
}
.graph {
  background: var(--vp-c-bg);
  border-radius: 6px;
  padding: 0.75rem;
  border: 1px solid var(--vp-c-divider);
  margin: 0.5rem 0;
}
.graph svg {
  width: 100%;
  height: auto;
}
.status {
  display: flex;
  gap: 2rem;
}
.info-box {
  padding: 0.75rem;
  background: var(--vp-c-bg);
  border-left: 4px solid var(--vp-c-brand);
  border-radius: 4px;
  margin-top: 1rem;
}
.info-box p {
  margin: 0;
  color: var(--vp-c-text-1);
}
</style>