@arkxos/arkos-theme-classic 0.1.0

package/src/os-themes/classic/router/routerStatic.js

@@ -0,0 +1,103 @@
+/**
+ * Note: 路由配置项
+ *
+ * hidden: true                     // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
+ * alwaysShow: true                 // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
+ *                                  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
+ *                                  // 若你想不管路由下面的 children 声明的个数都显示你的根路由
+ *                                  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
+ * redirect: noRedirect             // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
+ * name:'router-name'               // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
+ * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
+ * roles: ['admin', 'common']       // 访问路由的角色权限
+ * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
+ * meta : {
+    noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+    title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
+    icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
+    breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
+    activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
+  }
+ */
+export default [
+  {
+    name: 'layout',
+    path: '/',
+    component: () => import('../layout/index.vue'),
+    children: [
+      {
+        path: '/',
+        redirect: '/home'
+      },
+      {
+        path: '/home',
+        component: () => import('../views/home.vue')
+      }
+    ]
+  },
+  {
+    path: '/redirect',
+    component: () => import(/* webpackChunkName: "layout" */ '../layout/index.vue'),
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        component: () => import('../views/redirect/index.vue')
+      }
+    ]
+  },
+  {
+    path: '/login',
+    component: () => import('../views/login/index.vue'),
+    hidden: true
+  },
+  {
+    path: '/register',
+    component: () => import('../views/register.vue'),
+    hidden: true
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('../views/error/404'),
+    hidden: true
+  },
+  {
+    path: '/401',
+    component: () => import('../views/error/401'),
+    hidden: true
+  },
+  // {
+  //   name: 'layout',
+  //   path: '/',
+  //   component: () => import(/* webpackChunkName: "layout" */ '../layout/index.vue'),
+  //   redirect: config.DASHBOARD_URL || '/arkui-sample/dashboard',
+  //   children: []
+  // },
+  // {
+  // 	path: '',
+  // 	component: () => import(/* webpackChunkName: "layout" */ '@/layout'),
+  // 	redirect: '/index',
+  // 	children: [
+  // 		{
+  // 			path: '/index',
+  // 			component: () => import('@/views/index'),
+  // 			name: 'Index',
+  // 			meta: { title: '首页', icon: 'dashboard', affix: true }
+  // 		}
+  // 	]
+  // },
+  // {
+  //   path: '/user',
+  //   component: () => import(/* webpackChunkName: "layout" */ '@/layout'),
+  //   hidden: true,
+  //   redirect: 'noredirect',
+  //   children: [
+  //     {
+  //       path: 'profile',
+  //       component: () => import('@/puzzles/arkos-system/views/system/user/profile/index'),
+  //       name: 'Profile',
+  //       meta: { title: '个人中心', icon: 'user' }
+  //     }
+  //   ]
+  // }
+];

package/src/os-themes/classic/router/scrollBehavior.js

@@ -0,0 +1,22 @@
+import { nextTick } from 'vue'
+import viewTagsStore from '../store/modules/viewTags';
+
+export function beforeEach(to, from) {
+  const adminMain = document.querySelector('#adminui-main')
+  if (!adminMain) { return false }
+  viewTagsStore().updateViewTags({
+    fullPath: from.fullPath,
+    scrollTop: adminMain.scrollTop
+  })
+}
+
+export function afterEach(to) {
+  const adminMain = document.querySelector('#adminui-main')
+  if (!adminMain) { return false }
+  nextTick(() => {
+    const beforeRoute = viewTagsStore().viewTags.filter(v => v.fullPath == to.fullPath)[0]
+    if (beforeRoute) {
+      adminMain.scrollTop = beforeRoute.scrollTop || 0
+    }
+  })
+}

package/src/os-themes/classic/router/systemRouter.js

@@ -0,0 +1,36 @@
+import { config } from '@arkxos/arkos'
+
+// 系统路由
+const routes = [
+  {
+    name: 'layout',
+    path: '/',
+    component: () => import(/* webpackChunkName: "layout" */ '../layout/index.vue'),
+    redirect: config.DASHBOARD_URL || '/arkui-sample/dashboard',
+    children: []
+  },
+  {
+    path: '/login',
+    hidden: true,
+    component: () => import(/* webpackChunkName: "login" */ '../views/login/index.vue'),
+    meta: {
+      title: '登录'
+    }
+  },
+  {
+    path: '/user_register',
+    component: () => import(/* webpackChunkName: "userRegister" */ '../views/login/userRegister.vue'),
+    meta: {
+      title: '注册'
+    }
+  },
+  {
+    path: '/reset_password',
+    component: () => import(/* webpackChunkName: "resetPassword" */ '../views/login/resetPassword.vue'),
+    meta: {
+      title: '重置密码'
+    }
+  }
+]
+
+export default routes;

