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

package/src/views/login/login-view.vue

@@ -1,301 +1,297 @@
-<template>
-  <div class="select-none">
-    <div class="absolute flex justify-center items-center right-5 top-3">
-      <!-- 主题 -->
-      <!-- <el-switch
-        v-model="dataTheme"
-        inline-prompt
-        :active-icon="dayIcon"
-        :inactive-icon="darkIcon"
-        @change="dataThemeChange"
-      /> -->
-      <!-- 国际化 -->
-      <!-- <el-dropdown v-if="sysConfig['i18nEnabled'] === 'Y'" trigger="click">
-        <globalization
-          class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-hidden duration-300"
-        />
-        <template #dropdown>
-          <el-dropdown-menu class="translation">
-            <el-dropdown-item
-              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
-              @click="translationCh"
-            >
-              <IconifyIconOffline v-show="locale === 'zh'" class="check-zh" :icon="ri:check-line" />
-              简体中文
-            </el-dropdown-item>
-            <el-dropdown-item
-              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
-              @click="translationEn"
-            >
-              <span v-show="locale === 'en'" class="check-en">
-                <IconifyIconOffline :icon="ri:check-line" />
-              </span>
-              English
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown> -->
-    </div>
-    <div class="login-container">
-      <div class="bg-img" :style="{ backgroundImage: `url(${sysConfig['backgroundImg']}` }" />
-      <div class="login-box">
-        <div class="login-form">
-          <img v-if="sysConfig['logo']" class="login-logo-img" :src="sysConfig['logo']" />
-          <Motion v-if="sysConfig['title']">
-            <h2 class="outline-hidden">
-              <TypeIt :values="[sysConfig['title']]" :cursor="false" :speed="150" />
-            </h2>
-          </Motion>
-
-          <el-form ref="ruleFormRef" :model="ruleForm" :rules="loginRules" size="large">
-            <Motion :delay="100">
-              <el-form-item
-                :rules="[{ required: true, message: $t('message.udp.loginUser'), trigger: 'blur' }]"
-                :label="$t('message.udp.loginUser')"
-                prop="username"
-              >
-                <el-input v-model.trim="ruleForm.username" autofocus clearable :prefix-icon="useRenderIcon(User)" />
-              </el-form-item>
-            </Motion>
-
-            <Motion :delay="150">
-              <el-form-item prop="passWord">
-                <el-input v-model="ruleForm.passWord" clearable show-password :prefix-icon="useRenderIcon(Lock)" />
-              </el-form-item>
-            </Motion>
-            <Motion :delay="250">
-              <el-form-item>
-                <el-button
-                  class="w-full mt-4"
-                  size="default"
-                  type="primary"
-                  :loading="loading"
-                  @click="onLogin(ruleFormRef)"
-                >
-                  {{ $t('message.udp.login') }}
-                </el-button>
-              </el-form-item>
-            </Motion>
-          </el-form>
-        </div>
-        <div class="fixed text-xs text-gray-500 bottom-4">Copyright ©2021{{ sysConfig['copyright'] }}版权所有</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, onBeforeMount, onBeforeUnmount } from 'vue';
-import { useRouter } from 'vue-router';
-import type { FormInstance } from 'element-plus';
-import { storageLocal, cookies, successMessage, delay } from '@utogether/utils';
-import { toDateString } from 'xe-utils';
-import to from 'await-to-js';
-
-import Motion from './utils/motion';
-import { loginRules } from './utils/rule';
-import TypeIt from '@/components/SuTypeit';
-import { useRenderIcon } from '@/components/ReIcon/src/hooks';
-// import { useTranslationLang } from '@/layout/hooks/useTranslationLang';
-import { useLayout } from '@/layout/hooks/useLayout';
-// import { useNav } from '@/layout/hooks/useNav';
-// import { useDataThemeChange } from '@/layout/hooks/useDataThemeChange';
-import { useSystemStoreHook } from '@/store/modules/system';
-
-import { getServiceApi } from '../../api';
-import { initDict } from '../../api/user';
-import { getPlatform, getBrower } from '@/utils/browers';
-// import dayIcon from '@/assets/svg/day.svg?component';
-// import darkIcon from '@/assets/svg/dark.svg?component';
-// import globalization from '@/assets/svg/globalization.svg?component';
-import Lock from '@iconify-icons/ri/lock-fill';
-import User from '@iconify-icons/ri/user-3-fill';
-
-defineOptions({ name: 'LoginView' });
-
-interface IRSAPublic {
-  publicKeyExponent: string;
-  publicKeyModulus: string;
-  requestKey: string;
-}
-
-const router = useRouter();
-
-// const bgStyle = ref({});
-const sysConfig = ref({});
-const loading = ref(false);
-const ruleFormRef = ref<FormInstance>();
-
-const serviceApi = getServiceApi();
-
-const { initStorage } = useLayout();
-initStorage();
-// const { dataTheme, dataThemeChange } = useDataThemeChange();
-// dataThemeChange();
-// const { getDropdownItemStyle, getDropdownItemClass } = useNav();
-// const { locale, translationCh, translationEn } = useTranslationLang();
-
-const ruleForm = reactive({
-  username: '',
-  passWord: ''
-});
-
-const publicRSA: IRSAPublic = reactive({
-  publicKeyExponent: '10001',
-  publicKeyModulus:
-    'a12708ab26367e1711bd767f6bb1f29afbd85380185723d7b492230e2567c95cf5718eca745da0643400ca619fbeec892df61abe1f71ad3b822d076ed831080c53782edf8c0627ee95c57e2bee12fe55da2b3cadec59947a75ccccbbf36fb3b781c93b4bf51489789f1c0849f9023a16ec70bef41a504785e1082b6f13588e29',
-  requestKey: ''
-});
-
-const onLogin = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate(valid => {
-    if (valid) {
-      loading.value = true;
-      const { username, passWord } = ruleForm;
-
-      // @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 param = {
-        username,
-        password,
-        requestKey: publicRSA.requestKey,
-        domain: window.location.origin
-      };
-      serviceApi
-        .post('/uath/login', param)
-        .then(async (data: IResponseData) => {
-          successMessage(`👏 恭喜,成功登录${sysConfig.value['title']}!!!🎉`);
-          useSystemStoreHook().setSessionKey(data);
-          cacheToken(data);
-          cookies.set('loginer', username);
-          if (!storageLocal.getItem('kLov')) {
-            initDict().then(res => useSystemStoreHook().setDict(res));
-          }
-          await delay(300);
-          router.push('/');
-          await insertLoginInfo(username);
-        })
-        .finally(() => {
-          loading.value = false;
-        });
-    }
-  });
-};
-
-/**
- * @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 * 1000
-  };
-  const kTOKENKEY = 'authorized-token';
-
-  cookies.set('kCookies_token', token.access_token);
-  const dataString = JSON.stringify(cache);
-  expires_in > 0 ? cookies.set(kTOKENKEY, dataString) : cookies.set(kTOKENKEY, dataString);
-};
-
-const insertLoginInfo = username => {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const { browser, browserVersion } = getBrower(userAgent);
-  const obj = {
-    userName: username,
-    loginTime: toDateString(new Date()),
-    browser,
-    browserVersion,
-    operatingSystem: getPlatform(userAgent)
-  };
-  serviceApi.post('/upfm/v1/userMonitor', obj);
-};
-
-/** 使用公共函数，避免`removeEventListener`失效 */
-function onkeypress({ code }: KeyboardEvent) {
-  if (['Enter', 'NumpadEnter'].includes(code)) {
-    onLogin(ruleFormRef.value);
-  }
-}
-
-onMounted(() => {
-  window.document.addEventListener('keypress', onkeypress);
-});
-
-onBeforeUnmount(() => {
-  window.document.removeEventListener('keypress', onkeypress);
-});
-/**
- * @description:  获取系统配置
- * @return {*}
- */
-const getSysConfig = async () => {
-  const [err, data]: [Error, any] = await to(serviceApi.get('/upfm/v1/sysConfig', {}));
-  if (!err) {
-    const config = {};
-    data.list?.forEach(item => {
-      config[item.configCode] = item.configValue;
-      if (item.fileName) {
-        config[item.configCode] = window.location.origin + '/ufil' + item.configValue;
-      }
-    });
-    const env = process.env.NODE_ENV;
-    const title = data.list?.find(f => f.configCode === `${env}Title` || f.configCode === 'title')?.configValue;
-    config['title'] = title || 'U-DP';
-    sysConfig.value = config;
-    setFavicon();
-    storageLocal.setItem('kSysConfig', config);
-  }
-};
-
-const setFavicon = () => {
-  let favicon = document.querySelector('link[rel="icon"]') as HTMLElement;
-  // console.log('app', favicon)
-  if (favicon !== null) {
-    favicon['href'] = sysConfig.value['favicon'] || '../../../public/favicon.ico';
-  } else {
-    favicon = document.createElement('link');
-    favicon['rel'] = 'icon';
-    favicon['href'] = sysConfig.value['favicon'] || '../../../public/favicon.ico';
-    document.head.appendChild(favicon);
-  }
-};
-
-onBeforeMount(() => {
-  getSysConfig();
-});
-</script>
-
-<style scoped>
-@import url('@/style/login2.css');
-
-/* .translation {
-  ::v-deep(.el-dropdown-menu__item) {
-    padding: 5px 40px;
-  }
-} */
-
-.check-zh {
-  position: absolute;
-  left: 20px;
-}
-
-.check-en {
-  position: absolute;
-  left: 20px;
-}
-
-:deep(.el-input-group__append, .el-input-group__prepend) {
-  padding: 0;
-}
-</style>
+<template>
+  <div class="select-none">
+    <div class="absolute flex justify-center items-center right-5 top-3">
+      <!-- 主题 -->
+      <!-- <el-switch
+        v-model="dataTheme"
+        inline-prompt
+        :active-icon="dayIcon"
+        :inactive-icon="darkIcon"
+        @change="dataThemeChange"
+      /> -->
+      <!-- 国际化 -->
+      <!-- <el-dropdown v-if="sysConfig['i18nEnabled'] === 'Y'" trigger="click">
+        <globalization
+          class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-hidden duration-300"
+        />
+        <template #dropdown>
+          <el-dropdown-menu class="translation">
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
+              @click="translationCh"
+            >
+              <IconifyIconOffline v-show="locale === 'zh'" class="check-zh" :icon="ri:check-line" />
+              简体中文
+            </el-dropdown-item>
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'en')"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
+              @click="translationEn"
+            >
+              <span v-show="locale === 'en'" class="check-en">
+                <IconifyIconOffline :icon="ri:check-line" />
+              </span>
+              English
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown> -->
+    </div>
+    <div class="login-container">
+      <div class="bg-img" :style="{ backgroundImage: `url(${sysConfig['backgroundImg']}` }" />
+      <div class="login-box">
+        <div class="login-form">
+          <img v-if="sysConfig['logo']" class="login-logo-img" :src="sysConfig['logo']" />
+          <Motion v-if="sysConfig['title']">
+            <h2 class="outline-hidden">
+              <TypeIt :values="[sysConfig['title']]" :cursor="false" :speed="150" />
+            </h2>
+          </Motion>
+
+          <el-form ref="ruleFormRef" :model="ruleForm" :rules="loginRules" size="large">
+            <Motion :delay="100">
+              <el-form-item
+                :rules="[{ required: true, message: $t('message.udp.loginUser'), trigger: 'blur' }]"
+                :label="$t('message.udp.loginUser')"
+                prop="username"
+              >
+                <el-input v-model.trim="ruleForm.username" autofocus clearable :prefix-icon="useRenderIcon(User)" />
+              </el-form-item>
+            </Motion>
+
+            <Motion :delay="150">
+              <el-form-item prop="passWord">
+                <el-input v-model="ruleForm.passWord" clearable show-password :prefix-icon="useRenderIcon(Lock)" />
+              </el-form-item>
+            </Motion>
+            <Motion :delay="250">
+              <el-form-item>
+                <el-button
+                  class="w-full mt-4"
+                  size="default"
+                  type="primary"
+                  :loading="loading"
+                  @click="onLogin(ruleFormRef)"
+                >
+                  {{ $t('message.udp.login') }}
+                </el-button>
+              </el-form-item>
+            </Motion>
+          </el-form>
+        </div>
+        <div class="fixed text-xs text-gray-500 bottom-4">Copyright ©2021{{ sysConfig['copyright'] }}版权所有</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, onBeforeMount, onBeforeUnmount } from 'vue';
+import { useRouter } from 'vue-router';
+import type { FormInstance } from 'element-plus';
+import { storageLocal, cookies, successMessage, delay } from '@utogether/utils';
+import { toDateString } from 'xe-utils';
+import to from 'await-to-js';
+
+import Motion from './utils/motion';
+import { loginRules } from './utils/rule';
+import TypeIt from '@/components/SuTypeit';
+import { useRenderIcon } from '@/components/ReIcon/src/hooks';
+// import { useTranslationLang } from '@/layout/hooks/useTranslationLang';
+import { useLayout } from '@/layout/hooks/useLayout';
+// import { useNav } from '@/layout/hooks/useNav';
+// import { useDataThemeChange } from '@/layout/hooks/useDataThemeChange';
+import { useSystemStoreHook } from '@/store/modules/system';
+
+import { getServiceApi } from '../../api';
+import { getPlatform, getBrower } from '@/utils/browers';
+// import dayIcon from '@/assets/svg/day.svg?component';
+// import darkIcon from '@/assets/svg/dark.svg?component';
+// import globalization from '@/assets/svg/globalization.svg?component';
+import Lock from '@iconify-icons/ri/lock-fill';
+import User from '@iconify-icons/ri/user-3-fill';
+
+defineOptions({ name: 'LoginView' });
+
+interface IRSAPublic {
+  publicKeyExponent: string;
+  publicKeyModulus: string;
+  requestKey: string;
+}
+
+const router = useRouter();
+
+// const bgStyle = ref({});
+const sysConfig = ref({});
+const loading = ref(false);
+const ruleFormRef = ref<FormInstance>();
+
+const serviceApi = getServiceApi();
+
+const { initStorage } = useLayout();
+initStorage();
+// const { dataTheme, dataThemeChange } = useDataThemeChange();
+// dataThemeChange();
+// const { getDropdownItemStyle, getDropdownItemClass } = useNav();
+// const { locale, translationCh, translationEn } = useTranslationLang();
+
+const ruleForm = reactive({
+  username: '',
+  passWord: ''
+});
+
+const publicRSA: IRSAPublic = reactive({
+  publicKeyExponent: '10001',
+  publicKeyModulus:
+    'a12708ab26367e1711bd767f6bb1f29afbd85380185723d7b492230e2567c95cf5718eca745da0643400ca619fbeec892df61abe1f71ad3b822d076ed831080c53782edf8c0627ee95c57e2bee12fe55da2b3cadec59947a75ccccbbf36fb3b781c93b4bf51489789f1c0849f9023a16ec70bef41a504785e1082b6f13588e29',
+  requestKey: ''
+});
+
+const onLogin = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(valid => {
+    if (valid) {
+      loading.value = true;
+      const { username, passWord } = ruleForm;
+
+      // @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 param = {
+        username,
+        password,
+        requestKey: publicRSA.requestKey,
+        domain: window.location.origin
+      };
+      serviceApi
+        .post('/uath/login', param)
+        .then(async (data: IResponseData) => {
+          successMessage(`👏 恭喜,成功登录${sysConfig.value['title']}!!!🎉`);
+          useSystemStoreHook().setSessionKey(data);
+          cacheToken(data);
+          cookies.set('loginer', username);
+          await delay(300);
+          router.push('/');
+          await insertLoginInfo(username);
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }
+  });
+};
+
+/**
+ * @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 * 1000
+  };
+  const kTOKENKEY = 'authorized-token';
+
+  cookies.set('kCookies_token', token.access_token);
+  const dataString = JSON.stringify(cache);
+  expires_in > 0 ? cookies.set(kTOKENKEY, dataString) : cookies.set(kTOKENKEY, dataString);
+};
+
+const insertLoginInfo = username => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const { browser, browserVersion } = getBrower(userAgent);
+  const obj = {
+    userName: username,
+    loginTime: toDateString(new Date()),
+    browser,
+    browserVersion,
+    operatingSystem: getPlatform(userAgent)
+  };
+  serviceApi.post('/upfm/v1/userMonitor', obj);
+};
+
+/** 使用公共函数，避免`removeEventListener`失效 */
+function onkeypress({ code }: KeyboardEvent) {
+  if (['Enter', 'NumpadEnter'].includes(code)) {
+    onLogin(ruleFormRef.value);
+  }
+}
+
+onMounted(() => {
+  window.document.addEventListener('keypress', onkeypress);
+});
+
+onBeforeUnmount(() => {
+  window.document.removeEventListener('keypress', onkeypress);
+});
+/**
+ * @description:  获取系统配置
+ * @return {*}
+ */
+const getSysConfig = async () => {
+  const [err, data]: [Error, any] = await to(serviceApi.get('/upfm/v1/sysConfig', {}));
+  if (!err) {
+    const config = {};
+    data.list?.forEach(item => {
+      config[item.configCode] = item.configValue;
+      if (item.fileName) {
+        config[item.configCode] = window.location.origin + '/ufil' + item.configValue;
+      }
+    });
+    const env = process.env.NODE_ENV;
+    const title = data.list?.find(f => f.configCode === `${env}Title` || f.configCode === 'title')?.configValue;
+    config['title'] = title || 'U-DP';
+    sysConfig.value = config;
+    setFavicon();
+    storageLocal.setItem('kSysConfig', config);
+  }
+};
+
+const setFavicon = () => {
+  let favicon = document.querySelector('link[rel="icon"]') as HTMLElement;
+  // console.log('app', favicon)
+  if (favicon !== null) {
+    favicon['href'] = sysConfig.value['favicon'] || '../../../public/favicon.ico';
+  } else {
+    favicon = document.createElement('link');
+    favicon['rel'] = 'icon';
+    favicon['href'] = sysConfig.value['favicon'] || '../../../public/favicon.ico';
+    document.head.appendChild(favicon);
+  }
+};
+
+onBeforeMount(() => {
+  getSysConfig();
+});
+</script>
+
+<style scoped>
+@import url('@/style/login2.css');
+
+/* .translation {
+  ::v-deep(.el-dropdown-menu__item) {
+    padding: 5px 40px;
+  }
+} */
+
+.check-zh {
+  position: absolute;
+  left: 20px;
+}
+
+.check-en {
+  position: absolute;
+  left: 20px;
+}
+
+:deep(.el-input-group__append, .el-input-group__prepend) {
+  padding: 0;
+}
+</style>