init project

apps/web-antd/src/router/access.ts

@@ -0,0 +1,41 @@
+import type {
+  AppRouteRecordRaw,
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+} from '@vben/types';
+
+import { generateAccessible } from '@vben/access';
+import { preferences } from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
+import { convertServerMenuToRouteRecordStringComponent } from '@vben/utils';
+
+import { BasicLayout, IFrameView } from '#/layouts';
+
+const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
+
+async function generateAccess(options: GenerateMenuAndRoutesOptions) {
+  const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue');
+  const accessStore = useAccessStore();
+
+  const layoutMap: ComponentRecordType = {
+    BasicLayout,
+    IFrameView,
+  };
+
+  return await generateAccessible(preferences.app.accessMode, {
+    ...options,
+    fetchMenuListAsync: async () => {
+      // 由于 yudao 通过 accessStore 读取，所以不在进行 message.loading 提示
+      // 补充说明：accessStore.accessMenus 一开始是 AppRouteRecordRaw 类型（后端加载），后面被赋值成 MenuRecordRaw 类型（前端转换）
+      const accessMenus = accessStore.accessMenus as AppRouteRecordRaw[];
+      return convertServerMenuToRouteRecordStringComponent(accessMenus);
+    },
+    // 可以指定没有权限跳转403页面
+    forbiddenComponent,
+    // 如果 route.meta.menuVisibleWithForbidden = true
+    layoutMap,
+    pageMap,
+  });
+}
+
+export { generateAccess };

apps/web-antd/src/router/guard.ts

@@ -0,0 +1,156 @@
+import type { Router } from 'vue-router';
+
+import { LOGIN_PATH } from '@vben/constants';
+import { $t } from '@vben/locales';
+import { preferences } from '@vben/preferences';
+import { useAccessStore, useUserStore } from '@vben/stores';
+import { startProgress, stopProgress } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { getSimpleDictDataList } from '#/api/system/dict/data';
+import { accessRoutes, coreRouteNames } from '#/router/routes';
+import { useAuthStore, useDictStore } from '#/store';
+
+import { generateAccess } from './access';
+
+/**
+ * 通用守卫配置
+ * @param router
+ */
+function setupCommonGuard(router: Router) {
+  // 记录已经加载的页面
+  const loadedPaths = new Set<string>();
+
+  router.beforeEach((to) => {
+    to.meta.loaded = loadedPaths.has(to.path);
+
+    // 页面加载进度条
+    if (!to.meta.loaded && preferences.transition.progress) {
+      startProgress();
+    }
+    return true;
+  });
+
+  router.afterEach((to) => {
+    // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行
+
+    loadedPaths.add(to.path);
+
+    // 关闭页面加载进度条
+    if (preferences.transition.progress) {
+      stopProgress();
+    }
+  });
+}
+
+/**
+ * 权限访问守卫配置
+ * @param router
+ */
+function setupAccessGuard(router: Router) {
+  router.beforeEach(async (to, from) => {
+    const accessStore = useAccessStore();
+    const userStore = useUserStore();
+    const authStore = useAuthStore();
+    const dictStore = useDictStore();
+
+    // 基本路由，这些路由不需要进入权限拦截
+    if (coreRouteNames.includes(to.name as string)) {
+      if (to.path === LOGIN_PATH && accessStore.accessToken) {
+        return decodeURIComponent(
+          (to.query?.redirect as string) ||
+            userStore.userInfo?.homePath ||
+            preferences.app.defaultHomePath,
+        );
+      }
+      return true;
+    }
+
+    // accessToken 检查
+    if (!accessStore.accessToken) {
+      // 明确声明忽略权限访问权限，则可以访问
+      if (to.meta.ignoreAccess) {
+        return true;
+      }
+
+      // 没有访问权限，跳转登录页面
+      if (to.fullPath !== LOGIN_PATH) {
+        return {
+          path: LOGIN_PATH,
+          // 如不需要，直接删除 query
+          query:
+            to.fullPath === preferences.app.defaultHomePath
+              ? {}
+              : { redirect: encodeURIComponent(to.fullPath) },
+          // 携带当前跳转的页面，登录后重新跳转该页面
+          replace: true,
+        };
+      }
+      return to;
+    }
+
+    // 是否已经生成过动态路由
+    if (accessStore.isAccessChecked) {
+      return true;
+    }
+
+    // 加载字典数据（不阻塞加载）
+    dictStore.setDictCacheByApi(getSimpleDictDataList);
+
+    // 生成路由表
+    // 当前登录用户拥有的角色标识列表
+    let userInfo = userStore.userInfo;
+    if (!userInfo) {
+      // add by 芋艿：由于 yudao 是 fetchUserInfo 统一加载用户 + 权限信息，所以将 fetchMenuListAsync
+      const loading = message.loading({
+        content: `${$t('common.loadingMenu')}...`,
+      });
+      try {
+        const authPermissionInfo = await authStore.fetchUserInfo();
+        if (authPermissionInfo) {
+          userInfo = authPermissionInfo.user;
+        }
+      } finally {
+        loading();
+      }
+    }
+    const userRoles = userStore.userRoles ?? [];
+
+    // 生成菜单和路由
+    const { accessibleMenus, accessibleRoutes } = await generateAccess({
+      roles: userRoles,
+      router,
+      // 则会在菜单中显示，但是访问会被重定向到403
+      routes: accessRoutes,
+    });
+
+    // 保存菜单信息和路由信息
+    accessStore.setAccessMenus(accessibleMenus);
+    accessStore.setAccessRoutes(accessibleRoutes);
+    accessStore.setIsAccessChecked(true);
+    userStore.setUserRoles(userRoles);
+    const redirectPath = (from.query.redirect ??
+      (to.path === preferences.app.defaultHomePath
+        ? userInfo?.homePath || preferences.app.defaultHomePath
+        : to.fullPath)) as string;
+
+    return {
+      ...router.resolve(decodeURIComponent(redirectPath)),
+      replace: true,
+    };
+  });
+}
+
+/**
+ * 项目守卫配置
+ * @param router
+ */
+function createRouterGuard(router: Router) {
+  /** 通用 */
+  setupCommonGuard(router);
+  /** 权限访问 */
+  setupAccessGuard(router);
+}
+
+export { createRouterGuard };

