create-pubinfo 2.1.3-beta.2 → 2.1.4

package/templates/pubinfo-monorepo/apps/basic/src/views/system/login/components/PasswordLogin.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import type { UnwrapRef } from 'vue';
+import { PubinfoVerifyInput } from '@pubinfo/module-captcha';
+import { useToggle } from '@vueuse/core';
+import { message, Modal } from 'ant-design-vue';
+import { RESPONSE_CODE, useUserStore } from 'pubinfo';
+import { 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 pubinfoVerifyInputRef = ref<InstanceType<typeof PubinfoVerifyInput> | null>(null);
+const userStore = useUserStore();
+const router = useRouter();
+const route = useRoute();
+const { focusElementDataId } = useFocusElement();
+
+const loginForm = ref<FormInstance | null>(null);
+const formState: UnwrapRef<FormState & { captchaType?: string }> = reactive({
+  account: '',
+  password: '',
+  captchas: '',
+  checked: true,
+  captchaHash: '',
+  captchaType: '',
+});
+
+const rules: Record<string, Rule[]> = {
+  account: [{ required: true, whitespace: true, message: '请输入账号' }],
+  password: [{ required: true, whitespace: true, message: '请输入密码' }],
+  captchas: [{ required: true, whitespace: true, message: '请输入验证码' }],
+};
+
+function getCaptchaHash(hash: string) {
+  formState.captchaHash = hash;
+}
+
+const [loading, setLoading] = useToggle(false);
+
+async function onSubmit() {
+  if (loading.value) {
+    return;
+  }
+  setLoading(true);
+  try {
+    await loginForm.value?.validate();
+    await userStore.signIn(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:
+          pubinfoVerifyInputRef.value?.refresh();
+          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="mt-10">
+    <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">
+        <PubinfoVerifyInput ref="pubinfoVerifyInputRef" v-model="formState.captchas" size="large" @get-captcha-hash="getCaptchaHash" />
+      </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>
+:deep(.ant-input-group-addon) {
+  padding: 0 !important;
+  overflow: hidden;
+}
+</style>

package/templates/pubinfo-monorepo/apps/basic/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-monorepo/apps/basic/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-monorepo/apps/basic/src/views/system/login/composables.ts

@@ -0,0 +1,63 @@
+import type { Component, MaybeRef } from 'vue';
+import { useActiveElement } from '@vueuse/core';
+
+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 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-monorepo/apps/basic/src/views/system/login/index.vue

@@ -0,0 +1,142 @@
+<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
+        hidden
+        smd:block
+        class="w-full pl-[5vw] pt-[7vh]"
+      >
+        <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 scoped>
+.warp {
+  --at-apply: relative flex flex-row w-full h-full overflow-hidden;
+  background: url("@/assets/images/login-bg.webp") no-repeat;
+  background-size: cover;
+}
+
+.warp .warp-blank {
+  --at-apply: flex-auto basis-0 overflow-hidden;
+}
+
+.warp .logo-group {
+  --at-apply: flex flex-row items-center h-33px mb-35px text-6 font-400 text-[#151e26];
+}
+
+.warp .title-group {
+  --at-apply: h-52px text-38px font-800 text-[#072347] tracking-[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-monorepo/apps/basic/tsconfig.json

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

package/templates/pubinfo-monorepo/apps/basic/uno.config.ts

@@ -0,0 +1,17 @@
+import { presetUnocss } from 'pubinfo/node';
+import { defineConfig } from 'unocss';
+
+export default defineConfig({
+  presets: [
+    presetUnocss(),
+  ],
+
+  content: {
+    pipeline: {
+      include: [
+        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+        'src/routes/**/*.ts',
+      ],
+    },
+  },
+});

package/templates/pubinfo-monorepo/eslint.config.ts

@@ -0,0 +1,3 @@
+import pubinfo from '@pubinfo/config/eslint';
+
+export default pubinfo();

package/templates/pubinfo-monorepo/package.json.hbs

@@ -0,0 +1,46 @@
+{
+  "name": "pubinfo-template",
+  "type": "module",
+  "private": true,
+  "packageManager": "pnpm@10.12.4",
+  "scripts": {
+    "commit": "pubinfo-commit",
+    "prepare": "pubinfo-commit --init",
+    "lint": "pnpm run lint:eslint && pnpm run lint:stylelint",
+    "lint:eslint": "eslint . --cache --fix",
+    "lint:stylelint": "stylelint \"apps/*/src/**/*.{css,scss,vue}\" --cache --fix",
+    "viewer:eslint-rule": "pnpx @eslint/config-inspector",
+    "generate": "pubinfo generate"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "@pubinfo/pro-components": "^1.8.1",
+    "@vueuse/core": "^14.0.0",
+    "alova": "^3.3.4",
+    "ant-design-vue": "^4.2.6",
+    "dayjs": "^1.11.19"
+  },
+  "devDependencies": {
+    "@pubinfo/commitlint": "{{version}}",
+    "@pubinfo/config": "{{version}}",
+    "eslint": "^9.39.1",
+    "lint-staged": "^16.2.6",
+    "simple-git-hooks": "^2.13.1",
+    "stylelint": "^16.25.0",
+    "typescript": "^5.9.3"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged && pnpm run lint",
+    "commit-msg": "pnpm exec pubinfo-commit --edit $1"
+  },
+  "lint-staged": {
+    "*.{vue,js,ts,jsx,tsx,md,json}": "eslint --cache --fix",
+    "*.{css,scss,vue}": "stylelint --cache --fix"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-git",
+      "czConfig": ".pubinfo/cz.config.cjs"
+    }
+  }
+}