Initial commit
This commit is contained in:
jocay
@@ -0,0 +1,8 @@
|
||||
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
|
||||
charset = utf-8
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
end_of_line = lf
|
||||
max_line_length = 100
|
||||
@@ -0,0 +1 @@
|
||||
* text=auto eol=lf
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
.eslintcache
|
||||
|
||||
# Cypress
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Vitest
|
||||
__screenshots__/
|
||||
|
||||
# Vite
|
||||
*.timestamp-*-*.mjs
|
||||
|
||||
test-results/
|
||||
playwright-report/
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["eslint", "typescript", "unicorn", "oxc", "vue", "vitest"],
|
||||
"env": {
|
||||
"browser": true
|
||||
},
|
||||
"categories": {
|
||||
"correctness": "error"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100
|
||||
}
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"vitest.explorer",
|
||||
"ms-playwright.playwright",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"EditorConfig.EditorConfig",
|
||||
"oxc.oxc-vscode",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
# 无界笺 Boundless
|
||||
|
||||
一张可以无限延伸的本地灵感平面。你可以在画布上自由放置文字与图片、连接相关想法，并使用不同空间分开生活中的主题。
|
||||
|
||||
## 已实现
|
||||
|
||||
- 无限画布平移、缩放、小地图和框选
|
||||
- 文字便笺的创建、编辑、移动、缩放、复制和换色
|
||||
- 图片选择、拖入与剪贴板粘贴
|
||||
- 卡片之间的自由连线
|
||||
- 多空间创建和切换
|
||||
- 当前空间搜索
|
||||
- IndexedDB 自动本地保存
|
||||
- JSON 完整备份与恢复
|
||||
- 响应式侧边栏
|
||||
|
||||
## 技术栈
|
||||
|
||||
- Vue 3 + TypeScript 6
|
||||
- Vite 8（Rolldown）
|
||||
- Vue Flow
|
||||
- Pinia + Dexie / IndexedDB
|
||||
- Tailwind CSS 4
|
||||
- Vitest + Playwright
|
||||
|
||||
## 本地运行
|
||||
|
||||
需要 Node.js 22.18+ 或 Node.js 24.12+，推荐使用 Node.js 24 LTS。
|
||||
|
||||
```sh
|
||||
pnpm install
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
浏览器打开终端显示的本地地址即可使用。
|
||||
|
||||
## 检查项目
|
||||
|
||||
```sh
|
||||
pnpm build
|
||||
pnpm test:unit -- --run
|
||||
pnpm exec playwright test --project=chromium
|
||||
pnpm lint
|
||||
```
|
||||
|
||||
所有记录默认只保存在当前浏览器的 IndexedDB 中。请定期使用左下角的“导出备份”保存一份 JSON 文件。
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "@tsconfig/node24/tsconfig.json",
|
||||
"include": ["./**/*"]
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
// See here how to get started:
|
||||
// https://playwright.dev/docs/intro
|
||||
test('opens the canvas and creates a note', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
await expect(page.getByText('无界笺', { exact: true })).toBeVisible()
|
||||
const notesBefore = await page.locator('.note-card').count()
|
||||
await page.getByRole('button', { name: '新便笺' }).click()
|
||||
await expect(page.locator('.note-card')).toHaveCount(notesBefore + 1)
|
||||
})
|
||||
|
||||
test('pastes clipboard text into a new note on the canvas', async ({ page }) => {
|
||||
await page.context().grantPermissions(['clipboard-read', 'clipboard-write'])
|
||||
await page.goto('/')
|
||||
await expect(page.getByText('无界笺', { exact: true })).toBeVisible()
|
||||
const notesBefore = await page.locator('.note-card').count()
|
||||
|
||||
await page.evaluate(() =>
|
||||
navigator.clipboard.writeText('临时灵感\n把复制的文字直接变成一张新便笺。'),
|
||||
)
|
||||
await page.locator('.vue-flow__pane').click({ position: { x: 90, y: 90 } })
|
||||
await page.keyboard.press('Control+V')
|
||||
|
||||
await expect(page.locator('.note-card')).toHaveCount(notesBefore + 1)
|
||||
const pastedCard = page.locator('.note-card').last()
|
||||
await expect(pastedCard.locator('.note-card__title')).toHaveValue('临时灵感')
|
||||
await expect(pastedCard.locator('.note-card__content')).toHaveValue(
|
||||
'临时灵感\n把复制的文字直接变成一张新便笺。',
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,38 @@
|
||||
import { globalIgnores } from 'eslint/config'
|
||||
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
|
||||
import pluginVue from 'eslint-plugin-vue'
|
||||
import pluginPlaywright from 'eslint-plugin-playwright'
|
||||
import pluginVitest from '@vitest/eslint-plugin'
|
||||
import pluginOxlint from 'eslint-plugin-oxlint'
|
||||
import skipFormatting from 'eslint-config-prettier/flat'
|
||||
|
||||
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
|
||||
// import { configureVueProject } from '@vue/eslint-config-typescript'
|
||||
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
|
||||
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
|
||||
|
||||
export default defineConfigWithVueTs(
|
||||
{
|
||||
name: 'app/files-to-lint',
|
||||
files: ['**/*.{vue,ts,mts,tsx}'],
|
||||
},
|
||||
|
||||
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
|
||||
|
||||
...pluginVue.configs['flat/essential'],
|
||||
vueTsConfigs.recommended,
|
||||
|
||||
{
|
||||
...pluginPlaywright.configs['flat/recommended'],
|
||||
files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
|
||||
},
|
||||
|
||||
{
|
||||
...pluginVitest.configs.recommended,
|
||||
files: ['src/**/__tests__/*'],
|
||||
},
|
||||
|
||||
...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
|
||||
|
||||
skipFormatting,
|
||||
)
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="theme-color" content="#f4f3ee">
|
||||
<meta name="description" content="无界笺是一张可以无限延伸的本地灵感平面。">
|
||||
<title>无界笺 · Boundless</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
{
|
||||
"name": "boundless",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"test:unit": "vitest",
|
||||
"test:e2e": "playwright test",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build",
|
||||
"lint": "run-s \"lint:*\"",
|
||||
"lint:oxlint": "oxlint . --fix",
|
||||
"lint:eslint": "eslint . --fix --cache",
|
||||
"format": "prettier --write --experimental-cli src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@lucide/vue": "^1.31.0",
|
||||
"@vue-flow/background": "^1.3.2",
|
||||
"@vue-flow/controls": "^1.1.3",
|
||||
"@vue-flow/core": "^1.48.2",
|
||||
"@vue-flow/minimap": "^1.5.4",
|
||||
"@vue-flow/node-resizer": "^1.5.1",
|
||||
"@vueuse/core": "^14.4.0",
|
||||
"dexie": "^4.4.4",
|
||||
"pinia": "^4.0.2",
|
||||
"vue": "^3.5.40",
|
||||
"vue-router": "^5.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.61.1",
|
||||
"@tailwindcss/vite": "^4.3.3",
|
||||
"@tsconfig/node24": "^24.0.4",
|
||||
"@types/jsdom": "^28.0.3",
|
||||
"@types/node": "^24.13.3",
|
||||
"@vitejs/plugin-vue": "^6.0.8",
|
||||
"@vitest/eslint-plugin": "^1.6.23",
|
||||
"@vue/eslint-config-typescript": "^14.9.0",
|
||||
"@vue/test-utils": "^2.4.11",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"eslint": "^10.7.0",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-oxlint": "~1.73.0",
|
||||
"eslint-plugin-playwright": "^2.10.5",
|
||||
"eslint-plugin-vue": "~10.9.2",
|
||||
"jiti": "^2.7.0",
|
||||
"jsdom": "^29.1.1",
|
||||
"npm-run-all2": "^9.0.2",
|
||||
"oxlint": "~1.74.0",
|
||||
"prettier": "3.9.5",
|
||||
"tailwindcss": "^4.3.3",
|
||||
"typescript": "~6.0.0",
|
||||
"vite": "^8.1.5",
|
||||
"vite-plugin-vue-devtools": "^8.1.5",
|
||||
"vitest": "^4.1.10",
|
||||
"vue-eslint-parser": "^10.4.1",
|
||||
"vue-tsc": "^3.3.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^22.18.0 || >=24.12.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import process from 'node:process'
|
||||
import { defineConfig, devices } from '@playwright/test'
|
||||
|
||||
/**
|
||||
* Read environment variables from file.
|
||||
* https://github.com/motdotla/dotenv
|
||||
*/
|
||||
// require('dotenv').config();
|
||||
|
||||
/**
|
||||
* See https://playwright.dev/docs/test-configuration.
|
||||
*/
|
||||
export default defineConfig({
|
||||
testDir: './e2e',
|
||||
/* Maximum time one test can run for. */
|
||||
timeout: 30 * 1000,
|
||||
expect: {
|
||||
/**
|
||||
* Maximum time expect() should wait for the condition to be met.
|
||||
* For example in `await expect(locator).toHaveText();`
|
||||
*/
|
||||
timeout: 5000,
|
||||
},
|
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||
forbidOnly: !!process.env.CI,
|
||||
/* Retry on CI only */
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
/* Opt out of parallel tests on CI. */
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||
reporter: 'html',
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
|
||||
actionTimeout: 0,
|
||||
/* Base URL to use in actions like `await page.goto('/')`. */
|
||||
baseURL: process.env.CI ? 'http://localhost:4173' : 'http://localhost:5173',
|
||||
|
||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||
trace: 'on-first-retry',
|
||||
|
||||
/* Only on CI systems run the tests headless */
|
||||
headless: !!process.env.CI,
|
||||
},
|
||||
|
||||
/* Configure projects for major browsers */
|
||||
projects: [
|
||||
{
|
||||
name: 'chromium',
|
||||
use: {
|
||||
...devices['Desktop Chrome'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'firefox',
|
||||
use: {
|
||||
...devices['Desktop Firefox'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'webkit',
|
||||
use: {
|
||||
...devices['Desktop Safari'],
|
||||
},
|
||||
},
|
||||
|
||||
/* Test against mobile viewports. */
|
||||
// {
|
||||
// name: 'Mobile Chrome',
|
||||
// use: {
|
||||
// ...devices['Pixel 5'],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Mobile Safari',
|
||||
// use: {
|
||||
// ...devices['iPhone 12'],
|
||||
// },
|
||||
// },
|
||||
|
||||
/* Test against branded browsers. */
|
||||
// {
|
||||
// name: 'Microsoft Edge',
|
||||
// use: {
|
||||
// channel: 'msedge',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Google Chrome',
|
||||
// use: {
|
||||
// channel: 'chrome',
|
||||
// },
|
||||
// },
|
||||
],
|
||||
|
||||
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
|
||||
// outputDir: 'test-results/',
|
||||
|
||||
/* Run your local dev server before starting the tests */
|
||||
webServer: {
|
||||
/**
|
||||
* Use the dev server by default for faster feedback loop.
|
||||
* Use the preview server on CI for more realistic testing.
|
||||
* Playwright will re-use the local server if there is already a dev-server running.
|
||||
*/
|
||||
command: process.env.CI ? 'npm run preview' : 'npm run dev',
|
||||
port: process.env.CI ? 4173 : 5173,
|
||||
reuseExistingServer: !process.env.CI,
|
||||
},
|
||||
})
|
||||
Generated
+4801
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,2 @@
|
||||
allowBuilds:
|
||||
vue-demi: set this to true or false
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<RouterView />
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import App from '../App.vue'
|
||||
|
||||
describe('App', () => {
|
||||
it('renders the active route', async () => {
|
||||
const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes: [{ path: '/', component: { template: '<main>无界笺</main>' } }],
|
||||
})
|
||||
await router.push('/')
|
||||
await router.isReady()
|
||||
const wrapper = mount(App, { global: { plugins: [router] } })
|
||||
expect(wrapper.text()).toContain('无界笺')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,239 @@
|
||||
<script setup lang="ts">
|
||||
import { Download, FileUp, Pencil, Plus, Trash2, X } from '@lucide/vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import BrandMark from '@/components/BrandMark.vue'
|
||||
import { useCanvasStore } from '@/stores/canvas'
|
||||
import type { BackupFile, SpaceRecord } from '@/types/canvas'
|
||||
|
||||
const store = useCanvasStore()
|
||||
const fileInput = ref<HTMLInputElement>()
|
||||
|
||||
// 新建/编辑空间弹窗状态
|
||||
const isModalOpen = ref(false)
|
||||
const modalMode = ref<'create' | 'edit'>('create')
|
||||
const editingSpaceId = ref('')
|
||||
const spaceNameInput = ref('')
|
||||
const selectedEmoji = ref('✦')
|
||||
|
||||
const availableEmojis = ['✦', '◌', '◇', '✺', '◎', '🌿', '💡', '🪐', '☕', '📌', '🎨', '📝']
|
||||
|
||||
function openCreateModal() {
|
||||
modalMode.value = 'create'
|
||||
editingSpaceId.value = ''
|
||||
spaceNameInput.value = ''
|
||||
selectedEmoji.value = availableEmojis[store.spaces.length % availableEmojis.length] ?? '✦'
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
function openEditModal(space: SpaceRecord) {
|
||||
modalMode.value = 'edit'
|
||||
editingSpaceId.value = space.id
|
||||
spaceNameInput.value = space.name
|
||||
selectedEmoji.value = space.emoji
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
async function saveSpace() {
|
||||
const name = spaceNameInput.value.trim()
|
||||
if (!name) return
|
||||
|
||||
if (modalMode.value === 'create') {
|
||||
await store.createSpace(name, selectedEmoji.value)
|
||||
} else if (editingSpaceId.value) {
|
||||
await store.updateSpace(editingSpaceId.value, {
|
||||
name,
|
||||
emoji: selectedEmoji.value,
|
||||
})
|
||||
}
|
||||
|
||||
isModalOpen.value = false
|
||||
}
|
||||
|
||||
async function confirmDeleteSpace() {
|
||||
if (!editingSpaceId.value) return
|
||||
const confirmed = window.confirm('确认删除此空间吗？该空间内的所有便笺与连线将被彻底移除。')
|
||||
if (confirmed) {
|
||||
await store.deleteSpace(editingSpaceId.value)
|
||||
isModalOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function exportData() {
|
||||
const backup = await store.exportBackup()
|
||||
const blob = new Blob([JSON.stringify(backup, null, 2)], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `无界笺备份-${new Date().toISOString().slice(0, 10)}.json`
|
||||
link.click()
|
||||
URL.revokeObjectURL(url)
|
||||
store.showToast('已导出备份文件')
|
||||
}
|
||||
|
||||
async function importData(event: Event) {
|
||||
const input = event.target as HTMLInputElement
|
||||
const file = input.files?.[0]
|
||||
if (!file) return
|
||||
|
||||
try {
|
||||
const backup = JSON.parse(await file.text()) as BackupFile
|
||||
await store.importBackup(backup)
|
||||
} catch (error) {
|
||||
window.alert(error instanceof Error ? error.message : '备份导入失败')
|
||||
} finally {
|
||||
input.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="sidebar" :class="{ 'sidebar--closed': !store.sidebarOpen }">
|
||||
<div class="sidebar__header">
|
||||
<div class="brand-lockup">
|
||||
<BrandMark />
|
||||
<div>
|
||||
<strong>无界笺</strong>
|
||||
<span>BOUNDLESS</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="icon-button sidebar__close"
|
||||
aria-label="收起侧边栏"
|
||||
@click="store.sidebarOpen = false"
|
||||
>
|
||||
<X :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar__section-heading">
|
||||
<span>我的空间</span>
|
||||
<button class="icon-button" aria-label="创建空间" title="创建空间" @click="openCreateModal">
|
||||
<Plus :size="17" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="space-list" aria-label="空间列表">
|
||||
<div
|
||||
v-for="space in store.spaces"
|
||||
:key="space.id"
|
||||
class="space-item-wrapper"
|
||||
:class="{ 'space-item-wrapper--active': store.activeSpaceId === space.id }"
|
||||
>
|
||||
<button
|
||||
class="space-item"
|
||||
:class="{ 'space-item--active': store.activeSpaceId === space.id }"
|
||||
@click="store.openSpace(space.id)"
|
||||
>
|
||||
<span class="space-item__symbol">{{ space.emoji }}</span>
|
||||
<span class="space-item__name">{{ space.name }}</span>
|
||||
<span class="space-item__count">{{ store.cardCounts[space.id] ?? 0 }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="space-item__edit-btn"
|
||||
title="空间设置"
|
||||
aria-label="编辑空间设置"
|
||||
@click.stop="openEditModal(space)"
|
||||
>
|
||||
<Pencil :size="12" />
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar__tip">
|
||||
<span class="sidebar__tip-star">✦</span>
|
||||
<p>不用急着整理。<br />先把念头放在这里。</p>
|
||||
</div>
|
||||
|
||||
<div class="sidebar__footer">
|
||||
<div class="storage-status">
|
||||
<span></span>
|
||||
数据仅保存在此设备
|
||||
</div>
|
||||
<div class="sidebar__actions">
|
||||
<button class="text-button" @click="exportData">
|
||||
<Download :size="15" />
|
||||
导出备份
|
||||
</button>
|
||||
<button class="text-button" @click="fileInput?.click()">
|
||||
<FileUp :size="15" />
|
||||
导入
|
||||
</button>
|
||||
<input
|
||||
ref="fileInput"
|
||||
hidden
|
||||
type="file"
|
||||
accept="application/json,.json"
|
||||
@change="importData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空间创建/编辑对话框 -->
|
||||
<div v-if="isModalOpen" class="modal-overlay" @click="isModalOpen = false">
|
||||
<div class="dialog-card" @click.stop>
|
||||
<header class="dialog-header">
|
||||
<strong>{{ modalMode === 'create' ? '创建新空间' : '空间设置' }}</strong>
|
||||
<button class="icon-button" aria-label="关闭" @click="isModalOpen = false">
|
||||
<X :size="16" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="dialog-body">
|
||||
<label class="dialog-field">
|
||||
<span>空间名称</span>
|
||||
<input
|
||||
v-model="spaceNameInput"
|
||||
class="dialog-input"
|
||||
maxlength="30"
|
||||
placeholder="例如：灵感收纳盒、工作面板…"
|
||||
autofocus
|
||||
@keydown.enter="saveSpace"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="dialog-field">
|
||||
<span>空间图标</span>
|
||||
<div class="emoji-grid">
|
||||
<button
|
||||
v-for="emoji in availableEmojis"
|
||||
:key="emoji"
|
||||
class="emoji-choice-btn"
|
||||
:class="{ active: selectedEmoji === emoji }"
|
||||
type="button"
|
||||
@click="selectedEmoji = emoji"
|
||||
>
|
||||
{{ emoji }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="dialog-footer">
|
||||
<button
|
||||
v-if="modalMode === 'edit'"
|
||||
class="dialog-btn dialog-btn--danger"
|
||||
:disabled="store.spaces.length <= 1"
|
||||
title="删除空间"
|
||||
@click="confirmDeleteSpace"
|
||||
>
|
||||
<Trash2 :size="14" />
|
||||
删除空间
|
||||
</button>
|
||||
<div class="dialog-footer-right">
|
||||
<button class="dialog-btn dialog-btn--secondary" @click="isModalOpen = false">
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
class="dialog-btn dialog-btn--primary"
|
||||
:disabled="!spaceNameInput.trim()"
|
||||
@click="saveSpace"
|
||||
>
|
||||
{{ modalMode === 'create' ? '立即创建' : '保存更改' }}
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<span class="brand-mark" aria-hidden="true">
|
||||
<i></i>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,234 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ArrowDownToLine,
|
||||
ArrowUpToLine,
|
||||
ClipboardCopy,
|
||||
Copy,
|
||||
GripHorizontal,
|
||||
ListTodo,
|
||||
MoreHorizontal,
|
||||
Trash2,
|
||||
ZoomIn,
|
||||
} from '@lucide/vue'
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import { NodeResizer, type OnResizeEnd } from '@vue-flow/node-resizer'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import { computed, ref, useTemplateRef } from 'vue'
|
||||
|
||||
import { useCanvasStore } from '@/stores/canvas'
|
||||
import type { CardColor, CardNodeData } from '@/types/canvas'
|
||||
|
||||
defineOptions({ inheritAttrs: false })
|
||||
|
||||
const props = defineProps<{
|
||||
id: string
|
||||
data: CardNodeData
|
||||
selected?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'preview-image', data: { src: string; title: string }): void
|
||||
}>()
|
||||
|
||||
const store = useCanvasStore()
|
||||
const menuOpen = ref(false)
|
||||
const menuRef = useTemplateRef<HTMLElement>('menuRef')
|
||||
const colors: CardColor[] = ['paper', 'sun', 'mint', 'sky', 'rose']
|
||||
|
||||
onClickOutside(menuRef, () => {
|
||||
menuOpen.value = false
|
||||
})
|
||||
|
||||
const searchMatch = computed(() => {
|
||||
const query = store.searchQuery.trim().toLocaleLowerCase()
|
||||
if (!query) return true
|
||||
return `${props.data.title} ${props.data.content}`.toLocaleLowerCase().includes(query)
|
||||
})
|
||||
|
||||
function patch(patchData: Partial<CardNodeData>) {
|
||||
store.updateNodeData(props.id, patchData)
|
||||
}
|
||||
|
||||
function resize(event: OnResizeEnd) {
|
||||
store.resizeNode(props.id, event.params.width, event.params.height)
|
||||
}
|
||||
|
||||
function duplicate() {
|
||||
store.duplicateNode(props.id)
|
||||
menuOpen.value = false
|
||||
}
|
||||
|
||||
function bringToFront() {
|
||||
store.bringNodeToFront(props.id)
|
||||
menuOpen.value = false
|
||||
}
|
||||
|
||||
function sendToBack() {
|
||||
store.sendNodeToBack(props.id)
|
||||
menuOpen.value = false
|
||||
}
|
||||
|
||||
async function copyText() {
|
||||
const fullText = props.data.title
|
||||
? (props.data.title + '\n\n' + (props.data.content || '')).trim()
|
||||
: props.data.content || ''
|
||||
try {
|
||||
await navigator.clipboard.writeText(fullText)
|
||||
store.showToast('已复制内容到剪贴板')
|
||||
} catch {
|
||||
store.showToast('复制失败，请手动复制')
|
||||
}
|
||||
menuOpen.value = false
|
||||
}
|
||||
|
||||
function insertTodo() {
|
||||
const prefix = props.data.content ? props.data.content + '\n□ ' : '□ '
|
||||
patch({ content: prefix })
|
||||
store.showToast('已插入待办项')
|
||||
menuOpen.value = false
|
||||
}
|
||||
|
||||
function openImagePreview() {
|
||||
if (props.data.kind === 'image' && props.data.imageData) {
|
||||
emit('preview-image', {
|
||||
src: props.data.imageData,
|
||||
title: props.data.title || '图片预览',
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NodeResizer
|
||||
:min-width="240"
|
||||
:min-height="160"
|
||||
:is-visible="selected"
|
||||
color="#1c1e1f"
|
||||
@resize-end="resize"
|
||||
/>
|
||||
|
||||
<article
|
||||
class="note-card"
|
||||
:class="{
|
||||
'note-card--selected': selected,
|
||||
'note-card--muted': !searchMatch,
|
||||
'note-card--image': data.kind === 'image',
|
||||
}"
|
||||
:data-color="data.color"
|
||||
>
|
||||
<header class="note-card__header drag-handle">
|
||||
<GripHorizontal :size="16" aria-hidden="true" />
|
||||
<span>{{ data.kind === 'image' ? '图像' : '便笺' }}</span>
|
||||
<div ref="menuRef" class="note-card__menu-wrap nodrag">
|
||||
<button
|
||||
class="card-icon-button"
|
||||
:class="{ active: menuOpen }"
|
||||
aria-label="卡片操作菜单"
|
||||
title="卡片选项"
|
||||
@click.stop="menuOpen = !menuOpen"
|
||||
>
|
||||
<MoreHorizontal :size="17" />
|
||||
</button>
|
||||
<div v-if="menuOpen" class="card-menu">
|
||||
<button @click="duplicate">
|
||||
<Copy :size="14" />
|
||||
复制一份
|
||||
</button>
|
||||
<button @click="copyText">
|
||||
<ClipboardCopy :size="14" />
|
||||
复制内容
|
||||
</button>
|
||||
<button @click="insertTodo">
|
||||
<ListTodo :size="14" />
|
||||
插入待办框
|
||||
</button>
|
||||
<button @click="bringToFront">
|
||||
<ArrowUpToLine :size="14" />
|
||||
置于顶层
|
||||
</button>
|
||||
<button @click="sendToBack">
|
||||
<ArrowDownToLine :size="14" />
|
||||
置于底层
|
||||
</button>
|
||||
<hr class="card-menu__divider" />
|
||||
<button class="card-menu__danger" @click="store.removeNodes([id])">
|
||||
<Trash2 :size="14" />
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
v-if="data.kind === 'image' && data.imageData"
|
||||
class="note-card__image-wrap nodrag"
|
||||
title="点击查看大图"
|
||||
@click="openImagePreview"
|
||||
>
|
||||
<img :src="data.imageData" :alt="data.title || '记录的图片'" draggable="false" />
|
||||
<div class="note-card__image-overlay">
|
||||
<ZoomIn :size="18" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note-card__body nodrag">
|
||||
<input
|
||||
class="note-card__title"
|
||||
:value="data.title"
|
||||
aria-label="卡片标题"
|
||||
placeholder="未命名想法"
|
||||
maxlength="80"
|
||||
@input="patch({ title: ($event.target as HTMLInputElement).value })"
|
||||
@keydown.stop
|
||||
@keydown.esc="($event.target as HTMLInputElement).blur()"
|
||||
/>
|
||||
<textarea
|
||||
class="note-card__content"
|
||||
:value="data.content"
|
||||
:placeholder="data.kind === 'image' ? '写一句说明…' : '写点什么，或插入待办清单…'"
|
||||
aria-label="卡片内容"
|
||||
spellcheck="false"
|
||||
@input="patch({ content: ($event.target as HTMLTextAreaElement).value })"
|
||||
@keydown.stop
|
||||
@keydown.esc="($event.target as HTMLTextAreaElement).blur()"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<footer class="note-card__footer nodrag">
|
||||
<div class="color-picker" aria-label="卡片颜色">
|
||||
<button
|
||||
v-for="color in colors"
|
||||
:key="color"
|
||||
:class="{ active: data.color === color }"
|
||||
:data-color="color"
|
||||
:title="`设置为 ${color} 色`"
|
||||
:aria-label="`设置为 ${color} 色`"
|
||||
@click="patch({ color })"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="note-card__footer-actions">
|
||||
<button
|
||||
v-if="data.kind !== 'image'"
|
||||
class="card-mini-btn"
|
||||
title="快速添加待办清单"
|
||||
@click="insertTodo"
|
||||
>
|
||||
<ListTodo :size="13" />
|
||||
待办
|
||||
</button>
|
||||
<span>{{
|
||||
new Date(data.updatedAt).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
|
||||
}}</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<Handle id="in" type="target" :position="Position.Left" class="card-handle card-handle--left" />
|
||||
<Handle
|
||||
id="out"
|
||||
type="source"
|
||||
:position="Position.Right"
|
||||
class="card-handle card-handle--right"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
@@ -0,0 +1,728 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AlignCenterHorizontal,
|
||||
AlignCenterVertical,
|
||||
AlignEndHorizontal,
|
||||
AlignEndVertical,
|
||||
AlignHorizontalDistributeCenter,
|
||||
AlignStartHorizontal,
|
||||
AlignStartVertical,
|
||||
AlignVerticalDistributeCenter,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
CircleHelp,
|
||||
Copy,
|
||||
Grid2x2,
|
||||
ImagePlus,
|
||||
Map,
|
||||
Maximize2,
|
||||
Menu,
|
||||
MousePointer,
|
||||
Plus,
|
||||
Redo2,
|
||||
Search,
|
||||
SquareDashed,
|
||||
StickyNote,
|
||||
Trash2,
|
||||
Undo2,
|
||||
X,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
} from '@lucide/vue'
|
||||
import { Background } from '@vue-flow/background'
|
||||
import {
|
||||
ConnectionMode,
|
||||
MarkerType,
|
||||
Panel,
|
||||
VueFlow,
|
||||
useVueFlow,
|
||||
type Connection,
|
||||
type Edge,
|
||||
type Node,
|
||||
} from '@vue-flow/core'
|
||||
import { MiniMap } from '@vue-flow/minimap'
|
||||
import { useDebounceFn, useEventListener } from '@vueuse/core'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed, nextTick, ref, watch } from 'vue'
|
||||
|
||||
import CardNode from '@/components/CardNode.vue'
|
||||
import { useCanvasStore } from '@/stores/canvas'
|
||||
import type { CanvasEdge, CardColor } from '@/types/canvas'
|
||||
|
||||
const store = useCanvasStore()
|
||||
const { nodes, edges } = storeToRefs(store)
|
||||
const fileInput = ref<HTMLInputElement>()
|
||||
const canvasElement = ref<HTMLElement>()
|
||||
const showMiniMap = ref(true)
|
||||
const showShortcuts = ref(false)
|
||||
const previewImage = ref<{ src: string; title: string } | null>(null)
|
||||
const isSpacePressed = ref(false)
|
||||
|
||||
const { screenToFlowCoordinate, fitView, zoomIn, zoomOut, zoomTo, viewport } =
|
||||
useVueFlow('boundless-canvas')
|
||||
|
||||
const currentZoom = computed(() => Math.round((viewport.value?.zoom ?? 1) * 100))
|
||||
|
||||
const saveSoon = useDebounceFn(() => store.persistSnapshot(), 500)
|
||||
watch([nodes, edges], saveSoon, { deep: true })
|
||||
|
||||
function canvasCenter() {
|
||||
const rect = canvasElement.value?.getBoundingClientRect()
|
||||
return screenToFlowCoordinate({
|
||||
x: rect ? rect.left + rect.width / 2 : window.innerWidth / 2,
|
||||
y: rect ? rect.top + rect.height / 2 : window.innerHeight / 2,
|
||||
})
|
||||
}
|
||||
|
||||
function addNoteAtCenter() {
|
||||
const point = canvasCenter()
|
||||
store.addCard('note', { x: point.x - 150, y: point.y - 110 })
|
||||
}
|
||||
|
||||
function addNoteAtEvent(event: MouseEvent) {
|
||||
if (event.detail !== 2) return
|
||||
const point = screenToFlowCoordinate({ x: event.clientX, y: event.clientY })
|
||||
store.addCard('note', { x: point.x - 150, y: point.y - 80 })
|
||||
}
|
||||
|
||||
function readImage(file: File, position = canvasCenter()) {
|
||||
if (!file.type.startsWith('image/')) return
|
||||
if (file.size > 12 * 1024 * 1024) {
|
||||
window.alert('图片请不要超过 12MB')
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
store.addCard(
|
||||
'image',
|
||||
{ x: position.x - 180, y: position.y - 150 },
|
||||
{
|
||||
imageData: String(reader.result),
|
||||
title: file.name.replace(/\.[^.]+$/, ''),
|
||||
color: 'paper',
|
||||
},
|
||||
)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
|
||||
function selectImage(event: Event) {
|
||||
const input = event.target as HTMLInputElement
|
||||
const file = input.files?.[0]
|
||||
if (file) readImage(file)
|
||||
input.value = ''
|
||||
}
|
||||
|
||||
function dropImage(event: DragEvent) {
|
||||
event.preventDefault()
|
||||
const file = [...(event.dataTransfer?.files ?? [])].find((item) => item.type.startsWith('image/'))
|
||||
if (!file) return
|
||||
const position = screenToFlowCoordinate({ x: event.clientX, y: event.clientY })
|
||||
readImage(file, position)
|
||||
}
|
||||
|
||||
function clipboardText(event: ClipboardEvent) {
|
||||
const plainText = event.clipboardData?.getData('text/plain') ?? ''
|
||||
if (plainText.trim()) return plainText
|
||||
|
||||
const html = event.clipboardData?.getData('text/html') ?? ''
|
||||
if (!html) return ''
|
||||
return new DOMParser().parseFromString(html, 'text/html').body.textContent ?? ''
|
||||
}
|
||||
|
||||
function pasteContent(event: ClipboardEvent) {
|
||||
const target = event.target as HTMLElement | null
|
||||
if (target?.matches('input, textarea, [contenteditable="true"]')) return
|
||||
|
||||
const files = [...(event.clipboardData?.files ?? [])]
|
||||
const itemFiles = [...(event.clipboardData?.items ?? [])]
|
||||
.filter((item) => item.kind === 'file')
|
||||
.map((item) => item.getAsFile())
|
||||
.filter((file): file is File => file !== null)
|
||||
const image = [...files, ...itemFiles].find((file) => file.type.startsWith('image/'))
|
||||
|
||||
if (image) {
|
||||
event.preventDefault()
|
||||
readImage(image)
|
||||
return
|
||||
}
|
||||
|
||||
const text = clipboardText(event).replace(/\r\n/g, '\n').trim()
|
||||
if (!text) return
|
||||
|
||||
event.preventDefault()
|
||||
const firstLine =
|
||||
text
|
||||
.split('\n')
|
||||
.find((line) => line.trim())
|
||||
?.trim() ?? ''
|
||||
const isShortSingleLine = !text.includes('\n') && text.length <= 48
|
||||
const title = isShortSingleLine ? '粘贴的内容' : firstLine.slice(0, 48) || '粘贴的内容'
|
||||
const point = canvasCenter()
|
||||
const node = store.addCard(
|
||||
'note',
|
||||
{ x: point.x - 150, y: point.y - 110 },
|
||||
{ title, color: 'paper' },
|
||||
)
|
||||
store.updateNodeData(node.id, { content: text })
|
||||
}
|
||||
|
||||
useEventListener(window, 'paste', pasteContent)
|
||||
|
||||
// 全局快捷键
|
||||
useEventListener(window, 'keydown', (event: KeyboardEvent) => {
|
||||
const target = event.target as HTMLElement | null
|
||||
const isEditingText = target?.matches('input, textarea, [contenteditable="true"]')
|
||||
|
||||
if (event.code === 'Space' && !isEditingText && !isSpacePressed.value) {
|
||||
isSpacePressed.value = true
|
||||
}
|
||||
|
||||
if (isEditingText) return
|
||||
|
||||
// 撤销/重做
|
||||
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
|
||||
event.preventDefault()
|
||||
if (event.shiftKey) {
|
||||
store.redo()
|
||||
} else {
|
||||
store.undo()
|
||||
}
|
||||
} else if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'y') {
|
||||
event.preventDefault()
|
||||
store.redo()
|
||||
}
|
||||
|
||||
// 全选
|
||||
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
|
||||
event.preventDefault()
|
||||
const count = store.selectAllNodes()
|
||||
store.showToast(`已选中全部 ${count} 张便笺`)
|
||||
}
|
||||
|
||||
// 复制选中项
|
||||
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'd') {
|
||||
event.preventDefault()
|
||||
store.duplicateSelectedNodes()
|
||||
}
|
||||
|
||||
// 取消所有选择
|
||||
if (event.key === 'Escape') {
|
||||
store.deselectAll()
|
||||
previewImage.value = null
|
||||
showShortcuts.value = false
|
||||
}
|
||||
|
||||
// 快捷缩放重置
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === '0') {
|
||||
event.preventDefault()
|
||||
resetZoom()
|
||||
}
|
||||
})
|
||||
|
||||
useEventListener(window, 'keyup', (event: KeyboardEvent) => {
|
||||
if (event.code === 'Space') {
|
||||
isSpacePressed.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function connect(connection: Connection) {
|
||||
store.recordHistory()
|
||||
const edge: CanvasEdge = {
|
||||
...connection,
|
||||
id: crypto.randomUUID(),
|
||||
type: 'smoothstep',
|
||||
markerEnd: MarkerType.ArrowClosed,
|
||||
data: { spaceId: store.activeSpaceId },
|
||||
}
|
||||
edges.value = [...edges.value, edge]
|
||||
}
|
||||
|
||||
function deleteNodes(deleted: Node[]) {
|
||||
void store.removeNodes(deleted.map((node) => node.id))
|
||||
}
|
||||
|
||||
function deleteEdges(deleted: Edge[]) {
|
||||
void store.removeEdges(deleted.map((edge) => edge.id))
|
||||
}
|
||||
|
||||
// 搜索轮巡与定位
|
||||
const matchingNodes = computed(() => {
|
||||
const query = store.searchQuery.trim().toLocaleLowerCase()
|
||||
if (!query) return []
|
||||
return nodes.value.filter((node) =>
|
||||
`${node.data.title} ${node.data.content}`.toLocaleLowerCase().includes(query),
|
||||
)
|
||||
})
|
||||
|
||||
const activeMatchIndex = ref(0)
|
||||
watch(
|
||||
() => store.searchQuery,
|
||||
() => {
|
||||
activeMatchIndex.value = 0
|
||||
},
|
||||
)
|
||||
|
||||
async function focusMatch(index: number) {
|
||||
if (matchingNodes.value.length === 0) return
|
||||
const total = matchingNodes.value.length
|
||||
activeMatchIndex.value = (index + total) % total
|
||||
const match = matchingNodes.value[activeMatchIndex.value]
|
||||
|
||||
nodes.value.forEach((node) => (node.selected = node.id === match.id))
|
||||
await nextTick()
|
||||
void fitView({ nodes: [match.id], duration: 350, padding: 0.75 })
|
||||
}
|
||||
|
||||
function nextSearchResult() {
|
||||
void focusMatch(activeMatchIndex.value + 1)
|
||||
}
|
||||
|
||||
function prevSearchResult() {
|
||||
void focusMatch(activeMatchIndex.value - 1)
|
||||
}
|
||||
|
||||
// 缩放控制
|
||||
function resetZoom() {
|
||||
void zoomTo(1, { duration: 300 })
|
||||
store.showToast('已恢复 100% 视图')
|
||||
}
|
||||
|
||||
function fitAll() {
|
||||
void fitView({ padding: 0.25, duration: 350 })
|
||||
store.showToast('已自适应全图')
|
||||
}
|
||||
|
||||
function cycleGrid() {
|
||||
const nextStyle =
|
||||
store.gridStyle === 'dots' ? 'lines' : store.gridStyle === 'lines' ? 'none' : 'dots'
|
||||
store.gridStyle = nextStyle
|
||||
const labels: Record<string, string> = { dots: '点阵背景', lines: '方格背景', none: '纯净空白' }
|
||||
store.showToast(`已切换为${labels[nextStyle]}`)
|
||||
}
|
||||
|
||||
function toggleMode() {
|
||||
store.interactionMode = store.interactionMode === 'pointer' ? 'marquee' : 'pointer'
|
||||
store.showToast(store.interactionMode === 'marquee' ? '框选模式：拖拽框选多张卡片' : '指针模式')
|
||||
}
|
||||
|
||||
const colors: CardColor[] = ['paper', 'sun', 'mint', 'sky', 'rose']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main
|
||||
ref="canvasElement"
|
||||
class="canvas-shell"
|
||||
:class="{
|
||||
'is-space-panning': isSpacePressed,
|
||||
'is-marquee-mode': store.interactionMode === 'marquee',
|
||||
}"
|
||||
@drop="dropImage"
|
||||
@dragover.prevent
|
||||
>
|
||||
<VueFlow
|
||||
id="boundless-canvas"
|
||||
v-model:nodes="nodes"
|
||||
v-model:edges="edges"
|
||||
class="boundless-flow"
|
||||
:min-zoom="0.12"
|
||||
:max-zoom="3"
|
||||
:default-viewport="{ x: 0, y: 0, zoom: 1 }"
|
||||
:connection-mode="ConnectionMode.Loose"
|
||||
:delete-key-code="['Backspace', 'Delete']"
|
||||
:multi-selection-key-code="['Meta', 'Control']"
|
||||
:selection-key-code="['Shift']"
|
||||
:pan-on-drag="store.interactionMode === 'marquee' ? false : true"
|
||||
:zoom-on-double-click="false"
|
||||
fit-view-on-init
|
||||
elevate-nodes-on-select
|
||||
@pane-click="addNoteAtEvent"
|
||||
@connect="connect"
|
||||
@nodes-delete="deleteNodes"
|
||||
@edges-delete="deleteEdges"
|
||||
@node-drag-start="store.recordHistory()"
|
||||
@node-drag-stop="store.persistSnapshot()"
|
||||
>
|
||||
<Background
|
||||
v-if="store.gridStyle !== 'none'"
|
||||
:variant="store.gridStyle === 'lines' ? 'lines' : 'dots'"
|
||||
:pattern-color="store.gridStyle === 'lines' ? '#dcdad2' : '#c9c8c2'"
|
||||
:gap="store.gridStyle === 'lines' ? 28 : 24"
|
||||
:size="1"
|
||||
/>
|
||||
|
||||
<template #node-card="nodeProps">
|
||||
<CardNode v-bind="nodeProps" @preview-image="previewImage = $event" />
|
||||
</template>
|
||||
|
||||
<!-- 移动端侧边栏切换按钮 -->
|
||||
<Panel position="top-left" class="mobile-menu-panel">
|
||||
<button class="floating-icon" aria-label="打开空间列表" @click="store.sidebarOpen = true">
|
||||
<Menu :size="19" />
|
||||
</button>
|
||||
</Panel>
|
||||
|
||||
<!-- 顶栏主要操作工具条 -->
|
||||
<Panel position="top-center" class="canvas-toolbar">
|
||||
<button class="tool-button tool-button--primary" @click="addNoteAtCenter">
|
||||
<Plus :size="18" />
|
||||
新便笺
|
||||
</button>
|
||||
<span class="toolbar-divider"></span>
|
||||
<button class="tool-button" title="添加便笺" aria-label="添加便笺" @click="addNoteAtCenter">
|
||||
<StickyNote :size="17" />
|
||||
</button>
|
||||
<button
|
||||
class="tool-button"
|
||||
title="添加图片"
|
||||
aria-label="添加图片"
|
||||
@click="fileInput?.click()"
|
||||
>
|
||||
<ImagePlus :size="17" />
|
||||
</button>
|
||||
<input ref="fileInput" hidden type="file" accept="image/*" @change="selectImage" />
|
||||
|
||||
<span class="toolbar-divider"></span>
|
||||
|
||||
<!-- 撤销 / 重做 -->
|
||||
<button
|
||||
class="tool-button"
|
||||
:class="{ 'tool-button--disabled': !store.canUndo }"
|
||||
:disabled="!store.canUndo"
|
||||
title="撤销 (Ctrl+Z)"
|
||||
aria-label="撤销"
|
||||
@click="store.undo()"
|
||||
>
|
||||
<Undo2 :size="17" />
|
||||
</button>
|
||||
<button
|
||||
class="tool-button"
|
||||
:class="{ 'tool-button--disabled': !store.canRedo }"
|
||||
:disabled="!store.canRedo"
|
||||
title="重做 (Ctrl+Y)"
|
||||
aria-label="重做"
|
||||
@click="store.redo()"
|
||||
>
|
||||
<Redo2 :size="17" />
|
||||
</button>
|
||||
|
||||
<span class="toolbar-divider"></span>
|
||||
|
||||
<!-- 交互模式切换（指针平移 vs 框选多选） -->
|
||||
<button
|
||||
class="tool-button"
|
||||
:class="{ 'tool-button--active': store.interactionMode === 'marquee' }"
|
||||
:title="store.interactionMode === 'marquee' ? '框选模式启用中' : '切换框选模式 (Shift+拖拽)'"
|
||||
aria-label="框选多选"
|
||||
@click="toggleMode"
|
||||
>
|
||||
<SquareDashed v-if="store.interactionMode === 'marquee'" :size="17" />
|
||||
<MousePointer v-else :size="17" />
|
||||
</button>
|
||||
</Panel>
|
||||
|
||||
<!-- 多选卡片时的浮动对齐与批处理工具栏 -->
|
||||
<div v-if="store.selectedCount >= 2" class="multi-select-bar">
|
||||
<span class="multi-select-badge">已选 {{ store.selectedCount }} 项</span>
|
||||
<span class="toolbar-divider"></span>
|
||||
|
||||
<!-- 对齐按钮 -->
|
||||
<button
|
||||
class="tool-button"
|
||||
title="左对齐"
|
||||
aria-label="左对齐"
|
||||
@click="store.alignSelectedNodes('left')"
|
||||
>
|
||||
<AlignStartHorizontal :size="16" />
|
||||
</button>
|
||||
<button
|
||||
class="tool-button"
|
||||
title="水平居中对齐"
|
||||
aria-label="水平居中对齐"
|
||||
@click="store.alignSelectedNodes('center')"
|
||||
>
|
||||
<AlignCenterHorizontal :size="16" />
|
||||
</button>
|
||||
<button
|
||||
class="tool-button"
|
||||
title="右对齐"
|
||||
aria-label="右对齐"
|
||||
@click="store.alignSelectedNodes('right')"
|
||||
>
|
||||
<AlignEndHorizontal :size="16" />
|
||||
</button>
|
||||
<button
|
||||
class="tool-button"
|
||||
title="顶端对齐"
|
||||
aria-label="顶端对齐"
|
||||
@click="store.alignSelectedNodes('top')"
|
||||
>
|
||||
<AlignStartVertical :size="16" />
|
||||
</button>
|
||||
<button
|
||||
class="tool-button"
|
||||
title="垂直居中对齐"
|
||||
aria-label="垂直居中对齐"
|
||||
@click="store.alignSelectedNodes('middle')"
|
||||
>
|
||||
<AlignCenterVertical :size="16" />
|
||||
</button>
|
||||
<button
|
||||
class="tool-button"
|
||||
title="底端对齐"
|
||||
aria-label="底端对齐"
|
||||
@click="store.alignSelectedNodes('bottom')"
|
||||
>
|
||||
<AlignEndVertical :size="16" />
|
||||
</button>
|
||||
|
||||
<span class="toolbar-divider"></span>
|
||||
|
||||
<!-- 均分间距（3 项及以上） -->
|
||||
<template v-if="store.selectedCount >= 3">
|
||||
<button
|
||||
class="tool-button"
|
||||
title="水平等间距分布"
|
||||
aria-label="水平等间距分布"
|
||||
@click="store.distributeSelectedNodes('horizontal')"
|
||||
>
|
||||
<AlignHorizontalDistributeCenter :size="16" />
|
||||
</button>
|
||||
<button
|
||||
class="tool-button"
|
||||
title="垂直等间距分布"
|
||||
aria-label="垂直等间距分布"
|
||||
@click="store.distributeSelectedNodes('vertical')"
|
||||
>
|
||||
<AlignVerticalDistributeCenter :size="16" />
|
||||
</button>
|
||||
<span class="toolbar-divider"></span>
|
||||
</template>
|
||||
|
||||
<!-- 统一换色 -->
|
||||
<div class="batch-color-picker" aria-label="批量更改颜色">
|
||||
<button
|
||||
v-for="color in colors"
|
||||
:key="color"
|
||||
:data-color="color"
|
||||
:title="`统一设为 ${color} 色`"
|
||||
@click="store.setBatchColor(color)"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<span class="toolbar-divider"></span>
|
||||
|
||||
<!-- 批量复制 -->
|
||||
<button
|
||||
class="tool-button"
|
||||
title="批量复制 (Ctrl+D)"
|
||||
aria-label="批量复制"
|
||||
@click="store.duplicateSelectedNodes()"
|
||||
>
|
||||
<Copy :size="15" />
|
||||
</button>
|
||||
|
||||
<!-- 批量删除 -->
|
||||
<button
|
||||
class="tool-button tool-button--danger"
|
||||
title="批量删除 (Delete)"
|
||||
aria-label="批量删除"
|
||||
@click="store.deleteSelectedNodes()"
|
||||
>
|
||||
<Trash2 :size="15" />
|
||||
</button>
|
||||
|
||||
<!-- 取消选择 -->
|
||||
<button class="tool-button" title="取消全选 (Esc)" aria-label="取消全选" @click="store.deselectAll()">
|
||||
<X :size="15" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 右上角搜索与保存状态 -->
|
||||
<Panel position="top-right" class="canvas-top-right">
|
||||
<label class="search-box">
|
||||
<Search :size="16" />
|
||||
<input
|
||||
v-model="store.searchQuery"
|
||||
placeholder="搜索这片空间"
|
||||
aria-label="搜索当前空间"
|
||||
@keydown.enter="nextSearchResult"
|
||||
/>
|
||||
<span v-if="store.searchQuery && matchingNodes.length > 0" class="search-count">
|
||||
{{ activeMatchIndex + 1 }}/{{ matchingNodes.length }}
|
||||
</span>
|
||||
<div v-if="store.searchQuery && matchingNodes.length > 1" class="search-nav">
|
||||
<button title="上一个结果" aria-label="上一个结果" @click="prevSearchResult">
|
||||
<ChevronUp :size="13" />
|
||||
</button>
|
||||
<button title="下一个结果" aria-label="下一个结果" @click="nextSearchResult">
|
||||
<ChevronDown :size="13" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="store.searchQuery"
|
||||
title="清空搜索"
|
||||
aria-label="清空搜索"
|
||||
@click="store.searchQuery = ''"
|
||||
>
|
||||
<X :size="14" />
|
||||
</button>
|
||||
</label>
|
||||
<span class="save-pill" :class="{ 'save-pill--saving': store.saveState === 'saving' }">
|
||||
<i></i>{{ store.saveState === 'saving' ? '正在保存' : '已保存' }}
|
||||
</span>
|
||||
</Panel>
|
||||
|
||||
<!-- 左下角操作提示与快捷键入口 -->
|
||||
<Panel position="bottom-left" class="canvas-hint-wrap">
|
||||
<div class="canvas-hint" @click="showShortcuts = true">
|
||||
双击添加便笺 · 选中物体改变指针 · Shift框选
|
||||
<button class="hint-help-btn" title="查看键盘快捷键" aria-label="查看快捷键帮助">
|
||||
<CircleHelp :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- 底部空间名称标签 -->
|
||||
<Panel position="bottom-center" class="space-title">
|
||||
<span>{{ store.activeSpace?.emoji }}</span>
|
||||
{{ store.activeSpace?.name }}
|
||||
</Panel>
|
||||
|
||||
<!-- 右下角视口控制器（缩放与背景切换） -->
|
||||
<Panel position="bottom-right" class="canvas-viewport-controls">
|
||||
<div class="viewport-dock">
|
||||
<button class="dock-btn" title="缩小画布" aria-label="缩小画布" @click="zoomOut()">
|
||||
<ZoomOut :size="15" />
|
||||
</button>
|
||||
<button
|
||||
class="dock-btn dock-btn--zoom"
|
||||
title="点击重置缩放为 100%"
|
||||
aria-label="重置缩放为 100%"
|
||||
@click="resetZoom"
|
||||
>
|
||||
{{ currentZoom }}%
|
||||
</button>
|
||||
<button class="dock-btn" title="放大画布" aria-label="放大画布" @click="zoomIn()">
|
||||
<ZoomIn :size="15" />
|
||||
</button>
|
||||
<span class="dock-divider"></span>
|
||||
<button class="dock-btn" title="自适应居中全览" aria-label="自适应居中全览" @click="fitAll">
|
||||
<Maximize2 :size="15" />
|
||||
</button>
|
||||
<button
|
||||
class="dock-btn"
|
||||
:class="{ active: showMiniMap }"
|
||||
title="小地图显隐"
|
||||
aria-label="小地图显隐"
|
||||
@click="showMiniMap = !showMiniMap"
|
||||
>
|
||||
<Map :size="15" />
|
||||
</button>
|
||||
<button class="dock-btn" title="切换背景网格" aria-label="切换背景网格" @click="cycleGrid">
|
||||
<Grid2x2 :size="15" />
|
||||
</button>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- 小地图 -->
|
||||
<MiniMap
|
||||
v-if="showMiniMap"
|
||||
class="boundless-minimap"
|
||||
node-color="#dad7cd"
|
||||
node-stroke-color="#8a877f"
|
||||
mask-color="rgba(244, 243, 238, 0.76)"
|
||||
pannable
|
||||
zoomable
|
||||
/>
|
||||
</VueFlow>
|
||||
|
||||
<!-- 操作提示轻提示 (Toast) -->
|
||||
<Transition name="fade">
|
||||
<div v-if="store.toastMessage" class="toast-pill">
|
||||
{{ store.toastMessage }}
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 图片大图预览浮层 (Lightbox) -->
|
||||
<div v-if="previewImage" class="lightbox-overlay" @click="previewImage = null">
|
||||
<div class="lightbox-card" @click.stop>
|
||||
<header class="lightbox-header">
|
||||
<strong>{{ previewImage.title }}</strong>
|
||||
<button class="icon-button" aria-label="关闭预览" @click="previewImage = null">
|
||||
<X :size="18" />
|
||||
</button>
|
||||
</header>
|
||||
<div class="lightbox-body">
|
||||
<img :src="previewImage.src" :alt="previewImage.title" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷键指南对话框 -->
|
||||
<div v-if="showShortcuts" class="modal-overlay" @click="showShortcuts = false">
|
||||
<div class="shortcuts-card" @click.stop>
|
||||
<header class="shortcuts-header">
|
||||
<div class="shortcuts-title-wrap">
|
||||
<CircleHelp :size="20" />
|
||||
<strong>键盘快捷键指南</strong>
|
||||
</div>
|
||||
<button class="icon-button" aria-label="关闭指南" @click="showShortcuts = false">
|
||||
<X :size="18" />
|
||||
</button>
|
||||
</header>
|
||||
<div class="shortcuts-grid">
|
||||
<div class="shortcut-item">
|
||||
<kbd>双击空白处</kbd>
|
||||
<span>快速添加便笺</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>拖拽 / 粘贴</kbd>
|
||||
<span>拖入或从剪贴板粘贴图片与便笺</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>点击卡片</kbd>
|
||||
<span>选中卡片（此时出现移动抓手与缩放把手）</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Shift + 拖拽</kbd>
|
||||
<span>批量框选卡片</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Ctrl / ⌘ + A</kbd>
|
||||
<span>全选当前空间的所有卡片</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Ctrl / ⌘ + D</kbd>
|
||||
<span>快速复制选中的卡片副本</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Ctrl / ⌘ + Z</kbd>
|
||||
<span>撤销上一步操作</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Ctrl / ⌘ + Y</kbd>
|
||||
<span>重做上一步操作</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Delete / Backspace</kbd>
|
||||
<span>删除选中的卡片或连线</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>空格 + 拖拽</kbd>
|
||||
<span>临时平移画布视角</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Ctrl / ⌘ + 0</kbd>
|
||||
<span>恢复 100% 缩放</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<kbd>Esc</kbd>
|
||||
<span>取消全选 / 退出当前浮层</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
import Dexie, { type EntityTable } from 'dexie'
|
||||
|
||||
import type { CardRecord, EdgeRecord, SpaceRecord } from '@/types/canvas'
|
||||
|
||||
class BoundlessDatabase extends Dexie {
|
||||
spaces!: EntityTable<SpaceRecord, 'id'>
|
||||
cards!: EntityTable<CardRecord, 'id'>
|
||||
edges!: EntityTable<EdgeRecord, 'id'>
|
||||
|
||||
constructor() {
|
||||
super('boundless-notes')
|
||||
|
||||
this.version(1).stores({
|
||||
spaces: 'id, updatedAt',
|
||||
cards: 'id, spaceId, updatedAt',
|
||||
edges: 'id, spaceId, source, target',
|
||||
})
|
||||
|
||||
this.version(2).stores({
|
||||
spaces: 'id, createdAt, updatedAt',
|
||||
cards: 'id, spaceId, updatedAt',
|
||||
edges: 'id, spaceId, source, target',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export const db = new BoundlessDatabase()
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './style.css'
|
||||
|
||||
import '@vue-flow/core/dist/style.css'
|
||||
import '@vue-flow/core/dist/theme-default.css'
|
||||
import '@vue-flow/minimap/dist/style.css'
|
||||
import '@vue-flow/node-resizer/dist/style.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,16 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
import WorkspaceView from '@/views/WorkspaceView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'workspace',
|
||||
component: WorkspaceView,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,654 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
import { db } from '@/db'
|
||||
import type {
|
||||
BackupFile,
|
||||
CanvasEdge,
|
||||
CanvasNode,
|
||||
CardColor,
|
||||
CardKind,
|
||||
CardRecord,
|
||||
EdgeRecord,
|
||||
SpaceRecord,
|
||||
} from '@/types/canvas'
|
||||
|
||||
const ACTIVE_SPACE_KEY = 'boundless-active-space'
|
||||
const DEFAULT_NODE_WIDTH = 300
|
||||
const DEFAULT_NODE_HEIGHT = 220
|
||||
|
||||
interface HistorySnapshot {
|
||||
nodes: CanvasNode[]
|
||||
edges: CanvasEdge[]
|
||||
}
|
||||
|
||||
function nodeToRecord(node: CanvasNode): CardRecord {
|
||||
const style = (node.style ?? {}) as Record<string, string | number>
|
||||
const dimensions = node.dimensions ?? { width: 0, height: 0 }
|
||||
const width = Number.parseFloat(String(style.width ?? dimensions.width ?? DEFAULT_NODE_WIDTH))
|
||||
const height = Number.parseFloat(String(style.height ?? dimensions.height ?? DEFAULT_NODE_HEIGHT))
|
||||
|
||||
return {
|
||||
id: node.id,
|
||||
...node.data,
|
||||
x: node.position.x,
|
||||
y: node.position.y,
|
||||
width: Number.isFinite(width) && width > 0 ? width : DEFAULT_NODE_WIDTH,
|
||||
height: Number.isFinite(height) && height > 0 ? height : DEFAULT_NODE_HEIGHT,
|
||||
}
|
||||
}
|
||||
|
||||
function recordToNode(card: CardRecord): CanvasNode {
|
||||
return {
|
||||
id: card.id,
|
||||
type: 'card',
|
||||
position: { x: card.x, y: card.y },
|
||||
data: {
|
||||
spaceId: card.spaceId,
|
||||
kind: card.kind,
|
||||
title: card.title,
|
||||
content: card.content,
|
||||
imageData: card.imageData,
|
||||
color: card.color,
|
||||
createdAt: card.createdAt,
|
||||
updatedAt: card.updatedAt,
|
||||
},
|
||||
style: {
|
||||
width: `${card.width}px`,
|
||||
height: `${card.height}px`,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function edgeToRecord(edge: CanvasEdge, fallbackSpaceId: string): EdgeRecord {
|
||||
return {
|
||||
id: edge.id,
|
||||
spaceId: edge.data?.spaceId ?? fallbackSpaceId,
|
||||
source: edge.source,
|
||||
target: edge.target,
|
||||
sourceHandle: edge.sourceHandle,
|
||||
targetHandle: edge.targetHandle,
|
||||
}
|
||||
}
|
||||
|
||||
function recordToEdge(edge: EdgeRecord): CanvasEdge {
|
||||
return {
|
||||
id: edge.id,
|
||||
source: edge.source,
|
||||
target: edge.target,
|
||||
sourceHandle: edge.sourceHandle,
|
||||
targetHandle: edge.targetHandle,
|
||||
type: 'smoothstep',
|
||||
data: { spaceId: edge.spaceId },
|
||||
}
|
||||
}
|
||||
|
||||
function cloneCanvasState(nodes: CanvasNode[], edges: CanvasEdge[]): HistorySnapshot {
|
||||
return {
|
||||
nodes: JSON.parse(JSON.stringify(nodes)),
|
||||
edges: JSON.parse(JSON.stringify(edges)),
|
||||
}
|
||||
}
|
||||
|
||||
export const useCanvasStore = defineStore('canvas', {
|
||||
state: () => ({
|
||||
spaces: [] as SpaceRecord[],
|
||||
nodes: [] as CanvasNode[],
|
||||
edges: [] as CanvasEdge[],
|
||||
cardCounts: {} as Record<string, number>,
|
||||
activeSpaceId: '',
|
||||
ready: false,
|
||||
saveState: 'saved' as 'saved' | 'saving',
|
||||
searchQuery: '',
|
||||
sidebarOpen: true,
|
||||
|
||||
// 交互与状态增强
|
||||
historyPast: [] as HistorySnapshot[],
|
||||
historyFuture: [] as HistorySnapshot[],
|
||||
isRestoringHistory: false,
|
||||
interactionMode: 'pointer' as 'pointer' | 'marquee',
|
||||
gridStyle: 'dots' as 'dots' | 'lines' | 'none',
|
||||
toastMessage: '',
|
||||
toastTimeout: null as ReturnType<typeof setTimeout> | null,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
activeSpace(state): SpaceRecord | undefined {
|
||||
return state.spaces.find((space) => space.id === state.activeSpaceId)
|
||||
},
|
||||
canUndo(state): boolean {
|
||||
return state.historyPast.length > 0
|
||||
},
|
||||
canRedo(state): boolean {
|
||||
return state.historyFuture.length > 0
|
||||
},
|
||||
selectedNodes(state): CanvasNode[] {
|
||||
return state.nodes.filter((node) => node.selected)
|
||||
},
|
||||
selectedCount(state): number {
|
||||
return state.nodes.filter((node) => node.selected).length
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
showToast(message: string) {
|
||||
if (this.toastTimeout) {
|
||||
clearTimeout(this.toastTimeout)
|
||||
}
|
||||
this.toastMessage = message
|
||||
this.toastTimeout = setTimeout(() => {
|
||||
this.toastMessage = ''
|
||||
this.toastTimeout = null
|
||||
}, 2200)
|
||||
},
|
||||
|
||||
recordHistory() {
|
||||
if (this.isRestoringHistory) return
|
||||
const snapshot = cloneCanvasState(this.nodes, this.edges)
|
||||
this.historyPast.push(snapshot)
|
||||
if (this.historyPast.length > 35) {
|
||||
this.historyPast.shift()
|
||||
}
|
||||
this.historyFuture = []
|
||||
},
|
||||
|
||||
undo(): boolean {
|
||||
if (this.historyPast.length === 0) return false
|
||||
const previous = this.historyPast.pop()!
|
||||
this.historyFuture.push(cloneCanvasState(this.nodes, this.edges))
|
||||
|
||||
this.isRestoringHistory = true
|
||||
this.nodes = previous.nodes
|
||||
this.edges = previous.edges
|
||||
this.isRestoringHistory = false
|
||||
|
||||
void this.persistSnapshot()
|
||||
this.showToast('已撤销')
|
||||
return true
|
||||
},
|
||||
|
||||
redo(): boolean {
|
||||
if (this.historyFuture.length === 0) return false
|
||||
const next = this.historyFuture.pop()!
|
||||
this.historyPast.push(cloneCanvasState(this.nodes, this.edges))
|
||||
|
||||
this.isRestoringHistory = true
|
||||
this.nodes = next.nodes
|
||||
this.edges = next.edges
|
||||
this.isRestoringHistory = false
|
||||
|
||||
void this.persistSnapshot()
|
||||
this.showToast('已重做')
|
||||
return true
|
||||
},
|
||||
|
||||
async initialize() {
|
||||
let spaces = await db.spaces.orderBy('createdAt').toArray()
|
||||
|
||||
if (spaces.length === 0) {
|
||||
await this.seedStarterSpace()
|
||||
spaces = await db.spaces.orderBy('createdAt').toArray()
|
||||
}
|
||||
|
||||
this.spaces = spaces
|
||||
const preferred = localStorage.getItem(ACTIVE_SPACE_KEY)
|
||||
const initialSpace = spaces.find((space) => space.id === preferred) ?? spaces[0]
|
||||
if (!initialSpace) throw new Error('无法创建初始空间')
|
||||
await this.openSpace(initialSpace.id)
|
||||
await this.refreshCounts()
|
||||
this.ready = true
|
||||
},
|
||||
|
||||
async seedStarterSpace() {
|
||||
const now = Date.now()
|
||||
const spaceId = crypto.randomUUID()
|
||||
const space: SpaceRecord = {
|
||||
id: spaceId,
|
||||
name: '我的宇宙',
|
||||
emoji: '✦',
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
}
|
||||
|
||||
const cards: CardRecord[] = [
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
spaceId,
|
||||
kind: 'note',
|
||||
title: '欢迎来到无界笺',
|
||||
content:
|
||||
'双击空白处，马上记下一件事。\n\n你也可以拖入图片、移动卡片，并用连线把想法串起来。',
|
||||
color: 'paper',
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
x: -180,
|
||||
y: -80,
|
||||
width: 330,
|
||||
height: 240,
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
spaceId,
|
||||
kind: 'note',
|
||||
title: '今天想做的事',
|
||||
content: '□ 收集灵感\n□ 整理一个想法\n□ 留一点时间发呆',
|
||||
color: 'sun',
|
||||
createdAt: now + 1,
|
||||
updatedAt: now + 1,
|
||||
x: 220,
|
||||
y: -140,
|
||||
width: 290,
|
||||
height: 210,
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
spaceId,
|
||||
kind: 'note',
|
||||
title: '一个小提示',
|
||||
content: '鼠标指针只在选中卡片时变为移动抓手。Shift+拖拽可批量框选。卡片右侧圆点拉出连线。',
|
||||
color: 'mint',
|
||||
createdAt: now + 2,
|
||||
updatedAt: now + 2,
|
||||
x: 120,
|
||||
y: 170,
|
||||
width: 300,
|
||||
height: 190,
|
||||
},
|
||||
]
|
||||
|
||||
await db.transaction('rw', db.spaces, db.cards, async () => {
|
||||
await db.spaces.add(space)
|
||||
await db.cards.bulkAdd(cards)
|
||||
})
|
||||
},
|
||||
|
||||
async openSpace(spaceId: string) {
|
||||
if (this.activeSpaceId && this.activeSpaceId !== spaceId) {
|
||||
await this.persistSnapshot()
|
||||
}
|
||||
|
||||
const [cards, edges] = await Promise.all([
|
||||
db.cards.where('spaceId').equals(spaceId).toArray(),
|
||||
db.edges.where('spaceId').equals(spaceId).toArray(),
|
||||
])
|
||||
|
||||
this.activeSpaceId = spaceId
|
||||
this.nodes = cards.map(recordToNode)
|
||||
this.edges = edges.map(recordToEdge)
|
||||
this.searchQuery = ''
|
||||
this.historyPast = []
|
||||
this.historyFuture = []
|
||||
localStorage.setItem(ACTIVE_SPACE_KEY, spaceId)
|
||||
},
|
||||
|
||||
async createSpace(name: string, emoji = '✦') {
|
||||
const cleanName = name.trim().slice(0, 30)
|
||||
if (!cleanName) return
|
||||
|
||||
const now = Date.now()
|
||||
const space: SpaceRecord = {
|
||||
id: crypto.randomUUID(),
|
||||
name: cleanName,
|
||||
emoji,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
}
|
||||
await db.spaces.add(space)
|
||||
this.spaces.push(space)
|
||||
this.cardCounts[space.id] = 0
|
||||
await this.openSpace(space.id)
|
||||
this.showToast(`已创建空间「${cleanName}」`)
|
||||
},
|
||||
|
||||
async updateSpace(spaceId: string, updates: { name?: string; emoji?: string }) {
|
||||
const space = this.spaces.find((s) => s.id === spaceId)
|
||||
if (!space) return
|
||||
if (updates.name !== undefined) {
|
||||
const cleanName = updates.name.trim().slice(0, 30)
|
||||
if (cleanName) space.name = cleanName
|
||||
}
|
||||
if (updates.emoji !== undefined) {
|
||||
space.emoji = updates.emoji
|
||||
}
|
||||
space.updatedAt = Date.now()
|
||||
await db.spaces.put(JSON.parse(JSON.stringify(space)))
|
||||
this.showToast('空间设置已更新')
|
||||
},
|
||||
|
||||
async deleteSpace(spaceId: string): Promise<boolean> {
|
||||
if (this.spaces.length <= 1) {
|
||||
this.showToast('至少保留一个空间')
|
||||
return false
|
||||
}
|
||||
const index = this.spaces.findIndex((s) => s.id === spaceId)
|
||||
if (index === -1) return false
|
||||
|
||||
const deletedSpace = this.spaces[index]
|
||||
await db.transaction('rw', db.spaces, db.cards, db.edges, async () => {
|
||||
await db.spaces.delete(spaceId)
|
||||
await db.cards.where('spaceId').equals(spaceId).delete()
|
||||
await db.edges.where('spaceId').equals(spaceId).delete()
|
||||
})
|
||||
|
||||
this.spaces.splice(index, 1)
|
||||
delete this.cardCounts[spaceId]
|
||||
|
||||
if (this.activeSpaceId === spaceId) {
|
||||
const fallback = this.spaces[Math.max(0, index - 1)] ?? this.spaces[0]
|
||||
if (fallback) {
|
||||
await this.openSpace(fallback.id)
|
||||
}
|
||||
}
|
||||
this.showToast(`已删除空间「${deletedSpace.name}」`)
|
||||
return true
|
||||
},
|
||||
|
||||
addCard(
|
||||
kind: CardKind,
|
||||
position: { x: number; y: number },
|
||||
options: { imageData?: string; title?: string; color?: CardColor } = {},
|
||||
) {
|
||||
this.recordHistory()
|
||||
const now = Date.now()
|
||||
const node: CanvasNode = {
|
||||
id: crypto.randomUUID(),
|
||||
type: 'card',
|
||||
position,
|
||||
selected: true,
|
||||
data: {
|
||||
spaceId: this.activeSpaceId,
|
||||
kind,
|
||||
title: options.title ?? (kind === 'image' ? '图片' : '未命名想法'),
|
||||
content: '',
|
||||
imageData: options.imageData,
|
||||
color: options.color ?? 'paper',
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
},
|
||||
style: {
|
||||
width: kind === 'image' ? '360px' : `${DEFAULT_NODE_WIDTH}px`,
|
||||
height: kind === 'image' ? '300px' : `${DEFAULT_NODE_HEIGHT}px`,
|
||||
},
|
||||
}
|
||||
|
||||
this.nodes.forEach((item) => (item.selected = false))
|
||||
this.nodes.push(node)
|
||||
this.cardCounts[this.activeSpaceId] = (this.cardCounts[this.activeSpaceId] ?? 0) + 1
|
||||
void this.persistSnapshot()
|
||||
return node
|
||||
},
|
||||
|
||||
updateNodeData(id: string, patch: Partial<CanvasNode['data']>) {
|
||||
const node = this.nodes.find((item) => item.id === id)
|
||||
if (!node) return
|
||||
node.data = { ...node.data, ...patch, updatedAt: Date.now() }
|
||||
},
|
||||
|
||||
resizeNode(id: string, width: number, height: number) {
|
||||
const node = this.nodes.find((item) => item.id === id)
|
||||
if (!node) return
|
||||
this.recordHistory()
|
||||
node.style = { ...((node.style ?? {}) as object), width: `${width}px`, height: `${height}px` }
|
||||
},
|
||||
|
||||
duplicateNode(id: string) {
|
||||
const source = this.nodes.find((item) => item.id === id)
|
||||
if (!source) return
|
||||
this.recordHistory()
|
||||
const duplicate = this.addCard(source.data.kind, {
|
||||
x: source.position.x + 36,
|
||||
y: source.position.y + 36,
|
||||
}, {
|
||||
title: `${source.data.title} · 副本`,
|
||||
color: source.data.color,
|
||||
imageData: source.data.imageData,
|
||||
})
|
||||
duplicate.data.content = source.data.content
|
||||
duplicate.style = { ...((source.style ?? {}) as object) }
|
||||
this.showToast('已复制便笺')
|
||||
return duplicate
|
||||
},
|
||||
|
||||
duplicateSelectedNodes(): number {
|
||||
const selected = this.nodes.filter((n) => n.selected)
|
||||
if (selected.length === 0) return 0
|
||||
this.recordHistory()
|
||||
|
||||
const created: CanvasNode[] = []
|
||||
selected.forEach((source) => {
|
||||
const now = Date.now()
|
||||
const node: CanvasNode = {
|
||||
id: crypto.randomUUID(),
|
||||
type: 'card',
|
||||
position: {
|
||||
x: source.position.x + 36,
|
||||
y: source.position.y + 36,
|
||||
},
|
||||
selected: true,
|
||||
data: {
|
||||
...source.data,
|
||||
spaceId: this.activeSpaceId,
|
||||
title: `${source.data.title} · 副本`,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
},
|
||||
style: { ...((source.style ?? {}) as object) },
|
||||
}
|
||||
created.push(node)
|
||||
})
|
||||
|
||||
selected.forEach((n) => (n.selected = false))
|
||||
this.nodes.push(...created)
|
||||
this.cardCounts[this.activeSpaceId] = this.nodes.length
|
||||
void this.persistSnapshot()
|
||||
this.showToast(`已复制 ${created.length} 张卡片`)
|
||||
return created.length
|
||||
},
|
||||
|
||||
bringNodeToFront(id: string) {
|
||||
const index = this.nodes.findIndex((n) => n.id === id)
|
||||
if (index === -1 || index === this.nodes.length - 1) return
|
||||
this.recordHistory()
|
||||
const [node] = this.nodes.splice(index, 1)
|
||||
this.nodes.push(node)
|
||||
void this.persistSnapshot()
|
||||
this.showToast('已置于顶层')
|
||||
},
|
||||
|
||||
sendNodeToBack(id: string) {
|
||||
const index = this.nodes.findIndex((n) => n.id === id)
|
||||
if (index === -1 || index === 0) return
|
||||
this.recordHistory()
|
||||
const [node] = this.nodes.splice(index, 1)
|
||||
this.nodes.unshift(node)
|
||||
void this.persistSnapshot()
|
||||
this.showToast('已置于底层')
|
||||
},
|
||||
|
||||
alignSelectedNodes(alignment: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') {
|
||||
const selected = this.nodes.filter((n) => n.selected)
|
||||
if (selected.length < 2) return
|
||||
|
||||
const getWidth = (node: CanvasNode) => {
|
||||
const style = (node.style ?? {}) as Record<string, string | number>
|
||||
const dimensions = node.dimensions ?? { width: 0, height: 0 }
|
||||
return Number.parseFloat(String(style.width ?? dimensions.width ?? DEFAULT_NODE_WIDTH))
|
||||
}
|
||||
const getHeight = (node: CanvasNode) => {
|
||||
const style = (node.style ?? {}) as Record<string, string | number>
|
||||
const dimensions = node.dimensions ?? { width: 0, height: 0 }
|
||||
return Number.parseFloat(String(style.height ?? dimensions.height ?? DEFAULT_NODE_HEIGHT))
|
||||
}
|
||||
|
||||
this.recordHistory()
|
||||
|
||||
const minX = Math.min(...selected.map((n) => n.position.x))
|
||||
const maxX = Math.max(...selected.map((n) => n.position.x + getWidth(n)))
|
||||
const minY = Math.min(...selected.map((n) => n.position.y))
|
||||
const maxY = Math.max(...selected.map((n) => n.position.y + getHeight(n)))
|
||||
|
||||
const centerX = (minX + maxX) / 2
|
||||
const centerY = (minY + maxY) / 2
|
||||
|
||||
selected.forEach((node) => {
|
||||
const w = getWidth(node)
|
||||
const h = getHeight(node)
|
||||
if (alignment === 'left') node.position.x = minX
|
||||
else if (alignment === 'right') node.position.x = maxX - w
|
||||
else if (alignment === 'center') node.position.x = centerX - w / 2
|
||||
else if (alignment === 'top') node.position.y = minY
|
||||
else if (alignment === 'bottom') node.position.y = maxY - h
|
||||
else if (alignment === 'middle') node.position.y = centerY - h / 2
|
||||
})
|
||||
|
||||
void this.persistSnapshot()
|
||||
this.showToast('已对齐选中的卡片')
|
||||
},
|
||||
|
||||
distributeSelectedNodes(direction: 'horizontal' | 'vertical') {
|
||||
const selected = [...this.nodes.filter((n) => n.selected)]
|
||||
if (selected.length < 3) return
|
||||
|
||||
this.recordHistory()
|
||||
|
||||
if (direction === 'horizontal') {
|
||||
selected.sort((a, b) => a.position.x - b.position.x)
|
||||
const first = selected[0]
|
||||
const last = selected[selected.length - 1]
|
||||
const totalDistance = last.position.x - first.position.x
|
||||
const step = totalDistance / (selected.length - 1)
|
||||
selected.forEach((node, i) => {
|
||||
node.position.x = Math.round(first.position.x + i * step)
|
||||
})
|
||||
} else {
|
||||
selected.sort((a, b) => a.position.y - b.position.y)
|
||||
const first = selected[0]
|
||||
const last = selected[selected.length - 1]
|
||||
const totalDistance = last.position.y - first.position.y
|
||||
const step = totalDistance / (selected.length - 1)
|
||||
selected.forEach((node, i) => {
|
||||
node.position.y = Math.round(first.position.y + i * step)
|
||||
})
|
||||
}
|
||||
|
||||
void this.persistSnapshot()
|
||||
this.showToast('已均分间距')
|
||||
},
|
||||
|
||||
setBatchColor(color: CardColor) {
|
||||
const selected = this.nodes.filter((n) => n.selected)
|
||||
if (selected.length === 0) return
|
||||
this.recordHistory()
|
||||
selected.forEach((node) => {
|
||||
node.data.color = color
|
||||
node.data.updatedAt = Date.now()
|
||||
})
|
||||
void this.persistSnapshot()
|
||||
this.showToast('已更换选中卡片颜色')
|
||||
},
|
||||
|
||||
selectAllNodes(): number {
|
||||
this.nodes.forEach((n) => (n.selected = true))
|
||||
return this.nodes.length
|
||||
},
|
||||
|
||||
deselectAll() {
|
||||
this.nodes.forEach((n) => (n.selected = false))
|
||||
},
|
||||
|
||||
async removeNodes(ids: string[]) {
|
||||
if (ids.length === 0) return
|
||||
this.recordHistory()
|
||||
this.nodes = this.nodes.filter((node) => !ids.includes(node.id))
|
||||
this.edges = this.edges.filter(
|
||||
(edge) => !ids.includes(edge.source) && !ids.includes(edge.target),
|
||||
)
|
||||
await db.transaction('rw', db.cards, db.edges, async () => {
|
||||
await db.cards.bulkDelete(ids)
|
||||
const connected = await db.edges
|
||||
.where('spaceId')
|
||||
.equals(this.activeSpaceId)
|
||||
.filter((edge) => ids.includes(edge.source) || ids.includes(edge.target))
|
||||
.primaryKeys()
|
||||
await db.edges.bulkDelete(connected)
|
||||
})
|
||||
this.cardCounts[this.activeSpaceId] = this.nodes.length
|
||||
this.showToast(ids.length > 1 ? `已删除 ${ids.length} 张卡片` : '已删除便笺')
|
||||
},
|
||||
|
||||
async deleteSelectedNodes(): Promise<number> {
|
||||
const selectedIds = this.nodes.filter((n) => n.selected).map((n) => n.id)
|
||||
if (selectedIds.length === 0) return 0
|
||||
await this.removeNodes(selectedIds)
|
||||
return selectedIds.length
|
||||
},
|
||||
|
||||
async removeEdges(ids: string[]) {
|
||||
if (ids.length === 0) return
|
||||
this.recordHistory()
|
||||
this.edges = this.edges.filter((edge) => !ids.includes(edge.id))
|
||||
await db.edges.bulkDelete(ids)
|
||||
this.showToast('已删除连线')
|
||||
},
|
||||
|
||||
async persistSnapshot() {
|
||||
if (!this.activeSpaceId) return
|
||||
this.saveState = 'saving'
|
||||
const spaceId = this.activeSpaceId
|
||||
const cardRecords = this.nodes.map(nodeToRecord)
|
||||
const edgeRecords = this.edges.map((edge) => edgeToRecord(edge, spaceId))
|
||||
|
||||
await db.transaction('rw', db.cards, db.edges, async () => {
|
||||
const existingCardIds = await db.cards.where('spaceId').equals(spaceId).primaryKeys()
|
||||
const currentCardIds = new Set(cardRecords.map((card) => card.id))
|
||||
await db.cards.bulkDelete(existingCardIds.filter((id) => !currentCardIds.has(id)))
|
||||
if (cardRecords.length) await db.cards.bulkPut(cardRecords)
|
||||
|
||||
const existingEdgeIds = await db.edges.where('spaceId').equals(spaceId).primaryKeys()
|
||||
const currentEdgeIds = new Set(edgeRecords.map((edge) => edge.id))
|
||||
await db.edges.bulkDelete(existingEdgeIds.filter((id) => !currentEdgeIds.has(id)))
|
||||
if (edgeRecords.length) await db.edges.bulkPut(edgeRecords)
|
||||
})
|
||||
|
||||
this.cardCounts[spaceId] = cardRecords.length
|
||||
this.saveState = 'saved'
|
||||
},
|
||||
|
||||
async refreshCounts() {
|
||||
const cards = await db.cards.toArray()
|
||||
this.cardCounts = cards.reduce<Record<string, number>>((counts, card) => {
|
||||
counts[card.spaceId] = (counts[card.spaceId] ?? 0) + 1
|
||||
return counts
|
||||
}, {})
|
||||
},
|
||||
|
||||
async exportBackup(): Promise<BackupFile> {
|
||||
await this.persistSnapshot()
|
||||
const [spaces, cards, edges] = await Promise.all([
|
||||
db.spaces.toArray(),
|
||||
db.cards.toArray(),
|
||||
db.edges.toArray(),
|
||||
])
|
||||
return { version: 1, exportedAt: new Date().toISOString(), spaces, cards, edges }
|
||||
},
|
||||
|
||||
async importBackup(backup: BackupFile) {
|
||||
if (backup.version !== 1 || !Array.isArray(backup.spaces) || !Array.isArray(backup.cards)) {
|
||||
throw new Error('无法识别这个备份文件')
|
||||
}
|
||||
|
||||
await db.transaction('rw', db.spaces, db.cards, db.edges, async () => {
|
||||
await Promise.all([db.spaces.clear(), db.cards.clear(), db.edges.clear()])
|
||||
await db.spaces.bulkAdd(backup.spaces)
|
||||
if (backup.cards.length) await db.cards.bulkAdd(backup.cards)
|
||||
if (backup.edges?.length) await db.edges.bulkAdd(backup.edges)
|
||||
})
|
||||
|
||||
this.spaces = await db.spaces.orderBy('createdAt').toArray()
|
||||
const firstSpace = this.spaces[0]
|
||||
if (!firstSpace) throw new Error('备份中没有可用空间')
|
||||
await this.openSpace(firstSpace.id)
|
||||
await this.refreshCounts()
|
||||
this.showToast('备份导入成功')
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,12 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
+1553
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,67 @@
|
||||
export type CardKind = 'note' | 'image'
|
||||
export type CardColor = 'paper' | 'sun' | 'mint' | 'sky' | 'rose'
|
||||
|
||||
export interface SpaceRecord {
|
||||
id: string
|
||||
name: string
|
||||
emoji: string
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
}
|
||||
|
||||
export interface CardNodeData extends Record<string, unknown> {
|
||||
spaceId: string
|
||||
kind: CardKind
|
||||
title: string
|
||||
content: string
|
||||
imageData?: string
|
||||
color: CardColor
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
}
|
||||
|
||||
export interface CardRecord extends CardNodeData {
|
||||
id: string
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export interface EdgeRecord {
|
||||
id: string
|
||||
spaceId: string
|
||||
source: string
|
||||
target: string
|
||||
sourceHandle?: string | null
|
||||
targetHandle?: string | null
|
||||
}
|
||||
|
||||
export interface CanvasNode {
|
||||
id: string
|
||||
type: 'card'
|
||||
position: { x: number; y: number }
|
||||
data: CardNodeData
|
||||
style?: Record<string, string | number>
|
||||
selected?: boolean
|
||||
dimensions?: { width: number; height: number }
|
||||
}
|
||||
|
||||
export interface CanvasEdge {
|
||||
id: string
|
||||
source: string
|
||||
target: string
|
||||
sourceHandle?: string | null
|
||||
targetHandle?: string | null
|
||||
type?: string
|
||||
markerEnd?: string
|
||||
data: { spaceId: string }
|
||||
}
|
||||
|
||||
export interface BackupFile {
|
||||
version: 1
|
||||
exportedAt: string
|
||||
spaces: SpaceRecord[]
|
||||
cards: CardRecord[]
|
||||
edges: EdgeRecord[]
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { Menu } from '@lucide/vue'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
import AppSidebar from '@/components/AppSidebar.vue'
|
||||
import BrandMark from '@/components/BrandMark.vue'
|
||||
import InfiniteCanvas from '@/components/InfiniteCanvas.vue'
|
||||
import { useCanvasStore } from '@/stores/canvas'
|
||||
|
||||
const store = useCanvasStore()
|
||||
|
||||
onMounted(() => store.initialize())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="store.ready" class="workspace">
|
||||
<AppSidebar />
|
||||
<InfiniteCanvas />
|
||||
</div>
|
||||
<div v-else class="app-loading">
|
||||
<BrandMark />
|
||||
<p>正在展开你的平面…</p>
|
||||
<button class="floating-icon" aria-label="菜单" disabled><Menu :size="18" /></button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
// Extra safety for array and object lookups, but may have false positives.
|
||||
"noUncheckedIndexedAccess": true,
|
||||
|
||||
// Path mapping for cleaner imports.
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
|
||||
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
|
||||
// Specified here to keep it out of the root directory.
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.vitest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
|
||||
{
|
||||
"extends": "@tsconfig/node24/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"playwright.config.*",
|
||||
"eslint.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
// Most tools use transpilation instead of Node.js's native type-stripping.
|
||||
// Bundler mode provides a smoother developer experience.
|
||||
"module": "preserve",
|
||||
"moduleResolution": "bundler",
|
||||
|
||||
// Include Node.js types and avoid accidentally including other `@types/*` packages.
|
||||
"types": ["node"],
|
||||
|
||||
// Disable emitting output during `vue-tsc --build`, which is used for type-checking only.
|
||||
"noEmit": true,
|
||||
|
||||
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
|
||||
// Specified here to keep it out of the root directory.
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "./tsconfig.app.json",
|
||||
|
||||
// Override to include only test files and clear exclusions.
|
||||
// Application code imported in tests is automatically included via module resolution.
|
||||
"include": ["src/**/__tests__/*", "env.d.ts"],
|
||||
"exclude": [],
|
||||
|
||||
"compilerOptions": {
|
||||
// Vitest runs in a different environment than the application code.
|
||||
// Adjust lib and types accordingly.
|
||||
"lib": [],
|
||||
"types": ["node", "jsdom"],
|
||||
|
||||
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
|
||||
// Specified here to keep it out of the root directory.
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
tailwindcss(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,14 @@
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
|
||||
import viteConfig from './vite.config'
|
||||
|
||||
export default mergeConfig(
|
||||
viteConfig,
|
||||
defineConfig({
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
exclude: [...configDefaults.exclude, 'e2e/**'],
|
||||
root: fileURLToPath(new URL('./', import.meta.url)),
|
||||
},
|
||||
}),
|
||||
)
|
||||
Reference in New Issue
Block a user