edit panel sms show

src/components/SmsCreditWidget.vue

@@ -1,15 +1,30 @@
 <template>
-  <div v-if="store.visible" class="sms-credit" :class="`sms-credit--${variant}`">
+  <div
+    v-if="store.visible"
+    class="sms-credit"
+    :class="[`sms-credit--${variant}`, { 'sms-credit--label-hint': showLabelHint && isCompactDesktop }]"
+  >
     <div class="sms-credit__info">
-      <span class="sms-credit__label">اعتبار پیامک:</span>
-      <span class="sms-credit__amount" :class="amountClass">
-        {{ formattedBalance }}
-        <span class="sms-credit__unit">ریال</span>
-      </span>
+      <span v-if="!isCompactDesktop" class="sms-credit__label">اعتبار پیامک:</span>
+
+      <Transition name="sms-credit-swap" mode="out-in">
+        <span
+          v-if="isCompactDesktop && showLabelHint"
+          key="hint"
+          class="sms-credit__label-hint"
+        >
+          اعتبار پیامک:
+        </span>
+        <span v-else key="amount" class="sms-credit__amount" :class="amountClass">
+          {{ formattedBalance }}
+          <span class="sms-credit__unit">ریال</span>
+        </span>
+      </Transition>
     </div>
+
     <button type="button" class="sms-credit__charge" @click="modalVisible = true">
       <Icon icon="vuesax-linear:wallet-add" :size="15" />
-      <span>شارژ</span>
+      <span class="sms-credit__charge-label">شارژ</span>
     </button>
 
     <BasicModal
@@ -70,25 +85,40 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { useClipboard } from '@vueuse/core'
+import { useClipboard, useWindowSize } from '@vueuse/core'
 import { message } from 'ant-design-vue'
 import BasicModal from '@/components/BasicModal.vue'
 import BaseButton from '@core/components/BaseButton'
 import Icon from '@core/components/BaseIcon/src/Icon.vue'
 import { useSmsWalletStore } from '@/store/smsWalletStore'
 
