<script lang="ts" setup>
|
import type { DmsCompareSession } from '#/api/x/dms/compare';
|
|
import { BasicModal } from '@jnpf/ui/modal';
|
|
import { CloseOutlined } from '@ant-design/icons-vue';
|
import { Tag, Tooltip } from 'ant-design-vue';
|
|
import OnlyOfficeCompareEditor from './OnlyOfficeCompareEditor.vue';
|
|
defineProps<{ session?: DmsCompareSession }>();
|
const emit = defineEmits<{ close: [] }>();
|
|
async function handleClose() {
|
emit('close');
|
return true;
|
}
|
</script>
|
|
<template>
|
<BasicModal
|
:open="!!session"
|
:close-func="handleClose"
|
:closable="false"
|
:default-fullscreen="true"
|
:can-fullscreen="false"
|
:footer="null"
|
:keyboard="true"
|
:mask-closable="false"
|
class="dms-file-compare-modal"
|
destroy-on-close>
|
<template #title>
|
<div class="dms-file-compare-modal__header">
|
<div class="header-main">
|
<span class="header-title">{{ session?.title || '版本比较' }}</span>
|
<Tag color="var(--primary-color)" class="header-readonly-tag">版本比较</Tag>
|
</div>
|
<Tooltip title="关闭" placement="bottom">
|
<a-button aria-label="关闭" class="header-close-button" type="text" @click="handleClose">
|
<CloseOutlined />
|
</a-button>
|
</Tooltip>
|
</div>
|
</template>
|
<div class="dms-file-compare-modal__content">
|
<OnlyOfficeCompareEditor v-if="session" :key="session.config.document.key" :session="session" @close="handleClose" />
|
</div>
|
</BasicModal>
|
</template>
|
|
<style lang="scss" scoped>
|
.dms-file-compare-modal__header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
|
.header-main {
|
display: flex;
|
gap: 8px;
|
align-items: center;
|
min-width: 0;
|
}
|
|
.header-title {
|
min-width: 0;
|
overflow: hidden;
|
font-weight: 600;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.header-readonly-tag {
|
flex-shrink: 0;
|
margin-inline-end: 0;
|
}
|
|
.header-close-button {
|
flex-shrink: 0;
|
width: 32px;
|
height: 32px;
|
padding: 0;
|
}
|
}
|
|
.dms-file-compare-modal__content {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
min-height: 0;
|
background: #fff;
|
}
|
</style>
|
|
<style lang="scss">
|
/* 非 scoped：BasicModal 的 DOM 是 teleport 到 body 的，scoped 的作用域属性够不着，
|
按透传下去的 class 收敛即可（同 Preview.vue 的做法）。
|
编辑器要占满整个弹窗，所以把 ScrollContainer 那层的内边距与留白全部清掉——
|
来源是 @jnpf/ui 的 .ant-modal-body > .scrollbar { padding: 20px 10px }
|
与 ScrollContainer 自带的 .scrollbar__wrap { margin-bottom: 18px } */
|
.dms-file-compare-modal {
|
.ant-modal-header {
|
height: 48px;
|
padding: 8px 16px;
|
background-color: var(--component-background);
|
border-bottom: 1px solid var(--border-color-base1);
|
}
|
|
.ant-modal-body {
|
padding: 0 !important;
|
|
> .scroll-container {
|
padding: 0 !important;
|
|
> .scrollbar__wrap {
|
margin-bottom: 0 !important;
|
|
> .scrollbar__view {
|
height: 100%;
|
overflow: hidden;
|
|
/* ModalWrapper#setModalHeight 会给这层算一个 inline height
|
（全屏时 = innerHeight − modalFooterHeight − modalHeaderHeight − 28，
|
后两个是 57 与经验值），和真实可用高度差出几十像素，表现为弹窗底部一条空白。
|
编辑器要的是"填满剩余空间"而不是一个算出来的固定值，故用 !important 盖掉
|
inline 样式，交给 .fullscreen-modal 既有的 flex 布局去撑。 */
|
> div {
|
height: 100% !important;
|
max-height: none !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
