feat: automate frontend releases

Author: vastsa

.github/workflows/release-please.yml

@@ -0,0 +1,45 @@
+name: Release Please
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  actions: write
+  contents: write
+  pull-requests: write
+
+concurrency:
+  group: release-${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - id: release
+        uses: googleapis/release-please-action@v4
+        with:
+          config-file: release-please-config.json
+          manifest-file: .release-please-manifest.json
+
+      - name: Merge release pull request
+        if: ${{ steps.release.outputs.prs_created == 'true' }}
+        env:
+          GH_TOKEN: ${{ github.token }}
+          RELEASE_PR: ${{ fromJSON(steps.release.outputs.pr).number }}
+        run: |
+          for attempt in {1..120}; do
+            if gh pr merge "$RELEASE_PR" --squash --delete-branch; then
+              break
+            fi
+            if [[ "$attempt" -eq 120 ]]; then
+              echo "Timed out waiting for release PR #$RELEASE_PR to merge" >&2
+              exit 1
+            fi
+            sleep 10
+          done
+          gh workflow run release-please.yml --ref main

.release-please-manifest.json

@@ -0,0 +1,3 @@
+{
+  ".": "2.4.0"
+}

CHANGELOG.md

@@ -0,0 +1,3 @@
+# Changelog
+
+此文件由 Release Please 根据 Conventional Commits 自动维护。

README.md

@@ -26,6 +26,14 @@ pnpm install
 pnpm dev
 ```
 
+The frontend version comes from `package.json`. Production builds also embed the
+current Git commit. CI can override these values with `VITE_APP_VERSION` and
+`VITE_GIT_COMMIT`.
+
+Releases are managed by Release Please. Use Conventional Commits such as
+`feat:` and `fix:`; the workflow automatically merges its release pull request,
+updates the version and changelog, and creates a `vX.Y.Z` tag.
+
 ### Type-Check, Compile and Minify for Production
 
 ```sh

env.d.ts

@@ -1 +1,4 @@
 /// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string
+declare const __GIT_COMMIT__: string

release-please-config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json",
+  "packages": {
+    ".": {
+      "release-type": "node",
+      "package-name": "filecodebox-frontend",
+      "include-component-in-tag": false,
+      "changelog-path": "CHANGELOG.md"
+    }
+  }
+}

src/i18n/locales/en-US.ts

@@ -73,7 +73,8 @@ export default {
       lastUpdated: 'Last updated: {time}',
       loadFailed: 'Failed to load dashboard data',
       footerProduct: 'FileCodeBox Admin Console',
-      runtimeVersion: 'Runtime Version',
+      backendVersion: 'Server Version',
+      frontendVersion: 'Frontend Version',
       versionPending: 'Pending sync',
       fileHealth: 'File Health',
       fileHealthDesc: 'Status insights for available, risky, and pending file queues.',

src/i18n/locales/zh-CN.ts

@@ -73,7 +73,8 @@ export default {
       lastUpdated: '最近更新：{time}',
       loadFailed: '仪表盘数据加载失败',
       footerProduct: 'FileCodeBox 管理后台',
-      runtimeVersion: '运行版本',
+      backendVersion: '服务端版本',
+      frontendVersion: '前端版本',
       versionPending: '待同步',
       fileHealth: '文件健康',
       fileHealthDesc: '基于状态洞察统计可取件、风险与待处理队列。',

src/utils/build-info.ts

@@ -0,0 +1,10 @@
+const abbreviatedCommit = __GIT_COMMIT__.slice(0, 12)
+
+export const buildInfo = Object.freeze({
+  version: __APP_VERSION__,
+  commit: abbreviatedCommit,
+  displayVersion:
+    abbreviatedCommit && abbreviatedCommit !== 'unknown'
+      ? `${__APP_VERSION__} (${abbreviatedCommit})`
+      : __APP_VERSION__
+})

src/views/manage/DashboardView.vue

@@ -223,8 +223,8 @@
       :class="[isDarkMode ? 'border-gray-800 text-gray-500' : 'border-gray-200 text-gray-500']"
     >
       <span>{{ t('admin.dashboard.footerProduct') }}</span>
-      <span class="inline-flex items-center gap-2">
-        <span>{{ t('admin.dashboard.runtimeVersion') }}</span>
+      <span class="flex flex-wrap items-center justify-end gap-2">
+        <span>{{ t('admin.dashboard.backendVersion') }}</span>
         <span
           class="rounded-md border px-2 py-0.5 font-medium"
           :class="[
@@ -235,6 +235,17 @@
         >
           {{ versionText }}
         </span>
+        <span>{{ t('admin.dashboard.frontendVersion') }}</span>
+        <span
+          class="rounded-md border px-2 py-0.5 font-medium"
+          :class="[
+            isDarkMode
+              ? 'border-gray-700 bg-gray-800/70 text-gray-300'
+              : 'border-gray-200 bg-white text-gray-700'
+          ]"
+        >
+          {{ buildInfo.displayVersion }}
+        </span>
       </span>
     </footer>
   </div>
@@ -263,6 +274,7 @@ import { useI18n } from 'vue-i18n'
 import { ROUTES } from '@/constants'
 import { useConfigStore } from '@/stores/configStore'
 import type { DashboardHealthAction } from '@/types'
+import { buildInfo } from '@/utils/build-info'
 
 const isDarkMode = useInjectedDarkMode()
 const { t } = useI18n()