update

user_web/src/router/adminRoute.ts

@@ -2,14 +2,14 @@ const adminRoute = {
     path: '/admin',
     name: 'admin',
     component: () => import('../view/admin/Main.vue'),
-    meta: { title: '后台管理-首页' },
+    meta: { title: '后台管理' },
     children: [
-        // {
-        //     path: '/train/list',
-        //     name: 'trainList',
-        //     component: () => import('../view/student/trainList/trainList.vue'),
-        //     meta: { title: '实训列表' },
-        // },
+        {
+            path: '/admin/index',
+            name: 'adminIndex',
+            component: () => import('../view/admin/Index.vue'),
+            meta: { title: '后台管理-首页' },
+        },
     ],
 };
 

user_web/src/view/admin/Index.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { computed, onMounted, onUnmounted, watch, ref } from "vue";
+import { useRouter } from 'vue-router';
+const router = useRouter();
+
+</script>
+
+<template>
+    <div class="Index">
+        首页
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use './css/commonsScrollbar.scss';
+
+.Index * {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+
+    user-select: none;
+    box-sizing:border-box;
+    -moz-box-sizing:border-box; /* Firefox */
+    -webkit-box-sizing:border-box; /* Safari */
+}
+
+.Index {
+
+    position: fixed;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    background-color: #f6f7f9;
+    
+}
+</style>

user_web/src/view/admin/Main.vue

@@ -14,7 +14,7 @@ const router = useRouter();
         <LoginOrExit></LoginOrExit>
 
         <!-- 通用模板 -->
-        <div class="template">
+        <div class="template commonsScrollbar">
             <router-view />
         </div>
         
@@ -22,6 +22,7 @@ const router = useRouter();
 </template>
 
 <style lang="scss" scoped>
