历史版本

src/views/manage/app/make/index.vue

@@ -39,9 +39,10 @@
             <CzrButton type="primary" title="发布" @click="onPublish" />
             <el-popover
               :show-arrow="false"
-              :width="180"
+              width="26rem"
+              placement="bottom-end"
               :popper-style="{
-                padding: 10,
+                padding: 0,
               }"
             >
               <template #reference>
@@ -52,22 +53,50 @@
                 </div>
               </template>
               <div>
-                <div class="text-xl">历史版本</div>
                 <div
-                  class="mt-4 flex max-h-[200px] flex-col gap-2 overflow-y-auto"
+                  class="flex h-11 w-full items-center bg-[url('@/assets/images/knowledge/knowledge-back-test.png')] bg-[length:100%_100%] bg-no-repeat px-4 text-base font-bold text-[#303133]"
                 >
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
-                  <div>2023-08-24 22:33:44</div>
+                  历史版本
+                </div>
+                <div class="h-[68vh] overflow-y-auto px-4 py-2">
+                  <template v-for="(item, index) in state.history">
+                    <div class="flex">
+                      <div
+                        class="relative mr-3 flex flex-col items-center justify-center"
+                      >
+                        <div
+                          class="h-[50%] w-0.5"
+                          :class="`${index > 0 ? 'bg-[#DEE9FF]' : ''}`"
+                        />
+                        <div
+                          class="h-[50%] w-0.5"
+                          :class="`${index < state.history.length - 1 ? 'bg-[#DEE9FF]' : ''}`"
+                        />
+                        <div
+                          class="absolute flex size-2 items-center justify-center rounded bg-[var(--czr-main-color)]"
+                        >
+                          <div class="size-1 rounded bg-[#DEE9FF]" />
+                        </div>
+                      </div>
+                      <div
+                        class="my-2 flex flex-1 items-center justify-between rounded-lg bg-[#F4F8FF] px-4 py-3"
+                      >
+                        <div
+                          class="text-base font-bold"
+                          :class="{
+                            'text-[var(--czr-success-color)]':
+                              item.type === 'publish' || item.type === 'apply',
+                            'text-[var(--czr-warning-color)]':
+                              item.type === 'submit',
+                            'text-[#2E3238]': item.type === 'create',
+                          }"
+                        >
+                          {{ item.type }}
+                        </div>
+                        <div class="text-[#909399]">{{ item.date }}</div>
+                      </div>
+                    </div>
+                  </template>
                 </div>
               </div>
             </el-popover>
@@ -720,6 +749,17 @@ const state: any = reactive({
   },
   dragRefresh: true,
   isDebug: false,
+  history: [
+    { type: 'submit', date: '2024-03-06 22:24:54' },
+    { type: 'publish', date: '2024-03-06 22:24:54' },
+    { type: 'apply', date: '2024-03-06 22:24:54' },
+    { type: 'publish', date: '2024-03-06 22:24:54' },
+    { type: 'submit', date: '2024-03-06 22:24:54' },
+    { type: 'publish', date: '2024-03-06 22:24:54' },
+    { type: 'submit', date: '2024-03-06 22:24:54' },
+    { type: 'publish', date: '2024-03-06 22:24:54' },
+    { type: 'create', date: '2024-03-06 22:24:54' },
+  ],
 })
 const ref_form = ref()
 const ref_formPublish = ref()