update loading style

components.d.ts

@@ -13,10 +13,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     ImageViewer: typeof import('./src/components/ImageViewer.vue')['default']
     Loading: typeof import('./src/components/Loading.vue')['default']
-    Message: typeof import('./src/components/Message.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    VanButton: typeof import('vant/es')['Button']
-    VanDialog: typeof import('vant/es')['Dialog']
   }
 }

src/components/Loading.vue

@@ -8,69 +8,74 @@
     }"
     :style="containerStyle"
   >
-    <div class="loading-spinner-wrapper" :style="spinnerWrapperStyle">
+    <div class="loading-card" :class="{ 'loading-card-inline': !fullscreen }">
-      <!-- 旋转圆环样式 -->
+      <span class="loading-ambient loading-ambient-primary"></span>
-      <div v-if="type === 'spinner'" class="loading-spinner" :style="spinnerStyle">
+      <span class="loading-ambient loading-ambient-secondary"></span>
-        <svg class="loading-svg" viewBox="0 0 50 50" :style="svgStyle">
-          <circle
-            class="loading-path"
-            cx="25"
-            cy="25"
-            r="20"
-            fill="none"
-            stroke="currentColor"
-            :stroke-width="strokeWidth"
-            :stroke-linecap="strokeLinecap"
-            stroke-dasharray="94.2 94.2"
-            stroke-dashoffset="94.2"
-          ></circle>
-        </svg>
-      </div>
 
-      <!-- 点状加载样式 -->
+      <div class="loading-spinner-wrapper" :style="spinnerWrapperStyle">
-      <div v-else-if="type === 'dots'" class="loading-dots" :style="dotsContainerStyle">
+        <!-- 旋转圆环样式 -->
-        <div
+        <div v-if="type === 'spinner'" class="loading-spinner" :style="spinnerStyle">
-          v-for="n in 3"
+          <svg class="loading-svg" viewBox="0 0 50 50" :style="svgStyle">
-          :key="n"
+            <circle
-          class="loading-dot"
+              class="loading-path"
-          :style="[
+              cx="25"
-            dotStyle,
+              cy="25"
-            {
+              r="20"
-              animationDelay: `${n * 0.2}s`
+              fill="none"
-            }
+              stroke="currentColor"
-          ]"
+              :stroke-width="strokeWidth"
-        ></div>
+              :stroke-linecap="strokeLinecap"
-      </div>
+              stroke-dasharray="94.2 94.2"
+              stroke-dashoffset="94.2"
+            ></circle>
+          </svg>
+        </div>
 
-      <!-- 脉冲样式 -->
+        <!-- 点状加载样式 -->
-      <div v-else-if="type === 'pulse'" class="loading-pulse" :style="pulseStyle"></div>
+        <div v-else-if="type === 'dots'" class="loading-dots" :style="dotsContainerStyle">
+          <div
+            v-for="n in 3"
+            :key="n"
+            class="loading-dot"
+            :style="[
+              dotStyle,
+              {
+                animationDelay: `${n * 0.2}s`
+              }
+            ]"
+          ></div>
+        </div>
 
-      <!-- 环形样式 -->
+        <!-- 脉冲样式 -->
-      <div v-else-if="type === 'ring'" class="loading-ring" :style="ringStyle">
+        <div v-else-if="type === 'pulse'" class="loading-pulse" :style="pulseStyle"></div>
-        <div class="loading-ring-circle" :style="ringCircleStyle"></div>
-      </div>
 
-      <!-- 默认样式（旋转圆环） -->
+        <!-- 环形样式 -->
-      <div v-else class="loading-spinner" :style="spinnerStyle">
+        <div v-else-if="type === 'ring'" class="loading-ring" :style="ringStyle">
-        <svg class="loading-svg" viewBox="0 0 50 50" :style="svgStyle">
+          <div class="loading-ring-circle" :style="ringCircleStyle"></div>
-          <circle
+        </div>
-            class="loading-path"
-            cx="25"
-            cy="25"
-            r="20"
-            fill="none"
-            stroke="currentColor"
-            :stroke-width="strokeWidth"
-            :stroke-linecap="strokeLinecap"
-            stroke-dasharray="94.2 94.2"
-            stroke-dashoffset="94.2"
-          ></circle>
-        </svg>
-      </div>
 
-      <!-- 加载文本 -->
+        <!-- 默认样式（旋转圆环） -->
-      <div v-if="text" class="loading-text" :style="textStyle">
+        <div v-else class="loading-spinner" :style="spinnerStyle">
-        {{ text }}
+          <svg class="loading-svg" viewBox="0 0 50 50" :style="svgStyle">
+            <circle
+              class="loading-path"
+              cx="25"
+              cy="25"
+              r="20"
+              fill="none"
+              stroke="currentColor"
+              :stroke-width="strokeWidth"
+              :stroke-linecap="strokeLinecap"
+              stroke-dasharray="94.2 94.2"
+              stroke-dashoffset="94.2"
+            ></circle>
+          </svg>
+        </div>
+
+        <!-- 加载文本 -->
+        <div v-if="text" class="loading-text" :style="textStyle">
+          {{ text }}
+        </div>
       </div>
     </div>
   </div>
