增加Animate.css动画库

Web/package-lock.json

@@ -12,6 +12,7 @@
 				"@element-plus/icons-vue": "^2.0.10",
 				"@microsoft/signalr": "^6.0.10",
 				"@wangeditor/editor-for-vue": "^5.1.11",
+				"animate.css": "^4.1.1",
 				"axios": "^1.1.3",
 				"countup.js": "^2.3.2",
 				"cropperjs": "^1.5.12",
@@ -1425,6 +1426,11 @@
 				"ajv": "^6.9.1"
 			}
 		},
+		"node_modules/animate.css": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+			"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+		},
 		"node_modules/ansi-regex": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -5775,6 +5781,11 @@
 			"peer": true,
 			"requires": {}
 		},
+		"animate.css": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+			"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+		},
 		"ansi-regex": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",

Web/package.json

@@ -38,7 +38,8 @@
 		"vue-router": "^4.1.6",
 		"vue-json-pretty": "^2.2.2",
 		"vue-signature-pad": "^3.0.2",
-		"vue3-tree-org": "^4.1.1"
+		"vue3-tree-org": "^4.1.1",
+		"animate.css": "^4.1.1"
 	},
 	"devDependencies": {
 		"@types/node": "^18.11.9",

Web/src/layout/navBars/breadcrumb/setings.vue

@@ -1,13 +1,6 @@
 <template>
 	<div class="layout-breadcrumb-seting">
-		<el-drawer
-			:title="$t('message.layout.configTitle')"
-			v-model="getThemeConfig.isDrawer"
-			direction="rtl"
-			destroy-on-close
-			size="260px"
-			@close="onDrawerClose"
-		>
+		<el-drawer :title="$t('message.layout.configTitle')" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="300px" @close="onDrawerClose">
 			<el-scrollbar class="layout-breadcrumb-seting-bar">
 				<!-- 全局主题 -->
 				<el-divider content-position="left">{{ $t('message.layout.oneTitle') }}</el-divider>
@@ -67,53 +60,31 @@
 				</div>
 
 				<!-- 分栏设置 -->
-				<el-divider content-position="left" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">{{
-					$t('message.layout.twoColumnsTitle')
-				}}</el-divider>
+				<el-divider content-position="left" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">{{ $t('message.layout.twoColumnsTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuBar') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-color-picker
-							v-model="getThemeConfig.columnsMenuBar"
-							size="default"
-							@change="onBgColorPickerChange('columnsMenuBar')"
-							:disabled="getThemeConfig.layout !== 'columns'"
-						>
+						<el-color-picker v-model="getThemeConfig.columnsMenuBar" size="default" @change="onBgColorPickerChange('columnsMenuBar')" :disabled="getThemeConfig.layout !== 'columns'">
 						</el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuBarColor') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-color-picker
-							v-model="getThemeConfig.columnsMenuBarColor"
-							size="default"
-							@change="onBgColorPickerChange('columnsMenuBarColor')"
-							:disabled="getThemeConfig.layout !== 'columns'"
-						>
+						<el-color-picker v-model="getThemeConfig.columnsMenuBarColor" size="default" @change="onBgColorPickerChange('columnsMenuBarColor')" :disabled="getThemeConfig.layout !== 'columns'">
 						</el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsColumnsMenuBarColorGradual') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isColumnsMenuBarColorGradual"
-							size="small"
-							@change="onColumnsMenuBarGradualChange"
-							:disabled="getThemeConfig.layout !== 'columns'"
-						></el-switch>
+						<el-switch v-model="getThemeConfig.isColumnsMenuBarColorGradual" size="small" @change="onColumnsMenuBarGradualChange" :disabled="getThemeConfig.layout !== 'columns'"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsColumnsMenuHoverPreload') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isColumnsMenuHoverPreload"
-							size="small"
-							@change="onColumnsMenuHoverPreloadChange"
-							:disabled="getThemeConfig.layout !== 'columns'"
-						></el-switch>
+						<el-switch v-model="getThemeConfig.isColumnsMenuHoverPreload" size="small" @change="onColumnsMenuHoverPreloadChange" :disabled="getThemeConfig.layout !== 'columns'"></el-switch>
 					</div>
 				</div>
 
