678f64d772
后端新增通用分页模块，为报销单、员工、预算、agent 资产等 端点统一接入分页参数和游标查询，优化 repository 层分页实 现，前端服务层适配分页响应结构，完善预算图表和全局样式， 优化侧边栏和企业选择器组件，引入 Element Plus 插件注册。
110 lines
3.3 KiB
Vue
110 lines
3.3 KiB
Vue
<template>
|
|
<div class="app-desktop-shell" :style="desktopScaleStyle">
|
|
<div class="app-desktop-stage">
|
|
<ElConfigProvider :locale="zhCn">
|
|
<RouterView />
|
|
<ToastNotification :toast-text="toastText" />
|
|
</ElConfigProvider>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
|
import { RouterView } from 'vue-router'
|
|
import { ElConfigProvider } from 'element-plus/es/components/config-provider/index.mjs'
|
|
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
|
|
|
import './assets/styles/global.css'
|
|
|
|
import ToastNotification from './components/shared/ToastNotification.vue'
|
|
import { useToast } from './composables/useToast.js'
|
|
|
|
const { toastText } = useToast()
|
|
|
|
const DESKTOP_BASE_WIDTH = 1600
|
|
const DESKTOP_BASE_HEIGHT = 920
|
|
const DESKTOP_MIN_SCALE = 0.82
|
|
|
|
const viewportWidth = ref(typeof window === 'undefined' ? DESKTOP_BASE_WIDTH : window.innerWidth)
|
|
const viewportHeight = ref(typeof window === 'undefined' ? DESKTOP_BASE_HEIGHT : window.innerHeight)
|
|
|
|
const desktopScaleStyle = computed(() => {
|
|
const metrics = resolveDesktopMetrics(viewportWidth.value, viewportHeight.value)
|
|
|
|
return {
|
|
'--desktop-ui-scale': metrics.scale.toFixed(4),
|
|
'--desktop-ui-inverse-scale': metrics.inverseScale.toFixed(4),
|
|
'--desktop-stage-width': `${metrics.stageWidth}px`,
|
|
'--desktop-stage-height': `${metrics.stageHeight}px`
|
|
}
|
|
})
|
|
|
|
const desktopMetrics = computed(() => resolveDesktopMetrics(viewportWidth.value, viewportHeight.value))
|
|
|
|
function resolveDesktopMetrics(width, height) {
|
|
if (width < 960) {
|
|
return {
|
|
scale: 1,
|
|
inverseScale: 1,
|
|
stageWidth: width,
|
|
stageHeight: height,
|
|
viewportWidth: width,
|
|
viewportHeight: height
|
|
}
|
|
}
|
|
|
|
const scaleByWidth = width / DESKTOP_BASE_WIDTH
|
|
const scaleByHeight = height / DESKTOP_BASE_HEIGHT
|
|
const scale = Number(Math.min(1, Math.max(DESKTOP_MIN_SCALE, Math.min(scaleByWidth, scaleByHeight))).toFixed(4))
|
|
const inverseScale = Number((1 / scale).toFixed(4))
|
|
|
|
return {
|
|
scale,
|
|
inverseScale,
|
|
stageWidth: Math.round(width * inverseScale),
|
|
stageHeight: Math.round(height * inverseScale),
|
|
viewportWidth: width,
|
|
viewportHeight: height
|
|
}
|
|
}
|
|
|
|
function syncRootDesktopVars(metrics) {
|
|
if (typeof document === 'undefined') {
|
|
return
|
|
}
|
|
|
|
const rootStyle = document.documentElement.style
|
|
rootStyle.setProperty('--desktop-ui-scale', metrics.scale.toFixed(4))
|
|
rootStyle.setProperty('--desktop-ui-inverse-scale', metrics.inverseScale.toFixed(4))
|
|
rootStyle.setProperty('--desktop-stage-width', `${metrics.stageWidth}px`)
|
|
rootStyle.setProperty('--desktop-stage-height', `${metrics.stageHeight}px`)
|
|
rootStyle.setProperty('--desktop-viewport-width', String(metrics.viewportWidth))
|
|
rootStyle.setProperty('--desktop-viewport-height', String(metrics.viewportHeight))
|
|
}
|
|
|
|
function updateViewport() {
|
|
viewportWidth.value = window.innerWidth
|
|
viewportHeight.value = window.innerHeight
|
|
}
|
|
|
|
watch(
|
|
desktopMetrics,
|
|
(metrics) => {
|
|
syncRootDesktopVars(metrics)
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
onMounted(() => {
|
|
updateViewport()
|
|
window.addEventListener('resize', updateViewport, { passive: true })
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', updateViewport)
|
|
})
|
|
</script>
|
|
|
|
<style src="./assets/styles/app.css"></style>
|