feat(next): change log new ui (#234)

docs/.vitepress/theme/components/Changelog.vue

@@ -6,23 +6,51 @@ import { renderCommitMessage } from '../../utils'
 import { githubRepoLink } from "../../meta"
 import { useRawPath } from '../composables/route'
 import { useCommits } from '../composables/changelog'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/zh-cn'
+import { computed } from 'vue'
+dayjs.locale('zh-cn')
+dayjs.extend(relativeTime)
+
 
 const rawPath = useRawPath()
 
 const allCommits = changelog as CommitInfo[]
 const commits = useCommits(allCommits, rawPath)
 
+const lastChangeDate = computed(() => {
+  const date: string = commits.value[0]?.date || ''
+  if (!date) return null
+  return dayjs(date)
+})
 
-console.log('changelog', changelog)
-console.log('rawPath', rawPath.value)
-console.log('allCommits', allCommits)
-console.log('commits', commits)
+const isFreshChange = computed(() => {
+  if (!lastChangeDate.value) return false
+  return lastChangeDate.value.isAfter(dayjs().subtract(1, 'day'))
+})
 </script>
 
 <template>
   <em v-if="!commits.length" opacity="70">暂无最近变更历史</em>
 
-  <div class="grid grid-cols-[30px_auto] -ml-1 gap-1.5 children:my-auto">
+  <details v-else class="details custom-block [&_svg]:open:-rotate-180" :class="isFreshChange && '!bg-green/16'">
+    <summary style="list-style: none" class="flex justify-between items-center">
+      <span class="inline-flex items-center gap-3">
+        <span class="i-octicon:history-16" />
+        <span v-if="commits[0]">
+          此文档最后编辑于 {{ lastChangeDate?.fromNow() }}
+        </span>
+      </span>
+      <span class="inline-flex items-center gap-3 !font-400">
+        <span>
+          查看全部
+        </span>
+        <svg class="i-octicon:chevron-down-16" />
+      </span>
+    </summary>
+
+    <div class="my-2 grid grid-cols-[30px_auto] -ml-1.5 gap-1.5 children:my-auto">
       <template v-for="(commit, idx) of commits" :key="commit.hash">
         <!-- <template v-if="idx === 0 && !commit.version">
           <div m="t-1" />
@@ -63,4 +91,5 @@ console.log('commits', commits)
         </template>
       </template>
     </div>
+  </details>
 </template>

package.json

@@ -19,6 +19,7 @@
     "@nolebase/vitepress-plugin-highlight-targeted-heading": "^1.4.0",
     "@types/markdown-it": "^13.0.7",
     "@types/markdown-it-footnote": "^3.0.3",
+    "dayjs": "^1.11.10",
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-katex": "^2.0.3",
     "markdown-it-pangu": "^1.0.2",

pnpm-lock.yaml

@@ -28,6 +28,9 @@ devDependencies:
   '@types/markdown-it-footnote':
     specifier: ^3.0.3
     version: 3.0.3
+  dayjs:
+    specifier: ^1.11.10
+    version: 1.11.10
   markdown-it-footnote:
     specifier: ^3.0.3
     version: 3.0.3