From 663df81099b0ac365bbc2f0d48b35a3b7a2428a8 Mon Sep 17 00:00:00 2001
From: zoujing <zoujing@gogpay.cn>
Date: Tue, 2 Sep 2025 17:02:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=90=9E=E4=BA=86=E4=B8=80=E4=B8=AAloa?=
 =?UTF-8?q?ding=20=E4=B8=8A=E5=8E=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/chat/ChatCardAI.vue         |   8 +-
 pages/loading/loading.vue         |  23 +++
 pages/loading/styles/loading.scss | 281 ++++++++++++++++++++++++++++++
 3 files changed, 309 insertions(+), 3 deletions(-)
 create mode 100644 pages/loading/loading.vue
 create mode 100644 pages/loading/styles/loading.scss

diff --git a/pages/chat/ChatCardAI.vue b/pages/chat/ChatCardAI.vue
index 95b8184..0b1cce1 100644
--- a/pages/chat/ChatCardAI.vue
+++ b/pages/chat/ChatCardAI.vue
@@ -2,11 +2,12 @@
   <view class="container">
     <view class="chat-ai">
       <view class="loading-container">
-        <image
+        <!-- <image
           v-if="isLoading"
           class="loading-img"
           src="/static/msg_loading.svg"
-        />
+        /> -->
+        <loading v-if="isLoading" />
         <ChatMarkdown :key="textKey" :text="processedText" />
       </view>
       <slot name="content"></slot>
@@ -18,6 +19,7 @@
 <script setup>
 import { defineProps, computed, ref, watch } from "vue";
 import ChatMarkdown from "./ChatMarkdown.vue";
