saeedandCursor
feb5727c0e
Admin order edit with category chips and timeline; customer checkout charges variant rialWage; product tags; retire the unused user-app-v2 tree. Co-authored-by: Cursor <cursoragent@cursor.com>
143 lines
3.5 KiB
Vue
143 lines
3.5 KiB
Vue
<!--
|
|
Sticky translucent page bar in the redesigned design language, extracted from
|
|
the home screen's own `.home__bar` so every other screen gets the identical
|
|
chrome instead of the old dark AppHeader.
|
|
|
|
Layout mirrors the home bar exactly: a leading action (usually back), a
|
|
centred title, and an optional trailing action via the `trailing` slot — so
|
|
the bar's height, blur, hairline and icon buttons stay consistent app-wide.
|
|
-->
|
|
<template>
|
|
<header class="bar app-frame-x">
|
|
<div class="bar__inner">
|
|
<button v-if="back" type="button" class="bar__btn" aria-label="بازگشت" @click="onBack">
|
|
<Icon icon="vuesax-linear:arrow-right-1" size="20" />
|
|
</button>
|
|
<span v-else class="bar__spacer" aria-hidden="true" />
|
|
|
|
<h1 class="bar__title">{{ title }}</h1>
|
|
|
|
<div class="bar__trailing">
|
|
<slot name="trailing">
|
|
<span class="bar__spacer" aria-hidden="true" />
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
<slot name="below" />
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router'
|
|
import Icon from '../icon/Icon.vue'
|
|
import { useNavStore } from '../../stores/navStore'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
title: string
|
|
/** Show the back button. */
|
|
back?: boolean
|
|
/**
|
|
* Where to go when there is nothing to go back to — a direct link, a
|
|
* refresh, or a previous entry the router guard would bounce us out of.
|
|
*
|
|
* A FALLBACK, not a destination. It used to be the destination, which is
|
|
* why back from the login page always landed on home even when the person
|
|
* had arrived from their profile: every screen pushed a fixed route name
|
|
* and the real history was ignored (inherited from the reference, which
|
|
* did the same — `$router.push({name:'userPage::hasSubRoute'})` in each
|
|
* component's back arrow).
|
|
*/
|
|
backTo?: string
|
|
}>(),
|
|
{ back: true },
|
|
)
|
|
|
|
const router = useRouter()
|
|
const nav = useNavStore()
|
|
|
|
function onBack() {
|
|
// Prefer true history: it is the only thing that knows where the person
|
|
// actually came from.
|
|
//
|
|
// `canGoBack` is tracked by the router (navStore), not read off
|
|
// `history.length`, which counts entries from before this app was opened and
|
|
// so cannot tell "arrived from the profile" from "opened this link in a new
|
|
// tab".
|
|
if (nav.canGoBack) {
|
|
router.back()
|
|
return
|
|
}
|
|
if (props.backTo) {
|
|
router.push({ name: props.backTo })
|
|
return
|
|
}
|
|
router.push({ name: 'home' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.bar {
|
|
position: fixed;
|
|
top: var(--aab-h, 0px);
|
|
// left/right from global .app-frame-x
|
|
z-index: 20;
|
|
background: alpha(@canvas, 88%);
|
|
backdrop-filter: blur(14px);
|
|
border-bottom: 1px solid @hairline;
|
|
}
|
|
|
|
.bar__inner {
|
|
max-width: 768px;
|
|
margin: 0 auto;
|
|
padding: 11px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.bar__title {
|
|
margin: 0;
|
|
font-size: 14.5px;
|
|
font-weight: 800;
|
|
color: @ink;
|
|
letter-spacing: -0.1px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.bar__btn {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
width: 38px;
|
|
height: 38px;
|
|
border: 0;
|
|
cursor: pointer;
|
|
border-radius: 12px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: @ink;
|
|
background: @hairlineSoft;
|
|
transition: background 0.18s ease;
|
|
}
|
|
|
|
.bar__btn:active {
|
|
transform: scale(0.94);
|
|
}
|
|
|
|
.bar__trailing {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.bar__spacer {
|
|
display: block;
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
</style>
|