界面样式调整

index.html

@@ -45,6 +45,7 @@
           font-size: 20px;
           font-weight: bold;
           text-align: center;
+          color: #333;
         }
 
         .app-loading .app-loading-logo {
@@ -52,97 +53,91 @@
           margin: 0 auto 15px auto;
         }
 
-        .app-loading .app-loading-item {
+        .app-loading .app-loading-spinner {
           position: relative;
-          display: inline-block;
           width: 60px;
           height: 60px;
-          vertical-align: middle;
+        }
+
+        .app-loading .app-loading-spinner::before,
+        .app-loading .app-loading-spinner::after {
+          content: '';
+          position: absolute;
+          border: 3px solid #1677ff;
           border-radius: 50%;
         }
 
-        .app-loading .app-loading-outter {
+        .app-loading .app-loading-spinner::before {
-          position: absolute;
+          top: 0;
-          width: 100%;
+          left: 0;
-          height: 100%;
+          right: 0;
-          border: 4px solid #2d8cf0;
+          bottom: 0;
-          border-bottom: 0;
+          border-top-color: transparent;
-          border-left-color: transparent;
+          animation: spin 1s linear infinite;
-          border-radius: 50%;
-          animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
         }
 
-        .app-loading .app-loading-inner {
+        .app-loading .app-loading-spinner::after {
-          position: absolute;
+          top: 10px;
-          top: calc(50% - 20px);
+          left: 10px;
-          left: calc(50% - 20px);
+          right: 10px;
+          bottom: 10px;
+          border-bottom-color: transparent;
+          animation: spin 1.5s linear infinite reverse;
+        }
+
+        @keyframes spin {
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+
+        .app-loading .pulse-dot {
+          position: relative;
           width: 40px;
           height: 40px;
-          border: 4px solid #87bdff;
+          margin: 20px auto 0;
-          border-right: 0;
+        }
-          border-top-color: transparent;
+
+        .app-loading .pulse-dot::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 12px;
+          height: 12px;
+          background: #1677ff;
           border-radius: 50%;
-          animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
+          animation: pulse 1.5s ease-in-out infinite;
         }
 
-        @-webkit-keyframes loader-outter {
+        @keyframes pulse {
-          0% {
+          0%, 100% {
-            -webkit-transform: rotate(0deg);
+            transform: translate(-50%, -50%) scale(1);
-            transform: rotate(0deg);
+            opacity: 1;
           }
-
+          50% {
-          100% {
+            transform: translate(-50%, -50%) scale(1.5);
-            -webkit-transform: rotate(360deg);
+            opacity: 0.5;
-            transform: rotate(360deg);
-          }
-        }
-
-        @keyframes loader-outter {
-          0% {
-            -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-          }
-
-          100% {
-            -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-          }
-        }
-
-        @-webkit-keyframes loader-inner {
-          0% {
-            -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-          }
-
-          100% {
-            -webkit-transform: rotate(-360deg);
-            transform: rotate(-360deg);
-          }
-        }
-
-        @keyframes loader-inner {
-          0% {
-            -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-          }
-
-          100% {
-            -webkit-transform: rotate(-360deg);
-            transform: rotate(-360deg);
           }
         }
       </style>
       <div class="app-loading">
         <div class="app-loading-wrap">
           <div class="app-loading-title">
-            <img src="/logo.gif" class="app-loading-logo" alt="Logo" />
+            <div class="app-loading-logo" style="display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; margin: 0 auto 15px auto; background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%); border-radius: 20px; box-shadow: 0 8px 24px rgba(22, 119, 255, 0.3);">
+              <svg viewBox="0 0 1024 1024" width="60" height="60" fill="white">
+                <path d="M512 64L128 256v512l384 192 384-192V256L512 64zm0 72l304 152v448L512 888 208 736V288L512 136z"/>
+                <path d="M288 512h128l64-160 96 288 64-128h128" stroke="white" stroke-width="40" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
             <div class="app-loading-title">%VITE_APP_TITLE%</div>
           </div>
-          <div class="app-loading-item">
+          <div class="app-loading-spinner"></div>
-            <div class="app-loading-outter"></div>
+          <div class="pulse-dot"></div>
-            <div class="app-loading-inner"></div>
-          </div>
         </div>
       </div>
     </div>

src/layout/components/ToolHeader.vue

@@ -63,7 +63,7 @@ export default defineComponent({
         {layout.value !== 'top' ? (
           <div class="h-full flex items-center">
             {hamburger.value && layout.value !== 'cutMenu' ? (
-              <Collapse class="custom-hover" color="#fff"></Collapse>
+              <Collapse class="custom-hover text-white hover:text-white/85"></Collapse>
             ) : undefined}
             {breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
           </div>
@@ -71,20 +71,19 @@ export default defineComponent({
         <div class="h-full flex items-center">
           {hasTenantVisitPermission.value ? <TenantVisit /> : undefined}
           {screenfull.value ? (
-            <Screenfull class="custom-hover" color="#fff"></Screenfull>
+            <Screenfull class="custom-hover text-white hover:text-white/85"></Screenfull>
           ) : undefined}
-          {search.value ? <RouterSearch isModal={false} color="#fff"/> : undefined}
+          {search.value ? <RouterSearch isModal={false} class="text-white hover:text-white/85"/> : undefined}
           {size.value ? (
-            <SizeDropdown class="custom-hover" color="#fff"></SizeDropdown>
+            <SizeDropdown class="custom-hover text-white hover:text-white/85"></SizeDropdown>
           ) : undefined}
           {locale.value ? (
             <LocaleDropdown
-              class="custom-hover"
+              class="custom-hover text-white hover:text-white/85"
-              color="#fff"
             ></LocaleDropdown>
           ) : undefined}
           {message.value ? (
-            <Message class="custom-hover" color="#fff"></Message>
+            <Message class="custom-hover text-white hover:text-white/85"></Message>
           ) : undefined}
           <UserInfo></UserInfo>
         </div>
@@ -100,7 +99,7 @@ $prefix-cls: #{$namespace}-tool-header;
 .#{$prefix-cls} {
   transition: left var(--transition-time-02);
 
-  .custom-hover {
+  :deep(.custom-hover) {
     cursor: pointer;
     transition: all 0.3s;
     border-radius: 4px;
@@ -110,9 +109,5 @@ $prefix-cls: #{$namespace}-tool-header;
       background-color: rgba(255, 255, 255, 0.2);
     }
   }
-
-  :deep(.layout-border__right) {
-    border-right: none !important;
-  }
 }
 </style>