feat(frontend): settings window, i18n, admin UI, books, tasks, calendar, timer
- Settings window with tabs: profile (name, email, avatar, password), appearance (light/dark/system), language (de/en/zh), background (gradient presets, custom URL, blur toggle); persisted server-side - i18n dictionaries (de/en/zh) applied across nav, sidebar, tasks, calendar, time tracking, admin, invites and comments - Greeting header with time-of-day message, live clock and date; cooler theme, cards, kanban, calendar grid and data-table styling - Shared sidebar: nav, collapsible books with per-book pages, top-level pages, search; user chip opens settings - Tasks kanban with priorities, overdue flags and book/page links; calendar month view fed by task deadlines; time view with entries, durations and totals; top-right live timer with optional book link - User discovery autocomplete in the invite card; editor gains tables and checklists; standalone theme buttons removed
This commit is contained in:
@@ -12,8 +12,16 @@ light/dark mode. Self-hostable via Node.js or Docker Compose.
|
||||
- **Auth** — Register / login with JWT (access token), bcrypt password hashing.
|
||||
- **Workspaces** — Create workspaces, invite members by email (`owner` / `admin` /
|
||||
`member` / `viewer`), change roles, remove members.
|
||||
- **Pages** — Nested pages (`parent_id`), icon + cover, ordering, TipTap rich-text
|
||||
content stored as JSON + rendered HTML.
|
||||
- **Pages** — Nested pages (`parent_id`) in workspaces or **books**, icon + cover,
|
||||
ordering, TipTap rich-text with **tables + checklists**, stored as JSON + HTML.
|
||||
- **Books** 📚 — Independent containers for pages, collapsible in the sidebar.
|
||||
- **Tasks** ✅ — Kanban (todo/doing/done), priorities, deadlines, links to books/pages.
|
||||
- **Calendar** 🗓️ — Deadlines from tasks appear automatically.
|
||||
- **Time tracking** ⏱️ — Top-right timer, entries linkable to books, history list.
|
||||
- **Settings window** ⚙️ — Profile (name, email, avatar, password), appearance
|
||||
(light/dark/system), language (**Deutsch, English, 中文**), background image + blur.
|
||||
- **Admin dashboard** 🛡️ — Stats, user management (admin flag, delete).
|
||||
- **User discovery** 🔎 — Fuzzy search to find and invite collaborators.
|
||||
- **Real-time collaboration** — Socket.IO rooms per page: live content broadcast,
|
||||
presence (who is viewing), typing indicators.
|
||||
- **Comments** — Threaded comments per page.
|
||||
|
||||
+26
@@ -59,6 +59,32 @@ Content fields: `content_json` (TipTap JSON), `content_html` (rendered HTML).
|
||||
## Users
|
||||
|
||||
- `GET /users/search?email=` — lookup for invites (auth required).
|
||||
- `GET /users/discover?q=` — fuzzy discovery (min 2 chars, max 10 hits, no hashes).
|
||||
- `PATCH /users/me` — profile/appearance (`name, email, avatar, locale, theme, bg_image, bg_blur`).
|
||||
- `PATCH /users/me/password` — `{ currentPassword, newPassword }`.
|
||||
|
||||
## Books
|
||||
|
||||
- `GET /books/by-workspace/:workspaceId`, `POST /books {workspace_id,title?,icon?}`
|
||||
- `PATCH /books/:id`, `DELETE /books/:id` (pages inside cascade).
|
||||
|
||||
## Tasks
|
||||
|
||||
- `GET /tasks/by-workspace/:workspaceId?status=&from=&to=` (calendar range on `due_at`)
|
||||
- `POST /tasks {workspace_id, book_id?, page_id?, title, status?, priority?, due_at?}`
|
||||
- `PATCH /tasks/:id`, `DELETE /tasks/:id`
|
||||
|
||||
## Time tracking
|
||||
|
||||
- `GET /time/by-workspace/:workspaceId` → `{ entries, open }`
|
||||
- `POST /time/start {workspace_id, book_id?, page_id?, description?}` (409 if running)
|
||||
- `POST /time/stop {workspace_id}` → sets `ended_at` + `duration_seconds`
|
||||
- `PATCH /time/:id`, `DELETE /time/:id` (own or admin+)
|
||||
|
||||
## Admin (requires `is_admin`)
|
||||
|
||||
- `GET /admin/overview` → counts + recent users
|
||||
- `GET /admin/users`, `PATCH /admin/users/:id {is_admin}`, `DELETE /admin/users/:id`
|
||||
|
||||
## Health
|
||||
|
||||
|
||||
Generated
+86
@@ -9,6 +9,12 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@tiptap/core": "^2.4.0",
|
||||
"@tiptap/extension-table": "^2.4.0",
|
||||
"@tiptap/extension-table-cell": "^2.4.0",
|
||||
"@tiptap/extension-table-header": "^2.4.0",
|
||||
"@tiptap/extension-table-row": "^2.4.0",
|
||||
"@tiptap/extension-task-item": "^2.4.0",
|
||||
"@tiptap/extension-task-list": "^2.4.0",
|
||||
"@tiptap/pm": "^2.4.0",
|
||||
"@tiptap/starter-kit": "^2.4.0",
|
||||
"@tiptap/vue-3": "^2.4.0",
|
||||
@@ -1128,6 +1134,86 @@
|
||||
"@tiptap/core": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-table": {
|
||||
"version": "2.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.27.3.tgz",
|
||||
"integrity": "sha512-xBDaT/ixkmrHKuCUlJNbzRolxjf0fFkHxybyeqfcGNDbVwOb6pOGZly6mGjBG1TXrx3U37y0jmFpwW6WU1zokA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.7.0",
|
||||
"@tiptap/pm": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-table-cell": {
|
||||
"version": "2.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.27.3.tgz",
|
||||
"integrity": "sha512-f697x9RDiva8EFZvLBxEp6Nx6sY5KRbHdNMhbCnqC1PrkRKNCTOib9ddWpqIERzs3HhmqZWL7XCPzvE/t8C+IQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-table-header": {
|
||||
"version": "2.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.27.3.tgz",
|
||||
"integrity": "sha512-x//GuYJlTzM3GavsDxBRDjGHMY9bbnmglQ0EAPVwQM5QHXpjwKzZN7wvDMM/RwxmxzYWd6Z+Fp7Zk8RYckpzhg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-table-row": {
|
||||
"version": "2.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.27.3.tgz",
|
||||
"integrity": "sha512-0ekXiw6aAESlcrKFmI90ar/j7XJmfdxeJEDeGZuMwOAQs+qq5RAB7ug5WPCZjG0Kqa+Kyxzb1jMw9pSkuTYp+w==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-task-item": {
|
||||
"version": "2.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-task-item/-/extension-task-item-2.27.3.tgz",
|
||||
"integrity": "sha512-7ES+qMoMgjb2iXI8iRzgegMeM1pE4zQAekT/5lQyuTv6oEyZw5s3TUZWeTYCq5TI/MezYGu3X2sV5PQnfBAsdA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.7.0",
|
||||
"@tiptap/pm": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-task-list": {
|
||||
"version": "2.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-task-list/-/extension-task-list-2.27.3.tgz",
|
||||
"integrity": "sha512-T8Y3S95ZzYlh82KGd0H81QOsJZVWweUVps6l7wkiOReNsJxhkb4qW/smNE0TeNhvbU307emiPL0CH5e+eHxjEg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tiptap/extension-text": {
|
||||
"version": "2.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.27.3.tgz",
|
||||
|
||||
@@ -10,6 +10,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@tiptap/core": "^2.4.0",
|
||||
"@tiptap/extension-table": "^2.4.0",
|
||||
"@tiptap/extension-table-cell": "^2.4.0",
|
||||
"@tiptap/extension-table-header": "^2.4.0",
|
||||
"@tiptap/extension-table-row": "^2.4.0",
|
||||
"@tiptap/extension-task-item": "^2.4.0",
|
||||
"@tiptap/extension-task-list": "^2.4.0",
|
||||
"@tiptap/pm": "^2.4.0",
|
||||
"@tiptap/starter-kit": "^2.4.0",
|
||||
"@tiptap/vue-3": "^2.4.0",
|
||||
|
||||
+28
-5
@@ -1,17 +1,40 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useAuthStore } from './stores/auth';
|
||||
import { useThemeStore } from './stores/theme';
|
||||
import ThemeToggle from './components/ThemeToggle.vue';
|
||||
import { useLocaleStore } from './stores/locale';
|
||||
import { useUiStore } from './stores/ui';
|
||||
import SettingsWindow from './components/SettingsWindow.vue';
|
||||
import TimeTrackerButton from './components/TimeTrackerButton.vue';
|
||||
|
||||
const auth = useAuthStore();
|
||||
const theme = useThemeStore();
|
||||
onMounted(() => theme.apply());
|
||||
const locale = useLocaleStore();
|
||||
const ui = useUiStore();
|
||||
|
||||
const bgStyle = computed(() => {
|
||||
const bg = auth.user?.bgImage || '';
|
||||
if (!bg) return {};
|
||||
const style = { backgroundImage: bg.startsWith('http') ? `url("${bg}")` : bg };
|
||||
if (auth.user?.bgBlur !== false) style.filter = 'blur(14px) brightness(0.85)';
|
||||
return style;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
locale.set(locale.locale);
|
||||
theme.apply();
|
||||
auth.applyPrefs();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="position: fixed; top: 12px; right: 12px; z-index: 50">
|
||||
<ThemeToggle />
|
||||
<div v-if="bgStyle.backgroundImage" class="bg-layer" :style="bgStyle"></div>
|
||||
<div v-if="auth.isLoggedIn" class="top-right">
|
||||
<TimeTrackerButton />
|
||||
<button class="ghost icon-btn" @click="ui.openSettings()" title="⚙️">⚙️</button>
|
||||
</div>
|
||||
<router-view />
|
||||
<SettingsWindow />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+214
-60
@@ -1,93 +1,247 @@
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--bg-soft: #f7f7f5;
|
||||
--sidebar: #fbfbfa;
|
||||
--text: #111111;
|
||||
--muted: #6b6b6b;
|
||||
--border: #e6e6e2;
|
||||
--accent: #2383e2;
|
||||
--accent-soft: #e8f3fd;
|
||||
--card: #ffffff;
|
||||
--input: #ffffff;
|
||||
--bg: #f6f4ef;
|
||||
--bg-soft: #efece4;
|
||||
--sidebar: linear-gradient(180deg, #fdfcf9 0%, #f3f0e8 100%);
|
||||
--text: #1c1a15;
|
||||
--muted: #8a8474;
|
||||
--border: #e3ddcf;
|
||||
--accent: #7c5cf0;
|
||||
--accent-2: #00c2a8;
|
||||
--accent-soft: #ece5fd;
|
||||
--card: #fffdf8;
|
||||
--input: #fffdf8;
|
||||
--shadow: 0 6px 24px rgba(80, 60, 140, 0.1);
|
||||
--radius: 14px;
|
||||
}
|
||||
[data-theme='dark'] {
|
||||
--bg: #191919;
|
||||
--bg-soft: #202020;
|
||||
--sidebar: #202020;
|
||||
--text: #e8e8e8;
|
||||
--muted: #9b9b9b;
|
||||
--border: #2e2e2e;
|
||||
--accent: #4fa3e3;
|
||||
--accent-soft: #1e3a52;
|
||||
--card: #202020;
|
||||
--input: #262626;
|
||||
--bg: #14131a;
|
||||
--bg-soft: #1d1c26;
|
||||
--sidebar: linear-gradient(180deg, #1d1c26 0%, #16151d 100%);
|
||||
--text: #f0ede6;
|
||||
--muted: #9a94a8;
|
||||
--border: #2d2b3a;
|
||||
--accent: #a78bfa;
|
||||
--accent-2: #2dd4bf;
|
||||
--accent-soft: #2c2547;
|
||||
--card: #1e1d28;
|
||||
--input: #262534;
|
||||
--shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
|
||||
transition: background 0.25s, color 0.25s;
|
||||
}
|
||||
.bg-layer {
|
||||
position: fixed; inset: -20px; z-index: -1;
|
||||
background-size: cover; background-position: center;
|
||||
}
|
||||
a { color: var(--accent); }
|
||||
h2, h3, h4 { letter-spacing: 0.2px; }
|
||||
button {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
color: #fff; border: none; border-radius: 10px;
|
||||
padding: 8px 14px; cursor: pointer; font-size: 14px; font-weight: 600;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
button.ghost {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
background: transparent; color: var(--text);
|
||||
border: 1px solid var(--border); box-shadow: none;
|
||||
}
|
||||
button.mini { padding: 2px 8px; font-size: 13px; border-radius: 8px; }
|
||||
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.icon-btn { font-size: 18px; padding: 4px 8px; }
|
||||
input, select, textarea {
|
||||
background: var(--input);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
background: var(--input); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: 10px;
|
||||
padding: 8px 10px; font-size: 14px; width: 100%;
|
||||
}
|
||||
input:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; }
|
||||
.layout { display: flex; min-height: 100vh; }
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: var(--sidebar);
|
||||
width: 292px; min-width: 292px; background: var(--sidebar);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px; display: flex; flex-direction: column; gap: 10px;
|
||||
max-height: 100vh; overflow-y: auto; position: sticky; top: 0;
|
||||
}
|
||||
.main { flex: 1; padding: 24px; max-width: 960px; }
|
||||
.main { flex: 1; padding: 28px; max-width: 1060px; }
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
background: var(--card); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
|
||||
}
|
||||
.auth-wrap { max-width: 380px; margin: 10vh auto; }
|
||||
.auth-wrap { max-width: 400px; margin: 10vh auto; }
|
||||
.auth-wrap h1 { margin-bottom: 4px; }
|
||||
.muted { color: var(--muted); font-size: 13px; }
|
||||
.row { display: flex; gap: 8px; align-items: center; }
|
||||
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.tree-item { padding: 4px 8px; border-radius: 6px; cursor: pointer; }
|
||||
.row.wrap { flex-wrap: wrap; }
|
||||
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; }
|
||||
.topbar.wrap { flex-wrap: wrap; }
|
||||
.top-right { position: fixed; top: 12px; right: 12px; z-index: 60; display: flex; gap: 8px; align-items: flex-start; }
|
||||
|
||||
/* Greeting */
|
||||
.greeting {
|
||||
display: flex; justify-content: space-between; align-items: center; gap: 12px;
|
||||
background: linear-gradient(135deg, var(--accent-soft), transparent);
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 16px 20px; margin-bottom: 16px; box-shadow: var(--shadow);
|
||||
}
|
||||
.clock {
|
||||
font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums;
|
||||
background: var(--card); border: 1px solid var(--border);
|
||||
padding: 6px 14px; border-radius: 12px; white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Sidebar bits */
|
||||
.user-chip {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: var(--card); border: 1px solid var(--border);
|
||||
border-radius: 12px; padding: 8px 10px;
|
||||
}
|
||||
.side-nav { display: flex; flex-direction: column; gap: 2px; }
|
||||
.side-nav a {
|
||||
text-decoration: none; color: var(--text); font-weight: 600;
|
||||
padding: 7px 10px; border-radius: 10px;
|
||||
}
|
||||
.side-nav a:hover { background: var(--bg-soft); }
|
||||
.side-nav a.router-link-exact-active { background: var(--accent-soft); }
|
||||
.side-label { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
|
||||
.book { margin-bottom: 2px; }
|
||||
.book-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
|
||||
.book-pages { margin-left: 8px; border-left: 2px solid var(--border); padding-left: 4px; }
|
||||
.side-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; }
|
||||
.tree-item {
|
||||
padding: 5px 8px; border-radius: 8px; cursor: pointer;
|
||||
display: flex; justify-content: space-between; align-items: center; gap: 4px;
|
||||
}
|
||||
.tree-item:hover { background: var(--bg-soft); }
|
||||
.tree-item.active { background: var(--accent-soft); }
|
||||
.presence { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.avatar {
|
||||
width: 26px; height: 26px; border-radius: 50%;
|
||||
background: var(--accent); color: #fff;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 700;
|
||||
.search-results { margin-top: -4px; }
|
||||
.pill {
|
||||
background: var(--accent-soft); border: 1px solid var(--border);
|
||||
border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 700;
|
||||
}
|
||||
.tiptap { min-height: 300px; border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
|
||||
.member-row { padding: 6px 0; border-top: 1px solid var(--border); }
|
||||
.presence { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
|
||||
.avatar {
|
||||
border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
color: #fff; display: inline-flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; overflow: hidden; flex-shrink: 0;
|
||||
}
|
||||
.link { color: var(--accent); cursor: pointer; }
|
||||
|
||||
/* Settings window 🪟 */
|
||||
.settings-overlay {
|
||||
position: fixed; inset: 0; z-index: 100;
|
||||
background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px);
|
||||
display: flex; align-items: center; justify-content: center; padding: 16px;
|
||||
}
|
||||
.settings-window {
|
||||
width: 640px; max-width: 100%; max-height: 88vh; overflow: hidden;
|
||||
background: var(--card); border: 1px solid var(--border);
|
||||
border-radius: 18px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.settings-titlebar {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 12px 16px; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-soft);
|
||||
}
|
||||
.settings-titlebar strong { flex: 1; }
|
||||
.traffic { display: flex; gap: 6px; }
|
||||
.dot { width: 12px; height: 12px; border-radius: 50%; cursor: pointer; }
|
||||
.dot.red { background: #ff5f57; } .dot.yellow { background: #febc2e; } .dot.green { background: #28c840; }
|
||||
.settings-body { display: flex; min-height: 0; }
|
||||
.settings-tabs {
|
||||
display: flex; flex-direction: column; gap: 4px; min-width: 150px;
|
||||
padding: 14px 10px; border-right: 1px solid var(--border);
|
||||
}
|
||||
.settings-tabs button { background: transparent; color: var(--text); box-shadow: none; text-align: left; }
|
||||
.settings-tabs button.active { background: var(--accent-soft); }
|
||||
.settings-content { flex: 1; padding: 18px; overflow-y: auto; }
|
||||
.settings-content label { font-size: 13px; font-weight: 700; }
|
||||
.emoji-row { display: flex; gap: 4px; flex-wrap: wrap; font-size: 22px; }
|
||||
.emoji-row span { cursor: pointer; padding: 2px; border-radius: 8px; }
|
||||
.emoji-row span:hover { background: var(--accent-soft); }
|
||||
.preset-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
|
||||
.preset {
|
||||
height: 52px; border-radius: 10px; cursor: pointer;
|
||||
border: 2px solid var(--border); background: var(--bg-soft);
|
||||
display: flex; align-items: center; justify-content: center; font-size: 20px;
|
||||
}
|
||||
.preset.active { border-color: var(--accent); }
|
||||
|
||||
/* Discovery */
|
||||
.discover { position: relative; }
|
||||
.discover-results {
|
||||
position: absolute; z-index: 20; width: 100%; margin-top: 4px;
|
||||
max-height: 220px; overflow-y: auto; padding: 6px;
|
||||
}
|
||||
.discover-row { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; cursor: pointer; }
|
||||
.discover-row:hover { background: var(--accent-soft); }
|
||||
|
||||
/* Tasks kanban */
|
||||
.new-task { display: grid; gap: 8px; margin-bottom: 14px; }
|
||||
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
|
||||
.kanban-col { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
|
||||
.kanban-col h3 { margin: 4px 4px 10px; }
|
||||
.task-card { display: grid; gap: 6px; margin-bottom: 8px; }
|
||||
.task-card.overdue { border-color: #ef4444; }
|
||||
.overdue-tag { color: #ef4444; font-weight: 800; }
|
||||
|
||||
/* Calendar */
|
||||
.calendar {
|
||||
display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
|
||||
}
|
||||
.cal-head { font-weight: 800; text-align: center; color: var(--muted); padding: 6px; }
|
||||
.cal-cell {
|
||||
min-height: 96px; background: var(--card); border: 1px solid var(--border);
|
||||
border-radius: 10px; padding: 6px; overflow: hidden;
|
||||
}
|
||||
.cal-cell.today { border: 2px solid var(--accent); }
|
||||
.cal-day { font-weight: 800; font-size: 13px; color: var(--muted); }
|
||||
.cal-task {
|
||||
font-size: 12px; background: var(--accent-soft); border-radius: 6px;
|
||||
padding: 2px 4px; margin-top: 3px; cursor: pointer;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.cal-task.done { opacity: 0.55; text-decoration: line-through; }
|
||||
|
||||
/* Tables + stats */
|
||||
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
.data-table th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; padding: 8px; }
|
||||
.data-table td { padding: 8px; border-top: 1px solid var(--border); }
|
||||
.data-table tr.running td { background: var(--accent-soft); }
|
||||
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
|
||||
.stat { font-size: 26px; display: grid; gap: 2px; text-align: center; }
|
||||
.stat strong { font-size: 30px; }
|
||||
.running-banner { border: 2px solid #ef4444; margin-bottom: 12px; }
|
||||
|
||||
/* Timer */
|
||||
.timetracker { position: relative; }
|
||||
.timer-btn.running { background: linear-gradient(135deg, #ef4444, #f59e0b); font-variant-numeric: tabular-nums; }
|
||||
.timer-pop {
|
||||
position: absolute; right: 0; top: 44px; width: 280px; z-index: 70;
|
||||
display: grid; gap: 8px;
|
||||
}
|
||||
|
||||
/* Editor */
|
||||
.tiptap { min-height: 300px; border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--card); }
|
||||
.tiptap:focus { outline: 2px solid var(--accent); }
|
||||
.tiptap table { border-collapse: collapse; width: 100%; margin: 8px 0; }
|
||||
.tiptap th, .tiptap td { border: 1px solid var(--border); padding: 6px 10px; }
|
||||
.tiptap th { background: var(--accent-soft); }
|
||||
.tiptap ul[data-type='taskList'] { list-style: none; padding-left: 4px; }
|
||||
.tiptap ul[data-type='taskList'] li { display: flex; gap: 8px; align-items: flex-start; }
|
||||
.toolbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
|
||||
.toolbar button { padding: 4px 8px; font-size: 13px; }
|
||||
.toolbar button { padding: 5px 10px; font-size: 13px; }
|
||||
.comment { border-top: 1px solid var(--border); padding: 8px 0; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.kanban { grid-template-columns: 1fr; }
|
||||
.sidebar { width: 240px; min-width: 240px; }
|
||||
.settings-body { flex-direction: column; }
|
||||
.settings-tabs { flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto; }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
const props = defineProps({ name: String, avatar: String, size: { type: Number, default: 26 } });
|
||||
const isUrl = computed(() => (props.avatar || '').startsWith('http'));
|
||||
const letter = computed(() => ((props.name || props.avatar || '?')[0] || '?').toUpperCase());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="avatar" :style="{ width: size + 'px', height: size + 'px', fontSize: Math.round(size * 0.5) + 'px' }" :title="name">
|
||||
<img v-if="isUrl" :src="avatar" :alt="name" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover" />
|
||||
<span v-else-if="avatar">{{ avatar }}</span>
|
||||
<span v-else>{{ letter }}</span>
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
|
||||
const props = defineProps({ name: String });
|
||||
const L = useLocaleStore();
|
||||
const now = ref(new Date());
|
||||
let timer = null;
|
||||
|
||||
onMounted(() => { timer = setInterval(() => (now.value = new Date()), 1000); });
|
||||
onUnmounted(() => clearInterval(timer));
|
||||
|
||||
const period = computed(() => {
|
||||
const h = now.value.getHours();
|
||||
if (h >= 5 && h < 11) return { key: 'greet.morning', emoji: '🌅' };
|
||||
if (h >= 11 && h < 14) return { key: 'greet.midday', emoji: '🍱' };
|
||||
if (h >= 14 && h < 18) return { key: 'greet.afternoon', emoji: '☀️' };
|
||||
if (h >= 18 && h < 23) return { key: 'greet.evening', emoji: '🌇' };
|
||||
return { key: 'greet.night', emoji: '🌙' };
|
||||
});
|
||||
|
||||
const clock = computed(() =>
|
||||
now.value.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
|
||||
);
|
||||
const date = computed(() =>
|
||||
now.value.toLocaleDateString(
|
||||
L.locale === 'zh' ? 'zh-CN' : L.locale === 'de' ? 'de-DE' : 'en-US',
|
||||
{ weekday: 'long', day: 'numeric', month: 'long' },
|
||||
),
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greeting">
|
||||
<div>
|
||||
<h2 style="margin: 0">{{ period.emoji }} {{ L.t(period.key) }}{{ name ? `, ${name}` : '' }}!</h2>
|
||||
<p class="muted" style="margin: 4px 0 0">📅 {{ date }}</p>
|
||||
</div>
|
||||
<div class="clock">🕒 {{ clock }}</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,21 +1,33 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import api from '../api';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
import UserSearch from './UserSearch.vue';
|
||||
|
||||
const props = defineProps({ workspaceId: String });
|
||||
const emit = defineEmits(['invited']);
|
||||
const L = useLocaleStore();
|
||||
const email = ref('');
|
||||
const picked = ref(null);
|
||||
const role = ref('member');
|
||||
const msg = ref('');
|
||||
const err = ref('');
|
||||
|
||||
function onPick(u) {
|
||||
picked.value = u;
|
||||
email.value = u.email;
|
||||
}
|
||||
|
||||
async function invite() {
|
||||
msg.value = '';
|
||||
err.value = '';
|
||||
const target = email.value.trim();
|
||||
if (!target) return;
|
||||
try {
|
||||
await api.post(`/workspaces/${props.workspaceId}/members`, { email: email.value, role: role.value });
|
||||
msg.value = `Invited ${email.value} as ${role.value}`;
|
||||
await api.post(`/workspaces/${props.workspaceId}/members`, { email: target, role: role.value });
|
||||
msg.value = `🎉 ${target} → ${role.value}`;
|
||||
email.value = '';
|
||||
picked.value = null;
|
||||
emit('invited');
|
||||
} catch (e) {
|
||||
err.value = e.response?.data?.error || 'Invite failed';
|
||||
@@ -25,17 +37,19 @@ async function invite() {
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<h4>Invite collaborator</h4>
|
||||
<p class="muted">They must register first with the same email.</p>
|
||||
<div class="row">
|
||||
<h4>{{ L.t('inv.title') }}</h4>
|
||||
<p class="muted">{{ L.t('inv.hint') }}</p>
|
||||
<UserSearch @pick="onPick" />
|
||||
<div class="row" style="margin-top: 8px">
|
||||
<input v-model="email" placeholder="teammate@example.com" />
|
||||
<select v-model="role" style="max-width: 130px">
|
||||
<option value="viewer">viewer</option>
|
||||
<option value="member">member</option>
|
||||
<option value="admin">admin</option>
|
||||
</select>
|
||||
<button @click="invite">Invite</button>
|
||||
<button @click="invite">✉️ {{ L.t('inv.btn') }}</button>
|
||||
</div>
|
||||
<p v-if="picked" class="muted">🔎 {{ picked.name }} <{{ picked.email }}></p>
|
||||
<p v-if="msg" style="color: green">{{ msg }}</p>
|
||||
<p v-if="err" style="color: red">{{ err }}</p>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import api from '../api';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
import { useThemeStore } from '../stores/theme';
|
||||
import { useUiStore } from '../stores/ui';
|
||||
import Avatar from './Avatar.vue';
|
||||
|
||||
const auth = useAuthStore();
|
||||
const L = useLocaleStore();
|
||||
const theme = useThemeStore();
|
||||
const ui = useUiStore();
|
||||
|
||||
const form = reactive({ name: '', email: '', avatar: '' });
|
||||
const curPw = ref('');
|
||||
const newPw = ref('');
|
||||
const msg = ref('');
|
||||
const err = ref('');
|
||||
const bgUrl = ref('');
|
||||
const bgBlur = ref(true);
|
||||
const bgPreset = ref('none');
|
||||
|
||||
const GRADIENTS = {
|
||||
none: '',
|
||||
sunset: 'linear-gradient(135deg,#ff9a56,#ff5e78 55%,#a855f7)',
|
||||
ocean: 'linear-gradient(135deg,#0ea5e9,#6366f1 55%,#14b8a6)',
|
||||
forest: 'linear-gradient(135deg,#166534,#4d7c0f 60%,#a3a380)',
|
||||
midnight: 'linear-gradient(135deg,#0f172a,#4c1d95 60%,#0ea5e9)',
|
||||
};
|
||||
const EMOJIS = ['🦊', '🐼', '🐸', '🚀', '🌙', '🔥', '🍩', '🎧', '🌵', '⚡'];
|
||||
|
||||
watch(
|
||||
() => ui.settingsOpen,
|
||||
(open) => {
|
||||
if (open && auth.user) {
|
||||
form.name = auth.user.name || '';
|
||||
form.email = auth.user.email || '';
|
||||
form.avatar = auth.user.avatar || '';
|
||||
bgUrl.value = auth.user.bgImage?.startsWith('http') ? auth.user.bgImage : '';
|
||||
bgPreset.value = Object.entries(GRADIENTS).find(
|
||||
([, v]) => v && v === auth.user.bgImage,
|
||||
)?.[0] || (auth.user.bgImage ? 'custom' : 'none');
|
||||
bgBlur.value = auth.user.bgBlur !== false;
|
||||
msg.value = '';
|
||||
err.value = '';
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function bgValue() {
|
||||
if (bgPreset.value === 'custom') return bgUrl.value.trim();
|
||||
return GRADIENTS[bgPreset.value] || '';
|
||||
}
|
||||
|
||||
function persistUser(user) {
|
||||
auth.user = user;
|
||||
localStorage.setItem('user', JSON.stringify(user));
|
||||
auth.applyPrefs();
|
||||
}
|
||||
|
||||
async function saveProfile() {
|
||||
msg.value = '';
|
||||
err.value = '';
|
||||
try {
|
||||
const { data } = await api.patch('/users/me', {
|
||||
name: form.name.trim(), email: form.email.trim(), avatar: form.avatar.trim(),
|
||||
});
|
||||
persistUser(data.user);
|
||||
msg.value = L.t('set.saved');
|
||||
} catch (e) {
|
||||
err.value = e.response?.data?.error || 'Error';
|
||||
}
|
||||
}
|
||||
|
||||
async function changePw() {
|
||||
msg.value = '';
|
||||
err.value = '';
|
||||
try {
|
||||
await api.patch('/users/me/password', { currentPassword: curPw.value, newPassword: newPw.value });
|
||||
curPw.value = '';
|
||||
newPw.value = '';
|
||||
msg.value = L.t('set.pwChanged');
|
||||
} catch (e) {
|
||||
err.value = e.response?.data?.error || 'Error';
|
||||
}
|
||||
}
|
||||
|
||||
async function setTheme(mode) {
|
||||
theme.set(mode);
|
||||
try {
|
||||
const { data } = await api.patch('/users/me', { theme: mode });
|
||||
persistUser(data.user);
|
||||
} catch { /* offline-friendly: theme still applies locally */ }
|
||||
}
|
||||
|
||||
async function setLocale(l) {
|
||||
L.set(l);
|
||||
try {
|
||||
const { data } = await api.patch('/users/me', { locale: l });
|
||||
persistUser(data.user);
|
||||
} catch { /* keep local */ }
|
||||
}
|
||||
|
||||
async function saveBackground() {
|
||||
msg.value = '';
|
||||
err.value = '';
|
||||
try {
|
||||
const { data } = await api.patch('/users/me', { bg_image: bgValue(), bg_blur: bgBlur.value });
|
||||
persistUser(data.user);
|
||||
msg.value = L.t('set.saved');
|
||||
} catch (e) {
|
||||
err.value = e.response?.data?.error || 'Error';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="ui.settingsOpen" class="settings-overlay" @click.self="ui.closeSettings()">
|
||||
<div class="settings-window">
|
||||
<div class="settings-titlebar">
|
||||
<div class="traffic">
|
||||
<span class="dot red" @click="ui.closeSettings()"></span>
|
||||
<span class="dot yellow"></span>
|
||||
<span class="dot green"></span>
|
||||
</div>
|
||||
<strong>⚙️ {{ L.t('set.title') }}</strong>
|
||||
<button class="ghost" @click="ui.closeSettings()">✕ {{ L.t('set.close') }}</button>
|
||||
</div>
|
||||
<div class="settings-body">
|
||||
<nav class="settings-tabs">
|
||||
<button :class="{ active: ui.settingsTab === 'profile' }" @click="ui.settingsTab = 'profile'">{{ L.t('set.profile') }}</button>
|
||||
<button :class="{ active: ui.settingsTab === 'appearance' }" @click="ui.settingsTab = 'appearance'">{{ L.t('set.appearance') }}</button>
|
||||
<button :class="{ active: ui.settingsTab === 'language' }" @click="ui.settingsTab = 'language'">{{ L.t('set.language') }}</button>
|
||||
<button :class="{ active: ui.settingsTab === 'background' }" @click="ui.settingsTab = 'background'">{{ L.t('set.background') }}</button>
|
||||
</nav>
|
||||
<section class="settings-content">
|
||||
<div v-if="ui.settingsTab === 'profile'" style="display: grid; gap: 10px">
|
||||
<div class="row">
|
||||
<Avatar :name="form.name" :avatar="form.avatar" :size="48" />
|
||||
<div>
|
||||
<label>{{ L.t('set.avatar') }}</label>
|
||||
<input v-model="form.avatar" :placeholder="L.t('set.avatarHint')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="emoji-row">
|
||||
<span v-for="e in EMOJIS" :key="e" @click="form.avatar = e">{{ e }}</span>
|
||||
</div>
|
||||
<label>{{ L.t('set.name') }}</label>
|
||||
<input v-model="form.name" />
|
||||
<label>{{ L.t('set.email') }}</label>
|
||||
<input v-model="form.email" type="email" />
|
||||
<button @click="saveProfile">{{ L.t('set.save') }}</button>
|
||||
<hr />
|
||||
<label>{{ L.t('set.curPw') }}</label>
|
||||
<input v-model="curPw" type="password" />
|
||||
<label>{{ L.t('set.newPw') }}</label>
|
||||
<input v-model="newPw" type="password" />
|
||||
<button class="ghost" @click="changePw">{{ L.t('set.changePw') }}</button>
|
||||
</div>
|
||||
|
||||
<div v-if="ui.settingsTab === 'appearance'" style="display: grid; gap: 10px">
|
||||
<label>{{ L.t('set.theme') }}</label>
|
||||
<div class="row">
|
||||
<button :class="{ ghost: theme.mode !== 'light' }" @click="setTheme('light')">{{ L.t('set.light') }}</button>
|
||||
<button :class="{ ghost: theme.mode !== 'dark' }" @click="setTheme('dark')">{{ L.t('set.dark') }}</button>
|
||||
<button :class="{ ghost: theme.mode !== 'system' }" @click="setTheme('system')">{{ L.t('set.system') }}</button>
|
||||
</div>
|
||||
<p class="muted">👀 {{ L.t('set.theme') }}: <strong>{{ theme.resolved }}</strong></p>
|
||||
</div>
|
||||
|
||||
<div v-if="ui.settingsTab === 'language'" style="display: grid; gap: 10px">
|
||||
<button :class="{ ghost: L.locale !== 'de' }" @click="setLocale('de')">🇩🇪 Deutsch</button>
|
||||
<button :class="{ ghost: L.locale !== 'en' }" @click="setLocale('en')">🇬🇧 English</button>
|
||||
<button :class="{ ghost: L.locale !== 'zh' }" @click="setLocale('zh')">🇨🇳 中文</button>
|
||||
</div>
|
||||
|
||||
<div v-if="ui.settingsTab === 'background'" style="display: grid; gap: 10px">
|
||||
<div class="preset-grid">
|
||||
<div
|
||||
v-for="(grad, key) in GRADIENTS"
|
||||
:key="key"
|
||||
class="preset"
|
||||
:class="{ active: bgPreset === key }"
|
||||
:style="grad ? { background: grad } : {}"
|
||||
@click="bgPreset = key"
|
||||
>
|
||||
{{ key === 'none' ? '🚫' : '' }}
|
||||
</div>
|
||||
</div>
|
||||
<label>{{ L.t('set.bgUrl') }}</label>
|
||||
<input v-model="bgUrl" placeholder="https://…" @input="bgPreset = 'custom'" />
|
||||
<p class="muted">{{ L.t('set.bgUrlHint') }}</p>
|
||||
<label class="row"><input type="checkbox" v-model="bgBlur" style="width: auto" /> {{ L.t('set.bgBlur') }}</label>
|
||||
<button @click="saveBackground">{{ L.t('set.save') }}</button>
|
||||
</div>
|
||||
|
||||
<p v-if="msg" style="color: green">{{ msg }}</p>
|
||||
<p v-if="err" style="color: red">{{ err }}</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,153 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import api from '../api';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useWorkspaceStore } from '../stores/workspace';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
import { useUiStore } from '../stores/ui';
|
||||
import PageTree from './PageTree.vue';
|
||||
import Avatar from './Avatar.vue';
|
||||
|
||||
const props = defineProps({ activePageId: String });
|
||||
const auth = useAuthStore();
|
||||
const ws = useWorkspaceStore();
|
||||
const L = useLocaleStore();
|
||||
const ui = useUiStore();
|
||||
const router = useRouter();
|
||||
|
||||
const newWs = ref('');
|
||||
const newPage = ref('');
|
||||
const newBook = ref('');
|
||||
const search = ref('');
|
||||
const results = ref([]);
|
||||
const collapsed = ref(JSON.parse(localStorage.getItem('collapsedBooks') || '{}'));
|
||||
|
||||
function toggleBook(id) {
|
||||
collapsed.value[id] = !collapsed.value[id];
|
||||
localStorage.setItem('collapsedBooks', JSON.stringify(collapsed.value));
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
await ws.fetchBooks();
|
||||
await ws.fetchPages();
|
||||
}
|
||||
|
||||
async function switchWs(id) {
|
||||
ws.setCurrent(id);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
async function createWs() {
|
||||
if (!newWs.value.trim()) return;
|
||||
await ws.createWorkspace(newWs.value.trim());
|
||||
newWs.value = '';
|
||||
await refresh();
|
||||
}
|
||||
|
||||
async function createPage(bookId = null) {
|
||||
const title = newPage.value.trim() || 'Untitled';
|
||||
const { data } = await api.post('/pages', {
|
||||
workspace_id: ws.currentId, book_id: bookId, title,
|
||||
});
|
||||
newPage.value = '';
|
||||
await ws.fetchPages();
|
||||
router.push(`/page/${data.page.id}`);
|
||||
}
|
||||
|
||||
async function createBook() {
|
||||
if (!newBook.value.trim()) return;
|
||||
await ws.createBook(newBook.value.trim(), '📚');
|
||||
newBook.value = '';
|
||||
}
|
||||
|
||||
async function deleteBook(id) {
|
||||
if (!confirm('🗑️?')) return;
|
||||
await api.delete(`/books/${id}`);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
async function doSearch() {
|
||||
if (!search.value.trim()) { results.value = []; return; }
|
||||
const { data } = await api.get('/pages/search/query', {
|
||||
params: { q: search.value, workspace_id: ws.currentId },
|
||||
});
|
||||
results.value = data.results;
|
||||
}
|
||||
|
||||
function logout() {
|
||||
auth.logout();
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
onMounted(refresh);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="sidebar">
|
||||
<div class="user-chip">
|
||||
<Avatar :name="auth.user?.name" :avatar="auth.user?.avatar" :size="32" />
|
||||
<strong style="flex: 1">{{ auth.user?.name }}</strong>
|
||||
<button class="ghost icon-btn" @click="ui.openSettings()" title="⚙️">⚙️</button>
|
||||
</div>
|
||||
|
||||
<select :value="ws.currentId" @change="switchWs($event.target.value)">
|
||||
<option v-for="w in ws.workspaces" :key="w.id" :value="w.id">{{ w.name }} ({{ w.role }})</option>
|
||||
</select>
|
||||
<div class="row">
|
||||
<input v-model="newWs" :placeholder="L.t('side.newWorkspace')" @keyup.enter="createWs" />
|
||||
<button @click="createWs">＋</button>
|
||||
</div>
|
||||
|
||||
<nav class="side-nav">
|
||||
<router-link to="/">🏠 {{ L.t('nav.dashboard') }}</router-link>
|
||||
<router-link to="/tasks">✅ {{ L.t('nav.tasks') }}</router-link>
|
||||
<router-link to="/calendar">🗓️ {{ L.t('nav.calendar') }}</router-link>
|
||||
<router-link to="/time">⏱️ {{ L.t('nav.time') }}</router-link>
|
||||
<router-link v-if="auth.user?.isAdmin" to="/admin">🛡️ {{ L.t('nav.admin') }}</router-link>
|
||||
</nav>
|
||||
|
||||
<input v-model="search" :placeholder="L.t('side.searchPh')" @input="doSearch" />
|
||||
<div v-if="results.length" class="card search-results">
|
||||
<div v-for="r in results" :key="r.id" class="tree-item" @click="router.push(`/page/${r.id}`)">
|
||||
🔍 {{ r.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-label">{{ L.t('side.books') }}</div>
|
||||
<div class="row">
|
||||
<input v-model="newBook" :placeholder="L.t('side.newBookPh')" @keyup.enter="createBook" />
|
||||
<button @click="createBook">＋</button>
|
||||
</div>
|
||||
<div v-for="b in ws.books" :key="b.id" class="book">
|
||||
<div class="tree-item book-head" @click="toggleBook(b.id)">
|
||||
<span>{{ collapsed[b.id] ? '▶' : '▼' }} {{ b.icon }} {{ b.title }}</span>
|
||||
<span>
|
||||
<button class="ghost mini" @click.stop="createPage(b.id)" title="+">＋</button>
|
||||
<button class="ghost mini" @click.stop="deleteBook(b.id)" title="🗑️">🗑️</button>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="!collapsed[b.id]" class="book-pages">
|
||||
<PageTree
|
||||
:nodes="ws.treeFor(b.id)" :active-id="activePageId"
|
||||
@open="router.push(`/page/${$event}`)" @add-child="createPage(b.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-label">{{ L.t('side.pages') }}</div>
|
||||
<div class="row">
|
||||
<input v-model="newPage" :placeholder="L.t('side.newPagePh')" @keyup.enter="createPage()" />
|
||||
<button @click="createPage()">＋</button>
|
||||
</div>
|
||||
<PageTree
|
||||
:nodes="ws.tree()" :active-id="activePageId"
|
||||
@open="router.push(`/page/${$event}`)" @add-child="createPage()"
|
||||
/>
|
||||
|
||||
<div class="side-footer">
|
||||
<span class="muted">{{ ws.role }}</span>
|
||||
<button class="ghost" @click="logout">🚪 {{ L.t('nav.logout') }}</button>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -1,12 +0,0 @@
|
||||
<script setup>
|
||||
import { useThemeStore } from '../stores/theme';
|
||||
const theme = useThemeStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row">
|
||||
<button class="ghost" @click="theme.set('light')" :disabled="theme.resolved === 'light' && theme.mode !== 'system'">☀ Light</button>
|
||||
<button class="ghost" @click="theme.set('dark')" :disabled="theme.resolved === 'dark' && theme.mode !== 'system'">🌙 Dark</button>
|
||||
<button class="ghost" @click="theme.toggle()">Toggle</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useTimeStore, formatDuration } from '../stores/time';
|
||||
import { useWorkspaceStore } from '../stores/workspace';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
|
||||
const time = useTimeStore();
|
||||
const ws = useWorkspaceStore();
|
||||
const L = useLocaleStore();
|
||||
const router = useRouter();
|
||||
const open = ref(false);
|
||||
const desc = ref('');
|
||||
const bookId = ref('');
|
||||
const tick = ref(0);
|
||||
let timer = null;
|
||||
|
||||
onMounted(() => { timer = setInterval(() => (tick.value += 1), 1000); });
|
||||
onUnmounted(() => clearInterval(timer));
|
||||
|
||||
const elapsed = computed(() => {
|
||||
void tick.value;
|
||||
return time.open
|
||||
? formatDuration((Date.now() - new Date(time.open.started_at).getTime()) / 1000)
|
||||
: '00:00:00';
|
||||
});
|
||||
|
||||
async function toggle() {
|
||||
if (time.open) {
|
||||
await time.stop();
|
||||
open.value = false;
|
||||
} else {
|
||||
open.value = !open.value;
|
||||
}
|
||||
}
|
||||
|
||||
async function start() {
|
||||
await time.start(desc.value, bookId.value || null);
|
||||
desc.value = '';
|
||||
open.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="timetracker">
|
||||
<button
|
||||
class="ghost timer-btn"
|
||||
:class="{ running: !!time.open }"
|
||||
@click="toggle"
|
||||
:title="L.t('time.title')"
|
||||
>
|
||||
⏱️ {{ time.open ? elapsed : L.t('time.start') }}
|
||||
</button>
|
||||
<div v-if="open && !time.open" class="card timer-pop">
|
||||
<input v-model="desc" :placeholder="L.t('time.descPh')" />
|
||||
<select v-model="bookId">
|
||||
<option value="">{{ L.t('time.book') }}: {{ L.t('time.none') }}</option>
|
||||
<option v-for="b in ws.books" :key="b.id" :value="b.id">{{ b.icon }} {{ b.title }}</option>
|
||||
</select>
|
||||
<div class="row">
|
||||
<button @click="start">{{ L.t('time.start') }}</button>
|
||||
<button class="ghost" @click="router.push('/time')">{{ L.t('time.entries') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import api from '../api';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
import Avatar from './Avatar.vue';
|
||||
|
||||
const props = defineProps({ workspaceId: String });
|
||||
const emit = defineEmits(['pick']);
|
||||
const L = useLocaleStore();
|
||||
const q = ref('');
|
||||
const results = ref([]);
|
||||
const busy = ref(false);
|
||||
let timer = null;
|
||||
|
||||
watch(q, () => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(search, 250);
|
||||
});
|
||||
|
||||
async function search() {
|
||||
const query = q.value.trim();
|
||||
if (query.length < 2) { results.value = []; return; }
|
||||
busy.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/users/discover', { params: { q: query } });
|
||||
results.value = data.users;
|
||||
} catch {
|
||||
results.value = [];
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function pick(u) {
|
||||
emit('pick', u);
|
||||
q.value = '';
|
||||
results.value = [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="discover">
|
||||
<input v-model="q" :placeholder="L.t('inv.ph')" />
|
||||
<div v-if="q.trim().length >= 2" class="discover-results card">
|
||||
<div v-if="busy" class="muted">{{ L.t('c.loading') }}</div>
|
||||
<div v-for="u in results" :key="u.id" class="discover-row" @click="pick(u)">
|
||||
<Avatar :name="u.name" :avatar="u.avatar" :size="24" />
|
||||
<span><strong>{{ u.name }}</strong><br /><span class="muted">{{ u.email }}</span></span>
|
||||
</div>
|
||||
<div v-if="!busy && !results.length" class="muted">∅</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
export default {
|
||||
nav: {
|
||||
dashboard: 'Dashboard', tasks: 'Aufgaben', calendar: 'Kalender', time: 'Zeiterfassung',
|
||||
admin: 'Admin', logout: 'Abmelden',
|
||||
},
|
||||
side: {
|
||||
workspaces: 'Workspaces', newWorkspace: 'Neuer Workspace', searchPh: 'Seiten suchen …',
|
||||
newPagePh: 'Neue Seite', newBookPh: 'Neues Book', books: '📚 Books', pages: '📄 Seiten',
|
||||
members: 'Mitglieder', role: 'Rolle',
|
||||
},
|
||||
greet: {
|
||||
morning: 'Guten Morgen', midday: 'Mahlzeit', afternoon: 'Guten Tag',
|
||||
evening: 'Guten Abend', night: 'Gute Nacht',
|
||||
},
|
||||
set: {
|
||||
title: 'Einstellungen', profile: '👤 Profil', appearance: '🎨 Darstellung',
|
||||
language: '🌍 Sprache', background: '🖼️ Hintergrund',
|
||||
name: 'Anzeigename', email: 'E-Mail', avatar: 'Profilbild (Emoji oder Bild-URL)',
|
||||
avatarHint: 'Z. B. 🦊 oder https://…/foto.png',
|
||||
curPw: 'Aktuelles Passwort', newPw: 'Neues Passwort (min. 8 Zeichen)',
|
||||
changePw: 'Passwort ändern', pwChanged: 'Passwort geändert ✅',
|
||||
save: 'Speichern', saved: 'Gespeichert ✅', theme: 'Farbschema',
|
||||
light: '☀️ Hell', dark: '🌙 Dunkel', system: '🖥️ System',
|
||||
bgUrl: 'Hintergrundbild-URL', bgUrlHint: 'Leer lassen = kein Bild. Oder Preset wählen:',
|
||||
bgBlur: 'Hintergrund weichzeichnen (Blur)', close: 'Schließen',
|
||||
presetNone: 'Kein Bild', presetCustom: 'Eigene URL',
|
||||
},
|
||||
task: {
|
||||
title: 'Aufgaben', new: 'Neue Aufgabe', ph: 'Was ist zu tun?',
|
||||
todo: '📝 Offen', doing: '🚧 In Arbeit', done: '✅ Erledigt',
|
||||
priority: 'Prio', low: 'Niedrig', normal: 'Normal', high: 'Hoch',
|
||||
due: 'Fällig', noDue: 'Ohne Termin', book: 'Book', page: 'Seite',
|
||||
none: '—', overdue: 'Überfällig!', toTodo: '← Offen', toDoing: 'In Arbeit →',
|
||||
toDone: 'Erledigt →', reopen: '↩ Öffnen',
|
||||
},
|
||||
cal: { title: 'Kalender', today: 'Heute' },
|
||||
time: {
|
||||
title: 'Zeiterfassung', start: '▶ Start', stop: '⏹ Stopp',
|
||||
descPh: 'Woran arbeitest du?', book: 'Book', none: '—',
|
||||
entries: 'Einträge', dur: 'Dauer', running: 'läuft …',
|
||||
total: 'Gesamt', noEntries: 'Noch keine Einträge. Starte oben den Timer! ⏱️',
|
||||
started: 'Start', ended: 'Ende',
|
||||
},
|
||||
admin: {
|
||||
title: 'Admin-Dashboard', overview: '📊 Übersicht', users: '👥 Benutzer',
|
||||
name: 'Name', email: 'E-Mail', role: 'Rolle', admin: 'Admin', user: 'User',
|
||||
workspaces: 'Workspaces', joined: 'Dabei seit', makeAdmin: 'Zum Admin machen',
|
||||
unmake: 'Admin entziehen', del: 'Löschen', confirm: 'Wirklich löschen?',
|
||||
you: '(du)', books: 'Books', pages: 'Seiten', tasks: 'Aufgaben', time: 'Zeiteinträge',
|
||||
},
|
||||
c: {
|
||||
save: 'Speichern', cancel: 'Abbrechen', delete: 'Löschen', create: 'Anlegen',
|
||||
back: 'Zurück', loading: 'Lädt …',
|
||||
},
|
||||
inv: {
|
||||
title: '✉️ Mitarbeiter einladen', hint: 'Tippen zum Suchen – oder volle E-Mail eingeben.',
|
||||
ph: 'Name oder E-Mail suchen …', btn: 'Einladen', done: 'Eingeladen',
|
||||
pick: 'Person wählen …',
|
||||
},
|
||||
com: { title: 'Kommentare', ph: 'Kommentar schreiben …', post: 'Posten' },
|
||||
};
|
||||
@@ -0,0 +1,61 @@
|
||||
export default {
|
||||
nav: {
|
||||
dashboard: 'Dashboard', tasks: 'Tasks', calendar: 'Calendar', time: 'Time tracking',
|
||||
admin: 'Admin', logout: 'Log out',
|
||||
},
|
||||
side: {
|
||||
workspaces: 'Workspaces', newWorkspace: 'New workspace', searchPh: 'Search pages …',
|
||||
newPagePh: 'New page', newBookPh: 'New book', books: '📚 Books', pages: '📄 Pages',
|
||||
members: 'Members', role: 'Role',
|
||||
},
|
||||
greet: {
|
||||
morning: 'Good morning', midday: 'Enjoy your lunch', afternoon: 'Good afternoon',
|
||||
evening: 'Good evening', night: 'Good night',
|
||||
},
|
||||
set: {
|
||||
title: 'Settings', profile: '👤 Profile', appearance: '🎨 Appearance',
|
||||
language: '🌍 Language', background: '🖼️ Background',
|
||||
name: 'Display name', email: 'Email', avatar: 'Avatar (emoji or image URL)',
|
||||
avatarHint: 'E.g. 🦊 or https://…/photo.png',
|
||||
curPw: 'Current password', newPw: 'New password (min. 8 chars)',
|
||||
changePw: 'Change password', pwChanged: 'Password changed ✅',
|
||||
save: 'Save', saved: 'Saved ✅', theme: 'Color scheme',
|
||||
light: '☀️ Light', dark: '🌙 Dark', system: '🖥️ System',
|
||||
bgUrl: 'Background image URL', bgUrlHint: 'Empty = no image. Or pick a preset:',
|
||||
bgBlur: 'Blur background', close: 'Close',
|
||||
presetNone: 'No image', presetCustom: 'Custom URL',
|
||||
},
|
||||
task: {
|
||||
title: 'Tasks', new: 'New task', ph: 'What needs doing?',
|
||||
todo: '📝 Todo', doing: '🚧 Doing', done: '✅ Done',
|
||||
priority: 'Priority', low: 'Low', normal: 'Normal', high: 'High',
|
||||
due: 'Due', noDue: 'No due date', book: 'Book', page: 'Page',
|
||||
none: '—', overdue: 'Overdue!', toTodo: '← Todo', toDoing: 'Doing →',
|
||||
toDone: 'Done →', reopen: '↩ Reopen',
|
||||
},
|
||||
cal: { title: 'Calendar', today: 'Today' },
|
||||
time: {
|
||||
title: 'Time tracking', start: '▶ Start', stop: '⏹ Stop',
|
||||
descPh: 'What are you working on?', book: 'Book', none: '—',
|
||||
entries: 'Entries', dur: 'Duration', running: 'running …',
|
||||
total: 'Total', noEntries: 'No entries yet. Start the timer above! ⏱️',
|
||||
started: 'Started', ended: 'Ended',
|
||||
},
|
||||
admin: {
|
||||
title: 'Admin dashboard', overview: '📊 Overview', users: '👥 Users',
|
||||
name: 'Name', email: 'Email', role: 'Role', admin: 'Admin', user: 'User',
|
||||
workspaces: 'Workspaces', joined: 'Joined', makeAdmin: 'Make admin',
|
||||
unmake: 'Remove admin', del: 'Delete', confirm: 'Really delete?',
|
||||
you: '(you)', books: 'Books', pages: 'Pages', tasks: 'Tasks', time: 'Time entries',
|
||||
},
|
||||
c: {
|
||||
save: 'Save', cancel: 'Cancel', delete: 'Delete', create: 'Create',
|
||||
back: 'Back', loading: 'Loading …',
|
||||
},
|
||||
inv: {
|
||||
title: '✉️ Invite collaborator', hint: 'Type to search – or enter a full email.',
|
||||
ph: 'Search name or email …', btn: 'Invite', done: 'Invited',
|
||||
pick: 'Pick a person …',
|
||||
},
|
||||
com: { title: 'Comments', ph: 'Write a comment …', post: 'Post' },
|
||||
};
|
||||
@@ -0,0 +1,61 @@
|
||||
export default {
|
||||
nav: {
|
||||
dashboard: '仪表盘', tasks: '任务', calendar: '日历', time: '时间记录',
|
||||
admin: '管理', logout: '退出登录',
|
||||
},
|
||||
side: {
|
||||
workspaces: '工作区', newWorkspace: '新建工作区', searchPh: '搜索页面 …',
|
||||
newPagePh: '新建页面', newBookPh: '新建书册', books: '📚 书册', pages: '📄 页面',
|
||||
members: '成员', role: '角色',
|
||||
},
|
||||
greet: {
|
||||
morning: '早上好', midday: '午餐愉快', afternoon: '下午好',
|
||||
evening: '晚上好', night: '晚安',
|
||||
},
|
||||
set: {
|
||||
title: '设置', profile: '👤 个人资料', appearance: '🎨 外观',
|
||||
language: '🌍 语言', background: '🖼️ 背景',
|
||||
name: '显示名称', email: '电子邮件', avatar: '头像（表情或图片链接）',
|
||||
avatarHint: '例如 🦊 或 https://…/photo.png',
|
||||
curPw: '当前密码', newPw: '新密码（至少 8 位）',
|
||||
changePw: '修改密码', pwChanged: '密码已修改 ✅',
|
||||
save: '保存', saved: '已保存 ✅', theme: '配色方案',
|
||||
light: '☀️ 浅色', dark: '🌙 深色', system: '🖥️ 跟随系统',
|
||||
bgUrl: '背景图片链接', bgUrlHint: '留空 = 无背景，或选择预设：',
|
||||
bgBlur: '模糊背景', close: '关闭',
|
||||
presetNone: '无背景', presetCustom: '自定义链接',
|
||||
},
|
||||
task: {
|
||||
title: '任务', new: '新建任务', ph: '要做什么？',
|
||||
todo: '📝 待办', doing: '🚧 进行中', done: '✅ 已完成',
|
||||
priority: '优先级', low: '低', normal: '中', high: '高',
|
||||
due: '截止', noDue: '无截止日期', book: '书册', page: '页面',
|
||||
none: '—', overdue: '已逾期！', toTodo: '← 待办', toDoing: '进行中 →',
|
||||
toDone: '完成 →', reopen: '↩ 重新打开',
|
||||
},
|
||||
cal: { title: '日历', today: '今天' },
|
||||
time: {
|
||||
title: '时间记录', start: '▶ 开始', stop: '⏹ 停止',
|
||||
descPh: '在忙什么？', book: '书册', none: '—',
|
||||
entries: '记录', dur: '时长', running: '计时中 …',
|
||||
total: '总计', noEntries: '还没有记录，点击上方开始计时！⏱️',
|
||||
started: '开始', ended: '结束',
|
||||
},
|
||||
admin: {
|
||||
title: '管理面板', overview: '📊 总览', users: '👥 用户',
|
||||
name: '名称', email: '邮箱', role: '角色', admin: '管理员', user: '用户',
|
||||
workspaces: '工作区', joined: '加入时间', makeAdmin: '设为管理员',
|
||||
unmake: '取消管理员', del: '删除', confirm: '确认删除？',
|
||||
you: '（你）', books: '书册', pages: '页面', tasks: '任务', time: '时间记录',
|
||||
},
|
||||
c: {
|
||||
save: '保存', cancel: '取消', delete: '删除', create: '创建',
|
||||
back: '返回', loading: '加载中 …',
|
||||
},
|
||||
inv: {
|
||||
title: '✉️ 邀请协作者', hint: '输入搜索，或填写完整邮箱。',
|
||||
ph: '搜索姓名或邮箱 …', btn: '邀请', done: '已邀请',
|
||||
pick: '选择人员 …',
|
||||
},
|
||||
com: { title: '评论', ph: '写评论 …', post: '发送' },
|
||||
};
|
||||
@@ -3,10 +3,12 @@ import { createPinia } from 'pinia';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import { useThemeStore } from './stores/theme';
|
||||
import { useLocaleStore } from './stores/locale';
|
||||
import './assets/style.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(createPinia());
|
||||
app.use(router);
|
||||
app.mount('#app');
|
||||
useLocaleStore().set(localStorage.getItem('locale') || 'en');
|
||||
useThemeStore().apply();
|
||||
|
||||
@@ -6,6 +6,10 @@ import Register from '../views/Register.vue';
|
||||
import Setup from '../views/Setup.vue';
|
||||
import Dashboard from '../views/Dashboard.vue';
|
||||
import PageEditor from '../views/PageEditor.vue';
|
||||
import Tasks from '../views/Tasks.vue';
|
||||
import Calendar from '../views/Calendar.vue';
|
||||
import Time from '../views/Time.vue';
|
||||
import Admin from '../views/Admin.vue';
|
||||
|
||||
const routes = [
|
||||
{ path: '/setup', component: Setup },
|
||||
@@ -13,6 +17,10 @@ const routes = [
|
||||
{ path: '/register', component: Register, meta: { guest: true } },
|
||||
{ path: '/', component: Dashboard, meta: { auth: true } },
|
||||
{ path: '/page/:id', component: PageEditor, meta: { auth: true } },
|
||||
{ path: '/tasks', component: Tasks, meta: { auth: true } },
|
||||
{ path: '/calendar', component: Calendar, meta: { auth: true } },
|
||||
{ path: '/time', component: Time, meta: { auth: true } },
|
||||
{ path: '/admin', component: Admin, meta: { auth: true, admin: true } },
|
||||
];
|
||||
|
||||
const router = createRouter({ history: createWebHistory(), routes });
|
||||
@@ -25,6 +33,7 @@ router.beforeEach(async (to) => {
|
||||
const auth = useAuthStore();
|
||||
if (to.meta.auth && !auth.isLoggedIn) return '/login';
|
||||
if (to.meta.guest && auth.isLoggedIn) return '/';
|
||||
if (to.meta.admin && !auth.user?.isAdmin) return '/';
|
||||
return true;
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import api from '../api';
|
||||
import { connectSocket, disconnectSocket } from '../socket';
|
||||
import { useLocaleStore } from './locale';
|
||||
import { useThemeStore } from './theme';
|
||||
|
||||
export const useAuthStore = defineStore('auth', {
|
||||
state: () => ({
|
||||
@@ -11,6 +13,11 @@ export const useAuthStore = defineStore('auth', {
|
||||
isLoggedIn: (s) => !!s.token,
|
||||
},
|
||||
actions: {
|
||||
applyPrefs() {
|
||||
if (!this.user) return;
|
||||
useLocaleStore().set(this.user.locale || 'en');
|
||||
useThemeStore().set(this.user.theme || 'system');
|
||||
},
|
||||
async register(email, name, password) {
|
||||
const { data } = await api.post('/auth/register', { email, name, password });
|
||||
this.apply(data);
|
||||
@@ -24,6 +31,7 @@ export const useAuthStore = defineStore('auth', {
|
||||
this.token = data.token;
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
localStorage.setItem('token', data.token);
|
||||
this.applyPrefs();
|
||||
connectSocket();
|
||||
},
|
||||
async fetchMe() {
|
||||
@@ -31,6 +39,7 @@ export const useAuthStore = defineStore('auth', {
|
||||
const { data } = await api.get('/auth/me');
|
||||
this.user = data.user;
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
this.applyPrefs();
|
||||
},
|
||||
logout() {
|
||||
this.user = null;
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import de from '../i18n/de';
|
||||
import en from '../i18n/en';
|
||||
import zh from '../i18n/zh';
|
||||
|
||||
const dicts = { de, en, zh };
|
||||
|
||||
export const useLocaleStore = defineStore('locale', {
|
||||
state: () => ({
|
||||
locale: localStorage.getItem('locale') || 'en',
|
||||
}),
|
||||
actions: {
|
||||
set(l) {
|
||||
if (!dicts[l]) return;
|
||||
this.locale = l;
|
||||
localStorage.setItem('locale', l);
|
||||
document.documentElement.lang = l === 'zh' ? 'zh-CN' : l;
|
||||
},
|
||||
t(path) {
|
||||
const dict = dicts[this.locale] || en;
|
||||
const parts = String(path).split('.');
|
||||
let node = dict;
|
||||
for (const p of parts) {
|
||||
node = node?.[p];
|
||||
if (node === undefined) break;
|
||||
}
|
||||
if (typeof node === 'string') return node;
|
||||
// fallback to English, then to the key itself
|
||||
let fb = en;
|
||||
for (const p of parts) fb = fb?.[p];
|
||||
return typeof fb === 'string' ? fb : path;
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import api from '../api';
|
||||
|
||||
export function formatDuration(totalSeconds) {
|
||||
const s = Math.max(0, Math.floor(totalSeconds || 0));
|
||||
const h = String(Math.floor(s / 3600)).padStart(2, '0');
|
||||
const m = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
|
||||
const sec = String(s % 60).padStart(2, '0');
|
||||
return `${h}:${m}:${sec}`;
|
||||
}
|
||||
|
||||
export const useTimeStore = defineStore('time', {
|
||||
state: () => ({
|
||||
entries: [],
|
||||
open: null, // running timer entry (ended_at == null)
|
||||
workspaceId: null,
|
||||
}),
|
||||
getters: {
|
||||
elapsed: (s) => {
|
||||
if (!s.open) return 0;
|
||||
return (Date.now() - new Date(s.open.started_at).getTime()) / 1000;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async fetch(workspaceId) {
|
||||
this.workspaceId = workspaceId;
|
||||
const { data } = await api.get(`/time/by-workspace/${workspaceId}`);
|
||||
this.entries = data.entries;
|
||||
this.open = data.open;
|
||||
},
|
||||
async start(description = '', book_id = null) {
|
||||
const { data } = await api.post('/time/start', {
|
||||
workspace_id: this.workspaceId, description, book_id,
|
||||
});
|
||||
this.open = data.entry;
|
||||
this.entries.unshift(data.entry);
|
||||
return data.entry;
|
||||
},
|
||||
async stop() {
|
||||
const { data } = await api.post('/time/stop', { workspace_id: this.workspaceId });
|
||||
this.open = null;
|
||||
const idx = this.entries.findIndex((e) => e.id === data.entry.id);
|
||||
if (idx >= 0) this.entries[idx] = { ...data.entry, user_name: this.entries[idx].user_name };
|
||||
else this.entries.unshift(data.entry);
|
||||
return data.entry;
|
||||
},
|
||||
async remove(id) {
|
||||
await api.delete(`/time/${id}`);
|
||||
this.entries = this.entries.filter((e) => e.id !== id);
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import api from '../api';
|
||||
|
||||
// Global UI state: settings window visibility.
|
||||
export const useUiStore = defineStore('ui', {
|
||||
state: () => ({
|
||||
settingsOpen: false,
|
||||
settingsTab: 'profile',
|
||||
}),
|
||||
actions: {
|
||||
openSettings(tab = 'profile') {
|
||||
this.settingsTab = tab;
|
||||
this.settingsOpen = true;
|
||||
},
|
||||
closeSettings() {
|
||||
this.settingsOpen = false;
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -6,6 +6,7 @@ export const useWorkspaceStore = defineStore('workspace', {
|
||||
workspaces: [],
|
||||
currentId: localStorage.getItem('workspaceId') || null,
|
||||
pages: [],
|
||||
books: [],
|
||||
role: null,
|
||||
}),
|
||||
actions: {
|
||||
@@ -32,9 +33,28 @@ export const useWorkspaceStore = defineStore('workspace', {
|
||||
this.role = data.role;
|
||||
return this.pages;
|
||||
},
|
||||
async fetchBooks() {
|
||||
if (!this.currentId) return [];
|
||||
const { data } = await api.get(`/books/by-workspace/${this.currentId}`);
|
||||
this.books = data.books;
|
||||
return this.books;
|
||||
},
|
||||
async createBook(title, icon) {
|
||||
const { data } = await api.post('/books', {
|
||||
workspace_id: this.currentId, title, icon,
|
||||
});
|
||||
this.books.push(data.book);
|
||||
return data.book;
|
||||
},
|
||||
// Tree of top-level pages (book_id == null), nested via parent_id.
|
||||
tree() {
|
||||
return this.treeFor(null);
|
||||
},
|
||||
// Tree of pages inside one book.
|
||||
treeFor(bookId) {
|
||||
const inScope = this.pages.filter((p) => (p.book_id || null) === (bookId || null));
|
||||
const byParent = new Map();
|
||||
for (const p of this.pages) {
|
||||
for (const p of inScope) {
|
||||
const key = p.parent_id || 'root';
|
||||
if (!byParent.has(key)) byParent.set(key, []);
|
||||
byParent.get(key).push(p);
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import api from '../api';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
import Sidebar from '../components/Sidebar.vue';
|
||||
import Avatar from '../components/Avatar.vue';
|
||||
|
||||
const L = useLocaleStore();
|
||||
const counts = ref({});
|
||||
const users = ref([]);
|
||||
const recent = ref([]);
|
||||
|
||||
async function load() {
|
||||
const { data } = await api.get('/admin/overview');
|
||||
counts.value = data.counts;
|
||||
recent.value = data.recentUsers;
|
||||
const u = await api.get('/admin/users');
|
||||
users.value = u.data.users;
|
||||
}
|
||||
|
||||
async function setAdmin(u, val) {
|
||||
const { data } = await api.patch(`/admin/users/${u.id}`, { is_admin: val });
|
||||
u.is_admin = data.user.is_admin;
|
||||
load();
|
||||
}
|
||||
|
||||
async function removeUser(u) {
|
||||
if (!confirm(`${L.t('admin.confirm')} (${u.email})`)) return;
|
||||
await api.delete(`/admin/users/${u.id}`);
|
||||
users.value = users.value.filter((x) => x.id !== u.id);
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Sidebar />
|
||||
<main class="main">
|
||||
<h2>🛡️ {{ L.t('admin.title') }}</h2>
|
||||
<h3>{{ L.t('admin.overview') }}</h3>
|
||||
<div class="stat-grid">
|
||||
<div class="card stat">👥<strong>{{ counts.users }}</strong>{{ L.t('admin.users') }}</div>
|
||||
<div class="card stat">🏠<strong>{{ counts.workspaces }}</strong>{{ L.t('nav.dashboard') }}</div>
|
||||
<div class="card stat">📚<strong>{{ counts.books }}</strong>{{ L.t('admin.books') }}</div>
|
||||
<div class="card stat">📄<strong>{{ counts.pages }}</strong>{{ L.t('admin.pages') }}</div>
|
||||
<div class="card stat">✅<strong>{{ counts.tasks }}</strong>{{ L.t('admin.tasks') }}</div>
|
||||
<div class="card stat">⏱️<strong>{{ counts.timeEntries }}</strong>{{ L.t('admin.time') }}</div>
|
||||
</div>
|
||||
<h3>{{ L.t('admin.users') }} ({{ users.length }})</h3>
|
||||
<div class="card">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>{{ L.t('admin.name') }}</th>
|
||||
<th>{{ L.t('admin.email') }}</th>
|
||||
<th>{{ L.t('admin.role') }}</th>
|
||||
<th>{{ L.t('admin.workspaces') }}</th>
|
||||
<th>{{ L.t('admin.joined') }}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="u in users" :key="u.id">
|
||||
<td><Avatar :name="u.name" :size="24" /></td>
|
||||
<td><strong>{{ u.name }}</strong></td>
|
||||
<td class="muted">{{ u.email }}</td>
|
||||
<td>{{ u.is_admin ? `⭐ ${L.t('admin.admin')}` : L.t('admin.user') }}</td>
|
||||
<td>{{ u.workspaces }}</td>
|
||||
<td class="muted">{{ new Date(u.created_at).toLocaleDateString() }}</td>
|
||||
<td class="row">
|
||||
<button v-if="!u.is_admin" class="ghost mini" @click="setAdmin(u, true)">{{ L.t('admin.makeAdmin') }}</button>
|
||||
<button v-else class="ghost mini" @click="setAdmin(u, false)">{{ L.t('admin.unmake') }}</button>
|
||||
<button class="ghost mini" @click="removeUser(u)">🗑️</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,106 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import api from '../api';
|
||||
import { useWorkspaceStore } from '../stores/workspace';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
import Sidebar from '../components/Sidebar.vue';
|
||||
|
||||
const ws = useWorkspaceStore();
|
||||
const L = useLocaleStore();
|
||||
const router = useRouter();
|
||||
|
||||
const cursor = ref(new Date());
|
||||
cursor.value.setDate(1);
|
||||
const tasks = ref([]);
|
||||
|
||||
const year = computed(() => cursor.value.getFullYear());
|
||||
const month = computed(() => cursor.value.getMonth());
|
||||
const monthName = computed(() =>
|
||||
cursor.value.toLocaleDateString(L.locale === 'zh' ? 'zh-CN' : L.locale === 'de' ? 'de-DE' : 'en-US', {
|
||||
month: 'long', year: 'numeric',
|
||||
}),
|
||||
);
|
||||
|
||||
const cells = computed(() => {
|
||||
const first = new Date(year.value, month.value, 1);
|
||||
const startDay = (first.getDay() + 6) % 7; // Monday first
|
||||
const days = new Date(year.value, month.value + 1, 0).getDate();
|
||||
const arr = [];
|
||||
for (let i = 0; i < startDay; i++) arr.push(null);
|
||||
for (let d = 1; d <= days; d++) arr.push(new Date(year.value, month.value, d));
|
||||
return arr;
|
||||
});
|
||||
|
||||
function dayKey(d) {
|
||||
return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
|
||||
}
|
||||
const byDay = computed(() => {
|
||||
const map = {};
|
||||
for (const t of tasks.value) {
|
||||
if (!t.due_at) continue;
|
||||
const d = new Date(t.due_at);
|
||||
const k = dayKey(d);
|
||||
if (!map[k]) map[k] = [];
|
||||
map[k].push(t);
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
function isToday(d) {
|
||||
const n = new Date();
|
||||
return d && d.toDateString() === n.toDateString();
|
||||
}
|
||||
|
||||
async function load() {
|
||||
if (!ws.currentId) return;
|
||||
const from = new Date(year.value, month.value, 1).toISOString();
|
||||
const to = new Date(year.value, month.value + 1, 0, 23, 59).toISOString();
|
||||
const { data } = await api.get(`/tasks/by-workspace/${ws.currentId}`, { params: { from, to } });
|
||||
tasks.value = data.tasks;
|
||||
}
|
||||
|
||||
function prev() { cursor.value = new Date(year.value, month.value - 1, 1); }
|
||||
function next() { cursor.value = new Date(year.value, month.value + 1, 1); }
|
||||
function goToday() { const n = new Date(); cursor.value = new Date(n.getFullYear(), n.getMonth(), 1); }
|
||||
|
||||
watch(cursor, load);
|
||||
|
||||
onMounted(async () => {
|
||||
if (!ws.workspaces.length) await ws.fetchWorkspaces();
|
||||
await load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Sidebar />
|
||||
<main class="main">
|
||||
<div class="topbar">
|
||||
<h2 style="margin: 0">🗓️ {{ L.t('cal.title') }} — {{ monthName }}</h2>
|
||||
<div class="row">
|
||||
<button class="ghost" @click="prev">◀</button>
|
||||
<button class="ghost" @click="goToday">{{ L.t('cal.today') }}</button>
|
||||
<button class="ghost" @click="next">▶</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar">
|
||||
<div class="cal-head" v-for="d in ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']" :key="d">{{ d }}</div>
|
||||
<div v-for="(d, i) in cells" :key="i" class="cal-cell" :class="{ today: isToday(d) }">
|
||||
<template v-if="d">
|
||||
<div class="cal-day">{{ d.getDate() }}</div>
|
||||
<div
|
||||
v-for="t in (byDay[dayKey(d)] || [])" :key="t.id"
|
||||
class="cal-task" :class="{ done: t.status === 'done' }"
|
||||
:title="t.title"
|
||||
@click="router.push('/tasks')"
|
||||
>
|
||||
{{ t.status === 'done' ? '✅' : '📌' }} {{ t.title }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="muted">📌 {{ L.t('task.due') }} → {{ L.t('cal.title') }} ✨</p>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,106 +1,49 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import api from '../api';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useWorkspaceStore } from '../stores/workspace';
|
||||
import PageTree from '../components/PageTree.vue';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
import Sidebar from '../components/Sidebar.vue';
|
||||
import GreetingHeader from '../components/GreetingHeader.vue';
|
||||
import InviteModal from '../components/InviteModal.vue';
|
||||
import Avatar from '../components/Avatar.vue';
|
||||
|
||||
const auth = useAuthStore();
|
||||
const ws = useWorkspaceStore();
|
||||
const router = useRouter();
|
||||
const newWs = ref('');
|
||||
const newPage = ref('');
|
||||
const search = ref('');
|
||||
const results = ref([]);
|
||||
const L = useLocaleStore();
|
||||
const members = ref([]);
|
||||
|
||||
async function init() {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
await ws.fetchWorkspaces();
|
||||
await ws.fetchPages();
|
||||
fetchMembers();
|
||||
}
|
||||
|
||||
async function fetchMembers() {
|
||||
if (!ws.currentId) return;
|
||||
const { data } = await api.get(`/workspaces/${ws.currentId}/members`);
|
||||
members.value = data.members;
|
||||
}
|
||||
|
||||
async function switchWs(id) {
|
||||
ws.setCurrent(id);
|
||||
const currentName = computed(() => ws.workspaces.find((w) => w.id === ws.currentId)?.name || '');
|
||||
|
||||
onMounted(async () => {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
await ws.fetchWorkspaces();
|
||||
await ws.fetchBooks();
|
||||
await ws.fetchPages();
|
||||
fetchMembers();
|
||||
}
|
||||
|
||||
async function createWs() {
|
||||
if (!newWs.value.trim()) return;
|
||||
await ws.createWorkspace(newWs.value.trim());
|
||||
newWs.value = '';
|
||||
await ws.fetchPages();
|
||||
fetchMembers();
|
||||
}
|
||||
|
||||
async function createPage(parentId = null) {
|
||||
const title = newPage.value.trim() || 'Untitled';
|
||||
const { data } = await api.post('/pages', { workspace_id: ws.currentId, parent_id: parentId, title });
|
||||
newPage.value = '';
|
||||
await ws.fetchPages();
|
||||
router.push(`/page/${data.page.id}`);
|
||||
}
|
||||
|
||||
async function doSearch() {
|
||||
if (!search.value.trim()) { results.value = []; return; }
|
||||
const { data } = await api.get('/pages/search/query', { params: { q: search.value, workspace_id: ws.currentId } });
|
||||
results.value = data.results;
|
||||
}
|
||||
|
||||
function logout() {
|
||||
auth.logout();
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
onMounted(init);
|
||||
await fetchMembers();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<aside class="sidebar">
|
||||
<div class="row" style="justify-content: space-between">
|
||||
<strong>{{ auth.user?.name }}'s notes</strong>
|
||||
<button class="ghost" @click="logout">Logout</button>
|
||||
</div>
|
||||
<select :value="ws.currentId" @change="switchWs($event.target.value)">
|
||||
<option v-for="w in ws.workspaces" :key="w.id" :value="w.id">{{ w.name }} ({{ w.role }})</option>
|
||||
</select>
|
||||
<div class="row">
|
||||
<input v-model="newWs" placeholder="New workspace" />
|
||||
<button @click="createWs">+</button>
|
||||
</div>
|
||||
<input v-model="search" placeholder="Search pages…" @input="doSearch" />
|
||||
<div v-if="results.length" class="card">
|
||||
<div v-for="r in results" :key="r.id" class="tree-item" @click="router.push(`/page/${r.id}`)">
|
||||
{{ r.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input v-model="newPage" placeholder="New page title" @keyup.enter="createPage()" />
|
||||
<button @click="createPage()">+</button>
|
||||
</div>
|
||||
<PageTree :nodes="ws.tree()" @open="router.push(`/page/${$event}`)" @add-child="createPage($event)" />
|
||||
<div class="muted">Role: {{ ws.role }} · Members: {{ members.length }}</div>
|
||||
</aside>
|
||||
<Sidebar />
|
||||
<main class="main">
|
||||
<h2>Welcome, {{ auth.user?.name }}</h2>
|
||||
<p class="muted">Select a page on the left, or create one. Invite teammates below to collaborate in real time.</p>
|
||||
<GreetingHeader :name="auth.user?.name" />
|
||||
<p class="muted">🏠 {{ currentName }} · {{ L.t('side.role') || ws.role }}: <strong>{{ ws.role }}</strong></p>
|
||||
<InviteModal v-if="ws.currentId" :workspace-id="ws.currentId" @invited="fetchMembers" />
|
||||
<div class="card" style="margin-top: 12px">
|
||||
<h4>Members</h4>
|
||||
<div v-for="m in members" :key="m.id" class="row" style="justify-content: space-between; padding: 4px 0">
|
||||
<span>{{ m.name }} <{{ m.email }}></span>
|
||||
<span class="muted">{{ m.role }}</span>
|
||||
<h4>👥 {{ L.t('side.members') }} ({{ members.length }})</h4>
|
||||
<div v-for="m in members" :key="m.id" class="row member-row">
|
||||
<Avatar :name="m.name" :avatar="m.avatar" :size="28" />
|
||||
<span style="flex: 1">{{ m.name }} <span class="muted"><{{ m.email }}></span></span>
|
||||
<span class="pill">{{ m.role }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -3,16 +3,25 @@ import { onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { EditorContent, useEditor } from '@tiptap/vue-3';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import TaskList from '@tiptap/extension-task-list';
|
||||
import TaskItem from '@tiptap/extension-task-item';
|
||||
import Table from '@tiptap/extension-table';
|
||||
import TableRow from '@tiptap/extension-table-row';
|
||||
import TableCell from '@tiptap/extension-table-cell';
|
||||
import TableHeader from '@tiptap/extension-table-header';
|
||||
import api from '../api';
|
||||
import { connectSocket } from '../socket';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useWorkspaceStore } from '../stores/workspace';
|
||||
import PageTree from '../components/PageTree.vue';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
import Sidebar from '../components/Sidebar.vue';
|
||||
import Avatar from '../components/Avatar.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
const ws = useWorkspaceStore();
|
||||
const L = useLocaleStore();
|
||||
|
||||
const page = ref(null);
|
||||
const comments = ref([]);
|
||||
@@ -26,7 +35,7 @@ let saveTimer = null;
|
||||
let typingTimer = null;
|
||||
|
||||
const editor = useEditor({
|
||||
extensions: [StarterKit],
|
||||
extensions: [StarterKit, TaskList, TaskItem.configure({ nested: true }), Table.configure({ resizable: true }), TableRow, TableHeader, TableCell],
|
||||
content: '',
|
||||
editable: true,
|
||||
onUpdate: ({ editor }) => {
|
||||
@@ -44,7 +53,6 @@ async function save(ed = editor.value) {
|
||||
if (!page.value || !canEdit.value || !ed) return;
|
||||
const content_json = ed.getJSON();
|
||||
const content_html = ed.getHTML();
|
||||
// Persist via REST (authoritative) + broadcast via socket for instant sync
|
||||
await api.patch(`/pages/${page.value.id}`, { content_json, content_html }).catch(() => {});
|
||||
socket?.emit('page:edit', { pageId: page.value.id, content_json, content_html });
|
||||
}
|
||||
@@ -56,7 +64,6 @@ async function load() {
|
||||
const { data } = await api.get(`/pages/${id}`);
|
||||
page.value = data.page;
|
||||
comments.value = data.comments;
|
||||
canEdit.value = ['owner', 'admin', 'member'].includes(ws.role) || true;
|
||||
editor.value?.commands.setContent(data.page.content_json?.type ? data.page.content_json : (data.page.content_html || ''));
|
||||
joinRoom(id);
|
||||
} catch (e) {
|
||||
@@ -82,16 +89,18 @@ function joinRoom(pageId) {
|
||||
});
|
||||
socket.on('presence:update', ({ members }) => { presence.value = members; });
|
||||
socket.on('typing', ({ name }) => {
|
||||
typingUser.value = `${name} is typing…`;
|
||||
typingUser.value = `✍️ ${name} …`;
|
||||
clearTimeout(typingTimer);
|
||||
typingTimer = setTimeout(() => (typingUser.value = ''), 1500);
|
||||
});
|
||||
socket.on('comment:added', ({ comment }) => comments.value.push(comment));
|
||||
}
|
||||
|
||||
async function saveTitle() {
|
||||
async function saveMeta() {
|
||||
if (!page.value) return;
|
||||
const { data } = await api.patch(`/pages/${page.value.id}`, { title: page.value.title });
|
||||
const { data } = await api.patch(`/pages/${page.value.id}`, {
|
||||
title: page.value.title, book_id: page.value.book_id,
|
||||
});
|
||||
page.value = data.page;
|
||||
ws.fetchPages();
|
||||
}
|
||||
@@ -104,7 +113,7 @@ async function addComment() {
|
||||
}
|
||||
|
||||
async function removePage() {
|
||||
if (!confirm('Delete this page?')) return;
|
||||
if (!confirm('🗑️?')) return;
|
||||
await api.delete(`/pages/${page.value.id}`);
|
||||
await ws.fetchPages();
|
||||
router.push('/');
|
||||
@@ -112,7 +121,10 @@ async function removePage() {
|
||||
|
||||
onMounted(async () => {
|
||||
if (!ws.workspaces.length) await ws.fetchWorkspaces();
|
||||
if (!ws.pages.length && ws.currentId) await ws.fetchPages();
|
||||
if (!ws.pages.length && ws.currentId) {
|
||||
await ws.fetchBooks();
|
||||
await ws.fetchPages();
|
||||
}
|
||||
await load();
|
||||
});
|
||||
watch(() => route.params.id, load);
|
||||
@@ -124,46 +136,49 @@ onUnmounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<aside class="sidebar">
|
||||
<button class="ghost" @click="router.push('/')">← Dashboard</button>
|
||||
<PageTree :nodes="ws.tree()" :active-id="route.params.id" @open="router.push(`/page/${$event}`)" @add-child="router.push('/')" />
|
||||
</aside>
|
||||
<Sidebar :active-page-id="route.params.id" />
|
||||
<main class="main" v-if="page">
|
||||
<div class="topbar">
|
||||
<input v-model="page.title" @change="saveTitle" style="font-size: 22px; font-weight: 700" />
|
||||
<button class="ghost" @click="removePage">Delete</button>
|
||||
<div class="topbar wrap">
|
||||
<input v-model="page.title" @change="saveMeta" style="font-size: 22px; font-weight: 700; flex: 1" />
|
||||
<select v-model="page.book_id" @change="saveMeta" style="max-width: 200px" :title="L.t('task.book')">
|
||||
<option :value="null">📄 {{ L.t('task.none') }}</option>
|
||||
<option v-for="b in ws.books" :key="b.id" :value="b.id">{{ b.icon }} {{ b.title }}</option>
|
||||
</select>
|
||||
<button class="ghost" @click="removePage">🗑️</button>
|
||||
</div>
|
||||
<div class="presence" style="margin-bottom: 8px">
|
||||
<span class="muted">Online ({{ presence.length }}):</span>
|
||||
<span v-for="m in presence" :key="m.userId" class="avatar" :title="m.email">{{ (m.name || m.email || '?')[0].toUpperCase() }}</span>
|
||||
<span class="muted">🟢 ({{ presence.length }}):</span>
|
||||
<Avatar v-for="m in presence" :key="m.userId" :name="m.name" :size="26" />
|
||||
<span class="muted" v-if="typingUser">{{ typingUser }}</span>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<button class="ghost" @click="editor?.chain().focus().toggleBold().run()">B</button>
|
||||
<button class="ghost" @click="editor?.chain().focus().toggleBold().run()"><b>B</b></button>
|
||||
<button class="ghost" @click="editor?.chain().focus().toggleItalic().run()"><i>I</i></button>
|
||||
<button class="ghost" @click="editor?.chain().focus().toggleHeading({ level: 1 }).run()">H1</button>
|
||||
<button class="ghost" @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
|
||||
<button class="ghost" @click="editor?.chain().focus().toggleBulletList().run()">• List</button>
|
||||
<button class="ghost" @click="editor?.chain().focus().toggleBulletList().run()">• {{ L.t('side.pages') }}</button>
|
||||
<button class="ghost" @click="editor?.chain().focus().toggleTaskList().run()">☑️</button>
|
||||
<button class="ghost" @click="editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run()">▦ Table</button>
|
||||
<button class="ghost" @click="editor?.chain().focus().toggleCodeBlock().run()"></></button>
|
||||
<button @click="save()">Save</button>
|
||||
<button @click="save()">💾 {{ L.t('c.save') }}</button>
|
||||
</div>
|
||||
<EditorContent :editor="editor" class="tiptap" />
|
||||
<div class="card" style="margin-top: 16px">
|
||||
<h3>Comments ({{ comments.length }})</h3>
|
||||
<h3>💬 {{ L.t('com.title') }} ({{ comments.length }})</h3>
|
||||
<div v-for="c in comments" :key="c.id" class="comment">
|
||||
<strong>{{ c.author_name || 'Someone' }}</strong>
|
||||
<span class="muted"> · {{ new Date(c.created_at).toLocaleString() }}</span>
|
||||
<p>{{ c.body }}</p>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 8px">
|
||||
<input v-model="newComment" placeholder="Write a comment…" @keyup.enter="addComment" />
|
||||
<button @click="addComment">Post</button>
|
||||
<input v-model="newComment" :placeholder="L.t('com.ph')" @keyup.enter="addComment" />
|
||||
<button @click="addComment">{{ L.t('com.post') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<main class="main" v-else>
|
||||
<p v-if="err" style="color: red">{{ err }}</p>
|
||||
<p v-else class="muted">Loading…</p>
|
||||
<p v-else class="muted">{{ L.t('c.loading') }}</p>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import api from '../api';
|
||||
import { useWorkspaceStore } from '../stores/workspace';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
import Sidebar from '../components/Sidebar.vue';
|
||||
|
||||
const ws = useWorkspaceStore();
|
||||
const L = useLocaleStore();
|
||||
const router = useRouter();
|
||||
|
||||
const tasks = ref([]);
|
||||
const title = ref('');
|
||||
const due = ref('');
|
||||
const priority = ref('normal');
|
||||
const bookId = ref('');
|
||||
const pageId = ref('');
|
||||
|
||||
const cols = computed(() => ({
|
||||
todo: tasks.value.filter((t) => t.status === 'todo'),
|
||||
doing: tasks.value.filter((t) => t.status === 'doing'),
|
||||
done: tasks.value.filter((t) => t.status === 'done'),
|
||||
}));
|
||||
|
||||
function isOverdue(t) {
|
||||
return t.status !== 'done' && t.due_at && new Date(t.due_at) < new Date();
|
||||
}
|
||||
function fmtDate(d) {
|
||||
return d ? new Date(d).toLocaleString() : L.t('task.noDue');
|
||||
}
|
||||
|
||||
async function load() {
|
||||
if (!ws.currentId) return;
|
||||
const { data } = await api.get(`/tasks/by-workspace/${ws.currentId}`);
|
||||
tasks.value = data.tasks;
|
||||
}
|
||||
|
||||
async function create() {
|
||||
if (!title.value.trim()) return;
|
||||
const { data } = await api.post('/tasks', {
|
||||
workspace_id: ws.currentId,
|
||||
title: title.value.trim(),
|
||||
priority: priority.value,
|
||||
due_at: due.value || null,
|
||||
book_id: bookId.value || null,
|
||||
page_id: pageId.value || null,
|
||||
});
|
||||
tasks.value.unshift(data.task);
|
||||
title.value = '';
|
||||
due.value = '';
|
||||
bookId.value = '';
|
||||
pageId.value = '';
|
||||
}
|
||||
|
||||
async function setStatus(t, status) {
|
||||
const { data } = await api.patch(`/tasks/${t.id}`, { status });
|
||||
Object.assign(t, data.task);
|
||||
}
|
||||
|
||||
async function remove(t) {
|
||||
if (!confirm('🗑️?')) return;
|
||||
await api.delete(`/tasks/${t.id}`);
|
||||
tasks.value = tasks.value.filter((x) => x.id !== t.id);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (!ws.workspaces.length) await ws.fetchWorkspaces();
|
||||
await ws.fetchBooks();
|
||||
await ws.fetchPages();
|
||||
await load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Sidebar />
|
||||
<main class="main">
|
||||
<h2>✅ {{ L.t('task.title') }}</h2>
|
||||
<div class="card new-task">
|
||||
<div class="row wrap">
|
||||
<input v-model="title" :placeholder="L.t('task.ph')" @keyup.enter="create" style="flex: 2" />
|
||||
<input v-model="due" type="datetime-local" :title="L.t('task.due')" />
|
||||
<select v-model="priority" style="max-width: 130px">
|
||||
<option value="low">🟢 {{ L.t('task.low') }}</option>
|
||||
<option value="normal">🟡 {{ L.t('task.normal') }}</option>
|
||||
<option value="high">🔴 {{ L.t('task.high') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="row wrap">
|
||||
<select v-model="bookId">
|
||||
<option value="">{{ L.t('task.book') }}: {{ L.t('task.none') }}</option>
|
||||
<option v-for="b in ws.books" :key="b.id" :value="b.id">{{ b.icon }} {{ b.title }}</option>
|
||||
</select>
|
||||
<select v-model="pageId">
|
||||
<option value="">{{ L.t('task.page') }}: {{ L.t('task.none') }}</option>
|
||||
<option v-for="p in ws.pages" :key="p.id" :value="p.id">{{ p.title }}</option>
|
||||
</select>
|
||||
<button @click="create">＋ {{ L.t('task.new') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kanban">
|
||||
<div v-for="col in ['todo', 'doing', 'done']" :key="col" class="kanban-col">
|
||||
<h3>{{ L.t(`task.${col}`) }} ({{ cols[col].length }})</h3>
|
||||
<div v-for="t in cols[col]" :key="t.id" class="card task-card" :class="{ overdue: isOverdue(t) }">
|
||||
<strong>{{ t.title }}</strong>
|
||||
<div class="muted">
|
||||
{{ t.priority === 'high' ? '🔴' : t.priority === 'low' ? '🟢' : '🟡' }}
|
||||
🕒 {{ fmtDate(t.due_at) }}
|
||||
<span v-if="isOverdue(t)" class="overdue-tag">{{ L.t('task.overdue') }}</span>
|
||||
</div>
|
||||
<div class="muted">
|
||||
<span v-if="t.book_title">📚 {{ t.book_title }}</span>
|
||||
<span v-if="t.page_title" class="link" @click="router.push(`/page/${t.page_id}`)">📄 {{ t.page_title }}</span>
|
||||
</div>
|
||||
<div class="row wrap">
|
||||
<button v-if="t.status !== 'todo'" class="ghost mini" @click="setStatus(t, 'todo')">{{ L.t('task.toTodo') }}</button>
|
||||
<button v-if="t.status === 'todo'" class="ghost mini" @click="setStatus(t, 'doing')">{{ L.t('task.toDoing') }}</button>
|
||||
<button v-if="t.status === 'doing'" class="ghost mini" @click="setStatus(t, 'done')">{{ L.t('task.toDone') }}</button>
|
||||
<button v-if="t.status === 'done'" class="ghost mini" @click="setStatus(t, 'todo')">{{ L.t('task.reopen') }}</button>
|
||||
<button class="ghost mini" @click="remove(t)">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup>
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useTimeStore, formatDuration } from '../stores/time';
|
||||
import { useWorkspaceStore } from '../stores/workspace';
|
||||
import { useLocaleStore } from '../stores/locale';
|
||||
import Sidebar from '../components/Sidebar.vue';
|
||||
import Avatar from '../components/Avatar.vue';
|
||||
|
||||
const time = useTimeStore();
|
||||
const ws = useWorkspaceStore();
|
||||
const L = useLocaleStore();
|
||||
|
||||
const total = computed(() =>
|
||||
time.entries.reduce((s, e) => s + (e.duration_seconds || 0), 0),
|
||||
);
|
||||
|
||||
function fmt(s) {
|
||||
return s ? new Date(s).toLocaleString() : '—';
|
||||
}
|
||||
|
||||
async function remove(id) {
|
||||
if (!confirm('🗑️?')) return;
|
||||
await time.remove(id);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (!ws.workspaces.length) await ws.fetchWorkspaces();
|
||||
if (ws.currentId) await time.fetch(ws.currentId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Sidebar />
|
||||
<main class="main">
|
||||
<h2>⏱️ {{ L.t('time.title') }}</h2>
|
||||
<div v-if="time.open" class="card running-banner">
|
||||
🔴 {{ L.t('time.running') }} <strong>{{ time.open.description || '…' }}</strong>
|
||||
<span v-if="time.open.book_id" class="muted">📚</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>{{ L.t('time.entries') }} · {{ L.t('time.total') }}: {{ formatDuration(total) }}</h3>
|
||||
<p v-if="!time.entries.length" class="muted">{{ L.t('time.noEntries') }}</p>
|
||||
<table v-else class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ L.t('time.started') }}</th>
|
||||
<th>{{ L.t('time.ended') }}</th>
|
||||
<th>{{ L.t('time.dur') }}</th>
|
||||
<th>{{ L.t('time.book') }}</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="e in time.entries" :key="e.id" :class="{ running: !e.ended_at }">
|
||||
<td>{{ fmt(e.started_at) }}</td>
|
||||
<td>{{ e.ended_at ? fmt(e.ended_at) : `🔴 ${L.t('time.running')}` }}</td>
|
||||
<td><strong>{{ e.duration_seconds != null ? formatDuration(e.duration_seconds) : '…' }}</strong></td>
|
||||
<td>{{ e.book_title ? `📚 ${e.book_title}` : L.t('time.none') }}{{ e.description ? ` — ${e.description}` : '' }}</td>
|
||||
<td><Avatar :name="e.user_name" :size="22" /></td>
|
||||
<td><button class="ghost mini" @click="remove(e.id)">🗑️</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user