apps/web-antd/src/router/index.ts

@@ -0,0 +1,40 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+
+import { resetStaticRoutes } from '@vben/utils';
+
+import { createRouterGuard } from './guard';
+import { routes } from './routes';
+import { setupBaiduTongJi } from './tongji';
+
+/**
+ *  @zh_CN 创建vue-router实例
+ */
+const router = createRouter({
+  history:
+    import.meta.env.VITE_ROUTER_HISTORY === 'hash'
+      ? createWebHashHistory(import.meta.env.VITE_BASE)
+      : createWebHistory(import.meta.env.VITE_BASE),
+  // 应该添加到路由的初始路由列表。
+  routes,
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
+  // 是否应该禁止尾部斜杠。
+  // strict: true,
+});
+
+const resetRoutes = () => resetStaticRoutes(router, routes);
+
+// 创建路由守卫
+createRouterGuard(router);
+// 设置百度统计
+setupBaiduTongJi(router);
+
+export { resetRoutes, router };

apps/web-antd/src/router/routes/core.ts

@@ -0,0 +1,114 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
+/** 全局404页面 */
+const fallbackNotFoundRoute: RouteRecordRaw = {
+  component: () => import('#/views/_core/fallback/not-found.vue'),
+  meta: {
+    hideInBreadcrumb: true,
+    hideInMenu: true,
+    hideInTab: true,
+    title: '404',
+  },
+  name: 'FallbackNotFound',
+  path: '/:path(.*)*',
+};
+
+/** 基本路由，这些路由是必须存在的 */
+const coreRoutes: RouteRecordRaw[] = [
+  /**
+   * 根路由
+   * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
+   * 此路由必须存在，且不应修改
+   */
+  {
+    component: BasicLayout,
+    meta: {
+      hideInBreadcrumb: true,
+      title: 'Root',
+    },
+    name: 'Root',
+    path: '/',
+    redirect: preferences.app.defaultHomePath,
+    children: [],
+  },
+  {
+    component: AuthPageLayout,
+    meta: {
+      hideInTab: true,
+      title: 'Authentication',
+    },
+    name: 'Authentication',
+    path: '/auth',
+    redirect: LOGIN_PATH,
+    children: [
+      {
+        name: 'Login',
+        path: 'login',
+        component: () => import('#/views/_core/authentication/login.vue'),
+        meta: {
+          title: $t('page.auth.login'),
+        },
+      },
+      {
+        name: 'CodeLogin',
+        path: 'code-login',
+        component: () => import('#/views/_core/authentication/code-login.vue'),
+        meta: {
+          title: $t('page.auth.codeLogin'),
+        },
+      },
+      {
+        name: 'QrCodeLogin',
+        path: 'qrcode-login',
+        component: () =>
+          import('#/views/_core/authentication/qrcode-login.vue'),
+        meta: {
+          title: $t('page.auth.qrcodeLogin'),
+        },
+      },
+      {
+        name: 'ForgetPassword',
+        path: 'forget-password',
+        component: () =>
+          import('#/views/_core/authentication/forget-password.vue'),
+        meta: {
+          title: $t('page.auth.forgetPassword'),
+        },
+      },
+      {
+        name: 'Register',
+        path: 'register',
+        component: () => import('#/views/_core/authentication/register.vue'),
+        meta: {
+          title: $t('page.auth.register'),
+        },
+      },
+      {
+        name: 'SocialLogin',
+        path: 'social-login',
+        component: () =>
+          import('#/views/_core/authentication/social-login.vue'),
+        meta: {
+          title: $t('page.auth.login'),
+        },
+      },
+      {
+        name: 'SSOLogin',
+        path: 'sso-login',
+        component: () => import('#/views/_core/authentication/sso-login.vue'),
+        meta: {
+          title: $t('page.auth.login'),
+        },
+      },
+    ],
+  },
+];
+
+export { coreRoutes, fallbackNotFoundRoute };

