From f22390ab55324f0bb2c58802e0c2167453d5370a Mon Sep 17 00:00:00 2001
From: xuyuxiang <xuyuxiang29@foxmail.com>
Date: Tue, 16 Sep 2025 00:50:28 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=8A=BD=E5=B1=89=E6=A8=A1=E5=BC=8F=E4=B8=8B=EF=BC=8C?=
 =?UTF-8?q?=E6=8A=BD=E5=B1=89=E7=9A=84=E5=AE=BD=E5=BA=A6=E5=9C=A8=E5=B0=8F?=
 =?UTF-8?q?=E5=B1=8F=E5=B9=95=E4=B8=8B=E5=B1=95=E7=A4=BA=E4=B8=BA100%?=
 =?UTF-8?q?=EF=BC=8C=E5=85=B6=E4=BB=96=E6=83=85=E5=86=B5=E4=B8=8B=E4=B8=BA?=
 =?UTF-8?q?=E4=BC=A0=E5=85=A5=E7=9A=84=E5=8E=9F=E5=A7=8B=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/XnFormContainer/index.vue  | 42 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/snowy-admin-web/src/components/XnFormContainer/index.vue b/snowy-admin-web/src/components/XnFormContainer/index.vue
index ce586bd3..3cbbbe33 100644
--- a/snowy-admin-web/src/components/XnFormContainer/index.vue
+++ b/snowy-admin-web/src/components/XnFormContainer/index.vue
@@ -10,7 +10,14 @@
 			<slot :name="slotKey" />
 		</template>
 	</a-modal>
-	<a-drawer v-else :open="visible" v-bind="$attrs" @close="cancel" :footer-style="{ textAlign: 'right' }">
+	<a-drawer
+		v-else
+		:open="visible"
+		v-bind="$attrs"
+		@close="cancel"
+		:footer-style="{ textAlign: 'right' }"
+		:width="drawerWidth"
+	>
 		<template v-for="slotKey in slotKeys" #[slotKey]>
 			<slot :name="slotKey" />
 		</template>
@@ -18,9 +25,10 @@
 </template>
 
 <script setup>
-	import { useSlots } from 'vue'
+	import { useSlots, computed, useAttrs, onMounted, onUnmounted } from 'vue'
 	import { globalStore } from '@/store'
 	const slots = useSlots()
+	const attrs = useAttrs()
 	const store = globalStore()
 	const props = defineProps({
 		visible: {
@@ -42,10 +50,30 @@
 	const isModal = computed(() => {
 		return FormContainerTypeEnum.MODAL === formStyle.value
 	})
+
+	// 响应式抽屉宽度
+	const isSmallScreen = ref(window.innerWidth <= 576)
+	const drawerWidth = computed(() => {
+		return isSmallScreen.value ? '100%' : attrs.width // 小屏幕100%宽度，其他情况使用默认值
+	})
+
 	const emit = defineEmits(['close'])
 	const cancel = () => {
 		emit('close')
 	}
+
+	// 监听窗口大小变化
+	const handleResize = () => {
+		isSmallScreen.value = window.innerWidth <= 576
+	}
+
+	onMounted(() => {
+		window.addEventListener('resize', handleResize)
+	})
+
+	onUnmounted(() => {
+		window.removeEventListener('resize', handleResize)
+	})
 </script>
 <script>
 	// 声明额外的选项
@@ -53,3 +81,13 @@
 		inheritAttrs: false
 	}
 </script>
+
+<style scoped>
+	/* 确保小屏幕下抽屉不会有额外的边距或滚动条 */
+	@media (max-width: 576px) {
+		:deep(.ant-drawer-content-wrapper) {
+			width: 100% !important;
+			max-width: 100% !important;
+		}
+	}
+</style>