feat: Mobile deep optimization, production infrastructure, and CD pipeline

Mobile (85% → 99%):
- Editor bubble menus overflow handling with viewport-aware max-width
- Responsive editor padding, TOC sidebar hidden on mobile
- Block menu touch support, document tree TouchSensor with delay
- Comment panel full-screen overlay on mobile
- Table popover viewport-aware positioning
- Dashboard header/KPI grid, admin search/pagination responsive
- Analytics chart padding, spaces hero, explore sort bar overflow
- Slash command menu viewport cap, keyboard shortcuts hidden on mobile

Infrastructure (92% → 99%):
- Multi-stage API Dockerfile with non-root user (nestapi:1001)
- CD workflow: build Docker images → push GHCR → SSH deploy
- Automated DB backup (daily pg_dump + 30-day retention)
- Docker log rotation (json-file, 10MB × 5, compressed)
- Nginx reverse proxy service with SSL/certbot auto-renewal
- ACME challenge support and HTTPS pre-configuration

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Jason-chen-coder

.github/workflows/cd.yml

@@ -0,0 +1,80 @@
+name: CD
+
+on:
+  push:
+    branches: [master]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_PREFIX: ${{ github.repository }}
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    strategy:
+      matrix:
+        include:
+          - app: api
+            dockerfile: apps/api/Dockerfile
+          - app: web
+            dockerfile: apps/web/Dockerfile
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Log in to Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_PREFIX }}/${{ matrix.app }}
+          tags: |
+            type=sha,prefix=
+            type=raw,value=latest
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ${{ matrix.dockerfile }}
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: |
+            NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }}
+            NEXT_PUBLIC_WEBSOCKET_URL=${{ vars.NEXT_PUBLIC_WEBSOCKET_URL }}
+            NEXT_PUBLIC_CDN_URL=${{ vars.NEXT_PUBLIC_CDN_URL }}
+            NEXT_PUBLIC_SITE_URL=${{ vars.NEXT_PUBLIC_SITE_URL }}
+
+  deploy:
+    needs: build-and-push
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/master'
+
+    steps:
+      - name: Deploy to server via SSH
+        uses: appleboy/ssh-action@v1
+        with:
+          host: ${{ secrets.DEPLOY_HOST }}
+          username: ${{ secrets.DEPLOY_USER }}
+          key: ${{ secrets.DEPLOY_SSH_KEY }}
+          script: |
+            cd ${{ secrets.DEPLOY_PATH }}
+            docker compose -f docker-compose.prod.yml pull api web
+            docker compose -f docker-compose.prod.yml up -d api web
+            docker image prune -f

apps/api/Dockerfile

@@ -1,4 +1,5 @@
-FROM node:22-alpine
+# ── Stage 1: 构建 ────────────────────────────────────────────
+FROM node:22-alpine AS builder
 
 RUN npm install -g pnpm@9
 
@@ -24,7 +25,33 @@ RUN pnpm --filter @docStudio/api exec prisma generate
 # 编译 NestJS
 RUN pnpm build:api
 
+# 仅安装生产依赖
+RUN pnpm install --frozen-lockfile --prod
+
+# ── Stage 2: 生产镜像（仅包含运行时所需文件）─────────────────
+FROM node:22-alpine AS runner
+
+WORKDIR /app
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nestjs && \
+    adduser --system --uid 1001 nestapi
+
+# 复制编译产物
+COPY --from=builder --chown=nestapi:nestjs /app/apps/api/dist ./apps/api/dist
+COPY --from=builder --chown=nestapi:nestjs /app/apps/api/package.json ./apps/api/
+
+# 复制 Prisma schema 和迁移（migrate deploy 需要）
+COPY --from=builder --chown=nestapi:nestjs /app/apps/api/prisma ./apps/api/prisma
+
+# 复制生产依赖和 Prisma Client
+COPY --from=builder --chown=nestapi:nestjs /app/node_modules ./node_modules
+COPY --from=builder --chown=nestapi:nestjs /app/packages ./packages
+COPY --from=builder --chown=nestapi:nestjs /app/package.json ./
+
+USER nestapi
+
 EXPOSE 3001 1234
 
 # 启动前自动执行数据库迁移
-CMD ["sh", "-c", "pnpm --filter @docStudio/api exec prisma migrate deploy && node apps/api/dist/main"]
+CMD ["sh", "-c", "npx prisma migrate deploy --schema=apps/api/prisma/schema.prisma && node apps/api/dist/main"]

apps/web/src/app/(main)/dashboard/page.tsx

