new UI and handle cashing

This commit is contained in:
2026-06-16 19:47:28 +03:30
parent e174ae28c5
commit 6e5ea0319f
41 changed files with 2936 additions and 641 deletions
@@ -39,6 +39,17 @@
@click="$emit('openGoldModal', primaryMetalTotal)"
/>
</div>
<div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
دارایی ریالی:
<div class="text-l mr-2 font-bold">{{ usePriceWithoutType(cashWallet) }} ریال</div>
<BasicIcon
icon="vuesax-linear:info-circle"
size="18"
:color="iconColor"
@click="$emit('openRialModal')"
/>
</div>
</template>
<template v-else-if="!boursecuLayout">
@@ -61,7 +72,7 @@
<div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
دارایی ریالی:
<div class="text-l mr-2 font-bold">{{ usePriceWithoutType(totalRialValue) }} ریال</div>
<div class="text-l mr-2 font-bold">{{ usePriceWithoutType(cashWallet) }} ریال</div>
<BasicIcon
icon="vuesax-linear:info-circle"
size="18"
@@ -119,7 +130,7 @@ const primaryMetalTotal = computed(() => metalTotals.value[0])
const boursecuAssetRows = computed(() =>
props.boursecuLayout ? buildBoursecuHomeAssetRows(assetsSummary.value) : []
)
const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? [])
const countBasedInventory = computed(() =>
(assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0)
+20 -10
View File
@@ -1,6 +1,6 @@
import { computed, h, inject, onMounted, onUnmounted, provide, ref, type InjectionKey } from 'vue'
import { computed, h, inject, onUnmounted, provide, ref, type InjectionKey } from 'vue'
import router from '@/router'
import { loading, removeToken } from '@/utils'
import { getToken, removeToken } from '@/utils'
import { useUserStore } from '@/store/userStore'
import { useWalletStore } from '@/store/walletStore'
import { useWalletAssets } from '@/composables/useWalletAssets'
@@ -20,14 +20,14 @@ import { useBanners } from './useBanners'
import { usePriceChart, type ChartMetalType } from './usePriceChart'
import type { HomeActionItem } from '../layouts/types'
import { getHomeLayoutId } from '../layouts/registry'
import { initHomePageData, resetHomePageData } from './useHomePageData'
import { initHomePageData, resetHomePageData, useHomePageLoading } from './useHomePageData'
import { resetWalletPageData } from '../../wallet/composables/useWalletPageData'
import { resetAddressPageData } from '../../address/composables/useAddressPageData'
import { resetTransactionsPageData } from '../../transactions/composables/useTransactionsPageData'
import { resetProductsPageData } from '../../products/composables/useProductsPageData'
export interface HomePageContext {
loading: typeof loading
homePageLoading: ReturnType<typeof useHomePageLoading>['homePageLoading']
isGaroosi: ReturnType<typeof computed<boolean>>
limitedPrice: ReturnType<typeof computed>
showClosedMessage: ReturnType<typeof computed<boolean>>
@@ -65,6 +65,7 @@ export function useHomePage() {
const TextBanner = ref('')
const { banners } = useBanners()
const { homePageLoading } = useHomePageLoading()
const {
updateChartData,
priceChartSeries,
@@ -230,7 +231,7 @@ export function useHomePage() {
}
const context: HomePageContext = {
loading,
homePageLoading,
isGaroosi,
limitedPrice,
showClosedMessage,
@@ -250,15 +251,12 @@ export function useHomePage() {
provide(HOME_PAGE_CONTEXT_KEY, context)
void ensureHomeUserAndData()
onUnmounted(() => {
stopLastPricePolling()
})
onMounted(() => {
// Single shared fetch for mobile + desktop — safe to call on remount (deduped in useHomePageData)
void initHomePageData()
})
return {
userStore,
walletStore,
@@ -279,3 +277,15 @@ export function useHomePageContext() {
}
return context
}
async function ensureHomeUserAndData() {
const userStore = useUserStore()
if (getToken() && !userStore.userInfo) {
await userStore.getMyInfo()
}
if (getToken()) {
await initHomePageData()
}
}
@@ -1,5 +1,4 @@
import { ref } from 'vue'
import { loading } from '@/utils'
import { getLastPrices, startLastPricePolling, stopLastPricePolling } from '@/utils/price'
import { useWalletAssets } from '@/composables/useWalletAssets'
import { clearProductsCatalog } from '@/composables/useProductsCatalog'
@@ -8,13 +7,16 @@ import { fetchHomeChartPrices, loadHomeMaftolOffset, resetHomePriceChart } from
import { loadHomeBanners, resetHomeBanners } from './useBanners'
import { loadHomeFunds, resetHomeFunds } from './useUserFunds'
/**
* Single entry point for all homepage API calls.
* Mobile and desktop layouts must not fetch independently — they consume shared module state.
*/
/** فقط لودینگ صفحه اصلی — نه loading سراسری @/utils */
const homePageLoading = ref(false)
let initPromise: Promise<void> | null = null
const initialized = ref(false)
export function useHomePageLoading() {
return { homePageLoading }
}
export function isHomePageDataInitialized() {
return initialized.value
}
@@ -36,7 +38,6 @@ export async function initHomePageData(force = false) {
initPromise = (async () => {
try {
loading.value = true
const { loadWalletAssets } = useWalletAssets()
await Promise.all([
@@ -56,7 +57,6 @@ export async function initHomePageData(force = false) {
} catch (error) {
console.error('Home page initialization error:', error)
} finally {
loading.value = false
initPromise = null
}
})()
@@ -68,6 +68,7 @@ export async function initHomePageData(force = false) {
export function resetHomePageData() {
initialized.value = false
initPromise = null
homePageLoading.value = false
stopLastPricePolling()
resetHomeBanners()
resetHomeFunds()
@@ -19,7 +19,7 @@ const isBoursecuLayout = computed(() => ctx.isBoursecuHomeLayout.value)
const meta = computed(() => assetsSummary.value?.meta)
const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? [])
const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
const countBasedInventory = computed(() =>
(assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0),
)
@@ -90,7 +90,7 @@ const metrics = computed<MetricItem[]>(() => {
items.push({
id: 'rial',
label: 'دارایی ریالی',
value: `${usePriceWithoutType(totalRialValue.value)} ریال`,
value: `${usePriceWithoutType(cashWallet.value)} ریال`,
showInfo: true,
onInfo: 'rial',
})
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/userStore'
import { loading } from '@/utils'
import { getToken } from '@/utils'
import { useHomePageContext } from '../../composables/useHomePage'
import HomeSkeleton from '../../components/HomeSkeleton.vue'
import DesktopHomeShell from '../components/DesktopHomeShell.vue'
@@ -18,10 +19,11 @@ defineEmits<{
}>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const ctx = useHomePageContext()
const showSkeleton = computed(() => loading.value || !userStore.userInfo)
const showContent = computed(() => !loading.value && Boolean(userStore.userInfo))
const showContent = computed(() => Boolean(userInfo.value))
const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
</script>
<template>
@@ -31,7 +33,7 @@ const showContent = computed(() => !loading.value && Boolean(userStore.userInfo)
<HomeSkeleton v-if="showSkeleton" />
<template v-else-if="showContent">
<template v-if="showContent">
<section class="dhome-hero-row">
<DesktopLivePrice />
<DesktopPriceRange />
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/userStore'
import { loading } from '@/utils'
import { getToken } from '@/utils'
import { useHomePageContext } from '../../composables/useHomePage'
import HomeSkeleton from '../../components/HomeSkeleton.vue'
import DesktopHomeShell from '../components/DesktopHomeShell.vue'
@@ -21,10 +22,11 @@ defineEmits<{
}>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const ctx = useHomePageContext()
const showSkeleton = computed(() => loading.value || !userStore.userInfo)
const showContent = computed(() => !loading.value && Boolean(userStore.userInfo))
const showContent = computed(() => Boolean(userInfo.value))
const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
</script>
<template>
@@ -34,7 +36,7 @@ const showContent = computed(() => !loading.value && Boolean(userStore.userInfo)
<HomeSkeleton v-if="showSkeleton" />
<template v-else-if="showContent">
<template v-if="showContent">
<section class="dhome-hero-row">
<DesktopLivePrice />
<DesktopPriceRange />
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/userStore'
import { loading } from '@/utils'
import { getToken } from '@/utils'
import HomeSkeleton from '../components/HomeSkeleton.vue'
import { getHomeLayoutConfig } from './registry'
import { HOME_SECTION_COMPONENTS } from './sections'
@@ -12,6 +13,7 @@ const props = defineProps<{
}>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const layoutConfig = computed(() => props.layoutConfig ?? getHomeLayoutConfig())
const outerSections = computed(() =>
@@ -22,13 +24,17 @@ const innerSections = computed(() =>
layoutConfig.value.sections.filter((section) => section.visible !== false)
)
/** محتوا با userInfo — داده‌های API در پس‌زمینه لود می‌شوند */
const showContent = computed(() => Boolean(userInfo.value))
const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
function resolveSectionComponent(sectionId: HomeSectionId) {
return HOME_SECTION_COMPONENTS[sectionId]
}
</script>
<template>
<div v-if="userStore.userInfo && !loading">
<div v-if="showContent">
<component
:is="resolveSectionComponent(section.id)"
v-for="section in outerSections"
@@ -52,5 +58,5 @@ function resolveSectionComponent(sectionId: HomeSectionId) {
</template>
</div>
<HomeSkeleton v-else class="w-full" />
<HomeSkeleton v-else-if="showSkeleton" class="w-full" />
</template>
+13 -9
View File
@@ -1,21 +1,25 @@
import type { Component } from 'vue'
import { defineAsyncComponent, type Component } from 'vue'
import { getConfigApp, isBoursecuProject } from '@/utils/config'
import type { HomeLayoutConfig, HomeLayoutId } from './types'
import { defaultHomeLayoutConfig } from './configs/default'
import { boursecuHomeLayoutConfig } from './configs/boursecu'
import HomeLayoutRenderer from './HomeLayoutRenderer.vue'
export const DEFAULT_HOME_LAYOUT_ID: HomeLayoutId = 'default'
const HOME_LAYOUT_CONFIGS: Record<HomeLayoutId, HomeLayoutConfig> = {
default: defaultHomeLayoutConfig,
boursecu: boursecuHomeLayoutConfig,
}
const HOME_LAYOUT_COMPONENTS: Record<HomeLayoutId, Component> = {
default: HomeLayoutRenderer,
boursecu: HomeLayoutRenderer,
}
let cachedLayoutRenderer: Component | null = null
export const DEFAULT_HOME_LAYOUT_ID: HomeLayoutId = 'default'
function getLayoutRenderer(): Component {
if (!cachedLayoutRenderer) {
cachedLayoutRenderer = defineAsyncComponent(() => import('./HomeLayoutRenderer.vue'))
}
return cachedLayoutRenderer
}
export function isHomeLayoutId(value: unknown): value is HomeLayoutId {
return typeof value === 'string' && value in HOME_LAYOUT_CONFIGS
@@ -38,8 +42,8 @@ export function getHomeLayoutConfig(layoutId = getHomeLayoutId()): HomeLayoutCon
return HOME_LAYOUT_CONFIGS[layoutId] ?? HOME_LAYOUT_CONFIGS[DEFAULT_HOME_LAYOUT_ID]
}
export function resolveHomeLayoutComponent(layoutId = getHomeLayoutId()): Component {
return HOME_LAYOUT_COMPONENTS[layoutId] ?? HOME_LAYOUT_COMPONENTS[DEFAULT_HOME_LAYOUT_ID]
export function resolveHomeLayoutComponent(_layoutId = getHomeLayoutId()): Component {
return getLayoutRenderer()
}
export function registerHomeLayoutConfig(layoutId: HomeLayoutId, config: HomeLayoutConfig) {