@allbluecn/web-app 0.3.0

package/src/styles/globals.css

@@ -0,0 +1,477 @@
+@import './_variables.scss';
+@import './_keyframe-animations.scss';
+@import "tailwindcss";
+
+@source "../";
+@source "../../../../packages/ui/src/**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --sidebar-width: 16rem;
+  --sidebar-width-icon: 3rem;
+  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
+  --font-heading: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
+  --font-serif: 'Instrument Serif', ui-serif, Georgia, Cambria, 'Times New Roman', serif;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+
+  --color-1: hsl(0 100% 63%);
+  --color-2: hsl(270 100% 63%);
+  --color-3: hsl(210 100% 63%);
+  --color-4: hsl(195 100% 63%);
+  --color-5: hsl(90 100% 63%);
+
+  --animate-rainbow: rainbow 5s linear infinite;
+
+  @keyframes rainbow {
+    0% { background-position: 0%; }
+    100% { background-position: 200%; }
+  }
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --container-2xl: 1400px;
+
+  --animate-gradient: gradient 8s linear infinite;
+  @keyframes gradient {
+  to {
+    background-position: var(--bg-size, 300%) 0;
+    }
+  }
+  --animate-shiny-text: shiny-text 8s infinite
+;
+  @keyframes shiny-text {
+  0%, 90%, 100% {
+    background-position: calc(-100% - var(--shiny-width)) 0;}
+  30%, 60% {
+    background-position: calc(100% + var(--shiny-width)) 0;}}
+  --animate-line-shadow: line-shadow 15s linear infinite;
+  @keyframes line-shadow {
+  0% {
+    background-position: 0 0;}
+  100% {
+    background-position: 100% -100%;}}
+  --animate-rainbow: rainbow var(--speed, 2s) infinite linear;
+  --color-color-5: var(--color-5);
+  --color-color-4: var(--color-4);
+  --color-color-3: var(--color-3);
+  --color-color-2: var(--color-2);
+  --color-color-1: var(--color-1);
+  @keyframes rainbow {
+  0% {
+    background-position: 0%;}
+  100% {
+    background-position: 200%;}}
+  --animate-aurora: aurora 8s ease-in-out infinite alternate;
+  @keyframes aurora {
+  0% {
+    background-position: 0% 50%;
+    transform: rotate(-5deg) scale(0.9);}
+  25% {
+    background-position: 50% 100%;
+    transform: rotate(5deg) scale(1.1);}
+  50% {
+    background-position: 100% 50%;
+    transform: rotate(-3deg) scale(0.95);}
+  75% {
+    background-position: 50% 0%;
+    transform: rotate(3deg) scale(1.05);}
+  100% {
+    background-position: 0% 50%;
+    transform: rotate(-5deg) scale(0.9);}}}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+
+  --sidebar: oklch(0.982 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.95 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --color-1: oklch(66.2% 0.225 25.9);
+  --color-2: oklch(60.4% 0.26 302);
+  --color-3: oklch(69.6% 0.165 251);
+  --color-4: oklch(80.2% 0.134 225);
+  --color-5: oklch(90.7% 0.231 133);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+
+  --sidebar: oklch(0.175 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.92 0 0);
+  --sidebar-primary-foreground: oklch(0.205 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+
+  --primary: oklch(80.517% 0.20237 152.675 / 0.909);
+  /* --primary: oklch(0.704 0.191 84.429); */
+  --primary-foreground: oklch(0.145 0 0);
+
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.708 0 0);
+
+  --chart-1: oklch(0.704 0.191 84.429);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.223 10.62);
+  --color-1: oklch(66.2% 0.225 25.9);
+  --color-2: oklch(60.4% 0.26 302);
+  --color-3: oklch(69.6% 0.165 251);
+  --color-4: oklch(80.2% 0.134 225);
+  --color-5: oklch(90.7% 0.231 133);
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+    box-sizing: border-box;
+  }
+
+  html, body {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+
+  /* 移除焦点边框 */
+  *:focus-visible {
+    outline: none !important;
+    ring: none !important;
+  }
+
+  *:focus {
+    outline: none !important;
+  }
+}
+
+::view-transition-old(root), ::view-transition-new(root) {
+    animation: none;
+    mix-blend-mode: normal;}
+
+/* AnimatedThemeToggler 初始 clip-path：在扩散动画启动前，
+   将 new snapshot 锁定在 collapsed 状态，避免瞬显闪烁。
+   data-magicui-theme-vt 由组件在 startViewTransition 前设置、finished 后清除。 */
+[data-magicui-theme-vt="active"]::view-transition-new(root) {
+    clip-path: var(--magicui-theme-vt-clip-from);
+}
+
+/* 分享页主题切换：切换瞬间临时启用全局颜色 transition，
+   过渡完成后移除 class（不影响日常 hover 等交互动画）。
+   禁用 view transition 的 clipPath 扩散——扩散边缘经过画板彩色组件
+   与版本目录半透明背景时产生视觉闪烁。 */
+html.theme-transitioning,
+html.theme-transitioning *,
+html.theme-transitioning *::before,
+html.theme-transitioning *::after {
+    transition: background-color 0.3s ease, border-color 0.3s ease,
+        color 0.3s ease, fill 0.3s ease, stroke 0.3s ease,
+        box-shadow 0.3s ease, outline-color 0.3s ease !important;
+}
+
+.bg-dot-grid {
+  background-image: radial-gradient(circle, var(--color-border) 0.5px, transparent 0.5px);
+  background-size: 20px 20px;
+}
+
+/* ===== TipTap / ProseMirror Editor Styling ===== */
+
+.prose :where(table) {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  overflow: hidden;
+}
+
+.prose :where(th, td) {
+  border: 1px solid var(--color-border);
+  padding: 8px 12px;
+  min-width: 80px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.prose :where(th) {
+  background: var(--color-muted);
+  font-weight: 600;
+}
+
+.prose :where(pre) {
+  background: var(--color-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 16px;
+  overflow-x: auto;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.prose :where(code) {
+  font-size: 0.875em;
+  font-weight: 400;
+}
+
+.prose :where(:not(pre) > code) {
+  background: var(--color-muted);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.85em;
+}
+
+.prose :where(blockquote) {
+  border-left: 3px solid var(--color-border);
+  padding-left: 16px;
+  margin: 16px 0;
+  font-style: italic;
+  color: var(--color-muted-foreground);
+}
+
+.prose :where(ul) {
+  list-style-type: disc;
+  padding-left: 1.5em;
+}
+
+.prose :where(ol) {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+}
+
+.prose :where(li) {
+  margin: 4px 0;
+}
+
+.prose :where(ul ul, ol ul) {
+  list-style-type: circle;
+}
+
+.prose :where(ol ol, ul ol) {
+  list-style-type: lower-alpha;
+}
+
+.prose :where(ul[data-type="taskList"]) {
+  list-style: none;
+  padding-left: 0;
+}
+
+.prose :where(ul[data-type="taskList"] li) {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.prose :where(ul[data-type="taskList"] li > label) {
+  flex: 0 0 auto;
+  margin-top: 3px;
+  user-select: none;
+}
+
+.prose :where(ul[data-type="taskList"] li > label input[type="checkbox"]) {
+  cursor: pointer;
+  accent-color: var(--color-primary);
+}
+
+.prose :where(hr) {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 24px 0;
+}
+
+.prose :where(img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+.ProseMirror.ProseMirror-focused .is-empty::before,
+.ProseMirror.ProseMirror-focused .is-editor-empty::before {
+  color: var(--color-muted-foreground);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.knowledge-doc-editor .notion-like-editor-header {
+  display: none !important;
+}
+
+/* Suppress TipTap placeholder when story-editor-no-placeholder is on container (before first click) */
+.story-editor-no-placeholder .is-empty::before,
+.story-editor-no-placeholder .is-editor-empty::before,
+.story-editor-no-placeholder .ProseMirror .is-empty::before,
+.story-editor-no-placeholder .ProseMirror .is-editor-empty::before {
+  content: none !important;
+}
+
+.tiptap-doc-reference {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 10px;
+  border-radius: 4px;
+  color: var(--tt-theme-text);
+  background-color: var(--tt-gray-light-a-100);
+  font-size: 0.9em;
+  line-height: 1;
+  cursor: pointer;
+  margin: 4px 4px;
+}
+
+/* When a highlight mark wraps a doc reference, remove the mark's background to avoid double-background */
+.tiptap.ProseMirror mark:has(.tiptap-doc-reference) {
+  background-color: transparent !important;
+}
+
+.dark .tiptap-doc-reference {
+}
+
+.tiptap-doc-reference:hover {
+  text-decoration: underline;
+}
+
+.tiptap-doc-reference-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+.tiptap-doc-reference-icon svg {
+  display: block;
+  width: 0.9em;
+  height: 0.9em;
+  margin-right: 4px;
+  color: inherit;
+  stroke: currentColor;
+}
+
+[data-selector="tiptap-reference-dropdown-menu"],
+[data-selector="tiptap-mention-dropdown-menu"] {
+  min-width: 280px;
+  max-width: 360px;
+}
+
+.context-menu {
+  font-size: 0.875rem;
+}
+
+/* Story module TipTap editor: compact padding, left-align with title */
+.notion-like-editor-content .tiptap.ProseMirror.notion-like-editor.story-editor {
+  padding: 0.5rem 1.5rem 0.5rem;
+  padding-left: 1.5rem;
+}
+/* emoji-picker-react Reactions mode: compact height with matching pill radius */
+.epr-reactions {
+  height: 40px !important;
+  border-radius: 20px !important;
+}

package/src/types/jest-dom-vitest.d.ts

@@ -0,0 +1,31 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// Vitest 4 类型兼容层：@testing-library/jest-dom 的 vitest.d.ts 增强 `module 'vitest'` 的
+// Assertion 接口，但 Vitest 4 的 `vitest` 模块仅 re-export `@vitest/expect` 的
+// `Assertion`（dist/index.d.ts:15），接口定义在 `@vitest/expect` 包内，跨包接口合并不生效。
+// 这里显式对 `@vitest/expect` 的 `Assertion` / `AsymmetricMatchersContaining` 做增强，
+// 使 `toBeInTheDocument` / `toBeDisabled` 等 jest-dom matcher 类型可用。
+// 运行时 matcher 注册在 src/__tests__/setup.ts 的 `import '@testing-library/jest-dom/vitest'`。
+import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers'
+
+declare module '@vitest/expect' {
+  interface Assertion<T = any>
+    extends TestingLibraryMatchers<any, T> {}
+  interface AsymmetricMatchersContaining
+    extends TestingLibraryMatchers<any, any> {}
+}

package/src/types/outline.ts

@@ -0,0 +1 @@
+export * from '@allbluecn/shared/types/outline'

package/src/types/prd.ts

@@ -0,0 +1 @@
+export * from '@allbluecn/shared/types/prd'

package/src/types/project.ts

@@ -0,0 +1,103 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { LucideIcon } from "lucide-react";
+
+// 项目成员角色（字面量用于类型标注，DB 实际存储为 string）
+export type ProjectRole = "owner" | "admin" | "member" | "viewer";
+export type MemberStatus = "active" | "invited" | "suspended";
+
+// 用户精简信息（用于成员/活动展示）
+export interface ProjectUserBrief {
+  id: string;
+  username: string;
+  email: string;
+  avatarConfig?: unknown;
+  bgShape?: string | null;
+  bgColor?: string | null;
+}
+
+// 项目
+export interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  icon: string;
+  ownerId: string;
+  owner?: ProjectUserBrief;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+// 项目列表项（含成员数等汇总）
+export interface ProjectListItem extends Project {
+  memberCount: number;
+  activityCount: number;
+}
+
+// 项目成员（role/status 来自 DB，为 string）
+export interface ProjectMember {
+  id: string;
+  projectId: string;
+  userId: string;
+  role: string;
+  status: string;
+  joinedAt: Date;
+  user?: ProjectUserBrief;
+}
+
+// 项目活动记录（action/metadata 来自 DB，为 string / JSON 值）
+export interface ProjectActivity {
+  id: string;
+  projectId: string;
+  userId: string;
+  action: string;
+  targetType: string | null;
+  targetId: string | null;
+  metadata: unknown;
+  createdAt: Date;
+  user?: ProjectUserBrief;
+}
+
+// 项目板块 key（6 个固定板块）
+export type ProjectModuleKey =
+  | "requirement"
+  | "prd"
+  | "design"
+  | "testcase"
+  | "bug"
+  | "acceptance";
+
+// 板块概览（卡片网格用，mock）
+export interface ProjectModuleOverview {
+  key: ProjectModuleKey;
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  count: number;
+  lastUpdatedAt: Date | null;
+}
+
+// 板块列表项（mock，用于板块详情页）
+export interface ProjectModuleItem {
+  id: string;
+  title: string;
+  status: string;
+  priority: string;
+  assignee?: string;
+  updatedAt: Date;
+}

package/src/types/prototype.ts

@@ -0,0 +1 @@
+export * from '@allbluecn/shared/types/prototype'

package/src/types/start-authjs.d.ts

@@ -0,0 +1,33 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+declare module '@auth/core' {
+  interface User {
+    role?: string | null
+    avatarConfig?: Record<string, number> | null
+    bgShape?: string | null
+    bgColor?: string | null
+    aiProvider?: string | null
+    aiModel?: string | null
+    hasAiKey?: boolean | null
+    timezone?: string | null
+    remember?: boolean
+    stayLoggedIn?: boolean
+  }
+}
+
+export {}

package/src/types/workspace.ts

@@ -0,0 +1,18 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export type WorkspaceRole = "owner" | "admin" | "member" | "viewer";