基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab

项目概述

本插件是一款替代浏览器默认新标签页的工具型插件，定位为 “一站式效率聚合平台”。通过整合备忘录、代码管理、任务管理、密码存储等高频实用功能，无需切换多个应用，即可在新标签页完成日常信息管理、效率提升操作，同时支持个性化定制（如壁纸、网址入口），适配开发者、办公族、健身爱好者等多类用户需求，助力用户简化操作流程，提升日常效率。

技术栈

• Vue 3: 使用 Composition API 进行组件开发
• Dexie.js: IndexedDB 的封装库，IndexedDB 支持 GB 级本地存储，相比 localStorage 的 5MB 限制更适配，所有数据存放到浏览器当中，使用时注意不要清空浏览器缓存。所有数据（含密码、代码片段）仅存储在用户本地浏览器的 IndexedDB 中，不进行任何云端上传，避免服务器泄露风险
• Element Plus: UI 组件库，提供表格、表单、对话框等组件
• Lucide Vue Next: 图标库
• 开发环境：VScode

核心文件结构

功能模块如下：

一、任务管理中心（ToDoList）

• 功能定位：规划日常任务，跟踪完成进度，避免遗漏重要事项

• 核心功能：

  任务创建：支持添加新任务，包括标题、描述、状态和截止日期
  任务编辑：可修改现有任务的所有属性
  任务删除：支持删除任务并提供确认机制
  状态管理：任务状态可在 "待办"、"办理中" 和 "办理完成" 之间切换
  任务筛选：按任务状态分类查看（全部、待办、办理中、办理完成）
  

• 界面截图：
  
  

二、备忘录

• 功能定位：满足文本记录、信息整理需求，支持长期内容存储与快速检索

• 核心功能：

  	创建备忘录：支持新建空白备忘录，自动分配随机背景颜色编辑功能：实时编辑备忘录的标题和内容，自动保存更新删除功能：支持删除备忘录，删除后自动切换到下一个可用备忘录颜色标记：每个备忘录可切换多种背景颜色，便于分类管理搜索过滤：通过关键词搜索备忘录的标题和内容，快速定位所需信息时间记录：自动记录备忘录的创建和最后更新时间，便于追踪
  

• 界面截图：
  

三、代码管理中心

• 功能定位：为开发者提供代码片段存储、复用工具，减少重复编码工作量

• 核心功能：

  	组件上传：支持上传各类前端组件代码文件，包含详细的组件信息录入组件存储：通过componentDB本地数据库管理组件数据，支持增删改查操作组件检索：提供关键词搜索和分类筛选，快速定位所需组件组件查看：展示组件详情，包括预览图、描述信息和代码内容组件操作：支持组件的编辑更新、删除和代码复制功能
  

• 界面截图：
  
  

四、运动健康

• 功能定位：记录体重变化，通过数据可视化助力健康管理

• 核心功能：

  	记录展示：以表格形式展示所有饮食运动记录，包含日期、餐食、运动情况、体重和备注等信息新增记录：通过表单添加新的每日记录，包括：日期和星期选择早中晚三餐饮食内容（运动记录、体重数据、备注信息）编辑记录：修改已存在的记录信息删除记录：移除不需要的记录搜索功能：通过关键词快速查找相关记录体重统计：单独的模态框展示体重相关统计数据多图表展示：支持三种图表类型（线性图、面积图、平滑曲线）展示体重变化关键指标展示：当前体重、减重成果、减重比例等核心数据进度追踪：直观展示减重目标的完成进度
  

• 界面截图：

五、便签

• 功能定位：临时信息快速记录，适配 “碎片化记录” 场景（如临时待办、灵感、联系方式）

• 核心功能：

  	轻量化编辑：无需跳转页面，在主页即可快速输入文本，支持换行个性化标识：支持自定义便签颜色（如黄色、蓝色、绿色），按颜色区分用途（如黄色记待办、蓝色记联系方式）拖拽排序：可在界面中随意拖拽，刷新/新建标签页后位置内容均无变化删除变迁：支持清空已完成便签，保持界面整洁
  

• 界面截图：
  

六、壁纸中心

• 功能定位：自定义新标签页视觉风格，提供多样化壁纸选择

• 核心功能：

  	记忆功能：切换浏览器或重启后，自动保留上次设置的壁纸，无需重新选择
  

• 界面截图：
  
  

七、自定义网址入口

• 功能定位：聚合高频访问网站，实现 “一键直达”，减少网址输入操作

• 核心功能：

  	自由添加：输入网站名称、网址，选择默认图标或上传自定义图标等快捷访问：点击入口图标直接跳转至对应网站，无需在地址栏输入网址编辑调整：支持修改入口名称 / 网址 / 图标等信息
  

• 界面截图：
  

八、密码库

• 功能定位：这是一个基于 Vue 3 开发的功能完整的密码库模态框组件，具备密码验证、管理（增删改查）、生成及复制等功能，采用现代 UI 设计与流畅交互动效，提供安全便捷的密码存储解决方案。

• 核心功能：

  	打开模态框时加载保存的密码数据验证密码通过后显示密码管理界面新增 / 编辑 / 删除密码时同步更新本地数据库和界面状态锁定或关闭模态框时重置当前编辑状态
  

• 界面截图：
  
  

九、功能模块：未来功能规划

写在最后，这个项目是我工作中常用实用小工具的集合。前阵子减肥时，发现减肥折线图能带来不少动力，便自己开发了个减肥管理的小 demo；这些小工具的诞生都源于实际需求和灵感。项目最初是为了练习 Vue3 技术，顺便研究 IndexedDB，后来慢慢发展成了一个自己日常能用得上的小工具合集。现在这个小工具集合里，已经慢慢攒了不少实用功能：除了最初的减肥管理，还加了密码管理器来记各种账号（毕竟总忘密码太头疼），做了个简单的待办清单帮自己梳理工作优先级，甚至搭了个本地的笔记工具，随手记点灵感和碎片想法。用起来才发现，这些自己写的工具特别 “合身”—— 完全按自己的使用习惯设计，没有多余功能，打开就能用。技术上也确实没白练，Vue3 的组合式 API 用得越来越顺，IndexedDB 的本地存储方案也摸透了，现在连组件封装和状态管理都有了自己的心得。往后打算继续慢慢加功能，比如想做个简单的时间追踪器，看看每天时间都花在哪儿了；再整个本地书签管理，把常用网站按自己的逻辑归类。反正也不急，想到什么实用的点子，就趁着兴趣慢慢迭代，既是练手，也是给自己攒个顺手的 “工具箱”，挺有意思的。