接入前端P0页面真实接口
This commit is contained in:
andy
369
client/src/layouts/ReservationAppShell.vue
Normal file
369
client/src/layouts/ReservationAppShell.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<div class="app-shell">
|
||||
<aside class="app-sidebar">
|
||||
<RouterLink
|
||||
class="brand"
|
||||
to="/reservation/orders"
|
||||
>
|
||||
<span class="brand-mark" />
|
||||
<span>
|
||||
<strong>{{ t('app.name') }}</strong>
|
||||
<small>OMS</small>
|
||||
</span>
|
||||
</RouterLink>
|
||||
|
||||
<nav
|
||||
class="app-nav"
|
||||
aria-label="Reservation navigation"
|
||||
>
|
||||
<RouterLink
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="app-nav__item"
|
||||
>
|
||||
<i
|
||||
:class="item.icon"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{{ t(item.labelKey) }}</span>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="app-main">
|
||||
<header class="app-topbar">
|
||||
<div>
|
||||
<strong>{{ pageTitle }}</strong>
|
||||
<small>{{ t('app.hotelContext') }}</small>
|
||||
</div>
|
||||
|
||||
<div class="app-topbar__actions">
|
||||
<span
|
||||
class="health-pill"
|
||||
:class="`health-pill--${healthState}`"
|
||||
>
|
||||
<i
|
||||
class="pi pi-circle-fill"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ healthLabel }}
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="locale-switch"
|
||||
aria-label="Language"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: locale === 'zh-CN' }"
|
||||
@click="setLocale('zh-CN')"
|
||||
>
|
||||
中文
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: locale === 'en-US' }"
|
||||
@click="setLocale('en-US')"
|
||||
>
|
||||
EN
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="theme-button"
|
||||
:title="t('app.theme')"
|
||||
@click="preferences.toggleTheme()"
|
||||
>
|
||||
<i
|
||||
class="pi pi-moon"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="app-content">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { RouterLink, useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { fetchBackendHealth } from '@/services/healthService'
|
||||
import { useAppPreferencesStore, type SupportedLocale } from '@/stores/appPreferences'
|
||||
|
||||
const route = useRoute()
|
||||
const { t, locale } = useI18n()
|
||||
const preferences = useAppPreferencesStore()
|
||||
const healthState = ref<'checking' | 'up' | 'down'>('checking')
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
to: '/reservation/orders',
|
||||
icon: 'pi pi-list',
|
||||
labelKey: 'nav.orders',
|
||||
},
|
||||
{
|
||||
to: '/reservation/tasks',
|
||||
icon: 'pi pi-check-square',
|
||||
labelKey: 'nav.taskQueue',
|
||||
},
|
||||
]
|
||||
|
||||
const pageTitle = computed(() => {
|
||||
const titleKey = typeof route.meta.titleKey === 'string' ? route.meta.titleKey : 'nav.orders'
|
||||
return t(titleKey)
|
||||
})
|
||||
|
||||
const healthLabel = computed(() => {
|
||||
if (healthState.value === 'up') {
|
||||
return t('app.healthUp')
|
||||
}
|
||||
if (healthState.value === 'down') {
|
||||
return t('app.healthDown')
|
||||
}
|
||||
return t('app.healthChecking')
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
void checkHealth()
|
||||
})
|
||||
|
||||
function setLocale(nextLocale: SupportedLocale): void {
|
||||
preferences.setLocale(nextLocale)
|
||||
locale.value = nextLocale
|
||||
}
|
||||
|
||||
async function checkHealth(): Promise<void> {
|
||||
healthState.value = 'checking'
|
||||
try {
|
||||
const health = await fetchBackendHealth()
|
||||
healthState.value = health.status === 'UP' ? 'up' : 'down'
|
||||
} catch {
|
||||
healthState.value = 'down'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: var(--th-sidebar-width) minmax(0, 1fr);
|
||||
background: var(--th-color-slate-100);
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 28px;
|
||||
background: linear-gradient(180deg, var(--th-color-navy-950), var(--th-color-navy-900));
|
||||
color: var(--th-color-white);
|
||||
padding: 28px 18px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #0a7cff, #0057e5);
|
||||
}
|
||||
|
||||
.brand strong,
|
||||
.brand small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand strong {
|
||||
font-size: 15px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.brand small {
|
||||
margin-top: 2px;
|
||||
color: rgb(255 255 255 / 72%);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-nav__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 40px;
|
||||
border-radius: var(--th-radius-sm);
|
||||
color: rgb(255 255 255 / 78%);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.app-nav__item.router-link-active {
|
||||
background: rgb(255 255 255 / 12%);
|
||||
color: var(--th-color-white);
|
||||
box-shadow: inset 3px 0 0 var(--th-color-blue-600);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-rows: var(--th-topbar-height) 1fr;
|
||||
}
|
||||
|
||||
.app-topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
border-bottom: 1px solid var(--th-color-slate-200);
|
||||
background: rgb(255 255 255 / 92%);
|
||||
backdrop-filter: blur(14px);
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
.app-topbar strong,
|
||||
.app-topbar small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-topbar strong {
|
||||
color: var(--th-color-slate-900);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.app-topbar small {
|
||||
margin-top: 4px;
|
||||
color: var(--th-color-slate-500);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.app-topbar__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.health-pill,
|
||||
.locale-switch,
|
||||
.theme-button {
|
||||
min-height: 36px;
|
||||
border: 1px solid var(--th-color-slate-200);
|
||||
border-radius: var(--th-radius-sm);
|
||||
background: var(--th-color-white);
|
||||
}
|
||||
|
||||
.health-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: var(--th-color-slate-500);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
padding: 0 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.health-pill i {
|
||||
font-size: 7px;
|
||||
}
|
||||
|
||||
.health-pill--up {
|
||||
color: var(--th-color-success);
|
||||
}
|
||||
|
||||
.health-pill--down {
|
||||
color: var(--th-color-danger);
|
||||
}
|
||||
|
||||
.locale-switch {
|
||||
display: inline-flex;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.locale-switch button,
|
||||
.theme-button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--th-color-slate-700);
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.locale-switch button {
|
||||
min-width: 46px;
|
||||
border-radius: 5px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.locale-switch button.active {
|
||||
background: var(--th-color-blue-100);
|
||||
color: var(--th-color-blue-600);
|
||||
}
|
||||
|
||||
.theme-button {
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
min-width: 0;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
position: static;
|
||||
height: auto;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto;
|
||||
align-items: center;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.app-topbar {
|
||||
padding: 0 18px;
|
||||
}
|
||||
|
||||
.health-pill {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user