diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9b50e3b424..4a1af30b8e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -7,11 +7,13 @@ import ManualKnowledgeEditor from '@/components/manual-knowledge-editor.vue'
 import UploadConfirmHost from '@/components/UploadConfirmHost.vue'
 import { useAuthStore } from '@/stores/auth'
 import { useSettingsStore } from '@/stores/settings'
+import { useUIStore } from '@/stores/ui'
 import { getCurrentUser, userInfoFromApi } from '@/api/auth'
 import { consumePendingTenantSwitchToast } from '@/utils/tenantSwitch'
 import { useRoleLabel } from '@/composables/useRoleLabel'
 import { notifyLoginSuccess } from '@/utils/loginNotify'
 import { renderWorkspaceNotifyContent } from '@/utils/workspaceNotifyContent'
+import { evalBreakpoint, startListening, stopListening, isMobile } from '@/composables/useBreakpoint'
 
 // TDesign locale configs
 import enUSConfig from 'tdesign-vue-next/esm/locale/en_US'
@@ -24,6 +26,7 @@ const { formatRole, roleIcon } = useRoleLabel()
 const router = useRouter()
 const authStore = useAuthStore()
 const settingsStore = useSettingsStore()
+const uiStore = useUIStore()
 
 const tdLocaleMap: Record<string, object> = {
   'en-US': enUSConfig,
@@ -194,6 +197,16 @@ watch(
   { immediate: true },
 )
 
+// 同步断点响应式状态到 UI Store。immediate 让 store 在首帧就与视口一致，
+// 否则手机上要等 onMounted 才切形态，会先闪一下桌面侧栏。
+watch(isMobile, (val) => {
+  uiStore.setMobile(val)
+  // 从移动端切换到桌面端时，关闭移动端菜单
+  if (!val) {
+    uiStore.closeMobileMenu()
+  }
+}, { immediate: true })
+
 // 切换空间后会 hard reload；切换前 stash 的 toast 这里 consume 并弹出，
 // 这样 toast 显示在新页面上，duration 才真正生效。
 const showPendingTenantSwitchToast = () => {
@@ -223,6 +236,10 @@ const showPendingTenantSwitchToast = () => {
 }
 
 onMounted(() => {
+  // 初始化全局响应式断点监听，同步到 UI Store
+  startListening()
+  evalBreakpoint()
+
   handleGlobalOIDCCallback()
   showPendingTenantSwitchToast()
 
@@ -250,6 +267,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  stopListening()
   if (updateCheckTimer) {
     clearInterval(updateCheckTimer)
   }
diff --git a/frontend/src/assets/responsive.less b/frontend/src/assets/responsive.less
new file mode 100644
index 0000000000..e2a20acbb1
--- /dev/null
+++ b/frontend/src/assets/responsive.less
@@ -0,0 +1,84 @@
+// ============================================================
+// WeKnora 响应式断点 Less 混入
+// ============================================================
+// 使用移动端优先 (mobile-first) 策略：
+//   基础样式 = 移动端，
+//   .tablet-up()  → 平板及以上增强，
+//   .desktop()    → 桌面端增强。
+// ============================================================
+
+// 断点值（与 useBreakpoint.ts 保持一致）
+@bp-mobile-max: 767px;
+@bp-tablet-min: 768px;
+@bp-tablet-max: 1023px;
+@bp-desktop-min: 1024px;
+
+// --- 设备类型混入 ---
+
+// 仅手机 (< 768px)
+.mobile(@rules) {
+  @media screen and (max-width: @bp-mobile-max) {
+    @rules();
+  }
+}
+
+// 仅平板 (768px - 1023px)
+.tablet(@rules) {
+  @media screen and (min-width: @bp-tablet-min) and (max-width: @bp-tablet-max) {
+    @rules();
+  }
+}
+
+// 平板及以上 (≥ 768px) — mobile-first 增强用
+.tablet-up(@rules) {
+  @media screen and (min-width: @bp-tablet-min) {
+    @rules();
+  }
+}
+
+// 仅桌面 (≥ 1024px)
+.desktop(@rules) {
+  @media screen and (min-width: @bp-desktop-min) {
+    @rules();
+  }
+}
+
+// 非桌面 (< 1024px) — 即手机 + 平板
+.not-desktop(@rules) {
+  @media screen and (max-width: @bp-tablet-max) {
+    @rules();
+  }
+}
+
+// --- 自定义断点混入（使用 min-width） ---
+.min-width(@width, @rules) {
+  @media screen and (min-width: @width) {
+    @rules();
+  }
+}
+
+.max-width(@width, @rules) {
+  @media screen and (max-width: @width) {
+    @rules();
+  }
+}
+
+// --- 触摸设备 ---
+.touch(@rules) {
+  @media (hover: none) {
+    @rules();
+  }
+}
+
+.hover-capable(@rules) {
+  @media (hover: hover) {
+    @rules();
+  }
+}
+
+// --- 减少动效 ---
+.reduced-motion(@rules) {
+  @media (prefers-reduced-motion: reduce) {
+    @rules();
+  }
+}
diff --git a/frontend/src/assets/theme/theme.css b/frontend/src/assets/theme/theme.css
index e62ec6f171..f15e622d03 100644
--- a/frontend/src/assets/theme/theme.css
+++ b/frontend/src/assets/theme/theme.css
@@ -97,6 +97,74 @@
 
     }
 
+/* ============================================================
+   响应式断点 CSS 变量（与 useBreakpoint.ts / responsive.less 保持一致）
+   ============================================================ */
+:root {
+  --breakpoint-mobile-max: 767px;
+  --breakpoint-tablet-min: 768px;
+  --breakpoint-tablet-max: 1023px;
+  --breakpoint-desktop-min: 1024px;
+  --app-min-touch-target: 44px;
+}
+
+/* ============================================================
+   移动端全局样式增强
+   ============================================================ */
+
+/* 触摸设备：放大 TDesign 交互元素的点击区域。
+   会话行的常显操作按钮改在 menu.vue 的 scoped 块里覆写，
+   因为默认的 opacity: 0 也带着 scoped 属性选择器的权重。 */
+@media (hover: none) {
+  /* 下拉菜单项最小触摸区域 */
+  .t-dropdown__item {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+
+  /* 表单按钮 */
+  .t-button {
+    min-height: 40px;
+  }
+
+  /* 小按钮可以小一些 */
+  .t-button.t-size-s {
+    min-height: 32px;
+  }
+}
+
+/* ============================================================
+   移动端全局排版调整
+   ============================================================ */
+@media screen and (max-width: 767px) {
+  /* 移动端基础字号略大，补偿手持距离 */
+  body,
+  html {
+    font-size: 15px;
+  }
+
+  /* TDesign 表格/列表在移动端的水平滚动 */
+  .t-table {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* 标签在小屏幕上换行 */
+  .t-tag {
+    white-space: normal;
+    word-break: break-word;
+  }
+}
+
+/* 平板端微调 */
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  body,
+  html {
+    font-size: 14px;
+  }
+}
+
 /* 全局深色模式滚动条样式 */
 :root[theme-mode="dark"] *::-webkit-scrollbar-thumb {
     background-color: #4b4b4b !important;
diff --git a/frontend/src/components/Input-field.vue b/frontend/src/components/Input-field.vue
index e1cfef13ce..813c7b135f 100644
--- a/frontend/src/components/Input-field.vue
+++ b/frontend/src/components/Input-field.vue
@@ -2738,6 +2738,7 @@ const getImgSrc = (url: string) => {
 }
 </script>
 <style scoped lang="less">
+@import '@/assets/responsive.less';
 @import './css/chat-resource-chips.less';
 
 .answers-input {
@@ -2747,15 +2748,27 @@ const getImgSrc = (url: string) => {
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   display: flex;
   justify-content: center;
 
+  // 窄屏留出左右留白，否则输入框圆角与阴影会被屏幕边缘切掉
+  .not-desktop({
+    padding-inline: 16px;
+  });
+
+  .mobile({
+    padding-inline: 12px;
+  });
+
   &.is-embedded {
     position: relative;
     bottom: auto;
     left: auto;
     transform: none;
     z-index: auto;
+    padding-inline: 0;
 
     .rich-input-container {
       max-width: 100%;
@@ -2768,6 +2781,8 @@ const getImgSrc = (url: string) => {
   position: relative;
   width: 100%;
   max-width: 960px;
+  min-width: 0;
+  box-sizing: border-box;
   background: var(--td-bg-color-container, #FFF);
   border-radius: 12px;
   border: 1px solid var(--td-component-stroke, #dcdcdc);
@@ -3465,6 +3480,7 @@ const getImgSrc = (url: string) => {
 
 .model-selector-name {
   flex: 1;
+  min-width: 0;
   font-size: 12px;
   font-weight: 500;
   color: var(--td-text-color-secondary, #666);
@@ -3489,6 +3505,65 @@ const getImgSrc = (url: string) => {
   color: var(--td-text-color-placeholder, #999);
 }
 
+// 窄屏：控制栏保持单行。默认的 flex-wrap 会把模型选择器和发送按钮挤到第二行，
+// 既抬高输入框又让发送键离开拇指区。可选控件改为横向滑动，发送键固定不收缩。
+.mobile({
+  .control-bar {
+    left: 12px;
+    right: 12px;
+    bottom: 10px;
+    gap: 6px;
+    flex-wrap: nowrap;
+    max-height: none;
+  }
+
+  .control-left {
+    gap: 4px;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .control-right {
+    flex-shrink: 0;
+  }
+
+  .agent-mode-btn {
+    max-width: 104px;
+    padding: 0 8px;
+  }
+
+  .agent-mode-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .model-display {
+    min-width: 0;
+    margin-left: 0;
+    flex-shrink: 1;
+  }
+
+  .model-selector-trigger {
+    min-width: 72px;
+    max-width: 104px;
+    padding: 2px 6px;
+  }
+
+  :deep(.t-textarea__inner) {
+    min-height: 104px !important;
+    padding-bottom: 50px;
+  }
+});
+
 .model-selector-overlay {
   position: fixed;
   inset: 0;
diff --git a/frontend/src/components/MyInvitationsDialog.vue b/frontend/src/components/MyInvitationsDialog.vue
index fe217a7f0c..a3288f576e 100644
--- a/frontend/src/components/MyInvitationsDialog.vue
+++ b/frontend/src/components/MyInvitationsDialog.vue
@@ -321,5 +321,33 @@ watch(
     gap: 6px;
     flex-shrink: 0;
   }
+
+  // 移动端：卡片纵向堆叠 + 弹窗全宽
+  @media screen and (max-width: 767px) {
+    .invitation-card {
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .invitation-card-actions {
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+
+    :deep(.t-dialog) {
+      width: 100vw !important;
+      max-width: 100vw !important;
+      margin: 0 !important;
+      border-radius: 0 !important;
+    }
+
+    :deep(.t-dialog__header) {
+      padding: 14px 16px;
+    }
+
+    :deep(.t-dialog__body) {
+      padding: 16px;
+    }
+  }
 }
 </style>
diff --git a/frontend/src/components/ShareKnowledgeBaseDialog.vue b/frontend/src/components/ShareKnowledgeBaseDialog.vue
index c31eb13400..a9766e3b77 100644
--- a/frontend/src/components/ShareKnowledgeBaseDialog.vue
+++ b/frontend/src/components/ShareKnowledgeBaseDialog.vue
@@ -461,6 +461,31 @@ function handleGoToOrgSettings(orgId: string) {
     color: var(--td-text-color-secondary);
     opacity: 0.75;
   }
+  // 移动端：弹窗全宽
+  @media screen and (max-width: 767px) {
+    :deep(.t-dialog) {
+      width: 100vw !important;
+      max-width: 100vw !important;
+      margin: 0 !important;
+      border-radius: 0 !important;
+    }
+
+    :deep(.t-dialog__header) {
+      padding: 14px 16px;
+    }
+
+    :deep(.t-dialog__body) {
+      padding: 16px;
+    }
+
+    :deep(.t-dialog__footer) {
+      padding: 12px 16px;
+    }
+
+    .share-form {
+      padding: 0;
+    }
+  }
 }
 </style>
 
diff --git a/frontend/src/components/css/suggested-questions.less b/frontend/src/components/css/suggested-questions.less
index e768d9c4f1..e5154462c2 100644
--- a/frontend/src/components/css/suggested-questions.less
+++ b/frontend/src/components/css/suggested-questions.less
@@ -202,3 +202,32 @@
     color: var(--td-brand-color);
 }
 
+// 移动端：建议问题全宽单列，间距缩小
+@media screen and (max-width: 767px) {
+    .suggested-questions-container {
+        padding: 8px 4px 8px;
+        max-width: 100%;
+    }
+
+    .suggested-questions-grid {
+        gap: 8px;
+    }
+
+    .suggested-question-card {
+        width: 100%;
+        max-width: 100%;
+        padding: 10px 14px;
+
+        &.sq-card-skeleton,
+        &.sq-card-skeleton:nth-child(2n),
+        &.sq-card-skeleton:nth-child(3n),
+        &.sq-card-skeleton:nth-child(5n) {
+            width: 100%;
+        }
+    }
+
+    .suggested-question-text {
+        font-size: 14px;
+    }
+}
+
diff --git a/frontend/src/components/doc-content.vue b/frontend/src/components/doc-content.vue
index 0b2652dc2b..c173b07461 100644
--- a/frontend/src/components/doc-content.vue
+++ b/frontend/src/components/doc-content.vue
@@ -3285,4 +3285,97 @@ body:has(.t-drawer.kp-secondary-drawer--resizing) .trace-drawer-resize-line {
 .t-drawer.kp-secondary-drawer--resizing .t-drawer__content {
   transition: none !important;
 }
+
+// ============================================================
+// 移动端适配：抽屉全屏，隐藏拖拽手柄
+// ============================================================
+@media screen and (max-width: 767px) {
+  // 主抽屉全屏
+  .t-drawer.doc-main-drawer {
+    .t-drawer__content-wrapper,
+    .t-drawer__content {
+      width: 100vw !important;
+      max-width: 100vw !important;
+    }
+
+    .t-drawer__header {
+      padding: 12px 14px;
+    }
+
+    .t-drawer__body {
+      padding: 14px;
+    }
+  }
+
+  // 追踪抽屉全屏
+  .t-drawer.kp-secondary-drawer {
+    .t-drawer__content-wrapper,
+    .t-drawer__content {
+      width: 100vw !important;
+      max-width: 100vw !important;
+    }
+  }
+
+  // 隐藏拖拽手柄
+  .doc-drawer-resize-handle,
+  .trace-drawer-resize-handle {
+    display: none !important;
+  }
+
+  // 元数据行纵向堆叠
+  .doc-detail-rows {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .doc-detail-row {
+    flex: none;
+    width: 100%;
+  }
+
+  .doc-detail-label {
+    flex: 0 0 auto;
+    min-width: 0;
+  }
+
+  // 标签 inline 换行
+  .doc-tag-chip {
+    max-width: none;
+  }
+
+  // 头部操作按钮紧凑
+  .header-actions {
+    gap: 4px;
+  }
+
+  .header-action-btn {
+    width: 32px;
+    height: 32px;
+  }
+
+  // 内容区全宽
+  .md-content {
+    max-width: 100%;
+    padding: 0;
+  }
+}
+
+// ============================================================
+// 平板适配
+// ============================================================
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .t-drawer.doc-main-drawer {
+    .t-drawer__content-wrapper,
+    .t-drawer__content {
+      max-width: 85vw !important;
+    }
+  }
+
+  .t-drawer.kp-secondary-drawer {
+    .t-drawer__content-wrapper,
+    .t-drawer__content {
+      max-width: 90vw !important;
+    }
+  }
+}
 </style>
diff --git a/frontend/src/components/menu.vue b/frontend/src/components/menu.vue
index 2e3082b131..e316bd0f49 100644
--- a/frontend/src/components/menu.vue
+++ b/frontend/src/components/menu.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="aside_box" :class="{ 'aside_box--collapsed': uiStore.sidebarCollapsed }">
-        <!-- 展开时：Logo + 搜索/折叠按钮同行 -->
-        <div class="logo_row" v-if="!uiStore.sidebarCollapsed">
+    <div class="aside_box" :class="{ 'aside_box--collapsed': isCollapsed, 'aside_box--drawer': variant === 'drawer' }">
+        <!-- 展开时：Logo + 搜索/折叠按钮同行（drawer 模式下仅 Logo + 搜索，无折叠按钮） -->
+        <div class="logo_row" v-if="!isCollapsed">
             <div class="logo_box" @click="router.push('/platform/knowledge-bases')" style="cursor: pointer;">
                 <img class="logo" src="@/assets/img/weknora.png" alt="">
                 <sup v-if="isLiteEdition" class="lite-badge">Lite</sup>
@@ -19,7 +19,7 @@
                         <img class="header-icon-img" :src="getImgSrc('search.svg')" alt="">
                     </div>
                 </t-tooltip>
-                <div class="sidebar-toggle" @click="uiStore.toggleSidebar" :title="t('menu.collapseSidebar')">
+                <div v-if="variant !== 'drawer'" class="sidebar-toggle" @click="uiStore.toggleSidebar" :title="t('menu.collapseSidebar')">
                     <svg viewBox="0 0 20 20" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <rect x="1.5" y="1.5" width="17" height="17" rx="3" stroke="currentColor" stroke-width="1.2" />
                         <line x1="7.5" y1="1.5" x2="7.5" y2="18.5" stroke="currentColor" stroke-width="1.2" />
@@ -29,7 +29,7 @@
                 </div>
             </div>
         </div>
-        <!-- 折叠时：展开按钮 -->
+        <!-- 折叠时：展开按钮（drawer 模式下不显示） -->
         <t-tooltip v-else :content="t('menu.expandSidebar')" placement="right">
             <div class="menu_item sidebar-toggle-item" @click="uiStore.toggleSidebar">
                 <div class="menu_item-box">
@@ -50,16 +50,16 @@
         </t-tooltip>
 
         <!-- 空间选择器：仅在用户可切换空间时显示 -->
-        <TenantSelector v-if="canAccessAllTenants && !uiStore.sidebarCollapsed" />
+        <TenantSelector v-if="canAccessAllTenants && !isCollapsed" />
 
-        <!-- 折叠时右侧拖拽展开手柄 -->
-        <div v-if="uiStore.sidebarCollapsed" class="sidebar-drag-handle" @mousedown="onDragHandleMouseDown" />
+        <!-- 折叠时右侧拖拽展开手柄（drawer 模式下不显示） -->
+        <div v-if="isCollapsed" class="sidebar-drag-handle" @mousedown="onDragHandleMouseDown" />
 
         <!-- 上半部分：新对话吸顶 + 知识库/智能体/共享空间/历史会话随滚动一起滚走 -->
         <div class="menu_top" ref="scrollContainer" @scroll="handleScroll">
             <!-- 全局搜索入口：点击打开命令面板（⌘K）。展开态移至顶部 logo_row 的图标按钮；
                  折叠态在此处保留为图标项 + 深色 tooltip。 -->
-            <div class="menu_box menu_box--cmdk" v-if="uiStore.sidebarCollapsed">
+            <div class="menu_box menu_box--cmdk" v-if="isCollapsed">
                 <t-tooltip placement="right">
                     <template #content>
                         <span class="cmdk-tip">
@@ -76,9 +76,9 @@
                     </div>
                 </t-tooltip>
             </div>
-            <div class="menu_box" :class="{ 'menu_box--sticky': item.children && !uiStore.sidebarCollapsed }"
+            <div class="menu_box" :class="{ 'menu_box--sticky': item.children && !isCollapsed }"
                 v-for="(item, index) in topMenuItems" :key="index">
-                <t-tooltip :content="item.title" placement="right" :disabled="!uiStore.sidebarCollapsed">
+                <t-tooltip :content="item.title" placement="right" :disabled="!isCollapsed">
                     <div @click="handleMenuClick(item.path)" @mouseenter="mouseenteMenu(item.path)"
                         @mouseleave="mouseleaveMenu(item.path)" :data-guide="`nav-${item.path}`"
                         :class="['menu_item', item.childrenPath && item.childrenPath == currentpath ? 'menu_item_c_active' : isMenuItemActive(item.path) ? 'menu_item_active' : '']">
@@ -88,7 +88,7 @@
                                     :src="getImgSrc(item.icon == 'zhishiku' ? knowledgeIcon : item.icon == 'agent' ? agentIcon : item.icon == 'organization' ? organizationIcon : item.icon == 'logout' ? logoutIcon : item.icon == 'setting' ? settingIcon : prefixIcon)"
                                     alt="">
                             </div>
-                            <template v-if="!uiStore.sidebarCollapsed">
+                            <template v-if="!isCollapsed">
                                 <span class="menu_title" :title="item.title">{{ item.title }}</span>
                                 <span v-if="item.path === 'organizations' && orgStore.totalPendingJoinRequestCount > 0"
                                     class="menu-pending-badge"
@@ -101,7 +101,7 @@
             </div>
 
             <!-- 历史会话：按来源筛选后统一按日期分组展示 -->
-            <div class="submenu" v-if="!uiStore.sidebarCollapsed">
+            <div class="submenu" v-if="!isCollapsed">
                 <!-- Stable, always-mounted source filter: reserving its row here
                      (instead of embedding it in the first date group, which
                      appears/disappears while a bucket loads) prevents the
@@ -170,7 +170,7 @@
         </div>
 
         <!-- 批量管理底部操作条：固定在侧栏底部、用户头像上方 -->
-        <div v-if="batchMode && !uiStore.sidebarCollapsed" class="batch-inline-footer">
+        <div v-if="batchMode && !isCollapsed" class="batch-inline-footer">
             <div class="batch-footer-left">
                 <t-checkbox :checked="isAllBatchSelected" :indeterminate="isBatchIndeterminate"
                     @change="toggleBatchSelectAll">
@@ -283,11 +283,23 @@ const PLATFORM_LOGO: Record<string, string> = {
 
 const platformLogo = (p: string): string => (p ? PLATFORM_LOGO[p] || '' : '');
 
+// drawer 变体供移动端抽屉复用同一份侧栏：无折叠态、点击后需要通知外层关闭
+const props = withDefaults(defineProps<{
+    variant?: 'sidebar' | 'drawer'
+}>(), {
+    variant: 'sidebar'
+})
+
+const emit = defineEmits<{
+    navigate: []
+}>()
+
 const { t } = useI18n();
 const usemenuStore = useMenuStore();
 const authStore = useAuthStore();
 const orgStore = useOrganizationStore();
 const uiStore = useUIStore();
+const isCollapsed = computed(() => props.variant !== 'drawer' && uiStore.sidebarCollapsed)
 const commandPaletteStore = useCommandPaletteStore();
 
 // Platform-aware label for the ⌘K hint. navigator.platform is deprecated but
@@ -1081,6 +1093,10 @@ const handleMenuClick = async (path: string) => {
     } else {
         gotopage(path)
     }
+    // 移动端 Drawer 中点击后关闭菜单
+    if (props.variant === 'drawer') {
+        emit('navigate')
+    }
 }
 
 // 处理退出登录确认
@@ -1221,6 +1237,26 @@ const onDragHandleMouseDown = (e: MouseEvent) => {
         }
     }
 
+    // Drawer 模式：全宽，无折叠
+    &--drawer {
+        min-width: 100%;
+        width: 100%;
+        padding: 8px 6px 6px;
+        border-right: none;
+        box-shadow: none;
+
+        .menu_item {
+            min-height: 44px; // 触摸友好
+            height: auto;
+            padding: 10px 10px 10px var(--sidebar-inset-x);
+        }
+
+        .menu_title {
+            font-size: 15px;
+            max-width: none;
+        }
+    }
+
     .logo_row {
         display: flex;
         align-items: center;
@@ -1637,6 +1673,13 @@ const onDragHandleMouseDown = (e: MouseEvent) => {
         &.session-chat-row--selected .session-list-row {
             background: rgba(7, 192, 95, 0.05);
         }
+
+        // 触摸设备没有真正的 hover：抑制悬停底色，避免点击后残留高亮
+        @media (hover: none) {
+            &.session-chat-row:hover .session-list-row {
+                background: transparent;
+            }
+        }
     }
 
     // SessionSidebarRow 为子组件，需 :deep 才能让标题省略号生效
@@ -1675,6 +1718,11 @@ const onDragHandleMouseDown = (e: MouseEvent) => {
             opacity: 0;
             transition: opacity 0.2s ease;
             flex-shrink: 0;
+
+            // 触摸设备无法 hover，操作入口必须常显，否则手机上完全不可达
+            @media (hover: none) {
+                opacity: 0.85;
+            }
         }
 
         .menu-more {
diff --git a/frontend/src/components/settings/SettingDrawer.vue b/frontend/src/components/settings/SettingDrawer.vue
index b5a88b5037..32cdfe0d4a 100644
--- a/frontend/src/components/settings/SettingDrawer.vue
+++ b/frontend/src/components/settings/SettingDrawer.vue
@@ -483,4 +483,41 @@ const handleCancel = () => {
 .t-drawer.setting-drawer--resizing .t-drawer__content {
   transition: none !important;
 }
+
+// 移动端：drawer 全屏，隐藏拖拽手柄
+@media screen and (max-width: 767px) {
+  .setting-drawer {
+    .t-drawer__content-wrapper,
+    .t-drawer__content {
+      width: 100vw !important;
+      max-width: 100vw !important;
+    }
+
+    .t-drawer__header {
+      padding: 12px 14px;
+    }
+
+    .t-drawer__body {
+      padding: 14px;
+    }
+
+    .t-drawer__footer {
+      padding: 10px 14px;
+    }
+  }
+
+  .setting-drawer-resize-handle {
+    display: none !important;
+  }
+}
+
+// 平板：drawer 宽度适配
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .setting-drawer {
+    .t-drawer__content-wrapper,
+    .t-drawer__content {
+      max-width: 85vw !important;
+    }
+  }
+}
 </style>
diff --git a/frontend/src/composables/useBreakpoint.test.ts b/frontend/src/composables/useBreakpoint.test.ts
new file mode 100644
index 0000000000..c1051e4817
--- /dev/null
+++ b/frontend/src/composables/useBreakpoint.test.ts
@@ -0,0 +1,93 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+
+import {
+  MOBILE_MAX,
+  TABLET_MAX,
+  evalBreakpoint,
+  isDesktop,
+  isMobile,
+  isTablet,
+  resolveBreakpoint,
+} from './useBreakpoint.ts'
+
+type FakeWindow = {
+  innerWidth: number
+  matchMedia?: (query: string) => { matches: boolean }
+}
+
+function withWindow(fake: FakeWindow, run: () => void) {
+  const globalWithWindow = globalThis as { window?: unknown }
+  const had = 'window' in globalWithWindow
+  const previous = globalWithWindow.window
+  globalWithWindow.window = fake
+  try {
+    run()
+  } finally {
+    if (had) globalWithWindow.window = previous
+    else delete globalWithWindow.window
+  }
+}
+
+/** matchMedia stub whose media width may differ from innerWidth. */
+function mediaWindow(innerWidth: number, mediaWidth = innerWidth): FakeWindow {
+  return {
+    innerWidth,
+    matchMedia: (query: string) => {
+      const max = /max-width:\s*(\d+)px/.exec(query)
+      const min = /min-width:\s*(\d+)px/.exec(query)
+      const withinMax = max ? mediaWidth <= Number(max[1]) : true
+      const withinMin = min ? mediaWidth >= Number(min[1]) : true
+      return { matches: withinMax && withinMin }
+    },
+  }
+}
+
+test('classifies every width into exactly one form factor', () => {
+  for (const width of [320, 360, 390, 767, 768, 900, 1023, 1024, 1440, 2560]) {
+    const flags = resolveBreakpoint(width)
+    const hits = [flags.isMobile, flags.isTablet, flags.isDesktop].filter(Boolean)
+    assert.equal(hits.length, 1, `width=${width} matched ${hits.length} form factors`)
+  }
+})
+
+test('breakpoint edges line up with the CSS media queries', () => {
+  assert.deepEqual(resolveBreakpoint(MOBILE_MAX), { isMobile: true, isTablet: false, isDesktop: false })
+  assert.deepEqual(resolveBreakpoint(MOBILE_MAX + 1), { isMobile: false, isTablet: true, isDesktop: false })
+  assert.deepEqual(resolveBreakpoint(TABLET_MAX), { isMobile: false, isTablet: true, isDesktop: false })
+  assert.deepEqual(resolveBreakpoint(TABLET_MAX + 1), { isMobile: false, isTablet: false, isDesktop: true })
+})
+
+test('prefers matchMedia so the JS form factor matches the rendered layout', () => {
+  // A classic scrollbar makes innerWidth 15px wider than the media-query
+  // width: reading innerWidth alone reports desktop while CSS already
+  // renders the tablet layout.
+  withWindow(mediaWindow(1024, 1009), () => {
+    evalBreakpoint()
+    assert.equal(isTablet.value, true)
+    assert.equal(isDesktop.value, false)
+  })
+})
+
+test('falls back to the viewport width when matchMedia is unavailable', () => {
+  withWindow({ innerWidth: 390 }, () => {
+    evalBreakpoint()
+    assert.equal(isMobile.value, true)
+    assert.equal(isDesktop.value, false)
+  })
+})
+
+test('defaults to desktop outside a browser so SSR does not throw', () => {
+  const globalWithWindow = globalThis as { window?: unknown }
+  const had = 'window' in globalWithWindow
+  const previous = globalWithWindow.window
+  delete globalWithWindow.window
+  try {
+    evalBreakpoint()
+    assert.equal(isDesktop.value, true)
+    assert.equal(isMobile.value, false)
+    assert.equal(isTablet.value, false)
+  } finally {
+    if (had) globalWithWindow.window = previous
+  }
+})
diff --git a/frontend/src/composables/useBreakpoint.ts b/frontend/src/composables/useBreakpoint.ts
new file mode 100644
index 0000000000..39b7888e29
--- /dev/null
+++ b/frontend/src/composables/useBreakpoint.ts
@@ -0,0 +1,142 @@
+import { getCurrentInstance, ref, onUnmounted, readonly } from 'vue'
+
+/**
+ * 响应式断点检测 composable
+ *
+ * 断点定义：
+ *  - isMobile:  < 768px  (安卓手机)
+ *  - isTablet:  768-1023px (平板)
+ *  - isDesktop: ≥ 1024px (PC)
+ *
+ * 使用方式：
+ *   const { isMobile, isTablet, isDesktop } = useBreakpoint()
+ *
+ * 组件卸载时自动移除监听器。
+ */
+
+const MOBILE_MAX = 767
+const TABLET_MAX = 1023
+
+const MOBILE_QUERY = `(max-width: ${MOBILE_MAX}px)`
+const TABLET_QUERY = `(min-width: ${MOBILE_MAX + 1}px) and (max-width: ${TABLET_MAX}px)`
+
+// 全局共享状态：全应用保持唯一 matchMedia 监听器
+// 避免每个组件都创建自己的 MediaQueryList
+let listeners = 0
+let mobileMQL: MediaQueryList | null = null
+let tabletMQL: MediaQueryList | null = null
+
+const isMobile = ref(false)
+const isTablet = ref(false)
+const isDesktop = ref(true)
+
+export interface BreakpointFlags {
+  isMobile: boolean
+  isTablet: boolean
+  isDesktop: boolean
+}
+
+/** 由视口宽度推断断点；SSR / 无 matchMedia 环境下的回退路径。 */
+export function resolveBreakpoint(width: number): BreakpointFlags {
+  return {
+    isMobile: width <= MOBILE_MAX,
+    isTablet: width > MOBILE_MAX && width <= TABLET_MAX,
+    isDesktop: width > TABLET_MAX,
+  }
+}
+
+function evalBreakpoint() {
+  // SSR / 测试环境安全回退
+  if (typeof window === 'undefined') {
+    isMobile.value = false
+    isTablet.value = false
+    isDesktop.value = true
+    return
+  }
+
+  // 优先用 matchMedia：window.innerWidth 含经典滚动条宽度，媒体查询不含。
+  // 在断点边界附近两者会差 0～15px，导致 JS 判定的形态与 CSS 实际渲染的形态不一致。
+  let flags: BreakpointFlags
+  if (typeof window.matchMedia === 'function') {
+    const mobile = (mobileMQL ?? window.matchMedia(MOBILE_QUERY)).matches
+    const tablet = (tabletMQL ?? window.matchMedia(TABLET_QUERY)).matches
+    flags = { isMobile: mobile, isTablet: tablet, isDesktop: !mobile && !tablet }
+  } else {
+    flags = resolveBreakpoint(window.innerWidth)
+  }
+
+  isMobile.value = flags.isMobile
+  isTablet.value = flags.isTablet
+  isDesktop.value = flags.isDesktop
+}
+
+// 模块加载即求值：platform/index.vue 与 stores 在挂载前就会读这些 ref，
+// 若等到 App.vue 的 onMounted 才首次求值，手机上第一帧会先渲染桌面侧栏再切换。
+evalBreakpoint()
+
+function onMobileChange(e: MediaQueryListEvent) {
+  evalBreakpoint()
+}
+
+function onTabletChange(e: MediaQueryListEvent) {
+  evalBreakpoint()
+}
+
+function startListening() {
+  if (typeof window === 'undefined' || !window.matchMedia) return
+
+  if (listeners === 0) {
+    mobileMQL = window.matchMedia(MOBILE_QUERY)
+    tabletMQL = window.matchMedia(TABLET_QUERY)
+
+    mobileMQL.addEventListener('change', onMobileChange)
+    tabletMQL.addEventListener('change', onTabletChange)
+  }
+  listeners++
+
+  // 立即评估一次
+  evalBreakpoint()
+}
+
+function stopListening() {
+  if (typeof window === 'undefined') return
+
+  listeners--
+  if (listeners <= 0) {
+    listeners = 0
+    mobileMQL?.removeEventListener('change', onMobileChange)
+    tabletMQL?.removeEventListener('change', onTabletChange)
+    mobileMQL = null
+    tabletMQL = null
+  }
+}
+
+export function useBreakpoint() {
+  // 每个使用者都持有一个监听引用，卸载时成对释放。
+  startListening()
+
+  // 组件外调用（store、工具函数）没有卸载时机，注册 onUnmounted 只会告警并让计数永久泄漏。
+  if (getCurrentInstance()) {
+    onUnmounted(() => {
+      stopListening()
+    })
+  }
+
+  return {
+    isMobile: readonly(isMobile),
+    isTablet: readonly(isTablet),
+    isDesktop: readonly(isDesktop),
+    // 暴露手动刷新，供 App.vue 初始化 / resize 兜底
+    refresh: evalBreakpoint,
+    startListening,
+  } as const
+}
+
+/**
+ * 供 store 等非组件代码使用的直接访问接口。
+ * 模块加载时已按当前视口求值，因此首帧读到的就是正确形态；
+ * 之后由 App.vue 启动的全局 matchMedia 监听保持同步。
+ */
+export { isMobile, isTablet, isDesktop, evalBreakpoint, startListening, stopListening }
+
+export { MOBILE_MAX, TABLET_MAX }
diff --git a/frontend/src/stores/ui.ts b/frontend/src/stores/ui.ts
index 218c101150..021dc92859 100644
--- a/frontend/src/stores/ui.ts
+++ b/frontend/src/stores/ui.ts
@@ -20,7 +20,10 @@ export const useUIStore = defineStore('ui', {
     manualEditorInitialContent: '',
     manualEditorInitialStatus: 'draft' as 'draft' | 'publish',
     manualEditorOnSuccess: null as null | ((payload: { kbId: string; knowledgeId: string; status: 'draft' | 'publish' }) => void),
-    sidebarCollapsed: localStorage.getItem('sidebar_collapsed') === 'true'
+    sidebarCollapsed: localStorage.getItem('sidebar_collapsed') === 'true',
+    // 响应式状态
+    isMobile: false,
+    mobileMenuOpen: false,
   }),
 
   actions: {
@@ -125,14 +128,31 @@ export const useUIStore = defineStore('ui', {
       localStorage.setItem('sidebar_collapsed', String(this.sidebarCollapsed))
     },
 
-    collapseSidebar() {
+    collapseSidebar(persist = true) {
       this.sidebarCollapsed = true
-      localStorage.setItem('sidebar_collapsed', 'true')
+      if (persist) localStorage.setItem('sidebar_collapsed', 'true')
     },
 
-    expandSidebar() {
+    expandSidebar(persist = true) {
       this.sidebarCollapsed = false
-      localStorage.setItem('sidebar_collapsed', 'false')
+      if (persist) localStorage.setItem('sidebar_collapsed', 'false')
+    },
+
+    // 响应式断点
+    setMobile(value: boolean) {
+      this.isMobile = value
+    },
+
+    openMobileMenu() {
+      this.mobileMenuOpen = true
+    },
+
+    closeMobileMenu() {
+      this.mobileMenuOpen = false
+    },
+
+    toggleMobileMenu() {
+      this.mobileMenuOpen = !this.mobileMenuOpen
     }
   }
 })
diff --git a/frontend/src/views/agent/AgentEditorModal.vue b/frontend/src/views/agent/AgentEditorModal.vue
index 2561e9c891..8c08776036 100644
--- a/frontend/src/views/agent/AgentEditorModal.vue
+++ b/frontend/src/views/agent/AgentEditorModal.vue
@@ -5951,6 +5951,253 @@ const handleSave = async () => {
   background: rgba(0, 180, 42, 0.1);
 }
 
+// ============================================================
+// 移动端适配：全屏弹窗 + 顶部标签栏 + 表单纵向堆叠
+// ============================================================
+@media screen and (max-width: 767px) {
+  .settings-overlay {
+    padding: 0;
+    align-items: stretch;
+  }
+
+  .settings-modal {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .settings-container {
+    flex-direction: column;
+  }
+
+  // 侧边栏 → 顶部水平滚动标签栏
+  .settings-sidebar {
+    width: 100%;
+    flex-shrink: 0;
+    border-right: none;
+    border-bottom: 1px solid var(--td-component-stroke);
+    overflow: visible;
+    background: var(--td-bg-color-container);
+  }
+
+  .sidebar-header {
+    display: none;
+  }
+
+  .settings-nav {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 10px 12px;
+    gap: 2px;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .nav-group-title {
+    display: none;
+  }
+
+  .nav-item {
+    flex-shrink: 0;
+    white-space: nowrap;
+    padding: 7px 12px;
+    margin-bottom: 0;
+    border-radius: 20px;
+    font-size: 13px;
+    min-height: 36px;
+
+    .nav-icon {
+      margin-right: 4px;
+      font-size: 15px;
+    }
+
+    &.active {
+      background: var(--td-brand-color-light);
+      color: var(--td-brand-color);
+    }
+  }
+
+  .nav-badge {
+    margin-left: 2px;
+    font-size: 10px;
+    min-width: 16px;
+    height: 16px;
+    line-height: 16px;
+    text-align: center;
+    border-radius: 8px;
+    background: var(--td-brand-color);
+    color: #fff;
+  }
+
+  // 内容区
+  .settings-content {
+    flex: 1;
+  }
+
+  .content-wrapper {
+    padding: 20px 16px;
+    max-width: 100%;
+
+    &--prompts {
+      padding: 16px 12px;
+    }
+  }
+
+  .section-header {
+    margin-bottom: 14px;
+
+    h2 {
+      font-size: 18px;
+    }
+
+    .section-description {
+      font-size: 13px;
+    }
+  }
+
+  // 表单行：移动端纵向堆叠
+  .setting-row {
+    flex-direction: column;
+    gap: 8px;
+    padding: 14px 0;
+
+    &.setting-row-vertical {
+      gap: 8px;
+    }
+
+    &.setting-row--emphasize {
+      padding-left: 10px;
+    }
+  }
+
+  .setting-info {
+    max-width: 100% !important;
+    padding-right: 0 !important;
+    flex: none;
+
+    label {
+      font-size: 14px;
+    }
+
+    .desc {
+      font-size: 12px;
+    }
+  }
+
+  .setting-control {
+    flex: none;
+    width: 100%;
+    max-width: 100%;
+
+    &.setting-control-full {
+      width: 100%;
+    }
+  }
+
+  // 选择器、输入框全宽
+  .setting-control :deep(.t-select),
+  .setting-control :deep(.t-input),
+  .setting-control :deep(.t-textarea) {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  // 名称输入框容器
+  .name-input-wrapper {
+    flex-wrap: wrap;
+  }
+
+  .close-btn {
+    top: 8px;
+    right: 8px;
+    z-index: 20;
+    width: 36px;
+    height: 36px;
+    background: var(--td-bg-color-container);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+  }
+
+  // 提示词面板
+  .prompts-panel__header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .prompts-outline {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .prompts-outline__pill {
+    font-size: 12px;
+    padding: 4px 10px;
+  }
+
+  // 工具卡片网格单列
+  .tool-card {
+    grid-template-columns: 1fr;
+  }
+}
+
+// ============================================================
+// 平板适配
+// ============================================================
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .settings-overlay {
+    padding: 10px;
+  }
+
+  .settings-modal {
+    width: 95vw;
+    max-width: 100%;
+    height: calc(100vh - 20px);
+    max-height: none;
+  }
+
+  .settings-sidebar {
+    width: 160px;
+  }
+
+  .sidebar-header {
+    padding: 14px 10px 10px;
+  }
+
+  .sidebar-title {
+    font-size: 14px;
+  }
+
+  .nav-item {
+    padding: 5px 10px;
+    font-size: 13px;
+  }
+
+  .nav-icon {
+    margin-right: 5px;
+    font-size: 14px;
+  }
+
+  .content-wrapper {
+    padding: 20px 24px;
+  }
+
+  .setting-row {
+    padding: 14px 0;
+  }
+
+  .setting-info {
+    padding-right: 20px;
+  }
+}
 </style>
 
 <!-- Non-scoped styles: TDesign teleports the popup outside this component, so
diff --git a/frontend/src/views/agent/AgentList.vue b/frontend/src/views/agent/AgentList.vue
index 8ae184e369..ecbcb8a153 100644
--- a/frontend/src/views/agent/AgentList.vue
+++ b/frontend/src/views/agent/AgentList.vue
@@ -2514,6 +2514,46 @@ defineExpose({
     }
   }
 }
+
+// 移动端适配
+@media screen and (max-width: 767px) {
+  .agent-list-content {
+    padding: 12px 0 0 16px;
+  }
+
+  .header {
+    padding-right: 16px;
+    margin-bottom: 12px;
+
+    h2 {
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+
+  .agent-list-main {
+    padding: 0 16px 8px 0;
+  }
+
+  .card-container {
+    gap: 8px;
+  }
+}
+
+// 平板适配
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .agent-list-content {
+    padding: 16px 0 0 20px;
+  }
+
+  .header {
+    padding-right: 20px;
+  }
+
+  .agent-list-main {
+    padding: 0 20px 8px 0;
+  }
+}
 </style>
 
 <style lang="less">
diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue
index b33a355b19..1666441f25 100755
--- a/frontend/src/views/auth/Login.vue
+++ b/frontend/src/views/auth/Login.vue
@@ -1760,6 +1760,38 @@ onMounted(async () => {
     display: none;
   }
 }
+
+// 超小屏手机适配（如 iPhone SE 375px）
+@media (max-width: 380px) {
+  .showcase-section {
+    min-height: auto;
+    padding: 24px 16px;
+  }
+
+  .form-section {
+    padding: 16px 12px;
+  }
+
+  .form-card {
+    padding: 24px 16px;
+  }
+
+  .header-logo {
+    top: 12px;
+    left: 16px;
+
+    .logo-image {
+      width: 60px;
+    }
+  }
+}
+
+// 触摸设备：增大登录按钮点击区域
+@media (hover: none) {
+  .form-card :deep(.t-button) {
+    min-height: 44px;
+  }
+}
 </style>
 
 <style lang="less">
diff --git a/frontend/src/views/chat/index.vue b/frontend/src/views/chat/index.vue
index 8544e69f1d..b0cc29b057 100644
--- a/frontend/src/views/chat/index.vue
+++ b/frontend/src/views/chat/index.vue
@@ -1038,7 +1038,7 @@ onBeforeRouteUpdate((to, from, next) => {
     flex-direction: column;
     align-items: center;
     max-width: calc(100vw - 260px);
-    min-width: 400px;
+    min-width: 0; // 响应式：不再限制 min-width
 
     &.is-sidebar-collapsed {
         max-width: calc(100vw - 60px);
@@ -1051,6 +1051,20 @@ onBeforeRouteUpdate((to, from, next) => {
         overflow-x: hidden;
     }
 
+    // 平板：侧边栏折叠时
+    .tablet({
+        max-width: calc(100vw - 60px);
+        padding: 16px 0 16px 16px;
+    });
+
+    // 手机：全宽，减小间距
+    .mobile({
+        max-width: 100%;
+        min-width: 100%;
+        padding: 12px;
+        font-size: 16px;
+    });
+
     &:not(.is-embedded) {
         @media (min-width: 960px) {
             transition: padding-right 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
@@ -1222,6 +1236,11 @@ onBeforeRouteUpdate((to, from, next) => {
         box-sizing: border-box;
         overflow-x: hidden;
     }
+
+    .mobile({
+        min-height: auto;
+        padding: 0 4px 8px;
+    });
 }
 
 .msg_list {
@@ -1233,6 +1252,11 @@ onBeforeRouteUpdate((to, from, next) => {
     margin: 0 auto;
     width: 100%;
 
+    .mobile({
+        gap: 12px;
+        padding: 0 4px;
+    });
+
     /*
       给每条消息加 layout/style containment：
       - 一条消息的内部布局变化不再让浏览器去 invalidate 整个文档，
diff --git a/frontend/src/views/creatChat/creatChat.vue b/frontend/src/views/creatChat/creatChat.vue
index 8850ec6540..c034426830 100644
--- a/frontend/src/views/creatChat/creatChat.vue
+++ b/frontend/src/views/creatChat/creatChat.vue
@@ -243,8 +243,11 @@ const handleKBEditorSuccess = (kbId: string) => {
 
 </script>
 <style lang="less" scoped>
+@import '@/assets/responsive.less';
+
 .dialogue-wrap {
     flex: 1;
+    min-width: 0;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -257,6 +260,8 @@ const handleKBEditorSuccess = (kbId: string) => {
     align-items: center;
     width: 100%;
     max-width: 960px;
+    min-width: 0;
+    box-sizing: border-box;
     gap: 24px;
 
     :deep(.answers-input) {
@@ -363,45 +368,27 @@ const handleKBEditorSuccess = (kbId: string) => {
     }
 }
 
-@media (max-width: 1250px) and (min-width: 1045px) {
-    .answers-input {
-        transform: translateX(-329px);
-    }
-
-    :deep(.t-textarea__inner) {
-        width: 654px !important;
-    }
-}
-
-@media (max-width: 1045px) {
-    .answers-input {
-        transform: translateX(-250px);
-    }
-
-    :deep(.t-textarea__inner) {
-        width: 500px !important;
-    }
-}
-
-@media (max-width: 750px) {
-    .answers-input {
-        transform: translateX(-250px);
+// 输入框宽度交由 Input-field 自己按容器伸缩：这里曾按断点硬编码
+// translateX 位移与 t-textarea__inner 的像素宽度，在 768～1044px 会让
+// 输入区停在 500px、与外框右边缘之间留出一大片死区。
+.not-desktop({
+    .dialogue-title {
+        padding-inline: 16px;
+        text-align: center;
     }
+});
 
-    :deep(.t-textarea__inner) {
-        width: 340px !important;
-    }
-}
-
-@media (max-width: 600px) {
-    .answers-input {
-        transform: translateX(-250px);
+.mobile({
+    .dialogue-answers {
+        gap: 16px;
     }
 
-    :deep(.t-textarea__inner) {
-        width: 300px !important;
+    .dialogue-title {
+        padding-inline: 12px;
+        font-size: 22px;
+        line-height: 30px;
     }
-}
+});
 </style>
 <style lang="less">
 .del-menu-popup {
diff --git a/frontend/src/views/knowledge/KnowledgeBase.vue b/frontend/src/views/knowledge/KnowledgeBase.vue
index b6ff33e8c5..fba2a7ced2 100644
--- a/frontend/src/views/knowledge/KnowledgeBase.vue
+++ b/frontend/src/views/knowledge/KnowledgeBase.vue
@@ -3416,43 +3416,74 @@ async function createNewSession(value: string): Promise<void> {
   margin: 0 16px 0 4px;
 }
 
-@media (max-width: 1250px) and (min-width: 1045px) {
-  .answers-input {
-    transform: translateX(-329px);
+// ============================================================
+// 移动端适配
+// ============================================================
+@media screen and (max-width: 767px) {
+  // 容器 padding 缩小
+  .knowledge-layout {
+    padding: 12px 12px 0;
+    margin: 0;
+    gap: 12px;
   }
 
-  :deep(.t-textarea__inner) {
-    width: 654px !important;
+  // FAQ 包装器
+  .faq-manager-wrapper {
+    padding: 12px;
+    margin: 0;
   }
-}
 
-@media (max-width: 1045px) {
-  .answers-input {
-    transform: translateX(-250px);
+  // Wiki 主区域
+  .wiki-main-area {
+    margin: 0;
   }
 
-  :deep(.t-textarea__inner) {
-    width: 500px !important;
+  // 文档筛选栏：整行全宽
+  .doc-filter-bar {
+    gap: 8px;
+  }
+
+  .doc-filter-field {
+    width: 100% !important;
+    flex: 1 1 100%;
+
+    &--wide {
+      width: 100% !important;
+    }
   }
-}
 
-@media (max-width: 750px) {
-  .answers-input {
-    transform: translateX(-182px);
+  .doc-filter-actions {
+    width: 100%;
+    justify-content: flex-end;
   }
 
-  :deep(.t-textarea__inner) {
-    width: 340px !important;
+  // 面包屑/标签切换
+  .breadcrumb-tab {
+    font-size: 13px;
   }
 }
 
-@media (max-width: 600px) {
-  .answers-input {
-    transform: translateX(-164px);
+// ============================================================
+// 平板适配
+// ============================================================
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .knowledge-layout {
+    padding: 16px 20px 0;
+    margin: 0 8px 0 2px;
+    gap: 14px;
   }
 
-  :deep(.t-textarea__inner) {
-    width: 300px !important;
+  .faq-manager-wrapper {
+    padding: 16px 20px;
+    margin: 0 8px 0 2px;
+  }
+
+  .doc-filter-field {
+    width: 120px;
+
+    &--wide {
+      width: 220px;
+    }
   }
 }
 
diff --git a/frontend/src/views/knowledge/KnowledgeBaseEditorModal.vue b/frontend/src/views/knowledge/KnowledgeBaseEditorModal.vue
index 372e181aba..efaacb976c 100644
--- a/frontend/src/views/knowledge/KnowledgeBaseEditorModal.vue
+++ b/frontend/src/views/knowledge/KnowledgeBaseEditorModal.vue
@@ -2087,4 +2087,117 @@ watch(
     font-weight: 500;
   }
 }
+
+// ============================================================
+// 移动端适配
+// ============================================================
+@media screen and (max-width: 767px) {
+  .settings-overlay {
+    padding: 0;
+    align-items: stretch;
+  }
+
+  .settings-modal {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .settings-container {
+    flex-direction: column;
+  }
+
+  .settings-sidebar {
+    width: 100%;
+    flex-shrink: 0;
+    border-right: none;
+    border-bottom: 1px solid var(--td-component-stroke);
+    overflow: visible;
+    background: var(--td-bg-color-container);
+  }
+
+  .sidebar-header { display: none; }
+
+  .settings-nav {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 10px 12px;
+    gap: 2px;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar { display: none; }
+  }
+
+  .nav-group-title { display: none; }
+
+  .nav-item {
+    flex-shrink: 0;
+    white-space: nowrap;
+    padding: 7px 12px;
+    margin-bottom: 0;
+    border-radius: 20px;
+    font-size: 13px;
+    min-height: 36px;
+
+    .nav-icon { margin-right: 4px; font-size: 15px; }
+
+    &.active {
+      background: var(--td-brand-color-light);
+      color: var(--td-brand-color);
+    }
+  }
+
+  .settings-content { flex: 1; }
+
+  .content-wrapper {
+    max-width: 100%;
+    padding: 20px 16px;
+  }
+
+  .close-btn {
+    top: 8px;
+    right: 8px;
+    z-index: 20;
+    width: 36px;
+    height: 36px;
+    background: var(--td-bg-color-container);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+  }
+
+  // 底部按钮栏
+  .settings-footer {
+    padding: 12px 16px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+}
+
+// 平板适配
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .settings-overlay { padding: 10px; }
+
+  .settings-modal {
+    width: 95vw;
+    max-width: 100%;
+    height: calc(100vh - 20px);
+    max-height: none;
+  }
+
+  .settings-sidebar { width: 160px; }
+
+  .content-wrapper {
+    max-width: 100%;
+    padding: 24px 20px;
+  }
+
+  .sidebar-header { padding: 14px 10px 10px; }
+  .nav-item { padding: 5px 10px; font-size: 13px; }
+  .nav-icon { margin-right: 5px; font-size: 14px; }
+}
 </style>
diff --git a/frontend/src/views/knowledge/KnowledgeBaseList.vue b/frontend/src/views/knowledge/KnowledgeBaseList.vue
index 0da588be9c..9366c5b759 100644
--- a/frontend/src/views/knowledge/KnowledgeBaseList.vue
+++ b/frontend/src/views/knowledge/KnowledgeBaseList.vue
@@ -2922,6 +2922,46 @@ const handleUploadFinishedEvent = (event: Event) => {
     }
   }
 }
+
+// 移动端适配
+@media screen and (max-width: 767px) {
+  .kb-list-content {
+    padding: 12px 0 0 16px;
+  }
+
+  .header {
+    padding-right: 16px;
+    margin-bottom: 12px;
+
+    h2 {
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+
+  .kb-list-main {
+    padding: 0 16px 8px 0;
+  }
+
+  .kb-card-wrap {
+    gap: 8px;
+  }
+}
+
+// 平板适配
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .kb-list-content {
+    padding: 16px 0 0 20px;
+  }
+
+  .header {
+    padding-right: 20px;
+  }
+
+  .kb-list-main {
+    padding: 0 20px 8px 0;
+  }
+}
 </style>
 
 <style lang="less">
@@ -3091,6 +3131,43 @@ const handleUploadFinishedEvent = (event: Event) => {
   }
 }
 
+// 移动端：全宽抽屉
+@media screen and (max-width: 767px) {
+  .shared-detail-drawer {
+    width: 100vw;
+    max-width: 100vw;
+  }
+
+  .shared-detail-drawer-header {
+    padding: 16px 18px;
+  }
+
+  .shared-detail-drawer-title {
+    font-size: 16px;
+  }
+
+  .shared-detail-drawer-body {
+    padding: 18px;
+    gap: 16px;
+  }
+
+  .shared-detail-drawer-body .shared-detail-row {
+    gap: 4px;
+  }
+
+  .shared-detail-drawer-footer {
+    padding: 14px 18px;
+  }
+}
+
+// 平板：适应宽度
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .shared-detail-drawer {
+    width: 420px;
+    max-width: 85vw;
+  }
+}
+
 // 创建对话框样式优化
 .create-kb-dialog {
   .t-form-item__label {
diff --git a/frontend/src/views/knowledge/components/DocumentCardView.vue b/frontend/src/views/knowledge/components/DocumentCardView.vue
index be96f32e43..8d5d9aca1f 100644
--- a/frontend/src/views/knowledge/components/DocumentCardView.vue
+++ b/frontend/src/views/knowledge/components/DocumentCardView.vue
@@ -1059,3 +1059,97 @@ const handleAction = (action: 'edit' | 'view-trace' | 'reparse' | 'cancel-parse'
   }
 }
 </style>
+
+// ============================================================
+// 移动端适配：优化卡片布局和间距
+// ============================================================
+@media screen and (max-width: 767px) {
+  .doc-card-list {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 8px;
+    padding: 0 8px;
+  }
+
+  .knowledge-card {
+    min-width: 160px;
+    height: 120px;
+    border-radius: 6px;
+  }
+
+  .card-content {
+    padding: 8px 10px 6px;
+  }
+
+  .card-content-title {
+    font-size: 13px;
+    line-height: 20px;
+    height: 20px;
+    margin-right: 6px;
+  }
+
+  .card-content-txt {
+    font-size: 11px;
+    line-height: 16px;
+    -webkit-line-clamp: 2;
+  }
+
+  .card-bottom {
+    padding: 0 10px;
+    height: 28px;
+  }
+
+  .card-time {
+    font-size: 11px;
+  }
+
+  .card-type {
+    font-size: 10px;
+  }
+
+  .card-tag-chip .tag-text {
+    max-width: 60px;
+    font-size: 10px;
+  }
+
+  .card-tag-overflow {
+    height: 16px;
+    min-width: 16px;
+    padding: 0 4px;
+    font-size: 9px;
+  }
+
+  // 移动端隐藏hover弹出层，改为点击触发
+  .knowledge-card-hover-popover {
+    display: none;
+  }
+}
+
+// ============================================================
+// 平板适配：优化卡片布局
+// ============================================================
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .doc-card-list {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
+    padding: 0 12px;
+  }
+
+  .knowledge-card {
+    min-width: 200px;
+    height: 128px;
+  }
+
+  .card-content {
+    padding: 9px 12px 7px;
+  }
+
+  .card-content-title {
+    font-size: 14px;
+    margin-right: 8px;
+  }
+
+  .card-content-txt {
+    font-size: 12px;
+    line-height: 18px;
+  }
+}
diff --git a/frontend/src/views/knowledge/components/DocumentListView.vue b/frontend/src/views/knowledge/components/DocumentListView.vue
index 75e74e5cf1..2f0537a8bd 100644
--- a/frontend/src/views/knowledge/components/DocumentListView.vue
+++ b/frontend/src/views/knowledge/components/DocumentListView.vue
@@ -733,4 +733,178 @@ const handleAction = (action: 'edit' | 'reparse' | 'cancel-parse' | 'move' | 'de
   }
 }
 
+.row-menu {
+  display: flex;
+  flex-direction: column;
+  min-width: 140px;
+  gap: 2px;
+  padding: 4px 6px;
+}
+
+.row-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--td-text-color-primary);
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.15s cubic-bezier(0.2, 0, 0, 1), transform 0.12s ease;
+
+  &:hover {
+    background: var(--td-bg-color-container-hover);
+  }
+
+  &:active {
+    background: var(--td-bg-color-container-active);
+    transform: scale(0.98);
+  }
+
+  .icon {
+    font-size: 16px;
+    color: var(--td-text-color-secondary);
+    transition: color 0.15s ease;
+  }
+
+  &:hover .icon {
+    color: var(--td-text-color-primary);
+  }
+
+  &.danger {
+    color: var(--td-error-color-6);
+    margin-top: 4px;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -3px;
+      left: 8px;
+      right: 8px;
+      height: 1px;
+      background: var(--td-component-stroke);
+    }
+
+    .icon {
+      color: var(--td-error-color-6);
+    }
+
+    &:hover {
+      background: var(--td-error-color-1);
+      color: var(--td-error-color-6);
+
+      .icon {
+        color: var(--td-error-color-6);
+      }
+    }
+
+    &:active {
+      background: var(--td-error-color-2);
+    }
+  }
+}
+
+// ============================================================
+// 移动端适配：精简列，保留核心信息
+// ============================================================
+@media screen and (max-width: 767px) {
+  .doc-list-header,
+  .doc-list-row {
+    grid-template-columns:
+      36px // checkbox
+      1fr // name
+      auto // status + actions 合并
+      0px; // 隐藏 actions 列（合并到 status 列后）
+    column-gap: 4px;
+    padding: 0 8px;
+  }
+
+  // 隐藏次要列的表头
+  .cell-tag,
+  .cell-source,
+  .cell-size,
+  .cell-time,
+  .cell-actions {
+    display: none !important;
+  }
+
+  .cell-check {
+    width: 36px;
+    min-width: 36px;
+    padding: 0 4px;
+
+    :deep(.t-checkbox) {
+      transform: scale(0.9);
+    }
+  }
+
+  .cell-name {
+    min-width: 0;
+    padding: 8px 4px;
+  }
+
+  .row-file-name {
+    font-size: 13px;
+  }
+
+  .row-file-desc {
+    display: none; // 描述文字在移动端隐藏
+  }
+
+  .cell-status {
+    min-width: 0;
+    padding: 0 4px;
+    justify-content: flex-end;
+
+    .row-status-tag {
+      font-size: 11px;
+    }
+  }
+
+  // 行高缩小
+  .doc-list-row {
+    min-height: 50px;
+  }
+
+  .doc-list-header {
+    height: 36px;
+    font-size: 11px;
+  }
+
+  // 操作按钮移动到行内末尾
+  .row-more-btn {
+    display: inline-flex !important;
+    width: 24px;
+    height: 24px;
+    opacity: 0.7;
+  }
+}
+
+// ============================================================
+// 平板适配：隐藏标签和来源列，保留核心列
+// ============================================================
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .doc-list-header,
+  .doc-list-row {
+    grid-template-columns:
+      40px // checkbox
+      minmax(180px, 2fr) // name
+      minmax(80px, 0.8fr) // tag (keep)
+      0px // source (hide)
+      80px // size
+      minmax(80px, 0.6fr) // status
+      120px // time
+      44px; // actions
+  }
+
+  .cell-source {
+    display: none !important;
+  }
+
+  .doc-list-row {
+    min-height: 52px;
+  }
+}
 </style>
diff --git a/frontend/src/views/knowledge/components/FAQEntryManager.vue b/frontend/src/views/knowledge/components/FAQEntryManager.vue
index 8ef8817780..d0eec55412 100644
--- a/frontend/src/views/knowledge/components/FAQEntryManager.vue
+++ b/frontend/src/views/knowledge/components/FAQEntryManager.vue
@@ -2894,6 +2894,18 @@ watch(() => entries.value.map(e => ({
 
 <style lang="less">
 /* 下拉菜单样式已统一至 @/assets/dropdown-menu.less */
+// 移动端：FAQ 编辑器/搜索抽屉全屏
+@media screen and (max-width: 767px) {
+  .faq-editor-drawer,
+  .faq-search-drawer {
+    .t-drawer__content-wrapper,
+    .t-drawer__content {
+      width: 100vw !important;
+      max-width: 100vw !important;
+    }
+  }
+}
+
 .tag-filter-popup {
   z-index: 5500 !important;
 }
@@ -5646,4 +5658,91 @@ watch(() => entries.value.map(e => ({
   white-space: normal;
   line-height: 1.4;
 }
+
+// ============================================================
+// 移动端适配
+// ============================================================
+@media screen and (max-width: 767px) {
+  // 标签面板 → 顶部水平滚动条
+  .faq-content {
+    flex-direction: column;
+  }
+
+  .faq-tag-panel {
+    width: 100%;
+    flex-shrink: 0;
+    border-right: none;
+    border-bottom: 1px solid var(--td-component-stroke);
+    padding: 10px 12px;
+    max-height: none;
+    overflow: visible;
+
+    .sidebar-header {
+      display: none;
+    }
+
+    // 标签列表横向滚动
+    :deep(.tag-list) {
+      display: flex;
+      flex-direction: row;
+      overflow-x: auto;
+      gap: 6px;
+      padding: 0;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar { display: none; }
+    }
+
+    :deep(.tag-item) {
+      flex-shrink: 0;
+      white-space: nowrap;
+    }
+  }
+
+  .faq-card-area {
+    padding: 8px 8px 0;
+  }
+
+  // 导入/批量标签弹窗全屏
+  .faq-import-modal,
+  .batch-tag-modal {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    border-radius: 0 !important;
+    margin: 0 !important;
+  }
+
+  .faq-import-overlay,
+  .batch-tag-overlay {
+    padding: 0 !important;
+    align-items: stretch !important;
+  }
+
+  // 骨架网格单列
+  .faq-skeleton-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .faq-header {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+}
+
+// ============================================================
+// 平板适配
+// ============================================================
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .faq-tag-panel {
+    width: 140px;
+    padding: 0 12px 0 0;
+  }
+
+  .faq-card-area {
+    padding-left: 12px;
+  }
+}
 </style>
diff --git a/frontend/src/views/knowledge/wiki/WikiBrowser.vue b/frontend/src/views/knowledge/wiki/WikiBrowser.vue
index 42d6158b57..bf64fa9020 100644
--- a/frontend/src/views/knowledge/wiki/WikiBrowser.vue
+++ b/frontend/src/views/knowledge/wiki/WikiBrowser.vue
@@ -6371,6 +6371,52 @@ onUnmounted(() => {
     opacity: 0.8;
   }
 }
+
+// ============================================================
+// 移动端适配
+// ============================================================
+@media screen and (max-width: 767px) {
+  .wiki-browser {
+    flex-direction: column;
+  }
+
+  .wiki-sidebar {
+    width: 100%;
+    min-width: 0;
+    max-height: 45vh;
+    border-right: none;
+    border-bottom: 1px solid var(--td-component-stroke);
+    flex-shrink: 0;
+  }
+
+  .wiki-sidebar-header {
+    padding: 10px 12px 8px;
+    gap: 8px;
+  }
+
+  .wiki-content {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .wiki-reader-body {
+    padding: 16px 12px;
+  }
+}
+
+// ============================================================
+// 平板适配
+// ============================================================
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .wiki-sidebar {
+    width: 220px;
+    min-width: 180px;
+  }
+
+  .wiki-sidebar-header {
+    padding: 12px 12px 10px;
+  }
+}
 </style>
 
 <style lang="less">
@@ -6412,4 +6458,24 @@ onUnmounted(() => {
     margin: 0 !important;
   }
 }
+
+// 移动端：所有 wiki 相关抽屉全屏
+@media screen and (max-width: 767px) {
+  .wiki-global-issues-drawer,
+  .wiki-fix-drawer {
+    .t-drawer__content-wrapper,
+    .t-drawer__content {
+      width: 100vw !important;
+      max-width: 100vw !important;
+    }
+  }
+
+  // 图形详情抽屉（480px → 100vw）
+  .t-drawer:not(.wiki-fix-drawer):not(.wiki-global-issues-drawer) {
+    .t-drawer__content-wrapper,
+    .t-drawer__content {
+      max-width: 100vw !important;
+    }
+  }
+}
 </style>
diff --git a/frontend/src/views/organization/OrganizationEditorModal.vue b/frontend/src/views/organization/OrganizationEditorModal.vue
index 1925f066e3..ca1fdd92fc 100644
--- a/frontend/src/views/organization/OrganizationEditorModal.vue
+++ b/frontend/src/views/organization/OrganizationEditorModal.vue
@@ -911,4 +911,110 @@ watch(() => props.mode, () => {
     color: var(--td-brand-color);
   }
 }
+
+// ============================================================
+// 移动端适配
+// ============================================================
+@media screen and (max-width: 767px) {
+  .settings-overlay {
+    padding: 0;
+    align-items: stretch;
+  }
+
+  .settings-modal {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .settings-container {
+    flex-direction: column;
+  }
+
+  .settings-sidebar {
+    width: 100%;
+    flex-shrink: 0;
+    border-right: none;
+    border-bottom: 1px solid var(--td-component-stroke);
+    overflow: visible;
+    background: var(--td-bg-color-container);
+  }
+
+  .sidebar-header { display: none; }
+
+  .settings-nav {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 10px 12px;
+    gap: 2px;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar { display: none; }
+  }
+
+  .nav-group-title { display: none; }
+
+  .nav-item {
+    flex-shrink: 0;
+    white-space: nowrap;
+    padding: 7px 12px;
+    margin-bottom: 0;
+    border-radius: 20px;
+    font-size: 13px;
+    min-height: 36px;
+
+    .nav-icon { margin-right: 4px; font-size: 15px; }
+
+    &.active {
+      background: var(--td-brand-color-light);
+      color: var(--td-brand-color);
+    }
+  }
+
+  .settings-content { flex: 1; }
+
+  .content-wrapper {
+    max-width: 100%;
+    padding: 20px 16px;
+  }
+
+  .close-btn {
+    top: 8px;
+    right: 8px;
+    z-index: 20;
+    width: 36px;
+    height: 36px;
+    background: var(--td-bg-color-container);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+  }
+}
+
+// 平板适配
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .settings-overlay { padding: 10px; }
+
+  .settings-modal {
+    width: 95vw;
+    max-width: 100%;
+    height: calc(100vh - 20px);
+    max-height: none;
+  }
+
+  .settings-sidebar { width: 160px; }
+
+  .content-wrapper {
+    max-width: 100%;
+    padding: 24px 20px;
+  }
+
+  .sidebar-header { padding: 14px 10px 10px; }
+  .nav-item { padding: 5px 10px; font-size: 13px; }
+  .nav-icon { margin-right: 5px; font-size: 14px; }
+}
 </style>
diff --git a/frontend/src/views/organization/OrganizationList.vue b/frontend/src/views/organization/OrganizationList.vue
index 48e549e9e2..60f9ec84d3 100644
--- a/frontend/src/views/organization/OrganizationList.vue
+++ b/frontend/src/views/organization/OrganizationList.vue
@@ -1950,6 +1950,46 @@ onUnmounted(() => {
     }
   }
 }
+
+// 移动端适配
+@media screen and (max-width: 767px) {
+  .org-list-content {
+    padding: 12px 0 0 16px;
+  }
+
+  .header {
+    padding-right: 16px;
+    margin-bottom: 12px;
+
+    h2 {
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+
+  .org-list-main {
+    padding: 0 16px 8px 0;
+  }
+
+  .org-card-wrap {
+    gap: 8px;
+  }
+}
+
+// 平板适配
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .org-list-content {
+    padding: 16px 0 0 20px;
+  }
+
+  .header {
+    padding-right: 20px;
+  }
+
+  .org-list-main {
+    padding: 0 20px 8px 0;
+  }
+}
 </style>
 
 <style lang="less">
diff --git a/frontend/src/views/organization/OrganizationSettingsModal.vue b/frontend/src/views/organization/OrganizationSettingsModal.vue
index e9ebd96c7a..f6c43be533 100644
--- a/frontend/src/views/organization/OrganizationSettingsModal.vue
+++ b/frontend/src/views/organization/OrganizationSettingsModal.vue
@@ -3446,4 +3446,110 @@ watch(addMemberPopupVisible, (visible) => {
     border-top: 1px solid var(--td-component-stroke);
   }
 }
+
+// ============================================================
+// 移动端适配
+// ============================================================
+@media screen and (max-width: 767px) {
+  .settings-overlay {
+    padding: 0;
+    align-items: stretch;
+  }
+
+  .settings-modal {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .settings-container {
+    flex-direction: column;
+  }
+
+  .settings-sidebar {
+    width: 100%;
+    flex-shrink: 0;
+    border-right: none;
+    border-bottom: 1px solid var(--td-component-stroke);
+    overflow: visible;
+    background: var(--td-bg-color-container);
+  }
+
+  .sidebar-header { display: none; }
+
+  .settings-nav {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 10px 12px;
+    gap: 2px;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar { display: none; }
+  }
+
+  .nav-group-title { display: none; }
+
+  .nav-item {
+    flex-shrink: 0;
+    white-space: nowrap;
+    padding: 7px 12px;
+    margin-bottom: 0;
+    border-radius: 20px;
+    font-size: 13px;
+    min-height: 36px;
+
+    .nav-icon { margin-right: 4px; font-size: 15px; }
+
+    &.active {
+      background: var(--td-brand-color-light);
+      color: var(--td-brand-color);
+    }
+  }
+
+  .settings-content { flex: 1; }
+
+  .content-wrapper {
+    max-width: 100%;
+    padding: 20px 16px;
+  }
+
+  .close-btn {
+    top: 8px;
+    right: 8px;
+    z-index: 20;
+    width: 36px;
+    height: 36px;
+    background: var(--td-bg-color-container);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+  }
+}
+
+// 平板适配
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .settings-overlay { padding: 10px; }
+
+  .settings-modal {
+    width: 95vw;
+    max-width: 100%;
+    height: calc(100vh - 20px);
+    max-height: none;
+  }
+
+  .settings-sidebar { width: 160px; }
+
+  .content-wrapper {
+    max-width: 100%;
+    padding: 24px 20px;
+  }
+
+  .sidebar-header { padding: 14px 10px 10px; }
+  .nav-item { padding: 5px 10px; font-size: 13px; }
+  .nav-icon { margin-right: 5px; font-size: 14px; }
+}
 </style>
diff --git a/frontend/src/views/platform/index.vue b/frontend/src/views/platform/index.vue
index 7b662caa8a..06c7b0a441 100644
--- a/frontend/src/views/platform/index.vue
+++ b/frontend/src/views/platform/index.vue
@@ -1,6 +1,34 @@
 <template>
-    <div class="main" ref="dropzone">
-        <Menu></Menu>
+    <div class="main" ref="dropzone" :class="{ 'main--mobile': uiStore.isMobile, 'main--tablet': isTablet }">
+        <!-- 移动端顶部导航栏 -->
+        <div v-if="uiStore.isMobile" class="mobile-topbar">
+            <div class="mobile-topbar__menu-btn" @click="uiStore.toggleMobileMenu()">
+                <MenuIcon size="24px" />
+            </div>
+            <div class="mobile-topbar__logo" @click="router.push('/platform/knowledge-bases')" style="cursor: pointer;">
+                <img class="mobile-topbar__logo-img" src="@/assets/img/weknora.png" alt="">
+            </div>
+            <div class="mobile-topbar__spacer"></div>
+        </div>
+
+        <!-- 桌面/平板：侧边栏 -->
+        <Menu v-if="!uiStore.isMobile" />
+
+        <!-- 移动端：Drawer 包裹侧边栏 -->
+        <t-drawer
+            v-if="uiStore.isMobile"
+            :visible="uiStore.mobileMenuOpen"
+            placement="left"
+            size="280px"
+            :close-btn="false"
+            :show-overlay="true"
+            :close-on-overlay-click="true"
+            :destroy-on-close="false"
+            @close="uiStore.closeMobileMenu()"
+        >
+            <Menu variant="drawer" @navigate="uiStore.closeMobileMenu()" />
+        </t-drawer>
+
         <div v-if="isRouterAlive" class="platform-route-outlet">
             <RouterView />
         </div>
@@ -20,8 +48,9 @@
 </template>
 <script setup lang="ts">
 import Menu from '@/components/menu.vue'
-import { ref, onMounted, onUnmounted, nextTick, provide, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, nextTick, provide, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router'
+import { MenuIcon } from 'tdesign-icons-vue-next'
 import UploadMask from '@/components/upload-mask.vue'
 import Settings from '@/views/settings/Settings.vue'
 import GlobalCommandPalette from '@/components/GlobalCommandPalette.vue'
@@ -29,16 +58,45 @@ import GlobalInvitationBell from '@/components/GlobalInvitationBell.vue'
 import NewUserGuide from '@/components/NewUserGuide.vue'
 import { useCommandPaletteStore } from '@/stores/commandPalette'
 import { useChatResourcesStore } from '@/stores/chatResources'
+import { useUIStore } from '@/stores/ui'
 import { getKnowledgeBaseById } from '@/api/knowledge-base/index'
 import { MessagePlugin } from 'tdesign-vue-next'
 import { useI18n } from 'vue-i18n'
+import { isTablet as isTabletRef } from '@/composables/useBreakpoint'
 
 const route = useRoute();
 const router = useRouter();
 const commandPaletteStore = useCommandPaletteStore();
+const uiStore = useUIStore();
 let ismask = ref(false)
 const { t } = useI18n();
 
+// 响应式断点
+const isTablet = computed(() => isTabletRef.value)
+
+// 平板模式自动折叠侧边栏；桌面模式恢复用户偏好。
+// immediate 是必需的：断点在模块加载时已求值，若首次进入就已是平板宽度，
+// 非 immediate 的 watcher 永远不会触发，侧栏会保持 260px 展开。
+let tabletOverrideActive = false
+watch(isTabletRef, (val) => {
+  if (val) {
+    tabletOverrideActive = true
+    uiStore.collapseSidebar(false)
+  } else if (tabletOverrideActive) {
+    tabletOverrideActive = false
+    const shouldCollapse = localStorage.getItem('sidebar_collapsed') === 'true'
+    if (shouldCollapse) uiStore.collapseSidebar(false)
+    else uiStore.expandSidebar(false)
+  }
+}, { immediate: true })
+
+// 移动端：路由变化时关闭 Drawer
+watch(() => route.fullPath, () => {
+  if (uiStore.isMobile && uiStore.mobileMenuOpen) {
+    uiStore.closeMobileMenu()
+  }
+})
+
 const isRouterAlive = ref(true)
 const reloadApp = () => {
     isRouterAlive.value = false
@@ -251,18 +309,82 @@ onUnmounted(() => {
     dragCounter = 0;
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .main {
     display: flex;
     align-items: stretch;
     width: 100%;
     height: 100%;
-    min-width: 600px;
     min-height: 0;
     /* 统一整页背景，让左侧菜单与右侧内容区视觉连贯 */
     background: var(--td-bg-color-container);
 }
 
+/* 移动端：纵向布局（顶部栏 + 内容区） */
+.main--mobile {
+    flex-direction: column;
+}
+
+/* 平板模式：侧边栏折叠，内容区自适应 */
+.main--tablet {
+    /* 侧边栏折叠为 60px 由 Menu 组件处理 */
+}
+
+/* ============================================================
+   移动端顶部导航栏
+   ============================================================ */
+.mobile-topbar {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    min-height: 48px;
+    padding: 0 12px;
+    background: var(--td-bg-color-container);
+    border-bottom: 1px solid var(--td-component-stroke);
+    z-index: 10;
+    flex-shrink: 0;
+
+    &__menu-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+        border-radius: 8px;
+        color: var(--td-text-color-primary);
+        flex-shrink: 0;
+
+        &:active {
+            background: var(--td-bg-color-container-hover);
+        }
+    }
+
+    &__logo {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        justify-content: center;
+    }
+
+    &__logo-img {
+        width: 100px;
+        height: auto;
+    }
+
+    &__spacer {
+        width: 40px;
+        flex-shrink: 0;
+    }
+}
+
+/* ============================================================
+   移动端 Drawer 内菜单样式调整
+   ============================================================ */
+:deep(.t-drawer__body) {
+    padding: 0;
+}
+
 /* 右侧路由区：占满剩余宽度与整列高度，并把 min-height:0 传给子页面以便内部 flex 滚动 */
 .platform-route-outlet {
     flex: 1;
@@ -273,6 +395,11 @@ onUnmounted(() => {
     overflow: hidden;
 }
 
+/* 移动端：路由区在顶部栏下方 */
+.main--mobile .platform-route-outlet {
+    height: 0; /* flex: 1 在 column 布局下需要高度约束 */
+}
+
 .upload-mask {
     background-color: rgba(255, 255, 255, 0.8);
     position: fixed;
@@ -283,7 +410,10 @@ onUnmounted(() => {
     justify-content: center;
     align-items: center;
 }
+</style>
 
+<!-- 图片拖拽抑制必须留在全局块里：整个应用依赖它，scoped 后只会命中本组件模板。 -->
+<style lang="less">
 img {
     -webkit-user-drag: none;
     -khtml-user-drag: none;
diff --git a/frontend/src/views/responsiveChatComposer.test.mjs b/frontend/src/views/responsiveChatComposer.test.mjs
new file mode 100644
index 0000000000..cf70e868a9
--- /dev/null
+++ b/frontend/src/views/responsiveChatComposer.test.mjs
@@ -0,0 +1,67 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import test from 'node:test'
+
+const read = (relative) => readFileSync(new URL(relative, import.meta.url), 'utf8')
+
+const inputField = read('../components/Input-field.vue')
+const createChat = read('./creatChat/creatChat.vue')
+const knowledgeBase = read('./knowledge/KnowledgeBase.vue')
+const platform = read('./platform/index.vue')
+const settings = read('./settings/Settings.vue')
+
+// The composer used to be sized by its host pages at four hard-coded
+// breakpoints, which left a dead gap between the typing area and the box
+// border between 768px and 1044px (issue #917).
+for (const [name, source] of [['creatChat', createChat], ['KnowledgeBase', knowledgeBase]]) {
+  test(`${name} does not pin the composer textarea to a pixel width`, () => {
+    assert.doesNotMatch(source, /t-textarea__inner\)\s*\{[^}]*width:\s*\d+px\s*!important/)
+  })
+
+  test(`${name} does not offset the composer with a hard-coded translateX`, () => {
+    assert.doesNotMatch(source, /\.answers-input\s*\{[^}]*translateX\(-\d+px\)/)
+  })
+}
+
+test('composer sizes itself from its container and keeps narrow-screen gutters', () => {
+  assert.match(inputField, /\.answers-input\s*\{[^}]*width:\s*100%;[^}]*min-width:\s*0;[^}]*box-sizing:\s*border-box;/)
+  assert.match(inputField, /\.not-desktop\(\{\s*padding-inline:\s*16px;/)
+  assert.match(inputField, /\.mobile\(\{\s*padding-inline:\s*12px;/)
+})
+
+test('the platform shell can shrink below the former desktop minimum width', () => {
+  assert.doesNotMatch(platform, /\.main\s*\{[^}]*min-width:\s*600px/)
+})
+
+test('the control bar stays on one row on phones', () => {
+  // flex-wrap would push the model selector and send button onto a second
+  // row, growing the composer and moving send out of thumb reach.
+  assert.match(inputField, /\.mobile\(\{[\s\S]*?\.control-bar\s*\{[^}]*flex-wrap:\s*nowrap;/)
+  assert.match(inputField, /\.mobile\(\{[\s\S]*?\.control-left\s*\{[^}]*overflow-x:\s*auto;/)
+})
+
+test('settings rows stack their label above the control on phones', () => {
+  // The setting pages pin the control column to min-width: 280px and give
+  // the select an inline width, which crushes the label column to one
+  // character per line at 360px.
+  const phoneBlock = /@media screen and \(max-width: 767px\) \{[\s\S]*?\n\}/.exec(settings)?.[0] ?? ''
+  assert.match(phoneBlock, /:deep\(\.settings-content \.setting-row\)\s*\{[^}]*flex-direction:\s*column;/)
+  assert.match(phoneBlock, /\.setting-row > \.setting-control\)\s*\{[^}]*min-width:\s*0;/)
+  assert.match(phoneBlock, /\.setting-row > \.setting-control > \*\)\s*\{[^}]*width:\s*100%\s*!important;/)
+})
+
+test('the tablet sidebar collapse watcher runs on first render', () => {
+  // Breakpoints are resolved at module load, so a non-immediate watcher
+  // never fires when the app opens straight into a tablet width.
+  assert.match(platform, /watch\(isTabletRef,[\s\S]*?\{\s*immediate:\s*true\s*\}\)/)
+})
+
+test('image drag suppression stays in a global style block', () => {
+  // `img { user-drag: none }` applies app-wide; a scoped block would only
+  // reach this component's own template.
+  const globalBlocks = platform.match(/<style lang="less">[\s\S]*?<\/style>/g) ?? []
+  assert.ok(
+    globalBlocks.some((block) => /\bimg\s*\{[^}]*user-drag:\s*none/.test(block)),
+    'expected the img user-drag rule to live in an unscoped <style> block',
+  )
+})
diff --git a/frontend/src/views/settings/Settings.vue b/frontend/src/views/settings/Settings.vue
index df87f00af2..8c480426ad 100644
--- a/frontend/src/views/settings/Settings.vue
+++ b/frontend/src/views/settings/Settings.vue
@@ -908,4 +908,186 @@ onUnmounted(() => {
     line-height: 1.6;
   }
 }
+
+// 移动端：全屏弹窗，顶部水平标签栏 + 全宽内容
+@media screen and (max-width: 767px) {
+  .settings-overlay {
+    padding: 0;
+    align-items: stretch;
+  }
+
+  .settings-modal {
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .settings-container {
+    flex-direction: column;
+  }
+
+  // 侧边栏变为顶部水平滚动标签栏
+  .settings-sidebar {
+    width: 100%;
+    flex-shrink: 0;
+    border-right: none;
+    border-bottom: 1px solid var(--td-component-stroke);
+    overflow: visible;
+    background: var(--td-bg-color-container);
+  }
+
+  .sidebar-header {
+    display: none;
+  }
+
+  .settings-nav {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 10px 12px;
+    gap: 2px;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .nav-group-title {
+    display: none;
+  }
+
+  .nav-item {
+    flex-shrink: 0;
+    white-space: nowrap;
+    padding: 7px 12px;
+    font-size: 13px;
+    margin-bottom: 0;
+    border-radius: 20px; // pill 形状标签
+    min-height: 36px;
+
+    .nav-icon {
+      margin-right: 4px;
+      font-size: 15px;
+    }
+
+    .nav-label {
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .expand-icon {
+      display: none; // 移动端不展开子菜单到侧边栏
+    }
+
+    &.active {
+      background: var(--td-brand-color-light);
+      color: var(--td-brand-color);
+    }
+  }
+
+  // 子菜单在移动端隐藏（点击父级后在内容区以页面内锚点形式呈现）
+  .submenu {
+    display: none;
+  }
+
+  // 内容区全宽
+  .settings-content {
+    flex: 1;
+  }
+
+  .content-wrapper {
+    max-width: 100%;
+    padding: 20px 16px;
+
+    &--wide,
+    &--full {
+      max-width: 100%;
+      padding: 16px 12px;
+    }
+  }
+
+  // 设置项在手机上改为「说明在上、控件在下」。子页面把控件列固定成
+  // min-width: 280px 并给 t-select 写了行内 width，360px 下会把说明列压到
+  // 一个字一行。后代选择器多一层是为了压过子组件 scoped 规则的同等权重，
+  // 行内宽度只能用 !important 覆盖。
+  :deep(.settings-content .setting-row) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  :deep(.settings-content .setting-row > .setting-info) {
+    max-width: 100%;
+    padding-right: 0;
+  }
+
+  :deep(.settings-content .setting-row > .setting-control) {
+    min-width: 0;
+    width: 100%;
+    align-items: stretch;
+    justify-content: flex-start;
+  }
+
+  :deep(.settings-content .setting-row > .setting-control > *) {
+    width: 100% !important;
+    max-width: 100%;
+  }
+
+  .close-btn {
+    top: 6px;
+    right: 6px;
+    z-index: 20;
+    width: 36px;
+    height: 36px;
+    background: var(--td-bg-color-container);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+  }
+}
+
+// 平板：侧边栏适中，内容区域适配
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .settings-overlay {
+    padding: 12px;
+  }
+
+  .settings-modal {
+    max-width: 100%;
+    height: calc(100vh - 24px);
+    max-height: none;
+  }
+
+  .settings-sidebar {
+    width: 170px;
+  }
+
+  .content-wrapper {
+    max-width: 100%;
+    padding: 28px 24px;
+
+    &--wide,
+    &--full {
+      padding: 24px 20px;
+    }
+  }
+
+  .sidebar-header {
+    padding: 14px 12px 10px;
+  }
+
+  .nav-item {
+    padding: 5px 10px;
+    font-size: 13px;
+  }
+
+  .nav-icon {
+    margin-right: 6px;
+    font-size: 15px;
+  }
+}
 </style>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 7b9a7bbc98..8cf2552003 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -121,6 +121,14 @@ export default defineConfig({
     vueJsx(),
     embedHtmlDevFallback(),
   ],
+  css: {
+    preprocessorOptions: {
+      less: {
+        additionalData: `@import (reference) "${resolve(__dirname, 'src/assets/responsive.less')}";\n`,
+        javascriptEnabled: true,
+      },
+    },
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),