package/src/os-themes/classic/store/index.js

@@ -0,0 +1,6 @@
+import globalStore from './modules/global';
+import iframeStore from './modules/iframe';
+import keepAliveStore from './modules/keepAlive';
+import viewTagsStore from './modules/viewTags';
+
+export default { globalStore, iframeStore, keepAliveStore, viewTagsStore };

package/src/os-themes/classic/store/modules/global.js

@@ -0,0 +1,25 @@
+import { config } from '@arkxos/arkos-core';
+import { defineStore } from 'pinia'
+
+export default defineStore('global', {
+  state: () => ({
+    // 移动端布局
+    ismobile: false,
+    // 布局
+    layout: config.LAYOUT,
+    // 菜单是否折叠 toggle
+    menuIsCollapse: config.MENU_IS_COLLAPSE,
+    // 多标签栏
+    layoutTags: config.LAYOUT_TAGS,
+    // 主题
+    theme: config.THEME,
+  }),
+  actions: {
+    toggleMenuIsCollapse() {
+      this.menuIsCollapse = !this.menuIsCollapse
+    },
+    toggleLayoutTags() {
+      this.layoutTags = !this.layoutTags
+    }
+  }
+})

package/src/os-themes/classic/store/modules/iframe.js

@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+
+export default defineStore('iframe', {
+  state: () => ({
+    iframeList: []
+  }),
+  actions: {
+    setIframeList(route) {
+      this.iframeList = []
+      this.iframeList.push(route)
+    },
+    pushIframeList(route) {
+      const target = this.iframeList.find((item) => item.path === route.path)
+      if (!target) {
+        this.iframeList.push(route)
+      }
+    },
+    removeIframeList(route) {
+      this.iframeList.forEach((item, index) => {
+        if (item.path === route.path) {
+          this.iframeList.splice(index, 1)
+        }
+      })
+    },
+    refreshIframe(route) {
+      this.iframeList.forEach((item) => {
+        if (item.path == route.path) {
+          const url = route.meta.url;
+          item.meta.url = '';
+          setTimeout(function() {
+            item.meta.url = url
+          }, 200);
+        }
+      })
+    },
+    clearIframeList() {
+      this.iframeList = []
+    }
+  }
+})

package/src/os-themes/classic/store/modules/keepAlive.js

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+
+export default defineStore('keepAlive', {
+  state: () => ({
+    keepLiveRoute: [],
+    routeKey: null,
+    routeShow: true
+  }),
+  actions: {
+    pushKeepLive(component) {
+      if (!this.keepLiveRoute.includes(component)) {
+        this.keepLiveRoute.push(component)
+      }
+    },
+    removeKeepLive(component) {
+      const index = this.keepLiveRoute.indexOf(component);
+      if (index !== -1) {
+        this.keepLiveRoute.splice(index, 1);
+      }
+    },
+    clearKeepLive() {
+      this.keepLiveRoute = []
+    }
+  }
+})

package/src/os-themes/classic/store/modules/viewTags.js

@@ -0,0 +1,48 @@
+// import router from '@/router'
+import { defineStore } from 'pinia'
+
+export default defineStore('viewTags', {
+  state: () => ({
+    viewTags: []
+  }),
+  actions: {
+    pushViewTags(route) {
+      console.log('push view tags', route)
+      const backPathIndex = -1;// this.viewTags.findIndex(item => item.fullPath == router.options.history.state.back)
+      const target = this.viewTags.find((item) => item.fullPath === route.fullPath)
+      const isName = route.name
+      if (!target && isName) {
+        if (backPathIndex == -1) {
+          this.viewTags.push(route)
+        } else {
+          this.viewTags.splice(backPathIndex + 1, 0, route)
+        }
+      }
+    },
+    removeViewTags(route) {
+      this.viewTags.forEach((item, index) => {
+        if (item.fullPath === route.fullPath) {
+          this.viewTags.splice(index, 1)
+        }
+      })
+    },
+    updateViewTags(route) {
+      this.viewTags.forEach((item) => {
+        if (item.fullPath == route.fullPath) {
+          item = Object.assign(item, route)
+        }
+      })
+    },
+    updateViewTagsTitle(title = '') {
+      const nowFullPath = location.hash.substring(1)
+      this.viewTags.forEach((item) => {
+        if (item.fullPath == nowFullPath) {
+          item.meta.title = title
+        }
+      })
+    },
+    clearViewTags() {
+      this.viewTags = []
+    }
+  }
+})

