create-pubinfo 2.0.0-beta.2 → 2.0.0-beta.20

package/templates/pubinfo-template/src/views/system/login/components/LoginWithPhone.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import type { SelectProps } from 'ant-design-vue';
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { useCountdown } from '../composables';
+import Savephone from './Savephone.vue';
+
+defineOptions({
+  name: 'LoginWithPhone',
+});
+
+interface FormState {
+  phone: string
+  verify: string
+  checked: false
+}
+const [verifyDisabled, setVerifyDisabled] = useToggle(true);
+const phoneForm = ref<FormInstance>();
+const { count, start, isStart } = useCountdown();
+const regionCode = ref<number>(0);
+const router = useRouter();
+const route = useRoute();
+
+const formState = reactive<FormState>({
+  phone: '',
+  verify: '',
+  checked: false,
+});
+
+const rules: Record<string, Rule[]> = {
+  phone: [
+    {
+      validator: checkPhoneIsCorrect,
+      whitespace: true,
+      trigger: 'change',
+    },
+  ],
+  verify: [
+    {
+      required: true,
+      whitespace: true,
+      message: '请输入验证码',
+    },
+  ],
+};
+
+const regionCodeOptins: SelectProps['options'] = [
+  {
+    value: 0,
+    label: '+86 (中国大陆)',
+  },
+  {
+    value: 1,
+    label: '+852 (香港行政区)',
+  },
+  {
+    value: 2,
+    label: '+853 (澳门行政区)',
+  },
+  {
+    value: 3,
+    label: '+886 (台湾省)',
+  },
+];
+
+async function checkPhoneIsCorrect(_rule: Rule, value: string) {
+  function reject(area: string) {
+    setVerifyDisabled(true);
+    return Promise.reject(new Error(`请输入正确的${area}手机号`));
+  }
+  if (!value) {
+    setVerifyDisabled(true);
+    return Promise.reject(new Error(`请输入手机号`));
+  }
+  switch (regionCode.value) {
+    // 中国大陆
+    case 0:
+      if (!/^1[3-9]\d{9}$/.test(value)) {
+        return reject('中国大陆');
+      }
+      break;
+    // 香港特别行政区
+    case 1:
+      if (!/^([569])\d{7}$/.test(value)) {
+        return reject('香港特别行政区');
+      }
+      break;
+    // 澳门特别行政区
+    case 2:
+      if (!/^6\d{7}$/.test(value)) {
+        return reject('澳门特别行政区');
+      }
+      break;
+    // 台湾省
+    case 3:
+      if (!/^9\d{8}$/.test(value)) {
+        return reject('台湾省');
+      }
+      break;
+    default:
+      break;
+  }
+  setVerifyDisabled(false);
+}
+
+async function areaChange() {
+  if (!formState.phone) {
+    return;
+  }
+  phoneForm.value?.validateFields('phone');
+}
+
+async function sendVerifyCode() {
+  message.success('验证码已发送,请注意查收');
+  start();
+}
+
+async function submit() {
+  try {
+    await phoneForm.value?.validate();
+
+    // TODO 实现手机号登录逻辑
+
+    if (formState.checked) {
+      localStorage.setItem('pubinfo_web_savedPhone', formState.phone);
+    }
+    else {
+      localStorage.removeItem('pubinfo_web_savedPhone');
+    }
+    message.success('登录成功');
+    router.push(route.query.redirect?.toString() ?? '/');
+  }
+  catch (error) {
+  }
+}
+
+onMounted(() => {
+  const phone = localStorage.getItem('pubinfo_web_savedPhone');
+  if (phone) {
+    formState.phone = phone;
+    setVerifyDisabled(false);
+    formState.checked = true as any;
+  }
+});
+</script>
+
+<template>
+  <div class="phone-form" mt-40px>
+    <a-form
+      ref="phoneForm"
+      :model="formState"
+      autocomplete="off"
+      :rules="rules"
+      @finish="submit"
+    >
+      <a-form-item name="phone">
+        <a-input-group compact>
+          <a-form-item-rest>
+            <a-select
+              v-model:value="regionCode"
+              size="large"
+              style="width: 35%;"
+              :options="regionCodeOptins"
+              @change="areaChange"
+            />
+          </a-form-item-rest>
+          <a-input
+            v-model:value="formState.phone"
+            allow-clear
+            size="large"
+            placeholder="请输入手机号"
+            style="width: 65%;"
+          />
+        </a-input-group>
+      </a-form-item>
+
+      <a-form-item name="verify">
+        <a-input
+          v-model:value="formState.verify"
+          allow-clear
+          size="large"
+          placeholder="请输入验证码"
+        >
+          <template #suffix>
+            <a-button
+              size="small"
+              type="link"
+              :disabled="verifyDisabled"
+            >
+              <span v-if="!isStart" @click="sendVerifyCode">获取短信验证码</span>
+              <span v-else text="#8A8E92">{{ count }}秒后重新获取</span>
+            </a-button>
+          </template>
+        </a-input>
+      </a-form-item>
+      <a-form-item>
+        <Savephone v-model:checked="formState.checked" />
+      </a-form-item>
+      <a-form-item>
+        <a-button
+          class="h-48px!"
+          block
+          type="primary"
+          html-type="submit"
+          :disabled="!formState.checked"
+        >
+          登录
+        </a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>

