优化 cl-codemirror, cl-menu-file 等等

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "front-next-vue3",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"private": true,
 	"scripts": {
 		"serve": "vue-cli-service serve",

src/cool/modules/base/components/codemirror/index.vue

@@ -1,11 +1,11 @@
 <template>
-	<div class="cl-codemirror">
+	<div class="cl-codemirror" ref="editorRef">
 		<textarea class="cl-code" id="editor" :height="height" :width="width"></textarea>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, watch } from "vue";
+import { defineComponent, nextTick, onMounted, ref, watch } from "vue";
 import CodeMirror from "codemirror";
 import beautifyJs from "js-beautify";
 
@@ -28,6 +28,8 @@ export default defineComponent({
 	emits: ["update:modelValue", "load"],
 
 	setup(props, { emit }) {
+		const editorRef = ref<any>(null);
+
 		let editor: any = null;
 
 		// 获取内容
@@ -55,52 +57,48 @@ export default defineComponent({
 		);
 
 		onMounted(function() {
-			// 实例化
-			editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
-				mode: "javascript",
-				theme: "ambiance",
-				styleActiveLine: true,
-				lineNumbers: true,
-				lineWrapping: true,
-				indentUnit: 4,
-				...props.options
+			nextTick(() => {
+				// 实例化
+				editor = CodeMirror.fromTextArea(editorRef.value.querySelector("#editor"), {
+					mode: "javascript",
+					theme: "ambiance",
+					styleActiveLine: true,
+					lineNumbers: true,
+					lineWrapping: true,
+					indentUnit: 4,
+					...props.options
+				});
+
+				// 输入监听
+				editor.on("change", (e: any) => {
+					emit("update:modelValue", e.getValue().replace(/\s/g, ""));
+				});
+
+				// 设置内容
+				setValue(props.modelValue);
+
+				// 加载回调
+				emit("load", editor);
+
+				// 设置编辑框大小
+				editor.setSize(props.width || "auto", props.height || "auto");
+
+				// shift + alt + f 格式化
+				editor.display.wrapper.onkeydown = (e: any) => {
+					const keyCode = e.keyCode || e.which || e.charCode;
+					const altKey = e.altKey || e.metaKey;
+					const shiftKey = e.shiftKey || e.metaKey;
+
+					if (altKey && shiftKey && keyCode == 70) {
+						setValue();
+					}
+				};
 			});
-
-			// 输入监听
-			editor.on("change", (e: any) => {
-				emit("update:modelValue", e.getValue().replace(/\s/g, ""));
-			});
-
-			// 加载回调
-			emit("load", editor);
-
-			// 设置编辑框样式
-			const el = editor.display.wrapper;
-
-			if (el) {
-				if (props.height) {
-					el.style.height = props.height || "50px";
-				}
-
-				if (props.width) {
-					el.style.width = props.width;
-				}
-			}
-
-			// 设置内容
-			setValue(props.modelValue);
-
-			// shift + alt + f 格式化
-			el.onkeydown = (e: any) => {
-				const keyCode = e.keyCode || e.which || e.charCode;
-				const altKey = e.altKey || e.metaKey;
-				const shiftKey = e.shiftKey || e.metaKey;
-
-				if (altKey && shiftKey && keyCode == 70) {
-					setValue();
-				}
-			};
 		});
+
+		return {
+			editorRef
+		};
 	}
 });
 </script>

src/cool/modules/base/components/dept/tree.vue

@@ -391,10 +391,6 @@ export default defineComponent({
 		}
 	}
 
-	:deep(.el-tree-node__content) {
-		height: 36px;
-	}
-
 	&__op {
 		display: flex;
 
@@ -419,6 +415,7 @@ export default defineComponent({
 		overflow-x: hidden;
 
 		:deep(.el-tree-node__content) {
+			height: 36px;
 			margin: 0 5px;
 		}
 	}

src/cool/modules/base/components/editor-quill/index.vue

@@ -56,11 +56,15 @@ export default defineComponent({
 		// 文件确认
 		function onUploadSpaceConfirm(files: any[]) {
 			if (files.length > 0) {
+				// 批量插入图片
 				files.forEach((file, i) => {
 					const [type] = file.type.split("/");
 
 					quill.insertEmbed(cursorIndex.value + i, type, file.url, Quill.sources.USER);
 				});
+
+				// 移动光标到图片后一位
+				quill.setSelection(cursorIndex.value + files.length);
 			}
 		}
 

src/cool/modules/base/components/menu/file.vue

@@ -15,9 +15,18 @@
 <script lang="ts">
 import { defineComponent, ref, watch } from "vue";
 
-const files = require
-	.context("@/", true, /views\/(?!(components)|(.*\/components)|(index\.js)).*.(js|vue)/)
-	.keys();
+// 扫描文件
+function findFiles() {
+	const files = require
+		.context("@/", true, /views\/(?!(components)|(.*\/components)|(index\.js)).*.(js|vue)/)
+		.keys();
+
+	return files.map(e => {
+		return {
+			value: e.substr(2)
+		};
+	});
+}
 
 export default defineComponent({
 	name: "cl-menu-file",
@@ -36,7 +45,7 @@ export default defineComponent({
 		const path = ref<string>(props.modelValue);
 
 		// 数据列表
-		const list = ref<any[]>([]);
+		const list = ref<any[]>(findFiles());
 
 		watch(
 			() => props.modelValue,
@@ -49,12 +58,6 @@ export default defineComponent({
 			emit("update:modelValue", val);
 		});
 
-		list.value = files.map(e => {
-			return {
-				value: e.substr(2)
-			};
-		});
-
 		return {
 			path,
 			list

src/cool/modules/base/components/menu/topbar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="app-topbar-menu">
+	<div class="cl-menu-topbar">
 		<el-menu
 			:default-active="index"
 			mode="horizontal"
@@ -84,7 +84,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.app-topbar-menu {
+.cl-menu-topbar {
 	margin-right: 10px;
 
 	:deep(.el-menu) {

src/cool/modules/chat/components/notice.vue

@@ -51,7 +51,7 @@ export default {
 		font-size: 20px;
 	}
 
-	:deep(.el-badge) {
+	.el-badge {
 		transform: scale(0.8);
 	}
 }

src/cool/modules/task/components/cron/cron.vue

@@ -776,12 +776,12 @@ export default {
 
 <style lang="scss" scoped>
 .vue-cron {
-	:deep(.el-tabs) {
+	.el-tabs {
 		box-shadow: none;
 	}
 
 	&__item {
-		:deep(.el-row) {
+		.el-row {
 			min-height: 32px;
 			line-height: 32px;
 			margin-bottom: 10px;

src/cool/modules/upload/components/index.vue

@@ -108,8 +108,7 @@
 
 <script>
 import { mapGetters } from "vuex";
-import path from "path";
-import { last, isArray, isNumber, isBoolean } from "@/core/utils";
+import { last, isArray, isNumber, isBoolean, basename } from "@/core/utils";
 import { v4 as uuidv4 } from "uuid";
 import { clone } from "@/core/utils";
 
@@ -344,7 +343,7 @@ export default {
 				this.fileList = list.filter(Boolean).map(url => {
 					return {
 						url,
-						name: path.basename(url),
+						name: basename(url),
 						uid: url
 					};
 				});
@@ -543,7 +542,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .cl-upload {
 	display: flex;
 	flex-wrap: wrap;
@@ -561,7 +560,7 @@ export default {
 
 	&--default {
 		&:not(.is-drag) {
-			:deep(.el-upload) {
+			.el-upload {
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -640,7 +639,7 @@ export default {
 	}
 
 	&--picture-card {
-		:deep(.el-upload) {
+		.el-upload {
 			background-color: #fff;
 
 			.cl-upload__icon {

src/core/utils/index.ts

@@ -289,4 +289,13 @@ export function revDeepTree(list: Array<any> = []) {
 	return d;
 }
 
+export function basename(path: string) {
+	let index = path.lastIndexOf("/");
+	index = index > -1 ? index : path.lastIndexOf("\\");
+	if (index < 0) {
+		return path;
+	}
+	return path.substring(index + 1);
+}
+
 export { storage };

src/pages/layout/slider.vue

@@ -11,20 +11,35 @@
 	</div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script lang="ts">
+import { computed, defineComponent } from "vue-demi";
+import { useStore } from "vuex";
 
-export default {
-	computed: {
-		...mapGetters(["menuCollapse", "browser", "app"])
-	},
+export default defineComponent({
+	setup() {
+		const store = useStore();
 
-	methods: {
-		toHome() {
+		// 菜单是否展开
+		const menuCollapse = computed<any>(() => store.getters.menuCollapse);
+
+		// 浏览器信息
+		const browser = computed<any>(() => store.getters.browser);
+
+		// 应用信息
+		const app = computed<any>(() => store.getters.app);
+
+		// 跳转官网
+		function toHome() {
 			location.href = "https://cool-js.com/";
 		}
+		return {
+			menuCollapse,
+			browser,
+			app,
+			toHome
+		};
 	}
-};
+});
 </script>
 
 <style lang="scss" scoped>

src/pages/layout/topbar.vue

@@ -48,34 +48,58 @@
 	</div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
 import { href } from "@/core/utils";
 
-export default {
-	computed: {
-		...mapGetters(["userInfo", "menuCollapse", "app", "modules"])
-	},
+export default defineComponent({
+	setup() {
+		const store = useStore();
+		const router = useRouter();
 
-	methods: {
-		onCommand(name) {
+		// 菜单是否展开
+		const menuCollapse = computed<any>(() => store.getters.menuCollapse);
+
+		// 模块列表
+		const modules = computed<any>(() => store.getters.modules);
+
+		// 应用信息
+		const app = computed<any>(() => store.getters.app);
+
+		// 用户信息
+		const userInfo = computed<any>(() => store.getters.userInfo);
+
+		// 跳转官网
+		function onCommand(name: string) {
 			switch (name) {
 				case "my":
-					this.$router.push("/my/info");
+					router.push("/my/info");
 					break;
 				case "exit":
-					this.$store.dispatch("userLogout").done(() => {
+					store.dispatch("userLogout").done(() => {
 						href("/login");
 					});
 					break;
 			}
-		},
-
-		collapse() {
-			this.$store.commit("COLLAPSE_MENU", !this.menuCollapse);
 		}
+
+		// 展开
+		function collapse() {
+			store.commit("COLLAPSE_MENU", !menuCollapse.value);
+		}
+
+		return {
+			userInfo,
+			menuCollapse,
+			modules,
+			app,
+			onCommand,
+			collapse
+		};
 	}
-};
+});
 </script>
 
 <style lang="scss">

src/shims-vue.d.ts

@@ -1,77 +1,77 @@
 /* eslint-disable */
 declare module '*.vue' {
-import type { DefineComponent } from 'vue'
-	const component: DefineComponent<{}, {}, any>
-	export default component
+import type { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
 }
 
 declare module 'array.prototype.flat' {
-	function Flat(list: any[]): any[]
-	export default Flat
+	function Flat(list: any[]): any[];
+	export default Flat;
 }
 
 declare module 'clone-deep' {
-	function CloneDeep(data: any): any
-	export default CloneDeep
+	function CloneDeep(data: any): any;
+	export default CloneDeep;
 }
 
 declare module '@/core' {
-	export function bootstrap(app: any): Promise<void>
+	export function bootstrap(app: any): Promise<void>;
 	export class BaseService {
 		namespace: string
 		request: Function
 	}
-	export function Service(val: any)
-	export function Permission(val: string)
-	export function useRefs()
+	export function Service(val: any): any;
+	export function Permission(val: string): any;
+	export function useRefs(): any;
 }
 
 declare module '@/crud' {
-	export const ContextMenu
+	export const ContextMenu: any;
 }
 
 declare module '@/store' {
-	import { Store } from 'vuex/types/index.d.ts'
-	export const $service
-	export default Store
+	import { Store } from 'vuex/types/index.d.ts';
+	export const $service;
+	export default Store;
 }
 
 declare module 'store' {
-	export function set(key: string, value: any)
-	export function get(key: string)
-	export function remove(key: string)
-	export function clearAll()
-	export function each(callback: Function)
+	export function set(key: string, value: any): void;
+	export function get(key: string): any;
+	export function remove(key: string): void;
+	export function clearAll(): void;
+	export function each(callback: Function): void;
 }
 
 declare module 'quill' {
-	const Quill: any = {}
-	export default Quill
+	const Quill: any;
+	export default Quill;
 }
 
 declare module 'codemirror' {
-	export function fromTextArea(el: any, options?: any) {}
+	export function fromTextArea(el: any, options?: any): any;
 }
 
 declare module 'js-beautify' {
-	export default function(text: string) {}
+	export default function(text: string): string;
 }
 
 declare module 'nprogress' {
-	export function configure(options: any) {}
-	export const start = () => {}
-	export const done = () => {}
+	export function configure(options: any): void;
+	export function start(): void;
+	export function done(): void;
 }
 
 declare module 'mockjs' {
-	const Mock: any = {}
-	export default Mock
+	const Mock: any;
+	export default Mock;
 }
 
 declare module '@/router' {
 	const Router: any = {
 		$plugin: {
-			addViews: (list: any[], options?:any) => {}
+			addViews(list: any[], options?:any) {}
 		}
 	}
 
@@ -79,16 +79,16 @@ declare module '@/router' {
 		token: string[]
 	}
 
-	export default Router
-	export const ignore: Ignore
+	export default Router;
+	export const ignore: Ignore;
 }
 
 declare module '@/assets/css/common.scss' {
-	export const colorPrimary: string
+	export const colorPrimary: string;
 }
 
 interface Promise {
-	then: Function,
-	catch: Function,
-	done: Function
+	then(cb: Function): Promise<any>;
+	catch(cb: Function): Promise<any>;
+	done(cb: Function): void;
 }