@arkxos/arkos-system 0.1.0

package/src/login/App.vue

@@ -0,0 +1,421 @@
+<template>
+  <div class="login-container" :style="{backgroundImage: 'url(' + bgImgUrl + ')'}">
+    <div class="login-panel">
+      <div class="login-form-box">
+        <div class="login-form-title" v-html="webTitle"></div>
+        <el-form
+          ref="loginForm"
+          :model="loginFormData"
+          :rules="rules"
+          :validate-on-rule-change="false"
+          @keyup.enter="submitForm"
+        >
+          <el-form-item label="用户名" prop="username" class="login-username">
+            <el-input
+              v-model="loginFormData.username"
+              ref="usernameRef"
+              placeholder="请输入用户名"
+              @keyup.enter.stop="passwordRef.focus()"
+            />
+          </el-form-item>
+          <el-form-item label="密　码" prop="password" class="login-password">
+            <el-input
+              v-model="loginFormData.password"
+              ref="passwordRef"
+              type="password"
+              placeholder="请输入密码"
+              @keyup.enter.stop="passwordEnter"
+            />
+          </el-form-item>
+          <el-form-item v-if="showCaptcha" label="验证码" prop="captcha" class="login-captcha">
+            <div class="captcha-box">
+              <div>
+                <el-input
+                  v-model="loginFormData.captcha"
+                  ref="captchaRef"
+                  placeholder="请输入验证码"
+                />
+              </div>
+              <div class="captcha">
+                <img
+                  v-if="captchaSrc"
+                  :src="captchaSrc"
+                  ref="captchaImg"
+                  alt="请输入验证码"
+                  @click="loginVerify()"
+                />
+              </div>
+            </div>
+          </el-form-item>
+          <div class="login-button">
+            <el-button
+              type="primary"
+              size="large"
+              @click="submitForm"
+            >登 录</el-button>
+            <div v-if="setting.register === '1'" class="register-box">
+              <span @click="register">立即注册</span>
+            </div>
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </div>
+
+  <!-- 显示授权码 -->
+  <el-dialog
+    title="更新授权码"
+    width="600px"
+    v-model="licenseVisible"
+    :close-on-press-escape="true"
+    :close-on-click-modal="false"
+    :show-close="false"
+    destroy-on-close
+    draggable
+  >
+    <el-form
+      ref="licenseDataForm"
+      class="no-padding"
+      label-width="0"
+      label-position="right"
+      :model="licenseFormData"
+      :rules="licenseRules"
+    >
+      <el-row>
+        <el-col :span="24">
+          <div>机器码：</div>
+          <div class="machine-box">{{license.machineCode}}</div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <div style="padding: 5px 0;">授权码：</div>
+          <el-form-item label="" prop="license">
+            <el-input type="textarea" :rows="8" v-model="licenseFormData.license"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button
+        size="default"
+        type="primary"
+        @click="submitLicense"
+        :loading="licenseEditLoading"
+      >确定</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- 注册 -->
+  <el-dialog
+    v-model="registerVisible"
+    :width="setting.registerWidth ? setting.registerWidth + 'px' : '600px'"
+    :title="setting.registerTitle ? setting.registerTitle : '注册'"
+    :close-on-click-modal="false"
+    class="no-padding"
+    destroy-on-close
+    draggable
+  >
+    <div style="height: 100%;display: flex;flex-direction: column">
+      <visual-page ref="registerRef" :pageInfo="registerPageInfo" />
+    </div>
+    <template #footer>
+      <el-button
+        size="default"
+        type="primary"
+        @click="submitRegister"
+        :loading="registerLoading"
+      >提交</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import api from '@/http/api';
+import { getSetting } from '@/utils/system';
+import { useUserStore } from '@/pinia/modules/user';
+import { onMounted, ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import defaultBgImg from '@/assets/images/background.jpg';
+import VisualPage from '@/visual/view/page.vue';
+
+const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
+const userStore = useUserStore();
+const setting = ref({});
+const captchaSrc = ref('');
+
+const loginForm = ref(null);
+const showCaptcha = ref(false);
+const bgImgUrl = ref('');
+const webTitle = ref('系统登录');
+const captchaImg = ref(null);
+const loginFormData = ref({
+  username: import.meta.env.VITE_USERNAME || '',
+  password: import.meta.env.VITE_PASSWORD || '',
+  captcha: '',
+});
+const rules = ref({
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  captcha: [{
+    required: true,
+    message: '验证码不能为空',
+    trigger: 'blur',
+  }],
+});
+
+const license = ref();
+const licenseDataForm = ref();
+const licenseFormData = ref({});
+const licenseVisible = ref(false);
+const licenseEditLoading = ref(false);
+const licenseRules = ref({
+  license: [
+    { required: true, message: '请输入授权码', trigger: 'blur' },
+  ]
+});
+const registerVisible = ref(false);
+const registerLoading = ref(false);
+const registerRef = ref();
+const registerPageInfo = ref({});
+
+const usernameRef = ref();
+const passwordRef = ref();
+const captchaRef = ref();
+
+const passwordEnter = () => {
+  if (captchaRef.value) {
+    captchaRef.value.focus();
+  } else {
+    submitForm();
+  }
+};
+
+const loginVerify = () => {
+  api.captcha().then(res => {
+    loginFormData.value.captcha = '';
+    captchaSrc.value = URL.createObjectURL(new Blob([res.data]));
+  });
+};
+
+const submitForm = async() => {
+  loginForm.value.validate(async(result) => {
+    if (result) {
+      const data = Object.assign({}, loginFormData.value);
+      const flag = await userStore.login(data);
+      if (!flag) {
+        if (!license.value.valid) {
+          licenseVisible.value = true;
+        }
+        if (showCaptcha.value) {
+          loginVerify();
+        }
+      }
+    } else {
+      ElMessage({
+        type: 'error',
+        message: '用户名/密码填写错误！',
+        showClose: true,
+      });
+
+      if (showCaptcha.value) {
+        loginVerify();
+      }
+
+      return false;
+    }
+  });
+};
+
+const loadLicense = () => {
+  api.post('/license/queryBy').then(res => {
+    license.value = res.data || {};
+    if (!license.value.valid) {
+      licenseVisible.value = true;
+    }
+  });
+};
+
+const register = () => {
+  api.post(`/business/page/${setting.value.registerPageId}`).then(res => {
+    registerPageInfo.value = res.data || {};
+    registerVisible.value = true;
+    registerLoading.value = false;
+  });
+};
+
+const submitRegister = () => {
+  registerRef.value.validate(valid => {
+    if (!valid) return;
+    registerLoading.value = true;
+    api.runScript(setting.value.registerScriptId, registerRef.value.getData()).then(res => {
+      ElMessage.success(res.message);
+      registerVisible.value = false;
+    }).catch(() => {
+      registerLoading.value = false;
+    });
+  });
+};
+
+const submitLicense = () => {
+  licenseDataForm.value && licenseDataForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否更新授权码？', '提示', { type: 'info' }).then(() => {
+        licenseEditLoading.value = true;
+        api.post('/license/updateLicense', licenseFormData.value).then(res => {
+          ElMessage.success(res.message);
+          loadLicense();
+          licenseVisible.value = false;
+          licenseEditLoading.value = false;
+        }).catch(() => {
+          licenseEditLoading.value = false;
+        });
+      }).catch(() => {});
+    } else {
+      ElMessage.error('数据录入不正确，请重新检查！');
+    }
+  });
+};
+
+const loadSetting = async() => {
+  setting.value = await getSetting();
+  setting.value = setting.value ? setting.value : {};
+  bgImgUrl.value = !setting.value.loginBgImageId ? defaultBgImg : imageUrl.value + setting.value.loginBgImageId;
+  showCaptcha.value = setting.value.loginCaptcha === '1' || false;
+  webTitle.value = setting.value.webTitle || '系统登录';
+  document.title = (setting.value.webTitle || '系统登录').split('<br/>')[0];
+
+  if (setting.value.loginCss) {
+    const style = document.createElement('style');
+    style.textContent = setting.value.loginCss;
+    document.head.appendChild(style);
+  }
+
+  if (showCaptcha.value) {
+    loginVerify();
+  }
+};
+
+onMounted(async() => {
+  const user = await userStore.initUserInfo();
+  if (user) {
+    window.location.href = import.meta.env.VITE_WEB_PATH + '/choose.html';
+    return;
+  }
+
+  await loadSetting();
+  loadLicense();
+  usernameRef.value.focus();
+
+  if (window && window.matchMedia('(orientation: portrait)').matches) {
+    ElMessage({ message: '请将您的设备切换到横屏模式以获得最佳体验。', type: 'success', duration: 15000 });
+  }
+});
+</script>
+
+<style lang="scss">
+#app {
+  background: #eee;
+  height: 100vh;
+  overflow: hidden;
+}
+.login-container {
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+
+  .login-panel {
+    margin-right: 200px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    .login-form-box {
+      width: 320px;
+      background-color: rgba(255, 255, 255, 0.5);
+      padding: 40px 40px 20px 40px;
+      border-radius: 10px;
+      box-shadow: 2px 3px 7px rgba(0, 0, 0, .3);
+      .login-form-title {
+        display: flex;
+        align-items: center;
+        margin: 0  0 30px 0;
+        font-size: 30px;
+        font-weight: 600;
+        justify-content: center;
+      }
+        .el-form-item__label {
+          color: #000!important;
+      }
+      .captcha-box {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+      }
+      .captcha {
+        width: 80px;
+        height: 32px;
+        margin-left: 8px;
+        flex-shrink: 0;
+        img {
+          width: 100%;
+          height: 100%;
+          vertical-align: middle;
+        }
+      }
+      .login-button {
+        margin-top: 10px;
+        text-align: right;
+      }
+    }
+  }
+}
+.el-dialog .el-dialog__header {
+  background-color: #268FF2 !important;
+  border-bottom: 1px solid #e8e8e8 !important;
+  padding: 15px 20px !important;
+  display: flex !important;
+  flex-direction: row !important;
+  justify-content: center !important;
+  align-items: center !important;
+  margin-right: 0 !important;
+}
+.el-dialog .el-dialog__header .el-dialog__title {
+  flex-grow: 1;
+  color: white;
+}
+.el-dialog .el-dialog__header .el-dialog__headerbtn {
+  position: unset;
+  height: 16px!important;
+  width: 16px!important;
+}
+.el-dialog .el-dialog__body {
+  padding: 20px;
+  min-height: 20vh!important;
+  max-height: 70vh!important;
+  flex: 1!important;
+  -ms-flex: 1 1 auto!important;
+  overflow-y: auto!important;
+  overflow-x: hidden!important;
+}
+.el-dialog .el-dialog__footer {
+  text-align: right!important;
+  padding: 12px 10px 10px 10px!important;
+  border-top: 1px solid #e8e8e8!important;
+}
+.machine-box {
+  padding: 8px;
+  background: #efefef;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin: 5px 0;
+}
+.register-box {
+  cursor: pointer;
+  margin-top: 15px;
+}
+</style>

