feat: support mobile lightweight editing with bottom sheet

On mobile (<=768px), reuse detail panels as bottom sheets so users can edit
date notes/expenses and delete markers, instead of being pure read-only:
- date detail (notes + expenses) opens as a bottom sheet with overlay
- delete entry added to the read-only marker popup
- drop the outdated "read-only mode" title suffix and alert

Implemented via a MutationObserver-based sheet controller without touching
existing show/hide methods; also fix a stacking-context bug where the
.right-panel z-index trapped detail panels under the overlay.

Add E2E coverage (test/tests/mobile-edit.spec.mjs) and allow overriding the
test server port/baseURL via E2E_PORT/E2E_BASE_URL to avoid local port clashes.

Author: chenxuan520

static/app_map.js

@@ -286,13 +286,29 @@ RoadbookApp.prototype.createMarkerEntity = function(lat, lng, title = null, id =
     marker.on('click', (e) => {
         L.DomEvent.stopPropagation(e);
         if (this.isMobileDevice()) {
-            const popupContent = this.generateMarkerPopupContent(markerData);
+            const popupContent = this.generateMarkerPopupContent(markerData, { withDelete: true });
             marker.bindPopup(popupContent).openPopup();
         } else {
             this.showMarkerDetail(markerData);
         }
     });
 
+    // 移动端：标记气泡内提供删除入口（极轻量编辑）
+    marker.on('popupopen', () => {
+        const popup = marker.getPopup();
+        const popupEl = popup && popup.getElement();
+        if (!popupEl) return;
+        const delBtn = popupEl.querySelector('.popup-delete-marker');
+        if (!delBtn) return;
+        delBtn.onclick = async () => {
+            const result = await this.showSwalConfirm('删除确认', `确定要删除标记点"${markerData.title}"吗？`, '删除', '取消');
+            if (result.isConfirmed) {
+                marker.closePopup();
+                this.removeMarker(markerData);
+            }
+        };
+    });
+
     // 添加悬浮事件显示标注信息
     marker.on('mouseover', (e) => {
         if (e.target.getElement()) {

static/app_utils.js

@@ -8,6 +8,52 @@ RoadbookApp.prototype.isMobileDevice = function() {
         (window.innerWidth <= 768); // 小屏幕设备也视为移动设备
 };
 
+// 移动端：将详情面板（标记/连接线/日期）以底部抽屉形式呈现，并统一管理遮罩与背景滚动锁
+// 仅监听面板 display 变化，不改动各 show/hide 业务方法，降低耦合与回归风险
+RoadbookApp.prototype.initMobileDetailSheet = function() {
+    const panelIds = ['markerDetailPanel', 'connectionDetailPanel', 'dateDetailPanel'];
+    const panels = panelIds.map(id => document.getElementById(id)).filter(Boolean);
+    if (panels.length === 0) {
+        return;
+    }
+
+    // 遮罩层：点击空白处复用已有的关闭逻辑（保证实时保存等副作用一致）
+    let overlay = document.getElementById('mobileSheetOverlay');
+    if (!overlay) {
+        overlay = document.createElement('div');
+        overlay.id = 'mobileSheetOverlay';
+        overlay.className = 'mobile-sheet-overlay';
+        document.body.appendChild(overlay);
+        overlay.addEventListener('click', () => {
+            if (typeof this.hideMarkerDetail === 'function') this.hideMarkerDetail();
+            if (typeof this.hideConnectionDetail === 'function') this.hideConnectionDetail();
+            if (typeof this.closeDateDetail === 'function') this.closeDateDetail();
+        });
+    }
+
+    // 同步遮罩/滚动锁状态：仅在窄屏（与 CSS @media 768 对齐）且有面板打开时启用抽屉态
+    const sync = () => {
+        const isNarrow = window.innerWidth <= 768;
+        const anyOpen = isNarrow && panels.some(p => p.style.display && p.style.display !== 'none');
+        if (anyOpen) {
+            overlay.classList.add('active');
+            document.body.classList.add('sheet-open');
+            // 避免与右侧日程抽屉叠加
+            const rightPanel = document.querySelector('.right-panel');
+            if (rightPanel) rightPanel.classList.remove('active');
+        } else {
+            overlay.classList.remove('active');
+            document.body.classList.remove('sheet-open');
+        }
+    };
+
+    const observer = new MutationObserver(sync);
+    panels.forEach(p => observer.observe(p, { attributes: true, attributeFilter: ['style'] }));
+    window.addEventListener('resize', sync);
+    this.syncMobileDetailSheet = sync;
+    sync();
+};
+
 RoadbookApp.prototype.getIconForName = function(name) {
     const lowerCaseName = name.toLowerCase();
     // 交通类
@@ -120,7 +166,7 @@ RoadbookApp.prototype.convertMarkdownLinksToHtml = function(text) {
 };
 
 // 生成标记点弹窗内容 (只读模式)
-RoadbookApp.prototype.generateMarkerPopupContent = function(markerData) {
+RoadbookApp.prototype.generateMarkerPopupContent = function(markerData, options = {}) {
     let content = '<div class="popup-content">';
     content += '<h3>' + markerData.title + '</h3>';
 
@@ -137,6 +183,11 @@ RoadbookApp.prototype.generateMarkerPopupContent = function(markerData) {
     }
 
     content += '<p><strong>坐标:</strong> ' + markerData.position[1].toFixed(6) + ', ' + markerData.position[0].toFixed(6) + '</p>';
+
+    // 移动端轻量编辑：在只读气泡底部提供删除入口
+    if (options.withDelete) {
+        content += '<div class="popup-actions"><button type="button" class="popup-delete-marker">🗑️ 删除此标记点</button></div>';
+    }
     content += '</div>';
 
     return content;

static/script.js

@@ -123,6 +123,7 @@ class RoadbookApp {
 
         // 初始化移动端适配
         this.initMobileFeatures();
+        this.initMobileDetailSheet();
         this.preventBrowserZoom();
 
         // 先尝试从本地存储加载设置，以获取保存的地图源和搜索方式
@@ -1331,14 +1332,7 @@ class RoadbookApp {
             return; // 非移动设备不执行移动端适配
         }
 
-        // 修改标题为只读模式
-        const titleElement = document.querySelector('header h1');
-        if (titleElement) {
-            titleElement.textContent = `${titleElement.textContent} (只读模式)`;
-        }
-
-        // 显示进入提示
-        alert('当前为移动端只读模式，如需编辑请使用电脑访问。');
+        // 移动端支持查看与轻量编辑（日期备注 / 花销 / 删除标记点），完整行程编辑建议使用电脑
 
         // 初始化移动端菜单功能
         this.initMobileMenu();

static/style.css

@@ -2482,6 +2482,38 @@ body.dark-mode .leaflet-tile {
     filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
 }
 
+/* 移动端底部抽屉：遮罩、动画与气泡删除按钮（详情面板复用为底部抽屉） */
+.mobile-sheet-overlay {
+    display: none;
+}
+
+@keyframes sheetSlideUp {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+}
+
+/* 标记气泡内的删除按钮（移动端轻量编辑入口） */
+.popup-actions {
+    margin-top: 10px;
+    text-align: center;
+}
+
+.popup-delete-marker {
+    width: 100%;
+    padding: 8px 12px;
+    border: none;
+    border-radius: 8px;
+    background: #e74c3c;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.popup-delete-marker:active {
+    background: #c0392b;
+}
+
 /* 移动端适配样式 */
 @media (max-width: 768px) {
     /* 移动端菜单切换按钮 */
@@ -2650,9 +2682,63 @@ body.dark-mode .leaflet-tile {
         min-width: 120px;
     }
 
-    /* 移动端详情面板样式 */
+    /* 移动端详情面板：底部抽屉呈现（查看 + 轻量编辑） */
     .detail-panel {
         font-size: 0.9rem;
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: auto;
+        width: 100%;
+        height: auto;
+        max-height: 85vh;
+        overflow-y: auto;
+        z-index: 2000;
+        border-left: none;
+        border-radius: 18px 18px 0 0;
+        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.28);
+        -webkit-overflow-scrolling: touch;
+        animation: sheetSlideUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* 抽屉标题栏吸顶，便于随时关闭 */
+    .detail-panel .detail-header {
+        position: sticky;
+        top: 0;
+        background: var(--bg-secondary);
+        z-index: 1;
+    }
+
+    /* 底部抽屉遮罩层 */
+    .mobile-sheet-overlay {
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1500;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s ease;
+    }
+
+    .mobile-sheet-overlay.active {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    /* 抽屉打开时锁定背景滚动 */
+    body.sheet-open {
+        overflow: hidden;
+    }
+
+    /* 抽屉打开时，让详情面板所在容器整体盖过遮罩，保证面板内可交互
+       （.right-panel 自身 z-index 会形成 stacking context，需高于遮罩） */
+    body.sheet-open .right-panel {
+        z-index: 2000;
     }
 
     .detail-header h3 {

test/playwright.config.mjs

@@ -5,6 +5,10 @@ const isCI = !!process.env.CI;
 // 默认：本地复用系统 Chrome（不下载 Playwright 浏览器）；CI 用 Playwright 的 Chromium（由 setup:ci 显式安装）
 const useSystemChrome = !isCI && process.env.USE_SYSTEM_CHROME !== '0';
 
+// 端口/基址可经环境变量覆盖，避免本地默认端口被其它服务占用时 reuseExistingServer 复用到错误服务
+const port = Number(process.env.E2E_PORT || 4173);
+const baseURL = process.env.E2E_BASE_URL || `http://127.0.0.1:${port}`;
+
 export default defineConfig({
   testDir: './tests',
   timeout: 60_000,
@@ -16,15 +20,15 @@ export default defineConfig({
     ? [['list'], ['html', { outputFolder: 'playwright-report', open: 'never' }]]
     : [['list']],
   use: {
-    baseURL: process.env.E2E_BASE_URL || 'http://127.0.0.1:4173',
+    baseURL,
     headless: isCI,
     acceptDownloads: true,
     actionTimeout: 15_000,
     navigationTimeout: 30_000
   },
   webServer: {
     command: 'node ./server.mjs',
-    port: 4173,
+    url: baseURL,
     reuseExistingServer: !isCI
   },
   projects: [

test/tests/mobile-edit.spec.mjs

@@ -0,0 +1,67 @@
+import { test, expect } from '@playwright/test';
+import { prepareApp, confirmSwal } from './helpers.mjs';
+
+// 移动端视口（<=768，与 CSS @media 及 isMobileDevice() 对齐，触发底部抽屉态）
+test.use({ viewport: { width: 390, height: 740 } });
+
+test.describe('移动端轻量编辑', () => {
+  test('点击标记弹出只读气泡，并可删除标记点', async ({ page }) => {
+    await prepareApp(page);
+
+    // 直接通过 API 在当前地图中心加一个标记点（移动端禁用地图点击加点，故不走 UI 点击）
+    await page.evaluate(() => window.app.addMarker(window.app.map.getCenter()));
+    await page.waitForFunction(() => window.app.markers.length === 1);
+
+    // 关闭加点后弹出的详情抽屉，露出地图上的标记
+    await page.locator('#closeMarkerDetailBtn').click();
+    await expect(page.locator('#markerDetailPanel')).toBeHidden();
+
+    // 点击地图标记 → 移动端弹出只读气泡（含删除入口）。
+    // 用 leaflet 事件触发（与项目其它用例一致，比对 divIcon 派发 DOM 点击更可靠）
+    await page.evaluate(() => {
+      const m = window.app.markers[0];
+      m.marker.fire('click', { latlng: m.marker.getLatLng() });
+    });
+    const delBtn = page.locator('.popup-delete-marker');
+    await expect(delBtn).toBeVisible();
+
+    // 删除并确认 → 标记被移除
+    await delBtn.click();
+    await confirmSwal(page);
+    await page.waitForFunction(() => window.app.markers.length === 0);
+  });
+
+  test('日期详情以底部抽屉呈现，可编辑备注/花销并通过遮罩关闭', async ({ page }) => {
+    await prepareApp(page);
+
+    // 移动端已支持轻量编辑，标题不再标注“只读模式”
+    await expect(page.locator('#mainTitle')).not.toContainText('只读模式');
+
+    const date = '2030-01-01';
+    await page.evaluate((d) => window.app.showDateDetail(d), date);
+
+    // 底部抽屉态：面板可见 + 遮罩激活 + 背景滚动锁
+    await expect(page.locator('#dateDetailPanel')).toBeVisible();
+    await expect(page.locator('#mobileSheetOverlay')).toHaveClass(/active/);
+    await expect(page.locator('body')).toHaveClass(/sheet-open/);
+
+    // 轻量编辑：日期备注（实时保存到 dateNotes）
+    await page.fill('#dateNotesInput', '移动端备注测试');
+    await expect
+      .poll(() => page.evaluate((d) => window.app.getDateNotes(d), date))
+      .toBe('移动端备注测试');
+
+    // 轻量编辑：记一笔花销
+    await page.fill('#expenseCostInput', '128');
+    await page.fill('#expenseRemarkInput', '午餐');
+    await page.click('#addExpenseBtn');
+    await expect
+      .poll(() => page.evaluate((d) => window.app.getDateExpenses(d).length, date))
+      .toBe(1);
+
+    // 点击遮罩（顶部空白处，避开底部抽屉）关闭
+    await page.locator('#mobileSheetOverlay').click({ position: { x: 5, y: 5 } });
+    await expect(page.locator('#dateDetailPanel')).toBeHidden();
+    await expect(page.locator('#mobileSheetOverlay')).not.toHaveClass(/active/);
+  });
+});