@arkxos/arkos-theme-classic 0.1.0

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

@@ -0,0 +1,476 @@
+<template>
+	<div class="adminui-tags">
+    <div v-if="layout !== 'dock'" class="ark-tabs-toggle" @click="toggleMenuIs">
+			<el-icon v-if="menuIsCollapse" class="right-line" size="18" color="#3182f3"><Right /></el-icon>
+			<el-icon v-else class="back-line" size="18" color="#3182f3"><Back /></el-icon>
+    </div>
+		<ul ref="tags" class="ark-tabs-content">
+			<li v-for="tag in tagList" v-bind:key="tag" :class="[isActive(tag)?'active':'',tag.meta?.affix?'affix':'' ]" @contextmenu.prevent="openContextMenu($event, tag)">
+
+     <router-link :to="tag">
+				<!-- <el-icon v-if="tag.meta && tag.meta.icon"><component :is="tag.meta.icon || 'el-icon-menu'"/></el-icon> -->
+				<span>{{ tag.meta.title }}</span>
+				  <el-icon class="tags-close" v-if="!tag.meta.affix && isActive(tag)" @click.prevent.stop='closeSelectedTag(tag)'>
+            <el-icon-close/>
+          </el-icon>
+				</router-link>
+			</li>
+		</ul>
+
+		<el-dropdown
+			placement="bottom-end"
+			popper-class="vab-tabs-more-dropdown"
+			@command="handleCommand"
+		>
+		  <span class="vab-tabs-more" :class="{ 'vab-tabs-more-active': active }">
+			<span class="vab-tabs-more-icon">
+			  <i class="box box-t"></i>
+			  <i class="box box-b"></i>
+			</span>
+		  </span>
+		  <template #dropdown>
+			<el-dropdown-menu class="tabs-more">
+				<el-dropdown-item command="refreshTab">
+				  <el-icon><el-icon-refresh/></el-icon>
+				  <span>刷新</span>
+				</el-dropdown-item>
+<!--				<el-dropdown-item command="closeTabs" v-show="!(contextMenuItem && contextMenuItem.meta && contextMenuItem.meta.affix)" :class="contextMenuItem.meta.affix?'disabled':''">-->
+<!--					<el-icon><el-icon-close/></el-icon>-->
+<!--					<span>关闭标签</span>-->
+<!--				</el-dropdown-item>-->
+				<el-dropdown-item command="closeOtherTabs">
+					<el-icon><el-icon-folder-delete/></el-icon>
+					<span>关闭其他标签</span>
+				</el-dropdown-item>
+				<el-dropdown-item command="maximize">
+					<el-icon><el-icon-full-screen/></el-icon>
+					<span>最大化</span>
+				</el-dropdown-item>
+				<el-dropdown-item command="openWindow">
+					<el-icon><el-icon-copy-document/></el-icon>
+					<span>在新的窗口中打开</span>
+				</el-dropdown-item>
+			</el-dropdown-menu>
+		  </template>
+		</el-dropdown>
+	</div>
+
+	<transition name="el-zoom-in-top">
+		<ul v-if="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" id="contextmenu">
+			<li @click="refreshTab()"><el-icon><el-icon-refresh/></el-icon>刷新</li>
+			<hr>
+			<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''"><el-icon><el-icon-close/></el-icon>关闭标签</li>
+			<li @click="closeOtherTabs()"><el-icon><el-icon-folder-delete/></el-icon>关闭其他标签</li>
+			<hr>
+			<li @click="maximize()"><el-icon><el-icon-full-screen/></el-icon>最大化</li>
+			<li @click="openWindow()"><el-icon><el-icon-copy-document/></el-icon>在新的窗口中打开</li>
+		</ul>
+	</transition>
+</template>
+
+<script setup>
+import { Right, Back } from '@element-plus/icons-vue'
+</script>
+
+<script>
+import Sortable from 'sortablejs'
+import viewTagsStore from '../../store/modules/viewTags';
+import keepAliveStore from '../../store/modules/keepAlive';
+import iframeStore from '../../store/modules/iframe';
+import globalStore from '../../store/modules/global';
+
+const _viewTagsStore = viewTagsStore()
+
+export default {
+  name: 'tags',
+  data() {
+    return {
+      contextMenuVisible: false,
+      contextMenuItem: null,
+      left: 0,
+      top: 0,
+      tagList: _viewTagsStore.viewTags,
+      tipDisplayed: false
+    }
+  },
+  props: {},
+  computed: {
+    menuIsCollapse() {
+      const global = globalStore()
+      return global.menuIsCollapse
+    },
+    layout() {
+      const global = globalStore()
+      return global.layout
+    }
+  },
+  watch: {
+    $route(e) {
+      this.addViewTags(e);
+      console.log('contextMenuItem', this.contextMenuItem)
+      // 判断标签容器是否出现滚动条
+      this.$nextTick(() => {
+        const tags = this.$refs.tags
+        if (tags && tags.scrollWidth > tags.clientWidth) {
+          // 确保当前标签在可视范围内
+          const targetTag = tags.querySelector('.active')
+          targetTag.scrollIntoView()
+          // 显示提示
+          if (!this.tipDisplayed) {
+            this.$msgbox({
+              type: 'warning',
+              center: true,
+              title: '提示',
+              message: '当前标签数量过多，可通过鼠标滚轴滚动标签栏。关闭标签数量可减少系统性能消耗。',
+              confirmButtonText: '知道了'
+            })
+            this.tipDisplayed = true
+          }
+        }
+      })
+    },
+    contextMenuVisible(value) {
+      const cm = (e) => {
+        const sp = document.getElementById('contextmenu');
+        if (sp && !sp.contains(e.target)) {
+          this.closeMenu()
+        }
+      }
+      if (value) {
+        document.body.addEventListener('click', e => cm(e))
+      } else {
+        document.body.removeEventListener('click', e => cm(e))
+      }
+    }
+  },
+  created() {
+    // var menu = this.$router.sc_getMenu()
+    const systemStore = this.$pinia._s.get('system');
+    console.log('systemStore.menus', systemStore.menus)
+    const menu = systemStore.menus
+    const dashboardRoute = this.treeFind(menu, node => node.path == this.$CONFIG.DASHBOARD_URL)
+    if (dashboardRoute) {
+      // dashboardRoute.fullPath = dashboardRoute.path
+      this.addViewTags(dashboardRoute)
+      this.addViewTags(this.$route)
+    }
+  },
+  mounted() {
+    this.tagDrop();
+    this.scrollInit()
+  },
+  methods: {
+    // 查找树
+    treeFind(tree, func) {
+      for (const data of tree) {
+        if (func(data)) return data
+        if (data.children) {
+          const res = this.treeFind(data.children, func)
+          if (res) return res
+        }
+      }
+      return null
+    },
+    // 标签拖拽排序
+    tagDrop() {
+      const target = this.$refs.tags
+      Sortable.create(target, {
+        draggable: 'li',
+        animation: 300
+      })
+    },
+    // 增加tag
+    addViewTags(route) {
+      if (route.name && !(route.meta && route.meta.fullpage)) {
+        this.contextMenuItem = route
+        viewTagsStore().pushViewTags(route)
+        keepAliveStore().pushKeepLive(route.name)
+      }
+    },
+    // 高亮tag
+    isActive(route) {
+      return route.fullPath === this.$route.fullPath
+    },
+    // 关闭tag
+    closeSelectedTag(tag, autoPushLatestView = true) {
+      const nowTagIndex = this.tagList.findIndex(item => item.fullPath == tag.fullPath)
+      viewTagsStore().removeViewTags(tag)
+      iframeStore().removeIframeList(tag)
+      keepAliveStore().removeKeepLive(tag.name)
+      if (autoPushLatestView && this.isActive(tag)) {
+        const leftView = this.tagList[nowTagIndex - 1]
+        if (leftView) {
+          this.$router.push(leftView)
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    // tag右键
+    openContextMenu(e, tag) {
+      this.contextMenuItem = tag;
+      this.contextMenuVisible = true;
+      this.left = e.clientX + 1;
+      this.top = e.clientY + 1;
+
+      // FIX 右键菜单边缘化位置处理
+      this.$nextTick(() => {
+        const sp = document.getElementById('contextmenu');
+        if (document.body.offsetWidth - e.clientX < sp.offsetWidth) {
+          this.left = document.body.offsetWidth - sp.offsetWidth + 1;
+          this.top = e.clientY + 1;
+        }
+      })
+    },
+    // 关闭右键菜单
+    closeMenu() {
+      this.contextMenuItem = null;
+      this.contextMenuVisible = false
+    },
+    // TAB 刷新
+    refreshTab() {
+      this.contextMenuVisible = false
+      const nowTag = this.contextMenuItem;
+      // 判断是否当前路由，否的话跳转
+      if (this.$route.fullPath !== nowTag.fullPath) {
+        this.$router.push({
+          path: nowTag.fullPath,
+          query: nowTag.query
+        })
+      }
+
+      iframeStore().refreshIframe(nowTag)
+
+      setTimeout(() => {
+        keepAliveStore().removeKeepLive(nowTag.name)
+
+        keepAliveStore().routeShow = false
+        this.$nextTick(() => {
+          keepAliveStore().pushKeepLive(nowTag.name)
+          keepAliveStore().routeShow = true
+        })
+      }, 0);
+    },
+    // TAB 关闭
+    closeTabs() {
+      const nowTag = this.contextMenuItem;
+      if (!nowTag.meta.affix) {
+        this.closeSelectedTag(nowTag)
+        this.contextMenuVisible = false
+      }
+    },
+    // TAB 关闭其他
+    closeOtherTabs() {
+      const nowTag = this.contextMenuItem;
+      // 判断是否当前路由，否的话跳转
+      if (this.$route.fullPath != nowTag.fullPath) {
+        this.$router.push({
+          path: nowTag.fullPath,
+          query: nowTag.query
+        })
+      }
+      const tags = [...this.tagList];
+      tags.forEach(tag => {
+        if ((tag.meta && tag.meta.affix) || nowTag.fullPath == tag.fullPath) {
+          return true
+        } else {
+          this.closeSelectedTag(tag, false)
+        }
+      })
+      this.contextMenuVisible = false
+    },
+    // TAB 最大化
+    maximize() {
+      const nowTag = this.contextMenuItem;
+      this.contextMenuVisible = false
+      // 判断是否当前路由，否的话跳转
+      if (this.$route.fullPath != nowTag.fullPath) {
+        this.$router.push({
+          path: nowTag.fullPath,
+          query: nowTag.query
+        })
+      }
+      document.getElementById('app').classList.add('main-maximize')
+    },
+    // 新窗口打开
+    openWindow() {
+      const nowTag = this.contextMenuItem;
+      const url = nowTag.href || '/';
+      if (!nowTag.meta.affix) {
+        this.closeSelectedTag(nowTag)
+      }
+      window.open(url);
+      this.contextMenuVisible = false
+    },
+    // 横向滚动
+    scrollInit() {
+      const scrollDiv = this.$refs.tags;
+      scrollDiv.addEventListener('mousewheel', handler, false) || scrollDiv.addEventListener('DOMMouseScroll', handler, false)
+      function handler(event) {
+        const detail = event.wheelDelta || event.detail;
+        // 火狐上滚键值-3 下滚键值3，其他内核上滚键值120 下滚键值-120
+        const moveForwardStep = 1;
+        const moveBackStep = -1;
+        let step = 0;
+        if (detail == 3 || (detail < 0 && detail != -3)) {
+          step = moveForwardStep * 50;
+        } else {
+          step = moveBackStep * 50;
+        }
+        scrollDiv.scrollLeft += step;
+      }
+    },
+    handleCommand(command) {
+      // refreshTab closeTabs closeOtherTabs maximize openWindow
+      switch (command) {
+        case 'refreshTab':
+          this.refreshTab()
+          break
+        case 'closeTabs':
+          this.closeTabs()
+          break
+        case 'closeOtherTabs':
+          this.closeOtherTabs()
+          break
+        case 'maximize':
+          this.maximize()
+          break
+        case 'openWindow':
+          this.openWindow()
+          break
+      }
+    },
+    toggleMenuIs() {
+      globalStore().toggleMenuIsCollapse()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contextmenu {
+	position: fixed;
+	width: 200px;
+	margin:0;
+	border-radius: 0px;
+	background: var(--el-bg-color-overlay);
+	border: 1px solid var(--el-border-color-light);
+	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+	z-index: 3000;
+	list-style-type: none;
+	padding: 10px 0;
+}
+.contextmenu hr {
+		margin:5px 0;
+		border: none;
+		height: 1px;
+		font-size: 0px;
+		background-color: var(--el-border-color-light);
+}
+.contextmenu li {
+		display: flex;
+		align-items: center;
+		margin:0;
+		cursor: pointer;
+		line-height: 30px;
+		padding: 0 17px;
+		color: #606266;
+}
+.contextmenu li i {
+	font-size: 14px;
+	margin-right: 10px;
+}
+.contextmenu li:hover {
+	background-color: #ecf5ff;
+	color: #66b1ff;
+}
+.contextmenu li.disabled {
+	cursor: not-allowed;
+	color: #bbb;
+	background: transparent;
+}
+.tags-tip {padding:5px;}
+.tags-tip p {margin-bottom: 10px;}
+.dark .contextmenu li {color: var(--el-text-color-primary);}
+.ark-tabs-content {
+	width: calc(100% - 40px);
+}
+.vab-tabs-more {
+	position: relative;
+	box-sizing: border-box;
+	display: block;
+	text-align: left;
+}
+.vab-tabs-more-icon {
+	display: inline-block;
+	color: #9a9a9a;
+	cursor: pointer;
+	transition: transform 0.3s ease-out;
+}
+.vab-tabs-more-icon .box {
+	position: relative;
+	display: block;
+	width: 14px;
+	height: 8px;
+}
+.vab-tabs-more-icon .box-t:before {
+	transition: transform 0.3s ease-out 0.3s;
+}
+.vab-tabs-more-icon .box:before {
+	position: absolute;
+	top: 2px;
+	left: 0;
+	width: 6px;
+	height: 6px;
+	content: "";
+	background: #9a9a9a;
+}
+.vab-tabs-more-icon .box:after {
+	position: absolute;
+	top: 2px;
+	left: 8px;
+	width: 6px;
+	height: 6px;
+	content: "";
+	background: #9a9a9a;
+}
+.vab-tabs-more-icon .box:before {
+	 position: absolute;
+	 top: 2px;
+	 left: 0;
+	 width: 6px;
+	 height: 6px;
+	 content: "";
+	 background: #9a9a9a;
+ }
+.vab-tabs-more-icon .box:after {
+	position: absolute;
+	top: 2px;
+	left: 8px;
+	width: 6px;
+	height: 6px;
+	content: "";
+	background: #9a9a9a;
+}
+
+.tags-close {
+  margin-left: 5px;
+  border-radius: 50%;
+  overflow: hidden;
+
+  &:hover {
+    background-color: var(--el-color-primary);
+    color: #fff;
+  }
+}
+
+:deep(.el-dropdown-menu__item) {
+  flex-direction: row !important;
+  align-items: center;
+}
+
+.right-line::after,
+.back-line::before {
+	background-color: #3182f3;
+}
+</style>

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

@@ -0,0 +1,83 @@
+<template>
+	<el-container v-loading="loading">
+		<el-main>
+			<el-empty v-if="tasks.length==0" :image-size="120" >
+				<template #description>
+					<h2>没有正在执行的任务</h2>
+				</template>
+				<p style="font-size: 14px;color: #999;line-height: 1.5;margin: 0 40px;">在处理耗时过久的任务时为了不阻碍正在处理的工作，可在任务中心进行异步执行。</p>
+			</el-empty>
+			<el-card v-for="task in tasks" :key="task.id" shadow="hover" class="user-bar-tasks-item">
+				<div class="user-bar-tasks-item-body">
+					<div class="taskIcon">
+						<el-icon v-if="task.type=='export'" :size="20"><el-icon-paperclip /></el-icon>
+						<el-icon v-if="task.type=='report'" :size="20"><el-icon-dataAnalysis /></el-icon>
+					</div>
+					<div class="taskMain">
+						<div class="title">
+							<h2>{{ task.taskName }}</h2>
+							<p><span v-time.tip="task.createDate"></span> 创建</p>
+						</div>
+						<div class="bottom">
+							<div class="state">
+								<el-tag type="info" v-if="task.state=='0'">执行中</el-tag>
+								<el-tag v-if="task.state=='1'">完成</el-tag>
+							</div>
+							<div class="handler">
+								<el-button v-if="task.state=='1'" type="primary" circle icon="el-icon-download" @click="download(task)"></el-button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</el-card>
+		</el-main>
+		<el-footer style="padding:10px;text-align: right;">
+			<el-button circle icon="el-icon-refresh" @click="refresh"></el-button>
+		</el-footer>
+	</el-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      tasks: []
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    async getData() {
+      this.loading = true
+      const res = await this.$API.system.tasks.list.get()
+      this.tasks = res.data
+      this.loading = false
+    },
+    refresh() {
+      this.getData()
+    },
+    download(row) {
+      const a = document.createElement('a')
+      a.style = 'display: none'
+      a.target = '_blank'
+      a.href = row.result
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.user-bar-tasks-item {margin-bottom: 10px;}
+	.user-bar-tasks-item:hover {border-color: var(--el-color-primary);}
+	.user-bar-tasks-item-body {display: flex;}
+	.user-bar-tasks-item-body .taskIcon {width: 45px;height: 45px;background: var(--el-color-primary-light-9);margin-right: 20px;display: flex;justify-content:center;align-items: center;color: var(--el-color-primary);border-radius:20px;}
+	.user-bar-tasks-item-body .taskMain {flex: 1;}
+	.user-bar-tasks-item-body .title h2 {font-size: 15px;}
+	.user-bar-tasks-item-body .title p {font-size: 12px;color: #999;margin-top: 5px;}
+	.user-bar-tasks-item-body .bottom {display: flex;justify-content: space-between;align-items: center;padding-top: 20px;}
+</style>

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

@@ -0,0 +1,49 @@
+<template>
+	<div class="adminui-topbar">
+		<div class="left-panel">
+			<el-breadcrumb separator-icon="el-icon-arrow-right" class="hidden-sm-and-down">
+				<transition-group name="breadcrumb">
+					<template v-for="item in breadList" :key="item.title" >
+						<el-breadcrumb-item v-if="item.path!='/' &&  !item.meta.hiddenBreadcrumb" :key="item.meta.title"><el-icon class="icon" v-if="item.meta.icon"><component :is="item.meta.icon" /></el-icon>{{item.meta.title}}</el-breadcrumb-item>
+					</template>
+				</transition-group>
+			</el-breadcrumb>
+		</div>
+		<div class="center-panel"></div>
+		<div class="right-panel">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      breadList: []
+    }
+  },
+  created() {
+    this.getBreadcrumb();
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb();
+    }
+  },
+  methods: {
+    getBreadcrumb() {
+      const matched = this.$route.meta.breadcrumb;
+      this.breadList = matched;
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.el-breadcrumb {margin-left: 15px;}
+	.el-breadcrumb .el-breadcrumb__inner .icon {font-size: 14px;margin-right: 5px;float: left;}
+	.breadcrumb-enter-active,.breadcrumb-leave-active {transition: all 0.3s;}
+	.breadcrumb-enter-from,.breadcrumb-leave-active {opacity: 0;transform: translateX(20px);}
+	.breadcrumb-leave-active {position: absolute;}
+</style>