package/src/os-themes/classic/style/app.scss

@@ -0,0 +1,318 @@
+/* 全局 */
+#app, body, html {width: 100%;height: 100%;background-color: #f6f8f9;font-size: 12px;}
+a {color: #333;text-decoration: none;}
+a:hover, a:focus {color: #000;text-decoration: none;}
+a:link {text-decoration: none;}
+a:-webkit-any-link {text-decoration: none;}
+a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: border-box;outline:none !important; -webkit-appearance: none;}
+* {margin: 0;padding: 0;box-sizing: border-box;outline: none;}
+
+/* 大布局样式 */
+.aminui {display: flex;flex-flow: column;}
+.aminui-wrapper {display: flex;flex:1;overflow: auto;}
+
+/* 全局滚动条样式 */
+.scrollable {-webkit-overflow-scrolling: touch;}
+::-webkit-scrollbar {width: 5px;height: 5px;}
+::-webkit-scrollbar-thumb {background-color: rgba(50, 50, 50, 0.3);}
+::-webkit-scrollbar-thumb:hover {background-color: rgba(50, 50, 50, 0.6);}
+::-webkit-scrollbar-track {background-color: rgba(50, 50, 50, 0.1);}
+::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
+
+/*布局设置*/
+.layout-setting {position: fixed;width: 40px;height: 40px;border-radius: 3px 0 0 3px;bottom: 100px;right: 0px;z-index: 100;background: #409EFF;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;}
+.layout-setting i {font-size: 18px;color: #fff;}
+
+/* 头部 */
+.adminui-header {height: 58px;background: var(--el-color-primary);color: #fff;display: flex;justify-content:space-between;}
+.adminui-header-left {display: flex;align-items: center;padding-left:20px;}
+.adminui-header-right {display: flex;align-items: center;}
+.adminui-header .logo-bar {font-size: 20px;font-weight: bold;display: flex;align-items: center;}
+.adminui-header .logo-bar .logo {
+  margin-right: 10px;
+  width: 35px;height: 35px;
+}
+.adminui-header .nav {display: flex;height: 100%;margin-left: 40px;}
+.adminui-header .nav li {
+  padding:0 12px;
+  margin: 2px 10px 0 0;
+  font-size: 16px;
+  color: var(--color-primary-lighter);
+  list-style: none;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 100%;
+  line-height: 30px;
+}
+.adminui-header .nav li i { margin-right: 5px; display: none; }
+.adminui-header .nav li:hover {color: #fff;}
+.adminui-header .nav li.active {
+  // background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.adminui-header .nav li :after {
+  content: " ";
+  display: block;
+  height: 2px;
+  border-radius: 2px;
+  background-color: transparent;
+  margin-top: 0;
+}
+
+.adminui-header .nav li.active :after {
+  background-color: #fff;
+}
+
+.adminui-header .user-bar .panel-item:hover {background: rgba(255, 255, 255, 0.1)!important;}
+.adminui-header .user-bar .user label{color: #fff;}
+
+/* 左侧菜单 */
+.aminui-side-split {width:65px;flex-shrink:0;background: #222b45;display: flex;flex-flow: column;}
+.aminui-side-split-top {height: 49px;}
+.aminui-side-split-top a {display: inline-block;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
+.aminui-side-split-top .logo {height:30px;vertical-align: bottom;}
+.adminui-side-split-scroll {overflow: auto;overflow-x:hidden;height: 100%;flex: 1;}
+.aminui-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+.aminui-side-split li i {font-size: 18px;}
+.aminui-side-split li p {margin-top:5px;}
+.aminui-side-split li:hover {background: rgba(255, 255, 255, 0.1);}
+.aminui-side-split li.active {background: #409EFF;}
+
+.adminui-side-split-scroll::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.4);border-radius:5px;}
+.adminui-side-split-scroll::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.5);}
+.adminui-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
+.adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
+
+.aminui-side {display: flex;flex-flow: column;flex-shrink:0;width:220px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;transition:width 0.3s;position: relative;}
+.adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
+.adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
+.adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
+.adminui-side-scroll .el-menu-item.is-active {
+	color: #303133;
+	background-color: #f2f3f5;
+}
+
+.adminui-side-scroll .el-menu-item:hover,
+.adminui-side-scroll .el-sub-menu__title:hover {
+	background-color: #f2f3f5 !important;
+}
+.adminui-side-bottom {border-top: 1px solid #ebeef5;height:51px;cursor: pointer;display: flex;align-items: center;justify-content: center;}
+.adminui-side-bottom i {font-size: 16px;}
+.adminui-side-bottom:hover {color: var(--el-color-primary);}
+
+.adminui-side-tree {
+	height: calc(100% - 55px);
+}
+.adminui-side-icon {
+	display: flex;
+	justify-content: center;
+	padding: 10px 0;
+
+	.bottom-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 35px;
+		height: 35px;
+		border-radius: 5px;
+		background-color: var(--el-color-primary);
+		cursor: pointer;
+	}
+}
+
+.right-line::after,
+.back-line::before {
+	content: '';
+	left: 0px;
+	top: 0;
+	height: 12px;
+	width: 1.5px;
+	border-radius: 1px;
+	background-color: #fff;
+}
+
+.right-line::after {
+	right: 0px;
+	top: 0;
+}
+
+.adminui-side-shrink {
+  position: absolute;
+	top: 50%;
+	right: -12px;
+	transform: translateY(-50%);
+  color: #387fff;
+  background-color: #fff;
+  font-size: 12px;
+  box-shadow: 3px 0px 3px 0px rgba(0, 66, 181, 0.36);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 10px 2px;
+	border-top-right-radius: 4px;
+	border-bottom-right-radius: 4px;
+  cursor: pointer;
+}
+
+.aminui-side.isCollapse {width: 65px;}
+.el-menu .menu-tag {position: absolute;height: 18px;line-height: 18px;background: var(--el-color-danger);font-size: 12px;color: #fff;right: 20px;border-radius:18px;padding:0 6px;}
+.el-menu .el-sub-menu__title .menu-tag {right: 40px;}
+.el-menu--horizontal > li .menu-tag {display: none;}
+
+/* 右侧内容 */
+.aminui-body {flex: 1;display: flex;flex-flow: column;}
+
+.adminui-topbar {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
+.adminui-topbar .left-panel {display: flex;align-items: center;}
+.adminui-topbar .right-panel {display: flex;align-items: center;}
+
+.right-panel-search {display: flex;align-items: center;}
+.right-panel-search > * + * {margin-left:10px;}
+
+.adminui-tags {
+	//height:35px;
+	//background: #fff;
+	border-bottom: 1px solid #e6e6e6;
+	position: relative;
+	box-sizing: border-box;
+	display: flex;
+	align-content: center;
+	align-items: center;
+	justify-content: space-between;
+	min-height: 50px;
+	padding-right: 20px;
+	padding-left: 40px;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	background: var(--el-color-white);
+	border-top: 1px solid #f6f6f6;
+}
+.adminui-tags ul {display: flex;overflow: hidden;}
+.adminui-tags li {
+	margin-top: 10px;
+	cursor: pointer;display: inline-block;float: left;height:38px;line-height: 38px;position: relative;flex-shrink: 0;
+	font-size: var(--el-menu-item-font-size);
+
+	height: 38px;
+	padding: 0 15px 0 15px;
+	//margin-top: 5.95px;
+	margin-right: -18px;
+	line-height: 38px;
+	text-align: center;
+	border: 0;
+	outline: none;
+	transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+}
+.adminui-tags li::after {content: " ";width:1px;height:100%;position: absolute;right:0px;background-image: linear-gradient(#fff, #e6e6e6);}
+.adminui-tags li a {display: inline-block;padding:0 10px;width:100%;height:100%;color: #999;text-decoration:none;display: flex;align-items: center;}
+.adminui-tags li i {margin-left:0px;border-radius: 3px;width:18px;height:18px;display: flex;align-items: center;justify-content: center;}
+//.adminui-tags li i:hover {background: rgba(0,0,0,.2);color: #fff;}
+.adminui-tags li:hover {
+	//background: #ecf5ff;
+	color: var(--el-color-black);
+	background: #dee1e6;
+	mask: url('../images/tabs_images/ark-tab.png');
+	mask-size: 100% 100%;
+}
+.adminui-tags li.active {
+	background: var(--el-color-primary-light-9) !important;
+	//padding: 0 30px 0 30px;
+	color: var(--el-color-black);
+	background: #dee1e6;
+	mask: url('../images/tabs_images/ark-tab.png');
+	mask-size: 100% 100%;
+}
+.adminui-tags li.active a {color: var(--el-color-primary) !important;}
+.adminui-tags li.sortable-ghost {opacity: 0;}
+.adminui-tags .ark-tabs-toggle {
+	position: absolute;
+	left: 15px;
+	top: 20px;
+	cursor: pointer;
+}
+
+.adminui-main {
+  padding: 0px 0px 0px 0px;
+  overflow: auto;
+  background-color: #f6f8f9;
+  flex: 1;
+}
+
+/*页面最大化*/
+.aminui.main-maximize {
+	.main-maximize-exit {display: block;}
+	.aminui-side-split, .aminui-side, .adminui-header, .adminui-topbar, .adminui-tags {display: none;}
+}
+.main-maximize-exit {display: none;position: fixed;z-index: 3000;top:-20px;left:50%;margin-left: -20px;border-radius: 50%;width: 40px;height: 40px;cursor: pointer;background: rgba(0,0,0,0.2);text-align: center;}
+.main-maximize-exit i {font-size: 14px;margin-top: 22px;color: #fff;}
+.main-maximize-exit:hover {background: rgba(0,0,0,0.4);}
+
+/*定宽页面*/
+.sc-page {width: 1230px;margin: 0 auto;}
+
+.layout-pd {
+	padding: 10px 10px 0 !important;
+}
+.layout-flex {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}
+// 用于界面高度自适应
+.layout-padding {
+	height: 100%;
+	@extend .layout-pd;
+	@extend .layout-flex;
+	&-auto {
+		height: inherit;
+		@extend .layout-flex;
+		padding: 10px;
+	}
+	&-view {
+		background: var(--el-color-white);
+		width: 100%;
+		height: 100%;
+		border-radius: 4px;
+		border: 1px solid var(--el-border-color-light, #ebeef5);
+		overflow: hidden;
+	}
+}
+
+.layout-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 10px;
+
+	.layout-toolbar-item,
+	.layout-toolbar-item {
+		display: flex;
+		align-items: center;
+
+		.el-form-item--default {
+			margin-bottom: 0
+		}
+	}
+}
+
+.mb8 {
+	text-align: left;
+	margin-bottom: 8px;
+}
+
+
+.el-pagination__editor {
+	margin-right: 8px;
+}
+
+.el-pagination {
+	margin-top: 15px;
+	justify-content: flex-end;
+}
+
+.splitpanes--vertical>.splitpanes__splitter {
+	min-width: 10px !important;
+}

package/src/os-themes/classic/style/dark.scss

@@ -0,0 +1,42 @@
+@import '~element-plus/theme-chalk/src/dark/css-vars.scss';
+
+html.dark {
+	//变量
+	--el-text-color-primary: #d0d0d0;
+	--el-color-primary-dark-2: var(--el-color-primary-light-2) !important;
+	--el-color-primary-light-9: var(--el-color-primary-dark-8) !important;
+	--el-color-primary-light-8: var(--el-color-primary-dark-7) !important;
+	--el-color-primary-light-7: var(--el-color-primary-dark-6) !important;
+	--el-color-primary-light-5: var(--el-color-primary-dark-4) !important;
+	--el-color-primary-light-3: var(--el-color-primary-dark-3) !important;
+
+	//背景
+	#app {background: var(--el-bg-color);}
+
+	//登录背景
+	.login_bg {background: var(--el-bg-color);}
+
+	//框架
+	.adminui-header {background: var(--el-bg-color-overlay);border-bottom: 1px solid var(--el-border-color-light);height:59px;}
+	.aminui-side-split {background: var(--el-bg-color);}
+	.aminui-side-split li {color: var(--el-text-color-primary);}
+	.aminui-side {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
+	.adminui-side-top, .adminui-side-bottom {border-color: var(--el-border-color-light);}
+	.adminui-side-top h2 {color: var(--el-text-color-primary);}
+	.adminui-topbar, .adminui-tags {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
+	.adminui-main {background: var(--el-bg-color);}
+	.drawerBG {background: var(--el-bg-color);}
+	.adminui-header-menu .el-menu {--el-menu-bg-color:var(--el-bg-color-overlay) !important;--el-menu-hover-bg-color: #171819 !important;}
+	.adminui-header-menu .el-menu .el-sub-menu__title {background-color:transparent !important;}
+
+	//全局滚动条样式
+	::-webkit-scrollbar-thumb {background-color: rgba(163, 166, 173, 0.3);}
+	::-webkit-scrollbar-thumb:hover {background-color: rgba(163, 166, 173, 0.5);}
+
+	//组件
+	.el-header, .el-main.nopadding, .el-footer {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
+	.el-main {background: var(--el-bg-color);}
+	.el-aside {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
+	.el-table .el-table__body-wrapper {background: var(--el-bg-color);}
+	.el-table th.is-sortable:hover {background: #111;}
+}