添加主题模块

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "5.0.3",
+	"version": "5.1.0",
 	"scripts": {
 		"dev": "vite --host",
 		"build": "vite build",

src/modules/base/components/icon-svg/index.vue

@@ -1,57 +0,0 @@
-<template>
-	<svg :class="svgClass" :style="style" aria-hidden="true">
-		<use :xlink:href="iconName" />
-	</svg>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from "vue";
-import { isNumber } from "/@/cool/utils";
-
-export default defineComponent({
-	name: "icon-svg",
-
-	cool: {
-		global: true
-	},
-
-	props: {
-		name: {
-			type: String
-		},
-		className: {
-			type: String
-		},
-		size: {
-			type: [String, Number]
-		}
-	},
-
-	setup(props) {
-		const style = ref<any>({
-			fontSize: isNumber(props.size) ? props.size + "px" : props.size
-		});
-
-		const iconName = computed<string>(() => `#icon-${props.name}`);
-		const svgClass = computed<Array<string>>(() => {
-			return ["icon-svg", `icon-svg__${props.name}`, String(props.className || "")];
-		});
-
-		return {
-			style,
-			iconName,
-			svgClass
-		};
-	}
-});
-</script>
-
-<style scoped>
-.icon-svg {
-	width: 1em;
-	height: 1em;
-	vertical-align: -0.15em;
-	fill: currentColor;
-	overflow: hidden;
-}
-</style>

src/modules/base/pages/layout/components/process.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="app-process">
-		<div class="app-process__left hidden-xs-only" @click="toScroll(true)">
+		<div class="app-process__back" @click="router.back">
-			<el-icon><arrow-left /></el-icon>
+			<el-icon :size="15"><arrow-left /></el-icon>
 		</div>
 
 		<div :ref="setRefs('scroller')" class="app-process__scroller">
@@ -16,19 +16,11 @@
 				@contextmenu.stop.prevent="openCM($event, item)"
 			>
 				<span>{{ item.label }}</span>
-				<el-icon
+				<el-icon v-if="index > 0" @mousedown.stop="onDel(Number(index))">
-					v-if="index > 0"
-					class="el-icon-close"
-					@mousedown.stop="onDel(Number(index))"
-				>
 					<close />
 				</el-icon>
 			</div>
 		</div>
-
-		<div class="app-process__right hidden-xs-only" @click="toScroll(false)">
-			<el-icon><arrow-right /></el-icon>
-		</div>
 	</div>
 </template>
 
@@ -36,11 +28,11 @@
 import { watch } from "vue";
 import { last } from "/@/cool/utils";
 import { useCool } from "/@/cool";
-import { ArrowLeft, ArrowRight, Close } from "@element-plus/icons-vue";
+import { ArrowLeft, Close } from "@element-plus/icons-vue";
 import { ContextMenu } from "@cool-vue/crud";
 import { useBaseStore } from "/$/base";
 
-const { refs, setRefs, store, route, router }: any = useCool();
+const { refs, setRefs, route, router } = useCool();
 const { process } = useBaseStore();
 
 // 跳转
@@ -61,11 +53,6 @@ function scrollTo(left: number) {
 	});
 }
 
