兼容 index.ts 模块导入

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "0.4.1",
+	"version": "0.5.0",
 	"scripts": {
 		"dev": "vite",
 		"build": "vue-tsc --noEmit --skipLibCheck && vite build",

src/cool/modules/test/components/about.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="module-view">
+		<a href="https://cool-js.com/" target="blank">
+			<img src="https://admin.cool-js.com/logo.png" width="200" alt="cool-admin Logo" />
+		</a>
+
+		<p class="title">COOL-ADMIN 一个很酷的后台权限管理框架</p>
+		<p class="desc">开源免费可商用、快速开发、模块化、插件化</p>
+
+		<p class="tag">
+			<img
+				src="https://img.shields.io/badge/license-MIT-green?style=flat-square"
+				alt="GitHub license"
+			/>
+			<img
+				src="https://img.shields.io/github/package-json/v/cool-team-official/cool-admin-vue?style=flat-square"
+				alt="GitHub tag"
+			/>
+			<img
+				src="https://img.shields.io/github/last-commit/cool-team-official/cool-admin-vue?style=flat-square"
+				alt="GitHub tag"
+			/>
+		</p>
+
+		<div class="link">
+			<a href="https://cool-js.com/" target="blank">
+				<el-button type="primary" round>快速开始</el-button>
+			</a>
+
+			<a href="https://github.com/cool-team-official/cool-admin-vue" target="blank">
+				<el-button round>GitHub</el-button>
+			</a>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "cl-about"
+});
+</script>
+
+<style lang="scss" scoped>
+.module-view {
+	text-align: center;
+	background-color: #fff;
+	padding: 100px 20px;
+	overflow: auto;
+	box-sizing: border-box;
+
+	.title {
+		font-size: 36px;
+		font-weight: bold;
+		margin: 30px 0 10px 0;
+	}
+
+	.desc {
+		color: #6a8bad;
+		font-size: 22px;
+		margin-bottom: 20px;
+	}
+
+	.tag {
+		img {
+			margin: 0 3px;
+		}
+	}
+
+	.link {
+		margin-top: 30px;
+
+		a {
+			margin: 0 10px;
+		}
+	}
+}
+</style>

src/cool/modules/test/components/index.ts

@@ -0,0 +1,7 @@
+import About from "./about.vue";
+
+export default {
+	About
+};
+
+// 导出的组件会以 name 参数命名全局注册，当前为: cl-about

src/cool/modules/test/directives/index.ts

@@ -0,0 +1,13 @@
+// 参考官方例子 https://v3.vuejs.org/guide/custom-directive.html
+
+export default {
+	// 聚焦元素
+	focus: {
+		mounted(el) {
+			el.focus();
+		}
+	}
+};
+
+// 在模块中使用
+// <input v-focus />

src/cool/modules/test/index.ts

@@ -0,0 +1,19 @@
+import components from "./components";
+import directives from "./directives";
+import pages from "./pages";
+import service from "./service";
+import store from "./store";
+import views from "./views";
+
+export default {
+	install() {
+		return {
+			components,
+			directives,
+			pages,
+			service,
+			store,
+			views
+		};
+	}
+};

src/cool/modules/test/pages/about.vue

@@ -0,0 +1,3 @@
+<template>
+	<cl-about />
+</template>

src/cool/modules/test/pages/index.ts

@@ -0,0 +1,8 @@
+// 导出的列表会自动注册到路由中
+
+export default [
+	{
+		path: "/test-pages/about", // 路由地址
+		component: () => import("./about.vue") // 组件实例
+	}
+];

src/cool/modules/test/service/index.ts

@@ -0,0 +1,5 @@
+import Test from "./test";
+
+export default {
+	test: new Test()
+};

src/cool/modules/test/service/test.ts

@@ -0,0 +1,19 @@
+import { BaseService, Service, Permission } from "/@/core";
+
+@Service("test")
+class Test extends BaseService {
+	// 继承后可使用：page、list、add、delete、update、info 6个基本接口
+
+	// 添加其他接口
+	@Permission("batchAdd") // 是否需要权限控制，建议参数与请求地址保持一致
+	batchAdd(params: any): Promise<any> {
+		return this.request({
+			url: "/batchAdd",
+			method: "GET",
+			params
+			// 参数与 axios 一致
+		});
+	}
+}
+
+export default Test;

src/cool/modules/test/store/calc.ts

@@ -0,0 +1,13 @@
+// 参考官方例子 https://vuex.vuejs.org/zh/
+
+export default {
+	state: {
+		count: 0
+	},
+	mutations: {
+		increment(state: any) {
+			state.count++;
+		}
+	},
+	actions: {}
+};

