# devnote

**Repository Path**: custom_coming/devnote

## Basic Information

- **Project Name**: devnote
- **Description**: DevNote — 开发者经验卡片管理工具，随手记录踩坑与经验，快速沉淀个人知识库。Chrome 浏览器插件，支持 BugFix / Command / Guide 三种卡片类型，瀑布流展示，深色主题，卡片分享导入，GitHub Gist 云备份。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-06-06
- **Last Updated**: 2026-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <h1 align="center">📝 DevNote</h1>
  <p align="center">开发者经验卡片管理工具 — Chrome 浏览器插件</p>
  <p align="center">
    <img src="https://img.shields.io/badge/Chrome-Extension-green?logo=googlechrome" alt="Chrome Extension">
    <img src="https://img.shields.io/badge/Manifest-V3-blue" alt="Manifest V3">
    <img src="https://img.shields.io/badge/Vue-3-42b883?logo=vue.js" alt="Vue 3">
    <img src="https://img.shields.io/badge/TypeScript-5.x-3178c6?logo=typescript" alt="TypeScript">
    <img src="https://img.shields.io/badge/Vite-6.x-646cff?logo=vite" alt="Vite">
    <img src="https://img.shields.io/badge/TailwindCSS-4.x-06b6d4?logo=tailwindcss" alt="Tailwind CSS">
  </p>
</p>

---

## ✨ 功能特性

### 三种经验卡片类型

| 类型 | 图标 | 适用场景 | 包含字段 |
|------|------|----------|----------|
| **BugFix** | 🐛 | 记录踩过的坑及解决方案 | 问题 / 原因分析 / 解决方案 / 验证方式 |
| **Command** | ⚡ | 常用命令合集 | 使用场景 / 多条命令（支持危险标记） |
| **Guide** | 📋 | 操作步骤流程 | 使用场景 / 多步骤（支持命令+备注+进度勾选） |

### 核心功能

- 🚀 **悬浮窗快捷查看** — 任意网页显示可拖拽悬浮窗，列表展示卡片，点击展开详情
- 📋 **自动捕获来源** — 创建卡片时自动记录当前页面 URL 和标题
- 🏷️ **分类与标签** — 支持自定义分类 + 全局标签去重展示
- 🔍 **多维度筛选** — 关键词搜索 + 类型筛选 + 分类筛选 + 标签筛选
- 📌 **卡片置顶** — 重要卡片一键置顶，优先展示
- 💾 **数据管理** — 设置独立导入导出（分类、标签、设置）
- 📤 **卡片分享** — 勾选卡片导出为共享 JSON，与他人交换经验
- 📥 **多文件批量导入** — 一次选择多个共享卡片文件，自动检测重复
- ☁️ **GitHub Gist 备份** — 支持将卡片备份到 GitHub Gist 云端
- 📄 **Markdown 导出** — 单条卡片可导出为 .md 文件
- 🎯 **双击复制** — 命令、步骤内容双击才复制到剪贴板，避免误触
- ✅ **步骤进度跟踪** — Guide 卡片支持勾选完成状态，可清空进度
- 🌓 **主题切换** — 浅色 / 深色 / 跟随系统三种模式
- 🔒 **样式隔离** — Shadow DOM 注入，不影响宿主页面

---

## 📸 功能截图

### 卡片管理
瀑布流布局展示所有经验卡片，支持多维度筛选和批量操作

![卡片列表](screenshots/card-list.png)

### 分类标签
自定义分类颜色，全局标签自动去重

![分类标签](screenshots/categories.png)

### 基础设置
主题切换（浅色/深色/跟随系统）、默认分类、快捷键等

![基础设置](screenshots/settings.png)

### 数据管理
卡片分享导出、批量导入、JSON 备份恢复、Gist 云备份

![数据管理](screenshots/data-management.png)

---

## 📦 安装使用

### 从源码安装

```bash
# 1. 克隆仓库
git clone https://gitee.com/custom_coming/devnote.git
cd devnote

# 2. 安装依赖
npm install

# 3. 构建
npm run build

# 4. 加载到 Chrome
# 打开 chrome://extensions/
# 开启「开发者模式」
# 点击「加载已解压的扩展程序」
# 选择项目中的 dist/ 目录
```

### 开发模式

```bash
# 启动开发服务器（支持 HMR 热更新）
npm run dev

# 加载 dist/ 目录到 Chrome 后，修改代码会自动更新
```

---

## 🎯 使用方式

| 操作 | 说明 |
|------|------|
| 📝 悬浮窗 | 任意网页显示悬浮按钮，点击展开卡片列表，点击卡片展开详情 |
| 🔍 管理面板 | 点击浏览器工具栏图标打开 Popup，进入卡片管理 |
| ➕ 新建卡片 | 管理面板中点击「+ 新建卡片」创建 BugFix / Command / Guide |
| 📋 预设卡片 | 首次安装自动提供 3 张示例卡片，帮助快速上手 |
| ⚙️ 分类标签 | 管理面板左侧菜单进入，管理分类和查看全局标签 |
| 📤 卡片分享 | 勾选卡片后点击「分享」导出为 JSON，与他人交换经验 |
| 📥 导入卡片 | 支持多文件批量导入，自动检测重复卡片 |
| 💾 数据备份 | 管理面板支持 JSON 导出/导入，设置页支持 Gist 云备份 |

