UI Logo替换成SVG

UI/VAP.VUE/public/media/logos/loading.svg

@@ -0,0 +1,65 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 200 150" style="boder:1px solid red">
+   <style>
+      #l1 {
+         animation: animation1 1.5s linear infinite;
+      }
+
+      #l2 {
+         animation: animation1 1.5s linear infinite;
+         animation-delay: 0.75s;
+      }
+
+      @keyframes animation1 {
+         0% {
+            color: rgb(51, 154, 57);
+            opacity: 1;
+         }
+
+         20% {
+            color: rgb(51, 154, 57);
+            opacity: 0.5;
+         }
+
+         30% {
+            color: rgb(14, 111, 177);
+            opacity: 0.5;
+         }
+
+         50% {
+            color: rgb(14, 111, 177);
+            opacity: 1;
+         }
+
+         70% {
+            color: rgb(14, 111, 177);
+            opacity: 0.5;
+         }
+
+         80% {
+            color: rgb(51, 154, 57);
+            opacity: 0.5;
+         }
+
+         100% {
+            color: rgb(51, 154, 57);
+            opacity: 1;
+         }
+      }
+   </style>
+   <symbol id="logo" viewBox="0 0 200 150">
+      <symbol id="l" viewBox="0 0 200 150">
+         <path d="M40 0 h-20 a20 20 0 0 0 -20 20 v110 a20 20 0 0 0 20 20 h136 
+       a3 4 1 0 0 2.25 -5 l-6.75 -15 l-18 -40  q-5 -10 0 -15 l30 -35 h-30 l-30 35  q-5 5 0 15
+       l15.25 35 a3 4 1 0 1 -2.25 5  h-92 a5 5 0 0 1 -5 -5 v-105 q2 -18 18 -20" fill="currentColor" />
+      </symbol>
+      <symbol id="l1" viewBox="0 0 200 150">
+         <use href="#l" />
+      </symbol>
+      <symbol id="l2" viewBox="0 0 200 150">
+         <use href="#l" style="transform: translate(100%,100%) rotate(180deg);" />
+      </symbol>
+      <use href="#l1" style="color: rgb(51, 154, 57);" />
+      <use href="#l2" style="color: rgb(14, 111, 177);" />
+   </symbol>
+   <use href="#logo" width="200" height="150" />
+</svg>

UI/VAP.VUE/public/media/logos/logo-dark.svg

@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 150" style="boder:1px solid red">
+  <defs>
+    <filter id="f1" x="0" y="0" width="100%" height="100%">
+      <feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" />
+      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+    </filter>
+    <filter id="f2" x="0" y="0" width="100%" height="100%">
+      <feOffset result="offOut" in="SourceAlpha" dx="1" dy="1" />
+      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+    </filter>
+    <text id="t1" x="-2" y="65" font-size="75" font-family="STXingKai" fill="rgb(14, 111, 177)" font-weight="600"
+      dominant-baseline="middle" text-anchor="start">中科轼峰</text>
+    <text id="t2" x="10" y="125" font-size="36" font-family="Times New Roman" fill="rgb(51, 154, 57)"
+      font-style="italic" font-weight="500" dominant-baseline="middle" text-anchor="start">Zhong Ke Shi Feng</text>
+  </defs>
+  <symbol id="logo" viewBox="0 0 200 150">
+    <symbol id="l" viewBox="0 0 200 150">
+      <path d="M40 0 h-20 a20 20 0 0 0 -20 20 v110 a20 20 0 0 0 20 20 h136 
+       a3 4 1 0 0 2.25 -5 l-6.75 -15 l-18 -40  q-5 -10 0 -15 l30 -35 h-30 l-30 35  q-5 5 0 15
+       l15.25 35 a3 4 1 0 1 -2.25 5  h-92 a5 5 0 0 1 -5 -5 v-105 q2 -18 18 -20" fill="currentColor" />
+    </symbol>
+    <symbol id="l1" viewBox="0 0 200 150">
+      <use href="#l" />
+    </symbol>
+    <symbol id="l2" viewBox="0 0 200 150">
+      <use href="#l" style="transform: translate(100%,100%) rotate(180deg);" />
+    </symbol>
+    <use href="#l1" style="color: rgb(14, 111, 177);" />
+    <use href="#l2" style="color: rgb(51, 154, 57);" />
+  </symbol>
+  <use href="#logo" width="200" height="150" />
+  <use href="#t1" x="210" y="0" />
+  <use href="#t2" x="210" y="0" />
+</svg>