apps/web-antd/src/router/routes/index.ts

@@ -0,0 +1,47 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { mergeRouteModules, traverseTreeValues } from '@vben/utils';
+
+import { coreRoutes, fallbackNotFoundRoute } from './core';
+
+const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
+  eager: true,
+});
+
+// 有需要可以自行打开注释，并创建文件夹
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
+// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+
+/** 动态路由 */
+const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
+
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统(不会显示在菜单中) */
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
+// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+const staticRoutes: RouteRecordRaw[] = [];
+const externalRoutes: RouteRecordRaw[] = [];
+
+/** 路由列表，由基本路由、外部路由和404兜底路由组成
+ *  无需走权限验证（会一直显示在菜单中） */
+const routes: RouteRecordRaw[] = [
+  ...coreRoutes,
+  ...externalRoutes,
+  fallbackNotFoundRoute,
+];
+
+/** 基本路由列表，这些路由不需要进入权限拦截 */
+const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);
+
+/** 有权限校验的路由列表，包含动态路由和静态路由 */
+const accessRoutes = [...dynamicRoutes, ...staticRoutes];
+
+// add by 芋艿：from https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/router/routes/index.ts#L38-L45
+const componentKeys: string[] = Object.keys(
+  import.meta.glob('../../views/**/*.vue'),
+)
+  .filter((item) => !item.includes('/modules/'))
+  .map((v) => {
+    const path = v.replace('../../views/', '/');
+    return path.endsWith('.vue') ? path.slice(0, -4) : path;
+  });
+export { accessRoutes, componentKeys, coreRouteNames, routes };

apps/web-antd/src/router/routes/modules/crm.ts

