> ## Documentation Index
> Fetch the complete documentation index at: https://ophel.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 布局设置 — 宽屏、禅模式、净化模式与面板

> 自定义页面内容区宽度，使用禅模式与净化模式减少干扰，并配置面板尺寸与行为——按站点独立生效。

export const ShortcutLegend = ({lang = "en"}) => {
  const isZh = lang === "zh";
  return <div className="ophel-shortcut-legend" role="note">
      <div className="ophel-shortcut-legend-title">
        {isZh ? "跨平台按键说明" : "Cross-platform key mapping"}
      </div>
      <div className="ophel-shortcut-legend-body">
        {isZh ? <>
            文档中的快捷键会同时显示 Windows/Linux 与 Mac 写法：
            <code>Ctrl</code> 对应 <code>Command</code>，
            <code>Alt</code> 对应 <code>Option</code>。唯一例外是提示词发送，
            <code>Ctrl+Enter</code> 在 Mac 上也使用 <code>Ctrl+Enter</code>。
          </> : <>
            Shortcuts show both Windows/Linux and Mac keys: <code>Ctrl</code> maps
            to <code>Command</code>, and <code>Alt</code> maps to
            <code>Option</code>. Prompt submit is the only exception:
            <code>Ctrl+Enter</code> remains <code>Ctrl+Enter</code> on Mac.
          </>}
      </div>
    </div>;
};

export const Shortcut = ({combo, mac, sameOnMac = false}) => {
  const keyLabels = {
    arrowup: {
      win: "Up",
      mac: "↑"
    },
    arrowdown: {
      win: "Down",
      mac: "↓"
    },
    arrowleft: {
      win: "Left",
      mac: "←"
    },
    arrowright: {
      win: "Right",
      mac: "→"
    },
    up: {
      win: "Up",
      mac: "↑"
    },
    down: {
      win: "Down",
      mac: "↓"
    },
    left: {
      win: "Left",
      mac: "←"
    },
    right: {
      win: "Right",
      mac: "→"
    },
    esc: {
      win: "Esc",
      mac: "Esc"
    },
    escape: {
      win: "Esc",
      mac: "Esc"
    },
    enter: {
      win: "Enter",
      mac: "Enter"
    },
    shift: {
      win: "Shift",
      mac: "⇧"
    },
    backslash: {
      win: "\\",
      mac: "\\"
    }
  };
  const modifierLabels = {
    ctrl: {
      win: "Ctrl",
      mac: "⌘"
    },
    control: {
      win: "Ctrl",
      mac: "⌘"
    },
    cmd: {
      win: "Ctrl",
      mac: "⌘"
    },
    command: {
      win: "Ctrl",
      mac: "⌘"
    },
    alt: {
      win: "Alt",
      mac: "⌥"
    },
    option: {
      win: "Alt",
      mac: "⌥"
    },
    shift: {
      win: "Shift",
      mac: "⇧"
    }
  };
  const normalizeToken = token => String(token || "").trim();
  const formatKey = (token, platform) => {
    const normalized = normalizeToken(token);
    const key = normalized.toLowerCase();
    const mapped = keyLabels[key];
    if (mapped) return mapped[platform];
    if (normalized.length === 1) return normalized.toUpperCase();
    return normalized;
  };
  const formatCombo = (value, platform) => String(value || "").split("+").map(normalizeToken).filter(Boolean).map(token => {
    const mapped = modifierLabels[token.toLowerCase()];
    return mapped ? mapped[platform] : formatKey(token, platform);
  }).join(platform === "mac" ? "" : "+");
  const windowsLabel = formatCombo(combo, "win");
  const macLabel = sameOnMac ? windowsLabel : mac || formatCombo(combo, "mac");
  const title = windowsLabel === macLabel ? windowsLabel : `Windows/Linux: ${windowsLabel}; Mac: ${macLabel}`;
  return <span className="ophel-shortcut" title={title}>
      <code>{windowsLabel}</code>
      {windowsLabel !== macLabel && <>
          <span className="ophel-shortcut-separator"> / </span>
          <code>{macLabel}</code>
        </>}
    </span>;
};

export const Icon = ({src, alt}) => <img src={typeof window !== "undefined" && typeof src === "string" && src.startsWith("/images/icons/") && (window.location.pathname === "/docs" || window.location.pathname.startsWith("/docs/")) ? `/docs${src}` : src} alt={alt} width="18" height="18" style={{
  display: "inline-block",
  verticalAlign: "-0.2em",
  margin: "0 0.15em"
}} />;

Ophel 提供多类布局设置：自定义页面内容区宽度、调整用户问题气泡宽度、用禅模式隐藏平台导航，以及用净化模式移除广告、免责声明、下载按钮等冗余元素。这些功能均按站点独立配置。

## 页面宽度

**设置 → 站点设置 → 布局 → 页面宽度**

许多 AI 平台的内容区默认被限制在较窄的宽度，超宽屏上会留出大量空白。启用此选项后，你可以自定义内容区的最大宽度：

* **单位**：百分比（相对于视口宽度）
* **调节方式**：拖动滑块，范围 50%–99%（上限 99% 为了保留平台原有界面的一丝空间）

修改立即生效，不需要刷新页面。关闭此选项可随时还原到平台默认。

### 智能避让

**设置 → 站点设置 → \[选择站点] → 布局 → 智能避让**

智能避让用于在 Ophel 面板打开时保持 AI 页面内容可见。在已适配站点上，Ophel 会重新计算聊天安全区，让消息、代码块、输入框以及右侧工具面板避开悬浮面板。

