feat: add build version display to all views
Add build version indicator to verify code updates: 1. Create BuildVersion.vue component: - Displays in top-right corner (fixed position) - Format: YYYYMMDDHHMMSS-gitHash - Example: 20260725133504-39ce37e 2. Update vite.config.ts: - Inject __BUILD_VERSION__ global variable - Generated from build time + git commit hash 3. Add to App.vue: - Shown on all views automatically - Z-index: 9999 (always visible) 4. Add vite-env.d.ts: - TypeScript declarations for __BUILD_VERSION__ Purpose: - User can verify if browser loaded latest code - Easy to confirm updates are deployed - No need to check source code Location: Top-right corner, fixed position Format: Monospace font, small text, subtle styling
This commit is contained in:
22
src/components/BuildVersion.vue
Normal file
22
src/components/BuildVersion.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<div class="build-version">{{ version }}</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const version = __BUILD_VERSION__
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.build-version {
|
||||||
|
position: fixed;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-secondary, #9aa0a6);
|
||||||
|
background: var(--bg-secondary, rgba(0,0,0,0.1));
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
z-index: 9999;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
src/vite-env.d.ts
vendored
Normal file
11
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare const __BUILD_VERSION__: string
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly VITE_APP_TITLE: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv
|
||||||
|
}
|
||||||
@@ -1,9 +1,17 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import { resolve } from 'path'
|
import { resolve } from 'path'
|
||||||
|
import { execSync } from 'child_process'
|
||||||
|
|
||||||
|
const gitHash = execSync('git log --format="%h" -1', { encoding: 'utf-8' }).trim()
|
||||||
|
const buildTime = new Date().toISOString().slice(0, 19).replace(/[-:T]/g, '')
|
||||||
|
const buildVersion = `${buildTime}-${gitHash}`
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
|
define: {
|
||||||
|
__BUILD_VERSION__: JSON.stringify(buildVersion)
|
||||||
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': resolve(__dirname, 'src')
|
'@': resolve(__dirname, 'src')
|
||||||
|
|||||||
Reference in New Issue
Block a user