use async load

src/router/index.ts

@@ -1,8 +1,5 @@
 import { createRouter, createWebHistory, type RouteLocationNormalized } from "vue-router";
 import RootLayout from "@/layout/RootLayout.vue";
-import MainLayout from "@/layout/MainLayout.vue";
-import Login from "@/pages/user/LoginIndex.vue";
-import InviteRegister from "@/pages/user/InviteRegister.vue";
 import chartRoutes from "@/router/routes/chartRoutes";
 import customerRoutes from "@/router/routes/customerRoutes";
 import { managementAccountRoutes, managementSettingRoutes, storeRoutes } from "@/router/routes/managementRoutes";
@@ -19,7 +16,7 @@ import fulfillmentRoutes from "@/router/routes/fulfillmentRoutes";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useGlobalUIStore } from "@/store/globalUI";
 import { gaoRoleCodes } from "@/utils/permission";
-import { useUserStore } from "timi-web-api";
+import { useUserStore } from "timi-web-api/store";
 
 const detailRoutes = [
 	...customerRoutes,
@@ -62,7 +59,7 @@ const router = createRouter({
 				{
 					path: "login",
 					name: "Login",
-					component: Login,
+					component: () => import("@/pages/user/LoginIndex.vue"),
 					meta: {
 						depth: 1,
 						navBarVisible: false,
@@ -74,7 +71,7 @@ const router = createRouter({
 				{
 					path: "gao/invite/register",
 					name: "InviteRegister",
-					component: InviteRegister,
+					component: () => import("@/pages/user/InviteRegister.vue"),
 					meta: {
 						depth: 1,
 						navBarVisible: false,
@@ -85,7 +82,7 @@ const router = createRouter({
 				},
 				{
 					path: "",
-					component: MainLayout,
+					component: () => import("@/layout/MainLayout.vue"),
 					meta: {
 						depth: 1,
 						navBarVisible: false,

src/router/routes/customerRoutes.ts

@@ -1,18 +1,10 @@
 import type { RouteRecordRaw } from "vue-router";
-import QuickSignInPage from "@/pages/home/QuickSignInPage.vue";
-import EventRecordEdit from "@/pages/event/EventRecordEdit.vue";
-import CustomerList from "@/pages/customer/CustomerList.vue";
-import CustomerInviteRank from "@/pages/customer/CustomerInviteRank.vue";
-import CustomerInviteRelation from "@/pages/customer/CustomerInviteRelation.vue";
-import CustomerDetail from "@/pages/customer/CustomerDetail.vue";
-import CustomerInviteeList from "@/pages/customer/CustomerInviteeList.vue";
-import CustomerEdit from "@/pages/customer/CustomerEdit.vue";
 
 const customerRoutes: RouteRecordRaw[] = [
 	{
 		path: "/customer/quick-sign-in",
 		name: "QuickSignInPage",
-		component: QuickSignInPage,
+		component: () => import("@/pages/home/QuickSignInPage.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -26,7 +18,7 @@ const customerRoutes: RouteRecordRaw[] = [
 	{
 		path: "/customer/registration",
 		name: "CustomerEventRecordCreate",
-		component: EventRecordEdit,
+		component: () => import("@/pages/event/EventRecordEdit.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -40,7 +32,7 @@ const customerRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/customers",
 		name: "CustomerList",
-		component: CustomerList,
+		component: () => import("@/pages/customer/CustomerList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -54,7 +46,7 @@ const customerRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/customer-invite-rank",
 		name: "CustomerInviteRank",
-		component: CustomerInviteRank,
+		component: () => import("@/pages/customer/CustomerInviteRank.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -68,7 +60,7 @@ const customerRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/customer-invite-relation",
 		name: "CustomerInviteRelation",
-		component: CustomerInviteRelation,
+		component: () => import("@/pages/customer/CustomerInviteRelation.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -82,7 +74,7 @@ const customerRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/customers/create",
 		name: "CustomerCreate",
-		component: CustomerEdit,
+		component: () => import("@/pages/customer/CustomerEdit.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -96,7 +88,7 @@ const customerRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/customers/:id",
 		name: "CustomerDetail",
-		component: CustomerDetail,
+		component: () => import("@/pages/customer/CustomerDetail.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -110,7 +102,7 @@ const customerRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/customers/:id/invitees",
 		name: "CustomerInviteeList",
-		component: CustomerInviteeList,
+		component: () => import("@/pages/customer/CustomerInviteeList.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,
@@ -124,7 +116,7 @@ const customerRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/customers/:id/edit",
 		name: "CustomerEdit",
-		component: CustomerEdit,
+		component: () => import("@/pages/customer/CustomerEdit.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,

src/router/routes/fulfillmentRoutes.ts

@@ -1,14 +1,11 @@
 import type { RouteRecordRaw } from "vue-router";
-import OrderFulfillmentList from "@/pages/fulfillment/OrderFulfillmentList.vue";
-import OrderFulfillmentCreate from "@/pages/fulfillment/OrderFulfillmentCreate.vue";
-import OrderFulfillmentDetail from "@/pages/fulfillment/OrderFulfillmentDetail.vue";
 
 function meta(title: string, depth = 3): RouteRecordRaw["meta"] {
 	return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: "#F5F5F8", darkBodyBackground: "#10161f" };
 }
 
 export default [
-	{ path: "/management/order-fulfillments", name: "OrderFulfillmentList", component: OrderFulfillmentList, meta: meta("统一履约") },
-	{ path: "/management/order-fulfillments/create", name: "OrderFulfillmentCreate", component: OrderFulfillmentCreate, meta: meta("创建履约单", 4) },
-	{ path: "/management/order-fulfillments/:id", name: "OrderFulfillmentDetail", component: OrderFulfillmentDetail, meta: meta("履约单详情", 4) }
+	{ path: "/management/order-fulfillments", name: "OrderFulfillmentList", component: () => import("@/pages/fulfillment/OrderFulfillmentList.vue"), meta: meta("统一履约") },
+	{ path: "/management/order-fulfillments/create", name: "OrderFulfillmentCreate", component: () => import("@/pages/fulfillment/OrderFulfillmentCreate.vue"), meta: meta("创建履约单", 4) },
+	{ path: "/management/order-fulfillments/:id", name: "OrderFulfillmentDetail", component: () => import("@/pages/fulfillment/OrderFulfillmentDetail.vue"), meta: meta("履约单详情", 4) }
 ] as RouteRecordRaw[];

src/router/routes/managementRoutes.ts

@@ -1,28 +1,10 @@
 import type { RouteRecordRaw } from "vue-router";
-import About from "@/pages/setting/About.vue";
-import Agreement from "@/pages/setting/Agreement.vue";
-import AppSettings from "@/pages/setting/AppSettings.vue";
-import NotifyList from "@/pages/notify/NotifyList.vue";
-import NotifyCreate from "@/pages/notify/NotifyCreate.vue";
-import NotifyDetail from "@/pages/notify/NotifyDetail.vue";
-import NotifyRecipientList from "@/pages/notify/NotifyRecipientList.vue";
-import UserProfile from "@/pages/user/UserProfile.vue";
-import UserPassword from "@/pages/user/UserPassword.vue";
-import CustomerQrCode from "@/pages/customer/CustomerQrCode.vue";
-import StoreBusinessDayCalendar from "@/pages/store/StoreBusinessDayCalendar.vue";
-import StoreEdit from "@/pages/store/StoreEdit.vue";
-import StoreList from "@/pages/store/StoreList.vue";
-import StoreSort from "@/pages/store/StoreSort.vue";
-import StoreDiaryDetail from "@/pages/store/StoreDiaryDetail.vue";
-import StoreDiaryEdit from "@/pages/store/StoreDiaryEdit.vue";
-import StoreDiaryList from "@/pages/store/StoreDiaryList.vue";
-import TagList from "@/pages/tag/TagList.vue";
 
 export const storeRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/stores",
 		name: "StoreList",
-		component: StoreList,
+		component: () => import("@/pages/store/StoreList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -36,7 +18,7 @@ export const storeRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/stores/create",
 		name: "StoreCreate",
-		component: StoreEdit,
+		component: () => import("@/pages/store/StoreEdit.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -50,7 +32,7 @@ export const storeRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/stores/sort",
 		name: "StoreSort",
-		component: StoreSort,
+		component: () => import("@/pages/store/StoreSort.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -64,7 +46,7 @@ export const storeRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/stores/:id",
 		name: "StoreEdit",
-		component: StoreEdit,
+		component: () => import("@/pages/store/StoreEdit.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -78,7 +60,7 @@ export const storeRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/stores/:id/business-days",
 		name: "StoreBusinessDayCalendar",
-		component: StoreBusinessDayCalendar,
+		component: () => import("@/pages/store/StoreBusinessDayCalendar.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,
@@ -92,7 +74,7 @@ export const storeRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/store-diaries",
 		name: "StoreDiaryList",
-		component: StoreDiaryList,
+		component: () => import("@/pages/store/StoreDiaryList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -106,7 +88,7 @@ export const storeRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/store-diaries/create",
 		name: "StoreDiaryCreate",
-		component: StoreDiaryEdit,
+		component: () => import("@/pages/store/StoreDiaryEdit.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -120,7 +102,7 @@ export const storeRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/store-diaries/:id",
 		name: "StoreDiaryDetail",
-		component: StoreDiaryDetail,
+		component: () => import("@/pages/store/StoreDiaryDetail.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -134,7 +116,7 @@ export const storeRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/store-diaries/:id/edit",
 		name: "StoreDiaryEdit",
-		component: StoreDiaryEdit,
+		component: () => import("@/pages/store/StoreDiaryEdit.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,
@@ -151,7 +133,7 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/about",
 		name: "About",
-		component: About,
+		component: () => import("@/pages/setting/About.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -165,7 +147,7 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/about/service-agreement/:id",
 		name: "ServiceAgreement",
-		component: Agreement,
+		component: () => import("@/pages/setting/Agreement.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -179,7 +161,7 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/about/privacy-agreement/:id",
 		name: "PrivacyAgreement",
-		component: Agreement,
+		component: () => import("@/pages/setting/Agreement.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -193,7 +175,7 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/about/open-source-agreement/:id",
 		name: "OpenSourceAgreement",
-		component: Agreement,
+		component: () => import("@/pages/setting/Agreement.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -207,7 +189,7 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/settings",
 		name: "AppSettings",
-		component: AppSettings,
+		component: () => import("@/pages/setting/AppSettings.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -221,7 +203,7 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/notifications",
 		name: "NotifyList",
-		component: NotifyList,
+		component: () => import("@/pages/notify/NotifyList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -235,7 +217,7 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/notifications/create",
 		name: "NotifyCreate",
-		component: NotifyCreate,
+		component: () => import("@/pages/notify/NotifyCreate.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -249,7 +231,7 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/notifications/:id",
 		name: "NotifyDetail",
-		component: NotifyDetail,
+		component: () => import("@/pages/notify/NotifyDetail.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -263,7 +245,7 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/notifications/:id/recipients",
 		name: "NotifyRecipientList",
-		component: NotifyRecipientList,
+		component: () => import("@/pages/notify/NotifyRecipientList.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,
@@ -277,7 +259,7 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/tags",
 		name: "TagList",
-		component: TagList,
+		component: () => import("@/pages/tag/TagList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -294,7 +276,7 @@ export const managementAccountRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/profile",
 		name: "UserProfile",
-		component: UserProfile,
+		component: () => import("@/pages/user/UserProfile.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -308,7 +290,7 @@ export const managementAccountRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/profile/password",
 		name: "UserPassword",
-		component: UserPassword,
+		component: () => import("@/pages/user/UserPassword.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -322,7 +304,7 @@ export const managementAccountRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/qr-code",
 		name: "CustomerQrCode",
-		component: CustomerQrCode,
+		component: () => import("@/pages/customer/CustomerQrCode.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,

src/router/routes/notifyRoutes.ts

@@ -1,12 +1,10 @@
 import type { RouteRecordRaw } from "vue-router";
-import UserNotifyDetail from "@/pages/notify/UserNotifyDetail.vue";
-import UserNotifyList from "@/pages/notify/UserNotifyList.vue";
 
 const notifyRoutes: RouteRecordRaw[] = [
 	{
 		path: "/notify",
 		name: "UserNotifyList",
-		component: UserNotifyList,
+		component: () => import("@/pages/notify/UserNotifyList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -20,7 +18,7 @@ const notifyRoutes: RouteRecordRaw[] = [
 	{
 		path: "/notify/:id",
 		name: "UserNotifyDetail",
-		component: UserNotifyDetail,
+		component: () => import("@/pages/notify/UserNotifyDetail.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,

src/router/routes/packageRoutes.ts

@@ -1,18 +1,14 @@
 import type { RouteRecordRaw } from "vue-router";
-import PackageConfigList from "@/pages/package/PackageConfigList.vue";
-import PackageConfigEdit from "@/pages/package/PackageConfigEdit.vue";
-import PackageConfigDetail from "@/pages/package/PackageConfigDetail.vue";
-import PackagePurchase from "@/pages/package/PackagePurchase.vue";
 
 function pageMeta(title: string, depth = 3, background = "#F5F5F8"): RouteRecordRaw["meta"] {
 	return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: background, darkBodyBackground: "#10161f" };
 }
 
 export default [
-	{ path: "/management/package-configs", name: "PackageConfigList", component: PackageConfigList, meta: pageMeta("套餐配置") },
-	{ path: "/management/package-configs/create", name: "PackageConfigCreate", component: PackageConfigEdit, meta: pageMeta("新增套餐配置", 4) },
-	{ path: "/management/package-configs/:id", name: "PackageConfigDetail", component: PackageConfigDetail, meta: pageMeta("套餐配置详情", 4) },
-	{ path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: PackageConfigEdit, meta: pageMeta("编辑套餐配置", 5) },
-	{ path: "/management/package-configs/:id/purchase", name: "PackagePurchase", component: PackagePurchase, meta: pageMeta("购买套餐", 5) },
-	{ path: "/management/customer-packages/create", name: "CustomerPackageCreate", component: PackagePurchase, meta: pageMeta("创建客户套餐", 4) }
+	{ path: "/management/package-configs", name: "PackageConfigList", component: () => import("@/pages/package/PackageConfigList.vue"), meta: pageMeta("套餐配置") },
+	{ path: "/management/package-configs/create", name: "PackageConfigCreate", component: () => import("@/pages/package/PackageConfigEdit.vue"), meta: pageMeta("新增套餐配置", 4) },
+	{ path: "/management/package-configs/:id", name: "PackageConfigDetail", component: () => import("@/pages/package/PackageConfigDetail.vue"), meta: pageMeta("套餐配置详情", 4) },
+	{ path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: () => import("@/pages/package/PackageConfigEdit.vue"), meta: pageMeta("编辑套餐配置", 5) },
+	{ path: "/management/package-configs/:id/purchase", name: "PackagePurchase", component: () => import("@/pages/package/PackagePurchase.vue"), meta: pageMeta("购买套餐", 5) },
+	{ path: "/management/customer-packages/create", name: "CustomerPackageCreate", component: () => import("@/pages/package/PackagePurchase.vue"), meta: pageMeta("创建客户套餐", 4) }
 ] as RouteRecordRaw[];

src/router/routes/permissionRoutes.ts

@@ -1,17 +1,10 @@
 import type { RouteRecordRaw } from "vue-router";
-import PermissionSettings from "@/pages/permission/PermissionSettings.vue";
-import RoleList from "@/pages/permission/RoleList.vue";
-import RoleEdit from "@/pages/permission/RoleEdit.vue";
-import PermissionList from "@/pages/permission/PermissionList.vue";
-import RolePermissionAssign from "@/pages/permission/RolePermissionAssign.vue";
-import RoleDelegationPermissionAssign from "@/pages/permission/RoleDelegationPermissionAssign.vue";
-import UserRoleAssign from "@/pages/user/UserRoleAssign.vue";
 
 const permissionRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/permissions",
 		name: "PermissionSettings",
-		component: PermissionSettings,
+		component: () => import("@/pages/permission/PermissionSettings.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -25,7 +18,7 @@ const permissionRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/permissions/roles",
 		name: "RoleList",
-		component: RoleList,
+		component: () => import("@/pages/permission/RoleList.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -39,7 +32,7 @@ const permissionRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/permissions/roles/create",
 		name: "RoleCreate",
-		component: RoleEdit,
+		component: () => import("@/pages/permission/RoleEdit.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,
@@ -53,7 +46,7 @@ const permissionRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/permissions/roles/:id",
 		name: "RoleEdit",
-		component: RoleEdit,
+		component: () => import("@/pages/permission/RoleEdit.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,
@@ -67,7 +60,7 @@ const permissionRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/permissions/roles/:id/assign/p",
 		name: "RolePermissionAssignFromRole",
-		component: RolePermissionAssign,
+		component: () => import("@/pages/permission/RolePermissionAssign.vue"),
 		meta: {
 			depth: 6,
 			navBarVisible: true,
@@ -81,7 +74,7 @@ const permissionRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/permissions/roles/:id/assign/d",
 		name: "RoleDelegationPermissionAssignFromRole",
-		component: RoleDelegationPermissionAssign,
+		component: () => import("@/pages/permission/RoleDelegationPermissionAssign.vue"),
 		meta: {
 			depth: 6,
 			navBarVisible: true,
@@ -95,7 +88,7 @@ const permissionRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/permissions/items",
 		name: "PermissionList",
-		component: PermissionList,
+		component: () => import("@/pages/permission/PermissionList.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -113,7 +106,7 @@ const permissionRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/permissions/assign/p",
 		name: "RolePermissionAssign",
-		component: RolePermissionAssign,
+		component: () => import("@/pages/permission/RolePermissionAssign.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -127,7 +120,7 @@ const permissionRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/permissions/assign/d",
 		name: "RoleDelegationPermissionAssign",
-		component: RoleDelegationPermissionAssign,
+		component: () => import("@/pages/permission/RoleDelegationPermissionAssign.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -141,7 +134,7 @@ const permissionRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/permissions/user-roles",
 		name: "UserRoleAssign",
-		component: UserRoleAssign,
+		component: () => import("@/pages/user/UserRoleAssign.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,

src/router/routes/pointRoutes.ts

@@ -1,19 +1,10 @@
 import type { RouteRecordRaw } from "vue-router";
-import PointAccountDetail from "@/pages/point/PointAccountDetail.vue";
-import PointAccountList from "@/pages/point/PointAccountList.vue";
-import PointAdjust from "@/pages/point/PointAdjust.vue";
-import PointLedgerDetail from "@/pages/point/PointLedgerDetail.vue";
-import PointLedgerList from "@/pages/point/PointLedgerList.vue";
-import PointRuleDetail from "@/pages/point/PointRuleDetail.vue";
-import PointRuleEdit from "@/pages/point/PointRuleEdit.vue";
-import PointRuleList from "@/pages/point/PointRuleList.vue";
-import PointRuleSort from "@/pages/point/PointRuleSort.vue";
 
 const pointRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/points/account",
 		name: "PointAccountList",
-		component: PointAccountList,
+		component: () => import("@/pages/point/PointAccountList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -27,7 +18,7 @@ const pointRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/points/account/:id",
 		name: "PointAccountDetail",
-		component: PointAccountDetail,
+		component: () => import("@/pages/point/PointAccountDetail.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -41,7 +32,7 @@ const pointRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/points/rules/sort",
 		name: "PointRuleSort",
-		component: PointRuleSort,
+		component: () => import("@/pages/point/PointRuleSort.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -55,7 +46,7 @@ const pointRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/points/ledger",
 		name: "PointLedgerList",
-		component: PointLedgerList,
+		component: () => import("@/pages/point/PointLedgerList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -69,7 +60,7 @@ const pointRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/points/ledger/:id",
 		name: "PointLedgerDetail",
-		component: PointLedgerDetail,
+		component: () => import("@/pages/point/PointLedgerDetail.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -83,7 +74,7 @@ const pointRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/points/adjust",
 		name: "PointAdjust",
-		component: PointAdjust,
+		component: () => import("@/pages/point/PointAdjust.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -97,7 +88,7 @@ const pointRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/points/rules",
 		name: "PointRuleList",
-		component: PointRuleList,
+		component: () => import("@/pages/point/PointRuleList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -111,7 +102,7 @@ const pointRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/points/rules/create",
 		name: "PointRuleCreate",
-		component: PointRuleEdit,
+		component: () => import("@/pages/point/PointRuleEdit.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -125,7 +116,7 @@ const pointRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/points/rules/:id",
 		name: "PointRuleDetail",
-		component: PointRuleDetail,
+		component: () => import("@/pages/point/PointRuleDetail.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -139,7 +130,7 @@ const pointRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/points/rules/:id/edit",
 		name: "PointRuleEdit",
-		component: PointRuleEdit,
+		component: () => import("@/pages/point/PointRuleEdit.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,

src/router/routes/productRoutes.ts

@@ -1,14 +1,4 @@
 import type { RouteRecordRaw } from "vue-router";
-import ProductCategoryList from "@/pages/product/ProductCategoryList.vue";
-import ProductCategoryRank from "@/pages/product/ProductCategoryRank.vue";
-import ProductDetail from "@/pages/product/ProductDetail.vue";
-import ProductEdit from "@/pages/product/ProductEdit.vue";
-import ProductList from "@/pages/product/ProductList.vue";
-import ProductStockDetail from "@/pages/product/ProductStockDetail.vue";
-import ProductStockList from "@/pages/product/ProductStockList.vue";
-import ProductStockSkuList from "@/pages/product/ProductStockSkuList.vue";
-import ProductStockRecordDetail from "@/pages/product/ProductStockRecordDetail.vue";
-import ProductStockRecordList from "@/pages/product/ProductStockRecordList.vue";
 
 function pageMeta(title: string, depth = 3, background = "#F5F5F8"): RouteRecordRaw["meta"] {
 	return {
@@ -26,67 +16,67 @@ const productRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/product-categories",
 		name: "ProductCategoryList",
-		component: ProductCategoryList,
+		component: () => import("@/pages/product/ProductCategoryList.vue"),
 		meta: pageMeta("产品分类")
 	},
 	{
 		path: "/management/product-categories/rank",
 		name: "ProductCategoryRank",
-		component: ProductCategoryRank,
+		component: () => import("@/pages/product/ProductCategoryRank.vue"),
 		meta: pageMeta("产品分类排序", 4)
 	},
 	{
 		path: "/management/products",
 		name: "ProductList",
-		component: ProductList,
+		component: () => import("@/pages/product/ProductList.vue"),
 		meta: pageMeta("产品库")
 	},
 	{
 		path: "/management/products/create",
 		name: "ProductCreate",
-		component: ProductEdit,
+		component: () => import("@/pages/product/ProductEdit.vue"),
 		meta: pageMeta("新增产品", 4)
 	},
 	{
 		path: "/management/products/:id",
 		name: "ProductDetail",
-		component: ProductDetail,
+		component: () => import("@/pages/product/ProductDetail.vue"),
 		meta: pageMeta("产品详情", 4)
 	},
 	{
 		path: "/management/products/:id/edit",
 		name: "ProductEdit",
-		component: ProductEdit,
+		component: () => import("@/pages/product/ProductEdit.vue"),
 		meta: pageMeta("编辑产品", 5)
 	},
 	{
 		path: "/management/product-stocks",
 		name: "ProductStockList",
-		component: ProductStockList,
+		component: () => import("@/pages/product/ProductStockList.vue"),
 		meta: pageMeta("选择产品")
 	},
 	{
 		path: "/management/product-stocks/:productId/skus",
 		name: "ProductStockSkuList",
-		component: ProductStockSkuList,
+		component: () => import("@/pages/product/ProductStockSkuList.vue"),
 		meta: pageMeta("选择 SKU", 4)
 	},
 	{
 		path: "/management/product-stock-records",
 		name: "ProductStockRecordList",
-		component: ProductStockRecordList,
+		component: () => import("@/pages/product/ProductStockRecordList.vue"),
 		meta: pageMeta("库存流水")
 	},
 	{
 		path: "/management/product-stock-records/:id",
 		name: "ProductStockRecordDetail",
-		component: ProductStockRecordDetail,
+		component: () => import("@/pages/product/ProductStockRecordDetail.vue"),
 		meta: pageMeta("库存流水详情", 4)
 	},
 	{
 		path: "/management/product-stocks/:skuId",
 		name: "ProductStockDetail",
-		component: ProductStockDetail,
+		component: () => import("@/pages/product/ProductStockDetail.vue"),
 		meta: pageMeta("库存详情", 5)
 	}
 ];

src/router/routes/registrationRoutes.ts

@@ -1,18 +1,10 @@
 import type { RouteRecordRaw } from "vue-router";
-import EventDetail from "@/pages/event/EventDetail.vue";
-import EventEdit from "@/pages/event/EventEdit.vue";
-import eventList from "@/pages/event/EventList.vue";
-import EventSort from "@/pages/event/EventSort.vue";
-import EventRecordDetail from "@/pages/event/EventRecordDetail.vue";
-import EventRecordEdit from "@/pages/event/EventRecordEdit.vue";
-import EventRecordList from "@/pages/event/EventRecordList.vue";
-import EventRecordRank from "@/pages/event/EventRecordRank.vue";
 
 const registrationRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/registration-events",
 		name: "eventList",
-		component: eventList,
+		component: () => import("@/pages/event/EventList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -26,7 +18,7 @@ const registrationRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/registration-events/sort",
 		name: "EventSort",
-		component: EventSort,
+		component: () => import("@/pages/event/EventSort.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -40,7 +32,7 @@ const registrationRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/registration-events/create",
 		name: "EventCreate",
-		component: EventEdit,
+		component: () => import("@/pages/event/EventEdit.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -54,7 +46,7 @@ const registrationRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/registration-events/:id",
 		name: "EventDetail",
-		component: EventDetail,
+		component: () => import("@/pages/event/EventDetail.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -68,7 +60,7 @@ const registrationRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/registration-events/:id/edit",
 		name: "EventEdit",
-		component: EventEdit,
+		component: () => import("@/pages/event/EventEdit.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,
@@ -82,7 +74,7 @@ const registrationRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/registration-event-records",
 		name: "EventRecordList",
-		component: EventRecordList,
+		component: () => import("@/pages/event/EventRecordList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -96,7 +88,7 @@ const registrationRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/registration-event-record-rank",
 		name: "EventRecordRank",
-		component: EventRecordRank,
+		component: () => import("@/pages/event/EventRecordRank.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -110,7 +102,7 @@ const registrationRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/registration-event-records/create",
 		name: "EventRecordCreate",
-		component: EventRecordEdit,
+		component: () => import("@/pages/event/EventRecordEdit.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -124,7 +116,7 @@ const registrationRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/registration-event-records/:id",
 		name: "EventRecordDetail",
-		component: EventRecordDetail,
+		component: () => import("@/pages/event/EventRecordDetail.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -138,7 +130,7 @@ const registrationRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/registration-event-records/:id/edit",
 		name: "EventRecordEdit",
-		component: EventRecordEdit,
+		component: () => import("@/pages/event/EventRecordEdit.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,

src/router/routes/salesOrderRoutes.ts

@@ -1,70 +1,59 @@
 import type { RouteRecordRaw } from "vue-router";
-import SalesOrderList from "@/pages/salesOrder/SalesOrderList.vue";
-import SalesOrderCreate from "@/pages/salesOrder/SalesOrderCreate.vue";
-import SalesOrderDetail from "@/pages/salesOrder/SalesOrderDetail.vue";
-import SalesOrderPayment from "@/pages/salesOrder/SalesOrderPayment.vue";
-import SalesOrderRefund from "@/pages/salesOrder/SalesOrderRefund.vue";
-import SalesOrderNoRefund from "@/pages/salesOrder/SalesOrderNoRefund.vue";
-import SalesOrderCancel from "@/pages/salesOrder/SalesOrderCancel.vue";
-import FundRecordList from "@/pages/salesOrder/FundRecordList.vue";
-import FundRecordDetail from "@/pages/salesOrder/FundRecordDetail.vue";
-import FundRecordRevoke from "@/pages/salesOrder/FundRecordRevoke.vue";
-import ConsumptionRecordList from "@/pages/salesOrder/ConsumptionRecordList.vue";
 
 function meta(title: string, depth = 3, background = "#F5F5F8"): RouteRecordRaw["meta"] {
 	return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: background, darkBodyBackground: "#10161f" };
 }
 
 export default [
-	{ path: "/management/sales-orders", name: "SalesOrderList", component: SalesOrderList, meta: meta("销售订单") },
-	{ path: "/management/consumption-records", name: "ConsumptionRecordList", component: ConsumptionRecordList, meta: meta("消费记录") },
+	{ path: "/management/sales-orders", name: "SalesOrderList", component: () => import("@/pages/salesOrder/SalesOrderList.vue"), meta: meta("销售订单") },
+	{ path: "/management/consumption-records", name: "ConsumptionRecordList", component: () => import("@/pages/salesOrder/ConsumptionRecordList.vue"), meta: meta("消费记录") },
 	{
 		path: "/management/sales-orders/create",
 		name: "SalesOrderCreate",
-		component: SalesOrderCreate,
+		component: () => import("@/pages/salesOrder/SalesOrderCreate.vue"),
 		meta: meta("直接产品下单", 4)
 	},
 	{
 		path: "/management/sales-orders/:id",
 		name: "SalesOrderDetail",
-		component: SalesOrderDetail,
+		component: () => import("@/pages/salesOrder/SalesOrderDetail.vue"),
 		meta: meta("销售订单详情", 4)
 	},
 	{
 		path: "/management/sales-orders/:id/payment",
 		name: "SalesOrderPayment",
-		component: SalesOrderPayment,
+		component: () => import("@/pages/salesOrder/SalesOrderPayment.vue"),
 		meta: meta("登记收款", 5)
 	},
 	{
 		path: "/management/sales-orders/:id/refund",
 		name: "SalesOrderRefund",
-		component: SalesOrderRefund,
+		component: () => import("@/pages/salesOrder/SalesOrderRefund.vue"),
 		meta: meta("登记退款", 5)
 	},
 	{
 		path: "/management/sales-orders/:id/no-refund",
 		name: "SalesOrderNoRefund",
-		component: SalesOrderNoRefund,
+		component: () => import("@/pages/salesOrder/SalesOrderNoRefund.vue"),
 		meta: meta("确认无需退款", 5)
 	},
 	{
 		path: "/management/sales-orders/:id/cancel",
 		name: "SalesOrderCancel",
-		component: SalesOrderCancel,
+		component: () => import("@/pages/salesOrder/SalesOrderCancel.vue"),
 		meta: meta("取消销售订单", 5)
 	},
-	{ path: "/management/fund-records", name: "FundRecordList", component: FundRecordList, meta: meta("资金流水") },
+	{ path: "/management/fund-records", name: "FundRecordList", component: () => import("@/pages/salesOrder/FundRecordList.vue"), meta: meta("资金流水") },
 	{
 		path: "/management/fund-records/:id",
 		name: "FundRecordDetail",
-		component: FundRecordDetail,
+		component: () => import("@/pages/salesOrder/FundRecordDetail.vue"),
 		meta: meta("资金记录详情", 4)
 	},
 	{
 		path: "/management/fund-records/:id/revoke",
 		name: "FundRecordRevoke",
-		component: FundRecordRevoke,
+		component: () => import("@/pages/salesOrder/FundRecordRevoke.vue"),
 		meta: meta("资金冲正", 5)
 	}
 ] as RouteRecordRaw[];

src/router/routes/tabRoutes.ts

@@ -1,14 +1,10 @@
 import type { RouteRecordRaw } from "vue-router";
-import HomeTab from "@/pages/tabs/HomeTab.vue";
-import ProductTab from "@/pages/tabs/ProductTab.vue";
-import SettingTab from "@/pages/tabs/SettingTab.vue";
-import StoreTab from "@/pages/tabs/StoreTab.vue";
 
 const tabRoutes: RouteRecordRaw[] = [
 	{
 		path: "/customers",
 		name: "HomeTab",
-		component: HomeTab,
+		component: () => import("@/pages/tabs/HomeTab.vue"),
 		meta: {
 			depth: 2,
 			navBarVisible: true,
@@ -22,7 +18,7 @@ const tabRoutes: RouteRecordRaw[] = [
 	{
 		path: "/store",
 		name: "StoreTab",
-		component: StoreTab,
+		component: () => import("@/pages/tabs/StoreTab.vue"),
 		meta: {
 			depth: 2,
 			navBarVisible: true,
@@ -36,7 +32,7 @@ const tabRoutes: RouteRecordRaw[] = [
 	{
 		path: "/product",
 		name: "ProductTab",
-		component: ProductTab,
+		component: () => import("@/pages/tabs/ProductTab.vue"),
 		meta: {
 			depth: 2,
 			navBarVisible: true,
@@ -50,7 +46,7 @@ const tabRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management",
 		name: "SettingTab",
-		component: SettingTab,
+		component: () => import("@/pages/tabs/SettingTab.vue"),
 		meta: {
 			depth: 2,
 			navBarVisible: true,

src/router/routes/userRoutes.ts

@@ -1,15 +1,10 @@
 import type { RouteRecordRaw } from "vue-router";
-import UserList from "@/pages/user/UserList.vue";
-import UserDetail from "@/pages/user/UserDetail.vue";
-import UserEdit from "@/pages/user/UserEdit.vue";
-import UserRoleAssign from "@/pages/user/UserRoleAssign.vue";
-import UserInvitePoster from "@/pages/user/UserInvitePoster.vue";
 
 const userRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/users/invite/poster",
 		name: "UserInvitePoster",
-		component: UserInvitePoster,
+		component: () => import("@/pages/user/UserInvitePoster.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,
@@ -23,7 +18,7 @@ const userRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/users",
 		name: "UserList",
-		component: UserList,
+		component: () => import("@/pages/user/UserList.vue"),
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -37,7 +32,7 @@ const userRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/users/create",
 		name: "UserCreatePage",
-		component: UserEdit,
+		component: () => import("@/pages/user/UserEdit.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -51,7 +46,7 @@ const userRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/users/:id",
 		name: "UserDetail",
-		component: UserDetail,
+		component: () => import("@/pages/user/UserDetail.vue"),
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -65,7 +60,7 @@ const userRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/users/:id/edit",
 		name: "UserEdit",
-		component: UserEdit,
+		component: () => import("@/pages/user/UserEdit.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,
@@ -79,7 +74,7 @@ const userRoutes: RouteRecordRaw[] = [
 	{
 		path: "/management/users/:id/roles",
 		name: "UserRoleAssignFromUser",
-		component: UserRoleAssign,
+		component: () => import("@/pages/user/UserRoleAssign.vue"),
 		meta: {
 			depth: 5,
 			navBarVisible: true,