@@ -122,23 +93,13 @@
 				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsCollapse') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isCollapse"
-							:disabled="getThemeConfig.layout === 'transverse'"
-							size="small"
-							@change="onThemeConfigChange"
-						></el-switch>
+						<el-switch v-model="getThemeConfig.isCollapse" :disabled="getThemeConfig.layout === 'transverse'" size="small" @change="onThemeConfigChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsUniqueOpened') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isUniqueOpened"
-							:disabled="getThemeConfig.layout === 'transverse'"
-							size="small"
-							@change="setLocalThemeConfig"
-						></el-switch>
+						<el-switch v-model="getThemeConfig.isUniqueOpened" :disabled="getThemeConfig.layout === 'transverse'" size="small" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -150,13 +111,7 @@
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout !== 'classic' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsClassicSplitMenu') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isClassicSplitMenu"
-							:disabled="getThemeConfig.layout !== 'classic'"
-							size="small"
-							@change="onClassicSplitMenuChange"
-						>
-						</el-switch>
+						<el-switch v-model="getThemeConfig.isClassicSplitMenu" :disabled="getThemeConfig.layout !== 'classic'" size="small" @change="onClassicSplitMenuChange"> </el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -168,16 +123,7 @@
 				<div class="layout-breadcrumb-seting-bar-flex mt11">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeLockScreenTime') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-input-number
-							v-model="getThemeConfig.lockScreenTime"
-							controls-position="right"
-							:min="1"
-							:max="9999"
-							@change="setLocalThemeConfig"
-							size="default"
-							style="width: 90px"
-						>
-						</el-input-number>
+						<el-input-number v-model="getThemeConfig.lockScreenTime" controls-position="right" :min="1" :max="9999" @change="setLocalThemeConfig" size="default" style="width: 90px"> </el-input-number>
 					</div>
 				</div>
 
@@ -189,10 +135,7 @@
 						<el-switch v-model="getThemeConfig.isShowLogo" size="small" @change="onIsShowLogoChange"></el-switch>
 					</div>
 				</div>
-				<div
-					class="layout-breadcrumb-seting-bar-flex mt15"
-					:style="{ opacity: getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse' ? 0.5 : 1 }"
-				>
+				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumb') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
@@ -230,12 +173,7 @@
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: isMobile ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsSortableTagsView') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isSortableTagsView"
-							:disabled="isMobile ? true : false"
-							size="small"
-							@change="onSortableTagsViewChange"
-						></el-switch>
+						<el-switch v-model="getThemeConfig.isSortableTagsView" :disabled="isMobile ? true : false" size="small" @change="onSortableTagsViewChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -291,9 +229,30 @@
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveAnimation') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="default" style="width: 90px" @change="setLocalThemeConfig">
-							<el-option label="slide-right" value="slide-right"></el-option>
-							<el-option label="slide-left" value="slide-left"></el-option>
-							<el-option label="opacitys" value="opacitys"></el-option>
+							<el-option label="fade" value="fade"></el-option>
+							<el-option label="fadeUp" value="fadeUp"></el-option>
+							<el-option label="fadeDown" value="fadeDown"></el-option>
+							<el-option label="fadeLeft" value="fadeLeft"></el-option>
+							<el-option label="fadeRight" value="fadeRight"></el-option>
+							<el-option label="lightSpeedLeft" value="lightSpeedLeft"></el-option>
+							<el-option label="lightSpeedRight" value="lightSpeedRight"></el-option>
+							<el-option label="zoom" value="zoom"></el-option>
+							<el-option label="zoomUp" value="zoomUp"></el-option>
+							<el-option label="zoomDown" value="zoomDown"></el-option>
+							<el-option label="zoomLeft" value="zoomLeft"></el-option>
+							<el-option label="zoomRight" value="zoomRight"></el-option>
+							<el-option label="flip" value="flip"></el-option>
+							<el-option label="flipX" value="flipX"></el-option>
+							<el-option label="flipY" value="flipY"></el-option>
+							<el-option label="backUp" value="backUp"></el-option>
+							<el-option label="backDown" value="backDown"></el-option>
+							<el-option label="backLeft" value="backLeft"></el-option>
+							<el-option label="backRight" value="backRight"></el-option>
+							<el-option label="bounce" value="bounce"></el-option>
+							<el-option label="bounceUp" value="bounceUp"></el-option>
+							<el-option label="bounceDown" value="bounceDown"></el-option>
+							<el-option label="bounceLeft" value="bounceLeft"></el-option>
+							<el-option label="bounceRight" value="bounceRight"></el-option>
 						</el-select>
 					</div>
 				</div>
