> ## 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.

# 面板概览 — Ophel 侧边面板基础操作

> 了解 Ophel 侧边面板的三个标签页、标签排序、浮动快捷按钮、幽灵穿透与面板吸附功能。

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"
}} />;

安装成功后，打开任意[支持的 AI 网站](/docs/introduction#支持的平台)，Ophel 会自动激活，在页面右侧显示侧边面板，并在屏幕边缘出现一组浮动快捷按钮。

## 面板的三个标签页

<img src="https://mintcdn.com/urzeye/AGLEIfLkr4uHH1zd/images/panel/panel-tabs.png?fit=max&auto=format&n=AGLEIfLkr4uHH1zd&q=85&s=141737be3544a5375f83ad741b340b24" alt="Ophel 侧边面板 — 三个标签页概览" width="315" height="338" data-path="images/panel/panel-tabs.png" />

点击面板顶部的标签栏切换，或使用 <Shortcut combo="alt+1" /> / <Shortcut combo="alt+2" /> / <Shortcut combo="alt+3" />：

<CardGroup cols={3}>
  <Card title="大纲" icon="list-tree">
    当前对话的实时自动生成目录树。点击任意标题即可跳转。支持折叠/展开、搜索、书签和实时字数统计。
  </Card>

  <Card title="会话" icon="folder-open">
    当前 AI 平台的历史对话列表。用文件夹和标签整理，支持语法过滤搜索，可导出为
    <Icon src="/docs/images/icons/markdown.svg" alt="Markdown 文件图标" /> Markdown、<Icon src="/docs/images/icons/json-file.svg" alt="JSON 文件图标" />
    JSON 或 <Icon src="/docs/images/icons/txt-file.svg" alt="TXT 文件图标" /> 纯文本。
  </Card>

  <Card title="提示词" icon="wand-magic-sparkles">
    你的个人提示词收藏库。点击插入到输入框；双击立即插入并发送。支持变量替换、分类和置顶。
  </Card>
</CardGroup>

拖拽顶部标签文字即可调整可见标签页顺序。Ophel 会立即保存新顺序，并同步到设置页中的同一排序。

<Note>如果面板没有自动出现，按 <Shortcut combo="alt+p" /> 手动打开。</Note>

## 基础操作

| 操作        | 方法                                                                                                                                                                                                                      |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 切换标签页     | 点击顶部标签栏，或按 <Shortcut combo="alt+1" /> / <Shortcut combo="alt+2" /> / <Shortcut combo="alt+3" />                                                                                                                         |
| 打开 / 关闭面板 | <Shortcut combo="alt+p" />，或点击浮动按钮组中的面板开关图标                                                                                                                                                                             |
| 切换面板模式    | <Shortcut combo="alt+m" />，或双击标题栏，或点击标题栏模式切换按钮                                                                                                                                                                          |
| 全局搜索      | <Shortcut combo="ctrl+k" />（或配置的快捷键）                                                                                                                                                                                    |
| 切换亮 / 暗模式 | <Shortcut combo="alt+d" />，或点击浮动按钮中的主题图标                                                                                                                                                                                |
| 打开设置      | <Shortcut combo="alt+," />，或点击面板顶部标题栏中的 <Icon src="/docs/images/icons/settings.svg" alt="设置图标" /> 设置图标，或点击 <Icon src="/docs/images/icons/tools.svg" alt="工具箱图标" /> 工具箱里的 <Icon src="/docs/images/icons/settings.svg" alt="设置图标" /> 设置项 |

## 浮动快捷按钮

<img src="https://mintcdn.com/urzeye/AGLEIfLkr4uHH1zd/images/panel/floating-buttons.png?fit=max&auto=format&n=AGLEIfLkr4uHH1zd&q=85&s=3407c52ae11d8640fe975e95fb507cf6" alt="浮动快捷按钮组 — 展开状态与收缩胶囊" width="64" height="433" data-path="images/panel/floating-buttons.png" />

屏幕侧边的浮动按钮组是 Ophel 最常用的快速入口：

* **5 秒无操作**后自动收缩为胶囊形。默认鼠标移近 **150px** 后重新展开——此距离可在 **设置 → 快捷按钮 → 感应唤醒距离** 中调整（0–300px）。设为 **0** 可启用停留悬停模式：鼠标须在胶囊上停留 300ms 后才展开，划过不触发。
* 按钮组收缩后，鼠标在面板 Logo 上短暂停留，会在按钮旁临时预览面板。鼠标移开后预览自动收起；点击 Logo 仍然是持久打开 / 关闭面板。
* **长按拖拽**任意按钮可把整组按钮移动到屏幕任意位置。

按钮组中的默认图标：

| 图标                                                                   | 作用                                   |
| -------------------------------------------------------------------- | ------------------------------------ |
| <Icon src="/docs/images/icons/sparkle.svg" alt="面板开关图标" /> **面板开关**       | 打开 / 关闭 Ophel 面板。按钮组收缩后，短暂停留可临时预览面板。 |
| <Icon src="/docs/images/icons/tools.svg" alt="工具箱图标" /> **工具箱**           | 打开更多会话与页面操作。                         |
| <Icon src="/docs/images/icons/search.svg" alt="全局搜索图标" /> **全局搜索**        | 打开全局搜索叠加层，搜索大纲、会话、提示词和设置项。           |
| <Icon src="/docs/images/icons/theme-system.svg" alt="主题切换图标" /> **主题切换**  | 在亮色 / 暗色模式之间切换；图标会随当前主题状态变化。         |
| <Icon src="/docs/images/icons/eye.svg" alt="禅模式图标" /> **禅模式**             | 切换当前站点的禅模式；开启后会同时启用净化模式，图标会变为闭眼状态。   |
| <Icon src="/docs/images/icons/settings.svg" alt="设置图标" /> **设置**          | 打开设置弹窗。                              |
| <Icon src="/docs/images/icons/scroll-top.svg" alt="滚到顶部图标" /> **滚到顶部**    | 加载完整历史并跳到当前对话顶部。                     |
| <Icon src="/docs/images/icons/anchor.svg" alt="返回锚点图标" /> **返回锚点**        | 跳回上一次保存的位置；跳转前会把当前位置保存为新的锚点。         |
| <Icon src="/docs/images/icons/scroll-bottom.svg" alt="滚到底部图标" /> **滚到底部** | 跳到最新消息位置。                            |

点击 <Icon src="/docs/images/icons/tools.svg" alt="工具箱图标" /> **工具箱**后，会显示这些菜单图标：

| 图标                                                                         | 作用                           |
| -------------------------------------------------------------------------- | ---------------------------- |
| <Icon src="/docs/images/icons/export.svg" alt="导出图标" /> **导出**                  | 导出当前对话。                      |
| <Icon src="/docs/images/icons/segmented-export.svg" alt="分段导出图标" /> **分段导出**    | 选择并导出当前对话的特定片段。              |
| <Icon src="/docs/images/icons/copy.svg" alt="复制 Markdown 图标" /> **复制 Markdown** | 把当前对话复制为 Markdown。           |
| <Icon src="/docs/images/icons/folder-move.svg" alt="移动会话图标" /> **移动会话**         | 选择目标文件夹并移动当前会话。              |
| <Icon src="/docs/images/icons/tag.svg" alt="设置标签图标" /> **设置标签**                 | 给当前会话添加、移除或调整标签。             |
| <Icon src="/docs/images/icons/scroll-lock.svg" alt="滚动锁定图标" /> **滚动锁定**         | 锁定页面滚动位置，避免页面自动跳动。           |
| <Icon src="/docs/images/icons/model-lock.svg" alt="模型锁定图标" /> **模型锁定**          | 按当前站点配置固定模型关键字；未配置时会引导到站点设置。 |
| <Icon src="/docs/images/icons/cleanup.svg" alt="清除无效收藏图标" /> **清除无效收藏**         | 清理当前对话中已经失效的收藏 / 锚点记录。       |
| <Icon src="/docs/images/icons/settings.svg" alt="设置图标" /> **设置**                | 打开设置弹窗。                      |

**其他设置**（设置 → 快捷按钮）：

| 设置项         | 说明                                    |
| ----------- | ------------------------------------- |
| **感应唤醒距离**  | 鼠标距胶囊多远时唤醒展开（默认 150px）。设为 0 启用停留悬停模式。 |
| **不透明度**    | 调整按钮组在折叠 / 空闲状态下的透明度。                 |
| **面板展开时隐藏** | 面板打开时自动折叠快捷按钮组，关闭面板后恢复显示。             |

## 全局搜索

按 <Shortcut combo="ctrl+k" />，或点击浮动按钮中的 <Icon src="/docs/images/icons/search.svg" alt="全局搜索图标" /> 搜索图标，打开全局搜索叠加层。它将大纲节点、当前平台历史对话、提示词库和设置项统一纳入一个搜索框，无需逐个标签翻找。也可以连按两次 `Shift` 触发（需在 **设置 → 全局搜索** 中开启）。

支持以下语法过滤，多个过滤条件可以组合使用：

| 语法          | 作用范围   | 可用值                                                  | 示例                   |
| ----------- | ------ | ---------------------------------------------------- | -------------------- |
| `folder:名称` | 会话     | 任意文件夹名（模糊匹配）                                         | `folder:work`        |
| `tag:名称`    | 会话、提示词 | 任意标签名（模糊匹配）                                          | `tag:research`       |
| `type:类型`   | 全部     | `outline` · `conversations` · `prompts` · `settings` | `type:conversations` |
| `date:天数`   | 会话、提示词 | `Nd`，如 `7d`、`30d`                                    | `date:30d`           |
| `level:层级`  | 大纲节点   | `0` – `6`（标题深度）                                      | `level:2`            |
| `is:状态`     | 会话     | `pinned`（已置顶）· `unpinned`（未置顶）                       | `is:pinned`          |

<Note>
  在搜索框中输入 `tip:` 可进入功能提示模式，直接列出 Ophel
  功能发现小贴士，而非执行普通搜索。
</Note>

## 幽灵穿透（Ghost Pass-Through）

<img src="https://mintcdn.com/urzeye/AGLEIfLkr4uHH1zd/images/panel/ghost-mode.webp?fit=max&auto=format&n=AGLEIfLkr4uHH1zd&q=85&s=a81f47df60ac520403b297f7d57c8800" alt="幽灵穿透模式 — 面板半透明允许鼠标穿透" width="408" height="918" data-path="images/panel/ghost-mode.webp" />

面板遮住了你需要点击的内容？不必先关闭面板：

按住 <Shortcut combo="ctrl" />，保持约 **0.2 秒**（只按这一个键），面板会变半透明并允许鼠标穿透，你可以直接点击背后的 AI 页面内容。松开键后面板恢复正常。

## 面板吸附到边缘

<img src="https://mintcdn.com/urzeye/AGLEIfLkr4uHH1zd/images/panel/edge-snap.webp?fit=max&auto=format&n=AGLEIfLkr4uHH1zd&q=85&s=f407ec517efad7c00b3870e20fe60758" alt="面板吸附到屏幕边缘 — 悬停弹出预览" width="408" height="918" data-path="images/panel/edge-snap.webp" />

面板有两种工作模式，可在 **设置 → 通用 → 面板 → 面板模式** 中切换：

| 模式   | 行为                            |
| ---- | ----------------------------- |
| 自动吸附 | 面板紧贴屏幕边缘，通常处于隐藏状态；鼠标悬停边缘时弹出预览 |
| 悬浮   | 面板悬浮在页面上方，固定可见，可自由拖动位置        |

你也可以通过以下方式快速切换，无需打开设置：

* 直接点击面板标题栏右侧的 **模式切换按钮**（图钉/吸附图标）
* **双击**面板顶部标题栏（Logo 或品牌名区域）
* 快捷键 <Shortcut combo="alt+m" />（可在 **设置 → 快捷键** 中自定义）

<Tip>
  在自动吸附模式下，拖拽面板标题栏可将面板拖离边缘，此时按住拖动到对侧边缘可改变吸附方向。
</Tip>

## 面板标题栏

面板标题栏（Header）提供以下操作：

| 元素                                                        | 操作                                                   |
| --------------------------------------------------------- | ---------------------------------------------------- |
| 标题区域                                                      | 鼠标悬停显示随机使用小贴士；双击快速切换面板显示模式（悬浮 ↔ 自动吸附）                |
| 模式切换按钮                                                    | 在「自动吸附」和「悬浮」模式之间一键切换（快捷键 <Shortcut combo="alt+m" />） |
| 主题切换按钮                                                    | 切换亮/暗模式（<Shortcut combo="alt+d" />）                  |
| <Icon src="/docs/images/icons/settings.svg" alt="设置图标" /> 设置按钮 | 打开设置弹窗（<Shortcut combo="alt+," />）                   |

## 面板基本设置

以下设置均在 **设置 → 通用 → 面板** 中调整：

| 设置项         | 说明                            | 默认值    |
| ----------- | ----------------------------- | ------ |
| 面板模式        | 自动吸附（贴边隐藏、悬停弹出）或悬浮（始终可见）      | 悬浮     |
| 默认侧边        | 面板在左侧还是右侧                     | 右侧     |
| 面板宽度        | 持久面板宽度，也可在悬浮模式下拖拽面板边缘调整       | 320 px |
| 悬停时加宽（Beta） | 鼠标或键盘焦点停在悬浮面板内时临时加宽，离开后恢复常规宽度 | 关闭     |
| 悬停宽度（Beta）  | 开启「悬停时加宽」后临时使用的面板宽度           | 520 px |
| 面板高度        | 面板高度占视口的比例（50–100 vh）         | 85 vh  |
| 默认边距        | 面板距屏幕边缘的初始距离                  | 0 px   |
| 吸附阈值        | 触发吸附的距离（0–400 px）             | 30 px  |

## 快捷按钮行为

**设置 → 通用 → 快捷按钮行为** 中可配置：

* **面板展开时隐藏快捷按钮组** — 面板展开后自动隐藏浮动按钮组，面板关闭后自动恢复。

## 下一步

<CardGroup cols={2}>
  <Card title="智能大纲" icon="list-tree" href="/docs/features/outline">
    在长对话中快速导航
  </Card>

  <Card title="会话管理" icon="folder-open" href="/docs/features/conversations">
    整理你的聊天记录
  </Card>

  <Card title="提示词库" icon="wand-magic-sparkles" href="/docs/features/prompts">
    保存和复用常用提示词
  </Card>

  <Card title="快捷键" icon="keyboard" href="/docs/customization/shortcuts">
    完整快捷键列表
  </Card>
</CardGroup>