package/templates/pubinfo-template/src/views/system/login/components/PasswordLogin.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import type { UnwrapRef } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { message, Modal } from 'ant-design-vue';
+import { useUserStore } from 'pubinfo';
+import { RESPONSE_CODE } from 'pubinfo/request';
+import { useCaptchas, useFocusElement } from '../composables';
+import Useragreement from './Useragreement.vue';
+
+defineOptions({
+  name: 'PasswordLogin',
+});
+
+interface FormState {
+  account: string
+  password: string
+  captchas: string
+  captchaHash: string
+  checked: boolean
+}
+
+interface HttpError {
+  code: RESPONSE_CODE
+  data: any
+  hint: string
+  msg: string
+  success: boolean
+}
+
+function isHttpError(error: unknown): error is HttpError {
+  return (error as HttpError).code !== undefined;
+}
+
+const userStore = useUserStore();
+const { send, captcha, captchaHash } = useCaptchas();
+const router = useRouter();
+const route = useRoute();
+const { focusElementDataId } = useFocusElement();
+
+const loginForm = ref<FormInstance | null>(null);
+const formState: UnwrapRef<FormState> = reactive({
+  account: '',
+  password: '',
+  captchas: '',
+  checked: true,
+  captchaHash,
+});
+
+const rules: Record<string, Rule[]> = {
+  account: [{ required: true, whitespace: true, message: '请输入账号' }],
+  password: [{ required: true, whitespace: true, message: '请输入密码' }],
+  captchas: [{ required: true, whitespace: true, message: '请输入验证码' }],
+};
+
+const [loading, setLoading] = useToggle(false);
+
+async function onSubmit() {
+  if (loading.value) {
+    return;
+  }
+  setLoading(true);
+  try {
+    await loginForm.value?.validate();
+    await userStore.login(formState);
+    message.success('登录成功');
+    router.push(route.query.redirect?.toString() ?? '/');
+  }
+  catch (error) {
+    if (isHttpError(error)) {
+      const code = error.code;
+      switch (code) {
+        case RESPONSE_CODE.LOGINNAME_PASSWORD_WRONG:
+        case RESPONSE_CODE.CODE_OVERTIME:
+        case RESPONSE_CODE.CODE_WRONG:
+          send();
+          break;
+        case RESPONSE_CODE.CHANGE_INIT_PASSWORD:
+        case RESPONSE_CODE.PASSWORD_EXPIRED:
+          createChangePasswordModal(error.msg, error?.data?.accessToken);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  finally {
+    setLoading(false);
+  }
+}
+
+function createChangePasswordModal(msg: string, token: string) {
+  Modal.confirm({
+    title: '提示',
+    content() {
+      return msg;
+    },
+    okText: '修改密码',
+    cancelText: '暂不登录',
+    onOk() {
+      router.push({
+        name: 'ChangePassword',
+        params: {
+          changePassWordToken: token,
+        },
+      });
+    },
+  });
+}
+</script>
+
+<template>
+  <div class="login-form">
+    <AForm ref="loginForm" :model="formState" :rules="rules" @finish="onSubmit">
+      <a-form-item name="account">
+        <a-input
+          v-model:value="formState.account"
+          allow-clear
+          size="large"
+          placeholder="请输入登录账号"
+          data-id="account"
+        >
+          <template #prefix>
+            <PubinfoIcon v-if="focusElementDataId === 'account'" name="i-solar-user-bold" color="#1578FF" />
+            <PubinfoIcon v-else name="i-solar-user-broken" color="#AFB0B2" />
+          </template>
+        </a-input>
+      </a-form-item>
+      <a-form-item name="password">
+        <a-input-password
+          v-model:value="formState.password"
+          allow-clear
+          size="large"
+          placeholder="请输入登录密码"
+          visibility-toggle
+          data-id="password"
+        >
+          <template #prefix>
+            <PubinfoIcon v-if="focusElementDataId === 'password'" name="i-solar-lock-password-unlocked-bold" color="#1578FF" />
+            <PubinfoIcon v-else name="i-solar-lock-password-unlocked-broken" color="#AFB0B2" />
+          </template>
+        </a-input-password>
+      </a-form-item>
+      <a-form-item name="captchas">
+        <a-input
+          v-model:value="formState.captchas"
+          size="large"
+          allow-clear
+          placeholder="请输入验证码"
+          data-id="captchas"
+        >
+          <template #prefix>
+            <PubinfoIcon v-if="focusElementDataId === 'captchas'" name="i-solar-shield-check-bold" color="#1578FF" />
+            <PubinfoIcon v-else name="i-solar-shield-check-broken" color="#AFB0B2" />
+          </template>
+          <template #addonAfter>
+            <div
+              w-100px
+              h-38px
+              cursor-pointer
+              @click="send"
+            >
+              <img :src="captcha">
+            </div>
+          </template>
+        </a-input>
+      </a-form-item>
+      <a-form-item>
+        <Useragreement v-model:checked="formState.checked" />
+      </a-form-item>
+      <!-- 登录 -->
+      <a-form-item>
+        <div w-full h-48px>
+          <a-button
+            class="h-48px!"
+            type="primary"
+            html-type="submit"
+            block
+            :disabled="!formState.checked"
+            :loading="loading"
+          >
+            登录
+          </a-button>
+        </div>
+      </a-form-item>
+    </AForm>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.login-form {
+  margin-top: 40px;
+
+  :deep(.ant-input-group-addon) {
+    padding: 0 !important;
+    overflow: hidden;
+  }
+}
+</style>

package/templates/pubinfo-template/src/views/system/login/components/Savephone.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'Savephone',
+});
+
+const checked = defineModel(
+  'checked',
+  {
+    type: Boolean, default: false,
+  });
+</script>
+
+<template>
+  <a-checkbox v-model:checked="checked">
+    记住手机号
+  </a-checkbox>
+</template>

package/templates/pubinfo-template/src/views/system/login/components/Useragreement.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'Useragreement',
+});
+
+const checked = defineModel(
+  'checked',
+  {
+    type: Boolean, default: true,
+  });
+
+function jumpUseragreementPage() {
+  // 暂未实现用户协议、隐私政策
+}
+</script>
+
+<template>
+  <a-checkbox v-model:checked="checked">
+    我已阅读并同意<span
+      hover:underline
+      decoration-2
+      text="#1578FF"
+      @click.prevent="jumpUseragreementPage"
+    >用户协议、隐私政策</span>
+  </a-checkbox>
+</template>