UI/VAP.VUE/public/media/logos/logo-small.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 200 200" style="boder:1px solid red">
+  <defs>
+    <pattern id="textPattern1" width="1" height="2.5" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
+      <rect x="0" y="0" width="1" height="1.5" fill="rgb(14, 111, 177)"></rect>
+    </pattern>
+    <text id="t1" x="100" y="0" fill="rgb(14, 111, 177)" font-size="30" font-family="STXingKai" font-weight="600"
+      transform="scale(1.25,0.85)" transform-origin="center" dominant-baseline="hanging" text-anchor="middle">中 科 轼
+      峰</text>
+    <text id="t2" x="100" y="0" fill="rgb(51, 154, 57)" font-size="15" font-family="Times New Roman" font-weight="500"
+      transform="scale(1.55,0.9)" transform-origin="center" text-anchor="middle" dominant-baseline="hanging">Zhong Ke
+      Shi Feng</text>
+  </defs>
+  <symbol id="logo" viewBox="0 0 200 150">
+    <symbol id="l" viewBox="0 0 200 150">
+      <path d="M40 0 h-20 a20 20 0 0 0 -20 20 v110 a20 20 0 0 0 20 20 h136 
+       a3 4 1 0 0 2.25 -5 l-6.75 -15 l-18 -40  q-5 -10 0 -15 l30 -35 h-30 l-30 35  q-5 5 0 15
+       l15.25 35 a3 4 1 0 1 -2.25 5  h-92 a5 5 0 0 1 -5 -5 v-105 q2 -18 18 -20" fill="currentColor" />
+    </symbol>
+    <symbol id="l1" viewBox="0 0 200 150">
+      <use href="#l" />
+    </symbol>
+    <symbol id="l2" viewBox="0 0 200 150">
+      <use href="#l" style="transform: translate(100%,100%) rotate(180deg);" />
+    </symbol>
+    <use href="#l1" style="color: rgb(51, 154, 57);" />
+    <use href="#l2" style="color: rgb(14, 111, 177);" />
+  </symbol>
+
+  <use href="#logo" width="200" height="150" />
+  <use href="#t1" x="0" y="145" />
+  <use href="#t2" x="0" y="175" />
+</svg>

UI/VAP.VUE/public/media/logos/logo.svg

@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 150" style="boder:1px solid red">
+  <defs>
+    <filter id="f1" x="0" y="0" width="100%" height="100%">
+      <feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" />
+      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+    </filter>
+    <filter id="f2" x="0" y="0" width="100%" height="100%">
+      <feOffset result="offOut" in="SourceAlpha" dx="1" dy="1" />
+      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+    </filter>
+    <text id="t1" x="-2" y="65" font-size="75" font-family="STXingKai" fill="rgb(51, 154, 57)" font-weight="600"
+      dominant-baseline="middle" text-anchor="start">中科轼峰</text>
+    <text id="t2" x="10" y="125" font-size="36" font-family="Times New Roman" fill="rgb(14, 111, 177)"
+      font-style="italic" font-weight="500" dominant-baseline="middle" text-anchor="start">Zhong Ke Shi Feng</text>
+  </defs>
+  <symbol id="logo" viewBox="0 0 200 150">
+    <symbol id="l" viewBox="0 0 200 150">
+      <path d="M40 0 h-20 a20 20 0 0 0 -20 20 v110 a20 20 0 0 0 20 20 h136 
+       a3 4 1 0 0 2.25 -5 l-6.75 -15 l-18 -40  q-5 -10 0 -15 l30 -35 h-30 l-30 35  q-5 5 0 15
+       l15.25 35 a3 4 1 0 1 -2.25 5  h-92 a5 5 0 0 1 -5 -5 v-105 q2 -18 18 -20" fill="currentColor" />
+    </symbol>
+    <symbol id="l1" viewBox="0 0 200 150">
+      <use href="#l" />
+    </symbol>
+    <symbol id="l2" viewBox="0 0 200 150">
+      <use href="#l" style="transform: translate(100%,100%) rotate(180deg);" />
+    </symbol>
+    <use href="#l1" style="color: rgb(51, 154, 57);" />
+    <use href="#l2" style="color: rgb(14, 111, 177);" />
+  </symbol>
+  <use href="#logo" width="200" height="150" />
+  <use href="#t1" x="210" y="0" />
+  <use href="#t2" x="210" y="0" />
+</svg>

UI/VAP.VUE/src/assets/sass/_loading.scss

@@ -1,22 +1,20 @@
 .el-loading-spinner {
-	background-image: url("/media/logos/default.png");
+	background-image: url("/media/logos/loading.svg");
 	background-repeat: no-repeat;
-	background-size: 135px 34px;
-	height: 50px;
+	background-size: 100px 75px;
+	height: 75px;
 	width: 100%;
 	background-position: center;
 	top: 40%;
 	transition: all 0.3s ease-in-out;
-	animation-name: loadingLogo;
-	animation-duration: 3s;
-	animation-iteration-count: infinite;
+
 	.circular {
 		display: none;
 	}
 	.el-loading-text {
 		display: none;
 		margin-left: 20px;
-		margin-top: 50px;
+		margin-top: 80px;
 		color: #ddd;
 		font-size: 16px;
 		display: flex;
@@ -26,27 +24,6 @@
 		animation-iteration-count: infinite;
 	}
 }
