feat(web): add commit metadata

apps/web/nuxt.config.ts

@@ -1,5 +1,17 @@
 import { fileURLToPath } from 'node:url'
 import { join } from 'node:path'
+import { execSync } from 'node:child_process'
+
+const commitHash = execSync('git rev-parse --short HEAD').toString().trimEnd()
+const commitUrl = `https://github.com/Chilfish/Weibo-archiver/commit/${commitHash}`
+
+const commitDate = execSync('git log -1 --format=%cI').toString().trimEnd()
+const lastCommitMessage = execSync('git show -s --format=%s').toString().trimEnd()
+
+process.env.VITE_GIT_COMMIT_DATE = commitDate
+process.env.VITE_GIT_COMMIT_HASH = commitHash
+process.env.VITE_GIT_LAST_COMMIT_MESSAGE = lastCommitMessage
+process.env.VITE_GIT_COMMIT_URL = commitUrl
 
 const root = fileURLToPath(new URL('../../', import.meta.url))
 const core = join(root, 'packages/core/src')

apps/web/src/pages/post.vue

@@ -10,20 +10,9 @@ const hasPosts = ref(false)
     <div class="sm:ml-16">
       <settings-about :show-donate="false" />
 
-      <div
-        class="py-6 text-center"
-      >
-        <p class="mb-2 text-xl font-bold">
-          暂无微博数据，点击右上角设置来导入吧👋
-        </p>
-        <p>
-          或者点击
-          <RouterLink to="/example">
-            这里
-          </RouterLink>
-          查看示例数据
-        </p>
-      </div>
+      <p class="mb-2 py-6 text-center text-xl font-bold">
+        暂无微博数据，点击右上角设置来导入吧👋
+      </p>
     </div>
 
     <n-image

packages/shared/src/index.ts

@@ -24,6 +24,40 @@ export function dayEnd(date: Date | number) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59).getTime()
 }
 
+/**
+ * Format the date string
+ * @param time the date string
+ * @param fmt the format string, e.g. `YYYY-MM-DD HH:mm:ss`
+ */
+export function formatDate(
+  time: string | number | Date,
+  fmt = 'YYYY-MM-DD HH:mm:ss',
+) {
+  if (typeof time === 'number' && time < 1e12)
+    time *= 1000
+
+  const date = new Date(time)
+  if (Number.isNaN(date.getTime()))
+    return ''
+
+  const pad = (num: number) => num.toString().padStart(2, '0')
+
+  const year = date.getFullYear()
+  const month = pad(date.getMonth() + 1) // Months are zero-based
+  const day = pad(date.getDate())
+  const hours = pad(date.getHours())
+  const minutes = pad(date.getMinutes())
+  const seconds = pad(date.getSeconds())
+
+  return fmt
+    .replace('YYYY', year.toString())
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+    .replace('ss', seconds)
+}
+
 /**
  * 可暂停/恢复的循环
  * @param fn

packages/shared/src/types/env.d.ts

@@ -22,6 +22,11 @@ interface ImportMetaEnv {
   readonly VITE_IS_ELECTRON: 'true' | 'false'
 
   readonly VITE_COOKIE: string
+
+  readonly VITE_GIT_COMMIT_DATE: string
+  readonly VITE_GIT_COMMIT_HASH: string
+  readonly VITE_GIT_LAST_COMMIT_MESSAGE: string
+  readonly VITE_GIT_COMMIT_URL: string
 }
 
 interface ImportMeta {

packages/ui/src/settings/about.vue

@@ -1,11 +1,19 @@
 <script setup lang="ts">
+import { formatDate } from '@shared'
+
 withDefaults(defineProps<{
   showDonate: boolean
 }>(), {
   showDonate: true,
 })
 
-const version = import.meta.env.VITE_APP_VERSION
+const {
+  VITE_APP_VERSION: version,
+  VITE_GIT_COMMIT_HASH: commitHash,
+  VITE_GIT_COMMIT_URL: commitUrl,
+  VITE_GIT_COMMIT_DATE: commitDate,
+  // VITE_GIT_LAST_COMMIT_MESSAGE: commitMessage,
+} = import.meta.env
 </script>
 
 <template>
@@ -45,13 +53,22 @@ const version = import.meta.env.VITE_APP_VERSION
 
     <h2 class="text-6 font-bold">
       Weibo Archiver v{{ version }}
+
+      <a
+        :href="commitUrl"
+        target="_blank"
+        :title="`查看提交，最后一次构建于${formatDate(commitDate, 'YYYY/MM/DD-HH:ss')}`"
+      >
+        @{{ commitHash }}
+      </a>
     </h2>
 
-    <p class="text-5">
+    <h3 class="text-5">
       一个简单的微博备份工具，为账号被完全夹没前未雨绸缪😭
-    </p>
+    </h3>
+
     <p>
-      第一次使用？点击查看
+      第一次使用？查看
       <a
         href="https://docs.qq.com/doc/DTWttbXlMUGxZZnZq"
         target="_blank"
@@ -60,6 +77,14 @@ const version = import.meta.env.VITE_APP_VERSION
       >
         使用文档
       </a>
+
+      <span>
+        ，或者在
+        <RouterLink to="/example">
+          这里
+        </RouterLink>
+        查看示例数据
+      </span>
     </p>
     <p
       v-if="showDonate"