package/templates/pubinfo-template/src/views/system/login/composables.ts

@@ -0,0 +1,84 @@
+import type { Component, MaybeRef } from 'vue';
+import { getAuthLoginValidCode } from '@/api/modules/auth';
+import { useActiveElement } from '@vueuse/core';
+import { useRequest } from 'alova/client';
+
+interface LoginTabs {
+  title: string
+  component: Component
+}
+
+export function useLoginTabs() {
+  const tabs: LoginTabs[] = [
+    {
+      title: '账号登录',
+      component: defineAsyncComponent(() => import('./components/PasswordLogin.vue')),
+    },
+    {
+      title: '手机号登录',
+      component: defineAsyncComponent(() => import('./components/LoginWithPhone.vue')),
+    },
+  ];
+  const initialTab = ref(0);
+
+  function changeActiveTab(activeTab: number): void {
+    initialTab.value = activeTab;
+  }
+  return {
+    tabs,
+    initialTab,
+    changeActiveTab,
+  };
+}
+
+export function useCaptchas() {
+  const { send, onSuccess } = useRequest(getAuthLoginValidCode({ size: '100x40' }));
+  const captcha = ref('');
+  const captchaHash = ref('');
+
+  onSuccess(({ data }) => {
+    const { key, plaintext } = data.data!;
+
+    const imgUrl = `data:image/png;base64,${plaintext}`;
+    captcha.value = imgUrl;
+    captchaHash.value = key!;
+  });
+  return {
+    send,
+    captcha,
+    captchaHash,
+  };
+}
+
+export function useFocusElement() {
+  const activeElement = useActiveElement();
+  const focusElementDataId = computed(() =>
+    activeElement.value?.dataset?.id || 'null',
+  );
+  return {
+    focusElementDataId,
+  };
+}
+
+export function useCountdown(initialTime: MaybeRef<number> = 60) {
+  const count = ref(toValue(initialTime));
+  const isStart = computed(() => {
+    return toValue(count) !== toValue(initialTime);
+  });
+
+  function start() {
+    count.value--;
+    const timer = setInterval(() => {
+      count.value--;
+      if (count.value === 0) {
+        clearInterval(timer);
+        count.value = toValue(initialTime);
+      }
+    }, 1000);
+  }
+  return {
+    count,
+    start,
+    isStart,
+  };
+}

