@allbluecn/web-app 0.3.0

package/src/components/magicui/sparkles-text.tsx

@@ -0,0 +1,166 @@
+// 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 { CSSProperties, ReactElement, useEffect, useState } from "react"
+import { m } from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+interface Sparkle {
+  id: string
+  x: string
+  y: string
+  color: string
+  delay: number
+  scale: number
+  lifespan: number
+}
+
+const Sparkle: React.FC<Sparkle> = ({ id, x, y, color, delay, scale }) => {
+  return (
+    <m.svg
+      key={id}
+      className="pointer-events-none absolute z-20"
+      initial={{ opacity: 0, left: x, top: y }}
+      animate={{
+        opacity: [0, 1, 0],
+        scale: [0, scale, 0],
+        rotate: [75, 120, 150],
+      }}
+      transition={{ duration: 0.8, repeat: Infinity, delay }}
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+    >
+      <path
+        d="M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z"
+        fill={color}
+      />
+    </m.svg>
+  )
+}
+
+interface SparklesTextProps {
+  /**
+   * @default <div />
+   * @type ReactElement
+   * @description
+   * The component to be rendered as the text
+   * */
+  as?: ReactElement
+
+  /**
+   * @default ""
+   * @type string
+   * @description
+   * The className of the text
+   */
+  className?: string
+
+  /**
+   * @required
+   * @type ReactNode
+   * @description
+   * The content to be displayed
+   * */
+  children: React.ReactNode
+
+  /**
+   * @default 10
+   * @type number
+   * @description
+   * The count of sparkles
+   * */
+  sparklesCount?: number
+
+  /**
+   * @default "{first: '#9E7AFF', second: '#FE8BBB'}"
+   * @type string
+   * @description
+   * The colors of the sparkles
+   * */
+  colors?: {
+    first: string
+    second: string
+  }
+}
+
+export const SparklesText: React.FC<SparklesTextProps> = ({
+  children,
+  colors = { first: "#9E7AFF", second: "#FE8BBB" },
+  className,
+  sparklesCount = 10,
+  ...props
+}) => {
+  const [sparkles, setSparkles] = useState<Sparkle[]>([])
+
+  useEffect(() => {
+    const generateStar = (): Sparkle => {
+      const starX = `${Math.random() * 100}%`
+      const starY = `${Math.random() * 100}%`
+      const color = Math.random() > 0.5 ? colors.first : colors.second
+      const delay = Math.random() * 2
+      const scale = Math.random() * 1 + 0.3
+      const lifespan = Math.random() * 10 + 5
+      const id = `${starX}-${starY}-${Date.now()}`
+      return { id, x: starX, y: starY, color, delay, scale, lifespan }
+    }
+
+    const initializeStars = () => {
+      const newSparkles = Array.from({ length: sparklesCount }, generateStar)
+      setSparkles(newSparkles)
+    }
+
+    const updateStars = () => {
+      setSparkles((currentSparkles) =>
+        currentSparkles.map((star) => {
+          if (star.lifespan <= 0) {
+            return generateStar()
+          } else {
+            return { ...star, lifespan: star.lifespan - 0.1 }
+          }
+        })
+      )
+    }
+
+    initializeStars()
+    const interval = setInterval(updateStars, 500)
+
+    return () => clearInterval(interval)
+  }, [colors.first, colors.second, sparklesCount])
+
+  return (
+    <div
+      className={cn("text-6xl font-bold", className)}
+      {...props}
+      style={
+        {
+          "--sparkles-first-color": `${colors.first}`,
+          "--sparkles-second-color": `${colors.second}`,
+        } as CSSProperties
+      }
+    >
+      <span className="relative inline-block">
+        {sparkles.map((sparkle) => (
+          <Sparkle key={sparkle.id} {...sparkle} />
+        ))}
+        <strong>{children}</strong>
+      </span>
+    </div>
+  )
+}

package/src/components/magicui/striped-pattern.tsx