---

## 🏗️ 项目结构

```
src/
├── manifest.ts              # Chrome Extension Manifest V3 配置
├── background/index.ts      # 后台服务（消息处理、数据持久化）
├── content/
│   ├── index.ts             # 内容脚本入口（域名过滤、悬浮窗开关）
│   └── widget.ts            # 悬浮窗核心（Shadow DOM 隔离、列表+展开交互）
├── popup/
│   ├── App.vue              # Popup 主页（悬浮窗开关 + 管理面板入口）
│   └── components/
│       ├── NoteCard.vue      # 卡片组件（三种类型渲染、点击复制）
│       └── EditModal.vue    # 编辑弹窗（支持三种卡片类型）
├── options/App.vue          # 管理面板（卡片列表、筛选、新建、分类标签、设置、数据管理）
├── shared/
│   ├── types.ts             # TypeScript 类型定义
│   ├── constants.ts         # 常量定义（内置分类、预设卡片）
│   └── storage.ts           # Storage 服务封装
└── styles/main.css          # 全局样式
```

---

## 🛠️ 技术栈

| 技术 | 用途 |
|------|------|
| [Vue 3](https://vuejs.org/) | 前端框架 |
| [TypeScript](https://www.typescriptlang.org/) | 类型安全 |
| [Vite](https://vitejs.dev/) | 构建工具 |
| [CRXJS](https://crxjs.dev/) | Chrome 扩展开发插件 |
| [Tailwind CSS](https://tailwindcss.com/) | 原子化 CSS |
| [Chrome Extension Manifest V3](https://developer.chrome.com/docs/extensions/mv3/) | 扩展规范 |

---

## ☁️ GitHub Gist 云备份

DevNote 支持将卡片数据备份到 GitHub Gist，实现跨设备同步。

**存储容量参考：**
- Gist 单文件限制：**1MB**（API 方式）
- 平均每张卡片约 **1-2KB**
- 单个 Gist 可存储约 **500-1000 张卡片**
- 对个人日常使用绰绰有余

**配置方式：**
1. 进入管理面板 → 设置 → GitHub Token
2. 输入 [GitHub Personal Access Token](https://github.com/settings/tokens)（需勾选 `gist` 权限）
3. 点击保存后即可使用备份功能

---

## 📂 共享卡片

项目 `shared-cards/` 目录内置多个主题的共享卡片，可直接导入使用：

| 主题 | 文件 | 内容 |
|------|------|------|
| Docker | `docker-commands.json` | 常用运维命令 |
| Vue3 | `vue3-bugfix.json` | 踩坑记录 |
| Chrome 扩展 | `chrome-extension-publish.json` | 发布指南 |
| React | `frontend-react-hooks.json` | Hooks 常用模式 |
| Node.js | `backend-nodejs.json` | 后端开发命令 |
| MySQL | `database-mysql.json` | 运维命令 |
| Redis | `database-redis.json` | 缓存运维命令 |
| Linux | `linux-ops.json` | 运维常用命令 |
| Git | `git-workflow.json` | 工作流命令 |
| Windows | `windows-cmd.json` | 常用命令 |
| Nginx | `nginx-config.json` | 配置模板 |
| Excel | `excel-commands.json` | 常用公式与操作 |
| Windows 日常 | `windows-daily.json` | 日常使用问题与解决 |

---

## 📋 更新日志

### v1.0.6 (2026-06-18)

**优化**
- 🎯 **复制操作改为双击触发** — 单击仅高亮选中，双击才复制到剪贴板，避免误触占用剪贴板
- 🎨 **高亮状态单选模式** — 点击新卡片时自动清除之前卡片的高亮，保持界面整洁

### v1.0.5 (2026-06-17)

**新增功能**
- ✨ **卡片点击高亮反馈** — 点击卡片后整卡高亮（琥珀色），清晰标识当前正在查看的卡片
- ✨ **项级点击高亮** — 点击卡片内的具体项（BugFix 的问题/原因/解决/验证、Command 的命令、Guide 的步骤）时，该项独立高亮（青色），与卡片高亮形成层次对比
- ✨ **高亮状态持久化** — 高亮状态点击后持续保留，不会自动消失，方便长时间参考

**新增共享卡片**
- 📊 Excel 公式与操作命令卡片集
- 🖥️ Windows 日常使用问题与解决方案卡片集

**优化**
- 🎨 高亮颜色采用琥珀色+青色互补方案，视觉对比强烈，深浅色主题均适配
- 🎨 悬浮窗同步支持卡片和项的双层高亮反馈

### v1.0.4 (2026-06-07)

**优化**
- 移除 Popup 面板底部版本号，界面更简洁
- 管理面板关于页面保留版本号显示

### v1.0.3 (2026-06-07)

**新增功能**
- 管理面板新增「关于」页面，展示版本信息和项目链接
- 主题设置支持管理面板和悬浮窗同步切换
- 悬浮窗滚动条适配主题颜色

### v1.0.2 (2026-06-06)

**新增功能**
- 卡片分享导入功能，支持多文件批量导入
- 共享卡片预设（Docker、Vue3、React、MySQL 等）
- GitHub Gist 云备份
- Markdown 单卡导出
- 步骤进度跟踪（Guide 卡片）

## 📄 许可证

[MIT](LICENSE)