package/src/login/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 codeless from '@/codeless/components/index';
+import visual from '@/visual/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/base.css';
+import '@/assets/style/main.css';
+import '@/assets/style/codeless.css';
+import '@/assets/style/visual.css';
+import 'default-passive-events';
+
+const app = createApp(App);
+app.config.productionTip = false;
+
+app
+  .use(store)
+  .use(router)
+  .use(ElementPlus, { locale: zhCn })
+  .use(codeless)
+  .use(visual)
+  .use(directives)
+  .mount('#app');
+
+export default app;

package/src/login/router.js

@@ -0,0 +1,33 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import { useNProgress } from '@/utils/progress';
+
+const { start, done } = useNProgress();
+const routes = [{
+  name: 'notfound',
+  path: '/:pathMatch(.*)',
+  text: '访问地址不存在',
+  meta: {
+    title: '访问地址不存在',
+  },
+  component: () => import('@/error/404.vue')
+}];
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.VITE_WEB_PATH || '/'),
+  routes
+});
+
+router.beforeEach((to, _, next) => {
+  start();
+  next();
+});
+
+router.afterEach(() => {
+  done();
+});
+
+router.onError(() => {
+  done();
+});
+
+export default router;

package/src/main.ts

@@ -0,0 +1,20 @@
+import { isMasterApp } from '@arkxio/ark-iso'
+import { libReady } from '@arkxio/ark-lib-proxy'
+import { LIB_NAME } from './configs/subApp'
+import { preFetchLib, bindVueRuntime } from '@arkxio/ark-micro'
+import * as Vue from 'vue'
+
+// @ts-ignore
+bindVueRuntime({ Vue });
+
+(async function () {
+  const libProperties = await import('./entrance/libProperties')
+  // 注意此处传递的是 default
+  libReady(LIB_NAME, libProperties.default)
+
+  // 非子应用时（即不是被别的模块触发载入的情况），自己挂载渲染节点，方便本地调试
+  // 可根据项目实际情况控制是否载入 loadApp 文件
+  // console.log('execute system', isMasterApp())
+  // if (isMasterApp()) {
+  // }
+}()).catch(console.error)