@@ -0,0 +1,67 @@
+// 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 React, { useId } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface StripedPatternProps extends React.SVGProps<SVGSVGElement> {
+  direction?: "left" | "right"
+}
+
+export function StripedPattern({
+  direction = "left",
+  className,
+  width = 10,
+  height = 10,
+  ...props
+}: StripedPatternProps) {
+  const id = useId()
+  const w = Number(width)
+  const h = Number(height)
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full stroke-[0.5]",
+        className
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <defs>
+        <pattern id={id} width={w} height={h} patternUnits="userSpaceOnUse">
+          {direction === "left" ? (
+            <>
+              <line x1="0" y1={h} x2={w} y2="0" stroke="currentColor" />
+              <line x1={-w} y1={h} x2="0" y2="0" stroke="currentColor" />
+              <line x1={w} y1={h} x2={w * 2} y2="0" stroke="currentColor" />
+            </>
+          ) : (
+            <>
+              <line x1="0" y1="0" x2={w} y2={h} stroke="currentColor" />
+              <line x1={-w} y1="0" x2="0" y2={h} stroke="currentColor" />
+              <line x1={w} y1="0" x2={w * 2} y2={h} stroke="currentColor" />
+            </>
+          )}
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${id})`} />
+    </svg>
+  )
+}

package/src/components/magicui/word-rotate.tsx

@@ -0,0 +1,64 @@
+// 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 { useEffect, useState } from "react"
+import { AnimatePresence, m, type MotionProps } from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+interface WordRotateProps {
+  words: string[]
+  duration?: number
+  motionProps?: MotionProps
+  className?: string
+}
+
+export function WordRotate({
+  words,
+  duration = 2500,
+  motionProps = {
+    initial: { opacity: 0, y: -50 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 50 },
+    transition: { duration: 0.25, ease: "easeOut" },
+  },
+  className,
+}: WordRotateProps) {
+  const [index, setIndex] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((prevIndex) => (prevIndex + 1) % words.length)
+    }, duration)
+
+    return () => clearInterval(interval)
+  }, [words, duration])
+
+  return (
+    <span className="inline-flex overflow-hidden">
+      <AnimatePresence mode="wait">
+        <m.span
+          key={words[index]}
+          className={cn(className)}
+          {...motionProps}
+        >
+          {words[index]}
+        </m.span>
+      </AnimatePresence>
+    </span>
+  )
+}

package/src/components/mindmap/mindmap-doc-editor.tsx

@@ -0,0 +1,181 @@
+// 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 { lazy, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { getClientI18n } from "@/lib/i18n/client"
+import { useDebouncedCallback, EDITOR_AUTO_SAVE_MS } from "@/lib/pacer"
+import { updateDocumentFn } from "@/server/serverFns/knowledge"
+import { useEditorWidth, useMindmapWidthStyles } from "@/components/knowledge/editor/editor-width-context"
+import { DocHeader } from "@/components/knowledge/editor/doc-header"
+import { parseMindmapContent } from "@allbluecn/tiptap/mindmap/lib/default-mindmap-data"
+import type { MindElixirData } from "mind-elixir"
+
+const MindMap = lazy(() =>
+  import("@allbluecn/tiptap/mindmap/mind-map").then((m) => ({ default: m.MindMap })),
+)
+const MindMapControls = lazy(() =>
+  import("@allbluecn/tiptap/mindmap/mind-map").then((m) => ({ default: m.MindMapControls })),
+)
+
+interface CreatorInfo {
+  username?: string | null
+  avatarConfig?: any
+  bgShape?: string | null
+  bgColor?: string | null
+}
+
+interface MindmapDocEditorProps {
+  document: {
+    id: string
+    kbId: string
+    title: string
+    content: any
+    updatedAt?: string | Date | null
+    tags?: string[]
+    creator?: CreatorInfo | null
+  }
+  kbName?: string | null
+}
+
+export function MindmapDocEditor({ document, kbName }: MindmapDocEditorProps) {
+  const { t } = useTranslation("mindmap")
+  const { onDocTitleChanged } = useEditorWidth()
+  const { headerMaxWidth, contentMaxWidth } = useMindmapWidthStyles()
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [displayTitle, setDisplayTitle] = useState(document.title)
+  const [displayTags, setDisplayTags] = useState<string[]>(
+    (Array.isArray(document.tags) ? document.tags : []) as string[],
+  )
+  const [lastSavedAt, setLastSavedAt] = useState<Date | null>(
+    document.updatedAt ? new Date(document.updatedAt) : null,
+  )
+  const latestContent = useRef<MindElixirData | null>(null)
+  const docId = useRef(document.id)
+  docId.current = document.id
+
+  const parsed = useMemo(() => parseMindmapContent(document.content), [document.content])
+  const [mindmapData, setMindmapData] = useState<MindElixirData>(parsed)
+
+  const doSave = useCallback(async (content: MindElixirData) => {
+    setSaving(true)
+    try {
+      await updateDocumentFn({ data: { id: docId.current, content } })
+      setDirty(false)
+      setLastSavedAt(new Date())
+    } catch (e) {
+      console.error(getClientI18n().t("errors.autoSaveFailed", { ns: "mindmap" }), e)
+    } finally {
+      setSaving(false)
+    }
+  }, [])
+  const doSaveRef = useRef(doSave)
+  doSaveRef.current = doSave
+  const dirtyRef = useRef(dirty)
+  dirtyRef.current = dirty
+
+  const debouncedSave = useDebouncedCallback(
+    () => {
+      const c = latestContent.current
+      if (c) doSaveRef.current(c)
+    },
+    { wait: EDITOR_AUTO_SAVE_MS },
+  )
+
+  const handleChange = useCallback((newData: MindElixirData) => {
+    latestContent.current = newData
+    setMindmapData(newData)
+    setDirty(true)
+    debouncedSave()
+  }, [])
+
+  const handleTitleChange = useCallback(async (newTitle: string) => {
+    setDisplayTitle(newTitle)
+    try {
+      await updateDocumentFn({ data: { id: docId.current, title: newTitle } })
+      onDocTitleChanged()
+    } catch (e) {
+      console.error(getClientI18n().t("errors.titleUpdateFailed", { ns: "mindmap" }), e)
+    }
+  }, [onDocTitleChanged])
+
+  const handleTagsChange = useCallback(async (newTags: string[]) => {
+    setDisplayTags(newTags)
+    try {
+      await updateDocumentFn({ data: { id: docId.current, tags: newTags } })
+    } catch (e) {
+      console.error(getClientI18n().t("errors.tagsUpdateFailed", { ns: "mindmap" }), e)
+    }
+  }, [])
+
+  useEffect(() => {
+    setDisplayTitle(document.title)
+    setDisplayTags((Array.isArray(document.tags) ? document.tags : []) as string[])
+    setLastSavedAt(document.updatedAt ? new Date(document.updatedAt) : null)
+    setMindmapData(parsed)
+  }, [document.title, document.tags, document.updatedAt, parsed])
+
+  useEffect(() => {
+    if (!dirty) return
+    const interval = setInterval(() => {
+      const c = latestContent.current
+      if (c) doSaveRef.current(c)
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [dirty])
+
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      if (dirtyRef.current) {
+        const c = latestContent.current
+        if (c) doSaveRef.current(c)
+      }
+    }
+    window.addEventListener("beforeunload", handleBeforeUnload)
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload)
+  }, [])
+
+  return (
+    <div className="mindmap-doc-editor flex flex-col h-full relative min-w-0">
+      {saving && (
+        <div className="absolute top-3 right-4 z-10 text-xs text-muted-foreground bg-background/80 px-2 py-0.5 rounded">
+          {t("saving")}
+        </div>
+      )}
+      <div className="px-20 pt-6 pb-2 mx-auto w-full" style={{ maxWidth: headerMaxWidth }}>
+        <DocHeader
+          title={displayTitle}
+          titlePlaceholder={t("titlePlaceholder")}
+          onTitleChange={handleTitleChange}
+          creator={document.creator ?? undefined}
+          kbName={kbName}
+          savedAt={lastSavedAt}
+          tags={displayTags}
+          onTagsChange={handleTagsChange}
+        />
+      </div>
+      <div className="flex-1 min-h-0 min-w-0 px-6 pb-6 mx-auto w-full" style={{ maxWidth: contentMaxWidth }}>
+        <div className="relative w-full h-full rounded-lg overflow-hidden">
+          <MindMap data={mindmapData} onChange={handleChange} fit>
+            <MindMapControls position="top-right" showFullscreen={false} />
+          </MindMap>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/plugin-slots/__tests__/plugin-nav-items.test.tsx

@@ -0,0 +1,16 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import { PluginNavItems } from '../plugin-nav-items'
+
+vi.mock('@/plugins/ui.gen', () => ({
+  navItems: [],
+  settingsTabs: [],
+  dashboardWidgets: [],
+}))
+
+describe('PluginNavItems', () => {
+  it('无插件贡献时渲染 null（空 slot 不留痕迹）', () => {
+    const { container } = render(<PluginNavItems />)
+    expect(container).toBeEmptyDOMElement()
+  })
+})

package/src/components/plugin-slots/__tests__/plugin-settings-tabs.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { mergeSettingsGroups } from '../plugin-settings-tabs'
+
+describe('mergeSettingsGroups', () => {
+  it('空贡献时返回宿主 groups 原样', () => {
+    const host = [{ titleKey: 'tabs.general', tabs: [] }] as never[]
+    expect(mergeSettingsGroups(host, [])).toEqual(host)
+  })
+
+  it('有 group 匹配的 tab 并入该组', () => {
+    const host = [{ titleKey: 'tabs.billing', tabs: [] }] as never[]
+    const merged = mergeSettingsGroups(host, [{
+      labelKey: 'x',
+      path: '/x',
+      icon: (() => null) as never,
+      group: 'tabs.billing',
+    } as never])
+    expect((merged[0] as { tabs: unknown[] }).tabs.length).toBe(1)
+  })
+
+  it('无 group 的归入 plugins 组（追加末尾）', () => {
+    const host = [{ titleKey: 'tabs.billing', tabs: [] }] as never[]
+    const merged = mergeSettingsGroups(host, [{
+      labelKey: 'x',
+      path: '/x',
+      icon: (() => null) as never,
+    } as never])
+    expect(merged.at(-1)?.titleKey).toBe('tabs.plugins')
+  })
+})

package/src/components/plugin-slots/plugin-nav-items.tsx

@@ -0,0 +1,12 @@
+import { navItems } from '@/plugins/ui.gen'
+
+export function PluginNavItems() {
+  if (navItems.length === 0) return null
+  return (
+    <>
+      {navItems.map((Item, i) => (
+        <Item key={i} />
+      ))}
+    </>
+  )
+}

package/src/components/plugin-slots/plugin-settings-tabs.tsx

@@ -0,0 +1,30 @@
+import type { SettingsGroup } from '../../routes/_nav/settings/-settings-tabs'
+import type { SettingsTabContribution } from '@allbluecn/kernel'
+import type { LucideIcon } from 'lucide-react'
+import { settingsTabs } from '@/plugins/ui.gen'
+
+export function mergeSettingsGroups(
+  host: SettingsGroup[],
+  contributed = settingsTabs,
+): SettingsGroup[] {
+  if (contributed.length === 0) return host
+
+  const groups: SettingsGroup[] = host.map((g) => ({
+    ...g,
+    tabs: [
+      ...g.tabs,
+      ...contributed
+        .filter((t) => t.group === g.titleKey)
+        .map((t) => ({ ...t, icon: t.icon as unknown as LucideIcon })),
+    ],
+  }))
+
+  const rest = contributed.filter((t) => !t.group)
+  if (rest.length) {
+    groups.push({
+      titleKey: 'tabs.plugins',
+      tabs: rest.map((t) => ({ ...t, icon: t.icon as unknown as LucideIcon })),
+    })
+  }
+  return groups
+}

package/src/components/plugin-slots/plugin-widgets.tsx

@@ -0,0 +1,13 @@
+import { dashboardWidgets } from '@/plugins/ui.gen'
+
+export function PluginWidgets() {
+  if (dashboardWidgets.length === 0) return null
+
+  return (
+    <>
+      {dashboardWidgets.map((W, i) => (
+        <W key={i} />
+      ))}
+    </>
+  )
+}