<video className="ophel-docs-video" controls muted playsInline preload="metadata" aria-label="智能避让演示：聊天区域避开 Ophel 面板">
  <source src="https://mintcdn.com/urzeye/FnYdYOHdhaTeOTL9/images/panel/panel-aware-layout.mp4?fit=max&auto=format&n=FnYdYOHdhaTeOTL9&q=85&s=725d710d40051a39bd4dc480a980952f" type="video/mp4" data-path="images/panel/panel-aware-layout.mp4" />

  当前浏览器不支持嵌入视频。可直接打开 `/images/panel/panel-aware-layout.mp4`
  查看。
</video>

智能避让会结合页面宽度和面板当前所在侧边计算可用空间。如果继续加宽会导致内容被面板遮挡，Ophel 可能会限制实际生效的页面宽度，即使页面宽度滑块仍可继续调高。这是预期行为：它会优先保证对话内容可读，而不是让内容压到面板下面。

## 用户问题宽度

**设置 → 站点设置 → \[选择站点] → 布局 → 用户问题宽度**

单独控制你发出的消息气泡的最大宽度，与整体内容区宽度独立设置。适合把问题气泡做大、减少留白，在宽屏上获得更紧凑的对话视图。

## 禅模式

禅模式会隐藏页面上与对话无关的 UI 元素，例如侧边栏、顶部导航栏等，让你的注意力集中在内容上。

**开启方式（任一即可）：**

* 浮动按钮组 → <Icon src="/docs/images/icons/eye.svg" alt="禅模式图标" /> 禅模式图标
* 快捷键 <Icon src="/docs/images/icons/keyboard.svg" alt="快捷键图标" /> <Shortcut combo="ctrl+shift+z" />
* <Icon src="/docs/images/icons/settings.svg" alt="设置图标" />
  **设置 → 站点设置 → \[选择站点] → 布局 → 禅模式**（持久化）

<Tip>
  禅模式按站点独立保存。在设置中勾选后，每次打开该站点时会自动进入禅模式；通过按钮或快捷键切换的状态为临时状态，刷新后不保留。
</Tip>

### 禅模式退出按钮

禅模式激活后，屏幕上会显示一个小的 <Icon src="/docs/images/icons/eye-closed.svg" alt="退出禅模式图标" /> 退出按钮，方便你在不用快捷键的情况下退出禅模式。如果你更习惯只用快捷键（<Shortcut combo="ctrl+shift+z" />），可以在 **设置 → 站点设置 → \[选择站点] → 布局 → 显示禅模式退出按钮** 中隐藏此按钮。

## <Icon src="/docs/images/icons/clean-mode.svg" alt="净化模式图标" /> 净化模式

净化模式会隐藏页面中的免责声明、广告、下载按钮、推广卡片等非对话元素。它默认开启，并且按站点独立配置。

**设置 → 站点设置 → \[选择站点] → 布局 → 净化模式**

净化模式比禅模式更克制：它保留平台原有布局，只移除 Ophel 能识别的冗余元素。禅模式会更进一步隐藏侧边栏和导航；开启禅模式时，也会包含净化效果。

<Note>
  在 ChatGPT 上，净化模式也会隐藏 Ophel
  能识别的赞助卡片。由于各平台页面结构会变化，部分推广元素可能需要后续适配更新。
</Note>

## 面板尺寸与位置

<Icon src="/docs/images/icons/settings.svg" alt="设置图标" />

**设置 → 通用 → 面板**：

| 设置项         | 说明                                                                                                                                | 默认值    |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------- | ------ |
| 面板模式        | <Icon src="/docs/images/icons/snap-to-edge.svg" alt="自动吸附图标" /> 自动吸附或 <Icon src="/docs/images/icons/floating-mode.svg" alt="悬浮模式图标" /> 悬浮模式 | 悬浮     |
| 默认侧边        | 面板在左侧还是右侧                                                                                                                         | 右侧     |
| 边缘距离        | 悬浮模式下面板距屏幕边缘的像素距离                                                                                                                 | 0 px   |
| 面板宽度        | 持久面板宽度，240–600 px                                                                                                                 | 320 px |
| 悬停时加宽（Beta） | 鼠标或键盘焦点停在悬浮面板内时临时加宽                                                                                                               | 关闭     |
| 悬停宽度（Beta）  | 悬停时临时使用的面板宽度，240–600 px                                                                                                           | 520 px |
| 面板高度        | 面板高度占视口的比例（50–100 vh）                                                                                                             | 85 vh  |
| 吸附阈值        | 触发自动吸附的距边缘距离                                                                                                                      | 30 px  |

拖拽面板标题栏可随意移动面板位置。**双击**标题栏可快速切换 <Icon src="/docs/images/icons/snap-to-edge.svg" alt="自动吸附图标" /> 自动吸附与 <Icon src="/docs/images/icons/floating-mode.svg" alt="悬浮模式图标" /> 悬浮模式，无需打开设置。

### 直接拖拽调整悬浮面板宽度

悬浮模式下，面板靠近页面内容的一侧会显示细窄的拖拽手柄。拖动它即可修改 **面板宽度**，不需要进入设置页。面板在右侧时拖左边缘，面板在左侧时拖右边缘；松开指针后，新宽度会保存为持久设置。

### 临时悬停宽度

如果你只是临时想看清更长的大纲标题、会话标题或提示词名称，可以开启 **悬停时加宽**。鼠标或键盘焦点进入面板时，面板会扩展到 **悬停宽度**；离开后恢复到保存的 **面板宽度**。

悬停加宽只在支持鼠标或触控板的悬浮模式中生效，不影响自动吸附预览、快捷按钮临时预览，也不会改写持久面板宽度。开启智能避让时，临时悬停加宽不会推动 AI 页面；只有拖拽面板边缘并保存新的面板宽度后，页面避让才会按新宽度重新计算。