让 AI 对话如文档般可阅读、导航、复用
告别无限滚动带来的信息迷航
用实时大纲厘清脉络，
用会话文件夹构筑体系，
用 Prompt 词库沉淀经验，
让那些闪光的思考在秩序中自由流动
👇 Demo: 从“无限滚动的聊天记录”，到“可导航的 AI 文档”
它让 AI 对话第一次成为可组织的工作流
📣
Help promote Ophel / 帮忙宣传 Ophel
功能演示 • 核心功能 • 快速开始 • 技术架构 • 支持项目
🌐 English | 简体中文 | 繁體中文 | 日本語 | 한국어 | Deutsch | Français | Español | Português | Русский
| 大纲 Outline | 会话 Conversations | 功能 Features |
|---|---|---|
outline.mp4 |
conversation.mp4 |
settings.mp4 |
- 🧠 智能大纲 — 自动解析用户问题与 AI 回复，生成可导航的目录结构
- 💬 会话管理 — 文件夹分类、标签、搜索、批量操作
- ⌨️ 提示词库 — 变量支持、Markdown 预览、分类管理、一键填充
- 🎨 主题定制 — 20+ 深色/浅色主题，自定义 CSS
- 🔧 界面优化 — 宽屏模式、页面与用户问题宽度调整、侧边栏布局控制
- 📖 阅读体验 — 滚动锁定、阅读历史恢复、Markdown 渲染优化
- ⚡ 效率工具 — 快捷键、模型锁定、标签页自动命名、完成通知
- 🎭 Claude 增强 — Session Key 管理、多账号切换
- 🔒 隐私优先 — 本地存储、WebDAV 同步、无数据收集
Tip
推荐使用浏览器扩展（Extension）版本，功能更全、体验更佳、兼容性更好，油猴脚本版本功能受限。
- 从 Releases 下载并解压安装包
- 打开浏览器扩展管理页面，开启 开发者模式
- 点击 加载已解压的扩展程序，选择解压的文件夹
- 安装 Tampermonkey 插件
- 从 Releases 下载
.user.js文件 - 拖入浏览器或点击链接即可安装
展开查看构建步骤
环境要求：Node.js >= 20.x, pnpm >= 9.x
git clone https://github.com/urzeye/ophel.git
cd ophel
pnpm install
pnpm dev # 开发模式
pnpm build # Chrome/Edge 生产构建
pnpm build:firefox # Firefox 生产构建
pnpm build:userscript # 油猴脚本生产构建技术栈：Plasmo + React + TypeScript + Zustand
📐 架构图（点击展开）
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#6366f1', 'primaryTextColor': '#fff', 'primaryBorderColor': '#4f46e5', 'lineColor': '#94a3b8', 'secondaryColor': '#f1f5f9', 'tertiaryColor': '#e2e8f0', 'background': '#ffffff'}}}%%
flowchart TB
subgraph Platforms["🚀 双平台构建"]
direction LR
EXT["🧩 浏览器扩展<br/><small>Plasmo + Manifest V3</small>"]
US["🛢️ 油猴脚本<br/><small>Vite + vite-plugin-monkey</small>"]
end
subgraph Entry["📦 入口层"]
direction LR
CE["Content Script<br/><small>ui-entry.tsx</small>"]
BG["Background<br/><small>background.ts</small>"]
OPT["Options Page<br/><small>tabs/options.tsx</small>"]
USE["Userscript Entry<br/><small>platform/userscript/entry.tsx</small>"]
end
subgraph Adapters["🔌 站点适配器"]
direction LR
GEM["Gemini"]
GPT["ChatGPT"]
CLA["Claude"]
GRK["Grok"]
AIS["AI Studio"]
GEE["Gemini<br/>Enterprise"]
end
subgraph Core["⚙️ 核心模块"]
direction TB
TM["🎨 Theme Manager<br/><small>主题切换 · View Transitions</small>"]
OM["📑 Outline Manager<br/><small>大纲生成 · 导航定位</small>"]
RH["📖 Reading History<br/><small>阅读位置恢复</small>"]
ML["🔒 Model Lock<br/><small>模型锁定</small>"]
NM["📡 Network Monitor<br/><small>请求拦截 · 状态检测</small>"]
end
subgraph State["💾 状态管理"]
direction LR
ZS["Zustand Stores<br/><small>settings · prompts · conversations</small>"]
CS["Chrome Storage<br/><small>local · sync</small>"]
GM["GM_* Storage<br/><small>油猴 API</small>"]
end
subgraph UI["🎯 UI 组件"]
direction TB
APP["App.tsx"]
MP["MainPanel<br/><small>侧边面板</small>"]
SM["SettingsModal<br/><small>设置弹窗</small>"]
TABS["Tabs<br/><small>大纲 · 会话 · 提示词</small>"]
end
subgraph CSS["🎨 样式系统"]
direction LR
SD["Shadow DOM<br/><small>样式隔离</small>"]
TV["CSS Variables<br/><small>主题变量</small>"]
TH["Theme Presets<br/><small>20+ 预设主题</small>"]
end
%% 连接关系
EXT --> CE & BG & OPT
US --> USE
CE --> Adapters
USE --> Adapters
Adapters --> Core
Core --> State
CE --> UI
USE --> UI
UI --> CSS
ZS <--> CS
ZS <-.-> GM
%% 样式
classDef platform fill:#818cf8,stroke:#6366f1,color:#fff
classDef entry fill:#34d399,stroke:#10b981,color:#fff
classDef adapter fill:#fbbf24,stroke:#f59e0b,color:#1f2937
classDef core fill:#60a5fa,stroke:#3b82f6,color:#fff
classDef state fill:#f472b6,stroke:#ec4899,color:#fff
classDef ui fill:#a78bfa,stroke:#8b5cf6,color:#fff
classDef css fill:#fb923c,stroke:#f97316,color:#fff
class EXT,US platform
class CE,BG,OPT,USE entry
class GEM,GPT,CLA,GRK,AIS,GEE adapter
class TM,OM,RH,ML,NM core
class ZS,CS,GM state
class APP,MP,SM,TABS ui
class SD,TV,TH css
如有问题或建议，欢迎在 GitHub Issues 反馈。
"一个人可以走得很快，但一群人可以走得更远。"
如果这款工具对你的工作/学习流程带来提升，欢迎以 Star、Sponsor 的方式支持我们，让 Ophel 变得更好。
Made with ❤️ by urzeye
本项目采用 CC BY-NC-SA 4.0 协议。详情请参阅 LICENSE。
⚠️ 禁止商业打包、倒卖或未授权集成。 商业授权请联系：igodu.love@gmail.com