diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 189502a..e011537 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -50,11 +50,13 @@ body {
     background-color: var(--bg-background);
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    overflow-x: hidden;
 }
 
 #app {
-    height: 100vh;
-    width: 100vw;
+    min-height: 100vh;
+    width: 100%;
     display: flex;
     flex-direction: column;
 }
@@ -136,8 +138,9 @@ body {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem 1rem;
-    border-radius: var(--radius-md);
+    padding: 0.65rem 1rem;
+    min-height: 42px;
+    border-radius: 12px;
     font-weight: 500;
     font-size: 0.875rem;
     cursor: pointer;
diff --git a/frontend/src/views/CharacterView.vue b/frontend/src/views/CharacterView.vue
index 6a806e4..b4a50c8 100644
--- a/frontend/src/views/CharacterView.vue
+++ b/frontend/src/views/CharacterView.vue
@@ -362,4 +362,88 @@ watch(() => projectStore.projectRoot, async (newRoot, oldRoot) => {
 .modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }
 .modal-actions button { padding: 0.6rem 1.2rem; border-radius: 6px; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-secondary); }
 .btn-primary { background: var(--primary) !important; color: white !important; border: none !important; }
+
+@media (max-width: 768px) {
+  .character-view {
+    padding: 0.9rem;
+    min-height: 100vh;
+    height: auto;
+  }
+
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.9rem;
+    margin-bottom: 1rem;
+  }
+
+  .header-left h1 { font-size: 1.35rem; }
+  .subtitle, .sync-status, .sync-hint { font-size: 0.8rem; }
+
+  .header-actions {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.55rem;
+  }
+
+  .btn-create, .btn-secondary {
+    width: 100%;
+    justify-content: center;
+    padding: 0.62rem 0.75rem;
+    font-size: 0.82rem;
+  }
+
+  .tabs {
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-wrap: nowrap;
+    padding-bottom: 0.65rem;
+    margin-bottom: 0.85rem;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .tabs button {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    padding: 0.55rem 0.85rem;
+    font-size: 0.82rem;
+  }
+
+  .content-area {
+    flex-direction: column;
+    gap: 0.9rem;
+  }
+
+  .char-list {
+    width: 100%;
+    max-height: 34vh;
+  }
+
+  .char-editor, .no-selection {
+    min-height: 48vh;
+  }
+
+  .editor-header {
+    gap: 0.75rem;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .btn-save {
+    width: 100%;
+  }
+
+  .editor-content {
+    min-height: 42vh;
+    font-size: 0.85rem;
+    padding: 0.85rem;
+  }
+
+  .modal {
+    width: min(92vw, 400px);
+    padding: 1rem;
+  }
+}
+
 </style>
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 97de5eb..653027d 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -538,4 +538,210 @@ h1, h2, h3, p { margin: 0; }
 .init-guide-card .btn {
   gap: 0.375rem;
 }
+@media (max-width: 900px) {
+  .dashboard-scroll-container {
+    padding: 1.5rem 1rem;
+  }
+
+  .welcome-text {
+    font-size: 1.85rem;
+  }
+
+  .project-info {
+    font-size: 0.96rem;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .main-content-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .content-left,
+  .content-right {
+    gap: 1rem;
+  }
+
+  .premium-card,
+  .init-guide-card {
+    padding: 1.2rem;
+    border-radius: 18px;
+  }
+}
+
+@media (max-width: 640px) {
+  .dashboard-scroll-container {
+    padding: 0.75rem 0.65rem 1rem;
+  }
+
+  .header-section {
+    margin-bottom: 1rem;
+  }
+
+  .welcome-text {
+    font-size: 1.28rem;
+    gap: 0.42rem;
+    align-items: flex-start;
+    margin-bottom: 0.3rem;
+  }
+
+  .welcome-icon {
+    width: 1.7rem;
+    height: 1.7rem;
+    flex-shrink: 0;
+    margin-top: 0.02rem;
+  }
+
+  .project-info {
+    font-size: 0.88rem;
+  }
+
+  .project-name {
+    display: inline-block;
+    margin-top: 0.15rem;
+    max-width: 100%;
+    word-break: break-word;
+  }
+
+  .stats-grid {
+    grid-template-columns: 1fr;
+    gap: 0.65rem;
+    margin-bottom: 1rem;
+  }
+
+  .stat-card {
+    padding: 0.82rem 0.9rem;
+    border-radius: 14px;
+    gap: 0.85rem;
+  }
+
+  .stat-icon-wrapper {
+    width: 2.6rem;
+    height: 2.6rem;
+    border-radius: 10px;
+    font-size: 1rem;
+  }
+
+  .stat-value {
+    font-size: 1.12rem;
+  }
+
+  .stat-key {
+    font-size: 0.74rem;
+  }
+
+  .actions-grid {
+    grid-template-columns: 1fr;
+    gap: 0.6rem;
+  }
+
+  .action-item {
+    padding: 0.82rem 0.9rem;
+    align-items: center;
+    gap: 0.75rem;
+    border-radius: 12px;
+  }
+
+  .action-icon-box {
+    width: 2.45rem;
+    height: 2.45rem;
+    border-radius: 10px;
+  }
+
+  .action-label {
+    font-size: 0.92rem;
+  }
+
+  .action-desc {
+    font-size: 0.72rem;
+  }
+
+  .premium-card,
+  .init-guide-card {
+    padding: 0.95rem;
+    border-radius: 16px;
+  }
+
+  .card-title {
+    font-size: 1rem;
+    margin-bottom: 0.85rem;
+  }
+
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.45rem;
+  }
+
+  .goal-target {
+    align-self: flex-start;
+    font-size: 0.78rem;
+  }
+
+  .goal-hint {
+    font-size: 0.82rem;
+  }
+
+  .timeline-item {
+    padding-left: 1rem;
+    padding-bottom: 0.8rem;
+  }
+
+  .timeline-line {
+    left: 6px;
+    top: 18px;
+  }
+
+  .timeline-marker {
+    width: 14px;
+    height: 14px;
+  }
+
+  .marker-dot {
+    width: 7px;
+    height: 7px;
+  }
+
+  .timeline-header {
+    flex-direction: column;
+    gap: 0.18rem;
+  }
+
+  .timeline-title {
+    font-size: 0.86rem;
+  }
+
+  .timeline-time {
+    margin-top: 0;
+    font-size: 0.7rem;
+  }
+
+  .timeline-content {
+    padding: 0.72rem 0.75rem;
+    border-radius: 10px;
+  }
+
+  .type-badge {
+    font-size: 0.68rem;
+    padding: 2px 6px;
+  }
+
+  .init-guide {
+    padding: 0.6rem 0 0.35rem;
+  }
+
+  .init-guide-card {
+    padding: 1.2rem 0.9rem;
+  }
+
+  .init-guide-card .btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
 </style>
diff --git a/frontend/src/views/FanqiePublishView.vue b/frontend/src/views/FanqiePublishView.vue
index 61aa061..5b53cc0 100644
--- a/frontend/src/views/FanqiePublishView.vue
+++ b/frontend/src/views/FanqiePublishView.vue
@@ -660,4 +660,164 @@ function formatWordCount(c) { return c >= 10000 ? (c / 10000).toFixed(1) + '万'
 .spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
 .loading-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
+
+@media (max-width: 768px) {
+  .fanqie-layout {
+    min-height: 100vh;
+    padding-bottom: 2rem;
+  }
+
+  .fanqie-container {
+    padding: 0 0.9rem;
+  }
+
+  .page-header {
+    padding: 1rem 0 0.9rem;
+  }
+
+  .page-header-top {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .page-title {
+    font-size: 1.35rem;
+    line-height: 1.2;
+  }
+
+  .page-subtitle {
+    font-size: 0.84rem;
+  }
+
+  .card {
+    padding: 0.95rem;
+    border-radius: 12px;
+    margin-bottom: 0.9rem;
+  }
+
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.65rem;
+  }
+
+  .header-actions,
+  .publish-btns,
+  .account-actions {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.45rem;
+  }
+
+  .header-actions .btn,
+  .publish-btns .btn,
+  .account-actions .btn,
+  .account-actions a.btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .account-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.65rem;
+    padding: 0.75rem;
+  }
+
+  .account-info {
+    flex-wrap: wrap;
+    gap: 0.45rem;
+  }
+
+  .add-account-form,
+  .config-input-group {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .config-input-group .btn,
+  .add-account-form .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .book-chips {
+    gap: 0.4rem;
+  }
+
+  .book-chip {
+    font-size: 0.78rem;
+    padding: 0.35rem 0.72rem;
+  }
+
+  .chapter-table-wrap {
+    border: none;
+    max-height: none;
+    overflow: visible;
+  }
+
+  .chapter-table,
+  .chapter-table thead,
+  .chapter-table tbody,
+  .chapter-table th,
+  .chapter-table td,
+  .chapter-table tr {
+    display: block;
+    width: 100%;
+  }
+
+  .chapter-table thead {
+    display: none;
+  }
+
+  .chapter-table tbody {
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+  }
+
+  .chapter-table tr {
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--bg-card);
+    padding: 0.75rem 0.8rem;
+  }
+
+  .chapter-table td {
+    border: none;
+    padding: 0.18rem 0;
+  }
+
+  .chapter-table td::before {
+    display: inline-block;
+    min-width: 3.6rem;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+    font-weight: 600;
+  }
+
+  .chapter-table .col-check::before { content: '选择'; }
+  .chapter-table .col-id::before { content: '章节'; }
+  .chapter-table .col-title::before { content: '标题'; }
+  .chapter-table .col-words::before { content: '字数'; }
+  .chapter-table .col-status::before { content: '状态'; }
+
+  .publish-controls {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .publish-progress {
+    padding: 0.9rem;
+  }
+
+  .qr-screenshot {
+    max-width: min(72vw, 260px);
+    max-height: min(72vw, 260px);
+  }
+}
+
 </style>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index db62ff5..94f818f 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -395,10 +395,11 @@ function getGenreIcon(genre) {
 <style scoped>
 .home-page {
   height: 100%;
+  min-height: 100vh;
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: var(--bg-background);
+  background: linear-gradient(180deg, #fbfaf7 0%, #f6f2ea 100%);
   overflow-y: auto;
 }
 
@@ -407,40 +408,47 @@ function getGenreIcon(genre) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1.25rem 2.5rem;
-  background: white;
+  padding: 1.1rem 2rem;
+  background: rgba(255,255,255,0.82);
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
+  backdrop-filter: blur(12px);
+  position: sticky;
+  top: 0;
+  z-index: 5;
 }
 
 .top-bar-left {
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  min-width: 0;
 }
 
 .logo-icon {
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 1.65rem;
+  height: 1.65rem;
   color: var(--primary);
+  flex-shrink: 0;
 }
 
 .logo-text {
-  font-size: 1.25rem;
+  font-size: 1.2rem;
   font-weight: 700;
   background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  white-space: nowrap;
 }
 
 /* Main Content */
 .home-content {
   flex: 1;
-  max-width: 1200px;
+  max-width: 1240px;
   width: 100%;
   margin: 0 auto;
-  padding: 2.5rem;
+  padding: 2rem;
 }
 
 /* Title Row */
@@ -448,11 +456,13 @@ function getGenreIcon(genre) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 2rem;
+  gap: 1rem;
+  margin-bottom: 1.75rem;
+  flex-wrap: wrap;
 }
 
 .page-title {
-  font-size: 1.75rem;
+  font-size: clamp(1.5rem, 4vw, 1.9rem);
   font-weight: 800;
   color: var(--text-primary);
   letter-spacing: -0.02em;
@@ -461,6 +471,7 @@ function getGenreIcon(genre) {
 .title-actions {
   display: flex;
   gap: 0.75rem;
+  flex-wrap: wrap;
 }
 
 .title-actions .btn {
@@ -470,26 +481,28 @@ function getGenreIcon(genre) {
 /* Projects Grid */
 .projects-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
 }
 
 .project-card {
-  background: white;
-  border-radius: 16px;
-  padding: 1.5rem;
-  border: 1px solid rgba(229, 231, 235, 0.6);
-  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04);
+  background: rgba(255,255,255,0.92);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 1.2rem;
+  border: 1px solid rgba(224, 219, 210, 0.8);
+  box-shadow: 0 8px 24px -10px rgba(44, 40, 37, 0.10);
   cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.8rem;
+  min-width: 0;
 }
 
 .project-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 12px 24px -4px rgba(99, 102, 241, 0.12);
+  box-shadow: 0 16px 32px -12px rgba(99, 102, 241, 0.16);
   border-color: var(--border-hover);
 }
 
@@ -502,17 +515,19 @@ function getGenreIcon(genre) {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
+  gap: 0.75rem;
 }
 
 .card-genre-icon {
   width: 2.5rem;
   height: 2.5rem;
-  border-radius: 10px;
+  border-radius: 14px;
   background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.06));
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--primary);
+  flex-shrink: 0;
 }
 
 .card-genre-icon svg {
@@ -526,12 +541,13 @@ function getGenreIcon(genre) {
   color: var(--text-muted);
   cursor: pointer;
   padding: 0.375rem;
-  border-radius: 6px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: all 0.2s;
+  flex-shrink: 0;
 }
 
 .project-card:hover .card-delete-btn {
@@ -544,19 +560,20 @@ function getGenreIcon(genre) {
 }
 
 .card-title {
-  font-size: 1.125rem;
+  font-size: 1.08rem;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0;
-  line-height: 1.3;
+  line-height: 1.35;
+  word-break: break-word;
 }
 
 .card-genre-tag {
   display: inline-flex;
   align-self: flex-start;
   font-size: 0.75rem;
-  font-weight: 500;
-  padding: 0.125rem 0.5rem;
+  font-weight: 600;
+  padding: 0.22rem 0.6rem;
   border-radius: 999px;
   background: rgba(99, 102, 241, 0.08);
   color: var(--primary);
@@ -564,7 +581,8 @@ function getGenreIcon(genre) {
 
 .card-meta {
   display: flex;
-  gap: 1rem;
+  gap: 0.8rem;
+  flex-wrap: wrap;
 }
 
 .meta-item {
@@ -581,8 +599,8 @@ function getGenreIcon(genre) {
 
 .card-footer {
   margin-top: auto;
-  padding-top: 0.75rem;
-  border-top: 1px solid rgba(229, 231, 235, 0.5);
+  padding-top: 0.8rem;
+  border-top: 1px solid rgba(229, 231, 235, 0.6);
 }
 
 .card-date {
@@ -598,9 +616,10 @@ function getGenreIcon(genre) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 4rem 2rem;
+  padding: 4rem 1.5rem;
   color: var(--text-muted);
   gap: 1rem;
+  text-align: center;
 }
 
 .spinner {
@@ -637,7 +656,7 @@ function getGenreIcon(genre) {
 /* Modal Styling */
 .modal-overlay {
   position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
+  inset: 0;
   background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(8px);
   display: flex;
@@ -645,6 +664,7 @@ function getGenreIcon(genre) {
   justify-content: center;
   z-index: 100;
   animation: fadeIn 0.2s ease-out;
+  padding: 1rem;
 }
 
 @keyframes fadeIn {
@@ -654,10 +674,12 @@ function getGenreIcon(genre) {
 
 .modal {
   background: white;
-  border-radius: var(--radius-xl);
-  padding: 2rem;
+  border-radius: 20px;
+  padding: 1.5rem;
   width: 100%;
-  max-width: 500px;
+  max-width: 520px;
+  max-height: min(90vh, 760px);
+  overflow: auto;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   border: 1px solid var(--border);
   animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
@@ -673,12 +695,13 @@ function getGenreIcon(genre) {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
 }
 
 .modal h3 {
   margin: 0;
-  font-size: 1.5rem;
+  font-size: 1.35rem;
   font-weight: 700;
   color: var(--text-primary);
 }
@@ -694,6 +717,7 @@ function getGenreIcon(genre) {
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
+  flex-shrink: 0;
 }
 
 .close-btn:hover {
@@ -702,7 +726,7 @@ function getGenreIcon(genre) {
 }
 
 .form-group {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.2rem;
 }
 
 .form-group label {
@@ -715,10 +739,10 @@ function getGenreIcon(genre) {
 
 .input {
   width: 100%;
-  padding: 0.625rem 0.75rem;
+  padding: 0.75rem 0.875rem;
   border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
+  border-radius: 14px;
+  font-size: 0.92rem;
   color: var(--text-primary);
   background: white;
   transition: border-color 0.2s;
@@ -740,10 +764,11 @@ function getGenreIcon(genre) {
 .modal-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 1rem;
-  margin-top: 2.5rem;
-  padding-top: 1.5rem;
+  gap: 0.75rem;
+  margin-top: 2rem;
+  padding-top: 1.25rem;
   border-top: 1px solid var(--border);
+  flex-wrap: wrap;
 }
 
 /* Advanced toggle */
@@ -770,4 +795,82 @@ function getGenreIcon(genre) {
 .advanced-toggle .rotate-90 {
   transform: rotate(90deg);
 }
+
+@media (max-width: 900px) {
+  .top-bar {
+    padding: 1rem 1rem 0.9rem;
+  }
+
+  .home-content {
+    padding: 1.25rem 1rem 1.5rem;
+  }
+
+  .title-row {
+    align-items: stretch;
+  }
+
+  .title-actions {
+    width: 100%;
+  }
+
+  .title-actions .btn {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 640px) {
+  .top-bar {
+    padding: 0.9rem 0.875rem;
+  }
+
+  .logo-text {
+    font-size: 1.05rem;
+  }
+
+  .home-content {
+    padding: 1rem 0.875rem 1.2rem;
+  }
+
+  .projects-grid {
+    grid-template-columns: 1fr;
+    gap: 0.85rem;
+  }
+
+  .project-card {
+    padding: 1rem;
+    border-radius: 18px;
+  }
+
+  .project-card .card-delete-btn {
+    opacity: 1;
+  }
+
+  .card-meta {
+    flex-direction: column;
+    gap: 0.45rem;
+  }
+
+  .title-actions {
+    flex-direction: column;
+  }
+
+  .title-actions .btn {
+    width: 100%;
+  }
+
+  .modal {
+    padding: 1.1rem;
+    border-radius: 18px;
+    max-height: calc(100vh - 2rem);
+  }
+
+  .modal-actions {
+    flex-direction: column-reverse;
+  }
+
+  .modal-actions .btn {
+    width: 100%;
+  }
+}
 </style>
diff --git a/frontend/src/views/OutlineView.vue b/frontend/src/views/OutlineView.vue
index 8f203a9..0bc0da0 100644
--- a/frontend/src/views/OutlineView.vue
+++ b/frontend/src/views/OutlineView.vue
@@ -1,7 +1,7 @@
 <!-- Copyright (c) 2026 左岚. All rights reserved. -->
 <!-- OutlineView.vue - 现代化大纲编辑页面 -->
 <script setup>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
 import { outlinesApi, aiApi } from '../api'
 import { useAiTaskStore } from '../stores/aiTask'
 import { useProjectStore } from '../stores/project'
@@ -17,6 +17,13 @@ const saving = ref(false)
 const aiPlanning = ref(false)
 const message = ref('')
 const showSidebar = ref(true)
+const isMobileViewport = ref(false)
+
+function syncViewport() {
+  if (typeof window === 'undefined') return
+  isMobileViewport.value = window.innerWidth < 768
+  if (!isMobileViewport.value) showSidebar.value = true
+}
 
 // View Mode: 'text' or 'kanban'
 const viewMode = ref('text')
@@ -35,6 +42,8 @@ const projectStore = useProjectStore()
 const aiTaskStore = useAiTaskStore()
 
 onMounted(async () => {
+    syncViewport()
+    window.addEventListener('resize', syncViewport)
     await loadOutlines()
     
     // 如果正在初始化，保持 AI 状态
@@ -46,6 +55,10 @@ onMounted(async () => {
     }
 })
 
+onUnmounted(() => {
+  window.removeEventListener('resize', syncViewport)
+})
+
 // === Sync Logic ===
 watch(editContent, (newVal) => {
     if (viewMode.value === 'kanban') {
@@ -402,16 +415,22 @@ async function executeAiPolish(volume, requirements) {
 <template>
   <div class="outline-layout backend-bg">
     <!-- 左侧导航栏 -->
-    <aside class="outline-sidebar" :class="{ collapsed: !showSidebar }">
+    <div v-if="showSidebar && isMobileViewport" class="outline-sidebar-backdrop" @click="showSidebar = false"></div>
+    <aside class="outline-sidebar" :class="{ collapsed: !showSidebar, mobileOverlay: isMobileViewport }">
       <div class="sidebar-header">
         <div class="header-row">
             <h2 class="sidebar-title">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 mr-2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
             大纲目录
             </h2>
-            <button class="icon-btn sidebar-btn" @click="createNewVolume" title="新建卷" v-if="!aiTaskStore.isRunning">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
-            </button>
+            <div class="outline-sidebar-actions">
+              <button class="icon-btn sidebar-btn" @click="createNewVolume" title="新建卷" v-if="!aiTaskStore.isRunning">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
+              </button>
+              <button v-if="isMobileViewport" class="icon-btn sidebar-btn" @click="showSidebar = false" title="关闭目录">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+              </button>
+            </div>
         </div>
         
         <!-- 初始化状态指示 -->
@@ -467,15 +486,37 @@ async function executeAiPolish(volume, requirements) {
         <!-- 顶部工具栏 -->
         <header class="editor-header">
           <div class="header-left">
-            <h2 class="volume-title">
-              {{ selectedVolume === 'total' ? '全书总纲' : `第 ${selectedVolume} 卷大纲` }}
-            </h2>
+            <div class="outline-mobile-title-row">
+              <button v-if="isMobileViewport && !showSidebar" class="outline-mobile-nav-btn" @click="showSidebar = true" title="打开大纲目录">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
+              </button>
+              <h2 class="volume-title">
+                {{ selectedVolume === 'total' ? '全书总纲' : `第 ${selectedVolume} 卷大纲` }}
+              </h2>
+            </div>
             <span v-if="aiPlanning" class="ai-status">
               <span class="pulse-dot"></span> AI 演算中...
             </span>
+            <div v-if="isMobileViewport" class="outline-mobile-actions">
+              <div class="view-toggle tabs-panel">
+                  <button :class="{'active': viewMode === 'text'}" @click="viewMode = 'text'" title="文本编辑视图">文本</button>
+                  <button :class="{'active': viewMode === 'kanban'}" @click="viewMode = 'kanban'" title="看板拖拽视图">看板</button>
+              </div>
+              <div class="outline-mobile-action-row">
+                <button class="btn btn-ai outline-btn" @click="aiPlanVolume" :disabled="aiPlanning">
+                  {{ selectedVolume === 'total' ? 'AI规划' : '规划本卷' }}
+                </button>
+                <button class="btn btn-secondary outline-btn" @click="polishOutline" :disabled="aiPlanning || !editContent" title="润色当前大纲">
+                  润色
+                </button>
+                <button class="btn btn-primary primary-btn" @click="saveOutline" :disabled="saving">
+                  {{ saving ? '保存中' : '保存' }}
+                </button>
+              </div>
+            </div>
           </div>
           
-          <div class="header-actions">
+          <div v-if="!isMobileViewport" class="header-actions">
             <!-- 视图切换 -->
             <div class="view-toggle tabs-panel">
                 <button :class="{'active': viewMode === 'text'}" @click="viewMode = 'text'" title="文本编辑视图">📄 文本</button>
@@ -647,6 +688,12 @@ async function executeAiPolish(volume, requirements) {
 }
 .outline-sidebar.collapsed { width: 0; border: none; overflow: hidden; }
 .outline-sidebar.collapsed * { display: none; }
+.outline-sidebar.mobileOverlay.collapsed {
+  transform: translateX(-100%);
+  width: min(86vw, 320px);
+  border-right: 1px solid #e5e7eb;
+  pointer-events: none;
+}
 
 .sidebar-header {
   padding: 1.5rem;
@@ -663,6 +710,12 @@ async function executeAiPolish(volume, requirements) {
   width: 100%;
 }
 
+.outline-sidebar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
 .sidebar-title {
   font-size: 1.2rem;
   font-weight: 700;
@@ -1099,4 +1152,182 @@ async function executeAiPolish(volume, requirements) {
 .empty-icon { font-size: 4rem; margin-bottom: 1rem; color: #9ca3af; }
 .empty-content h3 { font-size: 1.5rem; margin-bottom: 0.8rem; color: #111827; }
 .empty-content p { color: #6b7280; margin-bottom: 2rem; line-height: 1.6; }
+
+.outline-sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.28);
+  z-index: 19;
+}
+
+@media (max-width: 768px) {
+  .outline-layout {
+    min-height: 100vh;
+    position: relative;
+  }
+
+  .outline-sidebar.mobileOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: min(86vw, 320px);
+    max-width: 320px;
+    height: 100vh;
+    max-height: 100vh;
+    z-index: 20;
+    box-shadow: 10px 0 32px rgba(15, 23, 42, 0.18);
+    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+    transform: translateX(0);
+    transition: transform 0.24s ease;
+  }
+
+  .outline-main {
+    min-width: 0;
+  }
+
+  .editor-container {
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .editor-header {
+    padding: 0.9rem 0.9rem 0.75rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.8rem;
+  }
+
+  .header-left {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .outline-mobile-title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.28rem;
+  }
+
+  .outline-mobile-nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .outline-mobile-actions {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .outline-mobile-action-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .volume-title {
+    font-size: 1.2rem;
+  }
+
+  .ai-status {
+    margin-left: 0;
+    font-size: 0.8rem;
+  }
+
+  .header-actions {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 0.55rem;
+  }
+
+  .tabs-panel {
+    order: 3;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .outline-mobile-actions .tabs-panel {
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  .tabs-panel button,
+  .outline-btn,
+  .primary-btn {
+    font-size: 0.82rem;
+  }
+
+  .outline-mobile-action-row .outline-btn,
+  .outline-mobile-action-row .primary-btn {
+    width: 100%;
+    justify-content: center;
+    padding: 0.62rem 0.45rem;
+  }
+
+  .sidebar-header {
+    padding: 1rem 0.95rem 0.85rem;
+  }
+
+  .outline-list {
+    padding: 0.7rem 0.75rem;
+  }
+
+  .outline-item {
+    padding: 0.72rem 0.82rem;
+    margin-bottom: 0.28rem;
+    border-radius: 10px;
+  }
+
+  .item-title {
+    font-size: 0.85rem;
+  }
+
+  .sidebar-footer {
+    display: none;
+  }
+
+  .editor-wrapper {
+    min-height: calc(100vh - 180px);
+  }
+
+  .text-editor-box {
+    padding: 1rem 0.95rem 1.4rem;
+    font-size: 0.96rem;
+    line-height: 1.7;
+  }
+
+  .kanban-board {
+    padding: 1rem 0.9rem 1.25rem;
+  }
+
+  .kanban-column {
+    min-width: 100%;
+  }
+
+  .toast-message {
+    width: calc(100% - 1.5rem);
+    max-width: 420px;
+    bottom: 1rem;
+    font-size: 0.82rem;
+    padding: 0.7rem 1rem;
+  }
+
+  .theme-empty {
+    margin: 1rem;
+    padding: 1.6rem 1.1rem;
+  }
+}
 </style>
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index cf21cbe..cc9a63f 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -1183,18 +1183,181 @@ async function rebuildIndex() {
   margin-top: 1.5rem;
 }
 @media (max-width: 900px) {
+  .project-view {
+    padding: 1.25rem 1rem;
+  }
+  .project-content {
+    padding-bottom: 2rem;
+  }
+  .page-header {
+    margin-bottom: 1.5rem;
+  }
+  .page-title {
+    font-size: 1.65rem;
+  }
+  .page-subtitle {
+    font-size: 0.92rem;
+  }
+  .premium-card,
+  .init-card {
+    padding: 1.2rem;
+    border-radius: 18px;
+    margin-bottom: 1rem;
+  }
+  .card-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.9rem;
+  }
+  .title-actions,
+  .header-actions {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  .title-display {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .project-title-text {
+    font-size: 1.05rem;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .title-input-edit {
+    width: 100%;
+    font-size: 1.05rem;
+  }
   .target-words-row {
     justify-content: flex-start;
-    margin-top: -0.5rem;
+    margin-top: -0.25rem;
+    flex-wrap: wrap;
   }
   .target-words-input {
     width: 130px;
   }
+  .stats-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.75rem;
+  }
+  .stat-box {
+    padding: 0.85rem;
+  }
+  .guide-grid,
+  .form-grid,
+  .form-grid-config {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  .form-group.full {
+    grid-column: span 1;
+  }
   .settings-grid { grid-template-columns: 1fr; }
   .genre-profile-head {
     flex-direction: column;
     align-items: stretch;
   }
+  .model-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .model-row .btn,
+  .model-row :deep(.input-container) {
+    width: 100%;
+  }
+  .titles-dialog {
+    width: calc(100vw - 1.5rem);
+    max-width: calc(100vw - 1.5rem);
+    max-height: calc(100vh - 1.5rem);
+    padding: 1.2rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .project-view {
+    padding: 1rem 0.75rem 1.25rem;
+  }
+  .page-header {
+    text-align: left;
+  }
+  .page-title {
+    font-size: 1.45rem;
+  }
+  .premium-card,
+  .init-card {
+    padding: 1rem;
+    border-radius: 16px;
+  }
+  .stats-row {
+    grid-template-columns: 1fr;
+  }
+  .guide-section {
+    margin: 1.5rem 0;
+  }
+  .guide-grid {
+    grid-template-columns: 1fr;
+    gap: 0.85rem;
+  }
+  .guide-card {
+    padding: 1rem;
+    gap: 0.9rem;
+    align-items: flex-start;
+  }
+  .guide-icon-wrapper {
+    width: 3rem;
+    height: 3rem;
+    flex-shrink: 0;
+  }
+  .guide-content h4 {
+    font-size: 1rem;
+  }
+  .guide-content p,
+  .synopsis-content,
+  .warning-body,
+  .setting-content pre {
+    font-size: 0.85rem;
+    line-height: 1.65;
+  }
+  .init-header h2 {
+    font-size: 1.35rem;
+  }
+  .input-modern,
+  .btn-primary-gradient,
+  .btn-danger-ghost {
+    min-height: 44px;
+  }
+  .btn-primary-gradient,
+  .btn-danger-ghost,
+  .genre-profile-head .btn,
+  .title-actions .btn,
+  .header-actions .btn,
+  .modal-actions .btn {
+    width: 100%;
+    justify-content: center;
+  }
+  .header-actions,
+  .title-actions,
+  .modal-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.6rem;
+  }
+  .target-words-input {
+    width: 100%;
+  }
+  .outline-warning-banner,
+  .genre-profile-card,
+  .synopsis-content,
+  .setting-content {
+    padding: 0.9rem;
+  }
+  .danger-zone {
+    margin-top: 1.5rem;
+  }
 }
 .setting-card {
   cursor: pointer;
diff --git a/frontend/src/views/RagView.vue b/frontend/src/views/RagView.vue
index 5671063..c934dfd 100644
--- a/frontend/src/views/RagView.vue
+++ b/frontend/src/views/RagView.vue
@@ -316,4 +316,104 @@ function highlightContent(content) {
 .empty-state h3 { color: var(--text-secondary); margin-bottom: 0.5rem; }
 .empty-state p { color: var(--text-muted); }
 .error-msg { color: var(--error); background: rgba(239, 68, 68, 0.1); display: inline-block; padding: 0.5rem 1rem; border-radius: var(--radius-md); }
+
+@media (max-width: 768px) {
+  .rag-layout {
+    min-height: 100vh;
+    padding-bottom: 2rem;
+  }
+
+  .rag-container {
+    padding: 0 0.9rem;
+  }
+
+  .rag-header {
+    padding: 1rem 0 1.1rem;
+    text-align: left;
+  }
+
+  .page-title {
+    font-size: 1.35rem;
+    margin-bottom: 0.35rem;
+  }
+
+  .page-subtitle {
+    font-size: 0.86rem;
+    margin-bottom: 1rem;
+  }
+
+  .search-box {
+    padding: 0.95rem;
+    border-radius: 12px;
+  }
+
+  .search-input-wrapper {
+    flex-direction: column;
+    gap: 0.65rem;
+  }
+
+  .main-search-input {
+    width: 100%;
+    font-size: 1rem;
+    padding: 0.9rem 1rem;
+  }
+
+  .btn-search {
+    width: 100%;
+    justify-content: center;
+    padding: 0.82rem 1rem;
+  }
+
+  .search-options {
+    flex-wrap: wrap;
+    gap: 0.8rem;
+    align-items: flex-start;
+  }
+
+  .option-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+  }
+
+  .stats-mini {
+    margin-left: 0;
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+  }
+
+  .results-area {
+    margin-top: 1rem;
+  }
+
+  .result-card {
+    padding: 0.95rem;
+    border-radius: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: 0.55rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .header-left,
+  .header-right {
+    flex-wrap: wrap;
+    gap: 0.45rem;
+  }
+
+  .card-content {
+    font-size: 0.92rem;
+    line-height: 1.65;
+  }
+
+  .loading-state,
+  .empty-state {
+    padding: 2.5rem 0 2rem;
+  }
+}
+
 </style>
diff --git a/frontend/src/views/WorkspaceLayout.vue b/frontend/src/views/WorkspaceLayout.vue
index 8c0b6f5..123d34b 100644
--- a/frontend/src/views/WorkspaceLayout.vue
+++ b/frontend/src/views/WorkspaceLayout.vue
@@ -3,11 +3,60 @@
 <script setup>
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
 import { useProjectStore } from '../stores/project'
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 const route = useRoute()
 const router = useRouter()
 const projectStore = useProjectStore()
+const isMobileViewport = ref(false)
+const showMobileWorkspaceNav = ref(false)
+const floatingMenuPos = ref({ x: 0, y: 0 })
+const isDraggingMenu = ref(false)
+let dragOffsetX = 0
+let dragOffsetY = 0
+
+function clampFloatingMenu() {
+  if (typeof window === 'undefined') return
+  const maxX = Math.max(12, window.innerWidth - 64)
+  const maxY = Math.max(12, window.innerHeight - 64)
+  floatingMenuPos.value = {
+    x: Math.min(Math.max(12, floatingMenuPos.value.x), maxX),
+    y: Math.min(Math.max(12, floatingMenuPos.value.y), maxY)
+  }
+}
+
+function setDefaultFloatingMenuPos() {
+  if (typeof window === 'undefined') return
+  floatingMenuPos.value = { x: window.innerWidth - 68, y: window.innerHeight - 84 }
+  clampFloatingMenu()
+}
+
+function onFloatingMenuPointerMove(event) {
+  if (!isDraggingMenu.value) return
+  floatingMenuPos.value = { x: event.clientX - dragOffsetX, y: event.clientY - dragOffsetY }
+  clampFloatingMenu()
+}
+
+function stopFloatingMenuDrag() {
+  isDraggingMenu.value = false
+}
+
+function startFloatingMenuDrag(event) {
+  isDraggingMenu.value = true
+  dragOffsetX = event.clientX - floatingMenuPos.value.x
+  dragOffsetY = event.clientY - floatingMenuPos.value.y
+}
+
+function syncMobileWorkspaceLayout() {
+  if (typeof window === 'undefined') return
+  isMobileViewport.value = window.innerWidth <= 768
+  if (!isMobileViewport.value) {
+    showMobileWorkspaceNav.value = false
+  } else if (!floatingMenuPos.value.x && !floatingMenuPos.value.y) {
+    setDefaultFloatingMenuPos()
+  }
+  clampFloatingMenu()
+}
 
 onMounted(() => {
   // Only fetch if store doesn't already have data (e.g., page refresh)
@@ -15,6 +64,17 @@ onMounted(() => {
   if (projectStore.projectRoot && !projectStore.title) {
     projectStore.fetchStatus()
   }
+  syncMobileWorkspaceLayout()
+  if (isMobileViewport.value) setDefaultFloatingMenuPos()
+  window.addEventListener('resize', syncMobileWorkspaceLayout)
+  window.addEventListener('pointermove', onFloatingMenuPointerMove)
+  window.addEventListener('pointerup', stopFloatingMenuDrag)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncMobileWorkspaceLayout)
+  window.removeEventListener('pointermove', onFloatingMenuPointerMove)
+  window.removeEventListener('pointerup', stopFloatingMenuDrag)
 })
 
 const navItems = [
@@ -75,6 +135,10 @@ function goBackToProjects() {
   router.push('/')
 }
 
+function closeMobileWorkspaceNav() {
+  if (isMobileViewport.value) showMobileWorkspaceNav.value = false
+}
+
 function isActiveRoute(itemPath) {
   if (itemPath === '/workspace/dashboard') {
     return route.path === '/workspace/dashboard'
@@ -85,16 +149,18 @@ function isActiveRoute(itemPath) {
 
 <template>
   <div class="workspace-layout">
+    <div v-if="isMobileViewport && showMobileWorkspaceNav" class="workspace-mobile-backdrop" @click="showMobileWorkspaceNav = false"></div>
+
     <!-- Sidebar -->
-    <aside class="sidebar">
+    <aside class="sidebar" :class="{ 'mobile-overlay': isMobileViewport, 'mobile-open': showMobileWorkspaceNav }">
       <div class="sidebar-header">
-        <!-- Back to project list -->
-        <button class="back-btn" @click="goBackToProjects">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
-          </svg>
-          <span>返回项目列表</span>
-        </button>
+        <div class="sidebar-header-row sidebar-header-row-end">
+          <button v-if="isMobileViewport" class="mobile-close-btn" @click="showMobileWorkspaceNav = false" title="关闭导航">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
       </div>
 
       <!-- Current project name -->
@@ -114,6 +180,7 @@ function isActiveRoute(itemPath) {
           :key="item.path"
           :to="item.path"
           class="nav-item"
+          @click="closeMobileWorkspaceNav"
           :class="{ active: isActiveRoute(item.path) }"
         >
           <span class="nav-icon" v-html="item.icon"></span>
@@ -140,6 +207,14 @@ function isActiveRoute(itemPath) {
 
     <!-- Main Content -->
     <main class="main-content">
+      <button
+        v-if="isMobileViewport && !showMobileWorkspaceNav"
+        class="workspace-mobile-menu-btn"
+        :style="{ left: `${floatingMenuPos.x}px`, top: `${floatingMenuPos.y}px` }"
+        @click="!isDraggingMenu && (showMobileWorkspaceNav = true)"
+        @pointerdown.prevent="startFloatingMenuDrag"
+        title="打开全局导航"
+      >☰</button>
       <div class="content-container">
         <RouterView />
       </div>
@@ -150,6 +225,7 @@ function isActiveRoute(itemPath) {
 <style scoped>
 .workspace-layout {
   display: flex;
+  min-height: 100vh;
   height: 100%;
   width: 100%;
   background-color: var(--bg-background);
@@ -157,6 +233,14 @@ function isActiveRoute(itemPath) {
 }
 
 /* Sidebar Styling */
+.workspace-mobile-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.28);
+  backdrop-filter: blur(2px);
+  z-index: 29;
+}
+
 .sidebar {
   width: var(--sidebar-width);
   height: 100%;
@@ -166,36 +250,26 @@ function isActiveRoute(itemPath) {
   border-right: 1px solid var(--sidebar-border);
   transition: all 0.3s ease;
   z-index: 10;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 10px 30px rgba(15, 23, 42, 0.04);
 }
 
 .sidebar-header {
   padding: 1rem 1rem 0.75rem;
+  position: relative;
 }
 
-.back-btn {
+.sidebar-header-row {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.625rem 0.75rem;
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-secondary);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
+  gap: 0.55rem;
 }
 
-.back-btn:hover {
-  background-color: var(--bg-hover);
-  border-color: var(--border-hover);
-  color: var(--primary);
+.sidebar-header-row-end {
+  justify-content: flex-end;
 }
 
-.back-btn svg {
-  flex-shrink: 0;
+.mobile-close-btn {
+  display: none;
 }
 
 /* Project Name */
@@ -207,9 +281,9 @@ function isActiveRoute(itemPath) {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.75rem;
+  padding: 0.875rem;
   background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(129, 140, 248, 0.05));
-  border-radius: var(--radius-md);
+  border-radius: 16px;
   border: 1px solid rgba(99, 102, 241, 0.12);
 }
 
@@ -233,7 +307,7 @@ function isActiveRoute(itemPath) {
   padding: 0.5rem 1rem;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.375rem;
   overflow-y: auto;
 }
 
@@ -242,8 +316,8 @@ function isActiveRoute(itemPath) {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-radius: var(--radius-md);
+  padding: 0.85rem 1rem;
+  border-radius: 14px;
   color: var(--text-secondary);
   text-decoration: none;
   font-weight: 500;
@@ -267,6 +341,7 @@ function isActiveRoute(itemPath) {
   align-items: center;
   justify-content: center;
   width: 1.5rem;
+  flex-shrink: 0;
 }
 
 .active-indicator {
@@ -282,7 +357,7 @@ function isActiveRoute(itemPath) {
 
 /* Footer */
 .sidebar-footer {
-  padding: 1.5rem;
+  padding: 1.25rem 1.5rem;
   border-top: 1px solid var(--border);
   background-color: var(--bg-secondary);
 }
@@ -304,6 +379,7 @@ function isActiveRoute(itemPath) {
   color: var(--text-muted);
   display: flex;
   gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
 .project-empty {
@@ -318,10 +394,279 @@ function isActiveRoute(itemPath) {
   background-color: var(--bg-background);
   overflow: hidden;
   position: relative;
+  min-width: 0;
 }
 
 .content-container {
   width: 100%;
   height: 100%;
 }
+
+@media (max-width: 900px) {
+  .workspace-layout {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--sidebar-border);
+    box-shadow: none;
+  }
+
+  .sidebar-header {
+    padding: 0.875rem 0.875rem 0.5rem;
+  }
+
+  .project-name-wrapper {
+    padding: 0.25rem 0.875rem 0.75rem;
+  }
+
+  .sidebar-nav {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    overflow: visible;
+    padding: 0 0.875rem 0.875rem;
+    gap: 0.5rem;
+  }
+
+  .nav-item {
+    min-width: 0;
+    width: 100%;
+    padding: 0.7rem 0.55rem;
+    gap: 0.32rem;
+    border: 1px solid var(--border);
+    background: var(--bg-card);
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .nav-label {
+    white-space: nowrap;
+    font-size: 0.76rem;
+    line-height: 1.1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .active-indicator {
+    left: 50%;
+    top: auto;
+    bottom: 0;
+    width: 46%;
+    height: 3px;
+    transform: translateX(-50%);
+    border-radius: 999px 999px 0 0;
+  }
+
+  .sidebar-footer {
+    display: none;
+  }
+
+  .main-content {
+    overflow: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .sidebar.mobile-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: min(86vw, 320px);
+    max-width: 320px;
+    height: 100dvh;
+    z-index: 30;
+    border-right: 1px solid var(--sidebar-border);
+    border-bottom: none;
+    transform: translateX(-100%);
+    transition: transform 0.24s ease;
+    box-shadow: 10px 0 32px rgba(15, 23, 42, 0.18);
+    background: rgba(255,255,255,0.98);
+    backdrop-filter: blur(12px);
+  }
+
+  .sidebar.mobile-overlay.mobile-open {
+    transform: translateX(0);
+  }
+
+  .mobile-close-btn {
+    position: static;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: white;
+    color: var(--text-secondary);
+    flex-shrink: 0;
+  }
+
+  .workspace-mobile-menu-btn {
+    position: fixed;
+    z-index: 31;
+    width: 46px;
+    height: 46px;
+    border: 1px solid var(--border);
+    background: rgba(255,255,255,0.94);
+    backdrop-filter: blur(8px);
+    border-radius: 999px;
+    padding: 0;
+    font-size: 1rem;
+    color: var(--text-secondary);
+    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .sidebar.mobile-overlay .sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: none;
+    padding: 0 0.875rem 0.875rem;
+    gap: 0.45rem;
+    overflow-y: auto;
+  }
+
+  .sidebar.mobile-overlay .nav-item {
+    width: 100%;
+    min-width: 0;
+    flex-direction: row;
+    justify-content: flex-start;
+    text-align: left;
+    padding: 0.78rem 0.9rem;
+    gap: 0.7rem;
+  }
+
+  .sidebar.mobile-overlay .nav-label {
+    font-size: 0.82rem;
+    line-height: 1.2;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+  }
+
+  .sidebar.mobile-overlay .nav-icon {
+    width: 1.2rem;
+    flex-shrink: 0;
+  }
+
+  .sidebar.mobile-overlay .active-indicator {
+    left: 0;
+    top: 50%;
+    bottom: auto;
+    width: 3px;
+    height: 1.4rem;
+    transform: translateY(-50%);
+    border-radius: 0 4px 4px 0;
+  }
+}
+
+@media (max-width: 640px) {
+  .sidebar {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background: rgba(255,255,255,0.95);
+    backdrop-filter: blur(12px);
+  }
+
+  .sidebar-header {
+    padding: 0.5rem 0.55rem 0.3rem;
+  }
+
+  .project-name-wrapper {
+    padding: 0 0.55rem 0.35rem;
+  }
+
+  .sidebar-nav {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    padding: 0 0.55rem 0.45rem;
+    gap: 0.32rem;
+  }
+
+  .back-btn {
+    padding: 0.5rem 0.62rem;
+    font-size: 0.72rem;
+    border-radius: 10px;
+    flex: 1;
+  }
+
+  .project-name-display {
+    padding: 0.54rem 0.6rem;
+    border-radius: 10px;
+  }
+
+  .project-title {
+    font-size: 0.76rem;
+  }
+
+  .nav-item {
+    padding: 0.48rem 0.28rem;
+    border-radius: 10px;
+    gap: 0.22rem;
+  }
+
+  .nav-label {
+    font-size: 0.68rem;
+  }
+
+  .nav-icon {
+    width: 1rem;
+  }
+
+  .nav-icon :deep(svg) {
+    width: 0.92rem;
+    height: 0.92rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .sidebar-header {
+    padding: 0.45rem 0.5rem 0.28rem;
+  }
+
+  .project-name-wrapper {
+    padding: 0 0.5rem 0.32rem;
+  }
+
+  .sidebar-nav {
+    padding: 0 0.5rem 0.42rem;
+    gap: 0.28rem;
+  }
+
+  .back-btn {
+    padding: 0.46rem 0.58rem;
+    font-size: 0.7rem;
+  }
+
+  .project-name-display {
+    padding: 0.5rem 0.56rem;
+  }
+
+  .project-title {
+    font-size: 0.74rem;
+  }
+
+  .nav-item {
+    padding: 0.44rem 0.22rem;
+    gap: 0.18rem;
+  }
+
+  .nav-label {
+    font-size: 0.64rem;
+  }
+
+  .active-indicator {
+    width: 52%;
+  }
+}
 </style>
diff --git a/frontend/src/views/WriteView.vue b/frontend/src/views/WriteView.vue
index 433af06..4523a37 100644
--- a/frontend/src/views/WriteView.vue
+++ b/frontend/src/views/WriteView.vue
@@ -106,6 +106,8 @@ async function copyTitle() {
 }
 const reviewResult = ref(null)
 const showSidebar = ref(true)
+const isMobileViewport = ref(false)
+const showMobileTools = ref(false)
 const MAX_AUTO_TARGETED_FIX_ROUNDS = 3
 const MAX_AUTO_POLISH_ROUNDS = 3
 const MAX_AUTO_REGENERATE_ROUNDS = 3
@@ -186,7 +188,18 @@ function hasBlockingReviewIssues(reviewText = '') {
   return false
 }
 
+function syncMobileLayout() {
+  if (typeof window === 'undefined') return
+  isMobileViewport.value = window.innerWidth <= 768
+  if (isMobileViewport.value) {
+    showSidebar.value = false
+  } else {
+    showMobileTools.value = false
+  }
+}
+
 onMounted(async () => {
+  syncMobileLayout()
   await loadChapters()
   await loadOutlineTree()
   if (route.params.chapter) {
@@ -196,6 +209,7 @@ onMounted(async () => {
     autoNavigateToFirstUnwritten()
   }
   window.addEventListener('keydown', handleKeydown)
+  window.addEventListener('resize', syncMobileLayout)
 })
 
 // 自动跳转到第一个未完成章节
@@ -221,6 +235,7 @@ function autoNavigateToFirstUnwritten() {
 }
 onUnmounted(() => {
   window.removeEventListener('keydown', handleKeydown)
+  window.removeEventListener('resize', syncMobileLayout)
 })
 
 function handleKeydown(e) {
@@ -375,6 +390,7 @@ function findChapterTitleFromOutline(chapterId) {
 
 function selectChapter(chapter) {
   if (aiWriting.value || aiPolishing.value || aiRevising.value) return
+  if (isMobileViewport.value) showSidebar.value = false
   router.push(`/workspace/write/${chapter.id}`)
 }
 
@@ -1288,15 +1304,21 @@ const reviewText = computed({
     </Transition>
 
     <!-- 左侧章节导航 -->
-    <aside class="chapter-nav" :class="{ collapsed: !showSidebar }">
+    <div v-if="isMobileViewport && showSidebar" class="chapter-nav-backdrop" @click="showSidebar = false"></div>
+    <aside class="chapter-nav" :class="{ collapsed: !showSidebar, 'mobile-overlay': isMobileViewport }">
       <div class="nav-header">
         <h2 class="nav-title">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 mr-2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" /></svg>
           章节目录
         </h2>
-        <button class="icon-btn" @click="createNewChapter" title="新建章节">
+        <div class="nav-header-actions">
+          <button v-if="isMobileViewport" class="icon-btn" @click="showSidebar = false" title="关闭章节导航">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+          </button>
+          <button class="icon-btn" @click="createNewChapter" title="新建章节">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
         </button>
+        </div>
       </div>
       
       <div class="chapter-list">
@@ -1359,9 +1381,8 @@ const reviewText = computed({
 
     <!-- 主编辑区 -->
     <main class="editor-main">
-      <!-- 侧边栏展开按钮 (当侧边栏收起时显示, 移到外层以保证在空状态下也由于) -->
       <button 
-        v-if="!showSidebar" 
+        v-if="!isMobileViewport && !showSidebar" 
         class="expand-sidebar-btn" 
         @click="showSidebar = true"
         title="展开侧边栏"
@@ -1375,13 +1396,30 @@ const reviewText = computed({
         <!-- 顶部工具栏 -->
         <header class="editor-toolbar">
           <!-- 第一行：章节标题 + 字数 -->
-          <div class="toolbar-row">
+          <div class="toolbar-row toolbar-row-mobile-head">
             <div class="toolbar-left">
               <div class="title-field">
                 <span class="title-header">
+                  <button
+                    v-if="isMobileViewport"
+                    class="chapter-title-toggle"
+                    @click="showSidebar = true"
+                    title="打开章节列表"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
+                  </button>
                   <span class="title-label">章节标题</span>
+                </span>
+                <div class="title-input-row">
+                  <input
+                    v-model="editTitle"
+                    class="title-input"
+                    placeholder="输入章节标题..."
+                  />
+                </div>
+                <div v-if="isMobileViewport" class="mobile-title-actions">
                   <button
-                    class="btn btn-secondary btn-sm"
+                    class="toolbar-chip"
                     type="button"
                     @click="copyTitle"
                     :disabled="!editTitle?.trim()"
@@ -1389,64 +1427,25 @@ const reviewText = computed({
                   >
                     {{ copyingTitle ? '复制中' : '复制标题' }}
                   </button>
-                </span>
-                <input
-                  v-model="editTitle"
-                  class="title-input"
-                  placeholder="输入章节标题..."
-                />
+                  <button
+                    class="toolbar-chip"
+                    @click="showMobileTools = true"
+                    title="打开工具面板"
+                  >
+                    工具
+                  </button>
+                </div>
               </div>
             </div>
             <span class="word-count-badge">{{ wordCount.toLocaleString() }} 字</span>
           </div>
           <!-- 第二行：操作按钮分组 -->
-          <div class="toolbar-row toolbar-actions">
-            <div class="toolbar-group">
-              <button class="btn img-btn-ghost" @click="confirmDelete" title="删除当前章节">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
-              </button>
-            </div>
-            <div class="toolbar-divider"></div>
-            <div class="toolbar-group">
-              <button class="btn btn-secondary btn-sm" @click="copyContent" :disabled="!editContent" title="复制文章">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" /></svg>
-                {{ copying ? '复制中' : '复制文章' }}
-              </button>
-              <button class="btn btn-secondary btn-sm" @click="aiReviewChapter" :disabled="aiReviewing || aiWriting || aiPolishing || aiRevising">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
-                {{ aiReviewing ? '审查中' : '审查' }}
-              </button>
-              <button class="btn btn-secondary btn-sm" @click="aiReviseByReview" :disabled="aiRevising || aiReviewing || aiWriting || aiPolishing || !reviewResult" title="仅按审查意见定点修订，并自动继续审查">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487 19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10m6.862-1.513a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z" /></svg>
-                {{ aiRevising ? '修订中' : '按审查修订' }}
-              </button>
-              <button class="btn btn-secondary btn-sm" @click="openPolishConfirm" :disabled="aiPolishing || aiReviewing || aiWriting || aiRevising || !reviewResult" title="先审查，再润色">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" /></svg>
-                {{ aiPolishing ? '润色中' : '润色' }}
-              </button>
-            </div>
-            <div class="toolbar-divider"></div>
-            <div class="toolbar-group">
+          <div v-if="!isMobileViewport" class="toolbar-row toolbar-actions">
+            <div class="toolbar-group toolbar-group-primary">
               <button class="btn btn-ai btn-sm" @click="aiWriteChapter" :disabled="aiWriting || aiReviewing || aiPolishing || aiRevising || autoBatchRunning">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" /></svg>
                 {{ aiWriting ? '生成中' : '生成' }}
               </button>
-              <button v-if="!autoBatchRunning" class="btn btn-ai btn-sm" @click="showAutoBatchDialog = true" :disabled="aiWriting || aiReviewing || aiPolishing || aiRevising || autoBatchRunning" title="自动连续创作多章">
-                自动连写
-              </button>
-              <button v-else class="btn btn-danger btn-sm" @click="stopAutoBatch">
-                停止连写 ({{ autoBatchCurrent }}/{{ autoBatchTotal }})
-              </button>
-            </div>
-            <div class="toolbar-divider"></div>
-            <div class="toolbar-group">
-              <button class="btn btn-secondary btn-sm" @click="handleExtractPreview" :disabled="settingSyncStore.isRunning || !editContent?.trim()" title="自动后台同步设定数据">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /></svg>
-                {{ settingSyncStore.isRunning ? '同步中...' : '设定同步' }}
-              </button>
-            </div>
-            <div class="toolbar-divider"></div>
-            <div class="toolbar-group toolbar-group-end">
               <button class="btn btn-secondary btn-sm" @click="saveOnly" :disabled="saving || aiWriting || aiReviewing || aiPolishing || aiRevising" title="保存 (Ctrl+S)">
                 <svg v-if="!(saving && saveType === 'only')" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3.25a3 3 0 0 0-3 3 .75.75 0 0 1-1.5 0 4.5 4.5 0 0 1 8 0 3 3 0 0 0 3-3 .75.75 0 0 1 1.5 0 4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1-.9.636l.9.636" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 7.5c0-1.657-1.343-3-3-3h-9c-1.657 0-3 1.343-3 3" /></svg>
                 {{ (saving && saveType === 'only') ? '保存中' : '保存' }}
@@ -1455,9 +1454,45 @@ const reviewText = computed({
                 {{ (saving && saveType === 'next') ? '保存中...' : '下一章' }}
               </button>
             </div>
+
+            <div v-if="!isMobileViewport || showMobileTools" class="toolbar-group toolbar-group-secondary">
+              <button class="btn img-btn-ghost" @click="confirmDelete" title="删除当前章节">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.11 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.11 0 00-7.5 0" /></svg>
+              </button>
+              <button class="btn btn-secondary btn-sm" @click="copyContent" :disabled="!editContent" title="复制文章">{{ copying ? '复制中' : '复制文章' }}</button>
+              <button class="btn btn-secondary btn-sm" @click="aiReviewChapter" :disabled="aiReviewing || aiWriting || aiPolishing || aiRevising">{{ aiReviewing ? '审查中' : '审查' }}</button>
+              <button class="btn btn-secondary btn-sm" @click="aiReviseByReview" :disabled="aiRevising || aiReviewing || aiWriting || aiPolishing || !reviewResult" title="仅按审查意见定点修订，并自动继续审查">{{ aiRevising ? '修订中' : '按审查修订' }}</button>
+              <button class="btn btn-secondary btn-sm" @click="openPolishConfirm" :disabled="aiPolishing || aiReviewing || aiWriting || aiRevising || !reviewResult" title="先审查，再润色">{{ aiPolishing ? '润色中' : '润色' }}</button>
+              <button v-if="!autoBatchRunning" class="btn btn-ai btn-sm" @click="showAutoBatchDialog = true" :disabled="aiWriting || aiReviewing || aiPolishing || aiRevising || autoBatchRunning" title="自动连续创作多章">自动连写</button>
+              <button v-else class="btn btn-danger btn-sm" @click="stopAutoBatch">停止连写 ({{ autoBatchCurrent }}/{{ autoBatchTotal }})</button>
+              <button class="btn btn-secondary btn-sm" @click="handleExtractPreview" :disabled="settingSyncStore.isRunning || !editContent?.trim()" title="自动后台同步设定数据">{{ settingSyncStore.isRunning ? '同步中...' : '设定同步' }}</button>
+            </div>
           </div>
         </header>
 
+        <div v-if="isMobileViewport && showMobileTools" class="mobile-tools-sheet-backdrop" @click="showMobileTools = false"></div>
+        <div v-if="isMobileViewport && showMobileTools" class="mobile-tools-sheet">
+          <div class="mobile-tools-sheet-header">
+            <strong>写作工具</strong>
+            <button class="icon-btn" @click="showMobileTools = false" title="关闭工具面板">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+            </button>
+          </div>
+          <div class="mobile-tools-grid">
+            <button class="btn btn-ai btn-sm" @click="aiWriteChapter(); showMobileTools = false" :disabled="aiWriting || aiReviewing || aiPolishing || aiRevising || autoBatchRunning">{{ aiWriting ? '生成中' : '生成' }}</button>
+            <button class="btn btn-secondary btn-sm" @click="saveOnly(); showMobileTools = false" :disabled="saving || aiWriting || aiReviewing || aiPolishing || aiRevising">{{ (saving && saveType === 'only') ? '保存中' : '保存' }}</button>
+            <button class="btn btn-primary btn-sm" @click="saveAndNext(); showMobileTools = false" :disabled="saving || aiWriting || aiReviewing || aiPolishing || aiRevising">{{ (saving && saveType === 'next') ? '保存中...' : '下一章' }}</button>
+            <button class="btn btn-secondary btn-sm" @click="copyContent(); showMobileTools = false" :disabled="!editContent">{{ copying ? '复制中' : '复制文章' }}</button>
+            <button class="btn btn-secondary btn-sm" @click="aiReviewChapter(); showMobileTools = false" :disabled="aiReviewing || aiWriting || aiPolishing || aiRevising">{{ aiReviewing ? '审查中' : '审查' }}</button>
+            <button class="btn btn-secondary btn-sm" @click="aiReviseByReview(); showMobileTools = false" :disabled="aiRevising || aiReviewing || aiWriting || aiPolishing || !reviewResult">{{ aiRevising ? '修订中' : '按审查修订' }}</button>
+            <button class="btn btn-secondary btn-sm" @click="openPolishConfirm(); showMobileTools = false" :disabled="aiPolishing || aiReviewing || aiWriting || aiRevising || !reviewResult">{{ aiPolishing ? '润色中' : '润色' }}</button>
+            <button v-if="!autoBatchRunning" class="btn btn-ai btn-sm" @click="showAutoBatchDialog = true; showMobileTools = false" :disabled="aiWriting || aiReviewing || aiPolishing || aiRevising || autoBatchRunning">自动连写</button>
+            <button v-else class="btn btn-danger btn-sm" @click="stopAutoBatch(); showMobileTools = false">停止连写</button>
+            <button class="btn btn-secondary btn-sm" @click="handleExtractPreview(); showMobileTools = false" :disabled="settingSyncStore.isRunning || !editContent?.trim()">{{ settingSyncStore.isRunning ? '同步中...' : '设定同步' }}</button>
+            <button class="btn btn-secondary btn-sm" @click="confirmDelete(); showMobileTools = false">删除章节</button>
+          </div>
+        </div>
+
         <!-- 编辑器主体 -->
         <div class="editor-wrapper">
           <textarea 
@@ -1702,6 +1737,7 @@ const reviewText = computed({
 .write-layout {
   display: flex;
   height: 100%;
+  min-height: 100vh;
   width: 100%;
   overflow: hidden;
   background-color: #f8f6f1;
@@ -1710,6 +1746,7 @@ const reviewText = computed({
 /* ─── Chapter Sidebar ─── */
 .chapter-nav {
   width: 280px;
+  max-height: 100vh;
   border-right: 1px solid #e8e4da;
   background: linear-gradient(180deg, #fdfcf9 0%, #f5f2eb 100%);
   display: flex;
@@ -1745,6 +1782,20 @@ const reviewText = computed({
   background: rgba(255, 255, 255, 0.5);
 }
 
+.nav-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.chapter-nav-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.28);
+  backdrop-filter: blur(2px);
+  z-index: 19;
+}
+
 .nav-title {
   font-size: 0.9375rem;
   font-weight: 700;
@@ -1977,6 +2028,7 @@ const reviewText = computed({
   margin: 0 auto;
   width: 100%;
   position: relative;
+  min-height: 0;
 }
 
 /* ─── Toolbar ─── */
@@ -2038,6 +2090,67 @@ const reviewText = computed({
   gap: 0.5rem;
 }
 
+.title-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.title-copy-btn {
+  flex-shrink: 0;
+}
+
+.mobile-title-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-top: 0.45rem;
+}
+
+.toolbar-chip {
+  border: 1px solid #e0dbd2;
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(8px);
+  border-radius: 999px;
+  padding: 0.42rem 0.8rem;
+  font-size: 0.74rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.toolbar-chip:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.toolbar-chip-nav {
+  margin-right: 0.55rem;
+  flex-shrink: 0;
+}
+
+.toolbar-chip-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  padding: 0.42rem;
+}
+
+.chapter-title-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: #9c958a;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
 .title-label {
   font-size: 0.6875rem;
   font-weight: 700;
@@ -2099,6 +2212,8 @@ const reviewText = computed({
   overflow: hidden;
   background: linear-gradient(180deg, #fdfcf9 0%, #faf8f3 100%);
   position: relative;
+  min-height: 0;
+  height: 100%;
 }
 
 .editor-wrapper::before {
@@ -2269,6 +2384,7 @@ const reviewText = computed({
   justify-content: center;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
 .expand-sidebar-btn:hover {
   background: white;
   color: var(--primary);
@@ -2276,6 +2392,63 @@ const reviewText = computed({
   transform: translateY(-1px);
 }
 
+.mobile-tools-toggle {
+  position: absolute;
+  right: 1rem;
+  top: 1.2rem;
+  z-index: 50;
+  border: 1px solid #e0dbd2;
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(8px);
+  border-radius: 999px;
+  padding: 0.42rem 0.8rem;
+  font-size: 0.74rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.mobile-tools-sheet-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.28);
+  z-index: 39;
+}
+
+.mobile-tools-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 40;
+  background: #fffdf9;
+  border-top-left-radius: 18px;
+  border-top-right-radius: 18px;
+  box-shadow: 0 -10px 32px rgba(15, 23, 42, 0.14);
+  padding: 0.9rem 0.85rem 1rem;
+}
+
+.mobile-tools-sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.mobile-tools-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.45rem;
+}
+
+.mobile-tools-grid .btn {
+  width: 100%;
+  min-height: 40px;
+  justify-content: center;
+  font-size: 0.76rem;
+  padding: 0.42rem 0.45rem;
+}
+
 /* ─── Status Toast ─── */
 .status-toast {
   position: fixed;
@@ -2591,19 +2764,166 @@ const reviewText = computed({
 }
 
 /* ─── Responsive ─── */
+@media (max-width: 900px) {
+  .chapter-nav {
+    width: 248px;
+  }
+
+  .review-panel {
+    width: 320px;
+  }
+
+  .editor-container {
+    max-width: 100%;
+  }
+
+  .editor-toolbar {
+    padding: 0.8rem 1rem 0.7rem;
+  }
+
+  .toolbar-row {
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .toolbar-actions {
+    align-items: stretch;
+    gap: 0.45rem;
+  }
+
+  .toolbar-group {
+    flex-wrap: wrap;
+    gap: 0.35rem;
+  }
+
+  .toolbar-group-end {
+    margin-left: 0;
+  }
+
+  .toolbar-divider {
+    display: none;
+  }
+
+  .word-count-badge {
+    margin-left: auto;
+  }
+
+  .main-textarea {
+    padding: 1.75rem 2rem;
+    font-size: 1rem;
+  }
+}
+
 @media (max-width: 768px) {
+  .write-layout {
+    position: relative;
+  }
+
   .chapter-nav {
     position: absolute;
+    top: 0;
+    left: 0;
     height: 100%;
     z-index: 20;
     box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
+    background: linear-gradient(180deg, #fdfcf9 0%, #f5f2eb 100%);
+  }
+  .chapter-nav.mobile-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: min(86vw, 320px);
+    max-width: 320px;
+    height: 100dvh;
+    z-index: 20;
+    box-shadow: 10px 0 32px rgba(15, 23, 42, 0.18);
   }
   .chapter-nav.collapsed { width: 0; border: none; box-shadow: none; }
   .editor-wrapper { padding: 0; }
-  .editor-toolbar { padding: 0.625rem 1rem 0.5rem; }
-  .toolbar-actions { flex-wrap: wrap; }
-  .title-input { font-size: 1.125rem; }
-  .main-textarea { padding: 1.5rem 1.25rem; }
+  .editor-toolbar { padding: 0.58rem 0.68rem 0.38rem; }
+  .editor-area { min-height: 0; height: 100%; }
+  .editor-container { min-height: 0; height: 100%; }
+  .editor-wrapper { min-height: 0; flex: 1 1 auto; }
+  .toolbar-row-mobile-head {
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 0.45rem;
+  }
+  .toolbar-row-mobile-head .toolbar-left {
+    flex: 0 1 auto;
+    width: 100%;
+  }
+  .toolbar-row-mobile-head .word-count-badge {
+    margin-left: 0;
+    align-self: flex-start;
+  }
+  .title-field,
+  .title-header,
+  .title-input-row,
+  .mobile-title-actions {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+  .title-header {
+    gap: 0.28rem;
+  }
+  .chapter-title-toggle {
+    margin-top: 0.01rem;
+  }
+  .title-input-row { gap: 0.38rem; }
+  .title-copy-btn { padding: 0.3rem 0.55rem; font-size: 0.72rem; }
+  .mobile-title-actions { margin-top: 0.38rem; }
+  .toolbar-chip { padding: 0.38rem 0.72rem; font-size: 0.72rem; }
+  .mobile-tools-toggle { display: none; }
+  .toolbar-actions { flex-wrap: wrap; gap: 0.4rem; }
+  .toolbar-actions.compact .toolbar-group-secondary { display: none; }
+  .toolbar-group,
+  .toolbar-group-end {
+    width: 100%;
+  }
+  .toolbar-group-primary {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.35rem;
+  }
+  .toolbar-group-primary .btn {
+    width: 100%;
+    min-height: 38px;
+    justify-content: center;
+    padding: 0.42rem 0.5rem;
+    font-size: 0.78rem;
+  }
+  .toolbar-group-secondary {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.35rem;
+  }
+  .toolbar-group-secondary .btn {
+    width: 100%;
+    min-height: 36px;
+    justify-content: center;
+    padding: 0.38rem 0.45rem;
+    font-size: 0.74rem;
+  }
+  .toolbar-group-secondary .img-btn-ghost {
+    min-width: 36px;
+    padding: 0.38rem;
+  }
+  .title-header {
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .title-header .btn {
+    min-height: 32px;
+    padding: 0.3rem 0.55rem;
+    font-size: 0.74rem;
+  }
+  .title-input { font-size: 1rem; }
+  .word-count-badge {
+    font-size: 0.7rem;
+    padding: 2px 8px;
+  }
+  .main-textarea { padding: 0.72rem 0.78rem 1.1rem; font-size: 0.98rem; line-height: 1.8; }
 
   .editor-area {
     flex-direction: column;
@@ -2616,6 +2936,7 @@ const reviewText = computed({
     border-left: none;
     border-top: 1px solid #e8e4da;
     box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
+    padding: 1rem 0.85rem;
   }
 
   .review-slide-enter-from,
@@ -2624,5 +2945,100 @@ const reviewText = computed({
   }
 
   .editor-wrapper::before { display: none; }
+
+  .modal-overlay {
+    padding: 0.75rem;
+    align-items: flex-end;
+  }
+
+  .modal-content,
+  .ending-modal {
+    width: 100%;
+    max-width: 100%;
+    max-height: calc(100vh - 1rem);
+    border-radius: 18px 18px 0 0;
+    padding: 1rem;
+  }
+
+  .modal-actions {
+    flex-direction: column-reverse;
+  }
+
+  .modal-actions .btn {
+    width: 100%;
+  }
+
+  .status-toast {
+    left: 0.75rem;
+    right: 0.75rem;
+    bottom: 0.75rem;
+    max-width: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .nav-header {
+    padding: 1rem 1rem 0.8rem;
+  }
+
+  .chapter-list {
+    padding: 0.45rem 0.5rem;
+  }
+
+  .chapter-item,
+  .volume-header {
+    min-height: 42px;
+  }
+
+  .editor-toolbar {
+    padding: 0.65rem 0.68rem 0.48rem;
+  }
+
+  .toolbar-row {
+    gap: 0.45rem;
+  }
+
+  .word-count-badge {
+    margin-left: 0;
+  }
+
+  .toolbar-group-primary {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.3rem;
+  }
+
+  .toolbar-group-primary .btn {
+    min-height: 36px;
+    font-size: 0.74rem;
+    padding: 0.34rem 0.35rem;
+  }
+
+  .toolbar-group-secondary {
+    grid-template-columns: 1fr 1fr;
+    gap: 0.3rem;
+  }
+
+  .toolbar-group-secondary .btn {
+    min-height: 34px;
+    font-size: 0.7rem;
+    padding: 0.32rem 0.34rem;
+  }
+
+  .main-textarea {
+    padding: 0.8rem 0.72rem 1.15rem;
+    font-size: 0.96rem;
+  }
+
+  .expand-sidebar-btn {
+    left: 0.68rem;
+    top: 0.82rem;
+  }
+
+  .mobile-tools-toggle {
+    right: 0.68rem;
+    top: 0.82rem;
+    padding: 0.36rem 0.68rem;
+    font-size: 0.68rem;
+  }
 }
 </style>