diff --git a/portal-ui/src/layout/components/User.vue b/portal-ui/src/layout/components/User.vue
index 4ee2a11..d803106 100644
--- a/portal-ui/src/layout/components/User.vue
+++ b/portal-ui/src/layout/components/User.vue
@@ -24,11 +24,8 @@
 						:title="$t('common.myAccount')">
 						<UserAccount />
 					</a-tab-pane>
-					<a-tab-pane
-						key="money"
-						:title="$t('common.moneyInvite')">
-						<Money />
-					</a-tab-pane>
+					<!-- 隐藏有奖邀请 -->
+					<!-- <a-tab-pane key="money" :title="$t('common.moneyInvite')"><Money /></a-tab-pane> -->
 					<!-- 隐藏快速充值入口 -->
 					<!-- <a-tab-pane
 						key="recharge"
@@ -40,11 +37,8 @@
 						:title="$t('common.myProduct')">
 						<ResumeRecord />
 					</a-tab-pane>
-					<a-tab-pane
-						key="invite"
-						:title="$t('common.inviteRecord')">
-						<RewardRecord />
-					</a-tab-pane>
+					<!-- 隐藏邀请消费记录 -->
+					<!-- <a-tab-pane key="invite" :title="$t('common.inviteRecord')"><RewardRecord /></a-tab-pane> -->
 				</a-tabs>
 			</div>
 		</mf-dialog>
@@ -64,12 +58,8 @@
 <script>
 import Forgot from './Forgot.vue'
 import Register from './Register.vue'
-import { mapGetters } from 'vuex'
-import i18n from '@/lang/i18n'
-import Money from './Money.vue'
 import UserAccount from './UserAccount.vue'
 import ResumeRecord from './ResumeRecord.vue'
