@utogether/udp-core 1.0.0

package/src/views/error/500.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-04 17:31:27
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-10-25 11:32:16
+ * @Description: 服务器错误页面
+-->
+<script setup lang="ts">
+import { useRouter, useRoute } from 'vue-router';
+import { delCurrentRoute } from '../../router/utils';
+import noServer from '../../assets/status/500.svg?component';
+const router = useRouter();
+const route = useRoute();
+const goHome = () => {
+  delCurrentRoute(route, false);
+  router.push('/');
+};
+</script>
+
+<template>
+  <div style="width: 100%; height: 100%" class="flex justify-center items-center bg-[#fff]">
+    <noServer />
+    <div class="ml-12">
+      <p
+        v-motion
+        class="font-medium text-4xl mb-4 dark:text-white"
+        :initial="{ opacity: 0, y: 100 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }"
+      >
+        500
+      </p>
+      <p
+        v-motion
+        class="mb-4 text-gray-500"
+        :initial="{ opacity: 0, y: 100 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 300 } }"
+      >
+        抱歉，服务器出错了
+      </p>
+      <el-button
+        v-motion
+        :initial="{ opacity: 0, y: 100 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 500 } }"
+        type="primary"
+        size="large"
+        style="width: 150px; font-size: 20px"
+        @click="goHome"
+        >返回首页</el-button
+      >
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,314 @@
+<template>
+  <div class="select-none">
+    <div class="absolute flex-c 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.username'), trigger: 'blur' }]"
+                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('/upms/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>

package/src/views/login/utils/motion.ts

@@ -0,0 +1,47 @@
+/*
+ * @Author: wei.li
+ * @Date: 2023-03-04 08:54:51
+ * @LastEditors: wei.li
+ * @LastEditTime: 2023-03-04 08:57:29
+ * @Description: file content
+ */
+import { h, defineComponent, withDirectives, resolveDirective } from 'vue';
+
+/** 封装@vueuse/motion动画库中的自定义指令v-motion */
+export default defineComponent({
+  name: 'UtMotion',
+  props: {
+    delay: {
+      type: Number,
+      default: 50
+    }
+  },
+  render() {
+    const { delay } = this;
+    const motion = resolveDirective('motion');
+    return withDirectives(
+      h(
+        'div',
+        {},
+        {
+          default: () => [this.$slots.default()]
+        }
+      ),
+      [
+        [
+          motion,
+          {
+            initial: { opacity: 0, y: 100 },
+            enter: {
+              opacity: 1,
+              y: 0,
+              transition: {
+                delay
+              }
+            }
+          }
+        ]
+      ]
+    );
+  }
+});

package/src/views/login/utils/rule.ts

@@ -0,0 +1,70 @@
+/*
+ * @Author: wei.li
+ * @Date: 2023-03-04 08:54:51
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-06-28 09:27:35
+ * @Description: file content
+ */
+import { reactive } from 'vue';
+import type { FormRules } from 'element-plus';
+import { transformI18n } from '@/plugins/i18n';
+
+/** 6位数字验证码正则 */
+export const REGEXP_SIX = /^\d{6}$/;
+
+/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
+export const REGEXP_PWD =
+  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
+
+/** 手机号正则 */
+// const isPhone = /^1[3-9]\d{9}$/;
+
+/** 登录校验 */
+const loginRules = reactive(<FormRules>{
+  passWord: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error(transformI18n('message.password')));
+        } else {
+          callback();
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+});
+
+/** 手机登录校验 */
+// const phoneRules = reactive(<FormRules>{
+//   phone: [
+//     {
+//       validator: (rule, value, callback) => {
+//         if (value === '') {
+//           callback(new Error(transformI18n($t('login.phoneReg'))));
+//         } else if (!/^1[3-9]\d{9}$/.test(value)) {
+//           callback(new Error(transformI18n($t('login.phoneCorrectReg'))));
+//         } else {
+//           callback();
+//         }
+//       },
+//       trigger: 'blur'
+//     }
+//   ],
+//   verifyCode: [
+//     {
+//       validator: (rule, value, callback) => {
+//         if (value === '') {
+//           callback(new Error(transformI18n($t('login.verifyCodeReg'))));
+//         } else if (!REGEXP_SIX.test(value)) {
+//           callback(new Error(transformI18n($t('login.verifyCodeSixReg'))));
+//         } else {
+//           callback();
+//         }
+//       },
+//       trigger: 'blur'
+//     }
+//   ]
+// });
+
+export { loginRules };

package/src/views/login/utils/verifyCode.ts

@@ -0,0 +1,52 @@
+/*
+ * @Author: wei.li
+ * @Date: 2023-03-04 08:54:51
+ * @LastEditors: wei.li
+ * @LastEditTime: 2023-03-04 09:01:43
+ * @Description: file content
+ */
+import type { FormInstance, FormItemProp } from 'element-plus';
+import { clone } from 'xe-utils';
+import { ref } from 'vue';
+
+const isDisabled = ref(false);
+const timer = ref(null);
+const text = ref('');
+
+export const useVerifyCode = () => {
+  const start = async (formEl: FormInstance | undefined, props: FormItemProp, time = 60) => {
+    if (!formEl) return;
+    const initTime = clone(time, true);
+    await formEl.validateField(props, isValid => {
+      if (isValid) {
+        clearInterval(timer.value);
+        timer.value = setInterval(() => {
+          if (time > 0) {
+            text.value = `${time}`;
+            isDisabled.value = true;
+            time -= 1;
+          } else {
+            text.value = '';
+            isDisabled.value = false;
+            clearInterval(timer.value);
+            time = initTime;
+          }
+        }, 1000);
+      }
+    });
+  };
+
+  const end = () => {
+    text.value = '';
+    isDisabled.value = false;
+    clearInterval(timer.value);
+  };
+
+  return {
+    isDisabled,
+    timer,
+    text,
+    start,
+    end
+  };
+};

package/src/views/organization/company/Company.vue

@@ -0,0 +1,56 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-19 21:14:41
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-03-17 10:41:15
+ * @Description: 租户管理
+-->
+<template>
+  <div class="u-content-panel">
+    <div class="u-left-panel">
+      <ScrollPane
+        :title="$t('company')"
+        url="/uums/unit"
+        :tree-otions="{ children: 'children', label: 'unitName' }"
+      />
+    </div>
+    <div class="content">
+      <company-panel />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, provide } from 'vue';
+import ScrollPane from '../../../components/SuScrollTree/ScrollPanel.vue';
+import CompanyPanel from './CompanyPanel.vue';
+const active: any = ref({});
+const scrollPanelChange: any = ref(false);
+const treeList: any = ref([]);
+provide('active', active);
+
+provide('scrollPanelChange', scrollPanelChange);
+
+provide('treeList', treeList);
+</script>
+
+<style lang="scss" scoped>
+.u-content-panel {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 84vh;
+  padding: 5px;
+
+  .u-left-panel {
+    width: 250px;
+  }
+
+  .content {
+    flex: 1;
+    width: calc(100% - 250px);
+    height: 82vh;
+    margin: 0 10px;
+  }
+}
+</style>