# prompt-sidebar

**Repository Path**: iseeyo/prompt-sidebar

## Basic Information

- **Project Name**: prompt-sidebar
- **Description**: PromptSidebar 是一款专为提升输入效率而设计的浏览器扩展插件。它通过优雅的侧边栏界面，帮助用户高效管理和使用提示词模板，支持变量替换、快捷短语等智能功能，让重复输入变得轻松愉快。

- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-11-24
- **Last Updated**: 2025-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PromptSidebar - 智能提示词管理工具

<div align="center">

![PromptSidebar Logo](./public/wxt.svg)

[![Chrome Extension](https://img.shields.io/badge/Chrome-Extension-success.svg)](https://chrome.google.com/webstore)
[![Vue 3](https://img.shields.io/badge/Vue-3.x-brightgreen.svg)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org/)
[![WXT](https://img.shields.io/badge/WXT-Framework-orange.svg)](https://wxt.dev/)
[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

**[English](#english) | [中文](#中文)**

</div>

<a name="中文"></a>
## 🎯 产品简介

PromptSidebar 是一款专为中文用户设计的浏览器扩展插件，帮助您高效管理和使用提示词。通过优雅的侧边栏界面，您可以快速访问常用文本模板，支持变量替换和快捷短语，让重复输入变得轻松愉快。

### ✨ 核心功能

- 🚀 **一键呼出**：快捷键 `Ctrl+Shift+P` 或点击扩展图标
- 📝 **智能管理**：支持添加、删除、修改、搜索提示词
- 🏷️ **分类整理**：灵活的分类系统，支持自定义分类
- 🔍 **快速搜索**：实时搜索，支持关键词和分类筛选
- ⚡ **快捷短语**：输入 `/快捷短语` + 双击 Ctrl 自动替换
- 🎨 **变量支持**：`${变量名}` 占位符，智能弹窗输入
- 💾 **数据安全**：本地存储，支持 JSON 导入导出
- 🌈 **优雅界面**：Ant Design Vue + 丝滑动画效果

## 🚀 快速开始

### 安装扩展

#### 方式一：Edge 网上应用店（推荐）
1. 访问 [Edge 网上应用店](https://microsoftedge.microsoft.com/addons/detail/prompt-sidebar/klchmkcnfokeidpgiadkkncglebeoijp)
2. 搜索 "PromptSidebar"
3. 点击"添加至 Chrome"

#### 方式二：开发者模式安装
1. 下载最新版本：[Releases 页面](https://gitee.com/yossi-lee/prompt-sidebar/releases)
2. 解压下载的文件
3. 打开 Chrome 浏览器，输入 `chrome://extensions/`
4. 开启右上角的"开发者模式"
5. 点击"加载已解压的扩展程序"，选择解压后的文件夹

### 基本使用

#### 呼出侧边栏
- **快捷键**：按下 `Ctrl+Shift+P`（可在设置中自定义）
- **图标点击**：点击浏览器工具栏的 PromptSidebar 图标

#### 使用提示词
1. **复制使用**：单击提示词卡片上的【复制】按钮
2. **直接插入**：双击提示词卡片，内容自动插入当前输入框
3. **快捷短语**：在输入框输入 `/快捷短语`，然后双击 `Ctrl` 键

#### 管理提示词
1. **添加**：点击右上角【新增】按钮
2. **编辑**：点击提示词卡片上的【编辑】按钮
3. **删除**：点击提示词卡片上的【删除】按钮（带确认提示）
4. **搜索**：在搜索框输入关键词
5. **分类**：点击分类标签进行筛选

## 📖 详细使用手册

### 提示词管理

#### 创建提示词
1. 点击侧边栏右上角【新增】按钮
2. 填写以下信息：
   - **标题**：提示词的名称
   - **内容**：提示词的具体内容
   - **分类**：选择合适的分类
   - **快捷短语**：以 `/` 开头，如 `/hello`
3. 如果内容包含 `${变量名}`，系统会自动识别变量
4. 点击【确定】保存

#### 使用变量
在提示词内容中使用 `${变量名}` 格式：
```
你好，我是${name}，来自${company}，很高兴为您服务！
```

当使用包含变量的提示词时，系统会自动弹出变量输入框。

#### 设置快捷短语
1. 在创建或编辑提示词时，设置【快捷短语】字段
2. 格式：以 `/` 开头，后跟字母数字，如 `/intro`、`/sig`
3. 在任意输入框输入快捷短语，双击 `Ctrl` 键自动替换

### 分类管理

#### 默认分类
- 通用：日常使用的提示词
- 工作：工作相关的提示词
- 学习：学习相关的提示词
- 创意：创意写作的提示词

#### 自定义分类
1. 点击侧边栏底部【设置】按钮
2. 在【分类管理】区域输入新分类名称
3. 点击【添加分类】按钮

### 数据管理

#### 导入数据
1. 点击侧边栏右上角【导入】按钮
2. 选择 JSON 格式的数据文件
3. 系统会自动合并导入的数据

#### 导出数据
1. 点击侧边栏右上角【导出】按钮
2. 系统会生成包含所有数据的 JSON 文件
3. 文件包含提示词、分类和设置信息

#### 数据格式
```json
{
  "prompts": [
    {
      "id": "1",
      "title": "自我介绍",
      "content": "你好，我是${name}，来自${company}",
      "category": "general",
      "shortcut": "/intro",
      "variables": ["name", "company"],
      "createdAt": 1234567890,
      "updatedAt": 1234567890
    }
  ],
  "categories": [
    {
      "id": "general",
      "name": "通用",
      "order": 0
    }
  ]
}
```

### 个性化设置

#### 快捷键设置
1. 点击侧边栏底部【设置】按钮
2. 在【快捷键】区域可以查看和修改快捷键
3. 默认快捷键：`Ctrl+Shift+P`

#### 自动替换设置
- **启用**：双击 Ctrl 键自动替换快捷短语
- **禁用**：只显示提示，不自动替换
- **延迟**：双击间隔时间（100-1000毫秒）

## 🛠️ 开发指南

### 技术栈
- **前端框架**：Vue 3.5 + Composition API
- **UI 组件库**：Ant Design Vue 4.x
- **构建工具**：Vite 5.x
- **扩展框架**：WXT 0.20.x
- **编程语言**：TypeScript 5.x
- **包管理器**：pnpm 8.x

### 环境要求
```bash
Node.js >= 18.0.0
pnpm >= 8.0.0
Chrome >= 88（支持 Manifest V3）
```

### 本地开发

#### 1. 克隆项目
```bash
git clone https://gitee.com/yossi-lee/prompt-sidebar.git
cd prompt-sidebar
```

#### 2. 安装依赖
```bash
pnpm install
```

#### 3. 启动开发服务器
```bash
pnpm dev
```

#### 4. 加载扩展
1. 打开 Chrome 浏览器，输入 `chrome://extensions/`
2. 开启"开发者模式"
3. 点击"加载已解压的扩展程序"
4. 选择项目根目录下的 `.output/chrome-mv3` 文件夹

### 项目结构
```
prompt-sidebar/
├── entrypoints/              # 扩展入口文件
│   ├── background.ts         # 后台脚本
│   ├── content.ts            # 内容脚本
│   └── sidepanel/            # 侧边面板
│       ├── App.vue           # 主界面
│       ├── main.ts           # 入口文件
│       └── style.css         # 样式文件
├── utils/                    # 工具函数
│   ├── storage.ts            # 存储管理
│   └── variables.ts          # 变量处理
├── types/                    # 类型定义
├── assets/                   # 静态资源
├── public/                   # 公共资源
└── wxt.config.ts             # WXT 配置
```

### 构建和打包

#### 开发构建
```bash
# 开发模式
pnpm dev

# 生产构建
pnpm build

# 打包扩展
pnpm zip
```

#### 多浏览器支持
```bash
# Firefox 开发
pnpm dev:firefox

# Firefox 构建
pnpm build:firefox

# Firefox 打包
pnpm zip:firefox
```

### 代码规范

#### TypeScript 规范
- 使用严格的类型检查
- 接口定义清晰明确
- 避免使用 `any` 类型

#### Vue 3 规范
- 使用 Composition API
- 组件命名采用 PascalCase
- 组合式函数使用 `use` 前缀

#### CSS 规范
- 使用 scoped CSS 避免样式冲突
- 动画使用 CSS3 硬件加速
- 响应式设计，适配不同屏幕

## 🔧 高级功能

### 浏览器兼容性
- ✅ Chrome 88+（Manifest V3）
- ✅ Edge 88+（Chromium 内核）
- ⚠️ Firefox（需要适配 Manifest V2）
- ❌ Safari（暂不支持）

### 性能优化
- **本地存储优化**：使用防抖技术减少存储操作
- **列表渲染优化**：虚拟滚动支持大量数据
- **动画性能**：使用 CSS3 硬件加速
- **内存管理**：及时清理不需要的监听器

### 安全考虑
- **数据安全**：所有数据存储在本地，不上传服务器
- **XSS 防护**：用户输入内容进行转义处理
- **权限最小化**：只申请必要的浏览器权限

## 🐛 常见问题

### Q: 扩展安装后无法使用？
A: 请检查以下几点：
1. 确认 Chrome 版本 >= 88
2. 检查是否开启了开发者模式（开发版）
3. 查看扩展管理页面是否有错误提示

### Q: 快捷键不起作用？
A: 可能的原因：
1. 快捷键与其他扩展冲突
2. 当前页面限制了键盘事件
3. 可以在设置中修改快捷键

### Q: 数据导入失败？
A: 请检查：
1. JSON 文件格式是否正确
2. 数据结构与当前版本兼容
3. 文件编码是否为 UTF-8

### Q: 快捷短语无法替换？
A: 请确认：
1. 输入的快捷短语是否正确（包含 `/`）
2. 是否双击了 Ctrl 键
3. 当前页面是否支持文本插入

## 🤝 贡献指南

### 如何贡献
1. Fork 本项目
2. 创建您的功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交您的更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开一个 Pull Request

### 开发规范
- 遵循项目的代码规范
- 编写清晰的提交信息
- 添加必要的注释和文档
- 确保通过所有测试

## 📄 许可证

本项目基于 AGPL v3 许可证开源 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

- [WXT](https://wxt.dev/) - 优秀的浏览器扩展开发框架
- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
- [Ant Design Vue](https://www.antdv.com/) - 企业级 UI 组件库
- [Vite](https://vitejs.dev/) - 下一代前端构建工具

---

<div align="center">

**[⬆ Back to Top](#中文)**

如果喜欢这个项目，请给个 ⭐️ Star 支持一下！

</div>

<a name="english"></a>
## 🎯 Product Introduction

PromptSidebar is a browser extension designed for Chinese users, helping you efficiently manage and use prompt templates. Through an elegant sidebar interface, you can quickly access commonly used text templates, support variable replacement and shortcut phrases, making repetitive input easy and enjoyable.

### ✨ Core Features

- 🚀 **One-click Access**: Shortcut key `Ctrl+Shift+P` or click extension icon
- 📝 **Smart Management**: Support add, delete, modify, search prompts
- 🏷️ **Category Organization**: Flexible category system with custom categories
- 🔍 **Quick Search**: Real-time search with keyword and category filtering
- ⚡ **Shortcut Phrases**: Type `/shortcut` + double-click Ctrl for auto-replacement
- 🎨 **Variable Support**: `${variable}` placeholders with smart input dialogs
- 💾 **Data Security**: Local storage with JSON import/export support
- 🌈 **Elegant Interface**: Ant Design Vue + smooth animations

### Quick Start

1. Install the extension from Chrome Web Store
2. Press `Ctrl+Shift+P` to open the sidebar
3. Start managing your prompts efficiently!

For detailed documentation, please refer to the Chinese section above.