-import RewardRecord from './RewardRecord.vue'
 
 export default {
 	data() {
@@ -91,13 +81,8 @@ export default {
 	components: {
 		Forgot,
 		Register,
-		Money,
 		UserAccount,
-		ResumeRecord,
-		RewardRecord
-	},
-	computed: {
-		...mapGetters(['lang'])
+		ResumeRecord
 	},
 	mounted() {
 		if (this.register) {
@@ -123,12 +108,6 @@ export default {
 			this.registerVisible = true
 			this.$emit('cancel')
 		},
-		changeLang(value) {
-			if (value != this.lang) {
-				this.$store.dispatch('main/setLanguage', value)
-				i18n.global.locale = value
-			}
-		},
 		back() {
 			this.forgotVisible = false
 			this.$emit('open')
diff --git a/portal-ui/src/layout/components/appMain.vue b/portal-ui/src/layout/components/appMain.vue
index 0098a9b..330008b 100644
--- a/portal-ui/src/layout/components/appMain.vue
+++ b/portal-ui/src/layout/components/appMain.vue
@@ -24,6 +24,8 @@
 <script>
 import { mapGetters } from 'vuex'
 import Breadcrumb from './Breadcrumb.vue'
+const LAYOUT_MOBILE_MAX = 768
+
 export default {
 	name: 'app-main',
 	props: {
@@ -33,6 +35,21 @@ export default {
 		}
 	},
 	components: { Breadcrumb },
+	data() {
+		return {
+			layoutWidth:
+				typeof window !== 'undefined' ? window.innerWidth : LAYOUT_MOBILE_MAX + 1
+		}
+	},
+	mounted() {
+		this._layoutOnResize = () => {
+			this.layoutWidth = window.innerWidth
+		}
+		window.addEventListener('resize', this._layoutOnResize)
+	},
+	beforeUnmount() {
+		window.removeEventListener('resize', this._layoutOnResize)
+	},
 	computed: {
 		...mapGetters(['cachedViews', 'sidebar']),
 		// 相同路由，不同参数缓存问题
@@ -43,7 +60,10 @@ export default {
 			return !this.sidebar.opened
 		},
 		style() {
-			let sidebarWidth = this.isCollapsed ? '50px' : this.sidebar.width
+			if (this.layoutWidth <= LAYOUT_MOBILE_MAX) {
+				return { width: '100%' }
+			}
+			const sidebarWidth = this.isCollapsed ? '56px' : this.sidebar.width
 			return {
 				width: `calc(100% - ${sidebarWidth})`
 			}
@@ -70,7 +90,7 @@ export default {
 	}
 }
 
-@media (max-width: 576px) {
+@media (max-width: 768px) {
 	.app-main {
 		&-wrap {
 			width: 100% !important;
diff --git a/portal-ui/src/layout/components/navBar.vue b/portal-ui/src/layout/components/navBar.vue
index 869d5a4..b63e313 100644
--- a/portal-ui/src/layout/components/navBar.vue
+++ b/portal-ui/src/layout/components/navBar.vue
@@ -1,11 +1,23 @@
 <template>
 	<div class="navbar">
 		<div class="left-menu">
-			<mf-icon
-				:class="['left-collapse', { isCollapse: isCollapse }]"
-				cursor="pointer"
-				@click="$store.dispatch('main/toggleSideBar')"
-				value="icon-shrink" />
+			<button
+				type="button"
+				class="sidebar-trigger"
+				:aria-expanded="sidebar.opened"
+				aria-label="展开或收起侧栏"
+				@click="$store.dispatch('main/toggleSideBar')">
+				<mf-icon
+					class="sidebar-trigger__icon sidebar-trigger__icon--desktop"
+					:class="{ isCollapse: isCollapse }"
+					cursor="pointer"
+					value="icon-shrink" />
+				<span class="sidebar-trigger__icon sidebar-trigger__icon--mobile" aria-hidden="true">
+					<span class="hamburger-line" />
+					<span class="hamburger-line" />
+					<span class="hamburger-line" />
+				</span>
+			</button>
 			<div class="logo">
 				<div
 					class="logo-wrap"
@@ -31,20 +43,9 @@
 				</mf-button>
 			</div>
 			<div class="right-menu-item language">
-				<a-dropdown @select="handleSelect">
-					<mf-button type="text">
-						{{ localeName }}
-						<icon-down />
-					</mf-button>
-					<template #content>
-						<a-doption
-							v-for="(name, code) in localeNames"
-							:key="code"
-							:value="code">
-							{{ name }}
-						</a-doption>
-					</template>
-				</a-dropdown>
+				<mf-button type="text" disabled class="language-display">
+					{{ localeName }}
+				</mf-button>
 			</div>
 			<div
 				class="right-menu-item user"
@@ -97,7 +98,7 @@ import { mapGetters, mapState } from 'vuex'
 import cloneDeep from 'lodash-es/cloneDeep'
 import { constantRoutes } from '@/router/index.js'
 import Login from './Login.vue'
-import i18n, { LOCALE_NAMES } from '@/lang/i18n'
+import { LOCALE_NAMES } from '@/lang/i18n'
 import User from './User.vue'
 
 export default {
@@ -126,9 +127,6 @@ export default {
 		demoEnv() {
 			return import.meta.env.MODE === 'demo'
 		},
-		localeNames() {
-			return LOCALE_NAMES
-		},
 		localeName() {
 			return LOCALE_NAMES[this.lang] || 'English'
 		},
@@ -219,12 +217,6 @@ export default {
 				this.openLogin()
 			}
 		},
-		handleSelect(value) {
-			if (value != this.lang) {
-				this.$store.dispatch('main/setLanguage', value)
-				i18n.global.locale = value
-			}
-		},
 		logout() {
 			this.$store.dispatch('user/logout2').then((_) => {
 				this.$router.replace('/')
@@ -246,39 +238,71 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 	box-sizing: content-box;
-	padding-left: 30px;
+	padding-left: 20px;
 	padding-right: 30px;
 
-	.left {
+	.left-menu {
 		display: flex;
 		align-items: center;
 		flex: 1;
+		padding-left: 4px;
+		height: 60px;
+		gap: 8px;
+		min-width: 0;
 
-		&-collapse {
-			display: none;
-			transition: 0.25s;
+		.sidebar-trigger {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			flex-shrink: 0;
+			padding: 8px;
+			margin: 0;
+			border: none;
+			background: transparent;
+			cursor: pointer;
+			border-radius: 10px;
+			color: rgba(255, 255, 255, 0.92);
 
-			&.isCollapse {
-				transform: rotate(-180deg);
+			&:hover {
+				background: rgba(255, 255, 255, 0.08);
+			}
+
+			&__icon--desktop {
+				display: flex;
+				transition: transform 0.25s;
+
+				&.isCollapse {
+					transform: rotate(-180deg);
+				}
+			}
+
+			&__icon--mobile {
+				display: none;
+				flex-direction: column;
+				justify-content: center;
+				gap: 5px;
+				width: 22px;
+				padding: 2px 0;
 			}
 		}
 
-		&-menu {
-			padding-left: 8px;
+		.hamburger-line {
+			display: block;
+			height: 2px;
+			width: 100%;
+			border-radius: 1px;
+			background: currentColor;
+		}
+
+		.logo {
 			display: flex;
-			align-items: center;
-			height: 60px;
+			align-items: flex-end;
+			cursor: pointer;
+			color: var(--color-text-1);
 
-			.logo {
+			&-wrap {
 				display: flex;
-				align-items: flex-end;
-				cursor: pointer;
-				color: var(--color-text-1);
-
-				&-wrap {
-					display: flex;
-					align-items: center;
-				}
+				align-items: center;
 			}
 		}
 	}
@@ -309,6 +333,12 @@ export default {
 						background-color: transparent;
 					}
 				}
+
+				.language-display[disabled] {
+					color: #999999 !important;
+					opacity: 0.85;
+					cursor: not-allowed;
+				}
 			}
 
 			&.logout {
@@ -410,23 +440,23 @@ export default {
 	}
 }
 
-@media (max-width: 576px) {
+@media (max-width: 768px) {
 	.navbar {
-		padding: 0 10px;
-		.left {
-			&-collapse {
-				display: block;
-				font-size: 18px;
+		padding: 0 12px;
+
+		.left-menu {
+			.sidebar-trigger {
+				&__icon--desktop {
+					display: none !important;
+				}
+
+				&__icon--mobile {
+					display: flex !important;
+				}
 			}
 
-			&-menu {
-				display: flex;
-				.logo {
-					display: none;
-				}
-				.mf-icon {
-					color: #fff;
-				}
+			.logo {
+				display: none;
 			}
 		}
 
diff --git a/portal-ui/src/layout/components/sideBar.vue b/portal-ui/src/layout/components/sideBar.vue
index e02bb05..4a589b8 100644
--- a/portal-ui/src/layout/components/sideBar.vue
+++ b/portal-ui/src/layout/components/sideBar.vue
@@ -124,7 +124,7 @@ export default {
 		1 100%;
 
 	&.collapsed {
-		width: 50px !important;
+		width: 56px !important;
 		overflow: hidden;
 
 		:deep(.arco-menu) {
@@ -134,20 +134,27 @@ export default {
 
 	:deep(.arco-menu) {
 		background-color: transparent;
-		padding-left: 16px;
+		padding: 8px 12px 12px;
 
 		&-item {
-			width: 180px;
+			min-height: 48px;
+			line-height: 1.4;
+			font-size: 15px;
 			background-color: transparent;
 			color: rgba(255, 255, 255, 0.7);
 			border-radius: 10px;
-			margin-bottom: 12px;
+			margin-bottom: 10px;
 
 			&.arco-menu-selected,
 			&:hover {
 				background-color: rgb(var(--primary-6));
 			}
 		}
+
+		&:not(.arco-menu-collapsed) .arco-menu-item {
+			width: calc(100% - 8px);
+			max-width: 100%;
+		}
 	}
 
 	.toogle-menu {
@@ -172,18 +179,22 @@ export default {
 	}
 }
 
-@media (max-width: 576px) {
+@media (max-width: 768px) {
 	.sidebar-container {
 		position: fixed;
 		left: 0px;
 		top: 60px;
-		z-index: 10;
+		z-index: 100;
 		height: calc(100% - 60px);
 		overflow: hidden;
-		
+		box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
+
 		&.collapsed {
 			width: 0px !important;
+			min-width: 0 !important;
 			border-right: 0;
+			box-shadow: none;
+			pointer-events: none;
 		}
 	}
 }
diff --git a/portal-ui/src/layout/default.vue b/portal-ui/src/layout/default.vue
index 2645d08..93c6e7d 100644
--- a/portal-ui/src/layout/default.vue
+++ b/portal-ui/src/layout/default.vue
@@ -1,5 +1,10 @@
 <template>
 	<div class="app-wrapper">
+		<div
+			v-show="showSidebar && mobileDrawerOpen"
+			class="sidebar-backdrop"
+			aria-hidden="true"
+			@click="closeMobileDrawer" />
 		<div class="fixed-header">
 			<nav-bar class="nav-bar" />
 		</div>
@@ -18,6 +23,8 @@
 import { mapGetters } from 'vuex'
 import { sideBar, appMain, navBar, appFooter } from './components'
 
+const LAYOUT_MOBILE_MAX = 768
+
 export default {
 	name: 'layout',
 	components: {
@@ -26,16 +33,44 @@ export default {
 		navBar,
 		appFooter
 	},
+	data() {
+		return {
+			layoutWidth:
+				typeof window !== 'undefined' ? window.innerWidth : LAYOUT_MOBILE_MAX + 1
+		}
+	},
 	computed: {
 		...mapGetters(['sidebar']),
 		isCollapsed() {
 			return !this.sidebar.opened
 		},
+		isMobileLayout() {
+			return this.layoutWidth <= LAYOUT_MOBILE_MAX
+		},
+		mobileDrawerOpen() {
+			return this.isMobileLayout && this.sidebar.opened
+		},
 		// 是否显示菜单
 		showSidebar() {
 			let { menu } = this.$route.query || {}
 			return menu != 0
 		}
+	},
+	mounted() {
+		this._layoutOnResize = () => {
+			this.layoutWidth = window.innerWidth
+		}
+		window.addEventListener('resize', this._layoutOnResize)
+	},
+	beforeUnmount() {
+		window.removeEventListener('resize', this._layoutOnResize)
+	},
+	methods: {
+		closeMobileDrawer() {
+			if (this.isMobileLayout && this.sidebar.opened) {
+				this.$store.dispatch('main/closeSideBar')
+			}
+		}
 	}
 }
 </script>
@@ -49,6 +84,10 @@ export default {
 	overflow: hidden;
 	background: #0f0f12;
 
+	.sidebar-backdrop {
+		display: none;
+	}
+
 	.fixed-header {
 		z-index: 100;
 		.navbar {
@@ -59,6 +98,18 @@ export default {
 	.main-wrapper {
 		display: flex;
 		height: calc(100% - 60px);
+		position: relative;
+	}
+}
+
+@media (max-width: 768px) {
+	.app-wrapper .sidebar-backdrop {
+		display: block;
+		position: fixed;
+		inset: 60px 0 0 0;
+		z-index: 99;
+		background: rgba(0, 0, 0, 0.55);
+		backdrop-filter: blur(2px);
 	}
 }
 </style>
diff --git a/portal-ui/src/store/modules/main.js b/portal-ui/src/store/modules/main.js
index 6c8eee5..829bc80 100644
--- a/portal-ui/src/store/modules/main.js
+++ b/portal-ui/src/store/modules/main.js
@@ -16,11 +16,13 @@ const state = {
 	sidebar: {
 		opened: isMobile() ? false : true,
 		withoutAnimation: false,
-		width: Cookies.get('sidebarWidth') || '230px'
+		// 左侧导航默认适中宽度（用户若需更窄/宽可本地调小范围会写 cookie）
+		width: Cookies.get('sidebarWidth') || '268px'
 	},
 	topMenu: Cookies.get('topMenu'),
 	// 当前语言
-	language: Cookies.get('language') || 'en_US',
+	// 多语言切换已禁用：全站固定繁体中文（zh_HK）
+	language: 'zh_HK',
 	// 主题 ''：亮色 / dark:暗黑
 	theme: $storage.get('theme') || '',
 	// 系统端
diff --git a/portal-ui/src/utils/base.js b/portal-ui/src/utils/base.js
index 85f699f..a78b92a 100644
--- a/portal-ui/src/utils/base.js
+++ b/portal-ui/src/utils/base.js
@@ -27,9 +27,12 @@ export const isFirefox = (_) => {
     }
 }
 
-export const isMobile = _=> {
-     const userAgent = navigator.userAgent;
-    const isMobile = /iPad|Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
-    const isSmallScreen = window.innerWidth <= 576;
-    return isMobile || isSmallScreen;
+export const isMobile = (_) => {
+	const userAgent = navigator.userAgent
+	const uaMobile =
+		/iPad|Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+			userAgent
+		)
+	const isSmallScreen = typeof window !== 'undefined' && window.innerWidth <= 768
+	return uaMobile || isSmallScreen
 }