+@use './css/commonsScrollbar.scss';
 
 .Main * {
     -moz-user-select: none;

user_web/src/view/admin/components/Menu/MenuLeftTwo.vue

@@ -84,15 +84,9 @@
             <!-- 新增一个固定底部的距离，让它可以继续滚动到更底部范围 -->
             <div style="width: 80%; height: 15rem; visibility: hidden"></div>
         </div>
-
-        <!-- <div class="bottom">
-
-            <img class="aiRole" src="../../../assets/teacher/main/ai_t.png" alt="" />
-            <img class="aiBtn" src="../../../assets/teacher/main/Group 873.svg" alt="" />
-
-        </div> -->
-
+        
         <!-- <AiCommonRole :addStyle="'left:7rem;bottom:3.5rem;right:auto;top:auto;'" ></AiCommonRole> -->
+
     </div>
 </template>
 
@@ -102,16 +96,16 @@ import { menuLeftTwo } from './stores/menuLeftTwo.ts'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 
-// 接收参数
-const props = defineProps({
-    // 被选中菜单的 prefix
-    menuUrl: {
-        type: String,
-        default: function () {
-            return 'teacher'
-        },
-    },
-})
+// // 接收参数
+// const props = defineProps({
+//     // 被选中菜单的 prefix
+//     menuUrl: {
+//         type: String,
+//         default: function () {
+//             return 'teacher'
+//         },
+//     },
+// })
 
 /**
  * 当前左侧菜单选中
@@ -140,10 +134,10 @@ const handleScrollEnd = () => {
 
 let menuList = ref([
     {
-        name: '课程数据总览',
+        name: '首页',
         img: new URL('./assets/img/MenuLeftTwo/planet-fill-yes.svg', import.meta.url).href,
         imgNo: new URL('./assets/img/MenuLeftTwo/planet-fill.svg', import.meta.url).href,
-        url: 'teacher',
+        url: 'admin/index',
         list: [],
     },
     {
@@ -271,7 +265,16 @@ const menuListUpdateEvent = (array, prefix, prefixOld) => {
 
         // 判断控制默认选中
         let url = thisArray?.url
-        if (typeof url == 'string' && url == props.menuUrl) {
+
+        // console.log(
+        //     "menuListUpdateEvent ===>", url, menuLeftTwo().show.menuUrl
+        // );
+
+        if (
+            typeof url == 'string'
+            && (menuLeftTwo().show.menuUrl != '' && menuLeftTwo().show.menuUrl != ' ')
+            && url == menuLeftTwo().show.menuUrl
+        ) {
             menuListPrefix.value = prefixNew
             // defaultOpeneds.value.push(prefixOld);
         }
@@ -281,11 +284,17 @@ const menuListUpdateEvent = (array, prefix, prefixOld) => {
 }
 
 /**
- * 这里需要比较早做处理,不要在 onMounted 方法里触发，否则会发现，默认展开菜单逻辑会没有效果
+ * 更新所处的菜单
  */
-defaultOpenedsJsonLookEvent()
-// 优先更新菜单的结构
-menuList.value = menuListUpdateEvent(menuList.value, null)
+const menuViewUpdate = () => {
+    /**
+     * 这里需要比较早做处理,不要在 onMounted 方法里触发，否则会发现，默认展开菜单逻辑会没有效果
+     */
+    defaultOpenedsJsonLookEvent()
+    // 优先更新菜单的结构
+    menuList.value = menuListUpdateEvent(menuList.value, null)
+}
+menuViewUpdate()
 
 /**
  * 更新滚动条所在位置
@@ -317,7 +326,14 @@ const menuListEvent = (item, index) => {
     // );
 
     if (typeof item.url == 'string') {
+
+        // 更新跳转的路由地址
+        menuLeftTwo().show.menuUrl = item.url
+        menuViewUpdate()
+
+        // 开始跳转路由
         // router.push('/' + item.url)
+        
     }
 }
 </script>

user_web/src/view/admin/components/Menu/stores/menuLeftTwo.ts

@@ -10,6 +10,8 @@ export const menuLeftTwo = defineStore('menuLeftTwo', () => {
         scrollTop: 0,
         // 展开菜单id的集合
         listJson: [],
+        // 被选中的路由地址
+        menuUrl: '',
     })
 
     return {

user_web/src/view/admin/components/User/LoginOrExit.vue

@@ -75,10 +75,9 @@ let windowsExitEvent = () => {
  * 到首页
  */
 const goIndexEvent = () => {
-    router.push('/admin');
+    router.push('/admin/index');
 }
 
-
 /**
  * 退出到登录页
  */

user_web/src/view/admin/css/commonsScrollbar.scss

@@ -0,0 +1,154 @@
+
+/* 滚动 */
+.commonsScrollbar {
+    overflow-y: scroll;
+    overflow-x: visible;
+}
+
+
+/* 滚动槽 【 由于被全局其他的地方影响，这里另外单独处理 】*/
+.commonsScrollbar::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
+}
+/* 滚动条滑块 【 由于被全局其他的地方影响，这里另外单独处理 】 */
+.commonsScrollbar::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
+}
+
+/* 滚动条整体样式 */
+.commonsScrollbar::-webkit-scrollbar {
+    width: 1px;
+    height: 1px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::scrollbar {
+    width: 1px;
+    height: 1px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-moz-scrollbar {
+    width: 1px;
+    height: 1px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-ms-scrollbar {
+    width: 1px;
+    height: 1px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-o-scrollbar {
+    width: 1px;
+    height: 1px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+/* 滚动条里面小方块 */
+.commonsScrollbar::-webkit-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: #D9D9D9;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbar::scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: #D9D9D9;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbar::-moz-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: #D9D9D9;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbar::-ms-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: #D9D9D9;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbar::-o-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: #D9D9D9;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+/* 滚动条里面轨道 */
+.commonsScrollbar::-webkit-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: #D9D9D9;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: #D9D9D9;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-moz-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: #D9D9D9;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-ms-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: #D9D9D9;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-o-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: #D9D9D9;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+
+
+
+