优化细节

src/modules/chat/components/index.vue

@@ -1,53 +1,51 @@
 <template>
-	<div class="cl-chat__wrap">
+	<div class="cl-chat__icon" @click="open">
 		<el-badge :value="unCount" :hidden="!unCount">
-			<div class="cl-chat__icon" @click="open">
+			<cl-svg name="icon-notice" :size="16" />
-				<cl-svg name="icon-notice" :size="16" />
-			</div>
 		</el-badge>
+	</div>
 
-		<!-- 弹框 -->
+	<!-- 弹框 -->
-		<cl-dialog
+	<cl-dialog
-			v-model="visible"
+		v-model="visible"
-			title="聊天窗口"
+		title="聊天窗口"
-			height="70vh"
+		height="70vh"
-			width="1200px"
+		width="1200px"
-			padding="0"
+		padding="0"
-			keep-alive
+		keep-alive
-			:scrollbar="false"
+		:scrollbar="false"
-			:close-on-click-modal="false"
+		:close-on-click-modal="false"
-			close-on-press-escape
+		close-on-press-escape
-			:controls="['slot-expand', 'cl-flex1', 'fullscreen', 'close']"
+		:controls="['slot-expand', 'cl-flex1', 'fullscreen', 'close']"
+	>
+		<div
+			class="cl-chat"
+			:class="{
+				'is-mini': browser.isMini,
+				'is-expand': isExpand
+			}"
 		>
-			<div
+			<div class="cl-chat__session">
-				class="cl-chat"
+				<chat-session />
-				:class="{
-					'is-mini': browser.isMini,
-					'is-expand': isExpand
-				}"
-			>
-				<div class="cl-chat__session">
-					<chat-session />
-				</div>
-
-				<div class="cl-chat__right">
-					<chat-message />
-				</div>
 			</div>
 
-			<!-- 展开按钮 -->
+			<div class="cl-chat__right">
-			<template #slot-expand>
+				<chat-message />
-				<button class="cl-dialog__controls-icon">
+			</div>
-					<el-icon @click="isExpand = true" v-if="!isExpand">
+		</div>
-						<notebook />
+
-					</el-icon>
+		<!-- 展开按钮 -->
-					<el-icon @click="isExpand = false" v-else>
+		<template #slot-expand>
-						<arrow-left />
+			<button class="cl-dialog__controls-icon">
-					</el-icon>
+				<el-icon @click="isExpand = true" v-if="!isExpand">
-				</button>
+					<notebook />
-			</template>
+				</el-icon>
-		</cl-dialog>
+				<el-icon @click="isExpand = false" v-else>
-	</div>
+					<arrow-left />
+				</el-icon>
+			</button>
+		</template>
+	</cl-dialog>
 </template>
 
 <script lang="ts" name="cl-chat" setup>
@@ -207,8 +205,10 @@ defineExpose({
 	height: 100%;
 
 	&__icon {
-		padding: 0 5px;
+		display: flex;
-		text-align: center;
+		align-items: center;
+		justify-content: center;
+		width: 45px;
 
 		&:hover {
 			color: var(--color-primary);

src/modules/demo/views/home/components/count-effect.vue

@@ -7,7 +7,7 @@
 			</div>
 
 			<div class="card__container">
-				<el-progress :percentage="value" :stroke-width="8" />
+				<el-progress :percentage="value" :stroke-width="10" :show-text="false" />
 			</div>
 
 			<div class="card__footer">
@@ -48,7 +48,7 @@ import { BottomRight, TopRight } from "@element-plus/icons-vue";
 const value = ref(0);
 
 setTimeout(() => {
-	value.value = 50;
+	value.value = Math.random() * 30 + 30;
 }, 0);
 </script>
 
@@ -64,7 +64,6 @@ setTimeout(() => {
 			display: flex;
 			list-style: none;
 			flex: 1;
-			color: #d8d8d8;
 
 			.fall,
 			.rise {
@@ -85,7 +84,6 @@ setTimeout(() => {
 
 	.card__container {
 		padding-top: 15px;
-		padding-right: 10px;
 		box-sizing: border-box;
 	}
 }

src/modules/demo/views/home/components/count-user.vue

@@ -58,7 +58,7 @@ import { BottomRight, TopRight } from "@element-plus/icons-vue";
 			display: flex;
 			list-style: none;
 			flex: 1;
-			color: #d8d8d8;
+			color: var(--el-color-info);
 
 			.fall,
 			.rise {

src/modules/demo/views/home/components/sales-rank.vue

@@ -122,7 +122,7 @@ function changeDate(value: string) {
 				list-style: none;
 				font-size: 14px;
 				cursor: pointer;
-				color: #d8d8d8;
+				color: var(--el-color-info);
 				white-space: nowrap;
 				margin-right: 10px;
 				flex: 1;
@@ -132,13 +132,17 @@ function changeDate(value: string) {
 				}
 
 				&:not(.active):hover {
-					color: #999;
+					color: #666;
 				}
 			}
 		}
 
 		:deep(.el-date-editor) {
 			width: 150px;
+
+			.el-input__inner {
+				color: #333;
+			}
 		}
 	}
 

src/plugins/view/components/group.vue

@@ -521,9 +521,10 @@ defineExpose({
 
 				.el-icon {
 					padding: 5px;
-					font-size: 18px;
+					font-size: 16px;
 					margin-left: 5px;
 					cursor: pointer;
+					border-radius: 4px;
 
 					&:hover {
 						background-color: var(--el-fill-color-lighter);