-// 左右移动
-function toScroll(f: boolean) {
-	scrollTo(refs.value.scroller.scrollLeft + (f ? -100 : 100));
-}
-
 // 调整滚动位置
 function adScroll(index: number) {
 	const el = refs.value[`item-${index}`];
@@ -103,8 +90,7 @@ function openCM(e: any, item: any) {
 			{
 				label: "关闭其他",
 				callback(done) {
-					store.commit(
+					process.set(
-						"SET_PROCESS",
 						process.list.filter((e: any) => e.value == item.value || e.value == "/")
 					);
 					done();
@@ -114,10 +100,7 @@ function openCM(e: any, item: any) {
 			{
 				label: "关闭所有",
 				callback(done) {
-					store.commit(
+					process.set(process.list.filter((e: any) => e.value == "/"));
-						"SET_PROCESS",
-						process.list.filter((e: any) => e.value == "/")
-					);
 					done();
 					toPath();
 				}
@@ -143,30 +126,22 @@ watch(
 	margin-bottom: 10px;
 	padding: 0 10px;
 
-	&__left,
+	&__back {
-	&__right {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		background-color: #fff;
 		height: 30px;
-		padding: 0 2px;
+		padding: 0 10px;
 		border-radius: 3px;
 		cursor: pointer;
+		margin-right: 10px;
 
 		&:hover {
 			background-color: #eee;
 		}
 	}
 
-	&__left {
-		margin-right: 10px;
-	}
-
-	&__right {
-		margin-left: 10px;
-	}
-
 	&__scroller {
 		width: 100%;
 		flex: 1;
@@ -222,6 +197,8 @@ watch(
 		&.active {
 			span {
 				color: var(--color-primary);
+				font-weight: bold;
+				user-select: none;
 			}
 
 			i {

src/modules/base/pages/layout/components/slider.vue

@@ -155,7 +155,7 @@ export default defineComponent({
 .app-slider {
 	height: 100%;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-	background-color: var(--menu-bg-color);
+	background-color: #2f3447;
 
 	&__logo {
 		display: flex;
@@ -215,7 +215,6 @@ export default defineComponent({
 
 					.icon-svg,
 					span {
-						// color: var(--menu-font-color);
 						color: #fff;
 					}
 				}
@@ -224,7 +223,7 @@ export default defineComponent({
 			.el-sub-menu__title,
 			&-item,
 			&__title {
-				color: var(--menu-font-color);
+				color: #eee;
 				letter-spacing: 0.5px;
 				height: 50px;
 				line-height: 50px;

src/modules/base/pages/layout/components/topbar.vue

@@ -17,7 +17,9 @@
 
 		<!-- 工具栏 -->
 		<ul class="app-topbar__tools">
-			<cl-theme />
+			<li>
+				<cl-theme />
+			</li>
 		</ul>
 
 		<!-- 用户信息 -->
@@ -107,16 +109,12 @@ function onCommand(name: string) {
 			align-items: center;
 			list-style: none;
 			height: 45px;
-			padding: 0 10px;
+			width: 45px;
-			margin-right: 10px;
+			border-radius: 3px;
 			cursor: pointer;
 
-			i {
+			&:hover {
-				font-size: 18px;
+				background-color: rgba(0, 0, 0, 0.1);
-
-				&:hover {
-					opacity: 0.8;
-				}
 			}
 		}
 	}

src/modules/base/pages/layout/components/views.vue

@@ -2,7 +2,9 @@
 	<div class="app-views" v-if="!app.loading">
 		<router-view v-slot="{ Component }">
 			<keep-alive :include="caches">
-				<component :is="Component" />
+				<transition name="el-fade-in-linear">
+					<component :is="Component" />
+				</transition>
 			</keep-alive>
 		</router-view>
 	</div>

src/modules/base/pages/layout/index.vue

@@ -27,7 +27,7 @@ const { app } = useBaseStore();
 <style lang="scss" scoped>
 .page-layout {
 	display: flex;
-	background-color: var(--view-bg-color);
+	background-color: #f7f7f7;
 	height: 100%;
 	width: 100%;
 	overflow: hidden;

src/modules/demo/views/crud.vue

@@ -59,42 +59,7 @@ import { useCrud, useUpsert, useTable, useForm, useAdvSearch } from "@cool-vue/c
 
 const Crud = useCrud(
 	{
-		service: {
+		service: "test"
-			page() {
-				return Promise.resolve({
-					list: [
-						{
-							id: 1,
-							name: "A"
-						},
-						{
-							id: 2,
-							name: "B"
-						},
-						{
-							id: 3,
-							name: "C"
-						}
-					],
-					pagination: {
-						total: 3,
-						size: 10,
-						page: 1
-					}
-				});
-			},
-			info() {
-				return Promise.resolve({
-					id: 1,
-					name: "A"
-				});
-			},
-			update() {
-				return Promise.reject({
-					message: "错误"
-				});
-			}
-		}
 	},
 	(app) => {
 		app.refresh();
@@ -131,8 +96,6 @@ const Upsert = useUpsert({
 		},
 		{
 			label: "crud",
-			group: "2",
-			hidden: ":isEdit",
 			component: {
 				name: "slot-crud"
 			}

src/modules/theme/components/theme.vue

@@ -1,35 +1,30 @@
 <template>
 	<div class="cl-theme" @click="open">
 		<el-badge type="primary" is-dot>
-			<icon-svg name="icon-discover"></icon-svg>
+			<icon-svg name="icon-discover" :size="15"></icon-svg>
 		</el-badge>
 	</div>
 
-	<el-drawer v-model="visible" title="设置主题" size="350px">
+	<el-drawer v-model="visible" title="设置主题" size="350px" append-to-body>
 		<el-form label-position="top">
 			<el-form-item label="推荐">
 				<ul class="cl-theme__comd">
-					<el-tooltip
+					<li @click="setComd(item)" v-for="(item, name) in themes" :key="name">
-						v-for="(item, name) in themes"
+						<div
-						:key="name"
+							class="w"
-						:content="item.label"
-						placement="top"
-					>
-						<li
 							:style="{
 								backgroundColor: item.color
 							}"
-							@click="setComd(item)"
 						>
 							<check v-show="item.color == form.theme.color" />
-						</li>
+						</div>
-					</el-tooltip>
+
+						<span>{{ item.label }}</span>
+					</li>
 				</ul>
 			</el-form-item>
 
-			<el-divider></el-divider>
+			<el-form-item label="自定义主色">
-
-			<el-form-item label="主色">
 				<el-color-picker v-model="form.color" @change="setColor" />
 				<span class="ml-10px">{{ form.color }}</span>
 			</el-form-item>
@@ -43,6 +38,7 @@ import { setTheme, themes } from "../utils";
 import { module } from "/@/cool/utils";
 import store from "store";
 import { Check } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
 
 export default defineComponent({
 	name: "cl-theme",
@@ -74,7 +70,9 @@ export default defineComponent({
 
 		function setComd(item: any) {
 			form.theme = item;
+			form.color = item.color;
 			setTheme(item);
+			ElMessage.success(`切换主题：${item.label}`);
 		}
 
 		return {
@@ -92,31 +90,43 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .cl-theme {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	width: 100%;
+
 	&__comd {
 		display: flex;
 		flex-wrap: wrap;
 
 		li {
+			display: inline-flex;
+			align-items: center;
 			list-style: none;
-			height: 20px;
+			margin-right: 15px;
-			width: 20px;
-			border-radius: 3px;
-			margin: 5px 10px 5px 0;
-			text-align: center;
-			color: #fff;
-			line-height: 20px;
 			cursor: pointer;
-			padding: 2px;
+
-			box-sizing: border-box;
+			.w {
+				height: 20px;
+				width: 20px;
+				border-radius: 3px;
+				margin: 5px 10px 5px 0;
+				text-align: center;
+				color: #fff;
+				line-height: 20px;
+				padding: 2px;
+				box-sizing: border-box;
+
+				.el-icon {
+					height: 100%;
+					width: 100%;
+				}
+			}
 
 			&:hover {
 				opacity: 0.7;
 			}
-
-			.el-icon {
-				height: 100%;
-				width: 100%;
-			}
 		}
 	}
 }

src/modules/theme/config.ts

@@ -1,11 +1,6 @@
 export default {
-	name: "blue"
+	// 推荐主题：'jihei', 'guolv', 'jiangzi'
-	// color: "",
+	name: "default"
-	// rules: {
+	// 自定义主题色
-	// 	"--view-bg-color": "#f7f7f7",
+	// color: "#4165d7"
-	// 	"--menu-bg-color": "#2f3447",
-	// 	"--menu-font-color": "#ffffff",
-	// 	"--topbar-bg-color": "#ffffff",
-	// 	"--topbar-font-color": "#000000"
-	// }
 };

src/modules/theme/index.ts

@@ -1,6 +1,7 @@
 import store from "store";
 import { App } from "vue";
 import { setTheme } from "./utils";
+import "./static/css/index.scss";
 
 export default {
 	install(_: App, options: any) {

src/modules/theme/static/css/index.scss

@@ -0,0 +1,60 @@
+.theme {
+	&-jihei {
+		.page-layout {
+			background-color: rgba(47, 52, 71, 0.9);
+
+			.app-topbar {
+				background-color: transparent;
+				color: #fff;
+
+				span {
+					color: #fff;
+				}
+
+				.el-breadcrumb {
+					span {
+						color: #ddd;
+					}
+
+					&__item {
+						&:last-child {
+							span {
+								color: #fff;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&-jiangzi {
+		.page-layout {
+			.app-slider__logo {
+				background-color: var(--color-primary);
+			}
+
+			.app-slider {
+				background-color: #fff;
+
+				.el-sub-menu__title,
+				.el-menu-item {
+					color: #000;
+					background-color: transparent !important;
+
+					&:hover,
+					&.is-active {
+						.icon-svg,
+						span {
+							color: var(--color-primary);
+						}
+					}
+
+					&.is-active {
+						border-right: 3px solid var(--color-primary);
+					}
+				}
+			}
+		}
+	}
+}

src/modules/theme/utils/index.ts

@@ -20,42 +20,32 @@ function mix(color1: string, color2: string, weight: number) {
 export const themes = [
 	{
 		label: "钴蓝",
-		name: "blue",
+		name: "default",
-		color: "#4165d7",
+		color: "#4165d7"
-		rules: {
-			"--menu-bg-color": "#2f3447",
-			"--menu-font-color": "#ffffff"
-		}
 	},
 	{
 		label: "极黑",
-		name: "black",
+		name: "jihei",
-		color: "#2f3447"
+		color: "#222222"
 	},
 	{
 		label: "果绿",
-		name: "green",
+		name: "guolv",
 		color: "#51C21A"
 	},
 	{
 		label: "酱紫",
-		name: "purple",
+		name: "jiangzi",
-		color: "#d0378d",
+		color: "#d0378d"
-		rules: {
-			"--view-bg-color": "#f7f7f7",
-			"--menu-bg-color": "#ffffff",
-			"--menu-font-color": "#000000"
-		}
 	}
 ];
 
 declare interface Options {
 	color?: string;
 	name?: string;
-	rules?: any;
 }
 
-export function setTheme({ color, name, rules }: Options) {
+export function setTheme({ color, name }: Options) {
 	// 主题配置
 	const theme = store.get("theme") || {};
 
@@ -76,16 +66,8 @@ export function setTheme({ color, name, rules }: Options) {
 		const item = themes.find((e) => e.name == name);
 
 		if (item) {
-			theme.name = name;
 			color = item.color;
-			rules = item.rules;
+			document.querySelector("#app")?.setAttribute("class", `theme-${name}`);
-
-			switch (name) {
-				case "blue":
-					break;
-				case "black":
-					break;
-			}
 		}
 	}
 
@@ -99,18 +81,11 @@ export function setTheme({ color, name, rules }: Options) {
 			el.style.setProperty(`${pre}-light-${i}`, mix(color, mixWhite, i * 0.1));
 			el.style.setProperty(`${pre}-dark-${i}`, mix(color, mixBlack, i * 0.1));
 		}
-
-		// 缓存
-		theme.color = color;
 	}
 
-	if (rules) {
+	// 缓存
-		for (const i in rules) {
+	theme.name = name;
-			el.style.setProperty(i, rules[i]);
+	theme.color = color;
-		}
-	}
-
-	console.log(theme);
 
 	store.set("theme", theme);
 }