feat(web): separate build sources and localize time

.woodpecker/dev-image.yml

@@ -45,7 +45,7 @@ steps:
       - image="$ZOT_REGISTRY/justme/webdrop-api:dev-$sha"
       - dev_image="$ZOT_REGISTRY/justme/webdrop-api:dev"
       - build_time="$(date -u +%Y-%m-%dT%H:%M:%SZ)"
-      - buildah bud --layers --network host --format docker --platform linux/amd64 --build-arg "WEBDROP_BUILD_COMMIT=$CI_COMMIT_SHA" --build-arg "WEBDROP_BUILD_TAG=$build_tag" --build-arg "WEBDROP_BUILD_TIME=$build_time" --tag "$image" --file server/Dockerfile .
+      - buildah bud --layers --network host --format docker --platform linux/amd64 --build-arg "WEBDROP_FRONTEND_COMMIT=$CI_COMMIT_SHA" --build-arg "WEBDROP_FRONTEND_TAG=$build_tag" --build-arg "WEBDROP_BACKEND_COMMIT=$CI_COMMIT_SHA" --build-arg "WEBDROP_BACKEND_TAG=$build_tag" --build-arg "WEBDROP_BUILD_TIME=$build_time" --tag "$image" --file server/Dockerfile .
       - buildah tag "$image" "$dev_image"
       - buildah push "$image" "docker://$image"
       - buildah push "$dev_image" "docker://$dev_image"

.woodpecker/release-backend.yml

@@ -58,7 +58,7 @@ steps:
       - latest_image="$ZOT_REGISTRY/justme/webdrop-api:latest"
       - build_commit="$(git rev-parse HEAD)"
       - build_time="$(date -u +%Y-%m-%dT%H:%M:%SZ)"
-      - buildah bud --layers --network host --format docker --platform linux/amd64 --build-arg "WEBDROP_BUILD_COMMIT=$build_commit" --build-arg "WEBDROP_BUILD_TAG=$release_tag" --build-arg "WEBDROP_BUILD_TIME=$build_time" --tag "$image" --file server/Dockerfile .
+      - buildah bud --layers --network host --format docker --platform linux/amd64 --build-arg "WEBDROP_FRONTEND_COMMIT=$build_commit" --build-arg "WEBDROP_FRONTEND_TAG=$release_tag" --build-arg "WEBDROP_BACKEND_COMMIT=$build_commit" --build-arg "WEBDROP_BACKEND_TAG=$release_tag" --build-arg "WEBDROP_BUILD_TIME=$build_time" --tag "$image" --file server/Dockerfile .
       - buildah tag "$image" "$latest_image"
       - buildah push "$image" "docker://$image"
       - buildah push "$latest_image" "docker://$latest_image"

docs/frontend.md

@@ -20,7 +20,7 @@
 
 **依赖策略**:新增运行时依赖需要书面理由(解决什么、为何不能自写、体积)。不引入 UI 组件库、动画库、图标库、日期库。依赖越少,越容易审计;前端是整个方案的信任根。
 
-生产构建将 `web/package.json` 的版本和构建时注入的 commit、tag、UTC 时间编译进前端,首页右下角展示。部署构建通过 `WEBDROP_BUILD_COMMIT`、`WEBDROP_BUILD_TAG`、`WEBDROP_BUILD_TIME` 提供元数据;本地构建没有 CI 环境时尝试读取 Git,时间取本次构建时间。
+生产构建将 `web/package.json` 的版本、前后端各自的 commit/tag 和 UTC 构建时间编译进前端,首页右下角将时间换算为 Asia/Shanghai 并格式化为 `yyyy-MM-dd HH:mm`。部署构建通过 `WEBDROP_FRONTEND_COMMIT`、`WEBDROP_FRONTEND_TAG`、`WEBDROP_BACKEND_COMMIT`、`WEBDROP_BACKEND_TAG`、`WEBDROP_BUILD_TIME` 提供元数据;本地构建没有 CI 环境时尝试读取 Git,时间取本次构建时间。
 
 ## 2. 目录与分层
 

docs/ui-design.md

@@ -138,7 +138,7 @@ WebDrop 是**暂存区**,不是聊天室:内容按类型与待办动作组织,
 
 首页把「临时分享」与「设备频道」作为两个并列入口:前者用于发一段临时文本或文件,后者用于多设备长期同步。
 
