fix ذشزنلقخعدی

2026-06-23 16:02:41 +03:30
parent 29c58c4202
commit ac28eda09f
29 changed files with 624 additions and 167 deletions
@@ -17,23 +17,23 @@
        >
          <BasicIcon icon="vuesax-linear:info-circle" size="18" :color="iconColor" />
        </button>
+      </div>
+      <div
+        v-if="openRowId === row.id"
+        class="boursecu-assets__popup"
+        @click.stop
+      >
        <div
-          v-if="openRowId === row.id"
-          class="boursecu-assets__popup"
-          @click.stop
+          v-for="line in row.popupLines"
+          :key="line.label"
+          class="boursecu-assets__popup-line"
+          :class="{
+            'boursecu-assets__popup-line--profit': line.tone === 'profit',
+            'boursecu-assets__popup-line--loss': line.tone === 'loss',
+          }"
        >
-          <div
-            v-for="line in row.popupLines"
-            :key="line.label"
-            class="boursecu-assets__popup-line"
-            :class="{
-              'boursecu-assets__popup-line--profit': line.tone === 'profit',
-              'boursecu-assets__popup-line--loss': line.tone === 'loss',
-            }"
-          >
-            <span class="boursecu-assets__popup-label">{{ line.label }}</span>
-            <span class="boursecu-assets__popup-value">{{ line.value }}</span>
-          </div>
+          <span class="boursecu-assets__popup-label">{{ line.label }}</span>
+          <span class="boursecu-assets__popup-value">{{ line.value }}</span>
        </div>
      </div>
    </div>
