lijianqi/uai-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

界面优化

Browse Source
This commit is contained in:
wux_labs
2025-03-09 23:44:02 +08:00
parent 5502be0f9e
commit 033c0ffdbf
13 changed files with 747 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/menus/toolbar/Classic.ts
+36 -36
View File
@@ -89,6 +89,7 @@ import menuIcon from "../../../assets/icons/menu.svg";
export class Classic extends HTMLElement implements UAIEditorEventListener {
defaultToolbarMenus!: Record<string, any>[];
eventComponents: UAIEditorEventListener[] = [];
scrollableDivs: ScrollableDiv[] = [];
// 传统菜单栏容器
classicMenu!: HTMLElement;
@@ -216,17 +217,12 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
component.onCreate(event, options);
})
// 创建菜单容器
this.classicScrollableContainer = document.createElement("div");
this.classicScrollableContainer.classList.add("uai-classic-scrollable-container");
this.appendChild(this.classicScrollableContainer);
this.classicMenu = document.createElement("div");
this.classicMenu.classList.add("uai-classic-menu");
this.classicScrollableContainer.appendChild(this.classicMenu);
this.appendChild(this.classicMenu);
const selectDiv = document.createElement("div");
selectDiv.classList.add("uai-classic-virtual-group");
selectDiv.classList.add("uai-editor-menu-select-3");
selectDiv.classList.add("uai-classic-menu-switch");
selectDiv.innerHTML = `<img src="${menuIcon}" width="16" />`;
this.classicMenu.appendChild(selectDiv);
@@ -242,35 +238,39 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
// 添加事件，处理菜单分组切换、界面元素切换
selectMuenus.addEventListener("change", () => {
const menu = selectMuenus.selectedOptions[0].value;
this.classicMenuBaseScrollable.style.display = "none";
this.classicMenuInsertScrollable.style.display = "none";
this.classicMenuTableScrollable.style.display = "none";
this.classicMenuToolScrollable.style.display = "none";
this.classicMenuPageScrollable.style.display = "none";
this.classicMenuExportScrollable.style.display = "none";
this.classicMenuAIScrollable.style.display = "none";
this.scrollableDivs.forEach(scrollable => {
try {
this.classicScrollableContainer.removeChild(scrollable);
} catch (e) {
}
});
if (menu === "base") {
this.classicMenuBaseScrollable.style.display = "flex";
this.classicScrollableContainer.appendChild(this.classicMenuBaseScrollable);
}
if (menu === "insert") {
this.classicMenuInsertScrollable.style.display = "flex";
this.classicScrollableContainer.appendChild(this.classicMenuInsertScrollable);
}
if (menu === "table") {
this.classicMenuTableScrollable.style.display = "flex";
this.classicScrollableContainer.appendChild(this.classicMenuTableScrollable);
}
if (menu === "tools") {
this.classicMenuToolScrollable.style.display = "flex";
this.classicScrollableContainer.appendChild(this.classicMenuToolScrollable);
}
if (menu === "page") {
this.classicMenuPageScrollable.style.display = "flex";
this.classicScrollableContainer.appendChild(this.classicMenuPageScrollable);
}
if (menu === "export") {
this.classicMenuExportScrollable.style.display = "flex";
this.classicScrollableContainer.appendChild(this.classicMenuExportScrollable);
}
if (menu === "ai") {
this.classicMenuAIScrollable.style.display = "flex";
this.classicScrollableContainer.appendChild(this.classicMenuAIScrollable);
}
})
this.classicScrollableContainer = document.createElement("div");
this.classicScrollableContainer.classList.add("uai-classic-scrollable-container");
this.classicMenu.appendChild(this.classicScrollableContainer);
// 创建分组菜单
this.createBaseMenu(event, options);
this.createInsertMenu(event, options);
@@ -279,7 +279,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.createPageMenu(event, options);
this.createExportMenu(event, options);
this.createAIMenu(event, options);
this.classicMenuBaseScrollable.style.display = "flex";
selectMuenus.dispatchEvent(new Event("change"));
}
/**
@@ -489,9 +489,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuBaseGroup = document.createElement("div");
this.classicMenuBaseGroup.style.display = "flex";
this.classicMenuBaseScrollable = new ScrollableDiv(this.classicMenuBaseGroup);
this.classicMenuBaseScrollable.style.display = "none";
this.classicMenu.appendChild(this.classicMenuBaseScrollable);
this.classicMenuBaseScrollable.style.display = "flex";
this.classicMenuBaseScrollable.onCreate(event, options);
this.scrollableDivs.push(this.classicMenuBaseScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-classic-virtual-group");
@@ -549,9 +549,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuInsertGroup = document.createElement("div");
this.classicMenuInsertGroup.style.display = "flex";
this.classicMenuInsertScrollable = new ScrollableDiv(this.classicMenuInsertGroup);
this.classicMenuInsertScrollable.style.display = "none";
this.classicMenu.appendChild(this.classicMenuInsertScrollable);
this.classicMenuInsertScrollable.style.display = "flex";
this.classicMenuInsertScrollable.onCreate(event, options);
this.scrollableDivs.push(this.classicMenuInsertScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-classic-virtual-group");
@@ -585,9 +585,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuTableGroup = document.createElement("div");
this.classicMenuTableGroup.style.display = "flex";
this.classicMenuTableScrollable = new ScrollableDiv(this.classicMenuTableGroup);
this.classicMenuTableScrollable.style.display = "none";
this.classicMenu.appendChild(this.classicMenuTableScrollable);
this.classicMenuTableScrollable.style.display = "flex";
this.classicMenuTableScrollable.onCreate(event, options);
this.scrollableDivs.push(this.classicMenuTableScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-classic-virtual-group");
@@ -619,9 +619,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuToolGroup = document.createElement("div");
this.classicMenuToolGroup.style.display = "flex";
this.classicMenuToolScrollable = new ScrollableDiv(this.classicMenuToolGroup);
this.classicMenuToolScrollable.style.display = "none";
this.classicMenu.appendChild(this.classicMenuToolScrollable);
this.classicMenuToolScrollable.style.display = "flex";
this.classicMenuToolScrollable.onCreate(event, options);
this.scrollableDivs.push(this.classicMenuToolScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-classic-virtual-group");
@@ -638,9 +638,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuPageGroup = document.createElement("div");
this.classicMenuPageGroup.style.display = "flex";
this.classicMenuPageScrollable = new ScrollableDiv(this.classicMenuPageGroup);
this.classicMenuPageScrollable.style.display = "none";
this.classicMenu.appendChild(this.classicMenuPageScrollable);
this.classicMenuPageScrollable.style.display = "flex";
this.classicMenuPageScrollable.onCreate(event, options);
this.scrollableDivs.push(this.classicMenuPageScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-classic-virtual-group");
@@ -663,9 +663,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuExportGroup = document.createElement("div");
this.classicMenuExportGroup.style.display = "flex";
this.classicMenuExportScrollable = new ScrollableDiv(this.classicMenuExportGroup);
this.classicMenuExportScrollable.style.display = "none";
this.classicMenu.appendChild(this.classicMenuExportScrollable);
this.classicMenuExportScrollable.style.display = "flex";
this.classicMenuExportScrollable.onCreate(event, options);
this.scrollableDivs.push(this.classicMenuExportScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-classic-virtual-group");
@@ -690,9 +690,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuAIGroup = document.createElement("div");
this.classicMenuAIGroup.style.display = "flex";
this.classicMenuAIScrollable = new ScrollableDiv(this.classicMenuAIGroup);
this.classicMenuAIScrollable.style.display = "none";
this.classicMenu.appendChild(this.classicMenuAIScrollable);
this.classicMenuAIScrollable.style.display = "flex";
this.classicMenuAIScrollable.onCreate(event, options);
this.scrollableDivs.push(this.classicMenuAIScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-classic-virtual-group");
src/components/menus/toolbar/Ribbon.ts
+43 -37
View File
@@ -91,6 +91,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
defaultToolbarMenus!: Record<string, any>[];
eventComponents: UAIEditorEventListener[] = [];
headingOptions: Record<string, any>[] = [];
scrollableDivs: ScrollableDiv[] = [];
// 经典菜单栏容器
ribbonMenu!: HTMLElement;
@@ -237,38 +238,36 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
ribbonTabs.children[i].classList.remove("active");
}
tab.classList.add("active");
this.ribbonMenuBaseScrollable.style.display = "none";
this.ribbonMenuInsertScrollable.style.display = "none";
this.ribbonMenuTableScrollable.style.display = "none";
this.ribbonMenuToolScrollable.style.display = "none";
this.ribbonMenuPageScrollable.style.display = "none";
this.ribbonMenuExportScrollable.style.display = "none";
this.ribbonMenuAIScrollable.style.display = "none";
this.scrollableDivs.forEach(scrollable => {
try {
this.ribbonScrollableContainer.removeChild(scrollable);
} catch (e) {
}
});
if (menu.value === "base") {
this.ribbonMenuBaseScrollable.style.display = "flex";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuBaseScrollable);
}
if (menu.value === "insert") {
this.ribbonMenuInsertScrollable.style.display = "flex";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuInsertScrollable);
}
if (menu.value === "table") {
this.ribbonMenuTableScrollable.style.display = "flex";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuTableScrollable);
}
if (menu.value === "tools") {
this.ribbonMenuToolScrollable.style.display = "flex";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuToolScrollable);
}
if (menu.value === "page") {
this.ribbonMenuPageScrollable.style.display = "flex";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuPageScrollable);
}
if (menu.value === "export") {
this.ribbonMenuExportScrollable.style.display = "flex";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuExportScrollable);
}
if (menu.value === "ai") {
this.ribbonMenuAIScrollable.style.display = "flex";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuAIScrollable);
}
})
ribbonTabs.appendChild(tab);
});
ribbonTabs.children[0].classList.add("active")
this.ribbonScrollableContainer = document.createElement("div");
this.ribbonScrollableContainer.classList.add("uai-ribbon-scrollable-container");
@@ -289,7 +288,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.createPageMenu(event, options);
this.createExportMenu(event, options);
this.createAIMenu(event, options);
this.ribbonMenuBaseScrollable.style.display = "flex";
ribbonTabs.children[0].dispatchEvent(new MouseEvent("click"));
}
/**
@@ -508,13 +507,14 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
* @param event
* @param options
*/
createBaseMenu(event: EditorEvents["create"], _options: UAIEditorOptions) {
createBaseMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
this.ribbonMenuBaseGroup = document.createElement("div");
this.ribbonMenuBaseGroup.classList.add("uai-ribbon-container");
this.ribbonMenuBaseGroup.style.display = "flex";
this.ribbonMenuBaseScrollable = new ScrollableDiv(this.ribbonMenuBaseGroup);
this.ribbonMenuBaseScrollable.style.display = "none";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuBaseScrollable);
this.ribbonMenuBaseScrollable.style.display = "flex";
this.ribbonMenuBaseScrollable.onCreate(event, options);
this.scrollableDivs.push(this.ribbonMenuBaseScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-ribbon-virtual-group");
@@ -641,13 +641,14 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
* @param event
* @param options
*/
createInsertMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
createInsertMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
this.ribbonMenuInsertGroup = document.createElement("div");
this.ribbonMenuInsertGroup.classList.add("uai-ribbon-container");
this.ribbonMenuInsertGroup.style.display = "flex";
this.ribbonMenuInsertScrollable = new ScrollableDiv(this.ribbonMenuInsertGroup);
this.ribbonMenuInsertScrollable.style.display = "none";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuInsertScrollable);
this.ribbonMenuInsertScrollable.style.display = "flex";
this.ribbonMenuInsertScrollable.onCreate(event, options);
this.scrollableDivs.push(this.ribbonMenuInsertScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-ribbon-virtual-group");
@@ -677,13 +678,14 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
* @param event
* @param options
*/
createTableMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
createTableMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
this.ribbonMenuTableGroup = document.createElement("div");
this.ribbonMenuTableGroup.classList.add("uai-ribbon-container");
this.ribbonMenuTableGroup.style.display = "flex";
this.ribbonMenuTableScrollable = new ScrollableDiv(this.ribbonMenuTableGroup);
this.ribbonMenuTableScrollable.style.display = "none";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuTableScrollable);
this.ribbonMenuTableScrollable.style.display = "flex";
this.ribbonMenuTableScrollable.onCreate(event, options);
this.scrollableDivs.push(this.ribbonMenuTableScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-ribbon-virtual-group");
@@ -719,13 +721,14 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
* @param event
* @param options
*/
createToolMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
createToolMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
this.ribbonMenuToolGroup = document.createElement("div");
this.ribbonMenuToolGroup.classList.add("uai-ribbon-container");
this.ribbonMenuToolGroup.style.display = "flex";
this.ribbonMenuToolScrollable = new ScrollableDiv(this.ribbonMenuToolGroup);
this.ribbonMenuToolScrollable.style.display = "none";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuToolScrollable);
this.ribbonMenuToolScrollable.style.display = "flex";
this.ribbonMenuToolScrollable.onCreate(event, options);
this.scrollableDivs.push(this.ribbonMenuToolScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-ribbon-virtual-group");
@@ -738,13 +741,14 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
* @param event
* @param options
*/
createPageMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
createPageMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
this.ribbonMenuPageGroup = document.createElement("div");
this.ribbonMenuPageGroup.classList.add("uai-ribbon-container");
this.ribbonMenuPageGroup.style.display = "flex";
this.ribbonMenuPageScrollable = new ScrollableDiv(this.ribbonMenuPageGroup);
this.ribbonMenuPageScrollable.style.display = "none";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuPageScrollable);
this.ribbonMenuPageScrollable.style.display = "flex";
this.ribbonMenuPageScrollable.onCreate(event, options);
this.scrollableDivs.push(this.ribbonMenuPageScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-ribbon-virtual-group");
@@ -763,13 +767,14 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
* @param event
* @param options
*/
createExportMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
createExportMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
this.ribbonMenuExportGroup = document.createElement("div");
this.ribbonMenuExportGroup.classList.add("uai-ribbon-container");
this.ribbonMenuExportGroup.style.display = "flex";
this.ribbonMenuExportScrollable = new ScrollableDiv(this.ribbonMenuExportGroup);
this.ribbonMenuExportScrollable.style.display = "none";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuExportScrollable);
this.ribbonMenuExportScrollable.style.display = "flex";
this.ribbonMenuExportScrollable.onCreate(event, options);
this.scrollableDivs.push(this.ribbonMenuExportScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-ribbon-virtual-group");
@@ -790,13 +795,14 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
* @param event
* @param options
*/
createAIMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
createAIMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
this.ribbonMenuAIGroup = document.createElement("div");
this.ribbonMenuAIGroup.classList.add("uai-ribbon-container");
this.ribbonMenuAIGroup.style.display = "flex";
this.ribbonMenuAIScrollable = new ScrollableDiv(this.ribbonMenuAIGroup);
this.ribbonMenuAIScrollable.style.display = "none";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuAIScrollable);
this.ribbonMenuAIScrollable.style.display = "flex";
this.ribbonMenuAIScrollable.onCreate(event, options);
this.scrollableDivs.push(this.ribbonMenuAIScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-ribbon-virtual-group");
src/components/menus/toolbar/ScrollableDiv.ts
+27 -17
View File
@@ -19,17 +19,19 @@ export class ScrollableDiv extends HTMLElement implements UAIEditorEventListener
constructor(content: HTMLElement) {
super();
this.content = content;
this.classList.add("uai-scrollable-control");
this.scrollLeftBtn = document.createElement("div");
this.scrollLeftBtn.classList.add("uai-scrollable-control-button");
this.scrollLeftBtn.classList.add("uai-scrollable-control-button-left");
this.scrollLeftBtn.innerHTML = "<strong><</strong>";
this.scrollLeftBtn.style.display = "none";
this.container = document.createElement("div");
this.container.classList.add("uai-scrollable-control-content");
this.container.appendChild(this.content);
// this.container.style.overflow = "hidden";
// this.container.style.position = "relative";
this.scrollRightBtn = document.createElement("div");
this.scrollRightBtn.classList.add("uai-scrollable-control-button");
this.scrollRightBtn.classList.add("uai-scrollable-control-button-right");
this.scrollRightBtn.innerHTML = "<strong>></strong>";
this.scrollRightBtn.style.display = "none";
@@ -37,19 +39,18 @@ export class ScrollableDiv extends HTMLElement implements UAIEditorEventListener
if (this.transform < 0) {
this.transform += Math.min(this.scrollAmount, 0 - this.transform);
}
this.content.style.transform = `translateX(${this.transform}px)`;
this.renderTranslate();
this.scrollButtonControl();
});
this.scrollRightBtn.addEventListener('click', () => {
const scrollWidth = this.content.scrollWidth + this.transform - this.scrollRightBtn.clientWidth - this.container.clientWidth;
const scrollWidth = this.content.scrollWidth + this.transform - this.container.clientWidth;
if (scrollWidth > 0) {
this.transform -= Math.min(this.scrollAmount, scrollWidth);
}
this.content.style.transform = `translateX(${this.transform}px)`;
this.renderTranslate();
this.scrollButtonControl();
});
this.classList.add("uai-classic-scrollable-menu")
this.appendChild(this.scrollLeftBtn)
this.appendChild(this.container)
this.appendChild(this.scrollRightBtn)
@@ -58,13 +59,13 @@ export class ScrollableDiv extends HTMLElement implements UAIEditorEventListener
onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
if (entry.target === this.parentElement) {
if (entry.target === this.content) {
this.scrollButtonControl();
}
}
});
resizeObserver.observe(this.parentElement!);
resizeObserver.observe(this.content!);
}
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
@@ -75,16 +76,25 @@ export class ScrollableDiv extends HTMLElement implements UAIEditorEventListener
}
scrollButtonControl() {
if (this.transform < 0) {
this.scrollLeftBtn.style.display = "flex";
} else {
this.scrollLeftBtn.style.display = "none";
if (this.transform < 0 && this.container.clientWidth > this.content.scrollWidth + this.transform) {
this.transform = this.container.clientWidth - this.content.scrollWidth;
this.content.style.transform = `translateX(${this.transform}px)`;
}
if (this.parentElement!.scrollWidth + this.transform - this.scrollRightBtn.clientWidth < this.container.clientWidth) {
this.scrollRightBtn.style.display = "flex";
} else {
this.scrollRightBtn.style.display = "none";
const shouldShowLeftButton = this.transform < 0;
const shouldShowRightButton = this.container.scrollWidth > this.content.clientWidth;
this.scrollLeftBtn.style.display = shouldShowLeftButton ? "flex" : "none";
this.scrollRightBtn.style.display = shouldShowRightButton ? "flex" : "none";
if (!shouldShowLeftButton && !shouldShowRightButton) {
this.transform = 0;
this.renderTranslate();
}
// 触发宽度变化事件
}
renderTranslate() {
this.content.style.transform = `translateX(${this.transform}px)`;
// 更新所有tippy实例位置
this.querySelectorAll('[data-tippy-root]').forEach((tip: any) => {
tip._tippy?.popperInstance?.update();
});
}
}