@arkxos/arkos-theme-classic 0.1.0

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

@@ -0,0 +1,174 @@
+<template>
+	<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @submit.enter.prevent @keyup.enter.native="login">
+		<el-form-item prop="user">
+			<el-input v-model="form.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')">
+				<template #append>
+					<el-select v-model="userType" style="width: 130px;">
+						<el-option :label="$t('login.admin')" value="admin"></el-option>
+						<el-option :label="$t('login.user')" value="user"></el-option>
+					</el-select>
+				</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item prop="password">
+			<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
+		</el-form-item>
+  <el-form-item prop="code" v-if="captchaEnabled">
+    <el-input
+      v-model="form.code"
+      auto-complete="off"
+      placeholder="验证码"
+      style="width: 63%"
+    >
+      <template #prefix><el-icon><el-icon-camera/></el-icon></template>
+    </el-input>
+    <div class="login-code">
+      <img :src="codeUrl" @click="getVerifyCode" class="login-code-img"/>
+    </div>
+  </el-form-item>
+		<el-form-item style="margin-bottom: 10px;">
+				<el-col :span="12">
+					<el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
+				</el-col>
+				<el-col :span="12" class="login-forgot">
+					<router-link to="/reset_password">{{ $t('login.forgetPassword') }}？</router-link>
+				</el-col>
+		</el-form-item>
+		<el-form-item>
+			<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
+		</el-form-item>
+		<div class="login-reg">
+			{{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
+		</div>
+	</el-form>
+</template>
+
+<script>
+// import {getCodeImg, getInfo} from "@/api/login";
+// 	import {encrypt} from "@/puzzles/arkos-system/utils/jsencrypt";
+// 	import {getRouters} from "@/api/menu";
+// import ValidCode from "@/assets/icons/validCode.vue";
+import { useMessage } from '@arkxos/arkos-core'
+// import { allUserMenuData, staticMenuData } from "@/router/testRouter"
+// const system = arkosStarter.system
+
+export default {
+  // components: {ValidCode},
+  data() {
+    return {
+      userType: 'admin',
+      form: {
+        user: 'admin',
+        password: '123456',
+        code: '',
+        verKey: '',
+        autologin: false
+      },
+      rules: {
+        user: [
+          { required: true, message: this.$t('login.userError'), trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: this.$t('login.PWError'), trigger: 'blur' }
+        ]
+      },
+      islogin: false,
+      captchaEnabled: true,
+      codeUrl: ''
+    }
+  },
+  watch: {
+    userType(val) {
+      if (val == 'admin') {
+        this.form.user = ''
+        this.form.password = ''
+      } else if (val == 'user') {
+        this.form.user = ''
+        this.form.password = ''
+      }
+    }
+  },
+  mounted() {
+    this.getVerifyCode()
+  },
+  methods: {
+    fixMenuPath(menus, parentMenu) {
+      menus.forEach(menu => {
+        if (!menu.path.startsWith('http') &&
+						!menu.path.startsWith('/')) {
+          menu.path = parentMenu.path + '/' + menu.path
+        }
+        if (menu.children) {
+          this.fixMenuPath(menu.children, menu)
+        }
+      })
+    },
+    async login() {
+      const validate = await this.$refs.loginForm.validate().catch(() => {})
+      if (!validate) { return false }
+
+      this.islogin = true
+      const data = {
+        username: this.form.user,
+        password: this.form.password, // this.$TOOL.crypto.MD5(this.form.password),
+        code: this.form.code,
+        verKey: this.form.verKey
+      }
+
+      console.log('login form', data)
+      // 获取token
+      this.$access.getToken(data).then(token => {
+        this.islogin = false;
+        // this.$TOOL.cookie.set("TOKEN", user.data.token, {
+        // 	expires: this.form.autologin? 24*60*60 : 0
+        // })
+        // this.$TOOL.data.set("USER_INFO", user.data.userInfo)
+        this.$access.refreshUserInfo().then(() => {
+          console.log('进入系统')
+          this.$router.replace({
+            path: '/'
+          })
+          this.$message.success('登录成功')
+          this.islogin = false
+        }).catch(err => {
+          this.islogin = false;
+          useMessage().error(err);
+
+          this.getVerifyCode()
+        })
+      }).catch((err) => {
+        this.islogin = false;
+        useMessage().error(err);
+
+        this.getVerifyCode()
+      })
+    },
+    async getVerifyCode() {
+      const res = await this.$API.auth.getCodeImg.post();
+      const responseData = res.data;
+      this.captchaEnabled = responseData.captchaEnabled === undefined ? true : responseData.captchaEnabled;
+      if (this.captchaEnabled) {
+        this.codeUrl = responseData.image;
+        this.form.verKey = responseData.verKey;
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.login-code {
+  width: 33%;
+  height: 40px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+
+.login-code-img {
+  height: 40px;
+  padding-left: 12px;
+}
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+	<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
+		<el-form-item prop="phone">
+			<el-input v-model="form.phone" prefix-icon="el-icon-iphone" clearable :placeholder="$t('login.mobilePlaceholder')">
+				<template #prepend>+86</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item prop="yzm"  style="margin-bottom: 35px;">
+			<div class="login-msg-yzm">
+				<el-input v-model="form.yzm" prefix-icon="el-icon-unlock" clearable :placeholder="$t('login.smsPlaceholder')"></el-input>
+				<el-button @click="getYzm" :disabled="disabled">{{this.$t('login.smsGet')}}<span v-if="disabled"> ({{time}})</span></el-button>
+			</div>
+		</el-form-item>
+		<el-form-item>
+			<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
+		</el-form-item>
+		<div class="login-reg">
+			{{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
+		</div>
+	</el-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        phone: '',
+        yzm: '',
+      },
+      rules: {
+        phone: [
+          { required: true, message: this.$t('login.mobileError') }
+        ],
+        yzm: [
+          { required: true, message: this.$t('login.smsError') }
+        ]
+      },
+      disabled: false,
+      time: 0,
+      islogin: false,
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    async getYzm() {
+      const validate = await this.$refs.loginForm.validateField('phone').catch(() => {})
+      if (!validate) { return false }
+
+      this.$message.success(this.$t('login.smsSent'))
+      this.disabled = true
+      this.time = 60
+      const t = setInterval(() => {
+        this.time -= 1
+        if (this.time < 1) {
+          clearInterval(t)
+          this.disabled = false
+          this.time = 0
+        }
+      }, 1000)
+    },
+    async login() {
+      const validate = await this.$refs.loginForm.validate().catch(() => {})
+      if (!validate) { return false }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/os-themes/classic/views/login/index.vue

@@ -0,0 +1,210 @@
+<template>
+	<div class="login_bg">
+		<div class="login_adv" style="background-image: url(img/auth_banner.jpg);">
+			<div class="login_adv__title">
+				<h2>ArkX OS</h2>
+				<h4>{{ $t('login.slogan') }}</h4>
+				<p>{{ $t('login.describe') }}</p>
+				<div>
+					<span>
+						<el-icon><sc-icon-vue /></el-icon>
+					</span>
+					<span>
+						<el-icon class="add"><el-icon-plus /></el-icon>
+					</span>
+					<span>
+						<el-icon><el-icon-eleme-filled /></el-icon>
+					</span>
+				</div>
+			</div>
+			<div class="login_adv__mask"></div>
+			<div class="login_adv__bottom">
+				© {{$CONFIG.ArkosTitle}} {{$CONFIG.APP_VER}}
+			</div>
+		</div>
+		<div class="login_main">
+			<div class="login_config">
+				<el-button :icon="config.dark?'el-icon-sunny':'el-icon-moon'" circle type="info" @click="configDark"></el-button>
+				<el-dropdown trigger="click" placement="bottom-end" @command="configLang">
+					<el-button circle>
+						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z" fill="currentColor"></path><path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" fill="currentColor"></path></svg>
+					</el-button>
+					<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item v-for="item in lang" :key="item.value" :command="item" :class="{'selected':config.lang==item.value}">{{item.name}}</el-dropdown-item>
+						</el-dropdown-menu>
+					</template>
+				</el-dropdown>
+			</div>
+			<div class="login-form">
+				<div class="login-header">
+					<div class="logo">
+						<img :alt="$CONFIG.ArkosTitle" src="img/logo.png">
+						<label>{{$CONFIG.ArkosTitle}}</label>
+					</div>
+				</div>
+				<el-tabs>
+					<el-tab-pane :label="$t('login.accountLogin')" lazy>
+						<password-form></password-form>
+					</el-tab-pane>
+<!--					<el-tab-pane :label="$t('login.mobileLogin')" lazy>-->
+<!--						<phone-form></phone-form>-->
+<!--					</el-tab-pane>-->
+				</el-tabs>
+				<template v-if="$CONFIG.MY_SHOW_LOGIN_OAUTH">
+					<el-divider>{{ $t('login.signInOther') }}</el-divider>
+					<div class="login-oauth">
+						<el-button type="success" icon="sc-icon-wechat" circle @click="wechatLogin"></el-button>
+					</div>
+				</template>
+			</div>
+		</div>
+	</div>
+	<el-dialog v-model="showWechatLogin" :title="$t('login.wechatLoginTitle')" :width="400" destroy-on-close>
+		<div class="qrCodeLogin">
+			<sc-qr-code class="qrCode" :text="WechatLoginCode" :size="200"></sc-qr-code>
+			<p class="msg">{{$tc('login.wechatLoginMsg', 1)}}<br/>{{$tc('login.wechatLoginMsg', 2)}}</p>
+			<div class="qrCodeLogin-result" v-if="isWechatLoginResult">
+				<el-result icon="success" :title="$tc('login.wechatLoginResult', 1)" :sub-title="$tc('login.wechatLoginResult', 2)"></el-result>
+			</div>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import passwordForm from './components/passwordForm.vue'
+import phoneForm from './components/phoneForm.vue'
+import iframeStore from '../../store/modules/iframe';
+import keepAliveStore from '../../store/modules/keepAlive';
+import viewTagsStore from '../../store/modules/viewTags';
+
+export default {
+  components: {
+    passwordForm,
+    phoneForm
+  },
+  data() {
+    return {
+      config: {
+        lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
+        dark: this.$TOOL.data.get('APP_DARK') || false
+      },
+      lang: [
+        {
+          name: '简体中文',
+          value: 'zh-cn',
+        },
+        {
+          name: 'English',
+          value: 'en',
+        }
+      ],
+      WechatLoginCode: '',
+      showWechatLogin: false,
+      isWechatLoginResult: false
+    }
+  },
+  watch: {
+    'config.dark'(val) {
+      if (val) {
+        document.documentElement.classList.add('dark')
+        this.$TOOL.data.set('APP_DARK', val)
+      } else {
+        document.documentElement.classList.remove('dark')
+        this.$TOOL.data.remove('APP_DARK')
+      }
+    },
+    'config.lang'(val) {
+      this.$i18n.locale = val
+      console.log('lang val', val)
+      this.$TOOL.data.set('APP_LANG', val)
+    }
+  },
+  created: function() {
+    console.log('this.$i18n', this.$i18n)
+    this.$i18n.local = 'zh-ch'
+    this.$TOOL.cookie.remove('TOKEN')
+    this.$TOOL.data.remove('USER_INFO')
+    this.$TOOL.data.remove('MENU')
+    this.$TOOL.data.remove('PERMISSIONS')
+    this.$TOOL.data.remove('DASHBOARDGRID')
+    this.$TOOL.data.remove('grid')
+
+    viewTagsStore().clearViewTags()
+    keepAliveStore().clearKeepLive()
+    iframeStore().clearIframeList()
+    // console.log('%c SCUI %c Gitee: https://gitee.com/lolicode/scui', 'background:#666;color:#fff;border-radius:3px;', '')
+  },
+  methods: {
+    configDark() {
+      this.config.dark = !this.config.dark
+    },
+    configLang(command) {
+      this.config.lang = command.value
+    },
+    wechatLogin() {
+      this.showWechatLogin = true
+      this.WechatLoginCode = 'SCUI-823677237287236-' + new Date().getTime()
+      this.isWechatLoginResult = false
+      setTimeout(() => {
+        this.isWechatLoginResult = true
+      }, 3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.login_bg {width: 100%;height: 100%;background: #fff;display: flex;}
+	.login_adv {width: 33.33333%;background-color: #555;background-size: cover;background-position: center center;background-repeat: no-repeat;position: relative;}
+	.login_adv__title {color: #fff;padding: 40px;position: absolute;top:0px;left:0px;right: 0px;z-index: 2;}
+	.login_adv__title h2 {font-size: 40px;}
+	.login_adv__title h4 {font-size: 18px;margin-top: 10px;font-weight: normal;}
+	.login_adv__title p {font-size: 14px;margin-top:10px;line-height: 1.8;color: rgba(255,255,255,0.6);}
+	.login_adv__title div {margin-top: 10px;display: flex;align-items: center;}
+	.login_adv__title div span {margin-right: 15px;}
+	.login_adv__title div i {font-size: 40px;}
+	.login_adv__title div i.add {font-size: 20px;color: rgba(255,255,255,0.6);}
+	.login_adv__bottom {position: absolute;left:0px;right: 0px;bottom: 0px;color: #fff;padding: 40px;background-image:linear-gradient(transparent, #000);z-index: 3;}
+	.login_adv__mask {position: absolute;top:0px;left:0px;right: 0px;bottom: 0px;background: rgba(0,0,0,0.5);z-index: 1;}
+
+	.login_main {flex: 1;overflow: auto;display:flex;}
+	.login-form {width: 400px;margin: auto;padding:20px 0;}
+	.login-header {margin-bottom: 40px;}
+	.login-header .logo {display: flex;align-items: center;}
+	.login-header .logo img {width: 40px;height: 40px;vertical-align: bottom;margin-right: 10px;}
+	.login-header .logo label {font-size: 26px;font-weight: bold;}
+	.login-oauth {display: flex;justify-content:space-around;}
+	.login-form .el-divider {margin-top:40px;}
+
+	.login-form {}
+	.login-form:deep(.el-tabs) .el-tabs__header {margin-bottom: 25px;}
+	.login-form:deep(.el-tabs) .el-tabs__header .el-tabs__item {font-size: 14px;}
+
+	.login-form:deep(.login-forgot) {text-align: right;}
+	.login-form:deep(.login-forgot) a {color: var(--el-color-primary);}
+	.login-form:deep(.login-forgot) a:hover {color: var(--el-color-primary-light-3);}
+	.login-form:deep(.login-reg) {font-size: 14px;color: var(--el-text-color-primary);}
+	.login-form:deep(.login-reg) a {color: var(--el-color-primary);}
+	.login-form:deep(.login-reg) a:hover {color: var(--el-color-primary-light-3);}
+
+	.login_config {position: absolute;top:20px;right: 20px;}
+
+	.login-form:deep(.login-msg-yzm) {display: flex;width: 100%;}
+	.login-form:deep(.login-msg-yzm) .el-button {margin-left: 10px;--el-button-size:42px;}
+
+	.qrCodeLogin {text-align: center;position: relative;padding: 20px 0;}
+	.qrCodeLogin img.qrCode {background: #fff;padding:20px;border-radius:10px;}
+	.qrCodeLogin p.msg {margin-top: 15px;}
+	.qrCodeLogin .qrCodeLogin-result {position: absolute;top:0;left:0;right: 0;bottom: 0;text-align: center;background: var(--el-mask-color);}
+
+	@media (max-width: 1200px){
+		.login-form {width: 340px;}
+	}
+	@media (max-width: 1000px){
+		.login_main {display: block;}
+		.login_main .login_config {position: static;padding:20px 20px 0 20px;text-align: right;}
+		.login-form {width:100%;padding:20px 40px;}
+		.login_adv {display: none;}
+	}
+</style>

package/src/os-themes/classic/views/login/resetPassword.vue

@@ -0,0 +1,125 @@
+<template>
+  <common-page title="重置密码">
+    <el-steps :active="stepActive" simple finish-status="success">
+      <el-step title="填写新密码" />
+      <el-step title="完成重置" />
+    </el-steps>
+    <el-form v-if="stepActive==0" ref="form" :model="form" :rules="rules" :label-width="120">
+      <el-form-item label="登录账号" prop="user">
+        <el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
+        <div class="el-form-item-msg">请输入注册时填写的登录账号</div>
+      </el-form-item>
+      <el-form-item label="手机号码" prop="phone">
+        <el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
+      </el-form-item>
+      <el-form-item label="短信验证码" prop="yzm">
+        <div class="yzm">
+          <el-input v-model="form.yzm" placeholder="请输入6位短信验证码"></el-input>
+          <el-button @click="getYzm" :disabled="disabled">获取验证码<span v-if="disabled"> ({{time}})</span></el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label="新密码" prop="newpw">
+        <el-input v-model="form.newpw" show-password placeholder="请输入新密码"></el-input>
+        <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
+      </el-form-item>
+      <el-form-item label="确认新密码" prop="newpw2">
+        <el-input v-model="form.newpw2" show-password placeholder="请再一次输入新密码"></el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="save">提交</el-button>
+      </el-form-item>
+    </el-form>
+    <el-result v-if="stepActive==1" icon="success" title="密码重置成功" sub-title="请牢记自己的新密码,返回登录后使用新密码登录">
+      <template #extra>
+        <el-button type="primary" @click="backLogin">返回登录</el-button>
+      </template>
+    </el-result>
+  </common-page>
+</template>
+
+<script>
+import commonPage from './components/commonPage'
+
+export default {
+  components: {
+    commonPage
+  },
+  data() {
+    return {
+      stepActive: 0,
+      form: {
+        user: '',
+        phone: '',
+        yzm: '',
+        newpw: '',
+        newpw2: ''
+      },
+      rules: {
+        user: [
+          { required: true, message: '请输入登录账号' }
+        ],
+        phone: [
+          { required: true, message: '请输入手机号' }
+        ],
+        yzm: [
+          { required: true, message: '请输入短信验证码' }
+        ],
+        newpw: [
+          { required: true, message: '请输入新的密码' }
+        ],
+        newpw2: [
+          { required: true, message: '请再次输入新的密码' },
+          {
+            validator: (rule, value, callback) => {
+              if (value !== this.form.newpw) {
+                callback(new Error('两次输入密码不一致'));
+              } else {
+                callback();
+              }
+            }
+          }
+        ],
+      },
+      disabled: false,
+      time: 0
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    async getYzm() {
+      const validate = await this.$refs.form.validateField('phone').catch(() => {})
+      if (!validate) { return false }
+
+      this.$message.success('已发送短信至手机号码')
+      this.disabled = true
+      this.time = 60
+      var t = setInterval(() => {
+        this.time -= 1
+        if (this.time < 1) {
+          clearInterval(t)
+          this.disabled = false
+          this.time = 0
+        }
+      }, 1000)
+    },
+    async save() {
+      const validate = await this.$refs.form.validate().catch(() => {})
+      if (!validate) { return false }
+
+      this.stepActive = 1
+    },
+    backLogin() {
+      this.$router.push({
+        path: '/login'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>