前置 URL：环境切换自动拼接服务地址（借鉴 Apifox）

- 环境新增「前置 URL」字段；环境管理弹窗独立配置区 + 说明
- URL 输入改为一体胶囊：前缀块（环境徽标 + 域名，点击进环境管理）+ 分隔线 + 相对路径输入
  - 路径以 / 开头（或空）自动拼接当前环境前置 URL；完整 https:// 地址不受影响
  - 光标 / 全选只作用于路径，不再误编辑 {{baseUrl}} 文本
- 覆盖 HTTP / GraphQL / SSE 编辑器与发送链路（含自动化测试执行器、代码生成用完整地址）
- 存量数据一次性迁移：{{baseUrl}}/path → /path，baseUrl 变量 → 环境字段（启动 / 导入 / 备份恢复均生效）
- 顶栏切换环境即换前缀；docs 06-env 增前置 URL 章节
- 验证：48 前端用例全绿；本地 E2E（迁移/发送 200/环境切换前缀联动/胶囊几何对齐）+ 近景视觉评审通过

packages/ui/src/components/UrlPathInput.tsx

@@ -0,0 +1,89 @@
+/**
+ * URL 输入（前置 URL 模式）：
+ * 当前环境配置了前置 URL 且值为相对路径（/ 开头或空）时，
+ * 展示「前缀块 + 分隔线 + 路径输入」的一体胶囊 —— 借鉴 Apifox 前置 URL。
+ * 路径输入只编辑相对部分，光标 / 全选不会碰到服务地址。
+ */
+import type { KeyboardEvent } from "react";
+import { useWorkspace } from "../workspaceStore";
+import { cx } from "./common";
+import { EnvBadge } from "./EnvBadge";
+import { VarHintInput } from "./VarHintInput";
+
+export function useEnvBaseUrl(): { baseUrl: string; envId: string | null; envName: string } {
+  const envId = useWorkspace((s) => s.activeEnvironmentId);
+  const env = useWorkspace((s) => (envId ? s.environments.find((e) => e.id === envId) : undefined));
+  return {
+    baseUrl: env?.baseUrl?.trim() ?? "",
+    envId: envId ?? null,
+    envName: env?.name ?? "",
+  };
+}
+
+/** 前置 URL 与相对路径拼接（供编辑器展示「实际地址」与代码生成复用） */
+export function joinUrl(baseUrl: string, path: string): string {
+  const p = path.trim();
+  if (!baseUrl || (p !== "" && !p.startsWith("/"))) return path;
+  const b = baseUrl.replace(/\/+$/, "");
+  if (p === "") return `${b}/`;
+  return p.startsWith("/") ? `${b}${p}` : `${b}/${p}`;
+}
+
+export function UrlPathInput({
+  value,
+  onChange,
+  placeholder,
+  className,
+  onKeyDown,
+  ariaLabel,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  className?: string;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  ariaLabel?: string;
+}) {
+  const { baseUrl, envId, envName } = useEnvBaseUrl();
+  const setDialog = useWorkspace((s) => s.setDialog);
+  const usePrefix = !!baseUrl && (value === "" || value.trimStart().startsWith("/"));
+
+  if (!usePrefix) {
+    return (
+      <VarHintInput
+        className={className}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        onKeyDown={onKeyDown}
+        ariaLabel={ariaLabel}
+      />
+    );
+  }
+
+  // 展示 host（去协议），完整地址放 title
+  const display = baseUrl.replace(/^https?:\/\//, "").replace(/\/+$/, "");
+
+  return (
+    <div className={cx("url-pill", className)}>
+      <button
+        type="button"
+        className="url-pill-prefix"
+        title={`前置 URL（${envName || "当前环境"}）：${baseUrl}\n点击管理环境`}
+        onClick={() => setDialog({ type: "environments" })}
+      >
+        {envId && <EnvBadge envId={envId} name={envName} size={14} />}
+        <span className="truncate">{display}</span>
+      </button>
+      <span className="url-pill-divider" />
+      <VarHintInput
+        className="url-pill-input"
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder ?? "/path"}
+        onKeyDown={onKeyDown}
+        ariaLabel={ariaLabel}
+      />
+    </div>
+  );
+}

packages/ui/src/components/dialogs/WorkspaceDialogs.tsx

