优化

index.html

@@ -16,13 +16,13 @@
 			body,
 			#app {
 				height: 100%;
-				font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
-					'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 			}
 
 			* {
-				margin: 0;
+				-webkit-font-smoothing: antialiased;
-				padding: 0;
+				font-family:
+					'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+					'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 			}
 
 			.preload__wrap {

src/modules/base/components/code/json.vue

@@ -7,7 +7,7 @@
 			effect="dark"
 		>
 			<template #reference>
-				<span class="text">{{ text }}</span>
+				<span class="cl-code-json__text">{{ text }}</span>
 			</template>
 
 			<viewer />
@@ -33,7 +33,8 @@ import { computed, defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
-	modelValue: [String, Object],
+	content: null,
+	modelValue: null,
 	popover: Boolean,
 	height: {
 		type: [Number, String],
@@ -42,7 +43,8 @@ const props = defineProps({
 	maxHeight: {
 		type: [Number, String],
 		default: 300
-	}
+	},
+	title: String
 });
 
 const { copy } = useClipboard();
@@ -50,14 +52,14 @@ const { t } = useI18n();
 
 // 文本
 const text = computed(() => {
-	const v = props.modelValue;
+	const v = props.modelValue || props.content;
 
 	if (isString(v)) {
 		return v;
 	} else if (isObject(v)) {
 		return JSON.stringify(v, null, 4);
 	} else {
-		return '';
+		return String(v);
 	}
 });
 
@@ -72,16 +74,20 @@ const viewer = defineComponent({
 		return () => {
 			return (
 				<div class="cl-code-json">
-					<div class="op">
+					<div class="cl-code-json__op">
-						<el-button type="success" size="small" onClick={toCopy}>
+						{text.value != '{}' && (
-							{t('复制')}
+							<el-button type="success" size="small" onClick={toCopy}>
-						</el-button>
+								{t('复制')}
+							</el-button>
+						)}
 
 						{slots.op && slots.op()}
 					</div>
 
+					{props.title && <div class="cl-code-json__title">{props.title}</div>}
+
 					<el-scrollbar
-						class="scrollbar"
+						class="cl-code-json__content"
 						max-height={props.maxHeight}
 						height={props.height}
 					>
@@ -101,25 +107,35 @@ const viewer = defineComponent({
 	position: relative;
 	min-width: 200px;
 	max-width: 500px;
+	font-size: 14px;
 
-	.op {
+	&__op {
 		position: absolute;
 		right: 8px;
 		top: 8px;
 		z-index: 9;
 	}
 
-	.scrollbar {
+	&__title {
+		padding: 10px;
+		font-size: 12px;
+		color: var(--el-text-color-regular);
+
+		& + .cl-code-json__content {
+			padding-top: 0;
+		}
+	}
+
+	&__content {
+		padding: 10px;
+
 		code {
-			display: block;
-			padding: 10px;
-			font-size: 14px;
 			white-space: pre-wrap;
 		}
 	}
 
 	&__wrap {
-		.text {
+		.cl-code-json__text {
 			display: block;
 			text-overflow: ellipsis;
 			white-space: nowrap;

src/modules/base/pages/main/components/bmenu.tsx

@@ -54,7 +54,7 @@ export default defineComponent({
 
 					const item = (e: Menu.Item) => {
 						const arr = [
-							<cl-svg name={e.icon} size={16} />,
+							<cl-svg name={e.icon} size={18} />,
 							<span class="ml-4 tracking-wider text-[14px] mr-auto text-ellipsis overflow-hidden whitespace-nowrap">
 								{e.meta?.label}
 							</span>

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

@@ -25,7 +25,7 @@
 						@click="onTap(item, Number(index))"
 						@contextmenu.stop.prevent="openCM($event, item)"
 					>
-						<span class="label tracking-wider text-[12px]">
+						<span class="label tracking-wider">
 							{{ item.meta.label || item.name || item.path }}
 						</span>
 
@@ -209,7 +209,7 @@ onMounted(() => {
 		height: 100%;
 		flex: 1;
 		position: relative;
-		margin: 0 10px;
+		margin: 0 5px;
 	}
 
 	&__scroller {
@@ -229,8 +229,9 @@ onMounted(() => {
 		padding: 0 8px;
 		cursor: pointer;
 		color: var(--el-text-color-regular);
-		border-radius: 4px;
+		border-radius: var(--el-border-radius-base);
 		margin-right: 5px;
+		border: 1px solid var(--el-fill-color-dark);
 
 		.close {
 			width: 0;
@@ -245,6 +246,11 @@ onMounted(() => {
 			}
 		}
 
+		.label {
+			font-size: 12px;
+			line-height: 1;
+		}
+
 		&:last-child {
 			margin-right: 0;
 		}
@@ -255,6 +261,7 @@ onMounted(() => {
 
 		&.active {
 			background-color: var(--el-color-primary);
+			border-color: var(--el-color-primary);
 			color: #fff;
 		}
 

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

@@ -7,7 +7,7 @@
 		<template v-else>
 			<el-breadcrumb :separator-icon="ArrowRightBold">
 				<el-breadcrumb-item v-for="(item, index) in list" :key="index">
-					<span class="text-[13px]">{{ item.meta?.label || item.name }}</span>
+					<span class="text-[14px]">{{ item.meta?.label || item.name }}</span>
 				</el-breadcrumb-item>
 			</el-breadcrumb>
 		</template>

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

@@ -144,7 +144,7 @@ const keyWord = ref('');
 			}
 
 			&:not(&--popup) {
-				--el-menu-base-level-padding: 24px;
+				--el-menu-base-level-padding: 23px;
 
 				.el-menu-item,
 				.el-sub-menu__title {

src/modules/helper/components/ai-code/btn.vue

@@ -1,6 +1,5 @@
 <template>
 	<div class="cl-comm__icon" @click="toCode">
-		<cl-svg name="quick" class="icon" />
 		<div class="t1">{{ $t('AI极速编码') }}</div>
 		<div class="t2">Start</div>
 	</div>
@@ -21,12 +20,7 @@ function toCode() {
 	width: auto;
 	position: relative;
 	overflow: hidden;
-	width: 120px;
+	width: 90px;
-
-	.icon {
-		position: absolute;
-		left: 8px;
-	}
 
 	.t1,
 	.t2 {
@@ -37,11 +31,10 @@ function toCode() {
 		letter-spacing: 1px;
 		position: absolute;
 		width: 100%;
-		padding-left: 18px;
 		top: 50%;
 		left: 0;
 		transform: translateY(-50%);
-		background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
+		background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #666 20%);
 		background-position: 0;
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
@@ -49,7 +42,6 @@ function toCode() {
 		animation-fill-mode: forwards;
 		-webkit-text-size-adjust: none;
 		font-size: 12px;
-		line-height: 1;
 	}
 
 	.t2 {
@@ -57,10 +49,6 @@ function toCode() {
 	}
 
 	&:hover {
-		.icon {
-			color: var(--el-color-primary);
-		}
-
 		.t1 {
 			top: -100%;
 		}
@@ -76,7 +64,7 @@ function toCode() {
 		background-position: 0;
 	}
 	100% {
-		background-position: 100px;
+		background-position: 90px;
 	}
 }
 </style>

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

@@ -14,6 +14,10 @@
 		&__item {
 			padding: var(--cl-select-button-padding) !important;
 			border-radius: var(--cl-select-button-radius) !important;
+
+			&-label {
+				line-height: unset;
+			}
 		}
 	}