SOURCE

new Vue({
    el: '#app',
    data() {
        return {
            revisions: [
                { version: 47, time: '2024-09-03 16:24:47', author: '我' },
                { version: 46, time: '2024-09-03 16:02:34', author: 'xxxx(李四)' },
                // 更多版本...
            ],
            showDrawer: false,


        };
    },
    methods: {
        toggleDetails(index) {
            console.log(`Toggle details for revision ${index}`);
        },
        revertVersion(index) {
            console.log(`Revert to version ${index}`);
        }
    },
    computed: {
    },
})

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js">

</script>
<div id="app">


	<div style="margin-top: 100px;">
		<button @click="showDrawer = true">查看修订记录</button>
    <transition name="drawer-fade">
      <div v-if="showDrawer" class="local-drawer">
        <div class="drawer-content">
          <div class="revision-record">
           <div class="history-bar-header">
		<div class="history-bar-header-title">修订记录</div>
		<button class="history-bar-close-button"  @click="showDrawer = false">&times;</button>
    </div>
    <div>
        <ul class="history-list">
            <li v-for="(revision, index) in revisions" :key="index" class="history-item" :class="{ active: index === 0 }" @click="toggleDetails(index)">
                <div class="history-item-header">
                   
                    <div class="history-item-version">第{{ revision.version }}版(当前)</div>
                    <div class="history-item-time">{{ revision.time }}</div>
                    <div class="history-item-author">
                        {{ revision.author }}
                    </div>
                    <div class="history-item-change">
                        <div class="history-item-change-before" style="background-color: rgb(130, 47, 29);"></div>
                        <div class="history-item-change-after" style="background-color: rgb(130, 47, 29);"></div>
                    </div>
                </div>
                <div class="history-item-content">
                    <p>这里可以是详细的修改内容</p>
                    
                </div>
            </li>
        </ul>
    </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
    
</div>

      .history-bar {
          border: 1px solid #dee2e6;
          background-color: #f8f9fa;
      }
      
      .history-bar-header {
          display: flex;
          justify-content: space-between;
          padding: 10px;
          border-bottom: 1px solid #dee2e6;
          background: #f8f9fa;
      }
      
      .history-bar-header-title {
          font-size: 1.2em;
          font-weight: bold;
      }
      
      .history-bar-close-button {
          background: none;
          border: none;
          cursor: pointer;
          font-size: 1.2em;
      }
      
      .history-tabs-bar-item {
          padding: 5px 10px;
          cursor: pointer;
      }
      
      .history-tabs-bar-item.active {
          border-bottom: 2px solid #007bff;
      }
      
      .history-tab-body {
          padding: 10px;
      }
      
      .history-list {
          list-style-type: none;
          padding: 0;
      }
      
      .history-item {
          padding: 10px;
          border-bottom: 1px solid #dee2e6;
      }
      
      .history-item-version {
          font-weight: bold;
      }
      
      .history-item-header-content {
          display: flex;
          justify-content: space-between;
      }
      
      .history-item-author {
          display: inline-block;
          margin-left: 10px;
      }
      
      .item-revert {
          cursor: pointer;
          display: flex;
          align-items: center;
      }
      
      .expand-arrow-icon-outer {
          cursor: pointer;
          margin-right: 10px;
      }
      
      .local-drawer {
          position: absolute;
          /* 或者使用 fixed */
          top: 0;
          right: 0;
          bottom: 0;
          width: 300px;
          /* 自定义宽度 */
          background-color: white;
          overflow-y: auto;
      }
      
      .drawer-fade-enter-active,
      .drawer-fade-leave-active {
          transition: opacity 0.3s;
      }
      
      .drawer-fade-enter,
      .drawer-fade-leave-to {
          opacity: 0;
      }
      
      .revision-record {
          padding: 1rem;
      }