@@ -86,6 +86,7 @@ onClickOutside(rootRef, () => {
 }

 .boursecu-assets__row {
+  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -122,9 +123,12 @@ onClickOutside(rootRef, () => {
 .boursecu-assets__popup {
  position: absolute;
  top: calc(100% + 8px);
-  right: 0;
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
  z-index: 40;
-  min-width: min(18rem, 78vw);
+  width: min(18rem, calc(100vw - 2rem));
+  max-width: calc(100vw - 2rem);
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
@@ -177,9 +181,11 @@ onClickOutside(rootRef, () => {
  }

  .boursecu-assets__popup {
-    right: auto;
    left: 0;
-    min-width: 20rem;
+    right: auto;
+    transform: none;
+    width: min(20rem, calc(100% - 1rem));
+    max-width: 20rem;
  }
 }
 </style>
@@ -1,29 +1,47 @@
 <template>
-  <div class="w-full relative mt-2 border-gray-200 border-1 rounded-lg py-3 flex flex-col justify-center home_appear_fade_in">
-    <div class="text-gray-600 text-[12px] ml-2 w-full text-center">قیمت خرید از {{ config.config.name_fa }}</div>
-    <div class="w-full items-center flex justify-center">
-      <div v-if="price" class="flex gap-1 text-xs items-center">
-        <div
-          v-if="percentChange !== 0"
-          class="price-change-badge"
-          :class="percentChange > 0 ? 'price-change-badge--up' : 'price-change-badge--down'"
-        >
-          <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
+    class="w-full relative mt-2 rounded-lg py-3 flex flex-col justify-center home_appear_fade_in transition-colors duration-300"
+    :class="containerClass"
+  >
+    <template v-if="isBoursecu && showStoreClosed">
+      <div class="boursecu-closed-box">
+        <div class="boursecu-closed-box__icon-wrap">
+          <Icon icon="vuesax-linear:lock" size="22" color="#ffffff" />
        </div>
-        <Vue3Odometer
-          :value="displayGoldVal"
-          class="o-text !text-xl font-bold"
-          style="font-family: iran-sans; direction: ltr"
-        />
-        ریال
+        <div class="boursecu-closed-box__title">فروشگاه بسته است</div>
+        <div class="boursecu-closed-box__hint">{{ storeClosedHint }}</div>
      </div>
-    </div>
+    </template>
+
+    <template v-else>
+      <div class="price-label" :class="isBoursecu ? 'price-label--boursecu' : 'text-gray-600 text-[12px] ml-2 w-full text-center'">
+        {{ priceLabel }}
+      </div>
+      <div class="w-full items-center flex justify-center">
+        <div v-if="price" class="flex gap-1 text-xs items-center">
+          <div
+            v-if="percentChange !== 0"
+            class="price-change-badge"
+            :class="percentChange > 0 ? 'price-change-badge--up' : 'price-change-badge--down'"
+          >
+            <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"
+            :class="isBoursecu ? 'price-odometer--boursecu' : ''"
+            style="font-family: iran-sans; direction: ltr"
+          />
+          <span :class="isBoursecu ? 'price-unit--boursecu' : ''">ریال</span>
+        </div>
+      </div>
+    </template>
  </div>
 </template>

@@ -31,29 +49,128 @@
 import { computed } from 'vue'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { useConfigStore } from '@/store/configStore'
+import { useUserStore } from '@/store/userStore'
+import { isBoursecuProject } from '@/utils/config'
 import { getTradeBuyPrice, lastPrice, percentPriceChanged, price } from '@/utils/price'
+import { getStoreClosedMessage, isStoreClosed } from '@/utils/storeHours'
 import Vue3Odometer from 'vue3-odometer'
 import 'odometer/themes/odometer-theme-default.css'
 import { formatSignedPercentChange } from '@/utils/usePrice'

 const config = useConfigStore()
+const userStore = useUserStore()
+const isBoursecu = isBoursecuProject()
+
+const priceLabel = computed(() =>
+  isBoursecu ? 'قیمت لحظه‌ای کاتد مس' : `قیمت خرید از ${config.config.name_fa}`
+)
+
+const showStoreClosed = computed(() => {
+  if (isBoursecu) {
+    return isStoreClosed()
+  }
+  return lastPrice?.value?.goldir === 0 && getTradeBuyPrice(lastPrice.value) === 0
+})
+
+const storeClosedHint = computed(() => {
+  const custom = userStore.getValueByKey('closed_message')
+  if (typeof custom === 'string' && custom.trim()) {
+    return custom.replace(/<[^>]*>/g, '').trim()
+  }
+  return getStoreClosedMessage()
+})
+
+const containerClass = computed(() => {
+  if (!isBoursecu) {
+    return 'border-gray-200 border-1'
+  }
+  if (showStoreClosed.value) {
+    return 'boursecu-price-box boursecu-price-box--closed'
+  }
+  return 'boursecu-price-box boursecu-price-box--open'
+})

 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
+  if (showStoreClosed.value) return 0
  return getTradeBuyPrice(lastPrice.value)
 })
+
+void price
 </script>

 <style scoped>
+.boursecu-price-box {
+  border: none;
+  overflow: hidden;
+}
+
+.boursecu-price-box--open {
+  background: linear-gradient(135deg, #c98a4a 0%, #a86528 100%);
+  box-shadow: 0 4px 14px rgba(168, 101, 40, 0.28);
+}
+
+.boursecu-price-box--closed {
+  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+  box-shadow: 0 4px 14px rgba(45, 55, 72, 0.22);
+  min-height: 88px;
+}
+
+.price-label--boursecu {
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 12px;
+  font-weight: 600;
+  width: 100%;
+  text-align: center;
+}
+
+.price-odometer--boursecu {
+  color: #ffffff !important;
+}
+
+.price-unit--boursecu {
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 500;
+}
+
+.boursecu-closed-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  text-align: center;
+}
+
+.boursecu-closed-box__icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  margin-bottom: 2px;
+}
+
+.boursecu-closed-box__title {
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.boursecu-closed-box__hint {
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 11px;
+  line-height: 1.6;
+  max-width: 280px;
+}
+
 .price-change-badge {
  display: inline-flex;
  align-items: center;
@@ -25,6 +25,14 @@
        >
          مفتول مس
        </button>
+        <button
+          type="button"
+          class="chart-metal-segment__item"
+          :class="{ 'chart-metal-segment__item--active': selectedMetal === 'shamsh' }"
+          @click="emit('update:selectedMetal', 'shamsh')"
+        >
+          شمش مس
+        </button>
      </div>
      <a-radio-group v-model:value="selectedValue" button-style="solid" class="chart-timeline-group">
        <a-radio-button value="DAILY" @click="handleUpdate('DAILY')">24 ساعت اخیر</a-radio-button>
@@ -50,7 +58,7 @@
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useConfigStore } from '@/store/configStore'
 import { usePrice } from '@/utils/usePrice'
-import { getProjectFontFamily } from '@/utils/config'
+import { getProjectFontFamily, getProjectPrimaryColor } from '@/utils/config'
 import {
  computeKatodMesVisualYBounds,
  prepareKatodMesChartPoints,
@@ -100,7 +108,7 @@ const emit = defineEmits<{

 const config = useConfigStore()
 const settingsStore = useSettingsStore()
-const { maftolChartRatio } = usePriceChart()
+const { selectedMetalChartRatio } = usePriceChart()
 const chartContainerRef = ref<HTMLElement | null>(null)
 const chartMounted = ref(false)
 const selectedValue = ref(props.chartSelection)
@@ -126,7 +134,7 @@ const katodDayRange = computed(() => {
    price: price.value,
    metal: props.selectedMetal,
    isBoursecuLayout: true,
-    maftolRatio: maftolChartRatio.value,
+    metalRatio: selectedMetalChartRatio.value,
  })
 })
 const displayChartSeries = computed(() => {
@@ -287,7 +295,7 @@ const chartOptions = computed(() => {
          }),
      style: { fontFamily },
    },
-    colors: [config.config.color],
+    colors: [getProjectPrimaryColor() ?? config.config?.color ?? '#2178b5'],
    fill: {
      type: 'gradient',
      gradient: {
@@ -324,8 +332,8 @@ const handleUpdate = (timeline: string) => {
 .chart-metal-segment__item {
  appearance: none;
  cursor: pointer;
-  min-width: 6.5rem;
-  padding: 0.4rem 0.75rem;
+  min-width: 5.5rem;
+  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: transparent;
@@ -46,7 +46,7 @@ withDefaults(
  }
 )

-const { selectedChartMetal, maftolChartRatio } = usePriceChart()
+const { selectedChartMetal, selectedMetalChartRatio } = usePriceChart()
 const isBoursecuLayout = computed(() => getHomeLayoutId() === 'boursecu')

 const rangePrices = computed(() =>
@@ -54,7 +54,7 @@ const rangePrices = computed(() =>
    price: price.value,
    metal: selectedChartMetal.value,
    isBoursecuLayout: isBoursecuLayout.value,
-    maftolRatio: maftolChartRatio.value,
+    metalRatio: selectedMetalChartRatio.value,
  })
 )