work/mvp/bookmark-spa
2025-12-17 22:30:44 +08:00
..
.vscode 添加项目文件。 2025-12-17 22:30:44 +08:00
e2e 添加项目文件。 2025-12-17 22:30:44 +08:00
public 添加项目文件。 2025-12-17 22:30:44 +08:00
src 添加项目文件。 2025-12-17 22:30:44 +08:00
.editorconfig 添加项目文件。 2025-12-17 22:30:44 +08:00
.gitattributes 添加项目文件。 2025-12-17 22:30:44 +08:00
.gitignore 添加项目文件。 2025-12-17 22:30:44 +08:00
.prettierrc.json 添加项目文件。 2025-12-17 22:30:44 +08:00
eslint.config.js 添加项目文件。 2025-12-17 22:30:44 +08:00
index.html 添加项目文件。 2025-12-17 22:30:44 +08:00
jsconfig.json 添加项目文件。 2025-12-17 22:30:44 +08:00
package.json 添加项目文件。 2025-12-17 22:30:44 +08:00
playwright.config.js 添加项目文件。 2025-12-17 22:30:44 +08:00
README.md 添加项目文件。 2025-12-17 22:30:44 +08:00
vite.config.js 添加项目文件。 2025-12-17 22:30:44 +08:00
vitest.config.js 添加项目文件。 2025-12-17 22:30:44 +08:00
需求文档-浏览器书签导入功能.md 添加项目文件。 2025-12-17 22:30:44 +08:00

Bookmark SPA

Bookmark SPA is a single-page application for organising and searching personal web links. It provides a global search launcher, bookmark management, JSON import/export, and local persistence via IndexedDB.

Features

  • Global search modal powered by Fuse.js with fuzzy, multi-keyword, and pinyin-initial matching
  • Configurable keyboard shortcut (default Ctrl+K) with inline capture UI
  • Bookmark CRUD UI with Element Plus forms, tag support, and visit tracking
  • Recent activity section and full bookmark library view
  • Local storage via Dexie/IndexedDB plus JSON import/export helpers
  • Responsive glassmorphism layout built with Vue 3, Pinia, and Sass modules

Tech Stack

  • Vue 3 + Vite + Element Plus UI
  • Pinia state management
  • Dexie for IndexedDB access
  • Fuse.js + pinyin-pro for search indexing
  • Playwright & Vitest for automated testing

Getting Started

npm install          # install dependencies
npm run dev          # start Vite dev server
npm run build        # production build
npm run preview      # preview production build

Quality Tooling

npm run lint         # ESLint with autofix
npm run test:unit    # Vitest unit tests
npm run test:e2e     # Playwright end-to-end tests

First-time Playwright users should install browsers with npx playwright install.

Keyboard Shortcuts

  • Ctrl+K (default): open the global search launcher (configurable in the Settings drawer)
  • Esc: close the search modal
  • Arrow keys & Enter: navigate and open search results

Project Structure Highlights

  • src/components/ layout, search, link, and settings components
  • src/stores/ Pinia stores for links and settings
  • src/services/db.js Dexie database schema
  • src/views/HomeView.vue main landing page using AppShell
  • src/composables/useSearchEngine.js search index and ranking logic