create-pubinfo 2.0.0-rc.4 → 2.0.0-rc.5

package/templates/pubinfo-module/playground/src/components/UIProvider/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { legacyLogicalPropertiesTransformer, theme } from 'ant-design-vue';
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import dayjs from 'dayjs';
+import { useTheme } from 'pubinfo';
+import 'dayjs/locale/zh-cn';
+
+defineOptions({
+  name: 'UIProvider',
+});
+
+dayjs.locale('zh-cn');
+
+function getContainer() {
+  return document.body;
+}
+
+const { isDark } = useTheme();
+
+const UILocales = computed(() => {
+  return zhCN;
+});
+
+const themeMode = computed(() => {
+  return isDark.value
+    ? { algorithm: [theme.darkAlgorithm] }
+    : {};
+});
+
+const themeConfig = computed(() => {
+  return Object.assign(
+    { token: { wireframe: true } },
+    themeMode.value,
+  );
+});
+</script>
+
+<template>
+  <a-config-provider
+    :locale="UILocales"
+    :theme="themeConfig"
+    :get-popup-container="getContainer"
+  >
+    <a-style-provider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
+      <a-app class="w-full h-full">
+        <slot />
+        <a-modal />
+      </a-app>
+    </a-style-provider>
+  </a-config-provider>
+</template>

package/templates/pubinfo-module/playground/src/layouts/index.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import {
+  Copyright,
+  Layout,
+  Logo,
+  Tool,
+  Tools,
+} from 'pubinfo';
+
+const title = import.meta.env.VITE_APP_TITLE;
+const dev = import.meta.env.DEV;
+</script>
+
+<template>
+  <Layout.Provider :app-title="title" :is-dev="dev">
+    <Layout>
+      <template #header>
+        <Layout.Header>
+          <template #logo>
+            <Logo name="logo" />
+          </template>
+
+          <template #tools>
+            <Tools>
+              <Tool.Fullscreen />
+              <Tool.PageReload />
+              <Tool.DarkModeToggle />
+            </Tools>
+          </template>
+        </Layout.Header>
+      </template>
+
+      <template #sidebar>
+        <Layout.Sidebar />
+      </template>
+
+      <Layout.Content />
+
+      <template #footer>
+        <Copyright />
+      </template>
+    </Layout>
+  </Layout.Provider>
+</template>

package/templates/pubinfo-module/playground/src/main.ts.hbs

@@ -0,0 +1,24 @@
+import { createPubinfo } from 'pubinfo';
+import { {{camelCase dir}} } from 'pubinfo-module-{{kebabCase dir}}';
+import { auth, basic } from './api/request';
+import App from './App.vue';
+import { setupAuth } from './modules/auth';
+import { setupRbac } from './modules/rbac';
+import { constantRoutes } from './routes';
+import './settings';
+import 'uno.css';
+
+createPubinfo({
+  app: App,
+  router: { routes: constantRoutes },
+  setup(ctx) {},
+  request: {
+    auth,
+    basic,
+  },
+  modules: [
+    setupAuth(),
+    setupRbac(),
+    {{camelCase dir}}(),
+  ],
+});

package/templates/pubinfo-module/playground/src/modules/auth.ts

@@ -0,0 +1,20 @@
+import { auth } from '@pubinfo/module-auth';
+import FourA from '@pubinfo/module-auth/providers/4A';
+
+/**
+ * 登录相关配置
+ */
+export function setupAuth() {
+  return auth({
+    baseURL: import.meta.env.VITE_APP_API_BASEURL,
+    providers: [
+      FourA({
+        // 4A client_id
+        clientId: '',
+
+        // 4A redirect_uri 需要配置为 `xxx/#/auth/4A` 的格式
+        redirectUri: '',
+      }),
+    ],
+  });
+}

package/templates/pubinfo-module/playground/src/modules/rbac.ts

@@ -0,0 +1,10 @@
+import { rbac } from '@pubinfo/module-rbac';
+import { basic } from '../api/request';
+
+export function setupRbac() {
+  return rbac({
+    id: 'RBAC',
+    pages: 'dynamic',
+    request: basic,
+  });
+}

