@peng_kai/kit 0.1.16 → 0.2.0-beta.0

package/admin/defines/startup/index.ts

@@ -1,2 +1,2 @@
 export { defineStartup } from './defineStartup';
-export { getStartups } from './getStartups';
+export { runStartup } from './runStartup';

package/admin/defines/startup/{getStartups.ts → runStartup.ts}

@@ -1,11 +1,13 @@
+import type { App } from 'vue';
 import { ENV } from '../../../utils';
 import { StartupSymbol } from './defineStartup';
 import type { StartupFn } from './defineStartup';
 
-export async function getStartups() {
-  const moduleLoaders = getStartups.modules as Record<string, Function>;
+export async function runStartup(app: App) {
+  const moduleLoaders = runStartup.modules as Record<string, Function>;
   const startupPaths: string[] = [];
-  const startups: Array<StartupFn> = [];
+  const onMountCallbacks: Function[] = [];
+  (app as any).deps = {};
 
   for (const [path, moduleLoader] of Object.entries(moduleLoaders)) {
     const module: any = await moduleLoader();
@@ -15,16 +17,23 @@ export async function getStartups() {
       continue;
 
     startupPaths.push(path);
-    startups.push(plugin);
+
+    /* create 钩子 */
+    await plugin(app, {
+      onMount(cb) {
+        cb && onMountCallbacks.push(cb);
+      },
+    });
   }
 
+  /* mount 钩子 */
+  onMountCallbacks.forEach(cb => cb());
+
   // 输出 App 插件
   if (!ENV.isProd) {
     console.groupCollapsed('启动时');
     console.table(startupPaths.map(path => ({ path })), ['path']);
     console.groupEnd();
   }
-
-  return startups;
 }
-getStartups.modules = {} as any;
+runStartup.modules = {} as any;

package/admin/layout/large/Breadcrumb.vue

@@ -1,69 +1,68 @@
-<script lang="ts">
-import { computed } from 'vue';
-import type { VNode } from 'vue';
-import { Breadcrumb as ABreadcrumb } from 'ant-design-vue';
-import type { Route as AntdBreadcrumbRoute } from 'ant-design-vue/es/breadcrumb/Breadcrumb';
-import type { IBreadcrumb } from '../../hooks';
-import { getDependencies } from '../../../kitDependencies';
-
-interface IBreadcrumbRoute extends AntdBreadcrumbRoute {
-  icon?: VNode | null
-  trigger?: () => void
-}
-
-function _buildRoute(breadcrumb: IBreadcrumb): IBreadcrumbRoute {
-  return {
-    breadcrumbName: breadcrumb.title,
-    path: breadcrumb.title,
-    icon: breadcrumb.icon,
-    children: breadcrumb.children?.map(child => _buildRoute(child)),
-    trigger: breadcrumb.trigger,
-  };
-}
-</script>
-
-<script setup lang="ts">
-const { usePage } = getDependencies();
-const { currentPageState } = usePage();
-const routes = computed(() => {
-  let breadcrumbs: IBreadcrumbRoute[] = [];
-
-  if (!currentPageState.value)
-    return breadcrumbs;
-
-  breadcrumbs = currentPageState.value.breadcrumbs.map(breadcrumb => _buildRoute(breadcrumb));
-
-  breadcrumbs.push({
-    path: currentPageState.value.title,
-    breadcrumbName: currentPageState.value.title,
-    icon: currentPageState.value.icon,
-  });
-
-  return breadcrumbs;
-});
-</script>
-
-<template>
-  <ABreadcrumb class="breadcrumb" :routes="routes">
-    <template #itemRender="{ route }: {route: IBreadcrumbRoute}">
-      <div @click="route.trigger?.()">
-        <component :is="route.icon" v-if="route.icon" class="mb-0.2em mr-0.2em" />
-        <span>{{ route.breadcrumbName }}</span>
-      </div>
-    </template>
-  </ABreadcrumb>
-</template>
-
-<style lang="scss" scoped>
-.breadcrumb {
-  font-size: 1rem;
-
-  :deep(.ant-dropdown-trigger) {
-    height: 1.6em;
-  }
-
-  :deep(.anticon-down) {
-    display: none;
-  }
-}
-</style>
+<script lang="ts">
+import { computed } from 'vue';
+import type { VNode } from 'vue';
+import { Breadcrumb as ABreadcrumb } from 'ant-design-vue';
+import type { Route as AntdBreadcrumbRoute } from 'ant-design-vue/es/breadcrumb/Breadcrumb';
+import { adminPlugin } from '../../adminPlugin';
+import type { IBreadcrumb } from '../../stores/createUsePageStore';
+
+interface IBreadcrumbRoute extends AntdBreadcrumbRoute {
+  icon?: VNode | null
+  trigger?: () => void
+}
+
+function _buildRoute(breadcrumb: IBreadcrumb): IBreadcrumbRoute {
+  return {
+    breadcrumbName: breadcrumb.title,
+    path: breadcrumb.title,
+    icon: breadcrumb.icon,
+    children: breadcrumb.children?.map(child => _buildRoute(child)),
+    trigger: breadcrumb.trigger,
+  };
+}
+</script>
+
+<script setup lang="ts">
+const pageStore = adminPlugin.deps.usePageStore();
+const routes = computed(() => {
+  let breadcrumbs: IBreadcrumbRoute[] = [];
+
+  if (!pageStore.currentPageState)
+    return breadcrumbs;
+
+  breadcrumbs = pageStore.currentPageState.breadcrumbs.map(breadcrumb => _buildRoute(breadcrumb));
+
+  breadcrumbs.push({
+    path: pageStore.currentPageState.title,
+    breadcrumbName: pageStore.currentPageState.title,
+    icon: pageStore.currentPageState.icon,
+  });
+
+  return breadcrumbs;
+});
+</script>
+
+<template>
+  <ABreadcrumb class="breadcrumb" :routes="routes">
+    <template #itemRender="{ route }: {route: IBreadcrumbRoute}">
+      <div @click="route.trigger?.()">
+        <component :is="route.icon" v-if="route.icon" class="mb-0.2em mr-0.2em" />
+        <span>{{ route.breadcrumbName }}</span>
+      </div>
+    </template>
+  </ABreadcrumb>
+</template>
+
+<style lang="scss" scoped>
+.breadcrumb {
+  font-size: 1rem;
+
+  :deep(.ant-dropdown-trigger) {
+    height: 1.6em;
+  }
+
+  :deep(.anticon-down) {
+    display: none;
+  }
+}
+</style>

package/admin/layout/large/Content.vue

@@ -1,24 +1,23 @@
-<script setup lang="ts">
-import { getDependencies } from '../../../kitDependencies';
-
-const { usePage } = getDependencies();
-const { pageCacheList, setPage } = usePage();
-</script>
-
-<template>
-  <RouterView #default="{ Component, route }">
-    <KeepAlive :include="pageCacheList">
-      <Suspense>
-        <component :is="setPage(Component, route)" :key="(Component.type as any).name" />
-        <template #fallback>
-          <div class="flex justify-center items-center h-70">
-            <div class="flex items-center">
-              <i class="i-svg-spinners:180-ring-with-bg block color-primary scale-125 mr-2" />
-              <span class="text-gray">正在加载...</span>
-            </div>
-          </div>
-        </template>
-      </Suspense>
-    </KeepAlive>
-  </RouterView>
-</template>
+<script setup lang="ts">
+import { adminPlugin } from '../../adminPlugin';
+
+const pageStore = adminPlugin.deps.usePageStore();
+</script>
+
+<template>
+  <RouterView #default="{ Component, route }">
+    <KeepAlive :include="pageStore.pageCacheList">
+      <Suspense>
+        <component :is="pageStore.setPage(Component, route)" :key="(Component.type as any).name" />
+        <template #fallback>
+          <div class="flex justify-center items-center h-70">
+            <div class="flex items-center">
+              <i class="i-svg-spinners:180-ring-with-bg block color-primary scale-125 mr-2" />
+              <span class="text-gray">正在加载...</span>
+            </div>
+          </div>
+        </template>
+      </Suspense>
+    </KeepAlive>
+  </RouterView>
+</template>

package/admin/layout/large/Menu.vue

@@ -1,69 +1,68 @@
-<script lang="ts">
-import { computed, ref, watch } from 'vue';
-import { Menu as AMenu } from 'ant-design-vue';
-import type { ItemType } from 'ant-design-vue';
-import type { TMenu } from '../../hooks';
-import { getDependencies } from '../../../kitDependencies';
-
-function formatMenu(menu: TMenu): ItemType {
-  return {
-    key: menu.key,
-    title: menu.label,
-    label: menu.label,
-    icon: menu.icon ?? undefined,
-    onClick: (e) => {
-      (e as any).stopPropagation();
-      menu.trigger();
-    },
-    children: menu.children?.map(formatMenu),
-  };
-}
-</script>
-
-<script setup lang="ts">
-const { useRouter, useMenu } = getDependencies();
-const router = useRouter();
-const { menus, getMenuPath } = useMenu();
-const items = computed(() => menus.map(formatMenu));
-const openKeys = ref<string[]>([]);
-const selectedKeys = ref<string[]>([]);
-
-watch(
-  () => router?.currentRoute.value,
-  (route) => {
-    if (!route)
-      return;
-
-    const menuPath = getMenuPath(route.name as string);
-    openKeys.value = menuPath.map(menu => menu.key);
-    selectedKeys.value = [openKeys.value.pop()!];
-  },
-  { immediate: true },
-);
-</script>
-
-<template>
-  <AMenu
-    class="menu"
-    :items="items"
-    :openKeys="openKeys"
-    :selectedKeys="selectedKeys"
-    :inlineIndent="16"
-    mode="inline"
-  />
-</template>
-
-<style lang="scss" scoped>
-.menu {
-  border-inline-end: none !important;
-
-  &.ant-menu-inline-collapsed {
-    width: var(--app-siderbar-width);
-  }
-
-  &,
-  .ant-menu {
-    background-color: transparent;
-  }
-}
-</style>
+<script lang="ts">
+import { computed, ref, watch } from 'vue';
+import { Menu as AMenu } from 'ant-design-vue';
+import type { ItemType } from 'ant-design-vue';
+import { adminPlugin } from '../../adminPlugin';
+import type { TMenu } from '../../stores/createUseMenuStore';
+
+function formatMenu(menu: TMenu): ItemType {
+  return {
+    key: menu.key,
+    title: menu.label,
+    label: menu.label,
+    icon: menu.icon ?? undefined,
+    onClick: (e) => {
+      (e as any).stopPropagation();
+      menu.trigger();
+    },
+    children: menu.children?.map(formatMenu),
+  };
+}
+</script>
+
+<script setup lang="ts">
+const { router, useMenuStore } = adminPlugin.deps;
+const menuStore = useMenuStore();
+const items = computed(() => menuStore.menus.map(formatMenu));
+const openKeys = ref<string[]>([]);
+const selectedKeys = ref<string[]>([]);
+
+watch(
+  () => router?.currentRoute.value,
+  (route) => {
+    if (!route)
+      return;
+
+    const menuPath = menuStore.getMenuPath(route.name as string);
+    openKeys.value = menuPath.map(menu => menu.key);
+    selectedKeys.value = [openKeys.value.pop()!];
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <AMenu
+    class="menu"
+    :items="items"
+    :openKeys="openKeys"
+    :selectedKeys="selectedKeys"
+    :inlineIndent="16"
+    mode="inline"
+  />
+</template>
+
+<style lang="scss" scoped>
+.menu {
+  border-inline-end: none !important;
+
+  &.ant-menu-inline-collapsed {
+    width: var(--app-siderbar-width);
+  }
+
+  &,
+  .ant-menu {
+    background-color: transparent;
+  }
+}
+</style>

package/admin/layout/large/PageTab.vue

@@ -1,71 +1,70 @@
-<script setup lang="ts">
-import { TabPane as ATabPane, Tabs as ATabs } from 'ant-design-vue';
-import { getDependencies } from '../../../kitDependencies';
-
-const { usePageTab } = getDependencies();
-const { activeTab, tabList, openTab, closeTab } = usePageTab();
-</script>
-
-<template>
-  <ATabs
-    class="app-page-tabs"
-    :activeKey="activeTab"
-    type="editable-card"
-    size="small"
-    :animated="false"
-    :hideAdd="true"
-    :tabBarGutter="4"
-    @tabClick="(openTab as any)"
-    @edit="(closeTab as any)"
-  >
-    <ATabPane v-for="tab of tabList" :key="tab.key" :tab="tab.title">
-      <template #closeIcon>
-        <i class="i-icon-park-outline:close" />
-      </template>
-    </ATabPane>
-  </ATabs>
-</template>
-
-<style scoped lang="scss">
-.app-page-tabs {
-  :deep(.ant-tabs-nav) {
-    margin: 0;
-  }
-
-  :deep(.ant-tabs-nav::before) {
-    display: none;
-  }
-
-  :deep(.ant-tabs-tab) {
-    --uno: 'border-rd-3px! text-14px p-[3px_1px_3px_8px]! select-none';
-  }
-
-  :deep(.ant-tabs-tab .ant-tabs-tab-btn) {
-    transform: translateX(8px);
-  }
-
-  :deep(.ant-tabs-tab-active) {
-    --uno: 'border-[currentColor]!';
-  }
-
-  :deep(.ant-tabs-tab-remove) {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    margin: 0;
-    opacity: 0;
-    transition: all 150ms;
-  }
-
-  :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn),
-  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
-    transform: translateX(0);
-  }
-
-  :deep(.ant-tabs-tab:hover .ant-tabs-tab-remove),
-  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
-    margin-left: 0;
-    opacity: 1;
-  }
-}
-</style>
+<script setup lang="ts">
+import { TabPane as ATabPane, Tabs as ATabs } from 'ant-design-vue';
+import { adminPlugin } from '../../adminPlugin';
+
+const pageTabStore = adminPlugin.deps.usePageTabStore();
+</script>
+
+<template>
+  <ATabs
+    class="app-page-tabs"
+    :activeKey="pageTabStore.activeTab"
+    type="editable-card"
+    size="small"
+    :animated="false"
+    :hideAdd="true"
+    :tabBarGutter="4"
+    @tabClick="(pageTabStore.openTab as any)"
+    @edit="(pageTabStore.closeTab as any)"
+  >
+    <ATabPane v-for="tab of pageTabStore.tabList" :key="tab.key" :tab="tab.title">
+      <template #closeIcon>
+        <i class="i-icon-park-outline:close" />
+      </template>
+    </ATabPane>
+  </ATabs>
+</template>
+
+<style scoped lang="scss">
+.app-page-tabs {
+  :deep(.ant-tabs-nav) {
+    margin: 0;
+  }
+
+  :deep(.ant-tabs-nav::before) {
+    display: none;
+  }
+
+  :deep(.ant-tabs-tab) {
+    --uno: 'border-rd-3px! text-14px p-[3px_1px_3px_8px]! select-none';
+  }
+
+  :deep(.ant-tabs-tab .ant-tabs-tab-btn) {
+    transform: translateX(8px);
+  }
+
+  :deep(.ant-tabs-tab-active) {
+    --uno: 'border-[currentColor]!';
+  }
+
+  :deep(.ant-tabs-tab-remove) {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin: 0;
+    opacity: 0;
+    transition: all 150ms;
+  }
+
+  :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn),
+  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+    transform: translateX(0);
+  }
+
+  :deep(.ant-tabs-tab:hover .ant-tabs-tab-remove),
+  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+</style>

