up

src/layout/index.vue

@@ -35,24 +35,13 @@
                     <UserInfoBar></UserInfoBar>
                 </div>
             </el-header>
-            <el-main>
-                <el-scrollbar>Main</el-scrollbar>
+            <el-main class="hc-main-box" id="hc-main-box">
+                <el-scrollbar>
+                    <router-view v-if="reloadRouter"/>
+                </el-scrollbar>
             </el-main>
         </el-container>
     </el-container>
-
-    <!--n-layout position="absolute" class="cu-layout-box" :class="RoutesName === 'home-index'?'home-'+HomeTheme.name:''">
-        <n-layout-header class="cu-header-view" :class="RoutesName === 'home-index'?'':'shadow-sm'">
-            <div class="header-end">
-                <HelpInfoBar></HelpInfoBar>
-                <UserInfoBar></UserInfoBar>
-                <ConfigBar></ConfigBar>
-            </div>
-        </n-layout-header>
-        <n-layout-content position="absolute" class="cu-content-view" id="cu-layout-content">
-            <router-view v-if="reloadRouter"/>
-        </n-layout-content>
-    </n-layout-->
 </template>
 
 <script setup>
@@ -68,13 +57,16 @@ import {initButtons,initProjectContract} from "~sto/app";
 import NameDark from "~src/assets/logo/name-dark.png";
 import NameWhite from "~src/assets/logo/name-white.png";
 
+//初始组合式
 const useRoutes = useRoute()
 const useAppState = useAppStore()
 
+//路由参数
 const routerQuery = useRoutes?.query;
 const reloadRouter = ref(true)
 const BarMenuKey = routerQuery?.MenuBarKey || 'home-index';
 
+//主题和色调变量
 const HomeTheme = ref(useAppState.getHomeTheme);
 const AppColor = ref(useAppState.getColor);
 
@@ -93,6 +85,8 @@ const projectProps = ref({
     label: 'projectAlias',
     children: 'contractInfoList',
 })
+
+//渲染完成
 onMounted(() => {
     initButtons().then()
     initProjectContract().then()
@@ -192,14 +186,9 @@ const collapseChange = (bool) => {
     isCollapse.value = bool
 }
 
-
 //菜单被点击
 const MenuBarChange = (item) => {
     MenuBarKey.value = item.key;
-}
-//弹出菜单事件
-const MenuQualityChange = ({key, item}) => {
-    MenuBarKey.value = key;
     router.push({
         name: item?.key || '/',
         query: {MenuBarKey: key}
@@ -233,7 +222,7 @@ const logoClick = () => {
         .el-cascader .el-input .el-input__wrapper {
             padding: 4px 15px;
             background-color: #00000000;
-            border: 1.5px solid white;
+            border: 1px solid white;
             box-shadow: initial;
             border-radius: 100px;
             .el-input__inner, .el-input__suffix {

src/layout/layout.scss

@@ -50,6 +50,7 @@
             position: relative;
             height: calc(100% - 216px);
             width: 100%;
+            overflow: hidden;
         }
         .hc-aside-bar-box {
             position: relative;
@@ -131,6 +132,11 @@
                 }
             }
         }
+        .hc-main-box {
+            position: relative;
+            overflow: hidden;
+            height: 100%;
+        }
     }
 }
 

src/layout/modules/ConfigBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="header-icon-bar">
+    <div class="header-icon-bar" @click="toConfigClick">
         <HcIcon name="settings" class="header-icon"/>
     </div>
     <!--div class="config-icon-bar" @click="ConfigBarActive">
@@ -70,6 +70,7 @@ import {useAppStore} from "~src/store/index";
 import themeData from '~src/config/theme';
 import {useOsTheme} from "naive-ui";
 import {userConfigSave} from "~api/other";
+import router from '~src/router/index';
 
 //初始变量
 const useAppState = useAppStore()
@@ -79,6 +80,14 @@ const HomeTheme = ref(useAppState.getHomeTheme)
 const webRtcVal = ref(useAppState.getShotWebRtc)
 const fullScreenVal = ref(useAppState.getFullScreen)
 
+//跳转到系统设置页面
+const toConfigClick = () => {
+    router.push({
+        name: 'home-config',
+        query: {MenuBarKey: 'config'}
+    });
+}
+
 //监听
 watch(() => [
     useAppState.getTheme,
@@ -155,10 +164,11 @@ const ConfigBarActive = () => {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 44px;
     cursor: pointer;
     color: inherit;
     margin-right: 30px;
+    border: 1px solid white;
+    font-size: 26px;
 }
 
 

src/layout/modules/HelpInfoBar.vue

@@ -128,7 +128,8 @@ const getAssetsHomeFile = (url) => {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 44px;
+    border: 1px solid white;
+    font-size: 26px;
     cursor: pointer;
     color: inherit;
     margin-right: 30px;

src/router/modules/base.js

@@ -25,6 +25,12 @@ export default [
                 meta: {title: '首页'},
                 component: () => import('~src/views/home/index.vue')
             },
+            {
+                path: '/home/config',
+                name: 'home-config',
+                meta: {title: '系统设置'},
+                component: () => import('~src/views/home/config.vue')
+            },
         ],
     },
     {

src/router/modules/token.js

@@ -2,6 +2,7 @@
 export default [
     '/home',
     '/home/index',
+    '/home/config',
     '/other',
     '/other/order-service',
     '/other-file/image-view',

src/views/home/config.vue

@@ -0,0 +1,24 @@
+<template>
+    111
+</template>
+
+<script setup>
+import {ref,watch} from "vue";
+import {useAppStore} from "~src/store/index";
+
+//变量
+const useAppState = useAppStore()
+const HomeTheme = ref(useAppState.getHomeTheme);
+
+//监听
+watch(() => [
+    useAppState.getHomeTheme,
+], ([theme]) => {
+    HomeTheme.value = theme
+})
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/view/config.scss";
+</style>
+