完成Version页面

src/pages/Index/Settings/Version.vue

@@ -1,10 +1,67 @@
 <template>
-  <div>
-    <!-- -->
-    开发中……
+  <div class="version-setting">
+    <div class="setting-item">
+      <span class="label">SN</span>
+      <span class="value">{{ info?.sn }}</span>
+    </div>
+    <div class="setting-item">
+      <span class="label">App</span>
+      <span class="value">{{ info?.appVersion }}</span>
+    </div>
+    <div class="setting-item">
+      <span class="label">MCU</span>
+      <span class="value">{{ info?.mcuVersion }}</span>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { DeviceInfo, getDeviceInfo } from '@/services';
+import { onMounted, ref } from 'vue';
+import { eMessage } from '../utils';
 
+const info = ref<DeviceInfo>()
+const getInfo = async () => {
+  const res = await getDeviceInfo()
+  if (res && res.success) {
+    info.value = res.data
+  } else {
+    res && res.data && res.data.info && eMessage.error(res.data.info)
+  }
+}
+onMounted(() => {
+  getInfo()
+})
 </script>
+<style lang="less" scoped>
+.version-setting {
+  background-color: #f5f7fa;
+  width: 100%;
+  height: 90vh;
+  box-sizing: border-box;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  .setting-item {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 24px 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+
+    .label {
+      font-size: 28px;
+      font-weight: 500;
+      color: #303133;
+    }
+    .value {
+      font-size: 28px;
+      color: #606266;
+    }
+  }
+}
+</style>

src/services/osControl/os.ts

@@ -59,10 +59,14 @@ export const getDeviceIp = async () => {
     console.log('设备信息获取报错', error)
   }
 }
-
+export type DeviceInfo = {
+  appVersion: string;
+  mcuVersion: string;
+  sn: string;
+}
 export const getDeviceInfo = async () => {
   try {
-    const res = await apiClient.post('/api/v1/app/osCtrl/getInfo')
+    const res = await apiClient.post('/api/v1/app/DeviceInfo/getDeviceInfo')
     return res.data
   } catch (error) {
     console.log('设备信息获取报错', error)