src/cool/modules/test/store/index.ts

@@ -0,0 +1,7 @@
+import calc from "./calc";
+
+export default {
+	calc
+};
+
+// 导出后会以 模块名-calc 命名注册

src/cool/modules/test/views/about.vue

@@ -0,0 +1,3 @@
+<template>
+	<cl-about />
+</template>

src/cool/modules/test/views/index.ts

@@ -0,0 +1,12 @@
+// 导出的列表会自动注册到 "/" 子路由中
+
+export default [
+	{
+		path: "/test-views/about", // 路由地址
+		component: () => import("./about.vue"), // 组件实例
+		meta: {
+			keepAlive: true, // 是否缓存路由
+			label: "关于 cool-admin" // 路由名称
+		}
+	}
+];

src/core/module/index.ts

@@ -1,11 +1,11 @@
 import cool from "/@/cool";
 import store from "/@/store";
 import router from "/@/router";
-import { deepMerge, isFunction, isObject } from "../utils";
+import { deepMerge, isFunction, isObject, isEmpty } from "../utils";
 import { deepFiles } from "../service";
 
 // 模块列表
-const modules: any[] = [];
+const modules: any[] = [...cool.modules];
 
 function useModule(app: any) {
 	// 安装模块
@@ -28,13 +28,13 @@ function useModule(app: any) {
 
 			// 注册组件
 			if (components) {
-				components.forEach((e: any) => {
+				for (const i in components) {
-					if (e.name) {
+					if (components[i]) {
-						if (e.cool?.global || e.name.indexOf("cl-") === 0) {
+						if (components[i].cool?.global || i.indexOf("cl-") === 0) {
-							app.component(e.name, e);
+							app.component(components[i].name, components[i]);
 						}
 					}
-				});
+				}
 			}
 
 			// 注册指令
@@ -70,6 +70,7 @@ function useModule(app: any) {
 		}
 	}
 
+	// 扫描文件
 	const files = import.meta.globEager("/src/cool/modules/**/*");
 
 	for (const i in files) {
@@ -78,6 +79,36 @@ function useModule(app: any) {
 		const fname: string = (cname || "").split(".")[0];
 
 		function next(d: any) {
+			// 配置参数入口
+			if (fn == "config.ts") {
+				d.options = value || {};
+			}
+
+			// 模块入口
+			if (fn == "index.ts") {
+				if (value) {
+					// 阻止往下加载
+					d.isLoaded = true;
+
+					// 之前
+					d._beforeFn = (e: any) => {
+						if (e.components) {
+							for (const i in e.components) {
+								// 全局注册
+								e.components[i].cool = {
+									global: true
+								};
+							}
+						}
+					};
+
+					d.value = value;
+
+					return d;
+				}
+			}
+
+			// 其他功能
 			switch (fn) {
 				case "service":
 					d._services.push({
@@ -97,7 +128,7 @@ function useModule(app: any) {
 					break;
 
 				case "components":
-					d.components.push(value);
+					d.components[value.name] = value;
 					break;
 
 				case "store":
@@ -107,12 +138,6 @@ function useModule(app: any) {
 				case "directives":
 					d.directives[fname] = value;
 					break;
-
-				case "config.ts":
-					if (value) {
-						d.options = value;
-					}
-					break;
 			}
 
 			return d;
@@ -121,14 +146,16 @@ function useModule(app: any) {
 		const item: any = modules.find((e) => e.name === name);
 
 		if (item) {
-			next(item);
+			if (!item.isLoaded) {
+				next(item);
+			}
 		} else {
 			modules.push(
 				next({
 					name,
 					options: {},
 					directives: {},
-					components: [],
+					components: {},
 					pages: [],
 					views: [],
 					store: {},
@@ -138,25 +165,25 @@ function useModule(app: any) {
 		}
 	}
 
-	// 本地模块
+	// 模块安装
-	modules.forEach((e) => {
+	modules.forEach((e: any) => {
-		e.service = deepFiles(e._services);
+		if (!isEmpty(e._services)) {
-		install(e);
+			e.service = deepFiles(e._services);
-	});
+		}
-
-	// npm模块
-	cool.modules.forEach((e: any) => {
-		const d: any = e;
 
 		if (isObject(e.value)) {
 			if (isFunction(e.value.install)) {
-				Object.assign(d, e.value.install(app, e.options));
+				Object.assign(e, e.value.install(app, e.options));
 			} else {
-				Object.assign(d, e.value);
+				Object.assign(e, e.value);
 			}
 		}
 
-		install(d);
+		if (e._beforeFn) {
+			e._beforeFn(e);
+		}
+
+		install(e);
 	});
 
 	// 缓存模块