create-pubinfo 2.1.3-beta.2 → 2.1.4

package/templates/pubinfo-monorepo/apps/basic/src/routes/modules/demo/link.ts

@@ -0,0 +1,15 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw = {
+  path: '/link',
+  name: 'Link',
+  redirect: '',
+  meta: {
+    title: '跳转路由',
+    singleMenu: true,
+    icon: 'i-solar-confetti-minimalistic-bold',
+    link: 'http://124.223.184.245:10000/docs/',
+  },
+};
+
+export default routes;

package/templates/pubinfo-monorepo/apps/basic/src/routes/modules/demo/multilevel.menu.example.ts

@@ -0,0 +1,68 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw = {
+  path: '/multilevel_menu_example',
+  redirect: '/multilevel_menu_example/page',
+  name: 'multilevelMenuExample',
+  meta: {
+    title: '多级导航',
+    icon: 'i-heroicons-solid:menu-alt-3',
+  },
+  children: [
+    {
+      path: 'page',
+      name: 'multilevelMenuExample1',
+      component: () => import('@/views/demo/multilevel_menu_example/page.vue'),
+      meta: {
+        title: '导航1',
+        icon: 'i-heroicons-solid:menu-alt-3',
+      },
+    },
+    {
+      path: 'level2',
+      name: 'multilevelMenuExample2',
+      redirect: '/multilevel_menu_example/level2/page',
+      meta: {
+        title: '导航2',
+      },
+      children: [
+        {
+          path: 'page',
+          name: 'multilevelMenuExample2-1',
+          component: () => import('@/views/demo/multilevel_menu_example/level2/page.vue'),
+          meta: {
+            title: '导航2-1',
+          },
+        },
+        {
+          path: 'level3',
+          name: 'multilevelMenuExample2-2',
+          redirect: '/multilevel_menu_example/level2/level3/page1',
+          meta: {
+            title: '导航2-2',
+          },
+          children: [
+            {
+              path: 'page1',
+              name: 'multilevelMenuExample2-2-1',
+              component: () => import('@/views/demo/multilevel_menu_example/level2/level3/page1.vue'),
+              meta: {
+                title: '导航2-2-1',
+              },
+            },
+            {
+              path: 'page2',
+              name: 'multilevelMenuExample2-2-2',
+              component: () => import('@/views/demo/multilevel_menu_example/level2/level3/page2.vue'),
+              meta: {
+                title: '导航2-2-2',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export default routes;

package/templates/pubinfo-monorepo/apps/basic/src/routes/modules/demo/other.page.ts

@@ -0,0 +1,37 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw = {
+  path: '/other-page',
+  redirect: '/other-page/list',
+  name: 'OtherPage',
+  meta: {
+    title: '下探页面',
+    icon: 'i-solar-confetti-minimalistic-bold',
+  },
+  children: [
+    {
+      path: 'list',
+      name: 'OtherPageList',
+      component: () => import('@/views/demo/other_page/index.vue'),
+      meta: {
+        title: '列表页',
+        sidebar: false,
+        breadcrumb: false,
+        activeMenu: '/other-page',
+      },
+    },
+    {
+      path: 'detail',
+      name: 'OtherPageDetail',
+      component: () => import('@/views/demo/other_page/des.vue'),
+      meta: {
+        title: '详情页',
+        sidebar: false,
+        breadcrumb: true,
+        activeMenu: '/other-page',
+      },
+    },
+  ],
+};
+
+export default routes;

package/templates/pubinfo-monorepo/apps/basic/src/routes/modules/demo/single.ts

@@ -0,0 +1,14 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw = {
+  path: '/single',
+  component: () => import('@/views/demo/single/index.vue'),
+  name: 'Single',
+  meta: {
+    title: '单页面路由',
+    singleMenu: true,
+    icon: 'i-solar-confetti-minimalistic-bold',
+  },
+};
+
+export default routes;

package/templates/pubinfo-monorepo/apps/basic/src/settings.ts.hbs

@@ -0,0 +1,8 @@
+import { defineSettings } from 'pubinfo';
+
+export default defineSettings({
+  // 请在此处编写或粘贴配置代码
+  app: {
+    storagePrefix: '{{key}}',
+  },
+});

package/templates/pubinfo-monorepo/apps/basic/src/stores/index.ts

@@ -0,0 +1,2 @@
+export * from './modules/conter';
+export { useUserStore } from 'pubinfo';

package/templates/pubinfo-monorepo/apps/basic/src/stores/modules/conter.ts

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
+  function increment() {
+    count.value++;
+  }
+
+  return {
+    count,
+    doubleCount,
+    increment,
+  };
+});

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/breadcrumb_example/detail1.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+</script>
+
+<template>
+  <div>
+    <PageMain>
+      注意看面包屑导航的变化
+    </PageMain>
+  </div>
+</template>

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/breadcrumb_example/detail2.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+</script>
+
+<template>
+  <div>
+    <PageMain>
+      注意看面包屑导航的变化
+    </PageMain>
+  </div>
+</template>

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/breadcrumb_example/list1.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+</script>
+
+<template>
+  <PageMain>
+    <RouterLink :to="{ name: 'breadcrumbExampleDetail1' }">
+      查看详情页
+    </RouterLink>
+  </PageMain>
+</template>

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/breadcrumb_example/list2.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+</script>
+
+<template>
+  <PageMain>
+    <RouterLink :to="{ name: 'breadcrumbExampleDetail2' }">
+      查看详情页
+    </RouterLink>
+  </PageMain>
+</template>

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/multilevel_menu_example/level2/level3/page1.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+</script>
+
+<template>
+  <div>
+    <PageMain>
+      多级导航2-2-2221
+    </PageMain>
+  </div>
+</template>

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/multilevel_menu_example/level2/level3/page2.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+</script>
+
+<template>
+  <div>
+    <PageMain>
+      多级导航2-2-1
+    </PageMain>
+  </div>
+</template>

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/multilevel_menu_example/level2/page.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+</script>
+
+<template>
+  <div>
+    <PageMain>
+      多级导航2-1
+    </PageMain>
+  </div>
+</template>

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/multilevel_menu_example/page.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+</script>
+
+<template>
+  <div>
+    <PageMain>
+      多级导航1
+    </PageMain>
+  </div>
+</template>

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/other_page/des.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+
+defineOptions({
+  name: 'OtherPageDetail',
+});
+</script>
+
+<template>
+  <PageMain>
+    123
+  </PageMain>
+</template>

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/other_page/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { PageMain } from 'pubinfo';
+
+defineOptions({
+  name: 'OtherPage',
+});
+/* =============================================
+=                   逻辑代码                   =
+============================================= */
+const router = useRouter();
+function jump() {
+  router.push({
+    name: 'OtherPageDetail',
+  });
+}
+</script>
+
+<template>
+  <PageMain>
+    列表页
+    <a-button type="primary" @click="jump">
+      点击跳转入详情页
+    </a-button>
+  </PageMain>
+</template>

package/templates/pubinfo-monorepo/apps/basic/src/views/demo/preview-empty/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+/* =============================================
+=               Vue SFC Options 配置           =
+============================================= */
+defineOptions({
+  name: 'PreviewEmpty',
+});
+/* =============================================
+=                   逻辑代码                   =
+============================================= */
+</script>
+
+<template>
+  <div>
+    空白展示页面
+  </div>
+</template>

package/templates/pubinfo-monorepo/apps/basic/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-monorepo/apps/basic/src/views/system/index.vue

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

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useLoginTabs } from '../composables';
+
+defineOptions({
+  name: 'LoginFrom',
+});
+
+const { tabs, initialTab, changeActiveTab } = useLoginTabs();
+</script>
+
+<template>
+  <div class="flex flex-col w-456px [background:transparent]">
+    <div class="flex flex-row overflow-hidden border border-solid border-[#e7e8e9] rounded-1">
+      <div
+        v-for="(tab, index) in tabs"
+        :key="tab.title"
+        class="flex flex-row items-center justify-center h-10 text-base cursor-pointer rounded"
+        :class="[initialTab === index ? 'text-[#2f6bff] bg-[#ecf1fd]' : 'text-[#8a8e92] ']"
+        :style="{ width: `${100 / tabs.length}%` }"
+        @click="changeActiveTab(index)"
+      >
+        {{ tab.title }}
+      </div>
+    </div>
+    <div class="relative min-h-350px">
+      <component :is="tabs[initialTab].component" :key="tabs[initialTab].title" :name="tabs[initialTab].title" />
+    </div>
+  </div>
+</template>

package/templates/pubinfo-monorepo/apps/basic/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();
+
+    // 实现手机号登录逻辑
+
+    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>