小改主题

index.html

@@ -109,7 +109,7 @@
 
 			.preload__loading::after,
 			.preload__loading::before {
-				content: "";
+				content: '';
 				display: inline-block;
 				position: absolute;
 				bottom: -2px;

pnpm-lock.yaml

@@ -88,8 +88,8 @@ importers:
         version: 0.18.5
     devDependencies:
       '@cool-vue/vite-plugin':
-        specifier: ^7.2.4
+        specifier: ^7.2.5
-        version: 7.2.4
+        version: 7.2.5
       '@rushstack/eslint-patch':
         specifier: ^1.10.4
         version: 1.10.4
@@ -333,8 +333,8 @@ packages:
   '@cool-vue/crud@7.2.5':
     resolution: {integrity: sha512-+kvWAfz77jTDZqDfQPDsl2dzOeJs7TptOH/maBfwO3iyZcTaYBbcFEBpWG5vjaUeva8Fuo1rlmlr5q/OykuX7Q==}
 
-  '@cool-vue/vite-plugin@7.2.4':
+  '@cool-vue/vite-plugin@7.2.5':
-    resolution: {integrity: sha512-lRVoCHeOQ+ZYnpCbVtfTGafdQ/glpb9Nk4YydGseNjVoXLfeJBGkZx2xsHOt54fjlFQMWyi+k4Qo28Ymgigtsg==}
+    resolution: {integrity: sha512-2xMo11P+c7ugNxSPlH3mjBKL4OSfTb49iQlki+GwTzIBykbxG5bi0pt5k9qzkz29R0dOWHWjjGrT6RpNlYvzkg==}
 
   '@ctrl/tinycolor@3.6.1':
     resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
@@ -3296,7 +3296,7 @@ snapshots:
       - '@vue/composition-api'
       - typescript
 
-  '@cool-vue/vite-plugin@7.2.4':
+  '@cool-vue/vite-plugin@7.2.5':
     dependencies:
       '@vue/compiler-sfc': 3.5.13
       axios: 1.7.9

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

@@ -42,7 +42,6 @@ export default defineComponent({
 .cl-svg {
 	width: 1em;
 	height: 1em;
-	vertical-align: -0.15em;
 	fill: currentColor;
 	overflow: hidden;
 }

src/modules/base/pages/main/components/amenu.vue

@@ -8,8 +8,13 @@
 		>
 			<template v-for="(item, index) in list" :key="item.id">
 				<el-menu-item :index="`${index}`">
-					<cl-svg v-if="item.icon" :name="item.icon" :size="18" />
+					<cl-svg class="icon" :name="item.icon" :size="16" v-if="item.icon" />
-					<span class="a-menu__name">{{ item.meta?.label }}</span>
+					<span class="label">{{ item.meta?.label }}</span>
+
+					<div class="arc">
+						<cl-svg name="arc" />
+						<cl-svg name="arc" />
+					</div>
 				</el-menu-item>
 			</template>
 		</el-menu>
@@ -104,11 +109,12 @@ watch(
 
 <style lang="scss" scoped>
 .a-menu {
-	margin: 5px 0 0 10px;
+	padding: 5px 0 0 15px;
+	background-color: var(--view-bg-color);
 
 	.el-menu {
-		height: 40px;
+		height: 36px;
-		background: transparent;
+		background-color: transparent;
 		border: 0;
 
 		:deep(.el-sub-menu__title) {
@@ -118,31 +124,66 @@ watch(
 		:deep(.el-menu-item) {
 			display: flex;
 			align-items: center;
-			height: 40px;
+			height: 36px;
-			padding: 0 15px;
+			padding: 0 16px 0 14px;
-			background: transparent;
 			border: 0;
-			color: #999;
+			color: var(--el-color-info);
+			position: relative;
+			background-color: transparent;
 
-			span {
+			.label {
 				font-size: 12px;
 				margin-left: 3px;
-				line-height: normal;
+				line-height: 1;
+			}
+
+			.icon {
+				margin-right: 5px;
+			}
+
+			.label,
+			.icon {
+				position: relative;
+				z-index: 2;
+			}
+
+			.arc {
+				pointer-events: none;
+				position: absolute;
+				left: 0;
+				top: 0;
+				height: 100%;
+				width: 100%;
+				opacity: 0;
+				border-radius: 8px 8px 0 0;
+
+				.cl-svg {
+					position: absolute;
+					bottom: 0;
+					color: var(--el-bg-color);
+
+					&:first-child {
+						left: -14px;
+						transform: scaleX(-1);
+					}
+
+					&:last-child {
+						right: -14px;
+					}
+				}
 			}
 
 			&:hover {
-				background: transparent;
+				// color: #000;
 			}
 
 			&.is-active {
 				color: var(--color-primary);
-				border-radius: 6px 6px 0 0;
-				background: #fff;
-				color: #000;
-			}
 
-			.cl-svg {
+				.arc {
-				margin-right: 5px;
+					background-color: var(--el-bg-color);
+					opacity: 1;
+				}
 			}
 		}
 	}

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

@@ -217,7 +217,7 @@ onMounted(() => {
 		align-items: center;
 		border-radius: 4px;
 		height: 30px;
-		padding: 0 10px;
+		padding: 0 8px 0 12px;
 		margin-right: 10px;
 		cursor: pointer;
 		color: var(--el-color-info);

src/modules/base/pages/main/components/route-nav.vue

@@ -63,7 +63,7 @@ const lastName = computed(() => last(list.value)?.meta?.label);
 		margin: 0 10px;
 
 		.el-breadcrumb__inner {
-			font-size: 13px;
+			font-size: 12px;
 		}
 	}
 

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

@@ -146,7 +146,7 @@ onMounted(() => {
 		border-radius: 4px;
 
 		.cl-svg {
-			font-size: 15px;
+			font-size: 14px;
 		}
 
 		&:hover {

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

@@ -51,7 +51,7 @@ onUnmounted(() => {
 	margin: 0 10px 10px 10px;
 	width: calc(100% - 20px);
 	box-sizing: border-box;
-	border-radius: 4px;
+	border-radius: 6px;
 	position: relative;
 
 	.none-enter-active {

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

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

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

@@ -5,7 +5,7 @@
 }
 
 :root {
-	--view-bg-color: #f7f7f7;
+	--view-bg-color: var(--el-fill-color-light);
 }
 
 a {

src/modules/base/static/svg/arc.svg

@@ -0,0 +1,3 @@
+<svg height="7" width="7">
+	<path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z"></path>
+</svg>

src/modules/base/static/svg/expand.svg

@@ -1 +1,33 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735127795772" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2135" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M42.666667 85.333333m42.666666 0l853.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-853.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z" fill="#000000" p-id="2136"></path><path d="M426.666667 341.333333m42.666666 0l469.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-469.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z" fill="#000000" p-id="2137"></path><path d="M426.666667 597.333333m42.666666 0l469.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-469.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z" fill="#000000" p-id="2138"></path><path d="M42.666667 853.333333m42.666666 0l853.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-853.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z" fill="#000000" p-id="2139"></path><path d="M234.026667 349.568a42.666667 42.666667 0 0 1 54.485333 65.450667l-4.096 3.413333L156.458667 512l127.957333 93.568a42.666667 42.666667 0 0 1 12.117333 55.082667l-2.858666 4.522666a42.666667 42.666667 0 0 1-55.125334 12.16l-4.522666-2.901333-175.018667-128a42.666667 42.666667 0 0 1-4.096-65.493333l4.096-3.413334 175.018667-128z" fill="#000000" p-id="2140"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+	t="1735127795772"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2135"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="256"
+	height="256"
+>
+	<path
+		d="M42.666667 85.333333m42.666666 0l853.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-853.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z"
+		p-id="2136"
+	></path>
+	<path
+		d="M426.666667 341.333333m42.666666 0l469.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-469.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z"
+		p-id="2137"
+	></path>
+	<path
+		d="M426.666667 597.333333m42.666666 0l469.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-469.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z"
+		p-id="2138"
+	></path>
+	<path
+		d="M42.666667 853.333333m42.666666 0l853.333334 0q42.666667 0 42.666666 42.666667l0 0q0 42.666667-42.666666 42.666667l-853.333334 0q-42.666667 0-42.666666-42.666667l0 0q0-42.666667 42.666666-42.666667Z"
+		p-id="2139"
+	></path>
+	<path
+		d="M234.026667 349.568a42.666667 42.666667 0 0 1 54.485333 65.450667l-4.096 3.413333L156.458667 512l127.957333 93.568a42.666667 42.666667 0 0 1 12.117333 55.082667l-2.858666 4.522666a42.666667 42.666667 0 0 1-55.125334 12.16l-4.522666-2.901333-175.018667-128a42.666667 42.666667 0 0 1-4.096-65.493333l4.096-3.413334 175.018667-128z"
+		p-id="2140"
+	></path>
+</svg>

src/modules/base/static/svg/fold.svg

@@ -1 +1,17 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735127798306" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2305" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M935.466667 85.333333H85.333333a42.666667 42.666667 0 1 0 0 85.333334h850.133334a42.666667 42.666667 0 0 0 0-85.333334z m-382.72 256H85.333333a42.666667 42.666667 0 1 0 0 85.333334h467.413334a42.666667 42.666667 0 1 0 0-85.333334z m0 256H85.333333a42.666667 42.666667 0 0 0 0 85.333334h467.413334a42.666667 42.666667 0 1 0 0-85.333334z m382.72 256H85.333333a42.666667 42.666667 0 0 0 0 85.333334h850.133334a42.666667 42.666667 0 0 0 0-85.333334zM789.461333 349.568a42.410667 42.410667 0 0 0-59.392 9.258667c-12.8 17.536-10.24 41.642667 5.12 56.192l4.096 3.413333L866.773333 512l-127.488 93.568c-17.493333 12.8-22.357333 36.565333-12.117333 55.082667l2.901333 4.522666c12.8 17.578667 36.437333 22.442667 54.912 12.16l4.48-2.901333 174.464-128c21.76-15.957333 23.125333-47.530667 4.053334-65.493333l-4.053334-3.413334-174.464-128z" fill="#000000" p-id="2306"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+	t="1735127798306"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2305"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="256"
+	height="256"
+>
+	<path
+		d="M935.466667 85.333333H85.333333a42.666667 42.666667 0 1 0 0 85.333334h850.133334a42.666667 42.666667 0 0 0 0-85.333334z m-382.72 256H85.333333a42.666667 42.666667 0 1 0 0 85.333334h467.413334a42.666667 42.666667 0 1 0 0-85.333334z m0 256H85.333333a42.666667 42.666667 0 0 0 0 85.333334h467.413334a42.666667 42.666667 0 1 0 0-85.333334z m382.72 256H85.333333a42.666667 42.666667 0 0 0 0 85.333334h850.133334a42.666667 42.666667 0 0 0 0-85.333334zM789.461333 349.568a42.410667 42.410667 0 0 0-59.392 9.258667c-12.8 17.536-10.24 41.642667 5.12 56.192l4.096 3.413333L866.773333 512l-127.488 93.568c-17.493333 12.8-22.357333 36.565333-12.117333 55.082667l2.901333 4.522666c12.8 17.578667 36.437333 22.442667 54.912 12.16l4.48-2.901333 174.464-128c21.76-15.957333 23.125333-47.530667 4.053334-65.493333l-4.053334-3.413334-174.464-128z"
+		p-id="2306"
+	></path>
+</svg>

src/modules/base/views/user/components/dept-list.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="dept-tree">
 		<div class="dept-tree__header">
-			<div>组织架构</div>
+			<el-text>组织架构</el-text>
 
 			<ul class="dept-tree__op">
 				<li @click="refresh()">
@@ -384,21 +384,10 @@ onMounted(function () {
 	&__header {
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
 		height: 40px;
 		padding: 0 10px;
-		letter-spacing: 1px;
 		position: relative;
-
-		div {
-			font-size: 14px;
-			flex: 1;
-			white-space: nowrap;
-		}
-
-		i {
-			font-size: 18px;
-			cursor: pointer;
-		}
 	}
 
 	&__op {
@@ -412,9 +401,10 @@ onMounted(function () {
 			margin-left: 5px;
 			padding: 5px;
 			cursor: pointer;
+			border-radius: 4px;
 
 			&:not(.no):hover {
-				background-color: var(--el-fill-color-lighter);
+				background-color: var(--el-fill-color-light);
 			}
 		}
 	}

src/modules/chat/components/index.vue

@@ -206,6 +206,10 @@ defineExpose({
 		justify-content: center;
 		width: 45px;
 
+		.el-badge {
+			display: flex;
+		}
+
 		&:hover {
 			color: var(--color-primary);
 		}

src/modules/demo/views/home/components/category-ratio.vue

@@ -36,8 +36,7 @@ const chartOption = reactive({
 			emphasis: {
 				label: {
 					show: true,
-					fontSize: '30',
+					fontSize: 30
-					fontWeight: 'bold'
 				}
 			},
 			labelLine: {
@@ -52,7 +51,8 @@ const chartOption = reactive({
 			],
 			itemStyle: {
 				borderColor: '#fff',
-				borderWidth: 4
+				borderWidth: 4,
+				borderRadius: 4
 			},
 			roundCap: 1
 		}

src/modules/helper/static/index.scss

@@ -5,6 +5,10 @@
 		background-color: var(--el-bg-color);
 	}
 
+	:deep(.el-tabs__header) {
+		margin-bottom: 10px;
+	}
+
 	.scope {
 		border-radius: 8px;
 		margin-bottom: 10px;

src/modules/helper/views/plugins/serve.vue

@@ -2,8 +2,8 @@
 	<el-scrollbar class="plugins__wrapper" @dragover="onDragover" @drop="onDrop">
 		<div class="plugins">
 			<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
-				<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
+				<el-tab-pane label="已安装插件" name="installed" />
-				<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
+				<el-tab-pane label="插件市场" name="shop" />
 			</el-tabs>
 
 			<el-row :gutter="10">

src/modules/helper/views/plugins/vue.vue

@@ -1,14 +1,11 @@
 <template>
 	<el-scrollbar class="plugins__wrapper">
 		<div class="plugins">
-			<div class="header">
 			<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
-					<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
+				<el-tab-pane label="已安装插件" name="installed" />
-					<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
+				<el-tab-pane label="插件市场" name="shop" />
 			</el-tabs>
-			</div>
 
-			<div class="container">
 			<el-row :gutter="10">
 				<el-col
 					v-for="(item, index) in list"
@@ -57,7 +54,6 @@
 					</div>
 				</el-col>
 			</el-row>
-			</div>
 
 			<cl-dialog v-model="det.visible" :title="det.title" width="60%">
 				<el-tabs v-model="det.active" type="card" @tab-change="tab.onChange">

src/modules/task/views/list.vue

@@ -386,27 +386,23 @@ onActivated(() => {
 <style lang="scss" scoped>
 .task-list {
 	height: 100%;
-	background-color: var(--el-bg-color-page);
 
 	.list {
 		display: flex;
 		flex-wrap: wrap;
-		padding: 10px 10px 0 10px;
-		box-sizing: border-box;
-		background-color: inherit;
 
 		.item {
 			background-color: var(--el-bg-color);
 			padding: 15px 20px 0 20px;
 			border-radius: 10px;
-			margin: 0 15px 15px 0;
+			margin: 0 10px 10px 0;
 			height: 200px;
 			width: 350px;
 			cursor: pointer;
 			box-sizing: border-box;
 
 			.name {
-				font-size: 17px;
+				font-size: 16px;
 				font-weight: bold;
 				margin-bottom: 10px;
 				overflow: hidden;
@@ -420,16 +416,12 @@ onActivated(() => {
 
 				span {
 					display: block;
+					font-size: 12px;
 
 					&:nth-child(1) {
-						font-size: 12px;
 						margin-bottom: 5px;
 						color: var(--el-color-info);
 					}
-
-					&:nth-child(2) {
-						font-size: 14px;
-					}
 				}
 			}
 
@@ -441,7 +433,7 @@ onActivated(() => {
 				height: 50px;
 
 				.el-icon {
-					font-size: 22px;
+					font-size: 16px;
 					cursor: pointer;
 					margin-left: 10px;
 					padding: 5px;
@@ -470,7 +462,7 @@ onActivated(() => {
 			}
 
 			&:hover {
-				background-color: var(--el-fill-color-lighter);
+				box-shadow: 0px 0px 10px 1px var(--el-color-info-light-9);
 			}
 
 			&.is-add {

src/plugins/crud/components/select/index.tsx

@@ -29,7 +29,12 @@ export default defineComponent({
 		// 是否返回选中层级下的所有值
 		allLevelsId: Boolean,
 		// 是否父子不互相关联
-		checkStrictly: Boolean
+		checkStrictly: Boolean,
+		// 是否搜索
+		isSearch: {
+			type: Boolean,
+			default: true
+		}
 	},
 
 	emits: ['update:modelValue', 'change'],
@@ -81,7 +86,7 @@ export default defineComponent({
 			emit('update:modelValue', v);
 			emit('change', v);
 
-			if (props.prop && !props.scope) {
+			if (props.prop && props.isSearch) {
 				Crud.value?.refresh({ page: 1, [props.prop]: v });
 			}
 		}
@@ -93,7 +98,7 @@ export default defineComponent({
 			};
 
 			// 占位符
-			const placeholder = props.prop ? '选择搜索' : '请选择';
+			const placeholder = props.isSearch ? '全部' : '请选择';
 
 			// 树形下拉框
 			const TreeSelect = (

src/plugins/theme/components/theme.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="cl-theme" @click="open">
+	<div class="cl-theme__icon" @click="open">
 		<el-badge type="primary" is-dot>
 			<cl-svg name="icon-discover" :size="16" />
 		</el-badge>
@@ -128,16 +128,6 @@ function setTransition(val: any) {
 
 <style lang="scss">
 .cl-theme {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	width: 45px;
-
-	&:hover {
-		color: var(--color-primary);
-	}
-
 	&-dark {
 		width: 45px;
 		margin-left: 10px;
@@ -177,16 +167,19 @@ function setTransition(val: any) {
 		}
 	}
 
-	&__drawer {
+	&__icon {
-		:deep(.el-form-item) {
+		display: flex;
-			background-color: #f7f7f7;
+		align-items: center;
-			padding: 10px;
+		justify-content: center;
-			border-radius: 6px;
+		height: 100%;
-			border: 1px solid var(--el-border-color);
+		width: 45px;
 
-			.el-form-item__label {
+		.el-badge {
-				color: #000;
+			display: flex;
 		}
+
+		&:hover {
+			color: var(--color-primary);
 		}
 	}
 }

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

@@ -13,7 +13,7 @@ html.dark {
 	}
 
 	.cl-crud {
-		background-color: transparent !important;
+		background-color: transparent;
 
 		.el-table {
 			&__header {
@@ -37,43 +37,6 @@ html.dark {
 		}
 	}
 
-	.app-layout {
-		background-color: var(--el-bg-color) !important;
-
-		.a-menu {
-			.el-menu-item {
-				border-radius: 6px !important;
-			}
-		}
-
-		.app-topbar {
-			background-color: transparent;
-			color: #fff;
-
-			span {
-				color: #fff;
-			}
-
-			.el-breadcrumb {
-				span {
-					color: #ddd;
-				}
-
-				&__item {
-					&:last-child {
-						span {
-							color: #fff;
-						}
-					}
-				}
-			}
-		}
-
-		.app-views {
-			background-color: #2f3447;
-		}
-	}
-
 	.el-overlay {
 		background-size: 4px 4px;
 		backdrop-filter: saturate(50%) blur(4px);
@@ -83,22 +46,46 @@ html.dark {
 body.theme {
 	&-jihei {
 		.app-layout {
-			background-color: rgba(47, 52, 71, 0.9);
+			background-color: #3b3f4d;
+
+			.app-slider {
+				background-color: #2e313d;
+			}
 
 			.a-menu {
+				padding: 5px 10px;
+				background-color: transparent;
+				color: #fff;
+
 				.el-menu-item {
 					border-radius: 6px !important;
+					color: #fff;
+				}
+
+				.arc {
+					border-radius: 8px !important;
+
+					.cl-svg {
+						display: none;
+					}
 				}
 			}
 
 			.app-topbar {
 				background-color: transparent;
 				color: #fff;
+				border-bottom: 0;
 
 				span {
 					color: #fff;
 				}
 
+				&__collapse {
+					&:hover {
+						color: #333;
+					}
+				}
+
 				.el-breadcrumb {
 					span {
 						color: #ddd;
@@ -113,6 +100,31 @@ body.theme {
 					}
 				}
 			}
+
+			.app-process {
+				background-color: transparent;
+				color: #fff;
+
+				&__item {
+					.el-text {
+						color: #fff;
+					}
+
+					&:not(.active):hover {
+						.el-text {
+							color: #333;
+						}
+					}
+				}
+
+				&__op {
+					.item {
+						&:hover {
+							color: #333;
+						}
+					}
+				}
+			}
 		}
 	}
 

src/plugins/view/components/group.vue

@@ -6,18 +6,19 @@
 				<slot name="left">
 					<div class="scope">
 						<div class="head">
-							<span>{{ config.label }}</span>
+							<el-text class="label">{{ config.label }}</el-text>
 
 							<el-tooltip v-if="config.enableRefresh" content="刷新">
-								<el-icon @click="refresh()">
+								<el-icon class="icon" @click="refresh()">
 									<icon-refresh />
 								</el-icon>
 							</el-tooltip>
 
 							<el-tooltip v-if="config.enableAdd" content="添加">
 								<el-icon
-									v-permission="config.service.permission.add"
+									class="icon"
 									@click="edit()"
+									v-permission="config.service.permission.add"
 								>
 									<plus />
 								</el-icon>
@@ -185,11 +186,13 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import { isEmpty, merge } from 'lodash-es';
 import { deepTree } from '/@/cool/utils';
 import { type ClViewGroup } from '../types/index.d';
+import { useClipboard } from '@vueuse/core';
 
 const { browser, onScreenChange } = useBrowser();
 const slots = useSlots();
 const Form = useForm();
 const { refs, setRefs } = useCool();
+const { copy } = useClipboard();
 
 // 配置
 const config = reactive(
@@ -428,6 +431,14 @@ function onContextMenu(e: any, item: ClViewGroup.Item) {
 			target: 'item'
 		},
 		list: [
+			{
+				label: '复制Key',
+				callback(done) {
+					done();
+					copy(item.key);
+					ElMessage.success('复制成功');
+				}
+			},
 			{
 				label: '编辑',
 				hidden: !config.service._permission.update,
@@ -479,6 +490,21 @@ defineExpose({
 	$left-width: v-bind('config.leftWidth');
 	$bg: var(--el-bg-color);
 
+	.icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		height: 26px;
+		width: 26px;
+		font-size: 16px;
+		border-radius: 4px;
+
+		&:hover {
+			background-color: var(--el-fill-color-light);
+		}
+	}
+
 	&__wrap {
 		display: flex;
 		height: 100%;
@@ -527,28 +553,25 @@ defineExpose({
 				font-size: 14px;
 				padding: 0 10px;
 
-				& > span {
+				.label {
-					&:nth-child(1) {
 					flex: 1;
 				}
-				}
 
 				.el-icon {
-					padding: 5px;
-					font-size: 16px;
 					margin-left: 5px;
 					cursor: pointer;
-					border-radius: 4px;
-
-					&:hover {
-						background-color: var(--el-fill-color-lighter);
-					}
 				}
 			}
 
 			.search {
 				height: 40px;
 				padding: 0 10px;
+
+				:deep(.el-input__inner) {
+					&::placeholder {
+						font-size: 12px;
+					}
+				}
 			}
 
 			.data {
@@ -579,15 +602,16 @@ defineExpose({
 							align-items: center;
 							list-style: none;
 							box-sizing: border-box;
-							padding: 10px 35px 10px 10px;
+							padding: 10px 34px 10px 10px;
 							margin: 0 10px;
 							cursor: pointer;
-							font-size: 13px;
+							font-size: 12px;
 							margin-bottom: 10px;
 							border-radius: 4px;
-							color: #666;
+							color: var(--el-text-color-regular);
 							position: relative;
-							background-color: #f7f7f7;
+							background-color: var(--el-fill-color-lighter);
+							line-height: 1;
 
 							.arrow-right {
 								position: absolute;
@@ -640,16 +664,9 @@ defineExpose({
 			}
 
 			.icon {
-				display: flex;
-				align-items: center;
 				position: absolute;
-				left: 0;
+				left: 10px;
-				top: 0;
+				background-color: var(--el-fill-color-lighter);
-				font-size: 18px;
-				cursor: pointer;
-				height: 100%;
-				width: 80px;
-				padding-left: 10px;
 			}
 		}