-withDefaults(defineProps<{ variant?: 'desktop' | 'mobile' }>(), {
+const props = withDefaults(defineProps<{ variant?: 'desktop' | 'mobile' }>(), {
   variant: 'desktop'
 })
 
+const COMPACT_BREAKPOINT = 1280
+const LABEL_HINT_INTERVAL_MS = 30_000
+const LABEL_HINT_FADE_MS = 500
+const LABEL_HINT_HOLD_MS = 4_000
+const LABEL_HINT_DURATION_MS = LABEL_HINT_FADE_MS + LABEL_HINT_HOLD_MS
+
 const store = useSmsWalletStore()
 const route = useRoute()
 const modalVisible = ref(false)
+const showLabelHint = ref(false)
+const { width: windowWidth } = useWindowSize()
 
 const { copy, isSupported } = useClipboard()
 
+let hintIntervalId: ReturnType<typeof setInterval> | undefined
+let hintEndTimeoutId: ReturnType<typeof setTimeout> | undefined
+
+const isCompactDesktop = computed(
+  () => props.variant === 'desktop' && windowWidth.value < COMPACT_BREAKPOINT
+)
+
 const deposit = computed(() => store.deposit)
 const depositNote = computed(
   () =>
@@ -139,6 +169,53 @@ watch(
   () => route.fullPath,
   () => store.refresh()
 )
+
+function stopLabelHintTimers() {
+  if (hintIntervalId) {
+    clearInterval(hintIntervalId)
+    hintIntervalId = undefined
+  }
+  if (hintEndTimeoutId) {
+    clearTimeout(hintEndTimeoutId)
+    hintEndTimeoutId = undefined
+  }
+  showLabelHint.value = false
+}
+
+function playLabelHint() {
+  if (!isCompactDesktop.value || modalVisible.value || showLabelHint.value) return
+
+  showLabelHint.value = true
+  hintEndTimeoutId = setTimeout(() => {
+    showLabelHint.value = false
+    hintEndTimeoutId = undefined
+  }, LABEL_HINT_DURATION_MS)
+}
+
+function startLabelHintLoop() {
+  stopLabelHintTimers()
+  if (!isCompactDesktop.value) return
+
+  hintIntervalId = setInterval(playLabelHint, LABEL_HINT_INTERVAL_MS)
+}
+
+watch(isCompactDesktop, (enabled) => {
+  if (enabled) {
+    startLabelHintLoop()
+    return
+  }
+  stopLabelHintTimers()
+})
+
+watch(modalVisible, (open) => {
+  if (open) showLabelHint.value = false
+})
+
+onMounted(() => {
+  if (isCompactDesktop.value) startLabelHintLoop()
+})
+
+onUnmounted(stopLabelHintTimers)
 </script>
 
 <style scoped lang="less">
@@ -151,17 +228,20 @@ watch(
 
 .sms-credit--desktop {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   column-gap: 0.5rem;
   padding: 0.375rem 0.5rem;
   line-height: 1.2;
+  max-width: 100%;
+  min-width: 0;
 }
 
 .sms-credit--desktop .sms-credit__info {
   justify-self: start;
   align-self: center;
   align-items: center;
+  min-width: 0;
 }
 
 .sms-credit--desktop .sms-credit__charge {
@@ -177,6 +257,7 @@ watch(
   gap: 0.35rem;
   line-height: 1.2;
   min-width: 0;
+  min-height: 1.2em;
 }
 
 .sms-credit__label {
@@ -186,11 +267,43 @@ watch(
   white-space: nowrap;
 }
 
+.sms-credit-swap-enter-active,
+.sms-credit-swap-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.sms-credit-swap-enter-from,
+.sms-credit-swap-leave-to {
+  opacity: 0;
+}
+
+.sms-credit__label-hint {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  white-space: nowrap;
+  animation: sms-credit-label-blink 1.15s ease-in-out infinite;
+  animation-delay: 0.5s;
+}
+
+@keyframes sms-credit-label-blink {
+  0%,
+  100% {
+    color: #047857;
+  }
+
+  50% {
+    color: #b91c1c;
+  }
+}
+
 .sms-credit__amount {
   font-size: 0.875rem;
   font-weight: 700;
   white-space: nowrap;
   letter-spacing: -0.01em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 .sms-credit__unit {
@@ -267,7 +380,6 @@ watch(
   font-size: 0.7rem;
 }
 
-/* modal content */
 .sms-charge-modal {
   display: flex;
   flex-direction: column;
@@ -349,6 +461,45 @@ watch(
   font-weight: 700;
   color: var(--admin-text);
 }
+
+@media (max-width: 1279px) {
+  .sms-credit--desktop {
+    column-gap: 0.35rem;
+    padding: 0.3rem 0.45rem;
+  }
+}
+
+@media (max-width: 1279px) and (prefers-reduced-motion: reduce) {
+  .sms-credit-swap-enter-active,
+  .sms-credit-swap-leave-active {
+    transition-duration: 0.15s;
+  }
+
+  .sms-credit__label-hint {
+    animation: none;
+    animation-delay: 0;
+    color: var(--admin-text-secondary);
+  }
+}
+
+@media (max-width: 1099px) {
+  .sms-credit--desktop .sms-credit__charge-label {
+    display: none;
+  }
+
+  .sms-credit--desktop .sms-credit__charge {
+    padding: 0.25rem;
+    gap: 0;
+  }
+
+  .sms-credit--desktop .sms-credit__amount {
+    font-size: 0.8125rem;
+  }
+
+  .sms-credit--desktop .sms-credit__label-hint {
+    font-size: 0.8125rem;
+  }
+}
 </style>
 
 <style lang="less">
@@ -364,5 +515,20 @@ html.is-dark {
   .sms-credit__amount--danger {
     color: #fda4af;
   }
+
+  .sms-credit__label-hint {
+    animation-name: sms-credit-label-blink-dark;
+  }
+
+  @keyframes sms-credit-label-blink-dark {
+    0%,
+    100% {
+      color: #6ee7b7;
+    }
+
+    50% {
+      color: #fda4af;
+    }
+  }
 }
 </style>