@arkxos/arkos-system 0.1.0

package/src/business/home/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="business-page-container"
+    v-loading="loading"
+    element-loading-text="数据加载中..."
+  >
+    <codeless-page
+      v-if="pageInfo.type === '普通' || pageInfo.type === '标签'"
+      :pageInfo="pageInfo"
+    />
+    <visual-page
+      v-if="pageInfo.type === '可视化'"
+      :pageInfo="pageInfo"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, provide } from 'vue';
+import CodelessPage from '@/codeless/view/page.vue';
+import VisualPage from '@/visual/view/page.vue';
+import { getPage } from '@/utils/codeless';
+
+const hash = window.location.hash;
+const path = hash.split('/');
+const menuId = ref(path[2]);
+const pageId = ref(path[3]);
+const loading = ref(true);
+const pageInfo = ref({});
+provide('menuId', menuId);
+
+onMounted(async() => {
+  loading.value = true;
+  pageInfo.value = await getPage(pageId.value);
+  loading.value = false;
+});
+</script>
+
+<style scoped>
+.business-page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/business/iframe/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="business-page-container"
+    v-loading="loading"
+    element-loading-text="数据加载中..."
+  >
+    <iframe
+      v-if="!loading && url"
+      :src="url"
+      style="border: none; box-shadow: none;"
+      allowtransparency="yes"
+      width="100%"
+      height="100%"
+    ></iframe>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useRouterStore } from '@/business/pinia/router';
+import api from '@/http/api';
+import { ElMessage } from 'element-plus';
+
+const loading = ref(true);
+const route = useRoute();
+const routerStore = useRouterStore();
+const url = ref('');
+
+onMounted(async() => {
+  loading.value = true;
+
+  try {
+    const routeData = routerStore.getRouteData(route.name);
+    const data = routeData?.data || {};
+    if (data.linkSource === '1') {
+      url.value = data.linkUrl;
+    } else if (data.linkSource === '2') {
+      if (data.linkScriptId) {
+        const res = await api.runScript(data.linkScriptId);
+        url.value = res.data;
+      }
+    }
+
+    if (!url.value) {
+      ElMessage.error('未配置外链地址！');
+      return false;
+    }
+  } catch (e) {
+    loading.value = false;
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<style scoped>
+.business-page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/business/layout/aside/history/history.vue

@@ -0,0 +1,518 @@
+<template>
+  <div class="router-history">
+    <div class="history-box">
+      <div class="history-left">
+        <el-tabs
+          v-model="activeValue"
+          :closable="historyList.length !== 1"
+          type="card"
+          @contextmenu.prevent="openContextMenu($event)"
+          @tab-change="changeTab"
+          @tab-remove="removeTab"
+        >
+          <el-tab-pane
+            v-for="item in historyList"
+            :key="name(item)"
+            :label="item.meta.title"
+            :name="name(item)"
+            :tab="item"
+          >
+            <template #label>
+              <span>{{ fmtTitle(item.meta.title, item) }}</span>
+              <el-icon
+                size="12"
+                color="#666666"
+                title="刷新当前页"
+                class="refresh"
+                style="margin-left: 8px;cursor: pointer;visibility: hidden"
+                @click.stop="refreshCurrentPage()"
+              >
+                <cc-icon iconId="018dc9c3efd289739df0" style="color: #999; cursor: pointer" />
+              </el-icon>
+            </template>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <div class="history-right">
+        <el-dropdown :hide-timeout="100" trigger="hover">
+          <span>
+            <cc-icon iconId="018dca7de3466592b90f" style="color: white; font-size: 21px; cursor: pointer" />
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu class="dropdown-group">
+              <el-dropdown-item>
+                <span class="dropdown-item" @click="closeCurrent(false)">
+                  <cc-icon iconId="018dcabc8476e353101c" /> 关闭当前
+                </span>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <span class="dropdown-item" @click="closeLeft(false)">
+                  <cc-icon iconId="018dcabc8476cf3decef" /> 关闭左侧
+                </span>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <span class="dropdown-item" @click="closeRight(false)">
+                  <cc-icon iconId="018dcabc8473e3346e4c" /> 关闭右侧
+                </span>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <span class="dropdown-item" @click="closeOther(false)">
+                  <cc-icon iconId="018dcabc847af20d46f4" /> 关闭其他
+                </span>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <span class="dropdown-item" @click="closeAll">
+                  <cc-icon iconId="018dca412c4ebd53fd1d" /> 关闭全部
+                </span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+    <!--自定义右键菜单html代码-->
+    <ul
+      v-show="contextMenuVisible"
+      :style="{ left: left + 'px', top: top + 'px' }"
+      class="contextmenu"
+    >
+      <li class="dropdown-item" @click="closeCurrent(true)">
+        <cc-icon iconId="018dcabc8476e353101c" /> 关闭当前
+      </li>
+      <li class="dropdown-item" @click="closeLeft(true)">
+        <cc-icon iconId="018dcabc8476cf3decef" /> 关闭左侧
+      </li>
+      <li class="dropdown-item" @click="closeRight(true)">
+        <cc-icon iconId="018dcabc8473e3346e4c" /> 关闭右侧
+      </li>
+      <li class="dropdown-item" @click="closeOther(true)">
+        <cc-icon iconId="018dcabc847af20d46f4" /> 关闭其他
+      </li>
+      <li class="dropdown-item" @click="closeAll">
+        <cc-icon iconId="018dca412c4ebd53fd1d" /> 关闭全部
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { fmtTitle } from '@/utils/page';
+import { useKeepAlive } from '@/pinia/modules/keepAlive';
+import emitter from '@/utils/bus';
+
+const route = useRoute();
+const router = useRouter();
+const keepAlive = useKeepAlive();
+const historyList = ref([]);
+const activeValue = ref('');
+const contextMenuVisible = ref(false);
+const left = ref(0);
+const top = ref(0);
+const rightActive = ref('');
+const refreshPage = inject('refreshPage');
+
+const refreshCurrentPage = () => {
+  const active = historyList.value.find(
+    (item) => getFmtString(item) === activeValue.value
+  );
+
+  if (active) {
+    refreshPage(active.name);
+  }
+};
+
+const getFmtString = (item) => {
+  return item.name + JSON.stringify(item.query) + JSON.stringify(item.params);
+};
+
+const name = (item) => {
+  return item.name + JSON.stringify(item.query) + JSON.stringify(item.params);
+};
+
+const openContextMenu = (e) => {
+  if (historyList.value.length === 1) {
+    return false;
+  }
+  let id;
+  if (e.srcElement.nodeName === 'SPAN') {
+    id = e.srcElement.offsetParent.id;
+  } else {
+    id = e.srcElement.id;
+  }
+  if (id) {
+    contextMenuVisible.value = true;
+    left.value = e.clientX;
+    top.value = e.clientY + 10;
+    rightActive.value = id.substring(4);
+  }
+};
+
+const closeAll = () => {
+  historyList.value = [historyList.value[0]];
+  router.push(historyList.value[0]);
+  contextMenuVisible.value = false;
+  sessionStorage.setItem('historyList', JSON.stringify(historyList.value));
+};
+
+const closeCurrent = (rightClick) => {
+  if (historyList.value.length <= 1) {
+    return;
+  }
+
+  if (!rightClick) {
+    rightActive.value = activeValue.value;
+  }
+
+  const currentIndex = historyList.value.findIndex((item) => {
+    return getFmtString(item) === rightActive.value;
+  });
+  const activeIndex = historyList.value.findIndex(
+    (item) => getFmtString(item) === activeValue.value
+  );
+
+  historyList.value.splice(currentIndex, 1);
+  if (activeIndex === currentIndex) {
+    if (currentIndex < historyList.value.length) {
+      router.push(historyList.value[currentIndex]);
+    } else {
+      router.push(historyList.value[currentIndex - 1]);
+    }
+  }
+
+  contextMenuVisible.value = false;
+  sessionStorage.setItem('historyList', JSON.stringify(historyList.value));
+};
+
+const closeLeft = (rightClick) => {
+  if (!rightClick) {
+    rightActive.value = activeValue.value;
+  }
+
+  let right;
+  const rightIndex = historyList.value.findIndex((item) => {
+    if (getFmtString(item) === rightActive.value) {
+      right = item;
+    }
+    return getFmtString(item) === rightActive.value;
+  });
+  const activeIndex = historyList.value.findIndex(
+    (item) => getFmtString(item) === activeValue.value
+  );
+  historyList.value.splice(0, rightIndex);
+  if (rightIndex > activeIndex) {
+    router.push(right);
+  }
+  sessionStorage.setItem('historyList', JSON.stringify(historyList.value));
+};
+
+const closeRight = (rightClick) => {
+  if (!rightClick) {
+    rightActive.value = activeValue.value;
+  }
+
+  let right;
+  const leftIndex = historyList.value.findIndex((item) => {
+    if (getFmtString(item) === rightActive.value) {
+      right = item;
+    }
+    return getFmtString(item) === rightActive.value;
+  });
+  const activeIndex = historyList.value.findIndex(
+    (item) => getFmtString(item) === activeValue.value
+  );
+  historyList.value.splice(leftIndex + 1, historyList.value.length);
+  if (leftIndex < activeIndex) {
+    router.push(right);
+  }
+  sessionStorage.setItem('historyList', JSON.stringify(historyList.value));
+};
+
+const closeOther = (rightClick) => {
+  if (!rightClick) {
+    rightActive.value = activeValue.value;
+  }
+
+  let right;
+  historyList.value = historyList.value.filter((item) => {
+    if (getFmtString(item) === rightActive.value) {
+      right = item;
+    }
+    return getFmtString(item) === rightActive.value;
+  });
+  router.push(right);
+  sessionStorage.setItem('historyList', JSON.stringify(historyList.value));
+};
+
+const isSame = (route1, route2) => {
+  if (route1.name !== route2.name) {
+    return false;
+  }
+  if (Object.keys(route1.query).length !== Object.keys(route2.query).length ||
+        Object.keys(route1.params).length !== Object.keys(route2.params).length) {
+    return false;
+  }
+  for (const key in route1.query) {
+    if (route1.query[key] !== route2.query[key]) {
+      return false;
+    }
+  }
+  for (const key in route1.params) {
+    if (route1.params[key] !== route2.params[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+const setTab = (route) => {
+  if (!historyList.value.some((item) => isSame(item, route))) {
+    const obj = {};
+    obj.name = route.name;
+    obj.meta = { ...route.meta };
+    delete obj.meta.matched;
+    obj.query = route.query;
+    obj.params = route.params;
+    historyList.value.push(obj);
+  }
+  window.sessionStorage.setItem('activeValue', getFmtString(route));
+  activeValue.value = window.sessionStorage.getItem('activeValue');
+};
+
+const historyMap = ref({});
+
+const changeTab = (name) => {
+  const tab = historyMap.value[name];
+  router.push({
+    name: tab.name,
+    query: tab.query,
+    params: tab.params,
+  });
+};
+
+const removeTab = (tab) => {
+  const index = historyList.value.findIndex(
+    (item) => getFmtString(item) === tab
+  );
+  if (getFmtString(route) === tab) {
+    if (historyList.value.length > 1) {
+      if (index < historyList.value.length - 1) {
+        router.push({
+          name: historyList.value[index + 1].name,
+          query: historyList.value[index + 1].query,
+          params: historyList.value[index + 1].params,
+        });
+      } else {
+        router.push({
+          name: historyList.value[index - 1].name,
+          query: historyList.value[index - 1].query,
+          params: historyList.value[index - 1].params,
+        });
+      }
+    }
+  }
+  historyList.value.splice(index, 1);
+};
+
+watch(() => contextMenuVisible.value, () => {
+  if (contextMenuVisible.value) {
+    document.body.addEventListener('click', () => {
+      contextMenuVisible.value = false;
+    });
+  } else {
+    document.body.removeEventListener('click', () => {
+      contextMenuVisible.value = false;
+    });
+  }
+});
+
+watch(() => route, (to) => {
+  if (to.name === 'login' || to.name === 'reload') {
+    return;
+  }
+
+  setTab(to);
+  sessionStorage.setItem('historyList', JSON.stringify(historyList.value));
+  activeValue.value = window.sessionStorage.getItem('activeValue');
+}, { deep: true });
+
+watch(() => historyList.value, () => {
+  sessionStorage.setItem('historyList', JSON.stringify(historyList.value));
+
+  const routeNames = [];
+  historyMap.value = {};
+  historyList.value.forEach((item) => {
+    routeNames.push(item.name);
+    historyMap.value[getFmtString(item)] = item;
+  });
+  keepAlive.resetItems(routeNames);
+}, { deep: true });
+
+const initPage = () => {
+  emitter.on('closeCurrPage', () => {
+    removeTab(name(route));
+  });
+
+  emitter.on('closeAllPage', () => {
+    closeAll();
+  });
+
+  historyList.value = JSON.parse(sessionStorage.getItem('historyList')) || [];
+  if (!window.sessionStorage.getItem('activeValue')) {
+    activeValue.value = getFmtString(route);
+  } else {
+    activeValue.value = window.sessionStorage.getItem('activeValue');
+  }
+  setTab(route);
+  if (window.sessionStorage.getItem('needCloseAll') === 'true') {
+    closeAll();
+    window.sessionStorage.removeItem('needCloseAll');
+  }
+};
+
+onMounted(() => {
+  initPage();
+});
+
+onUnmounted(() => {
+  emitter.off('closeCurrPage');
+  emitter.off('closeAllPage');
+});
+</script>
+
+<style lang="scss" scoped>
+.router-history {
+  background: #00305d;
+  border-top: none;
+  padding: 0;
+
+  :deep(.el-tabs__header) {
+    margin: 0;
+    .el-tabs__item {
+      color: white;
+      height: 40px;
+      border: none;
+    }
+
+    .el-tabs__item:hover {
+      padding: 0 20px;
+    }
+
+    .el-tabs__item.is-active {
+      margin-top: 1px;
+      color: #666666;
+      background-color: white;
+      border-radius: 10px 10px 0 0;
+    }
+
+    .el-tabs__item.is-closable .is-icon-close {
+      width: 14px;
+      visibility: hidden;
+    }
+
+    .el-tabs__item.is-active .is-icon-close,
+    .el-tabs__item.is-closable:hover .is-icon-close {
+      visibility: visible;
+    }
+    .el-tabs__item.is-active .refresh {
+      color: #909399!important;
+      visibility: visible!important;
+    }
+    .el-tabs__item .refresh:hover {
+      color: white!important;
+      background: rgb(168,171,178)!important;
+      border-radius: 10px;
+      visibility: visible!important;
+    }
+    .el-tabs__item:nth-child(2):not(.is-active).is-closable:hover {
+      padding-left: 20px !important;
+    }
+
+    .el-tabs__header .is-active .refresh {
+      display: block !important;
+    }
+
+    .el-tabs__nav {
+      border: none !important;
+    }
+
+    .el-tabs__nav-wrap.is-scrollable {
+      padding: 0 30px;
+    }
+
+    .el-tabs__nav-prev, .el-tabs__nav-next {
+      font-size: 21px !important;
+      width: 30px !important;
+      height: 40px;
+      color: white !important;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .is-active .refresh:hover {
+      color: white;
+      background: rgb(168, 171, 178);
+      border-radius: 12px;
+    }
+  }
+}
+
+.history-box {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 40px;
+}
+.history-left {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.history-right {
+  width: 70px;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.history-right :deep(.el-dropdown:hover) {
+  border: none;
+  outline: none;
+}
+.history-right :deep(.el-tooltip__trigger) {
+  outline: none;
+}
+.contextmenu {
+  width: 120px;
+  margin: 0;
+  border: 1px solid #e4e7ed;
+  background: #fff;
+  z-index: 3000;
+  position: absolute;
+  list-style-type: none;
+  padding: 5px 0;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #606266;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
+}
+.contextmenu li {
+  margin: 0;
+  padding: 7px 16px;
+}
+.contextmenu li:hover {
+  color: rgb(64, 158, 255);
+  background: rgb(236, 245, 255);
+  cursor: pointer;
+}
+.dropdown-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  > span {
+    margin-right: 5px;
+  }
+}
+</style>