创维2.0

src/router/index.ts

@@ -26,10 +26,10 @@ export const constantRoutes: RouteRecordRaw[] = [
     ]
   },
   {
-    path: '/setting',
-    name: 'Setting',
+    path: '/settings',
+    name: 'Settings',
     component: Layouts,
-    redirect: '/setting',
+    redirect: '/settings',
     meta: {
       title: 'Settings',
       isShow: true,
@@ -37,20 +37,52 @@ export const constantRoutes: RouteRecordRaw[] = [
     },
     children: [
       {
-        path: '/setting/systemSetting',
-        component: () => import('@/views/setting/systemSetting/index.vue'),
-        name: 'SystemSetting',
+        path: '/settings/systemSettings',
+        component: () => import('@/views/settings/systemSettings/index.vue'),
+        name: 'SystemSettings',
         meta: {
-          title: 'Camera Settings'
+          title: 'System Settings'
         }
       },
       {
-        path: '/setting/netSetting',
-        component: () => import('@/views/setting/netSetting/index.vue'),
-        name: 'NetSetting',
+        path: '/settings/imageDisplay',
+        component: () => import('@/views/settings/imageDisplay/index.vue'),
+        name: 'ImageDisplay',
+        meta: {
+          title: 'Image Display'
+        }
+      },
+      {
+        path: '/settings/audioVideo',
+        component: () => import('@/views/settings/audioVideo/index.vue'),
+        name: 'AudioVideo',
+        meta: {
+          title: 'Audio & Video'
+        }
+      },
+      {
+        path: '/settings/netSetting',
+        component: () => import('@/views/settings/netSettings/index.vue'),
+        name: 'NetSettings',
         meta: {
           title: 'Network Settings'
         }
+      },
+      {
+        path: '/settings/alarmSettings',
+        component: () => import('@/views/settings/alarmSettings/index.vue'),
+        name: 'AlarmSettings',
+        meta: {
+          title: 'Alarm Settings'
+        }
+      },
+      {
+        path: '/settings/remoteViewing',
+        component: () => import('@/views/settings/remoteViewing/index.vue'),
+        name: 'RemoteViewing',
+        meta: {
+          title: 'Remote Viewing'
+        }
       }
     ]
   },

src/stores/modules/user.ts

@@ -13,11 +13,12 @@ export const useUserStore = defineStore('user', () => {
 
   /** 登录 */
   const login = async ({ name, password }: LoginRequestData) => {
-    const { data } = await loginApi({ name, password })
+    // const { data } = await loginApi({ name, password })
     username.value = name
     token.value = unToken
     setUsername(username.value)
-    return data
+    // return data
+    return 'ok\n'
   }
 
   /** 登出 */

src/views/settings/alarmSettings/components/areaDetection/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/alarmSettings/components/humanDetection/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/alarmSettings/components/intrusionDetection/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/alarmSettings/components/manualAlarm/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/alarmSettings/components/motionDetection/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/alarmSettings/components/videoTampering/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/alarmSettings/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="settings-container">
+    <el-tabs v-model="activeName" class="demo-tabs">
+      <el-tab-pane label="Motion Detection" name="first">
+
+      </el-tab-pane>
+      <el-tab-pane label="Human Detection" name="second">
+
+      </el-tab-pane>
+      <el-tab-pane label="Detection Zones" name="third">
+
+      </el-tab-pane>
+
+      <el-tab-pane label="Intrusion Detection" name="fourth">
+
+      </el-tab-pane>
+      <el-tab-pane label="Video Tampering" name="fifth">
+
+      </el-tab-pane>
+      <el-tab-pane label="Manual Alarm" name="sixth">
+
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+
+const activeName = ref('first')
+
+</script>
+
+
+<style scoped lang="scss">
+.settings-container{
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+</style>

src/views/settings/audioVideo/components/audio/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/audioVideo/components/nightVisionIlluminator/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/audioVideo/components/video/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/audioVideo/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="settings-container">
+    <el-tabs v-model="activeName" class="demo-tabs">
+      <el-tab-pane label="Video" name="first">
+
+      </el-tab-pane>
+      <el-tab-pane label="Audio" name="second">
+
+      </el-tab-pane>
+      <el-tab-pane label="Night Vision Lights" name="third">
+
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+
+const activeName = ref('first')
+
+</script>
+
+
+<style scoped lang="scss">
+.settings-container{
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+</style>

src/views/settings/imageDisplay/components/image/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/imageDisplay/components/osd/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/imageDisplay/components/privacyMasking/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/settings/imageDisplay/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="settings-container">
+    <el-tabs v-model="activeName" class="demo-tabs">
+      <el-tab-pane label="Image" name="first">
+
+      </el-tab-pane>
+      <el-tab-pane label="OSD Settings" name="second">
+
+      </el-tab-pane>
+      <el-tab-pane label="Privacy Masking " name="third">
+
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+
+const activeName = ref('first')
+
+</script>
+
+
+<style scoped lang="scss">
+.settings-container{
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+</style>

src/views/settings/netSettings/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="settings-container">
+    <el-tabs v-model="activeName" class="demo-tabs">
+      <el-tab-pane label="IP" name="first">
+
+      </el-tab-pane>
+      <el-tab-pane label="Ports" name="second">
+
+      </el-tab-pane>
+      <el-tab-pane label="Network Diagnostics " name="third">
+
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+
+const activeName = ref('first')
+
+</script>
+
+
+<style scoped lang="scss">
+.settings-container{
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+</style>

src/views/settings/remoteViewing/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/setting/systemSetting/index.vue → src/views/settings/systemSettings/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="system-setting-container">
+  <div class="settings-container">
     <el-tabs v-model="activeName" class="demo-tabs">
       <el-tab-pane label="Basic Information" name="first">
         <CameraInfo />
@@ -23,25 +23,17 @@
             Execute
           </el-button>
         </el-form>
-
-      </el-tab-pane>
-      <el-tab-pane label="Time Settings" name="third">
-        <TimeSetting />
       </el-tab-pane>
 
-      <el-tab-pane label="Volume Settings" name="fourth">
-        <VolumeSetting />
-      </el-tab-pane>
+      <el-tab-pane label="System Update" name="third">
 
-      <el-tab-pane label="Alarm Settings" name="fifth">
-        <AlarmSetting />
       </el-tab-pane>
 
-      <el-tab-pane label="Night Vision Mode" name="sixth">
-        <NightVision />
+      <el-tab-pane label="Time Settings" name="fourth">
+        <TimeSetting />
       </el-tab-pane>
 
-      <el-tab-pane label="Security Settings" name="seventh">
+      <el-tab-pane label="Password Management" name="fifth">
         <UserSecurity />
       </el-tab-pane>
     </el-tabs>
@@ -54,9 +46,6 @@ import { ElLoading, ElMessage, ElMessageBox, type FormInstance } from 'element-p
 import CameraInfo from './components/cameraInfo/index.vue'
 import UserSecurity from './components/user/index.vue'
 import TimeSetting from './components/time/index.vue'
-import VolumeSetting from './components/volume/index.vue'
-import AlarmSetting from './components/alarm/index.vue'
-import NightVision from './components/nightVision/index.vue'
 import { cameraReset } from '@/api/setting'
 import {useUserStore} from "@/stores/modules/user";
 import {useRouter} from "vue-router";
@@ -164,7 +153,7 @@ function handle() {
 
 
 <style scoped lang="scss">
-.system-setting-container {
+.settings-container{
   display: flex;
   flex-direction: column;
   padding: 20px;