@@ -0,0 +1,91 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/crm',
+    name: 'CrmCenter',
+    meta: {
+      title: '客户管理',
+      icon: 'simple-icons:civicrm',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: 'clue/detail/:id',
+        name: 'CrmClueDetail',
+        meta: {
+          title: '线索详情',
+          activeMenu: '/crm/clue',
+        },
+        component: () => import('#/views/crm/clue/modules/detail.vue'),
+      },
+      {
+        path: 'customer/detail/:id',
+        name: 'CrmCustomerDetail',
+        meta: {
+          title: '客户详情',
+          activeMenu: '/crm/customer',
+        },
+        component: () => import('#/views/crm/customer/modules/detail.vue'),
+      },
+      {
+        path: 'business/detail/:id',
+        name: 'CrmBusinessDetail',
+        meta: {
+          title: '商机详情',
+          activeMenu: '/crm/business',
+        },
+        component: () => import('#/views/crm/business/modules/detail.vue'),
+      },
+      {
+        path: 'contract/detail/:id',
+        name: 'CrmContractDetail',
+        meta: {
+          title: '合同详情',
+          activeMenu: '/crm/contract',
+        },
+        component: () => import('#/views/crm/contract/modules/detail.vue'),
+      },
+      {
+        path: 'receivable-plan/detail/:id',
+        name: 'CrmReceivablePlanDetail',
+        meta: {
+          title: '回款计划详情',
+          activeMenu: '/crm/receivable-plan',
+        },
+        component: () =>
+          import('#/views/crm/receivable/plan/modules/detail.vue'),
+      },
+      {
+        path: 'receivable/detail/:id',
+        name: 'CrmReceivableDetail',
+        meta: {
+          title: '回款详情',
+          activeMenu: '/crm/receivable',
+        },
+        component: () => import('#/views/crm/receivable/modules/detail.vue'),
+      },
+      {
+        path: 'contact/detail/:id',
+        name: 'CrmContactDetail',
+        meta: {
+          title: '联系人详情',
+          activeMenu: '/crm/contact',
+        },
+        component: () => import('#/views/crm/contact/modules/detail.vue'),
+      },
+      {
+        path: 'product/detail/:id',
+        name: 'CrmProductDetail',
+        meta: {
+          title: '产品详情',
+          activeMenu: '/crm/product',
+        },
+        component: () => import('#/views/crm/product/modules/detail.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

apps/web-antd/src/router/routes/modules/dashboard.ts

@@ -0,0 +1,48 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      icon: 'lucide:layout-dashboard',
+      order: -1,
+      title: $t('page.dashboard.title'),
+    },
+    name: 'Dashboard',
+    path: '/dashboard',
+    children: [
+      {
+        name: 'Workspace',
+        path: '/workspace',
+        component: () => import('#/views/dashboard/workspace/index.vue'),
+        meta: {
+          icon: 'carbon:workspace',
+          title: $t('page.dashboard.workspace'),
+        },
+      },
+      {
+        name: 'Analytics',
+        path: '/analytics',
+        component: () => import('#/views/dashboard/analytics/index.vue'),
+        meta: {
+          affixTab: true,
+          icon: 'lucide:area-chart',
+          title: $t('page.dashboard.analytics'),
+        },
+      },
+    ],
+  },
+  {
+    name: 'Profile',
+    path: '/profile',
+    component: () => import('#/views/_core/profile/index.vue'),
+    meta: {
+      icon: 'ant-design:profile-outlined',
+      title: $t('ui.widgets.profile'),
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes;

apps/web-antd/src/router/routes/modules/infra.ts

@@ -0,0 +1,39 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/infra/job/job-log',
+    component: () => import('#/views/infra/job/logger/index.vue'),
+    name: 'InfraJobLog',
+    meta: {
+      title: '调度日志',
+      icon: 'ant-design:history-outlined',
+      activePath: '/infra/job',
+      keepAlive: false,
+      hideInMenu: true,
+    },
+  },
+  {
+    path: '/codegen',
+    name: 'CodegenEdit',
+    meta: {
+      title: '代码生成',
+      icon: 'ic:baseline-view-in-ar',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: '/codegen/edit',
+        name: 'InfraCodegenEdit',
+        component: () => import('#/views/infra/codegen/edit/index.vue'),
+        meta: {
+          title: '修改生成配置',
+          activeMenu: '/infra/codegen',
+        },
+      },
+    ],
+  },
+];
+
+export default routes;

