@arkxos/arkos-theme-classic 0.1.0

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

@@ -0,0 +1,87 @@
+/* 覆盖element-plus样式 */
+
+:root {
+	--el-color-primary: #3182F3;
+	--el-color-primary-light-1: #53a7ff;
+	--el-color-primary-light-2: #66b1ff;
+	--el-color-primary-light-3: #79bbff;
+	--el-color-primary-light-4: #8cc4ff;
+	--el-color-primary-light-5: #9fceff;
+	--el-color-primary-light-6: #b2d8ff;
+	--el-color-primary-light-7: #c5e1ff;
+	--el-color-primary-light-8: #d8ebff;
+	--el-color-primary-light-9: #ebf5ff;
+	--el-color-primary-dark-1: #398ee5;
+	--el-color-primary-dark-2: #337ecc;
+	--el-color-primary-dark-3: #2c6eb2;
+	--el-color-primary-dark-4: #265e99;
+	--el-color-primary-dark-5: #204f7f;
+	--el-color-primary-dark-6: #193f66;
+	--el-color-primary-dark-7: #132f4c;
+	--el-color-primary-dark-8: #0c1f32;
+	--el-color-primary-dark-9: #060f19;
+
+    --color-primary-lighter: rgba(193, 218, 251, 1);
+}
+
+.el-menu {border: none!important;}
+.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
+.el-form-item-msg {font-size: 12px;color: #999;clear: both;width: 100%;}
+.el-container {height: 100%;}
+.el-aside {border-right: 1px solid var(--el-border-color-light);}
+.el-container + .el-aside {border-right: 0;border-left: 1px solid var(--el-border-color-light);}
+/*
+.el-header {background: #fff;border-bottom: 1px solid var(--el-border-color-light);padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
+*/
+.el-header .left-panel {display: flex;align-items: center;}
+.el-header .right-panel {display: flex;align-items: center;}
+.el-header .right-panel > * + * {margin-left:10px;}
+/*.el-footer {background: #fff;border-top: 1px solid var(--el-border-color-light);padding:13px 15px;height: 51px;}*/
+.el-main {padding:15px;}
+.el-main.nopadding {padding:0;background: #fff;}
+.el-drawer__body {overflow: auto;padding:0;}
+.el-popconfirm__main {margin: 14px 0;}
+.el-card__header {border-bottom: 0;font-size: 17px;font-weight: bold;padding:15px 20px 0px 20px;}
+.el-dialog__title {font-size: 17px;font-weight: bold;}
+.el-drawer__header>:first-child {font-size: 17px;font-weight: bold;}
+.el-tree.menu .el-tree-node__content {height:36px;}
+.el-tree.menu .el-tree-node__content .el-tree-node__label .icon {margin-right: 5px;}
+.el-progress__text {font-size: 12px!important;}
+.el-progress__text i {font-size: 14.4px!important;}
+.el-step.is-horizontal .el-step__line {height:1px;}
+.el-step__title {font-size: 14px;}
+.drawerBG {background: #f6f8f9;}
+.el-button+.el-dropdown {margin-left: 10px;}
+.el-button-group+.el-dropdown {margin-left: 10px;}
+.el-tag+.el-tag {margin-left: 10px;}
+.el-button-group+.el-button-group {margin-left: 10px;}
+.el-tabs__nav-wrap::after {height: 1px;}
+.el-table th.is-sortable {transition: .1s;}
+.el-table th.is-sortable:hover {background: #eee;}
+.el-table .el-table__body-wrapper {background: #f6f8f9;}
+.el-col .el-card {margin-bottom: 15px;}
+.el-main {flex-basis: 100%;}
+.el-main > .scTable .el-table--border::before {display: none;}
+.el-main > .scTable .el-table--border::after {display: none;}
+.el-main > .scTable .el-table--border .el-table__inner-wrapper::after {display: none;}
+.el-main > .scTable .el-table__border-left-patch {display: none;}
+.el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child td:first-child {border-left: 0;}
+.el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child th:first-child {border-left: 0;}
+.el-table.el-table--large {font-size: 14px;}
+.el-table.el-table--small {font-size: 12px;}
+.el-table {font-size: 12px;}
+.el-radio-button__inner {font-size: 12px;}
+.el-checkbox-button__inner {font-size: 12px;}
+.el-sub-menu .el-icon {font-size: 17px;}
+.el-sub-menu .el-sub-menu__icon-arrow {font-size: 12px;}
+
+.aminui-side-split li.active {background-color: var(--el-color-primary);}
+//.adminui-tags li:hover {background-color: var(--el-color-primary-light-9);}
+.adminui-tags li.active {background-color: var(--el-color-primary-light-9)!important;}
+.contextmenu li:hover {background-color: var(--el-color-primary-light-9)!important;color: var(--el-color-primary-light-2)!important;}
+.data-box .item-background {background-color: var(--el-color-primary)!important;}
+.layout-setting,.diy-grid-setting {background-color: var(--el-color-primary)!important;}
+
+/* 覆盖tinymce样式 */
+.sceditor .tox-tinymce {border: 1px solid #DCDFE6;border-radius: 0;}
+body .tox-tinymce-aux {z-index: 5700;}

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

@@ -0,0 +1,52 @@
+@media (max-width: 992px){
+	// 移动端样式覆盖
+	.el-form-item {display: block;}
+	.el-form-item__label {display: block;text-align: left;padding: 0 0 10px;}
+	.el-dialog {width: 90%!important;}
+	.el-dialog.is-fullscreen {width: 100%!important;}
+	.el-drawer.rtl {width: 90%!important;}
+	.el-form-item__content {margin-left: 0px!important;}
+
+	.adminui-main {
+        /*padding: 5px 5px 0px 5px;*/
+        padding: 0px 0px 0px 0px;
+		>.el-container {display: block;height:auto;}
+		>.el-container > .el-aside {width: 100%!important;border: 0}
+	}
+	.scTable {
+		.el-table,
+		.el-table__body-wrapper {display: block!important;height:auto!important;}
+		.el-scrollbar__wrap {height:auto!important;}
+		.scTable-page {padding: 0 5px!important;}
+		.el-pagination__total,
+		.el-pagination__jump,
+		.el-pagination__sizes {display: none!important;}
+	}
+
+	.headerPublic {
+		height: auto!important;display: block;
+		.left-panel {overflow: auto;}
+		.left-panel::-webkit-scrollbar{display: none;}
+		.right-panel {display: block;border-top: 1px solid var(--el-border-color-light);margin-top: 15px;}
+		.right-panel .right-panel-search {display: block;}
+		.right-panel .right-panel-search >* {width: 100%;margin: 0;margin-top: 15px;}
+	}
+	.adminui-main > .el-container >*:first-child:not(.el-aside):not(.el-header) {border: 0;margin-top: 0;}
+	.adminui-main > .el-container >*:first-child:not(.el-aside):not(.el-header) + .el-aside {margin-top: 0;}
+	.adminui-main > .el-container > .el-aside {border-bottom: 1px solid var(--el-border-color-light)!important;}
+	.adminui-main > .el-container > .el-container {border-top: 1px solid var(--el-border-color-light);border-bottom: 1px solid var(--el-border-color-light);margin-top: 15px;}
+	.adminui-main > .el-container > .el-container + .el-aside {border-top: 1px solid var(--el-border-color-light);margin-top: 15px;}
+	.adminui-main > .el-container > .el-header {@extend .headerPublic;}
+	.adminui-main > .el-container > .el-main.nopadding {border-top: 1px solid var(--el-border-color-light);border-bottom: 1px solid var(--el-border-color-light);margin-top: 15px;}
+	.adminui-main > .el-container > .el-main + .el-aside {border-left: 0!important;border-top: 1px solid var(--el-border-color-light);margin-top: 15px;}
+	.adminui-main > .el-container > .el-footer {margin-top: 15px;border-bottom: 1px solid var(--el-border-color-light);}
+	.adminui-main > .el-container > .el-container > .el-header {@extend .headerPublic}
+	.adminui-main > .el-container > .el-container > .el-header .left-panel {display: block;}
+	.adminui-main > .el-container > .el-container > .el-header .right-panel {display: block;margin-top: 15px;}
+
+	.sc-page {width: 100%;margin: 0;}
+
+	.common-main .el-form {width: 100% !important;}
+	.common-header-logo label {display: none;}
+	.common-header-title {display: none;}
+}

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

@@ -0,0 +1,46 @@
+/* USERCENTER */
+.page-user {
+	.user-info-top {text-align: center;}
+	.user-info-top h2 {font-size: 18px;margin-top: 5px;}
+	.user-info-top p {margin: 8px 0 10px 0;}
+	.menu {background: none;}
+	.menu .el-menu-item {font-size: 12px;--el-menu-item-height:50px;}
+	.menu .el-menu-item-group {border-top: 1px solid var(--el-border-color-light);}
+	.menu .el-menu-item-group:first-child {border: 0;}
+}
+
+/*static-table*/
+.static-table {border-collapse: collapse;width: 100%;font-size: 14px;margin-bottom: 45px;line-height: 1.5em;}
+.static-table th {text-align: left;white-space: nowrap;color: #909399;font-weight: 400;border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;}
+.static-table td {border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;color: #606266;}
+
+/*header-tabs*/
+.header-tabs {padding:10px 0 0 0;display:block;border:0!important;height:50px;background: none;}
+.header-tabs .el-tabs__header {padding-left:10px;margin: 0;}
+.header-tabs .el-tabs__content {display: none;}
+.header-tabs .el-tabs__nav {border-radius: 0 !important;}
+.header-tabs .el-tabs__item {font-size: 13px;}
+.header-tabs .el-tabs__item.is-active {
+	background-color: var(--el-bg-color-overlay);
+}
+
+/*common-page*/
+.common-page {}
+.common-header-left {display: flex;align-items: center;}
+.common-header-logo {display: flex;align-items: center;}
+.common-header-logo img {height:30px;margin-right: 10px;vertical-align: bottom;}
+.common-header-logo label {font-size: 20px;}
+.common-header-title {font-size: 16px;border-left: 1px solid var(--el-border-color-light);margin-left: 15px;padding-left: 15px;}
+.common-header-right {display: flex;align-items: center;}
+.common-header-right a {font-size: 14px;color: var(--el-color-primary);cursor: pointer;}
+.common-header-right a:hover {color: var(--el-color-primary-light-3);}
+.common-container {max-width: 1240px;margin:30px auto 30px auto;}
+.common-main {padding:20px;}
+.common-title {font-size: 26px;margin-bottom: 20px;font-weight: normal;}
+.common-main .el-form {width: 500px;margin:30px auto;}
+.common-main .el-steps .el-step__title {font-size: 14px;}
+.common-main .el-steps .el-step__icon {border: 1px solid;}
+.common-main .yzm {display: flex;width: 100%;}
+.common-main .yzm .el-button {margin-left: 10px;}
+.common-main .link {color: var(--el-color-primary);cursor: pointer;}
+.common-main .link:hover {color: var(--el-color-primary-light-3);}

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

@@ -0,0 +1,5 @@
+@import './app';
+@import './fix';
+@import './pages';
+@import './media';
+@import './dark';

package/src/os-themes/classic/utils/useTabs.js

@@ -0,0 +1,66 @@
+import { nextTick } from 'vue'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import { router } from '@arkxos/arkos-core'
+import viewTagsStore from '../store/modules/viewTags';
+import iframeStore from '../store/modules/iframe';
+import keepAliveStore from '../store/modules/keepAlive';
+
+export default {
+  // 刷新标签
+  refresh() {
+    NProgress.start()
+    const route = router.currentRoute.value
+
+    keepAliveStore().removeKeepLive(route.name)
+    keepAliveStore().routeShow = false
+
+    nextTick(() => {
+      keepAliveStore().pushKeepLive(route.name)
+      keepAliveStore().routeShow = true
+      NProgress.done()
+    })
+  },
+  // 关闭标签
+  close(tag) {
+    const route = tag || router.currentRoute.value
+    viewTagsStore().removeViewTags(route)
+    iframeStore().removeIframeList(route)
+    keepAliveStore().removeKeepLive(route.name)
+
+    const tagList = viewTagsStore().viewTags
+    const latestView = tagList.slice(-1)[0]
+    if (latestView) {
+      router.push(latestView)
+    } else {
+      router.push('/')
+    }
+  },
+  // 关闭标签后处理
+  closeNext(next) {
+    const route = router.currentRoute.value
+    viewTagsStore().removeViewTags(route)
+    iframeStore().removeIframeList(route)
+    keepAliveStore().removeKeepLive(route.name)
+    if (next) {
+      const tagList = viewTagsStore().viewTags
+      next(tagList)
+    }
+  },
+  // 关闭其他
+  closeOther() {
+    const route = router.currentRoute.value
+    const tagList = [...viewTagsStore().viewTags]
+    tagList.forEach(tag => {
+      if (tag.meta && tag.meta.affix || route.fullPath == tag.fullPath) {
+        return true
+      } else {
+        this.close(tag)
+      }
+    })
+  },
+  // 设置标题
+  setTitle(title) {
+    viewTagsStore().updateViewTagsTitle(title)
+  }
+}

package/src/os-themes/classic/views/error/401.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="errPage-container">
+    <el-button icon="arrow-left" class="pan-back-btn" @click="back">
+      返回
+    </el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">
+          401错误!
+        </h1>
+        <h2>您没有访问权限！</h2>
+        <h6>对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面</h6>
+        <ul class="list-unstyled">
+          <li class="link-type">
+            <router-link to="/">
+              回首页
+            </router-link>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import errImage from '../../assets/401_images/401.gif';
+
+const { proxy } = getCurrentInstance();
+
+const errGif = ref(errImage + '?' + +new Date());
+
+function back() {
+  if (proxy.$route.query.noGoBack) {
+    proxy.$router.push({ path: '/' });
+  } else {
+    proxy.$router.go(-1);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.errPage-container {
+  width: 800px;
+  max-width: 100%;
+  margin: 100px auto;
+  .pan-back-btn {
+    background: #008489;
+    color: #fff;
+    border: none !important;
+  }
+  .pan-gif {
+    margin: 0 auto;
+    display: block;
+  }
+  .pan-img {
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+  }
+  .text-jumbo {
+    font-size: 60px;
+    font-weight: 700;
+    color: #484848;
+  }
+  .list-unstyled {
+    font-size: 14px;
+    li {
+      padding-bottom: 5px;
+    }
+    a {
+      color: #008489;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

package/src/os-themes/classic/views/error/404.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="../../assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="../../assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="../../assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="../../assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">
+          404错误!
+        </div>
+        <div class="bullshit__headline">
+          {{ message }}
+        </div>
+        <div class="bullshit__info">
+          对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
+        </div>
+        <router-link to="/index" class="bullshit__return-home">
+          返回首页
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import { computed } from 'vue'
+
+const message = computed(() => {
+  return '找不到网页！'
+})
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

package/src/os-themes/classic/views/home.vue

@@ -0,0 +1,13 @@
+<template>
+  <img src="bg.png" alt class="home-bg">
+</template>
+
+<style>
+.home-bg {
+  width: 340px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

package/src/os-themes/classic/views/login/components/commonPage.vue

@@ -0,0 +1,35 @@
+<template>
+	<el-container>
+		<el-header style="height:50px;">
+			<div class="common-header-left">
+				<div class="common-header-logo">
+					<img :alt="$CONFIG.ArkosTitle" src="img/logo.png">
+					<label>{{$CONFIG.ArkosTitle}}</label>
+				</div>
+				<div class="common-header-title">{{title}}</div>
+			</div>
+			<div class="common-header-right">
+				<router-link to="/login">返回登录</router-link>
+			</div>
+		</el-header>
+		<el-main>
+			<div class="common-container">
+				<h2 class="common-title">{{title}}</h2>
+				<div class="common-main el-card">
+					<slot></slot>
+				</div>
+			</div>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+export default {
+  props: {
+    title: { type: String, default: '' }
+  }
+}
+</script>
+
+<style>
+</style>