diff --git a/mateclaw-ui/src/components/chat/ChatInput.vue b/mateclaw-ui/src/components/chat/ChatInput.vue
index 6fe364df..abe1bc5f 100644
--- a/mateclaw-ui/src/components/chat/ChatInput.vue
+++ b/mateclaw-ui/src/components/chat/ChatInput.vue
@@ -45,9 +45,9 @@
             <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
           </svg>
         </span>
-        <span class="approval-bar__label">允许</span>
+        <span class="approval-bar__label">{{ t('chat.approvalAllow') }}</span>
         <span class="approval-bar__tool">{{ pendingApproval.toolName }}</span>
-        <span class="approval-bar__label">执行？</span>
+        <span class="approval-bar__label">{{ t('chat.approvalExecute') }}</span>
       </div>
       <div class="approval-bar__actions">
         <button
@@ -58,7 +58,7 @@
           <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
             <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
           </svg>
-          拒绝
+          {{ t('chat.deny') }}
         </button>
         <button
           type="button"
@@ -68,7 +68,7 @@
           <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
             <polyline points="20 6 9 17 4 12"/>
           </svg>
-          允许
+          {{ t('chat.approve') }}
         </button>
       </div>
     </div>
@@ -729,4 +729,34 @@ defineExpose({
 .send-btn.is-interrupt:hover:not(:disabled) {
   background: #d97706;
 }
+
+/* ===== 移动端适配 ===== */
+@media (max-width: 768px) {
+  .chat-input-wrapper {
+    padding: 10px 12px 14px;
+  }
+
+  .approval-bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 10px 12px;
+  }
+
+  .approval-bar__info {
+    flex-wrap: wrap;
+  }
+
+  .approval-bar__actions {
+    justify-content: flex-end;
+  }
+
+  .approval-bar__tool {
+    max-width: 180px;
+  }
+
+  .attachment-chip__label span:first-child {
+    max-width: 180px;
+  }
+}
 </style>
diff --git a/mateclaw-ui/src/components/chat/MessageBubble.vue b/mateclaw-ui/src/components/chat/MessageBubble.vue
index 2bd2a68f..ca03cafc 100644
--- a/mateclaw-ui/src/components/chat/MessageBubble.vue
+++ b/mateclaw-ui/src/components/chat/MessageBubble.vue
@@ -1560,4 +1560,26 @@ watch(isGenerating, (generating) => {
   font-weight: 600;
   color: var(--mc-text-primary, #1e293b);
 }
+
+/* ===== 移动端适配 ===== */
+@media (max-width: 768px) {
+  .message-wrapper {
+    max-width: 100%;
+    gap: 8px;
+  }
+
+  .msg-body {
+    max-width: calc(100% - 40px);
+  }
+
+  .msg-avatar {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+  }
+
+  .error-card {
+    max-width: 100%;
+  }
+}
 </style>
diff --git a/mateclaw-ui/src/components/chat/MessageList.vue b/mateclaw-ui/src/components/chat/MessageList.vue
index e2b2bd82..e430ab20 100644
--- a/mateclaw-ui/src/components/chat/MessageList.vue
+++ b/mateclaw-ui/src/components/chat/MessageList.vue
@@ -185,6 +185,8 @@ watch(
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .welcome-logo {
@@ -272,9 +274,10 @@ watch(
 .suggestion-card__text {
   flex: 1;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 .suggestion-card__arrow {
@@ -334,4 +337,46 @@ watch(
   opacity: 1;
   pointer-events: auto;
 }
+
+/* ===== 移动端适配 ===== */
+@media (max-width: 768px) {
+  .message-list {
+    padding: 16px 12px 12px;
+  }
+
+  .message-list-content {
+    gap: 12px;
+  }
+
+  .empty-state {
+    min-height: 300px;
+  }
+
+  .welcome-screen {
+    padding: 24px 12px;
+  }
+
+  .welcome-logo__icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .welcome-title {
+    font-size: 22px;
+  }
+
+  .welcome-subtitle {
+    margin-bottom: 24px;
+    max-width: 100%;
+  }
+
+  .welcome-suggestions {
+    grid-template-columns: 1fr;
+    max-width: 100%;
+  }
+
+  .suggestion-card {
+    padding: 10px 12px;
+  }
+}
 </style>
diff --git a/mateclaw-ui/src/i18n/locales/en-US.ts b/mateclaw-ui/src/i18n/locales/en-US.ts
index 18c73356..fdb2c48d 100644
--- a/mateclaw-ui/src/i18n/locales/en-US.ts
+++ b/mateclaw-ui/src/i18n/locales/en-US.ts
@@ -145,6 +145,13 @@ export default {
     streamReconnecting: 'Reconnecting...',
     streamStopped: 'Stopped',
     streamCompleted: 'Completed',
+    // Approval bar
+    approvalAllow: 'Allow',
+    approvalExecute: 'to execute?',
+    // Time format
+    timeJustNow: 'Just now',
+    timeMinutesAgo: '{n}m ago',
+    timeHoursAgo: '{n}h ago',
   },
   nav: {
     chat: 'Chat',
diff --git a/mateclaw-ui/src/i18n/locales/zh-CN.ts b/mateclaw-ui/src/i18n/locales/zh-CN.ts
index b89e477c..a74f54a4 100644
--- a/mateclaw-ui/src/i18n/locales/zh-CN.ts
+++ b/mateclaw-ui/src/i18n/locales/zh-CN.ts
@@ -145,6 +145,13 @@ export default {
     streamReconnecting: '重新连接...',
     streamStopped: '已停止',
     streamCompleted: '已完成',
+    // 审批栏
+    approvalAllow: '允许',
+    approvalExecute: '执行？',
+    // 时间格式
+    timeJustNow: '刚刚',
+    timeMinutesAgo: '{n} 分钟前',
+    timeHoursAgo: '{n} 小时前',
   },
   nav: {
     chat: '对话',
diff --git a/mateclaw-ui/src/views/ChatConsole.vue b/mateclaw-ui/src/views/ChatConsole.vue
index f9ac4a34..e2038703 100644
--- a/mateclaw-ui/src/views/ChatConsole.vue
+++ b/mateclaw-ui/src/views/ChatConsole.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="chat-layout">
+    <!-- 移动端会话面板遮罩 -->
+    <Transition name="fade">
+      <div v-if="isMobile && convPanelOpen" class="conv-backdrop" @click="convPanelOpen = false"></div>
+    </Transition>
+
     <!-- 会话侧边栏 -->
-    <div class="conversation-panel">
+    <div class="conversation-panel" :class="{ 'mobile-open': convPanelOpen }">
       <div class="panel-header">
         <h2 class="panel-title">{{ $t('chat.conversations') }}</h2>
         <button class="new-chat-btn" @click="newConversation" :title="$t('chat.newChat')">
@@ -82,7 +87,12 @@
       <!-- 头部 -->
       <div class="chat-header">
         <div class="chat-header-left">
-          <div class="agent-badge" v-if="currentAgent">
+          <button v-if="isMobile" class="conv-toggle-btn" @click="convPanelOpen = !convPanelOpen" :title="$t('chat.conversations')">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+            </svg>
+          </button>
+          <div class="agent-badge" v-if="currentAgent" :title="currentAgent.name">
             <span class="agent-badge-icon">{{ currentAgent.icon || '🤖' }}</span>
             <span class="agent-badge-name">{{ currentAgent.name }}</span>
             <span class="agent-badge-type">{{ currentAgent.agentType === 'react' ? 'ReAct' : 'Plan-Execute' }}</span>
@@ -196,6 +206,16 @@ import MessageList from '@/components/chat/MessageList.vue'
 import ChatInput from '@/components/chat/ChatInput.vue'
 import StreamLoadingBar from '@/components/chat/StreamLoadingBar.vue'
 
+// ============ 移动端状态 ============
+const isMobile = ref(false)
+const convPanelOpen = ref(false)
+let mobileQuery: MediaQueryList | null = null
+
+function handleMobileChange(e: MediaQueryListEvent | MediaQueryList) {
+  isMobile.value = e.matches
+  if (!e.matches) convPanelOpen.value = false
+}
+
 // ============ 配置和常量 ============
 const suggestions = computed(() => [
   t('chat.suggestionIntro'),
@@ -443,12 +463,16 @@ const eligibleModels = computed(() => {
 // ============ 生命周期 ============
 onMounted(async () => {
   document.addEventListener('click', handleCodeCopy)
+  mobileQuery = window.matchMedia('(max-width: 768px)')
+  handleMobileChange(mobileQuery)
+  mobileQuery.addEventListener('change', handleMobileChange)
   await Promise.all([loadAgents(), loadModelState(), loadConversations()])
   await hydrateStateFromRoute()
 })
 
 onBeforeUnmount(() => {
   document.removeEventListener('click', handleCodeCopy)
+  mobileQuery?.removeEventListener('change', handleMobileChange)
   stopChatGeneration()
 })
 
@@ -567,6 +591,7 @@ function syncRouteState() {
 }
 
 async function selectConversation(conv: Conversation) {
+  if (isMobile.value) convPanelOpen.value = false
   resetStreamingState()
   currentConversationId.value = conv.conversationId
   selectedAgentId.value = conv.agentId || selectedAgentId.value
@@ -1008,12 +1033,12 @@ function parseThinkingContent(raw: string): { content: string; thinking: string;
 }
 
 function formatConversationTime(time?: string) {
-  if (!time) return 'just now'
+  if (!time) return t('chat.timeJustNow')
   const date = new Date(time)
   const diff = Date.now() - date.getTime()
-  if (diff < 60 * 60 * 1000) return `${Math.max(1, Math.floor(diff / (60 * 1000)))}m ago`
-  if (diff < 24 * 60 * 60 * 1000) return `${Math.floor(diff / (60 * 60 * 1000))}h ago`
-  return date.toLocaleDateString('zh-CN')
+  if (diff < 60 * 60 * 1000) return t('chat.timeMinutesAgo', { n: Math.max(1, Math.floor(diff / (60 * 1000))) })
+  if (diff < 24 * 60 * 60 * 1000) return t('chat.timeHoursAgo', { n: Math.floor(diff / (60 * 60 * 1000)) })
+  return date.toLocaleDateString()
 }
 
 function handleCodeCopy(e: MouseEvent) {
@@ -1379,4 +1404,94 @@ function handleCodeCopy(e: MouseEvent) {
 .btn-primary:hover {
   background: var(--mc-primary-hover);
 }
+
+/* ===== 移动端元素（桌面端隐藏） ===== */
+.conv-backdrop {
+  display: none;
+}
+
+.conv-toggle-btn {
+  display: none;
+}
+
+/* ===== 移动端适配 ===== */
+@media (max-width: 768px) {
+  .conversation-panel {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    width: 280px;
+    min-width: 280px;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    box-shadow: none;
+  }
+
+  .conversation-panel.mobile-open {
+    transform: translateX(0);
+    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
+  }
+
+  .conv-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 99;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  .conv-toggle-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--mc-border);
+    background: var(--mc-bg-elevated);
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--mc-text-secondary);
+    flex-shrink: 0;
+    transition: all 0.15s;
+  }
+
+  .conv-toggle-btn:hover {
+    border-color: var(--mc-primary);
+    color: var(--mc-primary);
+  }
+
+  .chat-header {
+    padding: 10px 12px;
+    gap: 8px;
+  }
+
+  .chat-header-left {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: 6px;
+  }
+
+  .agent-badge {
+    padding: 4px 8px;
+  }
+
+  .agent-badge-name,
+  .agent-badge-type {
+    display: none;
+  }
+
+  .model-select {
+    min-width: 0;
+    max-width: 160px;
+    flex: 1;
+  }
+
+  .drop-overlay__content {
+    padding: 24px 32px;
+    font-size: 14px;
+  }
+}
 </style>
diff --git a/mateclaw-ui/src/views/Sessions.vue b/mateclaw-ui/src/views/Sessions.vue
index a524dffd..c606a794 100644
--- a/mateclaw-ui/src/views/Sessions.vue
+++ b/mateclaw-ui/src/views/Sessions.vue
@@ -21,7 +21,7 @@
         <thead>
           <tr>
             <th>{{ t('sessions.columns.session') }}</th>
-            <th>{{ t('sessions.columns.source') || '来源' }}</th>
+            <th>{{ t('sessions.columns.source') }}</th>
             <th>{{ t('sessions.columns.agent') }}</th>
             <th>{{ t('sessions.columns.messages') }}</th>
             <th>{{ t('sessions.columns.status') }}</th>
diff --git a/mateclaw-ui/src/views/layout/MainLayout.vue b/mateclaw-ui/src/views/layout/MainLayout.vue
index 88640abc..3990505f 100644
--- a/mateclaw-ui/src/views/layout/MainLayout.vue
+++ b/mateclaw-ui/src/views/layout/MainLayout.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="app-layout">
+    <!-- 移动端背景遮罩 -->
+    <Transition name="fade">
+      <div v-if="isMobile && mobileMenuOpen" class="sidebar-backdrop" @click="mobileMenuOpen = false"></div>
+    </Transition>
+
     <!-- 左侧导航栏 -->
-    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
+    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed && !isMobile, 'mobile-open': mobileMenuOpen }">
       <!-- Logo -->
       <div class="sidebar-logo">
         <div class="logo-icon">
@@ -40,6 +45,7 @@
               class="nav-item"
               :class="{ active: isNavItemActive(item) }"
               :title="sidebarCollapsed ? item.label : ''"
+              @click="onNavClick"
             >
               <span class="nav-icon" v-html="item.icon"></span>
               <span v-if="!sidebarCollapsed" class="nav-label">{{ item.label }}</span>
@@ -85,13 +91,24 @@
 
     <!-- 主内容区 -->
     <main class="main-content">
+      <!-- 移动端顶部栏 -->
+      <div v-if="isMobile" class="mobile-topbar">
+        <button class="mobile-menu-btn" @click="mobileMenuOpen = true" :title="t('common.expandSidebar')">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="3" y1="6" x2="21" y2="6"/>
+            <line x1="3" y1="12" x2="21" y2="12"/>
+            <line x1="3" y1="18" x2="21" y2="18"/>
+          </svg>
+        </button>
+        <span class="mobile-topbar-title">Mate<span class="logo-name-highlight">Claw</span></span>
+      </div>
       <router-view />
     </main>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useThemeStore } from '@/stores/useThemeStore'
@@ -103,6 +120,30 @@ const { t } = useI18n()
 const themeStore = useThemeStore()
 const sidebarCollapsed = ref(localStorage.getItem('mc-sidebar-collapsed') === 'true')
 
+// 移动端状态
+const isMobile = ref(false)
+const mobileMenuOpen = ref(false)
+let mobileQuery: MediaQueryList | null = null
+
+function handleMobileChange(e: MediaQueryListEvent | MediaQueryList) {
+  isMobile.value = e.matches
+  if (!e.matches) mobileMenuOpen.value = false
+}
+
+onMounted(() => {
+  mobileQuery = window.matchMedia('(max-width: 768px)')
+  handleMobileChange(mobileQuery)
+  mobileQuery.addEventListener('change', handleMobileChange)
+})
+
+onBeforeUnmount(() => {
+  mobileQuery?.removeEventListener('change', handleMobileChange)
+})
+
+function onNavClick() {
+  if (isMobile.value) mobileMenuOpen.value = false
+}
+
 const username = computed(() => localStorage.getItem('username') || 'User')
 const role = computed(() => localStorage.getItem('role') || 'user')
 const userInitial = computed(() => username.value.charAt(0).toUpperCase())
@@ -527,9 +568,90 @@ function logout() {
   min-width: 0;
 }
 
+/* ===== 移动端元素（桌面端隐藏） ===== */
+.sidebar-backdrop {
+  display: none;
+}
+
+.mobile-topbar {
+  display: none;
+}
+
 /* 动画 */
 .fade-enter-active,
 .fade-leave-active { transition: opacity 0.15s ease; }
 .fade-enter-from,
 .fade-leave-to { opacity: 0; }
+
+/* ===== 移动端适配 ===== */
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 1000;
+    width: 260px;
+    min-width: 260px;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    box-shadow: none;
+  }
+
+  .sidebar.mobile-open {
+    transform: translateX(0);
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+  }
+
+  .sidebar.collapsed {
+    width: 260px;
+    min-width: 260px;
+  }
+
+  .collapse-btn {
+    display: none;
+  }
+
+  .sidebar-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  .mobile-topbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background: var(--mc-sidebar-bg);
+    border-bottom: 1px solid var(--mc-border-light);
+    flex-shrink: 0;
+  }
+
+  .mobile-topbar-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--mc-text-primary);
+  }
+
+  .mobile-menu-btn {
+    width: 36px;
+    height: 36px;
+    border: 1px solid var(--mc-border);
+    background: var(--mc-bg-elevated);
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--mc-text-primary);
+    flex-shrink: 0;
+  }
+
+  .mobile-menu-btn:hover {
+    background: var(--mc-bg-sunken);
+  }
+}
 </style>