😎优化noticeBar组件

Web/package.json

@@ -2,7 +2,7 @@
 	"name": "admin.net.pro",
 	"type": "module",
 	"version": "2.4.33",
-	"lastBuildTime": "2024.08.03",
+	"lastBuildTime": "2024.08.04",
 	"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",
 	"author": "zuohuaijun",
 	"license": "MIT",
@@ -68,7 +68,7 @@
 		"vue-signature-pad": "^3.0.2",
 		"vue3-tree-org": "^4.2.2",
 		"vuedraggable": "4.0.3",
-		"vxe-pc-ui": "^4.0.84",
+		"vxe-pc-ui": "^4.0.86",
 		"vxe-table": "^4.7.59",
 		"vxe-table-plugin-element": "^4.0.4",
 		"vxe-table-plugin-export-xlsx": "^4.0.5",

Web/src/components/noticeBar/index.vue

@@ -1,14 +1,13 @@
 <template>
 	<div class="notice-bar" :style="{ background, height: `${height}px` }" v-show="!state.isMode">
-		<div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
+		<div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }" ref="noticeBarWarpRef">
 			<i v-if="leftIcon" class="notice-bar-warp-left-icon" :class="leftIcon"></i>
-			<div class="notice-bar-warp-text-box" ref="noticeBarWarpRef">
+			<div class="notice-bar-warp-text-box">
-				<div class="notice-bar-warp-text" ref="noticeBarTextRef" v-if="!scrollable">
+				<div class="notice-bar-warp-text" ref="noticeBarTextRef">
 					<div v-html="text" data-slate-editor />
 				</div>
-				<div class="notice-bar-warp-slot" v-else><slot /></div>
 			</div>
-			<SvgIcon :name="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick" />
+			<!-- <SvgIcon :name="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick" /> -->
 		</div>
 	</div>
 </template>
@@ -16,117 +15,65 @@
 <script setup lang="ts" name="noticeBar">
 import { reactive, ref, onMounted, nextTick } from 'vue';
 
-// 定义父组件传过来的值
 const props = defineProps({
-	// 通知栏模式，可选值为 closeable link
+	mode: { type: String, default: '' }, // 通知栏模式，可选值为 closeable link
-	mode: {
+	text: { type: String, default: '欢迎使用 Admin.NET 通用权限开发框架 <a href="https://gitee.com/zuohuaijun/Admin.NET" target="_blank">https://gitee.com/zuohuaijun/Admin.NET</a>' }, // 通知文本内容
-		type: String,
+	color: { type: String, default: 'var(--el-color-warning)' }, // 通知文本颜色
-		default: () => '',
+	background: { type: String, default: 'var(--el-color-warning-light-9)' }, // 通知背景色
-	},
+	size: { type: [Number, String], default: 14 }, // 字体大小，单位px
-	// 通知文本内容
+	height: { type: Number, default: 40 }, // 通知栏高度，单位px
-	text: {
+	delay: { type: Number, default: 1 }, // 动画延迟时间 (s)
-		type: String,
+	speed: { type: Number, default: 200 }, // 滚动速率 (px/s)
-		default: () => '欢迎使用 Admin.NET 通用权限开发框架 <a href="https://gitee.com/zuohuaijun/Admin.NET" target="_blank">https://gitee.com/zuohuaijun/Admin.NET</a>',
+	scrollable: { type: Boolean, default: false }, // 是否开启垂直滚动
-	},
+	leftIcon: { type: String, default: 'iconfont icon-tongzhi2' }, // 自定义左侧图标
-	// 通知文本颜色
+	rightIcon: { type: String, default: '' }, // 自定义右侧图标
-	color: {
-		type: String,
-		default: () => 'var(--el-color-warning)',
-	},
-	// 通知背景色
-	background: {
-		type: String,
-		default: () => 'var(--el-color-warning-light-9)',
-	},
-	// 字体大小，单位px
-	size: {
-		type: [Number, String],
-		default: () => 14,
-	},
-	// 通知栏高度，单位px
-	height: {
-		type: Number,
-		default: () => 40,
-	},
-	// 动画延迟时间 (s)
-	delay: {
-		type: Number,
-		default: () => 1,
-	},
-	// 滚动速率 (px/s)
-	speed: {
-		type: Number,
-		default: () => 100,
-	},
-	// 是否开启垂直滚动
-	scrollable: {
-		type: Boolean,
-		default: () => false,
-	},
-	// 自定义左侧图标
-	leftIcon: {
-		type: String,
-		default: () => 'iconfont icon-tongzhi2',
-	},
-	// 自定义右侧图标
-	rightIcon: {
-		type: String,
-		default: () => '',
-	},
 });
 