@@ -320,6 +320,19 @@ export function EnvironmentsDialog() {
                 </button>
               </div>
 
+              <div className="mt-3">
+                <label className="ops-label">前置 URL</label>
+                <input
+                  className="ops-input font-mono"
+                  value={env.baseUrl ?? ""}
+                  onChange={(e) => updateEnvironment(env.id, { baseUrl: e.target.value })}
+                  placeholder="https://api.example.com（请求路径以 / 开头时自动拼接）"
+                />
+                <div className="ops-faint mt-1 text-[11px] leading-5">
+                  请求中只写相对路径（如 <b className="font-mono">/graphql</b>），切换环境即自动换成对应服务地址；留空则请求需写完整 URL。
+                </div>
+              </div>
+
               <div className="mt-4 flex items-center gap-2">
                 <div className="text-[13px] font-semibold">变量</div>
                 <span className="ops-faint text-[11px]">{env.variables.length} 项</span>

packages/ui/src/components/editors/GraphqlEditor.tsx

@@ -7,7 +7,7 @@ import { sendGraphqlRequest } from "../../send";
 import { useWorkspace } from "../../workspaceStore";
 import { KVEditor, cx } from "../common";
 import { Icon } from "../icons";
-import { VarHintInput } from "../VarHintInput";
+import { UrlPathInput } from "../UrlPathInput";
 import { AuthEditor } from "./HttpEditor";
 import { ResponsePanel } from "./ResponsePanel";
 
@@ -35,9 +35,9 @@ export function GraphqlEditor({ node }: { node: GraphqlApiNode }) {
     <div className="flex min-h-0 flex-1 flex-col">
       <div className="flex shrink-0 flex-wrap items-center gap-2 px-3 py-2.5" style={{ borderBottom: "1px solid var(--border)" }}>
         <span className="ops-chip inline-flex items-center gap-1" style={{ padding: "2px 10px" }}>POST <Icon name="hexagon" size={12} /> GraphQL</span>
-        <VarHintInput
+        <UrlPathInput
           className="ops-input flex-1 font-mono text-[13px]"
-          placeholder="https://api.example.com/graphql 或 {{baseUrl}}/graphql"
+          placeholder="https://api.example.com/graphql 或 /graphql"
           value={data.url}
           onChange={(v) => patch({ url: v })}
           onKeyDown={(e) => e.key === "Enter" && sendGraphqlRequest(node)}

packages/ui/src/components/editors/HttpEditor.tsx

@@ -18,7 +18,7 @@ import { sendHttpRequest } from "../../send";
 import { activeEnvMap, useWorkspace } from "../../workspaceStore";
 import { ContextMenu, CopyButton, KVEditor, cx, type MenuItem } from "../common";
 import { Icon } from "../icons";
-import { VarHintInput } from "../VarHintInput";
+import { UrlPathInput, joinUrl, useEnvBaseUrl } from "../UrlPathInput";
 import { ResponsePanel } from "./ResponsePanel";
 
 type BodyTab = "none" | "json" | "xml" | "text" | "html" | "urlencoded" | "form-data";
@@ -36,7 +36,8 @@ export function HttpEditor({ node }: { node: HttpApiNode }) {
   const [codeView, setCodeView] = useState<{ target: CodeTarget; code: string } | null>(null);
 
   const env = activeEnvMap();
-  const resolvedUrl = replaceVariables(data.url, env);
+  const { baseUrl: envBase } = useEnvBaseUrl();
+  const resolvedUrl = joinUrl(envBase, replaceVariables(data.url, env));
 
   const patch = (p: Partial<HttpRequestData>) => update(node.id, p);
 
@@ -55,7 +56,7 @@ export function HttpEditor({ node }: { node: HttpApiNode }) {
     ] as [CodeTarget, string][]
   ).map(([target, label]) => ({
     label,
-    onClick: () => setCodeView({ target, code: generateCode(target, data) }),
+    onClick: () => setCodeView({ target, code: generateCode(target, { ...data, url: resolvedUrl }) }),
   }));
 
   return (
@@ -74,9 +75,9 @@ export function HttpEditor({ node }: { node: HttpApiNode }) {
             </option>
           ))}
         </select>
-        <VarHintInput
+        <UrlPathInput
           className="ops-input flex-1 font-mono text-[13px]"
-          placeholder="https://api.example.com/v1/resource 或 {{baseUrl}}/path"
+          placeholder="https://api.example.com/v1/resource 或 /path"
           value={data.url}
           onChange={(v) => patch({ url: v })}
           onKeyDown={(e) => e.key === "Enter" && sendHttpRequest(node)}
@@ -99,7 +100,7 @@ export function HttpEditor({ node }: { node: HttpApiNode }) {
           <Icon name="code" size={13} /> 代码
         </button>
       </div>
-      {data.url.includes("{{") && (
+      {(data.url.includes("{{") || (envBase && (data.url === "" || data.url.trimStart().startsWith("/")))) && (
         <div className="ops-faint px-4 py-1 text-[11px]" style={{ borderBottom: "1px solid var(--border)" }}>
           实际地址：<span className="ops-accent font-mono">{resolvedUrl}</span>
         </div>

packages/ui/src/components/editors/SseEditor.tsx

@@ -8,7 +8,7 @@ import { hasSession } from "../../send";
 import { useWorkspace } from "../../workspaceStore";
 import { KVEditor, cx } from "../common";
 import { Icon } from "../icons";
-import { VarHintInput } from "../VarHintInput";
+import { UrlPathInput } from "../UrlPathInput";
 import { LiveLog, LiveStatus } from "./liveCommon";
 import { AuthEditor } from "./HttpEditor";
 
@@ -29,9 +29,9 @@ export function SseEditor({ node }: { node: SseApiNode }) {
     <div className="flex min-h-0 flex-1 flex-col gap-2 p-2.5">
       <div className="flex shrink-0 flex-wrap items-center gap-2">
         <span className="ops-chip inline-flex items-center gap-1" style={{ padding: "2px 10px" }}><Icon name="radio" size={13} /> SSE</span>
-        <VarHintInput
+        <UrlPathInput
           className="ops-input flex-1 font-mono text-[13px]"
-          placeholder="https://stream.example.com/events"
+          placeholder="https://stream.example.com/events 或 /events"
           value={data.url}
           onChange={(v) => patch({ url: v })}
         />

packages/ui/src/send.ts

@@ -20,7 +20,7 @@ import {
   type StreamSession,
 } from "@opsxapi/transport";
 import type { WsSession } from "@opsxapi/core";
-import { activeEnvMap, useWorkspace } from "./workspaceStore";
+import { activeEnvBaseUrl, activeEnvMap, useWorkspace } from "./workspaceStore";
 
 type Session = { close(): void };
 
@@ -96,11 +96,26 @@ function buildMultipart(rows: HttpRequestData["bodyForm"], env: Record<string, s
   return parts.join("");
 }
 
+/** 相对路径（/ 开头）拼接当前环境前置 URL，其余原样解析变量 */
+export function resolveRequestUrl(
+  url: string,
+  env: Record<string, string>,
+  baseUrlPrefix?: string,
+): string {
+  const resolved = replaceVariables(url, env);
+  const prefix = baseUrlPrefix?.trim();
+  if (prefix && (url === "" || url.trimStart().startsWith("/"))) {
+    return `${prefix.replace(/\/+$/, "")}${resolved === "" ? "/" : resolved.startsWith("/") ? resolved : `/${resolved}`}`;
+  }
+  return resolved;
+}
+
 export function buildHttpSpec(
   data: HttpRequestData,
   env: Record<string, string>,
   timeoutMs: number,
   mock?: MockSettings,
+  baseUrlPrefix?: string,
 ): HttpSpec {
   const { headers: authH, query: authQ } = authHeaders(data.auth, env);
   const headers = { ...kvMap(data.headers, env), ...authH };
@@ -137,7 +152,7 @@ export function buildHttpSpec(
 
   return {
     method: data.method,
-    url: replaceVariables(data.url, env),
+    url: resolveRequestUrl(data.url, env, baseUrlPrefix),
     headers,
     query: { ...kvMap(data.query, env, mock), ...authQ },
     body,
@@ -196,8 +211,8 @@ async function sendHttpLike(
 export function sendHttpRequest(node: RequestNode & { kind: "http" }): void {
   const env = activeEnvMap();
   const { timeoutMs, mock } = useWorkspace.getState().settings;
-  const spec = buildHttpSpec(node.data, env, timeoutMs, mock);
-  void sendHttpLike(node.id, node.name, spec, node.data.url);
+  const spec = buildHttpSpec(node.data, env, timeoutMs, mock, activeEnvBaseUrl());
+  void sendHttpLike(node.id, node.name, spec, spec.url);
 }
 
 export function sendGraphqlRequest(node: RequestNode & { kind: "graphql" }): void {
@@ -221,13 +236,13 @@ export function sendGraphqlRequest(node: RequestNode & { kind: "graphql" }): voi
   if (!("content-type" in headers)) headers["Content-Type"] = "application/json";
   const spec: HttpSpec = {
     method: "POST",
-    url: replaceVariables(data.url, env),
+    url: resolveRequestUrl(data.url, env, activeEnvBaseUrl()),
     headers,
     query: {},
     body: { mode: "json", raw: payload },
     timeoutMs,
   };
-  void sendHttpLike(node.id, node.name, spec, data.url);
+  void sendHttpLike(node.id, node.name, spec, spec.url);
 }
 
 /* ---------------- WebSocket ---------------- */
@@ -289,7 +304,7 @@ export function connectSse(node: RequestNode & { kind: "sse" }): void {
   }
   const env = activeEnvMap();
   const data = node.data;
-  const url = replaceVariables(data.url, env);
+  const url = resolveRequestUrl(data.url, env, activeEnvBaseUrl());
   const { headers: authH, query: authQ } = authHeaders(data.auth, env);
   const headers = { ...kvMap(data.headers, env), ...authH };
   const query = { ...kvMap(data.query, env), ...authQ };

packages/ui/src/testRunner.ts

@@ -13,7 +13,7 @@ import type {
 } from "@opsxapi/core";
 import { evaluateAssertion, extractVariables } from "@opsxapi/core";
 import { buildHttpSpec } from "./send";
-import { activeEnvMap, useWorkspace } from "./workspaceStore";
+import { activeEnvBaseUrl, activeEnvMap, useWorkspace } from "./workspaceStore";
 
 async function getTransportFn() {
   const { detectTransport } = await import("@opsxapi/transport");
@@ -55,7 +55,7 @@ export async function runTestCase(caseId: string, trigger: TestRunTrigger): Prom
 
     const env = activeEnvMap();
     const { timeoutMs, mock } = useWorkspace.getState().settings;
-    const spec: HttpSpec = buildHttpSpec(node.data, env, timeoutMs, mock);
+    const spec: HttpSpec = buildHttpSpec(node.data, env, timeoutMs, mock, activeEnvBaseUrl());
     const t0 = performance.now();
     try {
       const res = await http(spec);

packages/ui/src/workspaceStore.ts

@@ -229,16 +229,49 @@ function normalizeAiSettings(raw: unknown): { providers: AiProvider[]; activePro
   return { providers, activeProviderId };
 }
 
+/** 一次性迁移到「前置 URL」模式：
+ *  - 环境变量 baseUrl → 环境 baseUrl 字段（变量移除）
+ *  - 请求 URL 的 {{baseUrl}}/ 前缀剥离为相对路径（发送时按当前环境拼接）
+ */
+function migrateBaseUrl(
+  collections: Collection[],
+  environments: Environment[],
+): { collections: Collection[]; environments: Environment[] } {
+  const envs = environments.map((e) => {
+    const v = e.variables.find((x) => x.key === "baseUrl");
+    if (!e.baseUrl && v?.value) {
+      return { ...e, baseUrl: v.value, variables: e.variables.filter((x) => x.key !== "baseUrl") };
+    }
+    return e;
+  });
+
+  const fix = (nodes: CollectionNode[]): CollectionNode[] =>
+    nodes.map((n) => {
+      if (n.type === "folder") return { ...n, children: fix(n.children) };
+      if (n.type === "request" && (n.kind === "http" || n.kind === "graphql" || n.kind === "sse")) {
+        const raw = (n.data as { url?: string }).url ?? "";
+        if (/^\s*\{\{\s*baseUrl\s*\}\}/.test(raw)) {
+          const path = raw.replace(/^\s*\{\{\s*baseUrl\s*\}\}\/?/, "");
+          return { ...n, data: { ...n.data, url: path.startsWith("/") ? path : `/${path}` } } as CollectionNode;
+        }
+      }
+      return n;
+    });
+
+  return { collections: collections.map((c) => ({ ...c, children: fix(c.children) })), environments: envs };
+}
+
 function loadPersisted(): WorkspaceData | null {
   try {
     const raw = localStorage.getItem(STORAGE_KEY);
     if (!raw) return null;
     const data = JSON.parse(raw) as Partial<WorkspaceData>;
     if (!Array.isArray(data.collections) || !Array.isArray(data.environments)) return null;
+    const migrated = migrateBaseUrl(sanitizeCollections(data.collections), data.environments);
     return {
       version: 2,
-      collections: sanitizeCollections(data.collections),
-      environments: data.environments,
+      collections: migrated.collections,
+      environments: migrated.environments,
       activeEnvironmentId: data.activeEnvironmentId ?? data.environments[0]?.id ?? null,
       history: Array.isArray(data.history) ? data.history : [],
       settings: {
@@ -280,6 +313,13 @@ function schedulePersist(state: WorkspaceStore): void {
   }, 400);
 }
 
+/** 当前启用环境的前置 URL */
+export function activeEnvBaseUrl(): string {
+  const s = useWorkspace.getState();
+  const env = s.environments.find((e) => e.id === s.activeEnvironmentId);
+  return env?.baseUrl?.trim() ?? "";
+}
+
 export function applyThemeToDocument(theme: ThemeMode): void {
   if (typeof document === "undefined") return;
   document.documentElement.dataset.theme = theme;
@@ -432,31 +472,40 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => {
     importCollections(collections, envVars) {
       const state = get();
       const existingNames = new Set(state.collections.map((c) => c.name));
-      const renamed = collections.map((c) => {
+      // 导入的 {{baseUrl}} 前缀统一转为相对路径，服务地址进环境前置 URL
+      const { collections: stripped, environments: _e, ..._rest } = migrateBaseUrl(collections, []);
+      void _e; void _rest;
+      const renamed = stripped.map((c) => {
         if (!existingNames.has(c.name)) return c;
         let i = 2;
         while (existingNames.has(`${c.name} ${i}`)) i++;
         return { ...c, name: `${c.name} ${i}` };
       });
-      // 环境变量并入当前环境
+      // 环境变量并入当前环境（baseUrl 变量优先写入前置 URL 字段）
       let environments = state.environments;
       let activeEnvironmentId = state.activeEnvironmentId;
       if (envVars.length) {
+        const baseVar = envVars.find((v) => v.key === "baseUrl");
+        const plainVars = envVars.filter((v) => v.key !== "baseUrl" || baseVar?.value === "");
         const active = environments.find((e) => e.id === activeEnvironmentId) ?? environments[0];
         if (active) {
           const known = new Set(active.variables.map((v) => v.key));
-          for (const v of envVars) {
+          for (const v of plainVars) {
             if (!known.has(v.key)) {
               active.variables.push(kv(v.key, v.value));
               known.add(v.key);
             }
           }
-          environments = environments.map((e) => (e.id === active.id ? { ...active } : e));
+          const patched = baseVar?.value
+            ? { ...active, baseUrl: active.baseUrl || baseVar.value, variables: active.variables.filter((v) => v.key !== "baseUrl") }
+            : { ...active };
+          environments = environments.map((e) => (e.id === patched.id ? patched : e));
         } else {
           const env: Environment = {
             id: newId(),
             name: "默认环境",
-            variables: envVars.map((v) => kv(v.key, v.value)),
+            baseUrl: baseVar?.value || "",
+            variables: plainVars.map((v) => kv(v.key, v.value)),
           };
           environments = [...environments, env];
           activeEnvironmentId = env.id;
@@ -467,7 +516,10 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => {
       return renamed.map((c) => c.id);
     },
 
-    loadWorkspaceData(data) {
+    loadWorkspaceData(rawData) {
+      // 兼容旧备份：{{baseUrl}} 前缀 → 前置 URL 模式
+      const migrated = migrateBaseUrl(rawData.collections, rawData.environments);
+      const data = { ...rawData, collections: migrated.collections, environments: migrated.environments };
       set({
         collections: data.collections,
         environments: data.environments,