apps/web-antd/src/router/routes/modules/system.ts

@@ -0,0 +1,16 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/system/notify-message',
+    component: () => import('#/views/system/notify/my/index.vue'),
+    name: 'MyNotifyMessage',
+    meta: {
+      title: '我的站内信',
+      icon: 'ant-design:message-filled',
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes;

apps/web-antd/src/router/routes/modules/vben.ts

@@ -0,0 +1,81 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+// import {
+//   VBEN_DOC_URL,
+//   VBEN_ELE_PREVIEW_URL,
+//   VBEN_GITHUB_URL,
+//   VBEN_LOGO_URL,
+//   VBEN_NAIVE_PREVIEW_URL,
+// } from '@vben/constants';
+//
+// import { IFrameView } from '#/layouts';
+// import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  // {
+  //   meta: {
+  //     badgeType: 'dot',
+  //     icon: VBEN_LOGO_URL,
+  //     order: 9998,
+  //     title: $t('demos.vben.title'),
+  //   },
+  //   name: 'VbenProject',
+  //   path: '/vben-admin',
+  //   children: [
+  //     {
+  //       name: 'VbenDocument',
+  //       path: '/vben-admin/document',
+  //       component: IFrameView,
+  //       meta: {
+  //         icon: 'lucide:book-open-text',
+  //         link: VBEN_DOC_URL,
+  //         title: $t('demos.vben.document'),
+  //       },
+  //     },
+  //     {
+  //       name: 'VbenGithub',
+  //       path: '/vben-admin/github',
+  //       component: IFrameView,
+  //       meta: {
+  //         icon: 'mdi:github',
+  //         link: VBEN_GITHUB_URL,
+  //         title: 'Github',
+  //       },
+  //     },
+  //     {
+  //       name: 'VbenNaive',
+  //       path: '/vben-admin/naive',
+  //       component: IFrameView,
+  //       meta: {
+  //         badgeType: 'dot',
+  //         icon: 'logos:naiveui',
+  //         link: VBEN_NAIVE_PREVIEW_URL,
+  //         title: $t('demos.vben.naive-ui'),
+  //       },
+  //     },
+  //     {
+  //       name: 'VbenElementPlus',
+  //       path: '/vben-admin/ele',
+  //       component: IFrameView,
+  //       meta: {
+  //         badgeType: 'dot',
+  //         icon: 'logos:element',
+  //         link: VBEN_ELE_PREVIEW_URL,
+  //         title: $t('demos.vben.element-plus'),
+  //       },
+  //     },
+  //   ],
+  // },
+  // {
+  //   name: 'VbenAbout',
+  //   path: '/vben-admin/about',
+  //   component: () => import('#/views/_core/about/index.vue'),
+  //   meta: {
+  //     icon: 'lucide:copyright',
+  //     title: $t('demos.vben.about'),
+  //     order: 9999,
+  //   },
+  // },
+];
+
+export default routes; // update by 芋艿：不展示

apps/web-antd/src/router/tongji.ts

@@ -0,0 +1,30 @@
+import type { Router } from 'vue-router';
+
+declare global {
+  interface Window {
+    _hmt: any[];
+  }
+}
+
+const HM_ID = import.meta.env.VITE_APP_BAIDU_CODE;
+
+/**
+ * 设置百度统计
+ * @param router
+ */
+function setupBaiduTongJi(router: Router) {
+  // 如果没有配置百度统计的 ID，则不进行设置
+  if (!HM_ID) {
+    return;
+  }
+
+  // _hmt：用于 router push
+  window._hmt = window._hmt || [];
+
+  router.afterEach((to) => {
+    // 添加到 _hmt 中
+    window._hmt.push(['_trackPageview', to.fullPath]);
+  });
+}
+
+export { setupBaiduTongJi };