diff --git a/src/components/Footer.ts b/src/components/Footer.ts index ac54cb2..4ccc0d8 100644 --- a/src/components/Footer.ts +++ b/src/components/Footer.ts @@ -8,6 +8,8 @@ import { ToggleToc } from "./menus/toolbar/page/ToggleToc"; import { CharacterCount } from "./menus/statusbar/CharacterCount.ts"; import { Fullscreen } from "./menus/statusbar/Fullscreen.ts"; +import { Feedback } from "./menus/statusbar/Feedback.ts"; +import { PoweredBy } from "./menus/statusbar/PoweredBy.ts"; /** * 编辑器底部状态栏 @@ -23,6 +25,10 @@ export class Footer extends HTMLElement implements UAIEditorEventListener { // 全屏功能 fullscreen!: Fullscreen; + // 问题与建议 + feedback!: Feedback; + // 版权及技术支持 + poweredBy!: PoweredBy; constructor() { super(); @@ -32,6 +38,8 @@ export class Footer extends HTMLElement implements UAIEditorEventListener { this.characterCount = new CharacterCount(); this.fullscreen = new Fullscreen({ menuType: "button", enable: true }); + this.feedback = new Feedback({ menuType: "button", enable: true }); + this.poweredBy = new PoweredBy({ menuType: "button", enable: true }); } /** @@ -43,7 +51,10 @@ export class Footer extends HTMLElement implements UAIEditorEventListener { // 初始化状态栏菜单 this.toggleToc.onCreate(event, options); this.characterCount.onCreate(event, options); + this.fullscreen.onCreate(event, options); + this.feedback.onCreate(event, options); + this.poweredBy.onCreate(event, options); this.container = document.createElement("div"); this.container.classList.add("uai-footer"); @@ -74,6 +85,9 @@ export class Footer extends HTMLElement implements UAIEditorEventListener { statusBarLeft.appendChild(this.characterCount); statusBarRight.appendChild(this.fullscreen); + statusBarRight.appendChild(this.createSplit()); + statusBarRight.appendChild(this.poweredBy); + statusBarRight.appendChild(this.feedback); } /** @@ -96,6 +110,8 @@ export class Footer extends HTMLElement implements UAIEditorEventListener { this.characterCount.onTransaction(event, options); this.fullscreen.onTransaction(event, options); + this.feedback.onTransaction(event, options); + this.poweredBy.onTransaction(event, options); } onEditableChange(editable: boolean) { @@ -103,5 +119,7 @@ export class Footer extends HTMLElement implements UAIEditorEventListener { this.characterCount.onEditableChange(editable); this.fullscreen.onEditableChange(editable); + this.feedback.onEditableChange(editable); + this.poweredBy.onEditableChange(editable); } } \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index e3d04cf..f85975b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -99,6 +99,8 @@ import { AudioBubbleMenu } from "./menus/bubble/AudioBubbleMenu.ts"; import { CharacterCount } from "./menus/statusbar/CharacterCount.ts"; import { Fullscreen } from "./menus/statusbar/Fullscreen.ts"; +import { Feedback } from "./menus/statusbar/Feedback.ts"; +import { PoweredBy } from "./menus/statusbar/PoweredBy.ts"; // 注册组件 defineCustomElement('uai-editor-header', Header); @@ -189,6 +191,8 @@ defineCustomElement('uai-editor-export-menu-image', ExportImage); defineCustomElement('uai-editor-statusbar-menu-character-count', CharacterCount); defineCustomElement('uai-editor-statusbar-menu-fullscreen', Fullscreen); +defineCustomElement('uai-editor-statusbar-menu-feedback', Feedback); +defineCustomElement('uai-editor-statusbar-menu-powered-by', PoweredBy); defineCustomElement('uai-editor-bubble-menu-text-selection', TextSelectionBubbleMenu); diff --git a/src/components/menus/statusbar/Feedback.ts b/src/components/menus/statusbar/Feedback.ts new file mode 100644 index 0000000..9945ba9 --- /dev/null +++ b/src/components/menus/statusbar/Feedback.ts @@ -0,0 +1,71 @@ +// Copyright (c) 2024-present AI-Labs + +// @ ts-nocheck +import { MenuButton, MenuButtonOptions } from "../MenuButton.ts"; +import icon from "../../../assets/icons/message.svg"; +import { t } from "i18next"; +import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts"; +import { EditorEvents } from "@tiptap/core"; + +/** + * 状态栏菜单:问题与建议 + */ +export class Feedback extends HTMLElement implements UAIEditorEventListener { + // 按钮选项 + menuButtonOptions: MenuButtonOptions = { + menuType: "button", + enable: true, + icon: icon, + hideText: true, + text: t('feedback'), + tooltip: t('feedback'), + } + + // 功能按钮 + menuButton: MenuButton; + + 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); + + // 定义按钮点击事件,打开问题提交页面 + this.addEventListener("click", () => { + if (this.menuButtonOptions.enable) { + const anchor = document.createElement('a'); + anchor.href = "https://gitee.com/AI-Labs/uai-editor/issues"; + anchor.target = '_blank'; + anchor.click(); + } + }) + } + + /** + * 定义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); + } +} + diff --git a/src/components/menus/statusbar/PoweredBy.ts b/src/components/menus/statusbar/PoweredBy.ts new file mode 100644 index 0000000..2596dce --- /dev/null +++ b/src/components/menus/statusbar/PoweredBy.ts @@ -0,0 +1,71 @@ +// Copyright (c) 2024-present AI-Labs + +// @ ts-nocheck +import { MenuButton, MenuButtonOptions } from "../MenuButton.ts"; +import icon from "../../../assets/icons/home-page.svg"; +import { t } from "i18next"; +import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts"; +import { EditorEvents } from "@tiptap/core"; + +/** + * 状态栏菜单:技术支持 + */ +export class PoweredBy extends HTMLElement implements UAIEditorEventListener { + // 按钮选项 + menuButtonOptions: MenuButtonOptions = { + menuType: "button", + enable: true, + icon: icon, + hideText: true, + text: t('poweredBy'), + tooltip: t('poweredBy'), + } + + // 功能按钮 + menuButton: MenuButton; + + 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); + + // 定义按钮点击事件,打开技术支持、文档页面 + this.addEventListener("click", () => { + if (this.menuButtonOptions.enable) { + const anchor = document.createElement('a'); + anchor.href = "https://wux-labs.github.io/UAI-Editor"; + anchor.target = '_blank'; + anchor.click(); + } + }) + } + + /** + * 定义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); + } +} +