@@ -541,8 +500,7 @@ export default defineComponent({
 			} else {
 				if (getThemeConfig.value.isInvert) getThemeConfig.value.isGrayscale = false;
 			}
-			const cssAttr =
-				attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
+			const cssAttr = attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
 			const appEle: any = document.body;
 			appEle.setAttribute('style', `filter: ${cssAttr}`);
 			setLocalThemeConfig();

Web/src/main.ts

@@ -16,6 +16,7 @@ import 'vform3-builds/dist/designer.style.css'; // VForm3表单设计样式
 import VueSignaturePad from 'vue-signature-pad'; // 电子签名
 import vue3TreeOrg from 'vue3-tree-org'; // 组织架构图
 import 'vue3-tree-org/lib/vue3-tree-org.css'; // 组织架构图样式
+import 'animate.css'; // 动画库
 
 const app = createApp(App);
 

Web/src/stores/themeConfig.ts

@@ -106,8 +106,8 @@ export const useThemeConfig = defineStore('themeConfig', {
 			// Tagsview 风格：可选值"<tags-style-one|tags-style-four|tags-style-five>"，默认 tags-style-five
 			// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
 			tagsStyle: 'tags-style-one',
-			// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
-			animation: 'slide-right',
+			// 主页面切换动画: Animate.css
+			animation: 'lightSpeedLeft',
 			// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
 			columnsAsideStyle: 'columns-round',
 			// 分栏布局风格：可选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal

Web/src/theme/common/transition.scss

@@ -1,39 +1,152 @@
 /* 页面切换动画
 ------------------------------- */
-.slide-right-enter-active,
-.slide-right-leave-active,
-.slide-left-enter-active,
-.slide-left-leave-active {
-	will-change: transform;
-	transition: all 0.3s ease;
-}
-// slide-right
-.slide-right-enter-from {
-	opacity: 0;
-	transform: translateX(-20px);
+.fade-enter-active{
+	animation: fadeIn;
+	animation-duration: 0.3s;
 }
-.slide-right-leave-to {
-	opacity: 0;
-	transform: translateX(20px);
+.fadeUp-enter-active{
+	animation: fadeInUp;
+	animation-duration: 0.3s;
 }
-// slide-left
-.slide-left-enter-from {
-	@extend .slide-right-leave-to;
+.fadeDown-enter-active{
+	animation: fadeInDown;
+	animation-duration: 0.3s;
 }
-.slide-left-leave-to {
-	@extend .slide-right-enter-from;
+.fadeLeft-enter-active{
+	animation: fadeInLeft;
+	animation-duration: 0.3s;
 }
-// opacitys
-.opacitys-enter-active,
-.opacitys-leave-active {
-	will-change: transform;
-	transition: all 0.3s ease;
+.fadeRight-enter-active{
+	animation: fadeInRight;
+	animation-duration: 0.3s;
 }
-.opacitys-enter-from,
-.opacitys-leave-to {
-	opacity: 0;
+
+.lightSpeedLeft-enter-active{
+	animation: lightSpeedInLeft;
+	animation-duration: 0.3s;
+}
+.lightSpeedRight-enter-active{
+	animation: lightSpeedInRight;
+	animation-duration: 0.3s;
+}
+
+.zoom-enter-active{
+	animation: zoomIn;
+	animation-duration: 0.3s;
+}
+.zoomUp-enter-active{
+	animation: zoomInUp;
+	animation-duration: 0.3s;
+}
+.zoomDown-enter-active{
+	animation: zoomInDown;
+	animation-duration: 0.3s;
+}
+.zoomLeft-enter-active{
+	animation: zoomInLeft;
+	animation-duration: 0.3s;
+}
+.zoomRight-enter-active{
+	animation: zoomInRight;
+	animation-duration: 0.3s;
+}
+
+.flip-enter-active{
+	animation: flip;
+	animation-duration: 0.3s;
+}
+.flipX-enter-active{
+	animation: flipInX;
+	animation-duration: 0.3s;
+}
+.flipY-enter-active{
+	animation: flipInY;
+	animation-duration: 0.3s;
 }
 
+.backUp-enter-active{
+	animation: backInUp;
+	animation-duration: 0.3s;
+}
+.backDown-enter-active{
+	animation: backInDown;
+	animation-duration: 0.3s;
+}
+.backLeft-enter-active{
+	animation: backInLeft;
+	animation-duration: 0.3s;
+}
+.backRight-enter-active{
+	animation: backInRight;
+	animation-duration: 0.3s;
+}
+
+.bounce-enter-active{
+	animation: bounceIn;
+	animation-duration: 0.3s;
+}
+.bounceUp-enter-active{
+	animation: bounceInUp;
+	animation-duration: 0.3s;
+}
+.bounceDown-enter-active{
+	animation: bounceInDown;
+	animation-duration: 0.3s;
+}
+.bounceLeft-enter-active{
+	animation: bounceInLeft;
+	animation-duration: 0.3s;
+}
+.bounceRight-enter-active{
+	animation: bounceInRight;
+	animation-duration: 0.3s;
+}
+
+// 自定义弹窗动画
+.dialog-fade-enter-active .el-dialog{
+	animation: bounceInDown;
+	animation-duration: 0.3s;
+}
+.dialog-fade-leave-active .el-dialog{
+	animation: bounceOutRight;
+	animation-duration: 0.3s;
+}
+
+
+// .slide-right-enter-active,
+// .slide-right-leave-active,
+// .slide-left-enter-active,
+// .slide-left-leave-active {
+// 	will-change: transform;
+// 	transition: all 0.3s ease;
+// }
+// // slide-right
+// .slide-right-enter-from {
+// 	opacity: 0;
+// 	transform: translateX(-20px);
+// }
+// .slide-right-leave-to {
+// 	opacity: 0;
+// 	transform: translateX(20px);
+// }
+// // slide-left
+// .slide-left-enter-from {
+// 	@extend .slide-right-leave-to;
+// }
+// .slide-left-leave-to {
+// 	@extend .slide-right-enter-from;
+// }
+// // opacitys
+// .opacitys-enter-active,
+// .opacitys-leave-active {
+// 	will-change: transform;
+// 	transition: all 0.3s ease;
+// }
+// .opacitys-enter-from,
+// .opacitys-leave-to {
+// 	opacity: 0;
+// }
+
 /* Breadcrumb 面包屑过渡动画
 ------------------------------- */
 .breadcrumb-enter-active,

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

@@ -1,7 +1,7 @@
 <template>
 	<div class="sys-codeGen-container">
 		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
-			<el-form :model="queryParams" ref="queryForm" :inline="true" v-loading="loading">
+			<el-form :model="queryParams" ref="queryForm" :inline="true">
 				<el-form-item>
 					<el-button type="primary" icon="ele-Plus" @click="openAddDialog">增加</el-button>
 				</el-form-item>