vifo
82a19101a8
- 创建 rui-frontend 前端仓库 - 迁移 admin-ui 管理后台 - 创建 cashier-mobile 和 customer-mobile 占位项目 - 配置 pnpm workspace
70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted } from 'vue'
|
|
import { useAppStore } from '@/stores/app'
|
|
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
|
import en from 'element-plus/es/locale/lang/en'
|
|
import systemConfig from 'virtual:system-config'
|
|
|
|
const app = useAppStore()
|
|
const locale = computed(() => app.lang === 'zh-CN' ? zhCn : en)
|
|
|
|
onMounted(() => {
|
|
// 设置页面标题
|
|
document.title = systemConfig.theme.title
|
|
|
|
// 设置主题色
|
|
const el = document.documentElement
|
|
el.style.setProperty('--el-color-primary', systemConfig.theme.primaryColor)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<el-config-provider :locale="locale">
|
|
<router-view />
|
|
<!-- 全屏退出角标 -->
|
|
<div v-if="app.pageFullscreen" class="fs-exit" @click="app.togglePageFullscreen()">
|
|
<el-icon :size="18"><Close /></el-icon>
|
|
</div>
|
|
</el-config-provider>
|
|
</template>
|
|
|
|
<style>
|
|
:root { --el-bg-color-page: #f5f6fa; }
|
|
html.dark { --el-bg-color-page: #111; color-scheme: dark; }
|
|
html.dark body { background: #111; color: #e5e7eb; }
|
|
|
|
.fullscreen-main {
|
|
position: fixed !important; inset: 0 !important; z-index: 100 !important;
|
|
background: #f5f6fa !important; padding: 20px !important; overflow: auto !important;
|
|
}
|
|
html.dark .fullscreen-main { background: #111 !important; }
|
|
|
|
.fs-exit {
|
|
position: fixed; top: 16px; right: 16px; z-index: 200;
|
|
width: 36px; height: 36px; border-radius: 50%;
|
|
background: rgba(0,0,0,0.4); color: #fff;
|
|
display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer; transition: all 0.2s;
|
|
}
|
|
.fs-exit:hover { background: rgba(0,0,0,0.6); }
|
|
|
|
/* ======================== rui-dialog 全局样式规则 ======================== */
|
|
/**
|
|
* 所有使用 el-dialog 的组件必须添加 class="rui-dialog"
|
|
* 规则说明：
|
|
* 1. 内容区域最大高度 60vh，超出滚动
|
|
* 2. 底部 footer 固定不参与滚动
|
|
* 3. 用法：<el-dialog class="rui-dialog" ...>
|
|
*/
|
|
.rui-dialog .el-dialog__body {
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
}
|
|
.rui-dialog .el-dialog__footer {
|
|
border-top: 1px solid var(--el-border-color-lighter);
|
|
padding: 12px 20px;
|
|
background: var(--el-bg-color);
|
|
}
|
|
</style>
|