添加技术支持功能

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);
     }
 }

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);
 

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);
+    }
+}
+

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);
+    }
+}
+