package/templates/pubinfo-template/src/views/system/login/index.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import LoginFrom from './components/LoginForm.vue';
+
+defineOptions({
+  name: 'Login',
+});
+
+const title = ref(import.meta.env.VITE_APP_TITLE);
+
+const designDescription = [
+  {
+    title: '快速',
+    description: '快速搭建技术中台系统',
+  },
+  {
+    title: '灵活',
+    description: '灵活配置系统功能',
+  },
+  {
+    title: '便捷',
+    description: '高效提升系统开发效率',
+  },
+];
+</script>
+
+<template>
+  <div class="warp">
+    <div class="warp-blank">
+      <div
+        relative
+        top="7vh"
+        left="5vw"
+        scale="100 sm:100 smd:100 md:100  xl:110 2xl:120"
+        transform-origin="top-left"
+        transition-all
+        hidden
+        smd:block
+      >
+        <div class="logo-group">
+          <PubinfoIcon
+            name="logo"
+            color="transparent"
+            mr="10px"
+            :size="32"
+          />
+          <span text="black dark:[#C9D6EF]">{{ title }}</span>
+        </div>
+        <div class="title-group">
+          <span text="black dark:[#C9D6EF]">一体化技术架构 一站式技术支撑</span>
+          <div flex="~ row" mt="30px">
+            <div
+              v-for="(item, index) in designDescription"
+              :key="index"
+              w-84px
+              h-36px
+              bg="#2F6BFF"
+              rounded-20px
+              text="20px #F7F7F7 dark:[#fff]"
+              font-normal
+              flex="~ center"
+              mr="15px"
+            >
+              {{ item.title }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      h-full
+      bg="[rgba(255,255,255,0.1)] smd:[rgba(255,255,255,1)] dark:[#0F1E3B]"
+      backdrop-blur-sm
+      w="full smd:1/2 xl:800px 2xl:900px"
+      transition-all
+      flex="~ col"
+      justify-between
+      pb="40px"
+      relative
+    >
+      <div
+        smd:hidden
+        flex="~ row center"
+        w-full
+        h-200px
+        absolute
+        disable="none"
+      >
+        <PubinfoIcon
+          name="logo"
+          color="transparent"
+          :size="42"
+          mr-15px
+        />
+        <span text="33px" font="bold">{{ title }}</span>
+      </div>
+      <div
+        w-full
+        flex="~"
+        justify-center
+        pt="20vh"
+      >
+        <LoginFrom />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.warp {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: url("@/assets/images/login-bg.webp") no-repeat;
+  background-size: cover;
+
+  .warp-blank {
+    flex: auto;
+    flex-basis: 0;
+    overflow: hidden;
+  }
+
+  .logo-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 33px;
+    margin-bottom: 35px;
+    font-size: 24px;
+    font-weight: 400;
+    color: #151e26;
+  }
+
+  .title-group {
+    height: 52px;
+    font-size: 38px;
+    font-weight: 800;
+    color: #072347;
+    letter-spacing: 1.5px;
+  }
+}
+
+@media (width < 1024px) {
+  .warp {
+    background: url("@/assets/images/login-small.png") no-repeat left;
+    background-size: cover;
+  }
+}
+
+[data-theme="dark"] {
+  .warp {
+    background: url("@/assets/images/login-bg_dark.webp") no-repeat;
+    background-size: cover;
+  }
+
+  @media (width < 1024px) {
+    .warp {
+      background: url("@/assets/images/login-small_dark.webp") no-repeat left;
+      background-size: cover;
+    }
+  }
+}
+</style>

package/templates/pubinfo-template/stylelint.config.js

@@ -0,0 +1,3 @@
+export default {
+  extends: ['pubinfo/stylelint'],
+};

package/templates/pubinfo-template/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.pubinfo/tsconfig.app.json"
+}