@utogether/udp-core 2.0.0-beta.26 → 2.0.0-beta.28

package/src/views/ulogin/login.vue

@@ -1,296 +1,292 @@
-<template>
-  <!-- <img :src="bg" class="wave" /> -->
-  <div :key="refreshKey" class="login-container" :style="bgStyle">
-    <div v-if="!bgStyle.backgroundImage" class="img pr-24">
-      <img :src="welcome" />
-    </div>
-    <div class="login-box">
-      <div class="login-form">
-        <h2 v-motion :initial="{ opacity: 0, y: 100 }" :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }">
-          {{ sysConfig['title'] }}
-        </h2>
-        <div
-          v-motion
-          class="input-group user focus"
-          :initial="{ opacity: 0, y: 100 }"
-          :enter="{ opacity: 1, y: 0, transition: { delay: 200 } }"
-        >
-          <div class="icon">
-            <IconifyIconOffline :icon="UserFill" width="30" height="30" />
-          </div>
-          <div>
-            <i class="ri-logout-box-line" />
-            <h5>{{ $t('message.udp.loginAccount') }}</h5>
-            <input
-              v-model.trim="contextInfo.username"
-              v-focus
-              type="text"
-              class="input"
-              @blur="onUserBlur"
-              @keyup.enter="onLogin"
-            />
-          </div>
-        </div>
-        <div
-          v-motion
-          class="input-group pwd focus"
-          :initial="{ opacity: 0, y: 100 }"
-          :enter="{
-            opacity: 1,
-            y: 0,
-            transition: { delay: 300 }
-          }"
-        >
-          <div class="icon">
-            <IconifyIconOffline :icon="LockFill" width="30" height="30" />
-          </div>
-          <div>
-            <h5>{{ $t('message.udp.password') }}</h5>
-            <input
-              v-model.trim="contextInfo.passWord"
-              type="password"
-              class="input"
-              @blur="onPwdBlur"
-              @keyup.enter="onLogin"
-            />
-          </div>
-        </div>
-        <button
-          v-motion
-          class="btn"
-          :initial="{ opacity: 0, y: 10 }"
-          :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
-          :disabled="loading"
-          :class="{ loading: loading }"
-          @click="onLogin"
-        >
-          {{ $t('message.udp.login') }}
-        </button>
-      </div>
-    </div>
-    <div v-if="sysConfig.techSupport === 'Y'" class="absolute flex justify-center w-full font-bold bottom-1">
-      <img :src="utogether" class="!h-10" style="height: 40px" />
-      <span class="flex flex-row justify-center" style="width: 300px">
-        <span style="font-size: 0; text-align: center">
-          <a
-            href="http://www.u-together.cn/"
-            target="_blank"
-            class="!inline-block"
-            style="margin-bottom: -5px; font-size: 17px; color: #fff; mix-blend-mode: difference"
-            :style="{ color: sysConfig.baseColor || '#FFF' }"
-          >
-            深圳友聚信息技术有限公司
-          </a>
-          <a
-            href="http://www.u-together.cn/"
-            target="_blank"
-            class="!inline-block"
-            style="font-size: 12px; color: #fff; mix-blend-mode: difference"
-            :style="{ color: sysConfig.baseColor || '#FFF' }"
-          >
-            SHENZHEN U-TOGETHER CO. LTD
-          </a>
-        </span>
-        <span class="flex items-center text-white" style="width: 75px; font-size: 10px">技术支持</span>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-export default { name: 'LoginView' };
-</script>
-
-<script setup lang="ts">
-import { ref, reactive, onBeforeMount } from 'vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-// import io from 'socket.io-client';
-import { useFavicon } from '@vueuse/core';
-import { isEmpty } from 'xe-utils';
-import { removeClass, storageLocal, errorMessage, cookies, delay } from '@utogether/utils';
-import to from 'await-to-js';
-import CryptoJS from 'crypto-js';
-import { useSystemStoreHook } from '../../store/modules/system';
-import { useLayout } from '../../layout/hooks/useLayout';
-import { useDataThemeChange } from '../../layout/hooks/useDataThemeChange';
-import { getBaseURL, getServiceApi } from '../../api';
-import { userMonitor } from '../../api/user';
-import { kTOKEN, kCKTOKEN, kLOGINER, kSYSCONFIG, kCRYPTO, kPASSWORD } from '../../contant';
-import { onLogined, onBeforeLogined } from '../../utils/lifecycle';
-// import bg from '../../assets/svg/bg.svg?component';
-import utogether from '../../assets/images/utogether.png';
-import welcome from '../../assets/images/welcome.png';
-
-import LockFill from '@iconify-icons/ri/lock-fill';
-import UserFill from '@iconify-icons/ri/user-3-fill';
-
-interface IContextProps {
-  username: string;
-  passWord: string;
-  verify: number | null;
-  svg: any;
-  domain: string;
-}
-interface IRSAPublic {
-  publicKeyExponent: string;
-  publicKeyModulus: string;
-  requestKey: string;
-}
-const contextInfo: IContextProps = reactive({
-  username: '',
-  passWord: '',
-  requestKey: '',
-  verify: null,
-  svg: null,
-  domain: ''
-});
-const publicRSA: IRSAPublic = reactive({
-  publicKeyExponent: '10001',
-  publicKeyModulus:
-    'a12708ab26367e1711bd767f6bb1f29afbd85380185723d7b492230e2567c95cf5718eca745da0643400ca619fbeec892df61abe1f71ad3b822d076ed831080c53782edf8c0627ee95c57e2bee12fe55da2b3cadec59947a75ccccbbf36fb3b781c93b4bf51489789f1c0849f9023a16ec70bef41a504785e1082b6f13588e29',
-  requestKey: ''
-});
-
-const bgStyle = ref({
-  backgroundImage: '',
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center'
-});
-const refreshKey = ref(0);
-
-const sysConfig = ref<IRecord>({});
-const router = useRouter();
-const { t } = useI18n();
-const serviceApi = getServiceApi();
-// const { $config } = useGlobal();
-
-const { initStorage } = useLayout();
-const { overallStyle, dataThemeChange } = useDataThemeChange();
-initStorage();
-
-const loading = ref(false);
-// 登录
-const onLogin = async () => {
-  // return;
-  const { username, passWord, verify } = contextInfo;
-  if (isEmpty(username) || isEmpty(passWord)) {
-    return errorMessage(t('message.tip.loginFailure'));
-  }
-  // @ts-ignore
-  setMaxDigits(200);
-  // @ts-ignore
-  const rsakeypair = new RSAKeyPair(publicRSA.publicKeyExponent, '', publicRSA.publicKeyModulus);
-  // @ts-ignore
-  const password = encryptedString(rsakeypair, passWord.split('').reverse().join(''));
-  // const key = new JSEencrypt();
-  // key.setPublicKey(
-  //   '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQChJwirJjZ+FxG9dn9rsfKa+9hTgBhXI9e0kiMOJWfJXPVxjsp0XaBkNADKYZ++7Ikt9hq+H3GtO4ItB27YMQgMU3gu34wGJ+6VxX4r7hL+VdorPK3sWZR6dczMu/Nvs7eByTtL9RSJeJ8cCEn5AjoW7HC+9BpQR4XhCCtvE1iOKQIDAQAB-----END PUBLIC KEY-----'
-  // );
-  // const password = key.encrypt(passWord);
-  // // console.log('password1 ===', password1);
-  // console.log('password ===', password);
-  // 执行登录成功后的函数
-  onBeforeLogined();
-  const param = {
-    username,
-    password,
-    requestKey: publicRSA.requestKey,
-    verify: verify,
-    domain: getBaseURL()
-  };
-  loading.value = true;
-  const [err, data] = await to(serviceApi.post('/uath/login', param));
-  if (err) {
-    loading.value = false;
-    return;
-  }
-  cookies.set(kPASSWORD, CryptoJS.AES.encrypt(contextInfo.passWord, kCRYPTO));
-  useSystemStoreHook().setPassword(contextInfo.passWord);
-  useSystemStoreHook().setSessionKey(data);
-  cacheToken(data);
-  cookies.set(kLOGINER, username);
-
-  // initSocket(username);
-  await delay(64);
-  // 执行登录成功后的函数
-  onLogined();
-  router.push('/');
-  userMonitor(username);
-  loading.value = false;
-};
-
-function onUserBlur() {
-  if (contextInfo.username.length === 0) removeClass(document.querySelector('.user'), 'focus');
-}
-
-function onPwdBlur() {
-  if (contextInfo.passWord.length === 0) removeClass(document.querySelector('.pwd'), 'focus');
-}
-
-/**
- * @description: 缓存token
- * @param {*} token token数据
- * @return {*}
- */
-const cacheToken = token => {
-  const { access_token, expires_in, refresh_token } = token;
-  const cache = {
-    accessToken: access_token,
-    refreshToken: refresh_token,
-    // expires: Date.now() + expires_in
-    expires: Date.now() + expires_in * 1000
-  };
-
-  cookies.set(kCKTOKEN, token.access_token);
-  const dataString = JSON.stringify(cache);
-  expires_in > 0 ? cookies.set(kTOKEN, dataString) : cookies.set(kTOKEN, dataString);
-};
-
-// let socketIo = null;
-// const initSocket = username => {
-//   socketIo = io(`ws://119.145.169.186:10006/webSocket/${username}`, {
-//     transports: ['websocket']
-//   });
-//   socketIo.on('connection', res => {
-//     console.log('connection', res);
-//   });
-//   socketIo.on('connected', res => {
-//     console.log('connected', res);
-//   });
-//   socketIo.on('close', res => {
-//     console.log('connected', res);
-//   });
-//   socketIo.on('message', res => {
-//     console.log('message', res);
-//     // ElNotification({
-//     //   title: '您有一条新的消息',
-//     //   message: res,
-//     //   type: 'success'
-//     // });
-//   });
-// };
-
-const getSysConfig = async () => {
-  sysConfig.value = storageLocal.getItem(kSYSCONFIG);
-
-  bgStyle.value = {
-    backgroundImage: sysConfig.value['backgroundImg'] ? `url(${sysConfig.value['backgroundImg']})` : ``,
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center'
-  };
-
-  const favicon = useFavicon();
-  favicon.value = sysConfig.value.favicon || utogether;
-};
-
-dataThemeChange(overallStyle.value);
-
-onBeforeMount(() => {
-  getSysConfig();
-});
-</script>
-
-<style scoped>
-@import url('../../style/login.css');
-</style>
+<template>
+  <!-- <img :src="bg" class="wave" /> -->
+  <div :key="refreshKey" class="login-container" :style="bgStyle">
+    <div v-if="!bgStyle.backgroundImage" class="img pr-24">
+      <img :src="welcome" />
+    </div>
+    <div class="login-box">
+      <div class="login-form">
+        <h2 v-motion :initial="{ opacity: 0, y: 100 }" :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }">
+          {{ sysConfig['title'] }}
+        </h2>
+        <div
+          v-motion
+          class="input-group user focus"
+          :initial="{ opacity: 0, y: 100 }"
+          :enter="{ opacity: 1, y: 0, transition: { delay: 200 } }"
+        >
+          <div class="icon">
+            <i class="ri-user-fill ri-lg" />
+          </div>
+          <div>
+            <i class="ri-logout-box-line" />
+            <h5>{{ $t('message.udp.loginAccount') }}</h5>
+            <input
+              v-model.trim="contextInfo.username"
+              v-focus
+              type="text"
+              class="input"
+              @blur="onUserBlur"
+              @keyup.enter="onLogin"
+            />
+          </div>
+        </div>
+        <div
+          v-motion
+          class="input-group pwd focus"
+          :initial="{ opacity: 0, y: 100 }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: { delay: 300 }
+          }"
+        >
+          <div class="icon">
+            <i class="ri-lock-fill ri-lg" />
+          </div>
+          <div>
+            <h5>{{ $t('message.udp.password') }}</h5>
+            <input
+              v-model.trim="contextInfo.passWord"
+              type="password"
+              class="input"
+              @blur="onPwdBlur"
+              @keyup.enter="onLogin"
+            />
+          </div>
+        </div>
+        <button
+          v-motion
+          class="btn"
+          :initial="{ opacity: 0, y: 10 }"
+          :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
+          :disabled="loading"
+          :class="{ loading: loading }"
+          @click="onLogin"
+        >
+          {{ $t('message.udp.login') }}
+        </button>
+      </div>
+    </div>
+    <div v-if="sysConfig.techSupport === 'Y'" class="absolute flex justify-center w-full font-bold bottom-1">
+      <img :src="utogether" class="h-10!" style="height: 40px" />
+      <span class="flex flex-row justify-center" style="width: 300px">
+        <span style="font-size: 0; text-align: center">
+          <a
+            href="http://www.u-together.cn/"
+            target="_blank"
+            class="inline-block!"
+            style="margin-bottom: -5px; font-size: 17px; color: #fff; mix-blend-mode: difference"
+            :style="{ color: sysConfig.baseColor || '#FFF' }"
+          >
+            深圳友聚信息技术有限公司
+          </a>
+          <a
+            href="http://www.u-together.cn/"
+            target="_blank"
+            class="inline-block!"
+            style="font-size: 12px; color: #fff; mix-blend-mode: difference"
+            :style="{ color: sysConfig.baseColor || '#FFF' }"
+          >
+            SHENZHEN U-TOGETHER CO. LTD
+          </a>
+        </span>
+        <span class="flex items-center text-white" style="width: 75px; font-size: 10px">技术支持</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default { name: 'LoginView' };
+</script>
+
+<script setup lang="ts">
+import { ref, reactive, onBeforeMount } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+// import io from 'socket.io-client';
+import { useFavicon } from '@vueuse/core';
+import { isEmpty } from 'xe-utils';
+import { removeClass, storageLocal, errorMessage, cookies, delay } from '@utogether/utils';
+import to from 'await-to-js';
+import CryptoJS from 'crypto-js';
+import { useSystemStoreHook } from '../../store/modules/system';
+import { useLayout } from '../../layout/hooks/useLayout';
+import { useDataThemeChange } from '../../layout/hooks/useDataThemeChange';
+import { getBaseURL, getServiceApi } from '../../api';
+import { userMonitor } from '../../api/user';
+import { kTOKEN, kCKTOKEN, kLOGINER, kSYSCONFIG, kCRYPTO, kPASSWORD } from '../../contant';
+import { onLogined, onBeforeLogined } from '../../utils/lifecycle';
+import utogether from '../../assets/images/utogether.png';
+import welcome from '../../assets/images/welcome.png';
+
+interface IContextProps {
+  username: string;
+  passWord: string;
+  verify: number | null;
+  svg: any;
+  domain: string;
+}
+interface IRSAPublic {
+  publicKeyExponent: string;
+  publicKeyModulus: string;
+  requestKey: string;
+}
+const contextInfo: IContextProps = reactive({
+  username: '',
+  passWord: '',
+  requestKey: '',
+  verify: null,
+  svg: null,
+  domain: ''
+});
+const publicRSA: IRSAPublic = reactive({
+  publicKeyExponent: '10001',
+  publicKeyModulus:
+    'a12708ab26367e1711bd767f6bb1f29afbd85380185723d7b492230e2567c95cf5718eca745da0643400ca619fbeec892df61abe1f71ad3b822d076ed831080c53782edf8c0627ee95c57e2bee12fe55da2b3cadec59947a75ccccbbf36fb3b781c93b4bf51489789f1c0849f9023a16ec70bef41a504785e1082b6f13588e29',
+  requestKey: ''
+});
+
+const bgStyle = ref({
+  backgroundImage: '',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center'
+});
+const refreshKey = ref(0);
+
+const sysConfig = ref<IRecord>({});
+const router = useRouter();
+const { t } = useI18n();
+const serviceApi = getServiceApi();
+// const { $config } = useGlobal();
+
+const { initStorage } = useLayout();
+const { overallStyle, dataThemeChange } = useDataThemeChange();
+initStorage();
+
+const loading = ref(false);
+// 登录
+const onLogin = async () => {
+  // return;
+  const { username, passWord, verify } = contextInfo;
+  if (isEmpty(username) || isEmpty(passWord)) {
+    return errorMessage(t('message.tip.loginFailure'));
+  }
+  // @ts-ignore
+  setMaxDigits(200);
+  // @ts-ignore
+  const rsakeypair = new RSAKeyPair(publicRSA.publicKeyExponent, '', publicRSA.publicKeyModulus);
+  // @ts-ignore
+  const password = encryptedString(rsakeypair, passWord.split('').reverse().join(''));
+  // const key = new JSEencrypt();
+  // key.setPublicKey(
+  //   '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQChJwirJjZ+FxG9dn9rsfKa+9hTgBhXI9e0kiMOJWfJXPVxjsp0XaBkNADKYZ++7Ikt9hq+H3GtO4ItB27YMQgMU3gu34wGJ+6VxX4r7hL+VdorPK3sWZR6dczMu/Nvs7eByTtL9RSJeJ8cCEn5AjoW7HC+9BpQR4XhCCtvE1iOKQIDAQAB-----END PUBLIC KEY-----'
+  // );
+  // const password = key.encrypt(passWord);
+  // // console.log('password1 ===', password1);
+  // console.log('password ===', password);
+  // 执行登录成功后的函数
+  onBeforeLogined();
+  const param = {
+    username,
+    password,
+    requestKey: publicRSA.requestKey,
+    verify: verify,
+    domain: getBaseURL()
+  };
+  loading.value = true;
+  const [err, data] = await to(serviceApi.post('/uath/login', param));
+  if (err) {
+    loading.value = false;
+    return;
+  }
+  cookies.set(kPASSWORD, CryptoJS.AES.encrypt(contextInfo.passWord, kCRYPTO));
+  useSystemStoreHook().setPassword(contextInfo.passWord);
+  useSystemStoreHook().setSessionKey(data);
+  cacheToken(data);
+  cookies.set(kLOGINER, username);
+
+  // initSocket(username);
+  await delay(64);
+  // 执行登录成功后的函数
+  onLogined();
+  router.push('/');
+  userMonitor(username);
+  loading.value = false;
+};
+
+function onUserBlur() {
+  if (contextInfo.username.length === 0) removeClass(document.querySelector('.user'), 'focus');
+}
+
+function onPwdBlur() {
+  if (contextInfo.passWord.length === 0) removeClass(document.querySelector('.pwd'), 'focus');
+}
+
+/**
+ * @description: 缓存token
+ * @param {*} token token数据
+ * @return {*}
+ */
+const cacheToken = token => {
+  const { access_token, expires_in, refresh_token } = token;
+  const cache = {
+    accessToken: access_token,
+    refreshToken: refresh_token,
+    expires: Date.now() + expires_in
+    // expires: Date.now() + expires_in * 1000
+  };
+
+  cookies.set(kCKTOKEN, token.access_token);
+  const dataString = JSON.stringify(cache);
+  expires_in > 0 ? cookies.set(kTOKEN, dataString) : cookies.set(kTOKEN, dataString);
+};
+
+// let socketIo = null;
+// const initSocket = username => {
+//   socketIo = io(`ws://119.145.169.186:10006/webSocket/${username}`, {
+//     transports: ['websocket']
+//   });
+//   socketIo.on('connection', res => {
+//     console.log('connection', res);
+//   });
+//   socketIo.on('connected', res => {
+//     console.log('connected', res);
+//   });
+//   socketIo.on('close', res => {
+//     console.log('connected', res);
+//   });
+//   socketIo.on('message', res => {
+//     console.log('message', res);
+//     // ElNotification({
+//     //   title: '您有一条新的消息',
+//     //   message: res,
+//     //   type: 'success'
+//     // });
+//   });
+// };
+
+const getSysConfig = async () => {
+  sysConfig.value = storageLocal.getItem(kSYSCONFIG);
+
+  bgStyle.value = {
+    backgroundImage: sysConfig.value['backgroundImg'] ? `url(${sysConfig.value['backgroundImg']})` : ``,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center'
+  };
+
+  const favicon = useFavicon();
+  favicon.value = sysConfig.value.favicon || utogether;
+};
+
+dataThemeChange(overallStyle.value);
+
+onBeforeMount(() => {
+  getSysConfig();
+});
+</script>
+
+<style scoped>
+@import url('../../style/login.css');
+</style>