From ea1b0222a853fe41ad401d4e26f285072ff73dad Mon Sep 17 00:00:00 2001 From: wux_labs Date: Thu, 2 Jan 2025 22:54:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A1=B5=E9=9D=A2=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E8=AE=BE=E7=BD=AE=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/index.ts | 2 + src/components/menus/toolbar/Classic.ts | 10 ++ src/components/menus/toolbar/Ribbon.ts | 10 ++ .../menus/toolbar/page/BackgroundColor.ts | 119 ++++++++++++++++++ 4 files changed, 141 insertions(+) create mode 100644 src/components/menus/toolbar/page/BackgroundColor.ts diff --git a/src/components/index.ts b/src/components/index.ts index d23d21b..c5214c8 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -75,6 +75,7 @@ import { DeleteTable } from "./menus/toolbar/table/DeleteTable.ts"; import { Diagrams } from "./menus/toolbar/tools/Diagrams.ts"; import { ToggleToc } from "./menus/toolbar/page/ToggleToc.ts"; +import { BackgroundColor } from "./menus/toolbar/page/BackgroundColor.ts"; // 注册组件 defineCustomElement('uai-editor-header', Header); @@ -151,3 +152,4 @@ defineCustomElement('uai-editor-table-menu-delete-table', DeleteTable); defineCustomElement('uai-editor-tools-menu-diagrams', Diagrams); defineCustomElement('uai-editor-page-menu-toggle-toc', ToggleToc); +defineCustomElement('uai-editor-page-menu-background-color', BackgroundColor); diff --git a/src/components/menus/toolbar/Classic.ts b/src/components/menus/toolbar/Classic.ts index 38fc692..411835e 100644 --- a/src/components/menus/toolbar/Classic.ts +++ b/src/components/menus/toolbar/Classic.ts @@ -68,6 +68,7 @@ import { DeleteTable } from "./table/DeleteTable.ts"; import { Diagrams } from "./tools/Diagrams.ts"; import { ToggleToc } from "./page/ToggleToc.ts"; +import { BackgroundColor } from "./page/BackgroundColor.ts"; /** * 传统菜单栏 @@ -162,6 +163,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener { // 页面菜单 pageMenuToggleToc!: ToggleToc; + pageMenuBackgroundColor!: BackgroundColor; constructor(defaultToolbarMenus: Record[]) { super(); @@ -403,6 +405,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener { this.pageMenuToggleToc = new ToggleToc({ menuType: "button", enable: true, header: "classic", hideText: false }); this.eventComponents.push(this.pageMenuToggleToc); + + this.pageMenuBackgroundColor = new BackgroundColor({ menuType: "popup", enable: true, header: "classic", hideText: false }); + this.eventComponents.push(this.pageMenuBackgroundColor); } /** * 创建基础菜单 @@ -569,5 +574,10 @@ export class Classic extends HTMLElement implements UAIEditorEventListener { group1.classList.add("uai-classic-virtual-group"); this.classicMenuPageGroup.appendChild(group1); group1.appendChild(this.pageMenuToggleToc); + + const group2 = document.createElement("div"); + group2.classList.add("uai-classic-virtual-group"); + this.classicMenuPageGroup.appendChild(group2); + group2.appendChild(this.pageMenuBackgroundColor); } } \ No newline at end of file diff --git a/src/components/menus/toolbar/Ribbon.ts b/src/components/menus/toolbar/Ribbon.ts index 96ace4a..0dfff40 100644 --- a/src/components/menus/toolbar/Ribbon.ts +++ b/src/components/menus/toolbar/Ribbon.ts @@ -70,6 +70,7 @@ import { DeleteTable } from "./table/DeleteTable.ts"; import { Diagrams } from "./tools/Diagrams.ts"; import { ToggleToc } from "./page/ToggleToc.ts"; +import { BackgroundColor } from "./page/BackgroundColor.ts"; /** * 经典菜单栏 @@ -165,6 +166,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener { // 页面菜单 pageMenuToggleToc!: ToggleToc; + pageMenuBackgroundColor!: BackgroundColor; constructor(defaultToolbarMenus: Record[]) { super(); @@ -426,6 +428,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener { this.pageMenuToggleToc = new ToggleToc({ menuType: "button", enable: true, huge: true, hideText: false }); this.eventComponents.push(this.pageMenuToggleToc); + + this.pageMenuBackgroundColor = new BackgroundColor({ menuType: "popup", enable: true, huge: true, hideText: false }); + this.eventComponents.push(this.pageMenuBackgroundColor); } /** @@ -674,5 +679,10 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener { group1.classList.add("uai-ribbon-virtual-group"); this.ribbonMenuPageGroup.appendChild(group1); group1.appendChild(this.pageMenuToggleToc); + + const group2 = document.createElement("div"); + group2.classList.add("uai-ribbon-virtual-group"); + this.ribbonMenuPageGroup.appendChild(group2); + group2.appendChild(this.pageMenuBackgroundColor); } } \ No newline at end of file diff --git a/src/components/menus/toolbar/page/BackgroundColor.ts b/src/components/menus/toolbar/page/BackgroundColor.ts new file mode 100644 index 0000000..8a63601 --- /dev/null +++ b/src/components/menus/toolbar/page/BackgroundColor.ts @@ -0,0 +1,119 @@ +// Copyright (c) 2024-present AI-Labs + +// @ ts-nocheck +import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts"; +import icon from "../../../../assets/icons/page-background.svg"; +import { t } from "i18next"; +import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts"; +import { EditorEvents } from "@tiptap/core"; +import tippy, { Instance, Props } from "tippy.js"; + +/** + * 页面菜单：设置背景色 + */ +export class BackgroundColor extends HTMLElement implements UAIEditorEventListener { + // 按钮选项 + menuButtonOptions: MenuButtonOptions = { + menuType: "popup", + enable: true, + icon: icon, + hideText: true, + text: t('page.bg.text'), + tooltip: t('page.bg.text'), + } + + // 功能按钮 + menuButton: MenuButton; + // 背景色选项提示框 + tippyInstance!: Instance; + + constructor(options: MenuButtonOptions) { + super(); + + // 初始化功能按钮选项 + this.menuButtonOptions = { ...this.menuButtonOptions, ...options }; + + // 创建功能按钮 + this.menuButton = new MenuButton(this.menuButtonOptions); + } + + /** + * 定义创建方法 + * @param event + * @param options + */ + onCreate(event: EditorEvents["create"], options: UAIEditorOptions) { + this.menuButton.onCreate(event, options); + this.appendChild(this.menuButton); + + // 创建背景色设置提示框 + if (this.menuButtonOptions.enable && this.menuButton.menuButtonArrow) { + this.tippyInstance = tippy(this.menuButton.menuButton, { + content: this.createContainer(event, options), + appendTo: 'parent', + placement: 'bottom', + trigger: 'click', + interactive: true, + arrow: false, + onShow: () => { + this.menuButton.tippyInstance?.disable(); + }, + onHidden: () => { + this.menuButton.tippyInstance?.enable(); + }, + }); + } + } + + /** + * 定义Transaction监听方法 + * @param event + * @param options + */ + onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) { + this.menuButton.onTransaction(event, options); + } + + onEditableChange(editable: boolean) { + this.menuButtonOptions.enable = editable; + this.menuButton.onEditableChange(editable); + } + + /** + * 创建背景色设置提示框内容 + * @param event + * @param options + * @returns + */ + createContainer(event: EditorEvents["create"], options: UAIEditorOptions) { + // 创建容器 + const container = document.createElement("div"); + container.classList.add("uai-background-container"); + + // 设置所有可选背景色 + const backgrounds = [ + { label: t('page.bg.default'), value: '#FFF' }, + { label: t('page.bg.color1'), value: 'rgb(233, 246, 227)' }, + { label: t('page.bg.color2'), value: 'rgb(252, 242, 224)' }, + { label: t('page.bg.color3'), value: 'rgb(237, 244, 255)' }, + { label: t('page.bg.color4'), value: 'rgb(153, 205, 250)' }, + { label: t('page.bg.color5'), value: 'rgb(145, 145, 145)' }, + ] + + // 添加所有可选背景色 + backgrounds.forEach(background => { + const item = document.createElement("div"); + item.classList.add("uai-background-item"); + item.style.backgroundColor = background.value; + item.innerHTML = background.label; + // 添加点击事件，设置页面背景色 + item.addEventListener("click", () => { + (document.querySelector(".uai-zoomable-content") as HTMLElement).style.backgroundColor = background.value; + }) + container.appendChild(item); + }) + + return container; + } +} +