ui changes

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

@@ -16,9 +16,21 @@
         'portfolio-overview__profit--down': profitTone === 'loss',
       }"
     >
-      <span class="portfolio-overview__profit-amount">{{ profitText }}</span>
-      <span v-if="profitPercent" class="portfolio-overview__profit-percent">{{ profitPercent }}</span>
-      <span class="portfolio-overview__profit-hint">سود/زیان تحقق‌نیافته طلا</span>
+      <div class="portfolio-overview__profit-main">
+        <span class="portfolio-overview__profit-amount">{{ profitText }}</span>
+        <span v-if="profitPercent" class="portfolio-overview__profit-percent">{{ profitPercent }}</span>
+      </div>
+      <div class="portfolio-overview__profit-label">
+        <span class="portfolio-overview__profit-hint">سود/زیان تحقق‌نیافته طلا</span>
+        <button
+          type="button"
+          class="portfolio-overview__profit-info"
+          aria-label="اطلاعات بیشتر"
+          @click="openProfitInfo"
+        >
+          <BasicIcon icon="vuesax-linear:info-circle" size="14" color="tertiary" />
+        </button>
+      </div>
     </div>
 
     <div class="portfolio-overview__grid">
@@ -36,17 +48,16 @@
       </article>
     </div>
 
-    <p v-if="hasProfitInsight && averageBuyPrice" class="portfolio-overview__footnote">
-      بر اساس میانگین خرید {{ usePriceWithoutType(averageBuyPrice) }} ریال و قیمت فعلی
-      {{ usePriceWithoutType(liveGoldPrice) }} ریال
-    </p>
   </section>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, h } from 'vue'
+import { Modal } from 'ant-design-vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import {
+  formatPortfolioProfitInfoText,
   formatPortfolioProfitLabel,
   formatPortfolioProfitPercent,
   formatPortfolioProfitText,
@@ -79,8 +90,6 @@ const metalRial = computed(() => {
   return resolveAssetsRialValue(assetsSummary.value, getTradeBuyPrice(lastPrice.value))
 })
 const goldWeight = computed(() => Number(portfolio.value?.gold_weight ?? 0))
-const averageBuyPrice = computed(() => portfolio.value?.average_buy_price ?? null)
-const liveGoldPrice = computed(() => Number(portfolio.value?.live_gold_price ?? 0))
 
 const hasProfitInsight = computed(() => portfolio.value?.unrealized_profit_rial != null)
 const profitTone = computed(() => formatPortfolioProfitLabel(portfolio.value?.unrealized_profit_rial))
@@ -89,6 +98,33 @@ const profitPercent = computed(() =>
   formatPortfolioProfitPercent(portfolio.value?.unrealized_profit_percent)
 )
 
+function renderModalLines(text: string) {
+  return h(
+    'div',
+    { style: { lineHeight: '1.9' } },
+    text.split('\n').map((line, index) =>
+      h(
+        'div',
+        { key: index, style: index > 0 ? { marginTop: '6px' } : undefined },
+        line
+      )
+    )
+  )
+}
+
+function openProfitInfo() {
+  const p = portfolio.value
+  if (!p) return
+
+  Modal.confirm({
+    title: 'سود/زیان تحقق‌نیافته طلا',
+    content: renderModalLines(formatPortfolioProfitInfoText(p, weightUnit.value)),
+    okText: 'متوجه شدم',
+    centered: true,
+    cancelButtonProps: { style: { display: 'none' } },
+  })
+}
+
 const rootClass = computed(() => [
   'portfolio-overview',
   `portfolio-overview--${props.variant}`,
@@ -146,17 +182,46 @@ const rootClass = computed(() => [
 
 .portfolio-overview__profit {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-radius: 10px;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border-radius: 12px;
   margin-bottom: 12px;
   background: rgba(255, 255, 255, 0.12);
   font-size: 13px;
   font-weight: 700;
 }
 
+.portfolio-overview__profit-main {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.portfolio-overview__profit-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.portfolio-overview__profit-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  line-height: 0;
+  opacity: 0.85;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 .portfolio-overview--desktop .portfolio-overview__profit {
   background: #f9fafb;
 }
@@ -244,16 +309,4 @@ const rootClass = computed(() => [
   color: #9ca3af;
   opacity: 1;
 }
-
-.portfolio-overview__footnote {
-  margin: 10px 0 0;
-  font-size: 11px;
-  line-height: 1.6;
-  opacity: 0.8;
-}
-
-.portfolio-overview--desktop .portfolio-overview__footnote {
-  color: #6b7280;
-  opacity: 1;
-}
 </style>