54 lines
1.8 KiB
Markdown
54 lines
1.8 KiB
Markdown
# 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
|
|
|
|
```sh
|
|
npm install # install dependencies
|
|
npm run dev # start Vite dev server
|
|
npm run build # production build
|
|
npm run preview # preview production build
|
|
```
|
|
|
|
## Quality Tooling
|
|
|
|
```sh
|
|
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
|