Add post change log tracking

frontend_nuxt/components/PostChangeLogItem.vue

@@ -0,0 +1,44 @@
+<template>
+  <div :id="`change-log-${log.id}`" class="change-log-container">
+    <div class="change-log-text">
+      <span class="change-log-user">{{ log.username }}</span>
+      <span v-if="log.type === 'CONTENT'">变更了文章内容</span>
+      <span v-else-if="log.type === 'TITLE'">变更了文章标题</span>
+      <span v-else-if="log.type === 'CATEGORY'">变更了文章分类</span>
+      <span v-else-if="log.type === 'TAG'">变更了文章标签</span>
+      <span v-else-if="log.type === 'CLOSED'">
+        <template v-if="log.newClosed">关闭了文章</template>
+        <template v-else>重新打开了文章</template>
+      </span>
+      <span v-else-if="log.type === 'PINNED'">
+        <template v-if="log.newPinnedAt">置顶了文章</template>
+        <template v-else>取消置顶了文章</template>
+      </span>
+      <span v-else-if="log.type === 'FEATURED'">
+        <template v-if="log.newFeatured">将文章设为精选</template>
+        <template v-else>取消精选文章</template>
+      </span>
+    </div>
+    <div class="change-log-time">{{ log.time }}</div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({ log: Object })
+</script>
+
+<style scoped>
+.change-log-container {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+}
+.change-log-user {
+  font-weight: bold;
+  margin-right: 4px;
+}
+.change-log-time {
+  font-size: 12px;
+  opacity: 0.6;
+}
+</style>