【底座】文件上传以及直连或反向代理兼容，弹窗模式优化滚动条及未重置问题

snowy-admin-web/src/components/XnFormContainer/index.vue

@@ -5,7 +5,7 @@
 		:open="isOpen"
 		:width="modalWidth"
 		:footer="slots.footer ? undefined : null"
-		:wrap-class-name="`${wrapClassName} ${fullscreenClass}`"
+		:wrap-class-name="`xn-form-modal ${wrapClassName} ${fullscreenClass}`"
 		:bodyStyle="calcBodyStyle"
 		@cancel="cancel"
 	>
@@ -529,6 +529,11 @@
 				// 重置对话框
 				toggleResetDrag()
 				modalFullscreen.value = false
+				modalWidth.value = props.width
+				modalHeight.value = 'auto'
+				prevModalWidth.value = props.width
+				prevModalHeight.value = 'auto'
+				fullscreenClass.value = ''
 				// 重置抽屉
 				toggleResetResize()
 				drawerFullscreen.value = false
@@ -559,6 +564,17 @@
 	}
 </script>
 
+<style lang="less">
+	/* 弹窗 body 隐藏滚动条，保留滚动功能 */
+	.xn-form-modal .ant-modal-body {
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+</style>
+
 <style lang="less" scoped>
 	/* 确保小屏幕下抽屉不会有额外的边距或滚动条 */
 	@media (max-width: 576px) {

snowy-admin-web/src/components/XnUpload/index.vue

@@ -113,6 +113,7 @@
 	import tool from '@/utils/tool'
 	import fileApi from '@/api/dev/fileApi'
 	import { convertUrl } from '@/utils/apiAdaptive'
+	import { getApiBaseUrl } from '@/utils/request'
 	import { message, Upload } from 'ant-design-vue'
 	import { cloneDeep } from 'lodash-es'
 	const fileList = ref([])
@@ -204,8 +205,9 @@
 			required: false
 		}
 	})
+	const apiBase = getApiBaseUrl()
 	const action =
-		props.uploadResultType === 'id' ? '/api' + props.uploadReturnIdApi : '/api' + props.uploadDynamicReturnUrlApi
+		props.uploadResultType === 'id' ? apiBase + props.uploadReturnIdApi : apiBase + props.uploadDynamicReturnUrlApi
 
 	// 构造文件对象
 	const buildFileObject = (url, id) => {
@@ -226,9 +228,9 @@
 			}
 		}
 		return {
-			data: url ? url : '/api' + props.uploadIdDownloadUrl + id,
+			data: url ? url : apiBase + props.uploadIdDownloadUrl + id,
 			name: name,
-			url: url ? url : '/api' + props.uploadIdDownloadUrl + id,
+			url: url ? url : apiBase + props.uploadIdDownloadUrl + id,
 			status: 'done',
 			response: {
 				data: url ? url : id,
@@ -400,7 +402,7 @@
 		previewTitle.value = file.name
 		// 如果返回的是id
 		if (props.uploadResultType === 'id') {
-			previewObj.value = '/api' + props.uploadIdDownloadUrl + file.response.data
+			previewObj.value = apiBase + props.uploadIdDownloadUrl + file.response.data
 		} else {
 			previewObj.value = file.response.data
 		}

snowy-admin-web/src/layout/components/message.vue

@@ -90,6 +90,7 @@
 	import router from '@/router'
 	import { onMounted } from 'vue'
 	import { convertUrl } from '@/utils/apiAdaptive'
+	import { getApiBaseUrl } from '@/utils/request'
 	import tool from '@/utils/tool'
 
 	const miniMessageLoading = ref(false)
@@ -104,9 +105,16 @@
 	// 创建ws连接
 	const createWebSocketConnect = () => {
 		if ('WebSocket' in window) {
-			const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
-			let url =
-				protocol + window.location.host + '/api' + convertUrl('/dev/message/ws') + '?token=' + tool.data.get('TOKEN')
+			const apiBase = getApiBaseUrl()
+			let url
+			if (/^https?:\/\//.test(apiBase)) {
+				const wsBase = apiBase.replace(/^http/, 'ws')
+				url = wsBase + convertUrl('/dev/message/ws') + '?token=' + tool.data.get('TOKEN')
+			} else {
+				const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
+				url =
+					protocol + window.location.host + apiBase + convertUrl('/dev/message/ws') + '?token=' + tool.data.get('TOKEN')
+			}
 			const socket = new WebSocket(url)
 			// 监听打开事件
 			socket.onopen = () => {

snowy-admin-web/src/utils/request.js

@@ -33,10 +33,12 @@ const errorCodeMap = {
 }
 // 定义一个重新登录弹出窗的变量
 const loginBack = ref(false)
+// 判断是否为直连模式（仅生产环境 + API_URL 配置了完整后端地址时生效）
+const isDirectMode = !import.meta.env.DEV && sysConfig.API_URL && /^https?:\/\//.test(sysConfig.API_URL)
 // 创建 axios 实例
 const service = axios.create({
-	baseURL: '/api', // api base_url
-	timeout: sysConfig.TIMEOUT // 请求超时时间
+	baseURL: isDirectMode ? sysConfig.API_URL : '/api',
+	timeout: sysConfig.TIMEOUT
 })
 
 // HTTP request 拦截器
@@ -179,4 +181,9 @@ export const baseRequest = (url, value = {}, method = 'post', options = {}) => {
 	}
 }
 
+// 获取API基础地址（供上传组件、WebSocket等非axios场景使用）
+export const getApiBaseUrl = () => {
+	return isDirectMode ? sysConfig.API_URL : '/api'
+}
+
 export default service