2026-08-14 19:02:34 +08:00
|
|
|
<script setup lang="ts">
|
2026-09-03 10:27:31 +08:00
|
|
|
import { Maximize2, Minimize2 } from '@lucide/vue'
|
|
|
|
|
import { ref, watch } from 'vue'
|
2026-08-14 19:02:34 +08:00
|
|
|
import AppDialog from '@/shared/components/AppDialog.vue'
|
|
|
|
|
import GlobalSmartLoadingView from '../pages/GlobalSmartLoadingView.vue'
|
|
|
|
|
|
|
|
|
|
const open = defineModel<boolean>({ default: false })
|
2026-09-03 10:27:31 +08:00
|
|
|
const fullscreen = ref(false)
|
|
|
|
|
|
|
|
|
|
watch(open, (value) => {
|
|
|
|
|
if (!value) {
|
|
|
|
|
fullscreen.value = false
|
|
|
|
|
}
|
|
|
|
|
})
|
2026-08-14 19:02:34 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<AppDialog
|
|
|
|
|
v-model="open"
|
|
|
|
|
class="smart-loading-dialog"
|
|
|
|
|
title="智能装柜"
|
|
|
|
|
width="min(1600px, 98vw)"
|
2026-09-03 10:27:31 +08:00
|
|
|
:fullscreen="fullscreen"
|
2026-08-14 19:02:34 +08:00
|
|
|
cancel-text="关闭"
|
|
|
|
|
:show-confirm="false"
|
|
|
|
|
destroy-on-close
|
|
|
|
|
>
|
2026-09-03 10:27:31 +08:00
|
|
|
<template #header>
|
|
|
|
|
<div class="smart-loading-dialog__header">
|
|
|
|
|
<div class="smart-loading-dialog__heading">
|
|
|
|
|
<span>智能装柜</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-tooltip :content="fullscreen ? '退出全屏' : '展开全屏'" placement="bottom">
|
|
|
|
|
<el-button text :aria-label="fullscreen ? '退出全屏' : '展开全屏'" @click="fullscreen = !fullscreen">
|
|
|
|
|
<Minimize2 v-if="fullscreen" :size="18" />
|
|
|
|
|
<Maximize2 v-else :size="18" />
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
2026-09-03 11:47:32 +08:00
|
|
|
<GlobalSmartLoadingView embedded />
|
2026-08-14 19:02:34 +08:00
|
|
|
</AppDialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
2026-09-03 13:49:40 +08:00
|
|
|
:global(.smart-loading-dialog.app-dialog.el-dialog) { width: min(1600px, 98vw); height: 94vh; max-height: 94vh; margin-block: 3vh !important; }
|
2026-09-03 10:27:31 +08:00
|
|
|
:global(.smart-loading-dialog.app-dialog.el-dialog.is-fullscreen) { width: 100%; height: 100vh; max-height: 100vh; margin: 0 !important; border-radius: 0; }
|
2026-09-03 13:49:40 +08:00
|
|
|
:global(.smart-loading-dialog .el-dialog__body) { display: flex; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
|
|
|
|
|
:global(.smart-loading-dialog .app-dialog__body) { display: flex; min-width: 0; min-height: 0; flex: 1; overflow: hidden; }
|
2026-09-03 10:27:31 +08:00
|
|
|
.smart-loading-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; color: var(--cc-text); font-size: 18px; font-weight: 600; line-height: 24px; }
|
|
|
|
|
.smart-loading-dialog__heading { display: flex; min-width: 0; align-items: center; gap: 24px; }
|
|
|
|
|
.smart-loading-dialog__heading > span { flex: 0 0 auto; }
|
|
|
|
|
.smart-loading-dialog__header :deep(.el-button) { flex: 0 0 auto; margin-right: 24px; color: var(--cc-muted); }
|
2026-08-14 19:02:34 +08:00
|
|
|
@media (max-width: 720px) {
|
2026-09-03 13:49:40 +08:00
|
|
|
:global(.smart-loading-dialog.app-dialog.el-dialog) { width: calc(100vw - 12px); height: calc(100svh - 12px); max-height: calc(100svh - 12px); margin-block: 6px !important; }
|
2026-08-14 19:02:34 +08:00
|
|
|
}
|
|
|
|
|
</style>
|
