@arkxos/arkos-theme-classic 0.1.0

package/src/os-themes/classic/layout/components/userbar.vue

@@ -0,0 +1,238 @@
+<template>
+	<div class="user-bar">
+		<div class="panel-item hidden-sm-and-down" @click="search">
+			<el-icon><el-icon-search /></el-icon>
+		</div>
+		<div class="screen panel-item hidden-sm-and-down" @click="screen">
+			<el-icon><el-icon-full-screen /></el-icon>
+		</div>
+		<div class="tasks panel-item" @click="tasks">
+			<el-icon><el-icon-sort /></el-icon>
+		</div>
+		<div class="tasks panel-item" @click="skins">
+			<el-icon><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M700.928 901.632H315.904c-32.256 0-58.368-26.112-58.368-58.368V490.496L251.392 496.64c-8.704 8.704-19.968 14.336-32.256 15.36-13.824 1.024-27.136-4.096-37.376-13.824L76.8 392.704c-18.944-18.944-18.944-49.152 0-68.096l160.256-160.256c9.216-9.216 21.504-14.336 33.792-14.336h57.856c10.752 0 20.48 6.144 25.6 15.872C383.488 225.792 445.44 264.192 512 264.192s128-38.4 157.696-98.304c4.608-9.728 14.848-15.872 25.6-15.872h57.856c12.8 0 25.088 5.12 33.792 14.336L947.2 324.608c18.944 18.944 18.944 49.152 0 68.096l-105.472 105.472c-9.216 9.216-21.504 14.336-34.304 14.336s-25.088-5.12-34.304-14.336l-7.168-7.168v346.624c0 33.28-29.184 64-65.024 64zM271.36 408.064c4.096 0 8.192 1.024 12.288 2.56l15.36 7.168c9.728 4.608 21.504 14.848 21.504 25.6v372.224c0 12.8 10.24 23.552 23.552 23.552H680.96c12.8 0 23.552-10.24 23.552-23.552V444.928c0-9.728 10.24-18.432 17.92-24.064l14.336-9.216c11.264-7.68 26.112-6.144 35.84 3.584l32.768 32.768L896 357.376l-146.432-145.92h-36.864C670.208 281.6 593.408 325.632 512 325.632c-81.92 0-158.72-44.032-200.192-114.176h-36.864L128.512 357.376l90.624 90.624 31.744-31.744c5.632-5.12 12.8-8.192 20.48-8.192z" p-id="2740"></path></svg></el-icon>
+		</div>
+		<div class="msg panel-item" @click="showMsg">
+			<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
+				<el-icon><el-icon-chat-dot-round /></el-icon>
+			</el-badge>
+			<el-drawer title="新消息" v-model="msg" :size="400" append-to-body destroy-on-close>
+				<el-container>
+					<el-main class="nopadding">
+						<el-scrollbar>
+							<ul class="msg-list">
+								<li v-for="item in msgList" v-bind:key="item.id">
+									<a :href="item.link" target="_blank">
+										<div class="msg-list__icon">
+											<el-badge is-dot type="danger">
+												<el-avatar :size="40" :src="item.avatar"></el-avatar>
+											</el-badge>
+										</div>
+										<div class="msg-list__main">
+											<h2>{{item.title}}</h2>
+											<p>{{item.describe}}</p>
+										</div>
+										<div class="msg-list__time">
+											<p>{{item.time}}</p>
+										</div>
+									</a>
+								</li>
+								<el-empty v-if="msgList.length==0" description="暂无新消息" :image-size="100"></el-empty>
+							</ul>
+						</el-scrollbar>
+					</el-main>
+					<el-footer>
+						<el-button type="primary">消息中心</el-button>
+						<el-button @click="markRead">全部设为已读</el-button>
+					</el-footer>
+				</el-container>
+			</el-drawer>
+		</div>
+		<el-dropdown class="user panel-item" trigger="click" @command="handleUser">
+			<div class="user-avatar">
+				<el-avatar :size="30">{{ userNameF }}</el-avatar>
+				<label>{{ userName }}</label>
+				<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
+			</div>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item command="uc">帐号信息</el-dropdown-item>
+					<el-dropdown-item command="clearCache">清除缓存</el-dropdown-item>
+					<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
+	</div>
+
+	<el-dialog v-model="searchVisible" :width="700"  title="搜索" center destroy-on-close>
+		<search @success="searchVisible=false"></search>
+	</el-dialog>
+
+	<el-drawer v-model="tasksVisible" :size="450"  title="任务中心" destroy-on-close>
+		<tasks></tasks>
+	</el-drawer>
+
+	<el-drawer title="布局实时演示" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
+		<setting></setting>
+	</el-drawer>
+
+</template>
+
+<script>
+import search from './search.vue'
+import tasks from './tasks.vue'
+import setting from './setting.vue';
+import { systemStore, setToken } from '@arkxos/arkos-core';
+
+export default {
+  components: {
+    search,
+    tasks,
+    setting
+  },
+  computed: {
+    ...mapState(systemStore, {
+      userInfo: 'userInfo',
+      avatar: 'userInfo.user.avatar',
+      userName(store) {
+        return store.userInfo?.user?.nickname
+      }
+    }),
+    userNameF() {
+      return this.userName?.substring(0, 1);
+    }
+  },
+  data() {
+    return {
+      settingDialog: false,
+      searchVisible: false,
+      tasksVisible: false,
+      msg: false,
+      msgList: [
+        {
+          id: 1,
+          type: 'user',
+          avatar: 'img/avatar.jpg',
+          title: 'Skuya',
+          describe: '如果喜欢就点个星星支持一下哦',
+          link: 'https://gitee.com/lolicode/scui',
+          time: '5分钟前'
+        },
+        {
+          id: 2,
+          type: 'user',
+          avatar: 'img/avatar2.gif',
+          title: 'Lolowan',
+          describe: '点进去Gitee获取最新开源版本',
+          link: 'https://gitee.com/lolicode/scui',
+          time: '14分钟前'
+        },
+        {
+          id: 3,
+          type: 'system',
+          avatar: 'img/logo.png',
+          title: '感谢登录ArkX OS',
+          describe: 'Vue 3.0 + Vue-Router 4.0 + ElementPlus + Axios 后台管理系统。',
+          link: 'https://gitee.com/lolicode/scui',
+          time: '2020年7月24日'
+        }
+      ]
+    }
+  },
+  created() {
+    // const userInfo = this.$TOOL.data.get('USER_INFO');
+    // const userDetail = userInfo?.user
+    // console.log('userDetail===', userDetail)
+    //
+  },
+  methods: {
+    // 个人信息
+    handleUser(command) {
+      if (command == 'uc') {
+        this.$router.push({ path: '/usercenter' });
+      }
+      if (command == 'cmd') {
+        this.$router.push({ path: '/cmd' });
+      }
+      if (command == 'clearCache') {
+        this.$confirm('清除缓存会将系统初始化，包括登录状态、主题、语言设置等，是否继续？', '提示', {
+          type: 'info',
+        }).then(() => {
+          const loading = this.$loading()
+          this.$TOOL.data.clear()
+          this.$router.replace({ path: '/login' })
+          setTimeout(() => {
+            loading.close()
+            location.reload()
+          }, 1000)
+        }).catch(() => {
+          // 取消
+        })
+      }
+      if (command === 'outLogin') {
+        this.$confirm('确认是否退出当前用户？', '提示', {
+          type: 'warning',
+          confirmButtonText: '退出',
+          confirmButtonClass: 'el-button--danger'
+        }).then(() => {
+          setToken('')
+          this.$router.replace({ path: '/login' });
+        }).catch(() => {
+          // 取消退出
+        })
+      }
+    },
+    // 全屏
+    screen() {
+      const element = document.documentElement;
+      this.$TOOL.screen(element)
+    },
+    // 显示短消息
+    showMsg() {
+      this.msg = true
+    },
+    // 标记已读
+    markRead() {
+      this.msgList = []
+    },
+    // 搜索
+    search() {
+      this.searchVisible = true
+    },
+    // 任务
+    tasks() {
+      this.tasksVisible = true
+    },
+    skins() {
+      this.settingDialog = true;
+    },
+    openSetting() {
+      this.settingDialog = true;
+    },
+  }
+}
+</script>
+
+<style scoped>
+	.user-bar {display: flex;align-items: center;height: 100%;}
+	.user-bar .panel-item {padding: 0 10px;cursor: pointer;height: 100%;display: flex;align-items: center;}
+	.user-bar .panel-item i {font-size: 16px;}
+	.user-bar .panel-item:hover {background: rgba(0, 0, 0, 0.1);}
+	.user-bar .user-avatar {height:49px;display: flex;align-items: center;}
+	.user-bar .user-avatar label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
+	.user-bar .el-icon--right {
+		color: #fff;
+	}
+	.msg-list li {border-top:1px solid #eee;}
+	.msg-list li a {display: flex;padding:20px;}
+	.msg-list li a:hover {background: #ecf5ff;}
+	.msg-list__icon {width: 40px;margin-right: 15px;}
+	.msg-list__main {flex: 1;}
+	.msg-list__main h2 {font-size: 15px;font-weight: normal;color: #333;}
+	.msg-list__main p {font-size: 12px;color: #999;line-height: 1.8;margin-top: 5px;}
+	.msg-list__time {width: 100px;text-align: right;color: #999;}
+
+	.dark .msg-list__main h2 {color: #d0d0d0;}
+	.dark .msg-list li {border-top:1px solid #363636;}
+	.dark .msg-list li a:hover {background: #383838;}
+</style>

package/src/os-themes/classic/layout/index.vue

@@ -0,0 +1,347 @@
+<template>
+	<!-- 通栏布局 -->
+	<template v-if="layout=='header'">
+		<header class="adminui-header">
+			<div class="adminui-header-left">
+				<div class="logo-bar">
+					<img class="logo" src="img/logo.png">
+					<span>{{ $CONFIG.ArkosTitle }}</span>
+				</div>
+				<ul v-if="!ismobile" class="nav">
+					<li v-for="item in menu" :key="item" :class="pmenu.path == item.path ? 'active' : ''" @click="showMenu(item)">
+						<el-icon><component :is="item.meta.icon || 'el-icon-menu'" /></el-icon>
+						<span>{{ item.meta.title }}</span>
+					</li>
+				</ul>
+			</div>
+			<div class="adminui-header-right">
+				<userbar></userbar>
+			</div>
+		</header>
+		<section class="aminui-wrapper">
+			<div v-if="!ismobile && nextMenu.length>0 || !pmenu.component" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'" >
+				<!-- <div v-if="!menuIsCollapse" class="adminui-side-top">
+					<h2>{{ pmenu.meta?.title }}</h2>
+				</div> -->
+				<div class="adminui-side-scroll">
+					<div class="adminui-side-tree">
+						<el-scrollbar>
+							<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
+								<NavMenu :navMenus="nextMenu"></NavMenu>
+							</el-menu>
+						</el-scrollbar>
+					</div>
+					<div class="adminui-side-icon" @click="globalStore().toggleMenuIsCollapse()">
+						<div class="bottom-icon">
+							<el-icon v-if="menuIsCollapse" class="right-line" size="18" color="#ffffff"><el-icon-right /></el-icon>
+							<el-icon v-else class="back-line" size="18" color="#ffffff"><el-icon-back /></el-icon>
+						</div>
+					</div>
+				</div>
+			</div>
+			<Side-m v-if="ismobile"></Side-m>
+			<div class="aminui-body el-container">
+<!--				<div><Topbar v-if="!ismobile"></Topbar></div>-->
+				<div><Tags v-if="!ismobile && layoutTags" v-show="isSideAndHeadShow" :menuIsCollapse="menuIsCollapse"></Tags></div>
+				<div class="adminui-main" id="adminui-main">
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="keepAliveStore().keepLiveRoute">
+					        <component :is="Component" :key="$route.path" v-if="keepAliveStore().routeShow"/>
+					    </keep-alive>
+					</router-view>
+					<iframe-view></iframe-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<!-- 经典布局 -->
+	<template v-else-if="layout=='menu'">
+		<header class="adminui-header" v-show="isSideAndHeadShow">
+			<div class="adminui-header-left">
+				<div class="logo-bar">
+					<img class="logo" src="img/logo.png">
+					<span>{{ $CONFIG.ArkosTitle }}</span>
+				</div>
+			</div>
+			<div class="adminui-header-right">
+				<userbar></userbar>
+			</div>
+		</header>
+		<section class="aminui-wrapper">
+			<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'" v-show="isSideAndHeadShow">
+				<div class="adminui-side-scroll">
+					<div class="adminui-side-tree">
+						<el-scrollbar>
+							<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
+								<NavMenu :navMenus="menu"></NavMenu>
+							</el-menu>
+						</el-scrollbar>
+					</div>
+
+					<div class="adminui-side-icon" @click="globalStore().toggleMenuIsCollapse()">
+						<div class="bottom-icon">
+							<el-icon v-if="menuIsCollapse" class="right-line" size="18" color="#ffffff"><el-icon-right /></el-icon>
+							<el-icon v-else class="back-line" size="18" color="#ffffff"><el-icon-back /></el-icon>
+						</div>
+					</div>
+				</div>
+
+			</div>
+			<Side-m v-if="ismobile"></Side-m>
+			<div class="aminui-body el-container">
+<!--				<Topbar v-if="!ismobile"></Topbar>-->
+			<div v-show="isSideAndHeadShow">	<Tags v-if="!ismobile && layoutTags"></Tags></div>
+				<div class="adminui-main" id="adminui-main">
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="keepAliveStore().keepLiveRoute">
+					        <component :is="Component" :key="$route.path" v-if="keepAliveStore().routeShow"/>
+					    </keep-alive>
+					</router-view>
+					<iframe-view></iframe-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<!-- 功能坞布局 -->
+	<template v-else-if="layout=='dock'">
+		<header class="adminui-header">
+			<div class="adminui-header-left">
+				<div class="logo-bar">
+					<img class="logo" src="img/logo.png">
+					<span>{{ $CONFIG.ArkosTitle }}</span>
+				</div>
+			</div>
+			<div class="adminui-header-right">
+				<div v-if="!ismobile" class="adminui-header-menu">
+					<!-- background-color="#222b45" -->
+					<el-menu mode="horizontal" :default-active="active" router background-color="#3182f3" text-color="var(--color-primary-lighter)" active-text-color="#fff">
+						<NavMenu :navMenus="menu"></NavMenu>
+					</el-menu>
+				</div>
+				<Side-m v-if="ismobile"></Side-m>
+				<userbar></userbar>
+			</div>
+		</header>
+		<section class="aminui-wrapper">
+			<div class="aminui-body el-container">
+        <div ><Tags v-if="!ismobile && layoutTags" ></Tags></div>
+				<div class="adminui-main" id="adminui-main">
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="keepAliveStore().keepLiveRoute">
+					        <component :is="Component" :key="$route.path" v-if="keepAliveStore().routeShow"/>
+					    </keep-alive>
+					</router-view>
+					<iframe-view></iframe-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<!-- 默认布局 -->
+	<template v-else>
+		<section class="aminui-wrapper">
+			<div v-if="!ismobile && isSideAndHeadShow" class="aminui-side-split">
+				<div class="aminui-side-split-top">
+					<router-link :to="$CONFIG.DASHBOARD_URL">
+						<img class="logo" :title="$CONFIG.ArkosTitle" src="img/logo-r.png">
+					</router-link>
+				</div>
+				<div class="adminui-side-split-scroll">
+					<el-scrollbar>
+						<ul>
+							<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''"
+								@click="showMenu(item)">
+								<el-icon><component :is="item.meta.icon || el-icon-menu" /></el-icon>
+								<p>{{ item.meta.title }}</p>
+							</li>
+						</ul>
+					</el-scrollbar>
+				</div>
+			</div >
+			<div v-if="!ismobile && nextMenu.length>0 || !pmenu.component"
+           :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'"
+           v-show="isSideAndHeadShow">
+				<div v-if="!menuIsCollapse" class="adminui-side-top">
+					<h2>{{ pmenu.meta?.title }}</h2>
+				</div>
+				<div class="adminui-side-scroll">
+					<div class="adminui-side-tree">
+						<el-scrollbar>
+							<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
+								<NavMenu :navMenus="nextMenu"></NavMenu>
+							</el-menu>
+						</el-scrollbar>
+					</div>
+
+					<div class="adminui-side-icon" @click="globalStore().toggleMenuIsCollapse()">
+						<div class="bottom-icon" style="background:#222b45;">
+							<el-icon v-if="menuIsCollapse" class="right-line" size="18" color="#ffffff"><el-icon-right /></el-icon>
+							<el-icon v-else class="back-line" size="18" color="#ffffff"><el-icon-back /></el-icon>
+						</div>
+					</div>
+				</div>
+			</div>
+      <Side-m v-if="ismobile"></Side-m>
+			<div class="aminui-body el-container">
+			  <div v-show="isSideAndHeadShow">	<Topbar><userbar></userbar></Topbar></div>
+			  <div v-show="isSideAndHeadShow">	<Tags v-if="!ismobile && layoutTags && isSideAndHeadShow"></Tags></div>
+				<div class="adminui-main" id="adminui-main">
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="keepAliveStore().keepLiveRoute">
+					        <component :is="Component" :key="$route.path" v-if="keepAliveStore().routeShow"/>
+					    </keep-alive>
+					</router-view>
+					<iframe-view></iframe-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<div class="main-maximize-exit" @click="exitMaximize"><el-icon><el-icon-close /></el-icon></div>
+
+<!--	<div class="layout-setting" @click="openSetting"><el-icon><el-icon-brush-filled /></el-icon></div>-->
+
+<!--	<el-drawer title="布局实时演示" v-model="settingDialog" :size="400" append-to-body destroy-on-close>-->
+<!--		<setting></setting>-->
+<!--	</el-drawer>-->
+
+	<auto-exit></auto-exit>
+</template>
+
+<script setup>
+import SideM from './components/sideM.vue';
+import Topbar from './components/topbar.vue';
+import Tags from './components/tags.vue';
+import NavMenu from './components/NavMenu.vue';
+import userbar from './components/userbar.vue';
+// import setting from './components/setting.vue';
+import iframeView from './components/iframeView.vue';
+import autoExit from './other/autoExit.js';
+import globalStore from '../store/modules/global';
+import keepAliveStore from '../store/modules/keepAlive';
+// import arkosStarter from '@arkxos/arkos-boot'
+// const system = arkosStarter.system
+import { computed, nextTick, onMounted, ref, watch, getCurrentInstance } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+const { proxy } = getCurrentInstance()
+
+const route = useRoute()
+const router = useRouter()
+const global = globalStore()
+const iconName = ref('Search')
+const isSideAndHeadShow = ref(true)
+const nextMenu = ref([])
+const pmenu = ref({})
+const active = ref('')
+
+const ismobile = computed(() => {
+  return global.ismobile
+})
+const layout = computed(() => {
+  return global.layout
+})
+const layoutTags = computed(() => {
+  return global.layoutTags
+})
+const menuIsCollapse = computed(() => {
+  return global.menuIsCollapse
+})
+const menu = computed(() => {
+  return proxy.$pinia._s.get('system').menus
+})
+
+watch(() => route, (val) => {
+  if (val) {
+    if (isIntegrate()) {
+      isSideAndHeadShow.value = false
+    } else {
+      isSideAndHeadShow.value = true
+    } showThis()
+  }
+})
+
+watch(() => layout, (val) => {
+  if (val) {
+    document.body.setAttribute('data-layout', val)
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  if (isIntegrate()) {
+    isSideAndHeadShow.value = false
+  } else {
+    isSideAndHeadShow.value = true
+  }
+  onLayoutResize();
+  window.addEventListener('resize', onLayoutResize)
+  showThis()
+})
+const onLayoutResize = () => {
+  globalStore().ismobile = document.body.clientWidth < 992
+}
+const isIntegrate = () => {
+  return route.query && route.query.integrate == 'true'
+}
+
+// 路由监听高亮
+const showThis = () => {
+  console.log('showThis', route)
+  pmenu.value = route.meta.breadcrumb ? route.meta.breadcrumb[0] : {}
+  nextMenu.value = filterUrl(pmenu.value.children);
+  nextTick(() => {
+    active.value = route.meta.active || route.path
+  })
+}
+// 点击显示
+const showMenu = (route) => {
+  pmenu.value = route
+  console.log(pmenu.value);
+  nextMenu.value = filterUrl(route.children);
+  if ((!route.children || route.children.length == 0) && route.component) {
+    router.push({ path: route.path })
+  }
+}
+// 转换外部链接的路由
+const filterUrl = (map) => {
+  const newMap = []
+  map && map.forEach(item => {
+    item.meta = item.meta ? item.meta : {};
+    // 处理隐藏
+    if (item.meta.hidden || item.meta.type == 'button') {
+      return false
+    }
+    // 处理http
+    if (item.meta.type == 'iframe') {
+      item.path = `/i/${item.name}`;
+    }
+    // 递归循环
+    if (item.children && item.children.length > 0) {
+      item.children = filterUrl(item.children)
+    }
+    newMap.push(item)
+  })
+  return newMap;
+}
+
+// 退出最大化
+const exitMaximize = () => {
+  document.getElementById('app').classList.remove('main-maximize')
+}
+
+// 路由初始化
+watch(() => menu, (val) => {
+  if (val.value.length && !pmenu.value.path) {
+    nextTick(() => {
+      showMenu(val.value[0])
+      console.log('路由', val.value[0].children[0].path);
+      if (val.value[0].children.length) {
+        router.push(val.value[0].children[0].path)
+        active.value = route.meta.active || route.path
+      }
+    })
+  }
+}, { deep: true })
+
+</script>

package/src/os-themes/classic/layout/other/404.vue

@@ -0,0 +1,44 @@
+<template>
+	<div class="router-err">
+		<div class="router-err__icon">
+			<img src="img/404.png" />
+		</div>
+		<div class="router-err__content">
+			<h2>无权限或找不到页面</h2>
+			<p>当前页面无权限访问或者打开了一个不存在的链接，请检查当前账户权限和链接的可访问性。</p>
+			<el-button type="primary" plain round @click="gohome">返回首页</el-button>
+			<el-button type="primary" plain round @click="gologin">重新登录</el-button>
+			<el-button type="primary" round @click="goback">返回上一页</el-button>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+  methods: {
+    gohome() {
+      location.href = '#/'
+    },
+    goback() {
+      this.$router.go(-1);
+    },
+    gologin() {
+      this.$router.push('/login');
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.router-err {display: flex;width: 900px;margin: 50px auto;align-items: center;}
+	.router-err__icon {width: 400px;}
+	.router-err__icon img {width: 100%;}
+	.router-err__content {flex: 1;padding:40px;}
+	.router-err__content h2 {font-size: 26px;}
+	.router-err__content p {font-size: 14px;color: #999;margin: 15px 0 30px 0;line-height: 1.5;}
+
+	@media (max-width: 992px){
+		.router-err {display: block;width: 100%;margin-top: 10px;text-align: center;}
+		.router-err__icon {width: 280px;margin: 0 auto;}
+	}
+</style>

package/src/os-themes/classic/layout/other/autoExit.js

@@ -0,0 +1,51 @@
+export default {
+  render() {
+
+  },
+  data() {
+    return {
+      logoutCount: this.$TOOL.data.get('AUTO_EXIT')
+    }
+  },
+  mounted() {
+    if (this.logoutCount) {
+      this.setNewAutoExitTime()
+      document.onclick = () => {
+        this.setNewAutoExitTime()
+      }
+      document.onmousemove = () => {
+        this.setNewAutoExitTime()
+      }
+      document.onkeydown = () => {
+        this.setNewAutoExitTime()
+      }
+      document.onscroll = () => {
+        this.setNewAutoExitTime()
+      }
+      window.autoExitTimer = window.setInterval(this.autoExitfun, 1000)
+    }
+  },
+  unmounted() {
+    if (this.logoutCount) {
+      clearInterval(window.autoExitTimer)
+      window.autoExitTimer = null
+    }
+  },
+  methods: {
+    setNewAutoExitTime() {
+      window.autoExitTime = new Date().getTime()
+    },
+    autoExitfun() {
+      if (new Date().getTime() - window.autoExitTime > this.logoutCount * 60 * 1000) {
+        clearInterval(window.autoExitTimer)
+        window.autoExitTimer = null
+        this.$router.replace({ path: '/login' })
+        this.$alert('用户长时间无操作，为保证账户安全，系统已自动登出。', '提示', {
+          type: 'warning',
+          center: true,
+          roundButton: true
+        })
+      }
+    }
+  }
+}

package/src/os-themes/classic/layout/other/empty.vue

@@ -0,0 +1,3 @@
+<template>
+	<router-view></router-view>
+</template>