-// 定义子组件向父组件传值/事件
 const emit = defineEmits(['close', 'link']);
-
+const noticeBarWarpRef = ref<HTMLDivElement | null>(null);
-// 定义变量内容
+const noticeBarTextRef = ref<HTMLDivElement | null>(null);
-const noticeBarWarpRef = ref();
-const noticeBarTextRef = ref();
 const state = reactive({
-	order: 1,
+	isMode: false,
-	oneTime: 0,
-	twoTime: 0,
 	warpOWidth: 0,
 	textOWidth: 0,
-	isMode: false,
+	animationDuration: 0,
 });
 
-// 初始化 animation 各项参数
+// 页面初始化
+onMounted(() => {
+	if (!props.scrollable) {
+		initAnimation();
+	}
+});
+
+// 初始化动画
 const initAnimation = () => {
 	nextTick(() => {
-		state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
+		if (noticeBarWarpRef.value && noticeBarTextRef.value) {
-		state.textOWidth = noticeBarTextRef.value.offsetWidth;
+			state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
-		document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`);
+			state.textOWidth = noticeBarTextRef.value.scrollWidth;
-		document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`);
+
-		computeAnimationTime();
+			state.animationDuration = (state.textOWidth + state.warpOWidth) / props.speed;
-		setTimeout(() => {
+
-			changeAnimation();
+			// Clear existing animation styles
-		}, props.delay * 1000);
+			noticeBarTextRef.value.style.animation = 'none';
+			noticeBarTextRef.value.offsetHeight; // Trigger reflow
+			noticeBarTextRef.value.style.animation = `marquee ${state.animationDuration}s linear infinite`;
+
+			// Define keyframes for marquee animation
+			const keyframes = `
+		  @keyframes marquee {
+			0% { transform: translateX(${state.warpOWidth}px); }
+			100% { transform: translateX(-${state.textOWidth}px); }
+		  }
+		`;
+			const styleSheet = document.createElement('style');
+			styleSheet.innerText = keyframes;
+			document.head.appendChild(styleSheet);
+		}
 	});
 };
-// 计算 animation 滚动时长
+
-const computeAnimationTime = () => {
-	state.oneTime = state.textOWidth / props.speed;
-	state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
-};
-// 改变 animation 动画调用
-const changeAnimation = () => {
-	if (state.order === 1) {
-		noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
-		state.order = 2;
-	} else {
-		noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`;
-	}
-};
-// 监听 animation 动画的结束
-const listenerAnimationend = () => {
-	noticeBarTextRef.value.addEventListener(
-		'animationend',
-		() => {
-			changeAnimation();
-		},
-		false
-	);
-};
 // 右侧 icon 图标点击
 const onRightIconClick = () => {
 	if (!props.mode) return false;
@@ -137,12 +84,6 @@ const onRightIconClick = () => {
 		emit('link');
 	}
 };
-// 页面加载时
-onMounted(() => {
-	if (props.scrollable) return false;
-	initAnimation();
-	listenerAnimationend();
-});
 </script>
 
 <style scoped lang="scss">
@@ -162,19 +103,12 @@ onMounted(() => {
 			align-items: center;
 			overflow: hidden;
 			position: relative;
-			.notice-bar-warp-text {
+			margin-right: 35px;
-				white-space: nowrap;
+			// .notice-bar-warp-text {
-				position: absolute;
+			// 	white-space: nowrap;
-				left: 0;
+			// 	position: absolute;
-			}
+			// 	left: 0;
-			.notice-bar-warp-slot {
+			// }
-				width: 100%;
-				white-space: nowrap;
-				:deep(.el-carousel__item) {
-					display: flex;
-					align-items: center;
-				}
-			}
 		}
 		.notice-bar-warp-left-icon {
 			width: 24px;

Web/src/views/system/cache/index.vue

@@ -1,6 +1,9 @@
 <template>
 	<div class="sys-cache-container">
-		<NoticeBar text="系统缓存数据管理，请慎重操作！" style="margin-bottom: 5px" />
+		<div>
+			<NoticeBar text="系统缓存数据管理，请慎重操作！" style="margin: 4px" />
+		</div>
+
 		<splitpanes class="default-theme">
 			<pane size="20">
 				<el-card shadow="hover" header="缓存列表" v-loading="state.loading" style="height: 100%" body-style="height:100%; overflow:auto">