package/templates/pubinfo-module/playground/src/routes/index.ts

@@ -0,0 +1,71 @@
+import { defineAsyncRoutes, defineSystemRoutes } from 'pubinfo';
+import Login from '@/views/system/login/index.vue';
+
+import Breadcrumb from './modules/demo/breadcrumb.example';
+import Link from './modules/demo/link';
+import MultilevelMenuExample from './modules/demo/multilevel.menu.example';
+import OtherPage from './modules/demo/other.page';
+import Single from './modules/demo/single';
+
+/**
+ * ========================================================================
+ *                       本地路由（资源管理的类型配置成"应用"）
+ *========================================================================*
+ */
+defineAsyncRoutes([
+  {
+    meta: {
+      title: '演示管理系统',
+      icon: 'workbench',
+    },
+    children: [
+      Single,
+      MultilevelMenuExample,
+      OtherPage,
+      Link,
+      Breadcrumb,
+    ],
+  },
+  {
+    meta: {
+      title: '演示系统1',
+      icon: 'process-management',
+      isDev: true,
+    },
+  },
+]);
+
+/**
+ * ========================================================================
+ *                            系统路由（包含布局）
+ *========================================================================*
+ */
+defineSystemRoutes([
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('@/views/system/index.vue'),
+    meta: {
+      title: '首页',
+      icon: 'i-ant-design:home-twotone',
+      breadcrumb: false,
+    },
+  },
+]);
+
+/**
+ * ========================================================================
+ *                          固定路由（默认路由）
+ *========================================================================*
+ */
+export const constantRoutes = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: Login,
+    meta: {
+      whiteList: true,
+      title: '登录',
+    },
+  },
+];

package/templates/pubinfo-module/playground/src/routes/modules/demo/breadcrumb.example.ts

@@ -0,0 +1,62 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw = {
+  path: '/breadcrumb_example',
+  redirect: '/breadcrumb_example/list1',
+  name: 'breadcrumbExample',
+  meta: {
+    title: '面包屑导航',
+    icon: 'i-solar-confetti-minimalistic-bold',
+  },
+  children: [
+    {
+      path: 'list1',
+      name: 'breadcrumbExampleList1',
+      component: () => import('@/views/demo/breadcrumb_example/list1.vue'),
+      meta: {
+        title: '列表1（平级模式）',
+      },
+    },
+    {
+      path: 'detail1',
+      name: 'breadcrumbExampleDetail1',
+      component: () => import('@/views/demo/breadcrumb_example/detail1.vue'),
+      meta: {
+        title: '详情1',
+        sidebar: false,
+        activeMenu: '/breadcrumb_example/list1',
+      },
+    },
+    {
+      path: 'list2',
+      name: 'breadcrumbExampleList2',
+      redirect: '/breadcrumb_example/demo/list2',
+      meta: {
+        title: '列表2（层级模式）',
+      },
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/demo/breadcrumb_example/list2.vue'),
+          meta: {
+            title: '列表2（层级模式）',
+            sidebar: false,
+            breadcrumb: false,
+          },
+        },
+        {
+          path: 'detail2',
+          name: 'breadcrumbExampleDetail2',
+          component: () => import('@/views/demo/breadcrumb_example/detail2.vue'),
+          meta: {
+            title: '详情2',
+            sidebar: false,
+            activeMenu: '/breadcrumb_example/list2',
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export default routes;

package/templates/pubinfo-module/playground/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-module/playground/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-module/playground/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-module/playground/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-template → pubinfo-module/playground}/src/settings.ts

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

package/templates/pubinfo-module/playground/src/stores/index.ts

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

package/templates/pubinfo-module/playground/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-module/playground/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-module/playground/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-module/playground/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-module/playground/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-module/playground/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-module/playground/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-module/playground/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-module/playground/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-module/playground/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-module/playground/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-module/playground/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-module/playground/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-module/playground/src/views/system/index.vue

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

package/templates/pubinfo-module/playground/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>