[next]HTTP 页面在发送按钮左边新增一小块留白区域供拖拽

next/src/features/http/HttpTool.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Dialog } from '@/shared/components/Dialog'
 import { FindReplaceBar } from '@/shared/components/FindReplaceBar'
 import { ResizableColumns } from '@/shared/components/ResizableColumns'
-import { ToolTabs } from '@/shared/components/ToolPage'
+import { ToolTabs, WorkspaceDragZone } from '@/shared/components/ToolPage'
 import { TextCodeEditor, type TextCodeEditorHandle } from '@/shared/components/TextCodeEditor'
 import { formatCodeEditorContent } from '@/shared/components/codeEditorFormatting'
 import { resolveTextCodeEditorLanguage } from '@/shared/components/codeEditorLanguage'
@@ -209,6 +209,7 @@ export function HttpTool() {
               />
               <span>ms</span>
             </label>
+            <WorkspaceDragZone className="http-window-drag-zone" />
             {sending ? <button className="toolbar-button" type="button" onClick={() => { void stopRequest() }}><Square size={13} />{t('common.stop')}</button> : <button className="toolbar-button toolbar-button--primary" data-testid="http-send" type="button" onClick={() => { void sendRequest() }}><Send size={13} />{t('http.send')}</button>}
           </div>
           <div className="http-request-pane"><ToolTabs tabs={(['params', 'headers', 'cookies', 'body'] as RequestTab[]).map((id) => ({ id, label: t(`http.tab.${id}` as 'http.tab.params') }))} active={requestTab} onChange={setRequestTab} />

next/src/shared/styles/global.css

@@ -8070,7 +8070,7 @@ select:not([multiple]) {
 
 .http-url-bar {
   display: grid;
-  grid-template-columns: 92px minmax(140px, 1fr) auto auto;
+  grid-template-columns: 92px minmax(140px, 1fr) auto 36px auto;
   align-items: center;
   gap: 7px;
   padding: 8px 10px;
@@ -8078,6 +8078,13 @@ select:not([multiple]) {
   border-bottom: 1px solid var(--border-soft);
 }
 
+.http-window-drag-zone {
+  width: 36px;
+  min-width: 36px;
+  min-height: 32px;
+  flex: none;
+}
+
 .http-url-bar > input {
   width: 100%;
   font-family: ui-monospace, Menlo, Consolas, monospace;

next/tests/electron/immersive-tools.spec.ts

@@ -78,7 +78,7 @@ test('renders every functional tool as an immersive workspace while leaving home
       actionHeaderFlush: true,
       actionControlsVisible: true,
       outerSurfaceFlat: true,
-      workspaceDragUsable: label !== 'HTTP 请求'
+      workspaceDragUsable: true
     })
   }
 

next/tests/electron/tool-windows.spec.ts

@@ -171,6 +171,20 @@ test('keeps multiple detached tools independent and returns each one to its dock
   await waitForToolSelector('http', '.http-tool-page')
   await evaluateTool('http', `document.querySelector('.tool-window-toggle').click()`)
   await expect.poll(() => getToolSnapshot('http')).toMatchObject({ detached: true, ready: true })
+  await expect.poll(async () => (await evaluateTool('http', `(() => {
+    const drag = document.querySelector('.http-window-drag-zone')
+    const timeout = document.querySelector('.http-timeout')
+    const send = document.querySelector('[data-testid="http-send"]')
+    if (!drag || !timeout || !send) return null
+    const dragBounds = drag.getBoundingClientRect()
+    const timeoutBounds = timeout.getBoundingClientRect()
+    const sendBounds = send.getBoundingClientRect()
+    return {
+      width: Math.round(dragBounds.width),
+      betweenControls: dragBounds.left >= timeoutBounds.right && dragBounds.right <= sendBounds.left,
+      dragRegion: getComputedStyle(drag).getPropertyValue('-webkit-app-region')
+    }
+  })()`)).value).toEqual({ width: 36, betweenControls: true, dragRegion: 'drag' })
   await expect(mainPage.getByRole('heading', { name: 'HTTP 请求 已在独立窗口中打开' })).toBeVisible()
   await expect.poll(() => getBaseWindowCount()).toBe(3)