-
-@keyframes loadingLogo {
-	0% {
-		background-image: url("/media/logos/default.png");
-		opacity: 1;
-	}
-	25% {
-		opacity: 0.3;
-	}
-	50% {
-		background-image: url("/media/logos/default-dark.png");
-		opacity: 1;
-	}
-	75% {
-		opacity: 0.3;
-	}
-	100% {
-		background-image: url("/media/logos/default.png");
-		opacity: 1;
-	}
-}
 @keyframes loadingText {
 	0% {
 		opacity: 0.9;

UI/VAP.VUE/src/layouts/main/header/Header.vue

@@ -27,12 +27,12 @@ import Toolbar from "@/layouts/main/toolbar/Toolbar.vue"
 					<img
 						v-if="themeMode === 'light' && layout === 'light-header'"
 						alt="Logo"
-						:src="getAssetPath('media/logos/default.png')"
+						:src="getAssetPath('media/logos/logo.svg')"
 						class="h-20px h-lg-30px app-sidebar-logo-default theme-light-show" />
 					<img
 						v-if="layout === 'dark-header' || (themeMode === 'dark' && layout === 'light-header')"
 						alt="Logo"
-						:src="getAssetPath('media/logos/default-dark.png')"
+						:src="getAssetPath('media/logos/logo-dark.svg')"
 						class="h-20px h-lg-30px app-sidebar-logo-default" />
 				</router-link>
 			</div>
@@ -49,7 +49,7 @@ import Toolbar from "@/layouts/main/toolbar/Toolbar.vue"
 				</div>
 				<div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0">
 					<router-link to="/" class="d-lg-none">
-						<img alt="Logo" :src="getAssetPath('media/logos/default-small.png')" class="h-30px" />
+						<img alt="Logo" :src="getAssetPath('media/logos/logo-small.svg')" class="h-30px" />
 					</router-link>
 				</div>
 			</template>

UI/VAP.VUE/src/layouts/main/sidebar/_SidebarLogo.vue

@@ -35,25 +35,25 @@ onMounted(() => {
 </script>
 
 <template>
-	<div class="app-sidebar-logo px-6" id="vb_app_sidebar_logo">
+	<div class="app-sidebar-logo px-6 justify-content-center" id="vb_app_sidebar_logo">
 		<router-link to="/">
-			<transition-group name="fade">
+			<transition-group name="vb-fade">
 				<img
 					v-if="layout === 'dark-sidebar' || (themeMode === 'dark' && layout === 'light-sidebar')"
 					alt="Logo"
-					:src="getAssetPath('media/logos/default-dark.png')"
-					class="h-45px app-sidebar-logo-default"
+					:src="getAssetPath('media/logos/logo-dark.svg')"
+					class="h-55px app-sidebar-logo-default"
 					key="vb_app_sidebar_logo_dark" />
 				<img
 					v-if="themeMode === 'light' && layout === 'light-sidebar'"
 					alt="Logo"
-					:src="getAssetPath('media/logos/default.png')"
-					class="h-45px app-sidebar-logo-default"
+					:src="getAssetPath('media/logos/logo.svg')"
+					class="h-55px app-sidebar-logo-default"
 					key="vb_app_sidebar_logo" />
 				<img
 					alt="Logo"
-					:src="getAssetPath('media/logos/default-small.png')"
-					class="h-25px app-sidebar-logo-minimize"
+					:src="getAssetPath('media/logos/logo-small.svg')"
+					class="h-35px app-sidebar-logo-minimize"
 					key="vb_app_sidebar_logo_min" />
 			</transition-group>
 		</router-link>

UI/VAP.Vue/index.html

@@ -24,8 +24,8 @@
 		</script>
 		<div id="app"></div>
 		<div id="splash-screen" class="splash-screen">
-			<img src="/media/logos/default-dark.png" class="dark-logo" alt="Vap dark logo" />
-			<img src="/media/logos/default.png" class="light-logo" alt="Vap light logo" />
+			<img src="/media/logos/logo-dark.svg" class="dark-logo" alt="Vap dark logo" />
+			<img src="/media/logos/logo.svg" class="light-logo" alt="Vap light logo" />
 			<span>加载中 ...</span>
 		</div>
 		<script type="module" src="/src/main.ts"></script>