更新 App.vue 组件，修改标题区域为 flex 布局并添加版本号显示；新增 global.d.ts 文件以声明全局变量 __APP_VERSION__；更新 vite.config.ts 文件，定义全局变量以便在应用中使用版本号。

Author: iwangbowen

src/dev/App.vue

@@ -3,7 +3,10 @@
     <div class="content-wrapper">
       <!-- 修改标题区域为 flex 布局 -->
       <div class="header">
-        <h1 class="main-title">Vue Expression Editor</h1>
+        <div class="title-container">
+          <h1 class="main-title">Vue Expression Editor</h1>
+          <span class="version-tag">v{{ version }}</span>
+        </div>
         <div class="links-container">
           <a href="https://www.npmjs.com/package/vue-expression-editor" target="_blank" class="link-item npm-link">
             <el-icon><Box /></el-icon>
@@ -121,6 +124,8 @@ import ExpressionEditor from '../components/ExpressionEditor.vue'
 import { ElMessage } from 'element-plus'
 import { Platform, Box, Delete, Plus } from '@element-plus/icons-vue'
 
+const version = (window as any).__APP_VERSION__ || 'dev'
+
 const expressionEditorRef = ref<InstanceType<typeof ExpressionEditor> | null>(null)
 const testExpression = ref('')
 const originalExpression = ref('')
@@ -724,4 +729,21 @@ const cancelAddVariable = () => {
     }
   }
 }
+
+/* 修改标题容器样式 */
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* 添加版本号样式 */
+.version-tag {
+  font-size: 14px;
+  color: #909399;
+  background-color: #f4f4f5;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-weight: 500;
+}
 </style>

src/types/global.d.ts

@@ -0,0 +1 @@
+declare const __APP_VERSION__: string;

vite.config.ts

@@ -2,13 +2,19 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
 import { resolve } from 'path'
-import cssInjectedByJs from 'vite-plugin-css-injected-by-js' // 添加此行
+import cssInjectedByJs from 'vite-plugin-css-injected-by-js'
+import { loadEnv } from 'vite'
+import { version } from './package.json'
 
 export default defineConfig(({ mode }) => {
   const isDemo = mode === 'demo'
+  const env = loadEnv(mode, process.cwd(), '')
 
   return {
     base: '/vue-expression-editor/',
+    define: {
+      __APP_VERSION__: JSON.stringify(version)
+    },
     plugins: [
       vue(),
       !isDemo && cssInjectedByJs(), // 自动注入 CSS 组件样式