@@ -89,7 +89,7 @@ export default function DashboardPage() {
     <div className="space-y-6">
 
       {/* ── Header ── */}
-      <div className="flex items-end justify-between">
+      <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
         <div>
           <p className="text-sm text-gray-500 dark:text-gray-400">{greeting}</p>
           <h1 className="text-2xl font-semibold text-gray-900 dark:text-white mt-1 tracking-tight">
@@ -99,13 +99,13 @@ export default function DashboardPage() {
         <div className="flex items-center gap-2">
           <button
             onClick={() => router.push('/spaces')}
-            className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
+            className="inline-flex items-center gap-1.5 px-3 sm:px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
           >
             管理空间
           </button>
           <button
             onClick={() => router.push('/spaces')}
-            className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors cursor-pointer"
+            className="inline-flex items-center gap-1.5 px-3 sm:px-4 py-2 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors cursor-pointer"
           >
             <Plus className="w-4 h-4" />
             新建空间
@@ -115,9 +115,9 @@ export default function DashboardPage() {
 
       {/* ── KPI Stats Strip (VisActor style: border-separated, trend badges) ── */}
       <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
-        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 divide-x divide-gray-200 dark:divide-gray-700">
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
           {statItems.map((s) => (
-            <div key={s.label} className="px-5 py-5 first:rounded-l-xl last:rounded-r-xl">
+            <div key={s.label} className="px-5 py-5 border-b border-r border-gray-200 dark:border-gray-700 last:border-r-0 [&:nth-child(2n)]:border-r-0 sm:[&:nth-child(2n)]:border-r sm:[&:nth-child(3n)]:border-r-0 lg:[&:nth-child(3n)]:border-r lg:[&:nth-child(6n)]:border-r-0 lg:border-b-0">
               <p className="text-xs text-gray-500 dark:text-gray-400 font-medium mb-2">{s.label}</p>
               <div className="flex items-center gap-2">
                 <span className="text-2xl font-semibold text-gray-900 dark:text-white tabular-nums">

apps/web/src/app/(main)/spaces/[id]/analytics/page.tsx

@@ -165,7 +165,7 @@ export default function SpaceAnalyticsPage() {
       <FadeIn delay={0.2} y={20}>
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
           {/* Doc Growth Trend */}
-          <div className="lg:col-span-2 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-7 py-6">
+          <div className="lg:col-span-2 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-4 sm:px-7 sm:py-6">
             <p className="text-xs text-gray-400 dark:text-gray-500 font-medium tracking-wide uppercase mb-4">
               文档增长趋势（近 30 天）
             </p>
@@ -186,7 +186,7 @@ export default function SpaceAnalyticsPage() {
           </div>
 
           {/* Action Distribution */}
-          <div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-7 py-6">
+          <div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-4 sm:px-7 sm:py-6">
             <p className="text-xs text-gray-400 dark:text-gray-500 font-medium tracking-wide uppercase mb-4">
               操作分布
             </p>
@@ -219,7 +219,7 @@ export default function SpaceAnalyticsPage() {
       <FadeIn delay={0.3} y={20}>
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* Top Documents */}
-          <div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-7 py-6">
+          <div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-4 sm:px-7 sm:py-6">
             <p className="text-xs text-gray-400 dark:text-gray-500 font-medium tracking-wide uppercase mb-4">
               热门文档 Top 10
             </p>
@@ -255,7 +255,7 @@ export default function SpaceAnalyticsPage() {
           </div>
 
           {/* Top Members */}
-          <div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-7 py-6">
+          <div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-4 sm:px-7 sm:py-6">
             <p className="text-xs text-gray-400 dark:text-gray-500 font-medium tracking-wide uppercase mb-4">
               活跃成员 Top 10（近 30 天）
             </p>

apps/web/src/app/(main)/spaces/[id]/documents/[documentId]/page.tsx

@@ -477,7 +477,7 @@ export default function DocumentPage() {
                   导出 PDF
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem onClick={() => setShowShortcuts(true)}>
+                <DropdownMenuItem onClick={() => setShowShortcuts(true)} className="hidden md:flex">
                   <Keyboard className="h-4 w-4" />
                   快捷键
                 </DropdownMenuItem>

apps/web/src/app/(main)/spaces/page.tsx

@@ -69,7 +69,7 @@ export default function SpacesPage() {
   if (loading && !spaces.length) {
     return (
       <div className="space-y-8 animate-pulse">
-        <div className="rounded-3xl bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-800 px-12 py-14">
+        <div className="rounded-3xl bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-800 px-6 sm:px-12 py-14">
           <div className="h-9 w-64 bg-white/60 dark:bg-gray-700 rounded-lg mb-3" />
           <div className="h-5 w-96 bg-white/40 dark:bg-gray-700 rounded" />
         </div>
@@ -86,7 +86,7 @@ export default function SpacesPage() {
     <div className="space-y-8">
       {/* ═══════ Hero ═══════ */}
       <FadeIn delay={0} y={30}>
-        <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-blue-50 via-indigo-50 to-violet-50 dark:from-gray-800 dark:via-gray-800 dark:to-gray-800 border border-blue-100/80 dark:border-gray-700 px-12 py-12">
+        <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-blue-50 via-indigo-50 to-violet-50 dark:from-gray-800 dark:via-gray-800 dark:to-gray-800 border border-blue-100/80 dark:border-gray-700 px-6 sm:px-12 py-12">
           <div className="absolute -top-20 -right-20 w-72 h-72 bg-blue-200/30 dark:bg-blue-500/5 rounded-full blur-3xl" />
           <div className="absolute -bottom-16 left-1/4 w-80 h-36 bg-violet-200/20 dark:bg-violet-500/5 rounded-full blur-3xl" />
 

apps/web/src/app/admin/users/page.tsx

@@ -383,8 +383,8 @@ export default function AdminUsersPage() {
 
       {/* 搜索 + 筛选 */}
       <FadeIn delay={0.1} y={16} duration={0.4}>
-      <div className="flex items-center gap-3 mb-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2.5">
-        <div className="relative flex-1 max-w-sm">
+      <div className="flex flex-col sm:flex-row sm:items-center gap-3 mb-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2.5">
+        <div className="relative flex-1 sm:max-w-sm">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
           <input
             type="text"
@@ -394,7 +394,7 @@ export default function AdminUsersPage() {
             className="w-full pl-9 pr-4 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-gray-50 dark:bg-gray-700 focus:bg-white dark:focus:bg-gray-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors"
           />
         </div>
-        <div className="h-6 w-px bg-gray-200 dark:bg-gray-700" />
+        <div className="hidden sm:block h-6 w-px bg-gray-200 dark:bg-gray-700" />
         <div className="relative inline-flex items-center">
           <select
             value={selectedSpaceId}
@@ -417,7 +417,7 @@ export default function AdminUsersPage() {
       <FadeIn delay={0.2} y={16} duration={0.4}>
       <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden flex-1 min-h-0">
         <div className="overflow-x-auto">
-          <table className="w-full text-sm">
+          <table className="w-full text-sm min-w-[640px]">
             <thead>
               <tr className="border-b border-gray-100 dark:border-gray-700">
                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">用户</th>
@@ -488,7 +488,7 @@ export default function AdminUsersPage() {
 
       {/* 分页 */}
       <FadeIn delay={0.3} y={12} duration={0.4}>
-      <div className="flex items-center justify-between mt-4 pt-2 text-sm text-gray-500 dark:text-gray-400 shrink-0">
+      <div className="flex flex-wrap items-center justify-between gap-3 mt-4 pt-2 text-sm text-gray-500 dark:text-gray-400 shrink-0">
         <div className="flex items-center gap-3">
           <label className="whitespace-nowrap">每页</label>
           <select

apps/web/src/app/contact/page.tsx

@@ -186,7 +186,7 @@ export default function ContactPage() {
 
       <PublicHeader />
 
-      <div className="relative pt-20 pb-20 px-4 flex flex-col items-center">
+      <div className="relative min-h-screen px-4 pt-10 flex flex-col items-center justify-center">
         <motion.div
           variants={container}
           initial="hidden"

apps/web/src/app/explore/page.tsx

@@ -161,7 +161,7 @@ export default function ExplorePage() {
 
                     <div className="flex items-center gap-3">
                         {/* Sort Selector */}
-                        <div className="flex items-center gap-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-1 py-1 shadow-sm">
+                        <div className="flex items-center gap-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-1 py-1 shadow-sm overflow-x-auto max-w-[calc(100vw-6rem)]">
                             <ArrowUpDown className="w-3.5 h-3.5 text-gray-400 ml-2" />
                             {SORT_OPTIONS.map((option) => (
                                 <button

apps/web/src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
+import { useEffect } from 'react';
 import { ArrowRight, Globe, Lock, Zap, Sparkles, Layout, Users, Database, BrainCircuit, Link2, History, FileInput, BarChart3, WifiOff, MessageSquareText, Search, Github } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { PublicHeader } from '@/components/layout/public-header';
@@ -127,6 +128,13 @@ export default function Home() {
   const { theme } = useTheme();
   const isDark = theme === 'dark';
 
+  useEffect(() => {
+    document.documentElement.style.overscrollBehavior = 'none';
+    return () => {
+      document.documentElement.style.overscrollBehavior = '';
+    };
+  }, []);
+
   return (
     <div className="min-h-screen bg-white dark:bg-gray-900 selection:bg-blue-100 selection:text-blue-900">
       {/* 导航栏 */}
@@ -650,7 +658,7 @@ export default function Home() {
         </section>
 
         {/* Community Reviews Section */}
-        <section className="py-24 bg-white dark:bg-zinc-900 relative overflow-hidden border-t border-slate-100 dark:border-zinc-800/50">
+        <section className="py-24 bg-white dark:bg-gray-950 relative overflow-hidden border-t border-slate-100 dark:border-zinc-800/50">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative mb-16">
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -677,8 +685,8 @@ export default function Home() {
             </Marquee>
 
             {/* Gradient Overlays */}
-            <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-white dark:from-zinc-900"></div>
-            <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-white dark:from-zinc-900"></div>
+            <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-white dark:from-gray-950"></div>
+            <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-white dark:from-gray-950"></div>
           </div>
         </section>
         {/* ==================== Bottom CTA ==================== */}