new UI and handle cashing

src/utils/usePrice.ts

@@ -24,6 +24,14 @@ export function useTowDecimal(num: string | number): string | number {
   return formatGroupedPrice(Math.round(+num * 100) / 100, false)
 }
 
+export function formatSignedPercentChange(value: number): string {
+  if (!value) return '0%'
+
+  const formatted = useTowDecimal(Math.abs(value))
+  const prefix = value > 0 ? '+' : '-'
+  return `${prefix}${formatted}%`
+}
+
 export function useFormat(num: string | number, unit = '') {
   return usePrice(Math.abs(+useTowDecimal(num)), true, unit)
 }

src/views/base/home/components/CurrentPrice.vue

@@ -4,23 +4,22 @@
     <div class="w-full items-center flex justify-center">
       <div v-if="price" class="flex gap-1 text-xs items-center">
         <div
-            v-if="percentPriceChanged() !== 0"
-            class="flex flex-row-reverse rounded-lg justify-between items-center gap-2 px-3"
-            :class="percentPriceChanged() >= 0 ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'"
+          v-if="percentChange !== 0"
+          class="price-change-badge"
+          :class="percentChange > 0 ? 'price-change-badge--up' : 'price-change-badge--down'"
         >
-          <div dir="ltr">{{ useTowDecimal(percentPriceChanged()) }}%</div>
-          <div>
-            <Icon
-                :size="15"
-                :icon="percentPriceChanged() < 0 ? 'vuesax-linear:received' : 'vuesax-linear:send'"
-                :color="percentPriceChanged() < 0 ? 'red-600' : 'green-600'"
-            />
-          </div>
+          <Icon
+            :key="displayGoldVal"
+            :size="15"
+            :icon="percentChange > 0 ? 'vuesax-linear:send' : 'vuesax-linear:received'"
+            :color="percentChange > 0 ? 'green-600' : 'red-600'"
+          />
+          <span class="price-change-badge__value">{{ formatSignedPercentChange(percentChange) }}</span>
         </div>
         <Vue3Odometer
-            :value="displayGoldVal"
-            class="o-text !text-xl font-bold"
-            style="font-family: iran-sans; direction: ltr"
+          :value="displayGoldVal"
+          class="o-text !text-xl font-bold"
+          style="font-family: iran-sans; direction: ltr"
         />
         ریال
       </div>
@@ -29,33 +28,55 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { useConfigStore } from '@/store/configStore'
 import { getTradeBuyPrice, lastPrice, percentPriceChanged, price } from '@/utils/price'
 import Vue3Odometer from 'vue3-odometer'
 import 'odometer/themes/odometer-theme-default.css'
-import {useTowDecimal} from "../../../../utils/usePrice";
-import {computed} from "vue";
-
+import { formatSignedPercentChange } from '@/utils/usePrice'
 
 const config = useConfigStore()
 
-// محاسبه درصد تغییرات به صورت reactive
 const percentChange = computed(() => {
   if (!getTradeBuyPrice(lastPrice.value)) return 0
   return percentPriceChanged()
 })
 
-// بررسی بسته بودن بازار
 const isMarketClosed = computed(() => {
   return lastPrice?.value?.goldir === 0 && getTradeBuyPrice(lastPrice.value) === 0
 })
 
-// مقدار نمایشی برای ادومتر (با مدیریت خطا)
 const displayGoldVal = computed(() => {
   if (isMarketClosed.value) return 0
   return getTradeBuyPrice(lastPrice.value)
 })
+</script>
 
-// انیمیشن fade-in
-</script>
+<style scoped>
+.price-change-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.2rem 0.65rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+}
+
+.price-change-badge--up {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.price-change-badge--down {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.price-change-badge__value {
+  direction: ltr;
+  unicode-bidi: isolate;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+}
+</style>

src/views/base/home/desktop/components/DesktopLivePrice.vue

@@ -6,9 +6,13 @@
       <span
         v-if="percentChange !== 0"
         class="dhome-hero-price__delta"
-        :class="percentChange >= 0 ? 'dhome-hero-price__delta--up' : 'dhome-hero-price__delta--down'"
+        :class="percentChange > 0 ? 'dhome-hero-price__delta--up' : 'dhome-hero-price__delta--down'"
       >
-        {{ useTowDecimal(percentChange) }}%
+        <BasicIcon
+          :icon="percentChange > 0 ? 'vuesax-linear:arrow-up-2' : 'vuesax-linear:arrow-down-2'"
+          size="14"
+        />
+        <span class="dhome-hero-price__delta-value">{{ formatSignedPercentChange(percentChange) }}</span>
       </span>
       <Vue3Odometer
         :value="displayGoldVal"
@@ -24,9 +28,10 @@
 import { computed } from 'vue'
 import Vue3Odometer from 'vue3-odometer'
 import 'odometer/themes/odometer-theme-default.css'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { useConfigStore } from '@/store/configStore'
 import { getTradeBuyPrice, lastPrice, percentPriceChanged } from '@/utils/price'
-import { useTowDecimal } from '@/utils/usePrice'
+import { formatSignedPercentChange } from '@/utils/usePrice'
 
 const config = useConfigStore()
 

src/views/base/home/desktop/styles/desktop-home.less

@@ -172,11 +172,17 @@
   &__delta {
     display: inline-flex;
     align-items: center;
+    gap: 4px;
     padding: 4px 8px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 600;
-    direction: ltr;
+
+    &-value {
+      direction: ltr;
+      unicode-bidi: isolate;
+      font-variant-numeric: tabular-nums;
+    }
 
     &--up {
       background: #ecfdf3;