@arkxos/arkos-system 0.1.0

package/src/admin/console/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="console-container">
+    <el-input
+      ref="textareaRef"
+      v-model="logContent"
+      type="textarea"
+      class="console"
+      readonly
+      @wheel="stopAutoScroll"
+      @mousedown="stopAutoScroll"
+    />
+    <div class="button">
+      <el-tooltip
+        content="滚动到底部"
+        :enterable="false"
+        popper-class="padding-10-15"
+      >
+        <el-button type="info" @click="startAutoScroll">
+          <ac-icon iconId="018ece4f702b32a39f8d" />
+        </el-button>
+      </el-tooltip>
+      <el-tooltip
+        content="清空"
+        :enterable="false"
+        popper-class="padding-10-15"
+      >
+        <el-button type="info" @click="clearLogger">
+        <ac-icon iconId="018dc9c3efd3a0502886" />
+        </el-button>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted, onUnmounted } from 'vue';
+import websocket from '@/utils/websocket';
+import emitter from '@/utils/bus';
+
+const textareaRef = ref();
+const logContent = ref('');
+const lock = ref(Promise.resolve());
+const maxLength = 100000;
+const autoScrollEnd = ref(true);
+
+const showLogger = async(message) => {
+  await lock.value;
+
+  let hasChange = false;
+  const textarea = textareaRef.value.$el.querySelector('textarea');
+  const selectionStart = textarea.selectionStart;
+  const selectionEnd = textarea.selectionEnd;
+
+  logContent.value += message;
+  if (logContent.value.length > maxLength) {
+    hasChange = true;
+    const start = logContent.value.length - maxLength;
+    logContent.value = logContent.value.substring(logContent.value.indexOf('\n', start) + 1);
+  }
+
+  autoScrollEnd.value && await nextTick(() => textarea.scrollTop = textarea.scrollHeight);
+  textareaRef.value.focus();
+  !hasChange && await nextTick(() => textarea.setSelectionRange(selectionStart, selectionEnd));
+  lock.value = Promise.resolve();
+};
+
+const clearLogger = () => {
+  logContent.value = '';
+};
+
+const startAutoScroll = () => {
+  autoScrollEnd.value = true;
+};
+
+const stopAutoScroll = () => {
+  autoScrollEnd.value = false;
+};
+
+onMounted(() => {
+  websocket.connect();
+  websocket.addTopics(['subscribe.logger']);
+  emitter.off('logger', res => showLogger(res));
+  emitter.on('logger', res => showLogger(res));
+});
+
+onUnmounted(() => {
+  emitter.off('logger', res => showLogger(res));
+  websocket.close();
+});
+</script>
+
+<style lang="scss" scoped>
+.console-container {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+
+  .console {
+    border: none!important;
+
+    :deep(.el-textarea__inner) {
+      width: 100%;
+      height: 100%;
+      resize: none;
+      padding: 5px!important;
+      border: none!important;
+      border-radius: 0!important;
+      box-shadow: none!important;
+      background-color: #303133;
+      color: #c5c5c5 !important;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+  }
+
+  .button {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+  }
+}
+</style>

package/src/admin/layout/console/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div @click="showConsole" style="cursor: pointer">
+    <ac-icon iconId="018ece4f707565802bf8" size="18" title="查看日志" />
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const showConsole = () => {
+  window.open(router.resolve({ name: 'console' }).href);
+};
+</script>

package/src/admin/layout/fullscreen/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div @click="clickFull" style="cursor: pointer">
+    <ac-icon v-if="isShow" iconId="018dca8cad1b28075ecd" size="18" title="全屏" />
+    <ac-icon v-else iconId="018dca8cad1b9b03c47f" size="18" title="退出全屏" />
+  </div>
+</template>
+
+<script setup>
+import ScreenFull from 'screenfull';
+import { onMounted, onUnmounted, ref } from 'vue';
+
+onMounted(() => {
+  if (ScreenFull.isEnabled) {
+    ScreenFull.on('change', changeFullShow);
+  }
+});
+
+onUnmounted(() => {
+  ScreenFull.off('change', changeFullShow);
+});
+
+const clickFull = () => {
+  if (ScreenFull.isEnabled) {
+    ScreenFull.toggle();
+  }
+};
+
+const isShow = ref(true);
+const changeFullShow = () => {
+  isShow.value = !ScreenFull.isFullscreen;
+};
+</script>

package/src/admin/layout/home/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div @click="gotoHome" style="cursor: pointer">
+    <ac-icon iconId="018dc9c3efd272373c4b" size="18" title="首页" />
+  </div>
+</template>
+
+<script setup>
+const gotoHome = () => {
+  window.location.href = import.meta.env.VITE_WEB_PATH + '/choose.html?stop=1';
+};
+</script>

package/src/admin/layout/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="system-layout-container">
+    <div class="system-layout-header">
+      <div class="left-box">
+        <div class="icon">
+          <ac-icon
+            iconId="018ece4f759f9a84d83f"
+            size="18"
+            title="当前位置"
+          />
+        </div>
+        <el-breadcrumb class="breadcrumb">
+          <el-breadcrumb-item
+            v-for="item in matched.slice(1, matched.length)"
+            :key="item.path"
+          >{{ getPageTitle(item.meta.title, route) }}</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="right-box">
+        <ac-search />
+        <ac-full-screen />
+        <ac-console />
+        <ac-home />
+        <ac-personnel />
+      </div>
+    </div>
+    <ac-menu class="system-layout-menu" />
+    <router-view v-slot="{ Component }">
+      <div class="system-layout-main">
+        <component :is="Component" :key="$route.name"></component>
+      </div>
+    </router-view>
+  </div>
+</template>
+
+<script setup>
+import AcMenu from '@/admin/layout/menu/index.vue';
+import AcSearch from '@/admin/layout/search/index.vue';
+import AcConsole from '@/admin/layout/console/index.vue';
+import AcFullScreen from '@/admin/layout/fullscreen/index.vue';
+import AcHome from '@/admin/layout/home/index.vue';
+import AcPersonnel from '@/admin/layout/personnel/index.vue';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { getPageTitle } from '@/utils/page';
+import api from '@/http/api';
+
+const route = useRoute();
+
+const matched = computed(() => route.meta.matched);
+const intervalRefresh = ref(-1);
+
+const refresh = () => {
+  api.post('/refresh').then(() => {});
+};
+
+onMounted(() => {
+  intervalRefresh.value = setInterval(refresh, 60000);
+});
+
+onUnmounted(() => {
+  if (intervalRefresh.value) {
+    clearInterval(intervalRefresh.value);
+    intervalRefresh.value = null;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.system-layout-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.system-layout-header {
+  display: flex;
+  flex-direction: row;
+  color: white;
+  background: #268FF2;
+  padding: 0 16px;
+  height: 56px;
+
+  i {
+    color: white;
+    font-size: 20px;
+  }
+
+  .left-box {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+
+    .icon {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .breadcrumb {
+      height: 56px;
+      line-height: 56px;
+      display: inline-block;
+      padding: 0;
+      margin-left: 10px;
+      font-size: 16px;
+
+      :deep(.el-breadcrumb__item) {
+        .el-breadcrumb__inner {
+          color: rgba(255, 255, 255, 0.8)!important;
+        }
+      }
+      :deep(.el-breadcrumb__item:nth-last-child(1)) {
+        .el-breadcrumb__inner {
+          color: white!important;
+        }
+      }
+      :deep(.el-breadcrumb__separator) {
+        color: white!important;
+      }
+    }
+  }
+
+  .right-box {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    >div {
+      margin-left: 15px;
+    }
+  }
+}
+.system-layout-main {
+  height: 10px;
+  flex-grow: 1;
+  background: white;
+}
+</style>

package/src/admin/layout/menu/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="system-menu">
+    <el-menu
+      :default-active="active"
+      unique-opened
+      mode="horizontal"
+      @select="selectMenuItem"
+    >
+      <template v-for="first in routerStore.routes[0].children">
+        <el-sub-menu
+          v-if="first.children && first.children.length > 0"
+          :key="first.id"
+          :index="first.id"
+        >
+          <template #title>
+            <span>{{ first.meta.title }}</span>
+          </template>
+          <div v-for="second in first.children" :key="second.id">
+            <el-sub-menu
+              v-if="second.children && second.children.length > 0"
+              :key="second.id"
+              :index="second.id"
+            >
+              <template #title>
+                <span>{{ second.meta.title }}</span>
+              </template>
+              <el-menu-item v-for="third in second.children" :index="third.id" :key="third.id">
+                <span>{{ third.meta.title }}</span>
+              </el-menu-item>
+            </el-sub-menu>
+            <el-menu-item v-else :index="second.id" :key="'' + second.id">
+              <span>{{ second.meta.title }}</span>
+            </el-menu-item>
+          </div>
+        </el-sub-menu>
+        <el-menu-item v-else :index="first.id" :key="'' + first.id">
+          <span>{{ first.meta.title }}</span>
+        </el-menu-item>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onBeforeMount } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useRouterStore } from '@/admin/pinia/router';
+
+const route = useRoute();
+const router = useRouter();
+
+const routerStore = useRouterStore();
+
+const active = ref('');
+watch(() => route, () => {
+  active.value = route.meta.activeName || route.name;
+}, { deep: true });
+
+const initPage = () => {
+  active.value = route.meta.activeName || route.name;
+};
+
+onBeforeMount(() => {
+  initPage()
+});
+
+const selectMenuItem = (index) => {
+  if (index === route.name) return;
+  if (index.indexOf('http://') >= 0 || index.indexOf('https://') >= 0) {
+    window.open(index);
+  } else {
+    router.push({ name: index });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.system-menu {
+  height: 40px!important;
+  line-height: 40px!important;
+
+  :deep(.el-menu-item) {
+    height: 40px!important;
+    line-height: 35px!important;
+  }
+  :deep(.el-menu--horizontal) {
+    height: 40px!important;
+    line-height: 35px!important;
+    padding: 0 10px;
+  }
+  :deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
+    background: unset;
+    outline: unset;
+    color: unset;
+  }
+  :deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover) {
+    background: unset;
+    outline: unset;
+    color: var(--el-menu-active-color);
+  }
+}
+</style>

package/src/admin/layout/personnel/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="system-personnel">
+    <el-dropdown ref="dropdownRef" :hide-timeout="100" trigger="hover">
+      <div class="system-dropdown-box">
+        <span class="system-personnel-box pointer">
+          <span>{{ user.name }}</span>
+          <ac-icon iconId="018dca7de3466592b90f" />
+        </span>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu class="system-dropdown-group">
+          <el-dropdown-item @click="showPasswordDialog">
+            <span style="display: block">修改密码</span>
+          </el-dropdown-item>
+          <el-dropdown-item @click="gotoHome">
+            <span style="display: block">菜单选择</span>
+          </el-dropdown-item>
+          <el-dropdown-item @click="userStore.logout" divided>
+            <ac-icon iconId="018dca813800b4902c00" style="margin-right: 10px" color="#FF0033" />登 出
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+
+    <el-dialog
+      title="密码修改"
+      width="550px"
+      height="300px"
+      v-model="dialogVisible"
+      class="edit-dialog"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      @close="dialogVisible = false"
+      destroy-on-close
+      draggable
+    >
+      <el-form
+        label-width="120px"
+        ref="dataForm"
+        label-position="right"
+        :model="formData"
+        :rules="rules"
+      >
+        <el-form-item label="新密码" prop="password">
+          <el-input
+            type="password"
+            v-model="formData.password"
+            auto-complete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="cPassword">
+          <el-input
+            type="password"
+            v-model="formData.cPassword"
+            auto-complete="off"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button
+          type="info"
+          size="default"
+          @click.prevent="cancelForm()"
+        >取消</el-button>
+        <el-button
+          type="primary"
+          size="default"
+          :loading="editLoading"
+          @click.prevent="submitForm()"
+        >保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { useUserStore } from '@/pinia/modules/user';
+import api from '@/http/api';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const userStore = useUserStore();
+const user = computed(() => { return userStore.getUser() || {} });
+const dialogVisible = ref(false);
+const formData = ref({ password: '', cPassword: '' });
+const editLoading = ref(false);
+const rules = ref({
+  password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+  cPassword: [
+    { required: true, message: '请输入确认密码', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请再次输入密码'));
+        } else if (value !== formData.value.password) {
+          callback(new Error('两次输入密码不一致'));
+        } else {
+          callback();
+        }
+      },
+      trigger: 'blur',
+    },
+  ]
+});
+const dataForm = ref();
+const dropdownRef = ref();
+
+const cancelForm = () => {
+  dialogVisible.value = false;
+};
+
+const showPasswordDialog = () => {
+  dialogVisible.value = true;
+  resetForm();
+};
+
+const gotoHome = () => {
+  window.location.href = import.meta.env.VITE_WEB_PATH + '/choose.html?stop=1';
+};
+
+const resetForm = () => {
+  dataForm.value && dataForm.value.resetFields();
+};
+
+const submitForm = () => {
+  dataForm.value && dataForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否修改密码？', '提示', { type: 'info' }).then(() => {
+        editLoading.value = true;
+        api.post('/system/employee/updatePassword', formData.value)
+          .then((res) => {
+            ElMessage.success(res.message);
+            editLoading.value = false;
+            dataForm.value && dataForm.value.resetFields();
+            editLoading.value = false;
+            dialogVisible.value = false;
+          }).catch(() => {
+            editLoading.value = false;
+            dialogVisible.value = true;
+          });
+      }).catch(() => {});
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.system-dropdown-box:focus-visible {
+  outline: unset;
+}
+.system-personnel-box:hover {
+  border: none;
+}
+.system-personnel-box {
+  color: white;
+  display: flex;
+  flex-direction: row;
+
+  > span {
+    font-size: 16px;
+  }
+  .ac-icon {
+    margin-left: 5px;
+  }
+}
+</style>

package/src/admin/layout/search/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="system-menu-search">
+    <transition name="el-fade-in-linear">
+      <div v-show="show" style="display: inline-block;width: 200px;">
+        <el-select
+          ref="searchInput"
+          v-model="value"
+          filterable
+          placeholder="请选择"
+          @blur="hiddenSearch"
+          @change="changeRouter"
+        >
+          <el-option
+            v-for="item in routerStore.routerList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </transition>
+    <ac-icon
+      v-if="btnShow"
+      iconId="018dc9c3efe489a7d117"
+      size="18"
+      @click="showSearch"
+      title="查找菜单"
+      style="cursor: pointer"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
+import { useRouterStore } from '@/admin/pinia/router';
+
+const router = useRouter();
+const routerStore = useRouterStore();
+
+const value = ref('');
+const changeRouter = () => {
+  router.push({ name: value.value });
+  value.value = '';
+  hiddenSearch();
+};
+
+const show = ref(false);
+const btnShow = ref(true);
+const hiddenSearch = () => {
+  show.value = false;
+  setTimeout(() => {
+    btnShow.value = true
+  }, 500);
+};
+
+const searchInput = ref(null);
+const showSearch = () => {
+  btnShow.value = false;
+  show.value = true;
+  nextTick(() => {
+    searchInput.value.focus();
+    searchInput.value.toggleMenu()
+  });
+};
+</script>
+
+<style scoped>
+.system-menu-search {
+  display: inline-flex;
+  overflow: hidden;
+  text-align: center;
+  align-items: center;
+}
+.system-menu-search :deep(.el-input__inner) {
+  border: none;
+}
+</style>

package/src/admin/main.js

@@ -0,0 +1,30 @@
+import { createApp } from 'vue';
+import ElementPlus from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import 'element-plus/dist/index.css';
+import { store } from '@/pinia';
+import admin from '@/admin/components/index';
+import adminVisual from '@/admin/visual/components/index';
+import codeless from '@/codeless/components/index';
+import directives from '@/directives/index';
+import App from './App.vue';
+import router from './router';
+import '@/assets/style/global/default.css';
+import '@/assets/style/menu/default.css';
+import '@/assets/style/base.css';
+import '@/assets/style/main.css';
+
+const app = createApp(App);
+app.config.productionTip = false;
+
+app
+  .use(store)
+  .use(router)
+  .use(ElementPlus, { locale: zhCn })
+  .use(admin)
+  .use(adminVisual)
+  .use(codeless)
+  .use(directives)
+  .mount('#app');
+
+export default app;