@@ -110,7 +115,9 @@ const props = defineProps<{
 const containerStyle = computed(() => {
   const style: any = {}
   if (props.fullscreen) {
-    style.backgroundColor = props.background || 'rgba(255, 255, 255, 0.9)'
+    style.background =
+      props.background ||
+      'radial-gradient(circle at 20% 20%, rgba(255,247,249,0.95), rgba(255,236,240,0.72))'
     style.opacity = props.opacity ?? 1
   }
   return style
@@ -118,8 +125,10 @@ const containerStyle = computed(() => {
 
 // 计算spinner包装器样式
 const spinnerWrapperStyle = computed(() => {
+  const color = props.color || '#E8424D'
   return {
-    color: props.color || '#1890ff'
+    color,
+    '--loading-color': color
   }
 })
 
@@ -204,6 +213,13 @@ const textStyle = computed(() => {
 </script>
 
 <style scoped>
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+}
+
 /* 全屏容器样式 */
 .loading-container-fullscreen {
   position: fixed;
@@ -211,29 +227,101 @@ const textStyle = computed(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   z-index: 9999;
+  background: radial-gradient(circle at 30% 20%, rgba(255, 247, 249, 0.95), rgba(255, 236, 240, 0.75));
 }
 
 /* 内联容器样式 */
 .loading-container-inline {
   display: inline-flex;
+  padding: 8px;
+}
+
+.loading-card {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 18px 20px;
+  border-radius: 18px;
+  width: 260px;
+  max-width: min(72vw, 340px);
+  min-width: 220px;
+  aspect-ratio: 3 / 2;
+  background: linear-gradient(135deg, rgba(255, 247, 249, 0.95), rgba(255, 255, 255, 0.9));
+  border: 1px solid rgba(232, 66, 77, 0.12);
+  box-shadow: 0 18px 45px rgba(232, 66, 77, 0.16), 0 4px 12px rgba(232, 66, 77, 0.08);
+}
+
+.loading-card-inline {
+  min-width: auto;
+  padding: 10px 14px;
+  width: auto;
+  max-width: none;
+  aspect-ratio: auto;
+  box-shadow: 0 10px 26px rgba(232, 66, 77, 0.14);
+  border-radius: 14px;
+}
+
+.loading-ambient {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(28px);
+  opacity: 0.65;
+  animation: float 6s ease-in-out infinite alternate;
+}
+
+.loading-ambient-primary {
+  width: 160px;
+  height: 160px;
+  top: -40px;
+  right: -30px;
+  background: radial-gradient(circle, rgba(255, 184, 193, 0.55), rgba(255, 228, 234, 0.15));
+}
+
+.loading-ambient-secondary {
+  width: 140px;
+  height: 140px;
+  bottom: -50px;
+  left: -20px;
+  background: radial-gradient(circle, rgba(255, 221, 230, 0.6), rgba(255, 255, 255, 0.2));
+  animation-delay: 0.8s;
+}
+
+.loading-spinner-wrapper {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
+  gap: 12px;
+  color: var(--loading-color);
 }
 
 /* 旋转圆环样式 */
 .loading-spinner {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
+  filter: drop-shadow(0 8px 18px rgba(232, 66, 77, 0.18));
+}
+
+.loading-spinner::before {
+  content: '';
+  position: absolute;
+  inset: -20%;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, rgba(255, 184, 193, 0.35), rgba(255, 255, 255, 0));
+  animation: pulseGlow 2.4s ease-in-out infinite;
 }
 
 .loading-svg {
   animation: rotate 1.4s linear infinite;
   transform-origin: center center;
+  filter: drop-shadow(0 6px 14px rgba(232, 66, 77, 0.14));
 }
 
 /* 确保SVG中的circle元素也正确居中 */
@@ -243,6 +331,8 @@ const textStyle = computed(() => {
 
 .loading-path {
   animation: dash 1.4s ease-in-out infinite;
+  stroke: currentColor;
+  stroke-linecap: round;
 }
 
 /* 点状加载样式 */
@@ -268,6 +358,7 @@ const textStyle = computed(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 }
 
 .loading-ring-circle {
@@ -277,13 +368,17 @@ const textStyle = computed(() => {
   border-radius: 50%;
   animation: spin 1.4s linear infinite;
   transform-origin: center center;
+  box-shadow: 0 10px 20px rgba(232, 66, 77, 0.14);
 }
 
 /* 加载文本样式 */
 .loading-text {
-  font-size: 14px;
+  font-size: 15px;
   text-align: center;
   white-space: nowrap;
+  font-weight: 600;
+  color: #c3414c;
+  letter-spacing: 0.3px;
 }
 
 /* 动画定义 */
@@ -346,4 +441,28 @@ const textStyle = computed(() => {
     transform: rotate(360deg);
   }
 }
-</style>
+
+@keyframes pulseGlow {
+  0% {
+    transform: scale(0.92);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.05);
+    opacity: 0.9;
+  }
+}
+
+@keyframes float {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-12px);
+  }
+}
+</style>

src/components/loading.ts

@@ -47,11 +47,11 @@ export function showLoading(options: LoadingOptions = {}): LoadingInstance {
   // 默认配置
   const defaultOptions: LoadingOptions = {
     type: 'spinner',
-    size: 40,
+    size: 42,
-    color: '#1890ff',
+    color: '#E8424D',
     fullscreen: true,
     text: '',
-    background: 'rgba(0, 0, 0, 0.3)',
+    background: 'rgba(255, 241, 243, 0.8)',
     opacity: 1,
     strokeWidth: 3,
     strokeLinecap: 'round'
@@ -171,4 +171,4 @@ export default {
   hide: hideLoading,
   showWithText: showLoadingWithText,
   showInline: showInlineLoading
-}
+}