|
|
@@ -5,13 +5,15 @@
|
|
|
:width="modalWidth"
|
|
|
:footer="null"
|
|
|
destroyOnClose
|
|
|
+ :closable="showControls"
|
|
|
+ :zIndex="props.zIndex"
|
|
|
:class="['ai-assistant-modal', { fullscreen: isFullscreen }]"
|
|
|
>
|
|
|
<template #title>
|
|
|
<div :class="['draggable-title', { 'no-drag': isFullscreen }]" @mousedown="onDragStart">"通安智风"大模型</div>
|
|
|
</template>
|
|
|
<!-- 最大化/还原按钮 -->
|
|
|
- <div class="maximize-btn" @click="toggleFullscreen">
|
|
|
+ <div v-if="showControls" class="maximize-btn" @click="toggleFullscreen">
|
|
|
<div :class="['maximize-icon', { minimized: isFullscreen }]"></div>
|
|
|
</div>
|
|
|
<!-- 收起/展开按钮 -->
|
|
|
@@ -199,13 +201,21 @@
|
|
|
|
|
|
interface Props {
|
|
|
visible: boolean;
|
|
|
+ // 初始即全屏显示(首页等嵌入场景)
|
|
|
+ defaultFullscreen?: boolean;
|
|
|
+ // 是否显示窗口控制按钮(最大化/还原、关闭)
|
|
|
+ showControls?: boolean;
|
|
|
+ zIndex?: number;
|
|
|
}
|
|
|
|
|
|
interface Emits {
|
|
|
(e: 'close'): void;
|
|
|
}
|
|
|
|
|
|
- const props = defineProps<Props>();
|
|
|
+ const props = withDefaults(defineProps<Props>(), {
|
|
|
+ defaultFullscreen: false,
|
|
|
+ showControls: true,
|
|
|
+ });
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
|
|
const taskList = ref<Task[]>([]);
|
|
|
@@ -407,7 +417,7 @@
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- const isFullscreen = ref(false);
|
|
|
+ const isFullscreen = ref(!!props.defaultFullscreen);
|
|
|
|
|
|
// 响应式视口宽度,用于计算 modal 最大宽度不超过屏幕
|
|
|
const viewportWidth = ref(window.innerWidth);
|
|
|
@@ -460,32 +470,7 @@
|
|
|
content.addEventListener('animationend', () => content.classList.remove(animClass), { once: true });
|
|
|
}
|
|
|
|
|
|
- const wraps = document.querySelectorAll<HTMLElement>('.zxm-modal-wrap, .ant-modal-wrap, [class*="modal-wrap"]');
|
|
|
- wraps.forEach((wrap) => {
|
|
|
- if (isFullscreen.value) {
|
|
|
- wrap.style.position = '';
|
|
|
- wrap.style.left = '';
|
|
|
- wrap.style.top = '0';
|
|
|
- wrap.style.right = '';
|
|
|
- wrap.style.bottom = '';
|
|
|
- wrap.style.width = '';
|
|
|
- wrap.style.height = '';
|
|
|
- wrap.style.margin = '0';
|
|
|
- wrap.style.padding = '0';
|
|
|
- wrap.style.transform = '';
|
|
|
- } else {
|
|
|
- wrap.style.position = '';
|
|
|
- wrap.style.left = '';
|
|
|
- wrap.style.top = '';
|
|
|
- wrap.style.right = '';
|
|
|
- wrap.style.bottom = '';
|
|
|
- wrap.style.width = '';
|
|
|
- wrap.style.height = '';
|
|
|
- wrap.style.margin = '';
|
|
|
- wrap.style.padding = '';
|
|
|
- wrap.style.transform = '';
|
|
|
- }
|
|
|
- });
|
|
|
+ applyWrapStyles(isFullscreen.value);
|
|
|
draggedEl = null;
|
|
|
if (!isFullscreen.value) {
|
|
|
centerModal();
|
|
|
@@ -1898,20 +1883,26 @@
|
|
|
|
|
|
const queryModalWrap = (): HTMLElement | null => document.querySelector<HTMLElement>('.zxm-modal-wrap, .ant-modal-wrap, [class*="modal-wrap"]');
|
|
|
|
|
|
+ // 统一处理 modal-wrap 内联样式:全屏时置顶铺满,否则恢复默认
|
|
|
+ const applyWrapStyles = (fullscreen: boolean) => {
|
|
|
+ const wraps = document.querySelectorAll<HTMLElement>('.zxm-modal-wrap, .ant-modal-wrap, [class*="modal-wrap"]');
|
|
|
+ wraps.forEach((wrap) => {
|
|
|
+ wrap.style.position = '';
|
|
|
+ wrap.style.left = '';
|
|
|
+ wrap.style.top = fullscreen ? '0' : '';
|
|
|
+ wrap.style.right = '';
|
|
|
+ wrap.style.bottom = '';
|
|
|
+ wrap.style.width = '';
|
|
|
+ wrap.style.height = '';
|
|
|
+ wrap.style.margin = fullscreen ? '0' : '';
|
|
|
+ wrap.style.padding = fullscreen ? '0' : '';
|
|
|
+ wrap.style.transform = '';
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
const centerModal = () => {
|
|
|
nextTick(() => {
|
|
|
- const wrap = queryModalWrap();
|
|
|
- if (wrap) {
|
|
|
- wrap.style.position = '';
|
|
|
- wrap.style.left = '';
|
|
|
- wrap.style.top = '';
|
|
|
- wrap.style.right = '';
|
|
|
- wrap.style.bottom = '';
|
|
|
- wrap.style.width = '';
|
|
|
- wrap.style.height = '';
|
|
|
- wrap.style.margin = '';
|
|
|
- wrap.style.transform = '';
|
|
|
- }
|
|
|
+ applyWrapStyles(isFullscreen.value);
|
|
|
draggedEl = null;
|
|
|
});
|
|
|
};
|