feat: check version

build/post-build.ts

@@ -1,7 +1,7 @@
 import { tgz, zip } from 'compressing';
 import dayjs from 'dayjs';
 
-import packageJson from '../../package.json';
+import packageJson from '../package.json';
 
 const now = dayjs();
 

build/pre-build.ts

@@ -0,0 +1,17 @@
+import { writeFile } from 'fs/promises';
+import dayjs from 'dayjs';
+
+import packageJson from '../package.json';
+
+const now = dayjs();
+
+const versionInfo = {
+  version: packageJson.version,
+  buildTime: now.format('YYYY-MM-DD HH:mm:ss'),
+};
+
+try {
+  await writeFile('./public/version.json', JSON.stringify(versionInfo, null, 2));
+} catch (error) {
+  console.error('写入版本信息失败:', error);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ndm-web-client-v",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "private": true,
   "type": "module",
   "engines": {
@@ -8,9 +8,9 @@
   },
   "scripts": {
     "dev": "vite --host",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "tsx build/pre-build.ts && vite build && tsx build/post-build.ts",
     "preview": "vite preview",
-    "build-only": "vite build && tsx src/utils/post-build.ts",
+    "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
     "format": "prettier --write src/"

src/App.vue

@@ -16,9 +16,12 @@ import { defineComponent } from 'vue';
 import { useThemeStore } from '@/stores/theme';
 import { storeToRefs } from 'pinia';
 import { VueQueryDevtools } from '@tanstack/vue-query-devtools';
+import { useVersionCheckQuery } from './composables/query';
 
 const themeStore = useThemeStore();
 const { themeMode } = storeToRefs(themeStore);
+
+useVersionCheckQuery();
 </script>
 
 <template>

src/composables/query/index.ts

@@ -1,3 +1,4 @@
 export * from './alarm';
 export * from './device';
 export * from './station';
+export * from './system';

src/composables/query/system/index.ts

@@ -0,0 +1 @@
+export * from './use-version-check-query';

src/composables/query/system/use-version-check-query.ts

@@ -0,0 +1,53 @@
+import { useQuery } from '@tanstack/vue-query';
+import axios from 'axios';
+import { ref, watch } from 'vue';
+
+export function useVersionCheckQuery() {
+  interface VersionInfo {
+    version: string;
+    buildTime: string;
+  }
+
+  const localVersionInfo = ref<VersionInfo>();
+  const dialogShow = ref<boolean>(false);
+
+  const { data: remoteVersionInfo, dataUpdatedAt } = useQuery({
+    queryKey: ['version-check'],
+    queryFn: async () => {
+      const { data } = await axios.get<VersionInfo>(`/version.json?t=${Date.now()}`);
+      return data;
+    },
+    refetchInterval: 10 * 1000,
+  });
+
+  watch(dataUpdatedAt, () => {
+    const newVersionInfo = remoteVersionInfo.value;
+    if (!newVersionInfo) return;
+
+    if (!localVersionInfo.value) {
+      localVersionInfo.value = newVersionInfo;
+      return;
+    }
+
+    if (localVersionInfo.value.version !== newVersionInfo.version && !dialogShow.value) {
+      dialogShow.value = true;
+      window.$dialog.info({
+        title: '发现新版本',
+        content: '请刷新网页更新',
+        positiveText: '刷新页面',
+        onPositiveClick: () => {
+          window.location.reload();
+        },
+        negativeText: '稍后检查',
+        onNegativeClick: () => {
+          // window.$dialog.destroyAll();
+          dialogShow.value = false;
+        },
+        onClose: () => {
+          // window.$dialog.destroyAll();
+          dialogShow.value = false;
+        },
+      });
+    }
+  });
+}

tsconfig.node.json

@@ -6,14 +6,16 @@
     "cypress.config.*",
     "nightwatch.conf.*",
     "playwright.config.*",
-    "eslint.config.*"
+    "eslint.config.*",
+    "build/**/*"
   ],
   "compilerOptions": {
     "noEmit": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "types": ["node"]
+    "types": [
+      "node"
+    ]
   }
 }