|
|
@@ -1,181 +1,309 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <!-- 窄侧边导航栏 -->
|
|
|
- <div id="sidebar"
|
|
|
- class="bg-white shadow-lg w-20 flex-shrink-0 transition-all duration-300 ease-in-out z-20 flex flex-col">
|
|
|
- <!-- 顶部Logo -->
|
|
|
- <div class="flex items-center justify-center p-4 border-b">
|
|
|
- <i class="fas fa-school text-primary text-3xl"></i>
|
|
|
+ <div class="left">
|
|
|
+ <div class="logo2">
|
|
|
+ <img :src="fromL.basics.logo" alt="">
|
|
|
</div>
|
|
|
+ <div class="ulT">
|
|
|
|
|
|
- <!-- 导航菜单 - 一级图标 -->
|
|
|
- <nav class="p-2 flex-1">
|
|
|
- <div class="space-y-2">
|
|
|
- <!-- 首页 -->
|
|
|
- <a href="#"
|
|
|
- class="nav-icon-btn w-full flex flex-col items-center justify-center p-3 rounded-lg hover:bg-gray-100 text-primary active"
|
|
|
- data-direct-link="true">
|
|
|
- <i class="fas fa-home text-xl"></i>
|
|
|
- <span class="nav-icon-text">首页</span>
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- cocoflow -->
|
|
|
- <a href="#"
|
|
|
- class="nav-icon-btn w-full flex flex-col items-center justify-center p-3 rounded-lg hover:bg-gray-100 text-gray-700"
|
|
|
- data-direct-link="true">
|
|
|
- <i class="fas fa-layer-group text-xl"></i>
|
|
|
- <span class="nav-icon-text">CocoFlow</span>
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- 教学中心 -->
|
|
|
- <button
|
|
|
- class="nav-icon-btn w-full flex flex-col items-center justify-center p-3 rounded-lg hover:bg-gray-100 text-gray-700"
|
|
|
- data-menu="teaching">
|
|
|
- <i class="fas fa-chalkboard-teacher text-xl"></i>
|
|
|
- <span class="nav-icon-text">教学中心</span>
|
|
|
- </button>
|
|
|
-
|
|
|
- <!-- 智能教务 -->
|
|
|
- <button
|
|
|
- class="nav-icon-btn w-full flex flex-col items-center justify-center p-3 rounded-lg hover:bg-gray-100 text-gray-700"
|
|
|
- data-menu="office">
|
|
|
- <i class="fas fa-briefcase text-xl"></i>
|
|
|
- <span class="nav-icon-text">智能教务</span>
|
|
|
- </button>
|
|
|
-
|
|
|
- <!-- 知识库 -->
|
|
|
- <a href="#"
|
|
|
- class="nav-icon-btn w-full flex flex-col items-center justify-center p-3 rounded-lg hover:bg-gray-100 text-gray-700"
|
|
|
- data-direct-link="true">
|
|
|
- <i class="fas fa-database text-xl"></i>
|
|
|
- <span class="nav-icon-text">知识库</span>
|
|
|
- </a>
|
|
|
+ <div @click.stop="goto(0)" :style="{background :activeL === 0 ?'#E6F0FF':'',zIndex : 10000 }">
|
|
|
+ <div class="menu_left">
|
|
|
+ <img class="logo" :src="activeL === 0 ? require('../assets/img/sy1.svg') : require('../assets/img/sy.svg')" alt="">
|
|
|
+ <span :style="{color : activeL === 0 ? '#0051D7' :''}">首页</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </nav>
|
|
|
-
|
|
|
- <!-- 底部用户头像和信息 -->
|
|
|
- <div class="p-2">
|
|
|
- <!-- 提醒图标按钮 -->
|
|
|
- <div class="flex justify-center mb-4">
|
|
|
- <div class="relative cursor-pointer hover:opacity-80">
|
|
|
- <i class="fas fa-bell text-gray-600 text-xl"></i>
|
|
|
- <!-- 红点通知标记 -->
|
|
|
- <span class="absolute -top-1 -right-1 bg-red-500 rounded-full w-2 h-2"></span>
|
|
|
+
|
|
|
+ <div v-for="(item,index) in fromL.admin.sidebar.list" @click.stop="goto(index,item)" :style="{background :activeL === (index +1) ?'#E6F0FF':'',zIndex : 10000 }" :key="index+1">
|
|
|
+ <div class="menu_left" v-if="item.menuName">
|
|
|
+ <img class="logo" :src="activeL === (index +1) ? item.menuActiveIcon : item.menuIcon" alt="">
|
|
|
+ <span :style="{color : activeL === (index +1) ? '#0051D7' :''}">{{ item.menuName }}</span>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="menu_left" v-else>
|
|
|
+ <div v-for="(p,pin) in item.url" :key="pin+'p'">
|
|
|
+ <img class="logo3"
|
|
|
+ v-if="p.region == userinfo.schoolArea && p.icon"
|
|
|
+ :src="activeL === (index +1) ? p.icon : p.activeIcon"
|
|
|
+ alt="">
|
|
|
+ <img class="logo3" v-else-if="p.region == 'cn'" :src="p.icon" alt="">
|
|
|
+ </div>
|
|
|
+ <span :style="{color : activeL === (index +1) ? '#0051D7' :''}">{{ item.description }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="userInfo">
|
|
|
+ <img style="width: 40px;border-radius: 50%;margin-bottom: 4px;" :src="userinfo.headportrait ? userinfo.headportrait : require('../assets/img/root.png')" alt="">
|
|
|
+ <div style="margin-bottom: 8px;">{{ userinfo.username }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ulTCopy" v-if="isShow && barCopy.length != 0" >
|
|
|
+ <div class="ulTCopyTit">
|
|
|
+ <span>教学中心</span>
|
|
|
+ <span @click="closeCopy" class="cha" style="color: #6B7280;font-size: 23px;cursor: pointer;">⨯</span>
|
|
|
</div>
|
|
|
- <div class="flex flex-col items-center justify-center mb-2">
|
|
|
- <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80"
|
|
|
- alt="用户头像" class="w-10 h-10 rounded-full cursor-pointer hover:opacity-80 mb-1">
|
|
|
- <span class="text-xs text-gray-700">李老师</span>
|
|
|
+ <div style="padding: 16px;box-sizing: border-box;">
|
|
|
+ <div class="ulTCopyTxt" v-for="(i,ind) in barCopy" @click="levTwo(i)" :key="ind+'a'">
|
|
|
+ <div v-for="(p,pin) in i.url" :key="pin+'p'">
|
|
|
+ <img style="width: 30px;object-fit: contain;margin-right: 5px;"
|
|
|
+ v-if="p.region == userinfo.schoolArea && p.icon"
|
|
|
+ :src="p.icon"
|
|
|
+ alt="">
|
|
|
+
|
|
|
+ <img style="width: 30px;object-fit: contain;margin-right: 5px;" v-else-if="p.region == 'cn'" :src="p.icon" alt="">
|
|
|
+ </div>
|
|
|
+ <span >{{ i.description }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div v-if="isShow" @click="closeCopy" style="width: 100vw;height: 100vh;position: absolute;left: 0;top: 0;z-index: 1;"></div>
|
|
|
</div>
|
|
|
+</template>
|
|
|
|
|
|
- <!-- 展开的侧边栏菜单 -->
|
|
|
- <div id="expanded-menu"
|
|
|
- class="fixed left-20 top-0 bottom-0 w-64 bg-white shadow-lg z-10 transform -translate-x-full transition-transform duration-300 ease-in-out">
|
|
|
- <!-- 二级菜单标题 -->
|
|
|
- <div class="flex items-center p-4 relative" style="border-bottom: 1px solid #e5e7eb; height: 72px;">
|
|
|
- <h3 id="expanded-menu-title" class="text-lg font-semibold text-gray-800">首页</h3>
|
|
|
- <button id="close-expanded-menu"
|
|
|
- class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700">
|
|
|
- <i class="fas fa-times"></i>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
+<script>
|
|
|
+import { mapGetters, mapActions } from 'vuex';
|
|
|
+import { loginOut } from '@/api/user';
|
|
|
|
|
|
- <!-- 首页二级菜单 -->
|
|
|
- <div id="home-menu" class="menu-content p-4 space-y-2">
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-tachometer-alt text-gray-600"></i>
|
|
|
- <span>仪表盘</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-star text-gray-600"></i>
|
|
|
- <span>收藏应用</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-history text-gray-600"></i>
|
|
|
- <span>最近使用</span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+ export default {
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['userinfo','fromL']),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 二级弹框是否显示
|
|
|
+ isShow:false,
|
|
|
+ // 一级选中第几个
|
|
|
+ activeL:0,
|
|
|
+ // 二级分类
|
|
|
+ barCopy:[],
|
|
|
+ // 应用标识
|
|
|
+ appSign:'',
|
|
|
+ levAppSign:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions({
|
|
|
+ logout: 'user/logout'
|
|
|
+ }),
|
|
|
+ async handleLogout() {
|
|
|
+ this.$confirm('确定退出吗', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(async () => {
|
|
|
+ loginOut()
|
|
|
+ .then(async () => {
|
|
|
+ this.$message({
|
|
|
+ message: '退出成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ await this.logout();
|
|
|
+ this.$router.push('/login');
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ // 取消操作
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 关闭二级导航遮罩层
|
|
|
+ closeCopy(){
|
|
|
+ this.isShow = false
|
|
|
+ },
|
|
|
+ // 点击一级导航
|
|
|
+ goto(index,val = null){
|
|
|
+ this.levAppSign = ''
|
|
|
+ if (val) {
|
|
|
+ this.activeL = index + 1
|
|
|
+ }else{
|
|
|
+ this.appSign = ''
|
|
|
+ document.querySelector('#pageCon').innerHTML = '';
|
|
|
|
|
|
+ this.isShow = false
|
|
|
+ this.activeL = index
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- <!-- 教学中心二级菜单 -->
|
|
|
- <div id="teaching-menu" class="menu-content p-4 space-y-2 hidden">
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-book text-gray-600"></i>
|
|
|
- <span>课程管理</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700" id="course-center-link">
|
|
|
- <i class="fas fa-graduation-cap text-gray-600"></i>
|
|
|
- <span>课程中心</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-star text-gray-600"></i>
|
|
|
- <span>学生评价</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-eye text-gray-600"></i>
|
|
|
- <span>课堂观察</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-users text-gray-600"></i>
|
|
|
- <span>协同建构</span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+ // 有二级导航的显示二级导航,清除一级导航应用
|
|
|
+ if (this.fromL.admin.sidebar.list[index].children) {
|
|
|
+ this.barCopy = JSON.parse(JSON.stringify(this.fromL.admin.sidebar.list[index].children))
|
|
|
+ this.isShow = true
|
|
|
|
|
|
+ this.appSign = ''
|
|
|
+ document.querySelector('#pageCon').innerHTML = '';
|
|
|
+ }else{
|
|
|
+ this.isShow = false
|
|
|
|
|
|
- <!-- 智能教务二级菜单 -->
|
|
|
- <div id="office-menu" class="menu-content p-4 space-y-2 hidden">
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-chart-line text-gray-600"></i>
|
|
|
- <span>综合看板</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-file-alt text-gray-600"></i>
|
|
|
- <span>智能表单</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-user-tie text-gray-600"></i>
|
|
|
- <span>教师管理</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-chalkboard-teacher text-gray-600"></i>
|
|
|
- <span>教师中心</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-comments text-gray-600"></i>
|
|
|
- <span>会议妙记</span>
|
|
|
- </a>
|
|
|
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700">
|
|
|
- <i class="fas fa-user-graduate text-gray-600"></i>
|
|
|
- <span>学生管理</span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+ // 点击相同应用不刷新
|
|
|
+ if (this.appSign == val.toolId) return
|
|
|
+ this.appSign = val.toolId
|
|
|
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
+ let url = ''
|
|
|
+ // 查出对应账号的应用区域地址
|
|
|
+ val.url.forEach(e => {
|
|
|
+ if (e.region == this.userinfo.schoolArea) {
|
|
|
+ url = e.url
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
+ let dom = document.querySelector('#pageCon')
|
|
|
+
|
|
|
+ document.querySelector('#pageCon').innerHTML = '';
|
|
|
+
|
|
|
+ // console.log(document.querySelector('#pageCon'));
|
|
|
+ window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom)
|
|
|
+ // 应用标识，url,存储dom
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击二级导航
|
|
|
+ levTwo(val){
|
|
|
+ this.appSign = ''
|
|
|
+
|
|
|
+ // 点击相同应用不刷新
|
|
|
+ if (this.levAppSign == val.toolId) return
|
|
|
+ this.levAppSign = val.toolId
|
|
|
+
|
|
|
+ let url = ''
|
|
|
+ val.url.forEach(e => {
|
|
|
+ if (e.region == this.userinfo.schoolArea) {
|
|
|
+ url = e.url
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ let dom = document.querySelector('#pageCon')
|
|
|
+
|
|
|
+ document.querySelector('#pageCon').innerHTML = '';
|
|
|
|
|
|
+ window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom)
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- #expanded-menu {
|
|
|
- transition: transform 0.3s ease-in-out;
|
|
|
- box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- #expanded-menu.show {
|
|
|
- transform: translateX(0);
|
|
|
- }
|
|
|
+.logo{
|
|
|
+ width: 80px;
|
|
|
+ height: 68px;
|
|
|
+}
|
|
|
+.logo3{
|
|
|
+ height: 25px;object-fit: contain;transform: scale(1.5);
|
|
|
+}
|
|
|
+.logo2{
|
|
|
+ padding: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 68px;
|
|
|
+ border-bottom: .5px #e5e7eb solid;
|
|
|
+}
|
|
|
+.logo2 img{
|
|
|
+ width: 37px;
|
|
|
+}
|
|
|
+.userInfo{
|
|
|
+ width: 80px;
|
|
|
+ color: #374151;
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.left {
|
|
|
+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
|
|
|
+ width: 80px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 5px 0 8px rgba(0, 0, 0, 0.1);
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+}
|
|
|
+.left .ulT {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.left .ulT div{
|
|
|
+ margin-top: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.ulTCopy{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ transform: translate(256px,0);
|
|
|
+ height: 100%;
|
|
|
+ width: 256px;
|
|
|
+ z-index: 999999999;
|
|
|
+ background-color: #ffffff;
|
|
|
+ overflow: visible;
|
|
|
+ transition: width 2s ease; /* 定义过渡效果 */
|
|
|
+ box-shadow: inset 2px 0 8px rgba(0, 0, 0, 0.1),5px 3px 5px 0px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.ulTCopyTit{
|
|
|
+ height: 72px;padding: 16px;box-sizing: border-box;color: #000;font-size: 18px;font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: .5px #e5e7eb solid;
|
|
|
+
|
|
|
+}
|
|
|
+.ulTCopyTxt{
|
|
|
+ height: 48px;padding: 12px;box-sizing: border-box;display: flex;align-items: center;
|
|
|
+ color: #374151;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.ulTCopyTxt:hover{
|
|
|
+ background-color: #f3f4f6;
|
|
|
+}
|
|
|
+.cha:hover{
|
|
|
+ color: #000 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.menu_left {
|
|
|
+ width: 64px;
|
|
|
+ height: 70px;
|
|
|
+ font-size: 10px;
|
|
|
+ margin-top: 3px;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #64748b;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: none;
|
|
|
+ z-index: 1000000;
|
|
|
+ text-decoration: none; /* 移除下划线 */
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+.ulT div:nth-child(1){
|
|
|
+ margin-top: 0;
|
|
|
+}
|
|
|
+.menu_left:hover{
|
|
|
+ background-color: #f3f4f6 !important;
|
|
|
+}
|
|
|
+.menu_left img{
|
|
|
+ width: 22px;
|
|
|
+ height: 20px;
|
|
|
+}
|
|
|
|
|
|
</style>
|
11wqe1
