safavi works

src/layouts/components/DesktopPageTopbar.vue

@@ -0,0 +1,42 @@
+<template>
+  <header class="dpage-topbar">
+    <button
+      v-if="showBack"
+      type="button"
+      class="dpage-topbar__back"
+      @click="handleBack"
+    >
+      <BasicIcon icon="vuesax-linear:arrow-right-1" size="16" />
+      <span>بازگشت</span>
+    </button>
+    <div class="dpage-topbar__meta">
+      <p v-if="eyebrow" class="dpage-topbar__eyebrow">{{ eyebrow }}</p>
+      <h1 class="dpage-topbar__title">{{ title }}</h1>
+      <p v-if="subtitle" class="dpage-topbar__subtitle">{{ subtitle }}</p>
+    </div>
+    <div v-if="$slots.trailing">
+      <slot name="trailing" />
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+
+withDefaults(
+  defineProps<{
+    title: string
+    eyebrow?: string
+    subtitle?: string
+    showBack?: boolean
+  }>(),
+  {
+    showBack: false,
+  },
+)
+
+function handleBack() {
+  router.back()
+}
+</script>

src/layouts/components/MobilePageHeader.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="mpage-header wrap-fix">
+    <button
+      v-if="showBack"
+      type="button"
+      class="mpage-header__back"
+      @click="handleBack"
+    >
+      <BasicIcon icon="vuesax-linear:arrow-right-1" />
+    </button>
+    <div class="mpage-header__title">{{ title }}</div>
+    <div v-if="$slots.trailing" class="mpage-header__trailing">
+      <slot name="trailing" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    showBack?: boolean
+  }>(),
+  {
+    showBack: false,
+  },
+)
+
+function handleBack() {
+  router.back()
+}
+</script>

src/layouts/config/navigation.ts

@@ -33,7 +33,7 @@ const BOURSECU_PRIMARY_NAV: AppNavItem[] = [
 
 const DEFAULT_PRIMARY_NAV: AppNavItem[] = [
   { id: 'home', routeName: 'home', label: 'صفحه اصلی', icon: 'vuesax-linear:home' },
-  { id: 'transactions', routeName: 'transactions', label: 'گزارش', icon: 'vuesax-linear:receipt-item' },
+  { id: 'transactions', routeName: 'transactions', label: 'تراکنش‌ها', icon: 'vuesax-linear:receipt-item' },
   { id: 'buyProduct', routeName: 'buyProduct', label: 'محصولات', icon: 'vuesax-linear:coin' },
   { id: 'wallet', routeName: 'wallet', label: 'کیف پول', icon: 'vuesax-linear:wallet-1' },
   { id: 'user', routeName: 'user', label: 'تنظیمات', icon: 'vuesax-linear:setting-2' },

src/layouts/mobile/MobileBottomNav.vue

@@ -14,7 +14,7 @@
             class="tab__icon-image"
           />
         </div>
-        <div class="text-xs mt-1 font-bold">سفارش ها</div>
+        <div class="text-xs mt-1 font-bold">خرید و فروش</div>
       </div>
       <div
         v-else
@@ -42,7 +42,7 @@
           />
           <Icon v-else icon="vuesax-linear:receipt-item" size="24" />
         </div>
-        <div class="text-xs mt-1 font-bold">{{ isBoursecu ? 'تراکنش ها' : 'گزارش' }}</div>
+        <div class="text-xs mt-1 font-bold">تراکنش ها</div>
       </div>
 
       <div

src/layouts/styles/mobile-page-common.less

@@ -0,0 +1,60 @@
+/* Shared mobile page chrome */
+
+.mpage-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: #fff;
+  color: @App-primary-color;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+  z-index: 1999;
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    padding: 0;
+    color: inherit;
+    cursor: pointer;
+    font-family: inherit;
+  }
+
+  &__title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__trailing {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+}
+
+.mpage-subheader {
+  top: 2.75rem;
+  z-index: 1999;
+  padding: 0.75rem;
+  background: #fff;
+  color: @App-primary-color;
+  font-weight: 700;
+}
+
+.mpage-content {
+  padding-top: 4rem;
+}
+
+.mpage-content--with-subheader {
+  padding-top: 6.5rem;
+}
+
+.mpage-scroll {
+  overflow-y: auto;
+  max-height: calc(100vh - 50px);
+}