package/src/mobile/App.vue

@@ -0,0 +1,51 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import emitter from '@/utils/bus';
+import tool from '@/utils/tool';
+
+const onScroll = tool.throttle(() => {
+  const currentScroll = window.innerHeight + window.scrollY;
+  const documentHeight = document.body.scrollHeight;
+  if (currentScroll >= documentHeight) {
+    emitter.emit('onReachBottom');
+  }
+}, 500);
+
+onMounted(async() => {
+  document.addEventListener('scroll', onScroll);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('scroll', onScroll);
+});
+</script>
+<style lang="scss">
+@import '@/assets/style/visual.css';
+#app {
+  box-sizing: border-box;
+  height: 100%;
+}
+page {
+  height: 100%
+}
+.vc-page {
+  height: 100%;
+  .loading {
+    padding: 10px 0;
+  }
+  .el-loading-spinner {
+    --el-loading-spinner-size: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    .el-loading-text {
+      margin-left: 10px;
+    }
+  }
+}
+</style>

package/src/mobile/home/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="mobile-page-container">
+    <visual-page
+      v-if="!loading"
+      :pageId="pageId"
+      :inputParam="inputParam"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
+import VisualPage from '@/mobile/view/page.vue';
+
+const route = useRoute();
+const pageId = ref();
+const inputParam = ref({});
+const loading = ref(true);
+
+watch(() => route.params?.pageId, value => {
+  loading.value = true;
+  pageId.value = value;
+  inputParam.value = route.query || {};
+  nextTick(() => loading.value = false);
+}, { immediate: true });
+</script>
+
+<style scoped>
+.mobile-page-container {
+  box-sizing: border-box;
+  height: 100%;
+}
+</style>

package/src/mobile/main.js

@@ -0,0 +1,26 @@
+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 codeless from '@/codeless/components/index';
+import visual from '@/visual/components/index';
+import App from './App.vue';
+import '@/assets/style/theme/default.css';
+import '@/assets/style/base.css';
+import '@/assets/style/codeless.css';
+import 'default-passive-events';
+import router from './router';
+
+const app = createApp(App);
+app.config.productionTip = false;
+
+app
+  .use(store)
+  .use(router)
+  .use(ElementPlus, { locale: zhCn })
+  .use(codeless)
+  .use(visual)
+  .mount('#app');
+
+export default app;