feat: 添加测试环境配置并优化构建脚本

- 新增.env.test测试环境配置文件
- 优化MQTT连接配置，使用环境变量
- 重构构建脚本，区分测试和生产环境
- 更新README文档说明构建流程
- 添加VSCode配置文件和.gitignore优化

.env.single → .env.test

@@ -1,4 +1,4 @@
-VITE_ENV=single
+VITE_ENV=test
 VITE_APP_TITLE="合肥雷能信息技术有限公司"
 VITE_STOTRE_NAME=LEINENG_WEB
 # 接口配置

.gitignore

@@ -1,37 +1,37 @@
 # Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+# logs
+# *.log
+# npm-debug.log*
+# yarn-debug.log*
+# yarn-error.log*
+# pnpm-debug.log*
+# lerna-debug.log*
 
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
+# node_modules
+# .DS_Store
+# dist
+# dist-ssr
+# coverage
+# *.local
 
-/cypress/videos/
-/cypress/screenshots/
+# /cypress/videos/
+# /cypress/screenshots/
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# .vscode/*
+# !.vscode/extensions.json
+# .idea
+# *.suo
+# *.ntvs*
+# *.njsproj
+# *.sln
+# *.sw?
 
-*.tsbuildinfo
+# *.tsbuildinfo
 
 **/dist/*
 **/node_modules/*
-*.md
+# *.md
 .lh
 # *.json
 # !tsconfig.app.json

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts",
+    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always",
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.fontSize": 14,
+  "window.zoomLevel": 1,
+  "editor.mouseWheelZoom": true,
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  }
+}

README.md

@@ -0,0 +1,66 @@
+## 基础信息
+```bash
+nodejs 20.19.0
+pnpm 10.12.4
+```
+
+## 本地开发
+```bash
+  npm run dev # 启动研发环境
+  npm run dev:test # 启动测试环境
+  npm run dev:pro # 启动生产环境
+```
+
+## 构建说明
+项目提供了多种构建方式，分别适用于不同的场景：
+```bash
+  # 构建生产环境
+  npm run build # 不生成tag分支与版本文件
+  # 以下脚本都会生成tag分支与版本文件
+  npm run build:test # 构建测试环境
+  npm run build:pro # 构建生成环境
+  npm run build:tag:test # 基于特定tag 构建测试环境
+  npm run build:tag:pro # 基于特定tag 构建生产环境
+```
+
+### 1、测试构建
+用于日常开发测试，自动生成带时间戳的测试版本tag，如：`test-202508061340`
+```bash
+  npm run build:test
+```
+* 执行该命令会：
+  * 自动生成格式为 `test-YYYYMMDDHHmm` 的tag
+  * 在dist目录下生成包含版本信息的 `version.json` 文件
+  * 不会修改 `package.json` 中的版本号
+
+### 2、发布构建
+用于发布正式版本，自动生成带版本号的tag,如：`publish-v0.0.2`
+```bash
+  npm run build:pro
+```
+* 执行该命令会：
+  * 自动生成格式为 `publish-vX.X.X` 的tag
+  * 在dist目录下生成包含版本信息的 `version.json` 文件
+  * 会更新 `package.json` 中的版本号
+
+
+### 3、基于特定tag构建
+用于基于已有的tag进行构建，用于重新构建特定tag版本的代码
+```bash
+  npm run build:tag:test # 基于特定tag 构建测试环境
+  npm run build:tag:pro # 基于特定tag 构建生产环境
+```
+
+### 4、构建注意事项
+1. 确保在执行构建命令前已提交所有更改
+2. 发布构建会修改 `package.json` 中的版本号，请确保有相应的权限
+3. 基于指定 `tag` 版本构建会切换工作目录到指定 `tag` 分支，构建完成后会自动切换回原分支，若切换失败则需手动切换回原分支
+4. 所有构建命令都会自动创建对应的 `git tag`，用于版本追踪，仅打包构建除外
+5. 构建完成后，建议手动检查 `dist` 目录下的文件，确保无误
+
+### 5、仅打包构建
+适用于仅打包，不生成 `tag` 的场景
+```bash
+  npm run build
+```
+* 执行该命令后，仅会打包生成 `dist` 目录，不会生成 `tag`，也不会修改 `package.json` 中的版本号

package.json

@@ -5,12 +5,13 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host --mode development --port 3000",
-    "dev:sin": "vite --host --mode single --port 4000",
+    "dev:test": "vite --host --mode test --port 4000",
     "dev:pro": "vite --host --mode production --port 5000",
     "build": "vite build",
     "build:test": "node version-script.js test",
     "build:publish": "node version-script.js publish",
-    "build:tag": "node version-script.js build-by-tag",
+    "build:tag:test": "node version-script.js test-by-tag",
+    "build:tag:pro": "node version-script.js pro-by-tag",
     "preview": "vite preview",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",

src/App.vue

@@ -43,6 +43,11 @@ const isRouterReady = ref(false)
 onMounted(() => {
   router.isReady().then(() => {
     isRouterReady.value = true
+
+    // 环境信息
+    console.log(`🚀CurrentMode: ${import.meta.env.MODE}`)
+    console.log(`🚀HostAPI: ${import.meta.env.VITE_APP_HOST}`)
+    console.log(`🚀ProxyAPI: ${import.meta.env.VITE_APP_HOST}`)
   })
 })
 

src/layout/index.vue

@@ -93,10 +93,16 @@ const MqttData = ref()
 
 const initMqttManager = async () => {
   try {
-    mqttClient = mqtt.connect('wss://radar-power.cn:8084/mqtt', {
-      clientId: 'mqtt_vue_test' + Math.random().toString(16).substring(2, 8),
-      username: 'admin',
-      password: 'public',
+    const mqttConfig = {
+      host: import.meta.env.VITE_MQTT_HOST,
+      username: import.meta.env.VITE_MQTT_USERNAME,
+      password: import.meta.env.VITE_MQTT_PASSWORD,
+      clientId: `mqtt_client_${Math.random().toString(16).slice(2, 8)}`,
+    }
+    mqttClient = mqtt.connect(mqttConfig.host, {
+      clientId: mqttConfig.clientId,
+      username: mqttConfig.username,
+      password: mqttConfig.password,
       will: {
         // ✅ 添加遗嘱消息配置
         topic: '/mps/client/connect',
@@ -379,6 +385,7 @@ const backHandler = async () => {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
   }
 }
 

src/views/device/detail/index.vue

@@ -334,16 +334,18 @@ const resetMqttTimeout = () => {
 
 onMounted(() => {
   console.log('onMounted', mqttClient)
-  const params = {
-    clientId: 'mqtt_vue_test' + Math.random().toString(16).substring(2, 8),
-    username: 'admin',
-    password: 'public',
+  const mqttConfig = {
+    host: import.meta.env.VITE_MQTT_HOST,
+    username: import.meta.env.VITE_MQTT_USERNAME,
+    password: import.meta.env.VITE_MQTT_PASSWORD,
+    clientId: `mqtt_client_${Math.random().toString(16).slice(2, 8)}`,
   }
-  console.log('🚀mqttClient connect params', params)
-  // ws://119.45.12.173:8083/mqtt 旧
-  // ws://8.130.28.21:1883/mqtt 新
-  mqttClient = mqtt.connect('wss://radar-power.cn:8084/mqtt', params)
-  console.log('mqttClient connect ready', mqttClient, params)
+  mqttClient = mqtt.connect(mqttConfig.host, {
+    clientId: mqttConfig.clientId,
+    username: mqttConfig.username,
+    password: mqttConfig.password,
+  })
+  console.log('mqttClient connect ready', mqttClient)
   mqttClient.on('connect', () => {
     console.log('MQTT已连接')
     // 订阅所有设备的主题

version-script.js

@@ -107,7 +107,7 @@ function handleTestBuild() {
 
   try {
     // 执行构建命令
-    execSync('vite build', { stdio: 'inherit' })
+    execSync('vite build --mode test', { stdio: 'inherit' })
 
     // 创建tag
     execSync(`git tag ${tag}`, { stdio: 'inherit' })
@@ -172,8 +172,13 @@ function handlePublishBuild() {
   })
 }
 
-// 基于特定tag构建
-function handleBuildByTag() {
+// 基于特定tag构建 测试与生产环境 版本
+function handleBuildByTag(modeType) {
+  if (modeType !== 'test' && modeType !== 'pro') {
+    console.error('无效的构建类型，请确认构建类型为 test 或 pro')
+    process.exit(1)
+  }
+  console.log(`🚀🚀🚀 正在基于${modeType}构建...`)
   const rl = readline.createInterface({
     input: process.stdin,
     output: process.stdout,
@@ -201,7 +206,11 @@ function handleBuildByTag() {
       const version = pkgJson.version
 
       // 执行构建命令
-      execSync('vite build', { stdio: 'inherit' })
+      if (modeType === 'test') {
+        execSync('vite build --mode test', { stdio: 'inherit' })
+      } else if (modeType === 'pro') {
+        execSync('vite build', { stdio: 'inherit' })
+      }
 
       // 生成版本信息文件
       const buildType = tag.startsWith('test-') ? 'test' : 'publish'
@@ -239,8 +248,11 @@ function main() {
     case 'publish':
       handlePublishBuild()
       break
-    case 'build-by-tag':
-      handleBuildByTag()
+    case 'test-by-tag':
+      handleBuildByTag('test')
+      break
+    case 'pro-by-tag':
+      handleBuildByTag('pro')
       break
     default:
       console.log('用法: node version-script.js [test|publish|build-by-tag]')