MahdiandCursor
d12d7b91cb
A receipt or payment only reduces the party balance, while an income or expense keeps both amounts. Finance screens stack into cards on a phone so the forms and lists stay readable. Co-authored-by: Cursor <cursoragent@cursor.com>
63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed, watch } from 'vue';
|
|
import { RouterView, useRoute } from 'vue-router';
|
|
import { Flex as AFlex, Grid, Typography, theme } from 'ant-design-vue';
|
|
import TreasuryNav from '@/components/treasury/TreasuryNav.vue';
|
|
import { provideTreasuryPageChrome } from './treasuryPageChrome';
|
|
|
|
const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
|
|
const { token } = theme.useToken();
|
|
const screens = Grid.useBreakpoint();
|
|
const isMobile = computed(() => !screens.value.md);
|
|
const route = useRoute();
|
|
const chrome = provideTreasuryPageChrome();
|
|
|
|
watch(
|
|
() => route.fullPath,
|
|
() => {
|
|
chrome.clear();
|
|
const scroller = document.querySelector('main.content');
|
|
if (scroller instanceof HTMLElement) scroller.scrollTop = 0;
|
|
},
|
|
);
|
|
|
|
const title = computed(
|
|
() =>
|
|
chrome.override.value.title ??
|
|
(typeof route.meta.treasuryTitle === 'string' ? route.meta.treasuryTitle : 'مدیریت مالی'),
|
|
);
|
|
|
|
const description = computed(
|
|
() =>
|
|
chrome.override.value.description ??
|
|
(typeof route.meta.treasuryDescription === 'string' ? route.meta.treasuryDescription : ''),
|
|
);
|
|
|
|
const headerStyle = computed(() =>
|
|
isMobile.value
|
|
? undefined
|
|
: {
|
|
minHeight: `${token.value.controlHeightLG + token.value.fontSizeLG + token.value.marginXXS}px`,
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<a-flex vertical :gap="isMobile ? token.marginSM : token.margin" :style="{ width: '100%' }">
|
|
<div :style="headerStyle">
|
|
<a-typography-title :level="isMobile ? 4 : 3" :style="{ margin: 0 }">{{ title }}</a-typography-title>
|
|
<a-typography-text
|
|
type="secondary"
|
|
:ellipsis="description ? { tooltip: description } : false"
|
|
:style="{ display: 'block', margin: 0 }"
|
|
>
|
|
{{ description || '\u00a0' }}
|
|
</a-typography-text>
|
|
</div>
|
|
|
|
<TreasuryNav />
|
|
|
|
<RouterView />
|
|
</a-flex>
|
|
</template>
|