+import loading from "@/pages/loading/loading.vue";
 
 const props = defineProps({
   text: {
@@ -73,7 +75,7 @@ watch(
     margin: 6px 12px;
     padding: 0 12px;
     max-width: 100%; // ✅ 限制最大宽度
-    min-width: 90px;
+    min-width: 100px;
     background: rgba(255, 255, 255, 0.4);
     box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
     border-radius: 4px 20px 20px 20px;
diff --git a/pages/loading/loading.vue b/pages/loading/loading.vue
new file mode 100644
index 0000000..ae42db5
--- /dev/null
+++ b/pages/loading/loading.vue
@@ -0,0 +1,23 @@
+<template>
+  <view class="ai">
+    <view class="container">
+      <view class="c c4"></view>
+      <view class="c c1"></view>
+      <view class="c c2"></view>
+      <view class="c c3"></view>
+
+      <view class="rings"></view>
+    </view>
+
+    <view class="glass"></view>
+  </view>
+
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+@import "styles/loading.scss";
+</style>
diff --git a/pages/loading/styles/loading.scss b/pages/loading/styles/loading.scss
new file mode 100644
index 0000000..6583709
--- /dev/null
+++ b/pages/loading/styles/loading.scss
@@ -0,0 +1,281 @@
+@property --a {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0deg;
+}
+
+@property --l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --y {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --o {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
+
+.ai {
+  --s: 32px;
+  // --p: calc(var(--s) / 4);
+  width: var(--s);
+  aspect-ratio: 1;
+  --bg-color: color-mix(in srgb, #7b7bf4, transparent 90%);
+  background: radial-gradient(
+      60% 75% at center,
+      var(--bg-color) 50%,
+      transparent 50%
+    ),
+    radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%);
+  padding: var(--p);
+  margin-right: 8px;
+  display: grid;
+  place-items: center;
+  position: relative;
+  border-radius: 50%;
+  transform: scale(1.0);
+}
+
+$count: 4;
+:root {
+  --count: #{$count};
+  --radius: 6vmin;
+}
+
+@keyframes ai {
+  from {
+    --a: 360deg;
+    --l: 0.35;
+    --o: 1;
+  }
+
+  30% {
+    --l: 1.5;
+  }
+
+  70% {
+    --o: 0.4;
+    --l: 0.05;
+  }
+
+  98% {
+    --o: 0.7;
+  }
+
+  to {
+    --a: 0deg;
+    --l: 0.35;
+    --o: 1;
+  }
+}
+
+.c {
+  opacity: 0.9;
+  position: absolute;
+  width: 10vmin;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  --offset-per-item: calc(360deg / var(--count));
+  --current-angle-offset: calc(var(--offset-per-item) * var(--i) + var(--a));
+  translate: calc(
+      cos(var(--current-angle-offset)) * var(--radius) + var(--x, 0)
+    )
+    calc(sin(var(--current-angle-offset)) * var(--radius) * -1);
+  scale: calc(0.6 + var(--l));
+  animation: ai 5.5s cubic-bezier(0.45, -0.35, 0.16, 1.5) infinite;
+  transition: opacity 0.3s linear;
+  opacity: var(--o, 1);
+  @for $i from 0 through $count {
+    &:nth-child(#{$i + 1}) {
+      --i: #{$i};
+    }
+  }
+}
+
+.c1 {
+  background: #79e3ee;
+  background: radial-gradient(50% 50% at center, #79e3ee, #e7e7fb);
+  background: radial-gradient(50% 50% at center, #c979ee, #74bcd6);
+
+  --x: 1vmin;
+  width: 16vmin;
+  animation-timing-function: cubic-bezier(0.12, 0.32, 0.68, 0.24);
+}
+
+.c2 {
+  background: radial-gradient(50% 50% at center, #ef788c, #e7e7fb);
+  width: 15vmin;
+}
+
+.c3 {
+  background: radial-gradient(50% 50% at center, #eb7fc6, transparent);
+  width: 5vmin;
+  opacity: 0.6;
+  --x: -1vmin;
+}
+
+.c4 {
+  background: #6d67c8;
+  animation-timing-function: cubic-bezier(0.39, -0.03, 0.75, 0.47);
+}
+
+.container {
+  overflow: hidden;
+  background: #b6a9f8;
+  width: 100%;
+  border-radius: 50%;
+  aspect-ratio: 1;
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+
+.glass {
+  overflow: hidden;
+  position: absolute;
+  --w: 0.5vmin;
+  inset: calc(var(--s) - var(--s));
+  border-radius: 50%;
+  backdrop-filter: blur(1.3vmin);
+  box-shadow: 0 0 8vmin color-mix(in srgb, black, transparent 70%);
+  background: radial-gradient(
+    10vmin at 70% 30%,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+
+  // // lines
+  // &:after {
+  //   content: "";
+  //   position: absolute;
+  //   inset: 0;
+  //   --c: rgba(255, 255, 255, 0.03);
+  //   --w: 0.0625rem;
+  //   --g: 0.1875rem;
+
+  //   background: repeating-linear-gradient(
+  //     var(--c),
+  //     var(--c),
+  //     var(--w),
+  //     transparent var(--w),
+  //     transparent calc(var(--w) + var(--g))
+  //   );
+  //   border-radius: inherit;
+  //   border: 1vmin rgba(255, 255, 255, 0.1) solid;
+  // }
+}
+
+@property --value {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0deg;
+}
+
+@property --width-ratio {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --scale {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+:root {
+  --width: 1vmin;
+  --duration: 8s;
+}
+
+.rings {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  position: absolute;
+  inset: 0;
+  perspective: 11rem;
+  opacity: .9;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 0, 0, 1);
+    border-radius: 50%;
+    --width-ratio: 1;
+    border: calc(var(--width) * var(--width-ratio)) solid transparent;
+    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+    background: linear-gradient(
+      white,
+      blue,
+      magenta,
+      violet,
+      lightyellow) border-box;
+    mask-composite: exclude;
+    animation: ring var(--duration) ease-in-out infinite;
+    --start: 180deg;
+    --value: var(--start);
+    --scale: 1;
+    transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))
+      scale(var(--scale));
+  }
+
+  &:before {
+    --start: 180deg;
+  }
+
+  &:after {
+    --start: 90deg;
+  }
+
+  > .rings {
+    &:before {
+      --start: 360deg;
+    }
+
+    &:after {
+      --start: 270deg;
+    }
+  }
+}
+
+@keyframes ring {
+  from {
+    --value: var(--start);
+    --scale: 1;
+  }
+  50% {
+    --scale: 1.2;
+    --width-ratio: 1.5;
+  }
+  70% {
+    --scale: 1;
+    --value: calc(var(--start) + 180deg);
+    --width-ratio: 1;
+  }
+
+  80% {
+    --scale: 1.2;
+    --width-ratio: 1.5;
+  }
+
+  to {
+    --value: calc(var(--start) + 360deg);
+    --scale: 1;
+    --width-ratio: 1;
+  }
+}
+
+