feat(package): 新增一些案例；但是 tailwindcss 仅在子项目生效

packages/nanxing-admin/core/createWebApp.ts

@@ -0,0 +1,31 @@
+import { createApp, type App, type Component, type Plugin } from 'vue';
+import { createWebRouter, type WebRouterOptions } from './createWebRouter';
+import { createPinia } from 'pinia';
+import piniaPluginPersistedState from 'pinia-plugin-persistedstate';
+
+export interface WebAppOptions {
+  mount: string;
+  plugins?: Plugin<unknown[]>[];
+  requestPrefix: string;
+  router: WebRouterOptions;
+}
+
+// 封装一个创建 Web 应用的函数
+// 用于替代 Vue 3 项目中的 main.ts 默认的应用逻辑
+export function createWebApp(rootComponent: Component, options: WebAppOptions): App {
+  const app = createApp(rootComponent);
+  const router = createWebRouter(options.router);
+
+  app.use(router);
+
+  if (options.plugins && options.plugins.length > 0) {
+    options.plugins.forEach((plugin) => {
+      app.use(plugin);
+    });
+  }
+
+  app.use(createPinia().use(piniaPluginPersistedState));
+
+  app.mount(options.mount);
+  return app;
+}

packages/nanxing-admin/core/createWebRouter.ts

@@ -0,0 +1,50 @@
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+  type Router,
+  type RouterHistory,
+  type RouterOptions,
+} from 'vue-router';
+import { setRouterTranslateGuard } from './router/guards';
+
+type RouterHistoryMode = 'hash' | 'history' | 'memory';
+type RouterHistoryFunction = (base?: string) => RouterHistory;
+
+function _useHistory(mode: RouterHistoryMode): RouterHistoryFunction {
+  const historyObject: Record<RouterHistoryMode, RouterHistoryFunction> = {
+    hash: createWebHashHistory,
+    history: createWebHistory,
+    memory: createMemoryHistory,
+  };
+  return historyObject[mode];
+}
+
+// 创建一个 Web 路由实例的函数
+// 默认是 history 模式
+export interface WebRouterOptions extends Omit<RouterOptions, 'history'> {
+  mode?: RouterHistoryMode;
+  base?: string;
+  guards?: ((router: Router) => void)[];
+}
+export function createWebRouter(options: WebRouterOptions): Router {
+  const history = _useHistory(options?.mode || 'history')?.(options?.base);
+  const routes = options?.routes || [];
+  const scrollBehavior = options?.scrollBehavior || (() => ({ left: 0, top: 0 }));
+  const guards = [setRouterTranslateGuard].concat(options?.guards || []);
+
+  const router = createRouter({
+    history,
+    routes,
+    scrollBehavior,
+  });
+
+  if (guards && guards.length > 0) {
+    guards.forEach((guard) => {
+      guard(router);
+    });
+  }
+
+  return router;
+}

packages/nanxing-admin/core/router/guards.ts

@@ -0,0 +1,11 @@
+import { type ShallowRef, shallowRef } from 'vue';
+import { type LoadingBarApi } from 'naive-ui';
+import type { Router } from 'vue-router';
+
+export const loadingBarRef: ShallowRef<LoadingBarApi | null> = shallowRef(null);
+
+export function setRouterTranslateGuard(router: Router) {
+  console.log('Router translate guard set');
+  router.beforeEach(() => loadingBarRef.value?.start());
+  router.afterEach(() => loadingBarRef.value?.finish());
+}