create-pubinfo 2.0.0-beta.3 → 2.0.0-beta.30

package/templates/pubinfo-template/src/views/demo/single/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+
+defineOptions({
+  name: 'Demo',
+});
+</script>
+
+<template>
+  <PageMain>
+    演示页面，没有任何内容
+  </PageMain>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="home">
+    主页
+  </div>
+</template>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useLoginTabs } from '../composables';
+
+defineOptions({
+  name: 'LoginFrom',
+});
+
+const { tabs, initialTab, changeActiveTab } = useLoginTabs();
+</script>
+
+<template>
+  <div class="login-warp">
+    <div class="login-tabs">
+      <div
+        v-for="(tab, index) in tabs"
+        :key="tab.title"
+        class="login-tab"
+        :class="{ active: initialTab === index }"
+        :style="{ width: `${100 / tabs.length}%` }"
+        @click="changeActiveTab(index)"
+      >
+        {{ tab.title }}
+      </div>
+    </div>
+    <div class="login-form">
+      <component :is="tabs[initialTab].component" :key="tabs[initialTab].title" :name="tabs[initialTab].title" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.login-warp {
+  display: flex;
+  flex-direction: column;
+  width: 456px;
+  background: transparent;
+
+  .login-tabs {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    border: 1px solid #e7e8e9;
+    border-radius: 4px;
+
+    .login-tab {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      height: 40px;
+      font-size: 16px;
+      color: #8a8e92;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+
+    .active {
+      color: #2f6bff;
+      background: #ecf1fd;
+    }
+  }
+
+  .login-form {
+    position: relative;
+    min-height: 350px;
+  }
+}
+</style>

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,214 @@
+<script setup lang="ts">
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import type { UnwrapRef } from 'vue';
+import { auth } from '@/modules/auth';
+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,
+        },
+      });
+    },
+  });
+}
+
+const AUTH_4A_ENABLED = import.meta.env.VITE_AUTH_4A_ENABLED === 'true';
+</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>
+        <div v-if="AUTH_4A_ENABLED" w-full h-48px>
+          <a-divider>
+            <a-button
+              class="h-48px!"
+              type="link"
+              block
+              @click="auth.signIn('4A')"
+            >
+              前往4A登录
+            </a-button>
+          </a-divider>
+        </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,
+  };
+}