package/admin/permission/index.ts

@@ -1,4 +1,2 @@
-export { setupPermissionRouterGuard } from './routerGuard';
-export { setupPermissionPlugin } from './vuePlugin';
-export { usePermission } from './usePermission';
-export type { THasPermissionsFn } from './vuePlugin';
+export { setupPermissionRouterGuard } from './routerGuard';
+export { setupPermissionPlugin } from './vuePlugin';

package/admin/permission/routerGuard.ts

@@ -1,43 +1,41 @@
-import type { Router } from 'vue-router';
-import { getDependencies } from '../../kitDependencies';
-import { hasToken } from '../../utils';
-
-export function setupPermissionRouterGuard(router: Router, rouneNames: { index: string, login: string, 403: string }) {
-  const { usePermission } = getDependencies();
-  const { refreshPermission, hasPermissions } = usePermission();
-
-  router.beforeEach(async (to, _, next) => {
-    const isLogin = hasToken();
-    const needLogin = Boolean(to.meta?.requireAuth);
-    let hasPermission = false;
-
-    if (isLogin) {
-      await refreshPermission();
-
-      const permissionCode = to.meta?.permissionCode;
-      hasPermission = permissionCode ? hasPermissions(permissionCode) : true;
-    }
-
-    // 已登录状态跳转登录页，跳转至首页
-    if (isLogin && to.name === rouneNames.login)
-      return next({ name: rouneNames.index, replace: true });
-
-    // 不需要登录权限的页面直接通行
-    else if (!needLogin)
-      return next(true);
-
-    // 未登录状态进入需要登录权限的页面
-    else if (!isLogin && needLogin)
-      return next({ name: rouneNames.login, replace: true });
-
-    // 登录状态进入需要登录权限的页面，有权限直接通行
-    else if (isLogin && needLogin && hasPermission)
-      return next(true);
-
-    // 登录状态进入需要登录权限的页面，无权限，重定向到无权限页面
-    else if (isLogin && needLogin && !hasPermission)
-      return next({ name: rouneNames[403], replace: true });
-
-    return next(false);
-  });
-}
+import type { Router } from 'vue-router';
+import { adminPlugin } from '../adminPlugin';
+import { hasToken } from '../../utils';
+
+export function setupPermissionRouterGuard(router: Router, rouneNames: { index: string, login: string, 403: string }) {
+  router.beforeEach(async (to, _, next) => {
+    const permissionStore = adminPlugin.deps.usePermissionStore();
+    const isLogin = hasToken();
+    const needLogin = Boolean(to.meta?.requireAuth);
+    let hasPermission = false;
+
+    if (isLogin) {
+      await permissionStore.refreshPermission();
+
+      const permissionCode = to.meta?.permissionCode;
+      hasPermission = permissionCode ? permissionStore.hasPermission(permissionCode) : true;
+    }
+
+    // 已登录状态跳转登录页，跳转至首页
+    if (isLogin && to.name === rouneNames.login)
+      return next({ name: rouneNames.index, replace: true });
+
+    // 不需要登录权限的页面直接通行
+    else if (!needLogin)
+      return next(true);
+
+    // 未登录状态进入需要登录权限的页面
+    else if (!isLogin && needLogin)
+      return next({ name: rouneNames.login, replace: true });
+
+    // 登录状态进入需要登录权限的页面，有权限直接通行
+    else if (isLogin && needLogin && hasPermission)
+      return next(true);
+
+    // 登录状态进入需要登录权限的页面，无权限，重定向到无权限页面
+    else if (isLogin && needLogin && !hasPermission)
+      return next({ name: rouneNames[403], replace: true });
+
+    return next(false);
+  });
+}