create-pubinfo-pr 0.1.1

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,45 @@
+{
+  "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"
+  },
+  "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"
+    }
+  }
+}