@siact/sime-x-vue 0.0.2

package/dist/style.css

@@ -0,0 +1,797 @@
+@charset "UTF-8";/* --- Design Tokens --- */
+/* --- Main Container --- */
+.voice-status-wrapper[data-v-c9fa6caf] {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 24px;
+  background: rgba(15, 23, 42, 0.85);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 24px;
+  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  max-width: 480px;
+  width: 100%;
+}
+
+/* --- Indicator Section --- */
+.indicator-container[data-v-c9fa6caf] {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ambient-glow[data-v-c9fa6caf] {
+  position: absolute;
+  inset: -20px;
+  border-radius: 50%;
+  opacity: 0;
+  filter: blur(20px);
+  transition: all 0.5s ease;
+}
+.icon-core[data-v-c9fa6caf] {
+  position: relative;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  z-index: 10;
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  overflow: hidden;
+}
+.icon-core .mic-icon[data-v-c9fa6caf] {
+  width: 24px;
+  height: 24px;
+  color: rgba(255, 255, 255, 0.9);
+  transition: all 0.3s ease;
+}
+.icon-core .mic-icon .mic-capsule[data-v-c9fa6caf] {
+  transition: transform 0.2s ease;
+  transform-origin: center center;
+}
+
+/* --- Ripple Effects --- */
+.ripple-layer[data-v-c9fa6caf] {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.ripple[data-v-c9fa6caf] {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  opacity: 0;
+}
+
+/* --- Content Section --- */
+.content-container[data-v-c9fa6caf] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0; /* Prevent flex text overflow */
+  padding-top: 4px;
+}
+.status-header[data-v-c9fa6caf] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.status-dot[data-v-c9fa6caf] {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 8px currentColor;
+  transition: color 0.3s ease;
+}
+.status-text[data-v-c9fa6caf] {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(255, 255, 255, 0.6);
+}
+.text-window[data-v-c9fa6caf] {
+  min-height: 24px;
+  position: relative;
+}
+.transcription-content[data-v-c9fa6caf] {
+  font-size: 16px;
+  line-height: 1.5;
+  color: #fff;
+  font-weight: 500;
+  margin: 0;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+.placeholder-text[data-v-c9fa6caf] {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.3);
+  font-style: italic;
+  margin: 0;
+}
+
+/* --- State: Wake --- */
+.mode-wake[data-v-c9fa6caf] {
+  border-color: rgba(16, 185, 129, 0.3);
+}
+.mode-wake .ambient-glow[data-v-c9fa6caf] {
+  background: #10b981;
+  opacity: 0.2;
+}
+.mode-wake .icon-core[data-v-c9fa6caf] {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
+  border-color: rgba(16, 185, 129, 0.4);
+  box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
+}
+.mode-wake .icon-core .mic-icon[data-v-c9fa6caf] {
+  color: rgb(20.0597014925, 231.9402985075, 161.7313432836);
+}
+.mode-wake .status-dot[data-v-c9fa6caf] {
+  color: #10b981;
+  animation: pulse-dot-c9fa6caf 2s infinite;
+}
+.mode-wake .ripple[data-v-c9fa6caf] {
+  border-color: #10b981;
+  animation: ripple-out-c9fa6caf 3s infinite;
+}
+.mode-wake .ripple.delay-1[data-v-c9fa6caf] {
+  animation-delay: 0s;
+}
+.mode-wake .ripple.delay-2[data-v-c9fa6caf] {
+  animation-delay: 1s;
+}
+.mode-wake .ripple.delay-3[data-v-c9fa6caf] {
+  animation-delay: 2s;
+}
+
+/* --- State: Transcribing --- */
+.mode-transcribing[data-v-c9fa6caf] {
+  border-color: rgba(59, 130, 246, 0.3);
+}
+.mode-transcribing .ambient-glow[data-v-c9fa6caf] {
+  background: #3b82f6;
+  opacity: 0.3;
+  animation: glow-breathe-c9fa6caf 1.5s ease-in-out infinite alternate;
+}
+.mode-transcribing .icon-core[data-v-c9fa6caf] {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
+  border-color: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+  transform: scale(1.1);
+}
+.mode-transcribing .icon-core .mic-icon[data-v-c9fa6caf] {
+  color: #fff;
+}
+.mode-transcribing .icon-core .mic-icon .mic-capsule[data-v-c9fa6caf] {
+  animation: mic-bounce-c9fa6caf 0.6s ease-in-out infinite alternate;
+}
+.mode-transcribing .status-dot[data-v-c9fa6caf] {
+  color: #3b82f6;
+}
+.mode-transcribing .ripple[data-v-c9fa6caf] {
+  border-color: #3b82f6;
+  animation: ripple-rapid-c9fa6caf 1.5s infinite;
+}
+.mode-transcribing .ripple.delay-1[data-v-c9fa6caf] {
+  animation-delay: 0s;
+}
+.mode-transcribing .ripple.delay-2[data-v-c9fa6caf] {
+  animation-delay: 0.3s;
+}
+.mode-transcribing .ripple.delay-3[data-v-c9fa6caf] {
+  animation-delay: 0.6s;
+}
+
+/* --- Animations --- */
+@keyframes ripple-out-c9fa6caf {
+0% {
+    transform: scale(0.8);
+    opacity: 0;
+    border-width: 2px;
+}
+20% {
+    opacity: 0.5;
+}
+100% {
+    transform: scale(2.2);
+    opacity: 0;
+    border-width: 0px;
+}
+}
+@keyframes ripple-rapid-c9fa6caf {
+0% {
+    transform: scale(0.9);
+    opacity: 0;
+}
+50% {
+    opacity: 0.4;
+}
+100% {
+    transform: scale(1.6);
+    opacity: 0;
+}
+}
+@keyframes pulse-dot-c9fa6caf {
+0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+}
+50% {
+    opacity: 0.5;
+    transform: scale(0.8);
+}
+}
+@keyframes glow-breathe-c9fa6caf {
+0% {
+    opacity: 0.2;
+    transform: scale(0.9);
+}
+100% {
+    opacity: 0.4;
+    transform: scale(1.1);
+}
+}
+@keyframes mic-bounce-c9fa6caf {
+0% {
+    transform: scaleY(1);
+}
+100% {
+    transform: scaleY(0.7);
+}
+}
+/* --- Vue Transitions --- */
+.voice-panel-enter-active[data-v-c9fa6caf],
+.voice-panel-leave-active[data-v-c9fa6caf] {
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.voice-panel-enter-from[data-v-c9fa6caf],
+.voice-panel-leave-to[data-v-c9fa6caf] {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+}
+.fade-slide-enter-active[data-v-c9fa6caf],
+.fade-slide-leave-active[data-v-c9fa6caf] {
+  transition: all 0.3s ease;
+}
+.fade-slide-enter-from[data-v-c9fa6caf] {
+  opacity: 0;
+  transform: translateY(10px);
+}
+.fade-slide-leave-to[data-v-c9fa6caf] {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+.execution-bubble[data-v-8244ff0d] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 20px;
+  background: rgba(15, 23, 42, 0.9);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(168, 85, 247, 0.35);
+  border-radius: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px -5px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+/* 文本样式 */
+.exec-text[data-v-8244ff0d] {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+}
+
+/* 三点加载动画 */
+.loading-dots[data-v-8244ff0d] {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 10px;
+}
+.dot[data-v-8244ff0d] {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #c084fc;
+  animation: dot-bounce-8244ff0d 1.4s ease-in-out infinite;
+}
+.dot[data-v-8244ff0d]:nth-child(1) {
+  animation-delay: 0s;
+}
+.dot[data-v-8244ff0d]:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.dot[data-v-8244ff0d]:nth-child(3) {
+  animation-delay: 0.4s;
+}
+@keyframes dot-bounce-8244ff0d {
+0%, 80%, 100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+}
+40% {
+    transform: scale(1);
+    opacity: 1;
+    box-shadow: 0 0 8px rgba(192, 132, 252, 0.6);
+}
+}
+/* Vue 过渡动画 */
+.exec-bubble-enter-active[data-v-8244ff0d] {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.exec-bubble-leave-active[data-v-8244ff0d] {
+  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.exec-bubble-enter-from[data-v-8244ff0d] {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.exec-bubble-leave-to[data-v-8244ff0d] {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.sime-x[data-v-d8f992b0] {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-header: #0f172a;
+  --text-primary: #0f172a;
+  --text-secondary: #64748b;
+  --text-header: #ffffff;
+  --border-color: #e2e8f0;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
+  --accent-color: #3b82f6;
+  --hover-bg: rgba(0, 0, 0, 0.05);
+}
+.sime-x[data-theme=dark][data-v-d8f992b0] {
+  --bg-primary: #1e293b;
+  --bg-secondary: #0f172a;
+  --bg-header: #0f172a;
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-header: #f1f5f9;
+  --border-color: #334155;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
+  --accent-color: #60a5fa;
+  --hover-bg: rgba(255, 255, 255, 0.1);
+}
+.is-hidden[data-v-d8f992b0] {
+  height: 0;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  visibility: hidden !important;
+}
+.assistant-fab[data-v-d8f992b0] {
+  position: relative;
+  cursor: pointer;
+  overflow: visible;
+  filter: drop-shadow(var(--shadow-md));
+  opacity: 1;
+  pointer-events: auto;
+  transition: all 0.3s ease;
+}
+.assistant-fab[data-v-d8f992b0]:hover {
+  transform: scale(1.05);
+}
+.assistant-fab[data-v-d8f992b0]:active {
+  transform: scale(0.95);
+}
+.assistant-fab .voice-status[data-v-d8f992b0] {
+  position: absolute;
+  right: 100%;
+  margin-right: 20px;
+}
+.assistant-fab img[data-v-d8f992b0] {
+  display: block;
+  position: relative;
+  object-fit: contain;
+}
+.assistant-fab .fab-pulse[data-v-d8f992b0] {
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  border: 2px solid var(--accent-color);
+  opacity: 0;
+}
+@keyframes pulse-d8f992b0 {
+0%, 100% {
+    opacity: 0;
+    transform: scale(1);
+}
+50% {
+    opacity: 0.5;
+    transform: scale(1.1);
+}
+}
+.x-dialog-container[data-v-d8f992b0] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  transform: translate(var(--dialog-x), var(--dialog-y));
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  cursor: grab;
+  overflow: hidden;
+  z-index: 1100;
+  opacity: 0;
+  pointer-events: none;
+}
+.x-dialog-container.position-ready[data-v-d8f992b0] {
+  opacity: 1;
+  pointer-events: auto;
+}
+.x-dialog-container[data-v-d8f992b0]:active {
+  cursor: grabbing;
+}
+.x-dialog-container.collapsed .x-dialog-header[data-v-d8f992b0] {
+  border-radius: 16px;
+}
+.x-dialog-container .x-dialog-header[data-v-d8f992b0] {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--bg-header);
+  padding: 12px 16px;
+  cursor: move;
+  user-select: none;
+  border-bottom: 1px solid var(--border-color);
+}
+.x-dialog-container .x-dialog-header .header-left[data-v-d8f992b0] {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.x-dialog-container .x-dialog-header .header-left .logo-icon[data-v-d8f992b0] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  transition: transform 0.2s ease;
+}
+.x-dialog-container .x-dialog-header .header-left .logo-icon .logo[data-v-d8f992b0] {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.x-dialog-container .x-dialog-header .header-left .title[data-v-d8f992b0] {
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--text-header);
+  letter-spacing: -0.01em;
+}
+.x-dialog-container .x-dialog-header .actions[data-v-d8f992b0] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.x-dialog-container .x-dialog-header .actions .action-btn[data-v-d8f992b0] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.2s ease;
+  border-radius: 8px;
+}
+.x-dialog-container .x-dialog-header .actions .action-btn[data-v-d8f992b0]:hover {
+  color: var(--text-header);
+  background: var(--hover-bg);
+  transform: translateY(-1px);
+}
+.x-dialog-container .x-dialog-header .actions .action-btn[data-v-d8f992b0]:active {
+  transform: translateY(0);
+}
+.x-dialog-container .x-dialog-header .actions .action-btn svg[data-v-d8f992b0] {
+  transition: transform 0.2s ease;
+}
+.x-dialog-container .x-dialog-header .actions .action-btn.collapse-btn:hover svg[data-v-d8f992b0] {
+  transform: scale(1.1);
+}
+.x-dialog-container .voice-container[data-v-d8f992b0] {
+  width: 100%;
+  opacity: 1;
+  pointer-events: auto;
+}
+.x-dialog-container .x-dialog-content[data-v-d8f992b0] {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  background: var(--bg-secondary);
+  opacity: 1;
+  pointer-events: auto;
+}
+.x-dialog-container .x-iframe[data-v-d8f992b0] {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+.x-dialog-container .resize-handle[data-v-d8f992b0] {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  cursor: nwse-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  transition: all 0.2s ease;
+  background: linear-gradient(135deg, transparent 50%, var(--bg-primary) 50%);
+  border-bottom-right-radius: 16px;
+  z-index: 10;
+}
+.x-dialog-container .resize-handle[data-v-d8f992b0]:hover {
+  color: var(--accent-color);
+  background: linear-gradient(135deg, transparent 50%, var(--hover-bg) 50%);
+}
+.x-dialog-container .resize-handle svg[data-v-d8f992b0] {
+  width: 16px;
+  height: 16px;
+  transform: rotate(0deg);
+  transition: transform 0.2s ease;
+}
+.x-dialog-container .resize-handle:hover svg[data-v-d8f992b0] {
+  transform: scale(1.2);
+}
+
+/* 语音按钮状态样式 */
+.action-btn.theme-btn[data-v-d8f992b0] {
+  position: relative;
+  transition: all 0.3s ease;
+}
+.action-btn.theme-btn.active[data-v-d8f992b0] {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+.action-btn.theme-btn.listening[data-v-d8f992b0] {
+  animation: pulse-listening-d8f992b0 2s ease-in-out infinite;
+}
+.action-btn.theme-btn.woke[data-v-d8f992b0] {
+  background: rgba(34, 197, 94, 0.2);
+  color: #22c55e;
+  animation: pulse-wake-d8f992b0 0.6s ease-in-out;
+}
+@keyframes pulse-listening-d8f992b0 {
+0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+}
+50% {
+    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
+}
+}
+@keyframes pulse-wake-d8f992b0 {
+0%, 100% {
+    transform: scale(1);
+}
+50% {
+    transform: scale(1.1);
+}
+}
+/* 语音指示器 */
+.voice-indicator[data-v-d8f992b0] {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #3b82f6;
+}
+.action-btn.theme-btn.listening .voice-indicator[data-v-d8f992b0] {
+  animation: blink-d8f992b0 1.5s ease-in-out infinite;
+}
+.action-btn.theme-btn.woke .voice-indicator[data-v-d8f992b0] {
+  background: #22c55e;
+  animation: none;
+}
+@keyframes blink-d8f992b0 {
+0%, 100% {
+    opacity: 1;
+}
+50% {
+    opacity: 0.3;
+}
+}
+/* FAB 头像容器 */
+.fab-avatar-wrapper[data-v-d8f992b0] {
+  position: relative;
+  display: flex; /* 改用 flex 可以消除图片底部的行高间隙 */
+  align-items: center;
+  justify-content: center;
+  width: fit-content; /* 宽度随内容自适应 */
+  margin: 0 auto;
+}
+
+/* 2. 修正图片样式 */
+.fab-avatar-wrapper img[data-v-d8f992b0] {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  /* 移除原本 style 里的 width/height 可能造成的拉伸，保持比例 */
+}
+
+/* 3. 优化徽章定位 */
+.listening-badge[data-v-d8f992b0] {
+  position: absolute;
+  /* 强制定位到容器边缘 */
+  top: 0;
+  right: 0;
+  /* 使用 transform 偏移，让徽章中心点落在图片的右上角顶点上 */
+  transform: translate(30%, -30%);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.75); /* 稍微加深一点 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  /* 继承你原有的动画 */
+  animation: badge-float-d8f992b0 5s ease-in-out infinite;
+  pointer-events: none; /* 防止遮挡头像点击 */
+}
+
+/* 4. 调整声波扩散的基准 */
+.wave[data-v-d8f992b0] {
+  position: absolute;
+  /* 确保声波从徽章中心扩散，而不是从容器左上角 */
+  inset: -2px;
+  border-radius: 50%;
+  border: 2px solid rgba(59, 130, 246, 0.6); /* 声波颜色建议跟主题色一致 */
+  animation: wave-expand-d8f992b0 3s ease-out infinite;
+}
+
+/* 优化后的监听状态徽章 */
+.listening-badge[data-v-d8f992b0] {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.651);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  animation: badge-float-d8f992b0 5s ease-in-out infinite;
+}
+
+/* 徽章浮动动画 */
+@keyframes badge-float-d8f992b0 {
+0%, 100% {
+    transform: translateY(0) scale(1);
+}
+50% {
+    transform: translateY(-2px) scale(1.05);
+}
+}
+/* 声波容器 */
+.listening-waves[data-v-d8f992b0] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 声波动画 */
+.wave[data-v-d8f992b0] {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  animation: wave-expand-d8f992b0 3s ease-out infinite;
+}
+.wave-1[data-v-d8f992b0] {
+  animation-delay: 0s;
+}
+.wave-2[data-v-d8f992b0] {
+  animation-delay: 0.6s;
+}
+.wave-3[data-v-d8f992b0] {
+  animation-delay: 1.2s;
+}
+@keyframes wave-expand-d8f992b0 {
+0% {
+    transform: scale(0.8);
+    opacity: 0.8;
+}
+100% {
+    transform: scale(2.2);
+    opacity: 0;
+}
+}
+/* 麦克风图标 */
+.listening-icon[data-v-d8f992b0] {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  z-index: 1;
+  animation: icon-pulse-d8f992b0 2.5s ease-in-out infinite;
+}
+@keyframes icon-pulse-d8f992b0 {
+0%, 100% {
+    transform: scale(1);
+}
+50% {
+    transform: scale(1.1);
+}
+}
+/* 徽章淡入淡出动画 */
+.indicator-fade-enter-active[data-v-d8f992b0] {
+  transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.indicator-fade-leave-active[data-v-d8f992b0] {
+  transition: all 1s ease;
+}
+.indicator-fade-enter-from[data-v-d8f992b0] {
+  opacity: 0;
+  transform: scale(0.3) rotate(-180deg);
+}
+.indicator-fade-leave-to[data-v-d8f992b0] {
+  opacity: 0;
+  transform: scale(0.5) rotate(180deg);
+}
+
+/* FAB 脉冲效果 */
+.fab-pulse[data-v-d8f992b0] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  pointer-events: none;
+}
+.fab-pulse.active[data-v-d8f992b0] {
+  animation: fab-pulse-d8f992b0 2s ease-in-out infinite;
+}
+@keyframes fab-pulse-d8f992b0 {
+0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+}
+50% {
+    box-shadow: 0 0 0 20px rgba(59, 130, 246, 0);
+}
+}
+/* 深色模式适配 */
+[data-theme=dark] .action-btn.theme-btn.active[data-v-d8f992b0] {
+  background: rgba(59, 130, 246, 0.2);
+}
+[data-theme=dark] .action-btn.theme-btn.woke[data-v-d8f992b0] {
+  background: rgba(34, 197, 94, 0.3);
+}