feat(frontend): inject commit ID into frontend build for version tracking

- Added a new build argument `COMMIT_ID_ARG` to pass the commit ID during the Docker build process.
- Updated the Dockerfile to set an environment variable `VITE_FRONTEND_COMMIT` with the commit ID.
- Enhanced the Vite configuration to resolve the frontend commit ID from the environment or Git.
- Modified the SystemInfo component to display the frontend commit ID in the UI.
- Implemented a version info preparation step in the GitHub Actions workflow to capture the commit ID.

.github/workflows/docker-image.yml

@@ -32,6 +32,12 @@ jobs:
         with:
           images: ${{ secrets.DOCKERHUB_USERNAME }}/weknora-ui
 
+      - name: Prepare version info
+        id: version
+        run: |
+          eval "$(./scripts/get_version.sh env)"
+          echo "commit_id=$COMMIT_ID" >> $GITHUB_OUTPUT
+
       - name: Build ui Image
         uses: docker/build-push-action@v7
         with:
@@ -39,6 +45,8 @@ jobs:
           platforms: linux/amd64,linux/arm64
           file: frontend/Dockerfile
           context: ./frontend
+          build-args: |
+            ${{ format('COMMIT_ID_ARG={0}', steps.version.outputs.commit_id) }}
           labels: ${{ steps.meta.outputs.labels }}
           tags: ${{ steps.meta.outputs.tags }}
           cache-from: type=gha,scope=build-ui

docker-compose.yml

@@ -5,6 +5,7 @@ services:
       context: ./frontend
       args:
         - MAX_FILE_SIZE_MB=${MAX_FILE_SIZE_MB:-50}
+        - COMMIT_ID_ARG=${COMMIT_ID:-unknown}
     container_name: WeKnora-frontend
     ports:
       - "${FRONTEND_PORT:-80}:80"

frontend/Dockerfile

@@ -7,6 +7,10 @@ WORKDIR /app
 ENV NODE_OPTIONS="--max-old-space-size=4096"
 ENV VITE_IS_DOCKER=true
 
+# 注入前端 commit hash（构建上下文为 frontend/，无 .git，故通过构建参数传入）
+ARG COMMIT_ID_ARG=unknown
+ENV VITE_FRONTEND_COMMIT=${COMMIT_ID_ARG}
+
 # 复制依赖文件
 COPY package*.json ./
 COPY pnpm-workspace.yaml ./

frontend/env.d.ts

@@ -5,4 +5,5 @@ declare module '*.vue' {
     import { Component } from 'vue'; const component: Component; export default component;
 }
 
-declare const __FRONTEND_VERSION__: string;
+declare const __FRONTEND_VERSION__: string;
+declare const __FRONTEND_COMMIT__: string;

frontend/src/views/settings/SystemInfo.vue

@@ -61,6 +61,9 @@
               size="small"
               style="margin-left: 8px;"
             >{{ $t('system.versionMismatch') }}</t-tag>
+            <span v-if="frontendCommit && frontendCommit !== 'unknown'" class="commit-info">
+              ({{ frontendCommit }})
+            </span>
           </span>
         </div>
       </div>
@@ -203,6 +206,7 @@ const systemInfo = ref<SystemInfo | null>(null)
 const loading = ref(true)
 const error = ref('')
 const frontendVersion = __FRONTEND_VERSION__
+const frontendCommit = __FRONTEND_COMMIT__
 
 let uptimeTicker: ReturnType<typeof setInterval> | null = null
 const uptimeTick = ref(0)
@@ -260,6 +264,7 @@ const reportIssueURL = computed(() => {
       '### Environment',
       `- WeKnora version: ${systemInfo.value?.version || 'unknown'}`,
       `- Commit: ${systemInfo.value?.commit_id || 'unknown'}`,
+      `- Frontend version: ${frontendVersion} (${frontendCommit})`,
       `- DB version reported: ${systemInfo.value?.db_version || 'unknown'}`,
       '',
       '### Migration error',

frontend/vite.config.ts

@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from 'node:url'
 import { resolve, dirname } from 'node:path'
 import { existsSync } from 'node:fs'
+import { execSync } from 'node:child_process'
 import { createRequire } from 'node:module'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -11,6 +12,22 @@ const require = createRequire(import.meta.url)
 
 const pkg = require('./package.json') as { version?: string }
 const FRONTEND_VERSION = pkg.version ?? 'unknown'
+
+function resolveFrontendCommit(): string {
+  const fromEnv = process.env.VITE_FRONTEND_COMMIT || process.env.GITHUB_SHA
+  if (fromEnv) {
+    return fromEnv.slice(0, 7)
+  }
+  try {
+    return execSync('git rev-parse --short HEAD', { stdio: ['ignore', 'pipe', 'ignore'] })
+      .toString()
+      .trim()
+  } catch {
+    return 'unknown'
+  }
+}
+
+const FRONTEND_COMMIT = resolveFrontendCommit()
 const DEV_PROXY_TARGET =
   process.env.VITE_DEV_PROXY_TARGET ||
   process.env.FRONTEND_BACKEND_URL ||
@@ -34,6 +51,7 @@ function resolveVueOfficePptxEntry(): string {
 export default defineConfig({
   define: {
     __FRONTEND_VERSION__: JSON.stringify(FRONTEND_VERSION),
+    __FRONTEND_COMMIT__: JSON.stringify(FRONTEND_COMMIT),
   },
   plugins: [
     vue(),

scripts/build_images.sh

@@ -185,9 +185,13 @@ build_frontend_image() {
     
     cd "$PROJECT_ROOT"
     
+    # 获取版本信息（用于注入前端 commit hash）
+    get_version_info
+    
     docker build \
         --platform $PLATFORM \
         -f frontend/Dockerfile \
+        --build-arg COMMIT_ID_ARG="$COMMIT_ID" \
         -t wechatopenai/weknora-ui:latest \
         frontend/