-主页右上角提供外观菜单,可跟随系统或切换亮色/暗色。右下角显示构建来源:前端包版本、构建 tag、commit 与 UTC 构建时间;这些值来自构建环境,无法取得时如实显示「未标记」或「未知」。
+主页右上角提供外观菜单,可跟随系统或切换亮色/暗色。右下角分别显示前端和后端的 tag 与短 commit hash,并显示换算为上海时间的构建时间(`yyyy-MM-dd HH:mm`);前端还显示包版本。无法取得 tag 时如实显示「未标记」。
 
 ```
 ┌──────────────────────────────────┐

server/Dockerfile

@@ -5,11 +5,15 @@ COPY packages/core/package.json ./packages/core/package.json
 RUN cd web && npm ci --no-audit --no-fund
 COPY packages/core/ ./packages/core/
 COPY web/ ./web/
-ARG WEBDROP_BUILD_COMMIT=unknown
-ARG WEBDROP_BUILD_TAG=unknown
+ARG WEBDROP_FRONTEND_COMMIT=unknown
+ARG WEBDROP_FRONTEND_TAG=unknown
+ARG WEBDROP_BACKEND_COMMIT=unknown
+ARG WEBDROP_BACKEND_TAG=unknown
 ARG WEBDROP_BUILD_TIME=unknown
-ENV WEBDROP_BUILD_COMMIT=$WEBDROP_BUILD_COMMIT \
-    WEBDROP_BUILD_TAG=$WEBDROP_BUILD_TAG \
+ENV WEBDROP_FRONTEND_COMMIT=$WEBDROP_FRONTEND_COMMIT \
+    WEBDROP_FRONTEND_TAG=$WEBDROP_FRONTEND_TAG \
+    WEBDROP_BACKEND_COMMIT=$WEBDROP_BACKEND_COMMIT \
+    WEBDROP_BACKEND_TAG=$WEBDROP_BACKEND_TAG \
     WEBDROP_BUILD_TIME=$WEBDROP_BUILD_TIME
 RUN npm run build --prefix web
 

web/src/build-info.d.ts

@@ -1,6 +1,8 @@
 declare const __WEBDROP_BUILD_INFO__: {
   readonly frontendVersion: string;
-  readonly commit: string;
-  readonly tag: string;
+  readonly frontendCommit: string;
+  readonly frontendTag: string;
+  readonly backendCommit: string;
+  readonly backendTag: string;
   readonly builtAt: string;
 };

web/src/features/home/Home.tsx

@@ -99,10 +99,9 @@ export function Home() {
       </main>
 
       <aside className={styles.buildInfo} aria-label="构建信息">
-        <span>前端 v{buildInfo.frontendVersion}</span>
-        <span>tag {buildInfo.tag && buildInfo.tag !== 'unknown' ? buildInfo.tag : '未标记'}</span>
-        <span>commit {buildInfo.commit}</span>
-        <time dateTime={buildInfo.builtAt}>{buildInfo.builtAt} UTC</time>
+        <span>前端 v{buildInfo.frontendVersion} · tag {buildInfo.frontendTag || '未标记'} · commit {buildInfo.frontendCommit}</span>
+        <span>后端 tag {buildInfo.backendTag || '未标记'} · commit {buildInfo.backendCommit}</span>
+        <time dateTime={buildInfo.builtAt}>构建时间 {buildInfo.builtAtShanghai}</time>
       </aside>
 
       {createOpen ? <CreateSheet onClose={() => setCreateOpen(false)} onCreated={open} /> : null}

web/src/lib/buildInfo.ts

@@ -1 +1,37 @@
-export const buildInfo = __WEBDROP_BUILD_INFO__;
+const shanghaiTime = new Intl.DateTimeFormat('en-CA', {
+  timeZone: 'Asia/Shanghai',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  hourCycle: 'h23',
+});
+
+function shortCommit(commit: string): string {
+  return commit === 'unknown' ? commit : commit.slice(0, 7);
+}
+
+function knownTag(tag: string): string {
+  return tag === 'unknown' ? '' : tag;
+}
+
+function formatShanghai(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return '未知';
+
+  const parts = Object.fromEntries(shanghaiTime.formatToParts(date).map(({ type, value }) => [type, value]));
+  return `${parts.year}-${parts.month}-${parts.day} ${parts.hour}:${parts.minute}`;
+}
+
+const source = __WEBDROP_BUILD_INFO__;
+
+export const buildInfo = {
+  frontendVersion: source.frontendVersion,
+  frontendCommit: shortCommit(source.frontendCommit),
+  frontendTag: knownTag(source.frontendTag),
+  backendCommit: shortCommit(source.backendCommit),
+  backendTag: knownTag(source.backendTag),
+  builtAt: source.builtAt,
+  builtAtShanghai: formatShanghai(source.builtAt),
+};

web/vite.config.ts

@@ -17,8 +17,10 @@ function gitValue(...args: string[]): string {
 
 const buildInfo = {
   frontendVersion: webPackage.version,
-  commit: process.env.WEBDROP_BUILD_COMMIT ?? gitValue('rev-parse', '--short=12', 'HEAD'),
-  tag: process.env.WEBDROP_BUILD_TAG ?? gitValue('describe', '--tags', '--exact-match', 'HEAD'),
+  frontendCommit: process.env.WEBDROP_FRONTEND_COMMIT ?? gitValue('rev-parse', 'HEAD'),
+  frontendTag: process.env.WEBDROP_FRONTEND_TAG ?? gitValue('describe', '--tags', '--exact-match', 'HEAD'),
+  backendCommit: process.env.WEBDROP_BACKEND_COMMIT ?? gitValue('rev-parse', 'HEAD'),
+  backendTag: process.env.WEBDROP_BACKEND_TAG ?? gitValue('describe', '--tags', '--exact-match', 'HEAD'),
   builtAt: process.env.WEBDROP_BUILD_TIME ?? new Date().toISOString(),
 };