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

7
index.html
View File

@@ -5,6 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>有爱文档（UAI Editor）</title>
<link rel="icon" href="/favicon.png" />
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="uai-editor" style="height: 100vh; overflow: hidden; border: solid 1px var(--uai-border-color)"></div>

20
package-lock.json generated
View File

@@ -43,7 +43,6 @@
"@types/file-saver": "^2.0.7",
"@types/katex": "^0.16.7",
"@vscode/markdown-it-katex": "^1.1.0",
"bootstrap": "^5.3.3",
"crypto-js": "^4.2.0",
"dom-to-image-more": "^3.5.0",
"evaluatex": "^2.2.0",
@@ -2174,25 +2173,6 @@
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
"license": "ISC"
},
"node_modules/bootstrap": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"license": "MIT",
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

1
package.json
View File

@@ -80,7 +80,6 @@
"@types/file-saver": "^2.0.7",
"@types/katex": "^0.16.7",
"@vscode/markdown-it-katex": "^1.1.0",
"bootstrap": "^5.3.3",
"crypto-js": "^4.2.0",
"dom-to-image-more": "^3.5.0",
"evaluatex": "^2.2.0",

39
src/components/Header.ts
View File

@@ -22,7 +22,9 @@ import codeblock from "../assets/icons/codeblock.svg";
export class Header extends HTMLElement implements UAIEditorEventListener {
toolbar!: HTMLElement;
container!: HTMLElement;
menus!: HTMLElement;
actions!: HTMLElement;
allMenus: HTMLElement[] = [];
defaultToolbarMenus!: Record<string, any>[];
@@ -56,7 +58,7 @@ export class Header extends HTMLElement implements UAIEditorEventListener {
this.classicMenu = new Classic(this.defaultToolbarMenus);
// 创建源码编辑器
this.sourceMenu = document.createElement("div");
this.sourceMenu.classList.add("uai-classic-scrollable-container");
this.sourceMenu.classList.add("uai-source-menu");
this.sourceMenu.innerHTML = `<img src="${codeblock}" width="20" />&nbsp;${t('toolbar.source')}`;
}
@@ -80,9 +82,14 @@ export class Header extends HTMLElement implements UAIEditorEventListener {
// 初始化经典工具栏
this.classicMenu.onCreate(event, options);
this.container.appendChild(this.ribbonMenu);
this.container.appendChild(this.classicMenu);
this.container.appendChild(this.sourceMenu);
this.allMenus.push(this.ribbonMenu);
this.allMenus.push(this.classicMenu);
this.allMenus.push(this.sourceMenu);
// 添加工具栏切换菜单
this.menus = document.createElement("div");
this.menus.classList.add("uai-toolbar-menus");
this.container.appendChild(this.menus);
// 添加工具栏切换菜单
this.actions = document.createElement("div");
@@ -138,14 +145,22 @@ export class Header extends HTMLElement implements UAIEditorEventListener {
this.classicMenu.onEditableChange(editable);
}
removeAllMenus(): void {
this.allMenus.forEach(menu => {
try {
this.menus.removeChild(menu);
} catch (e) {
}
});
}
/**
* 切换专业工具栏
* @param event
*/
switchRibbonMenu(event: EditorEvents["create"]) {
this.ribbonMenu.style.display = "flex";
this.classicMenu.style.display = "none";
this.sourceMenu.style.display = "none";
this.removeAllMenus();
this.menus.appendChild(this.ribbonMenu);
this.menuMode = "ribbon";
(event.editor as InnerEditor).uaiEditor.switchEditor();
}
@@ -155,9 +170,8 @@ export class Header extends HTMLElement implements UAIEditorEventListener {
* @param event
*/
switchClassicMenu(event: EditorEvents["create"]) {
this.ribbonMenu.style.display = "none";
this.classicMenu.style.display = "flex";
this.sourceMenu.style.display = "none";
this.removeAllMenus();
this.menus.appendChild(this.classicMenu);
this.menuMode = "classic";
(event.editor as InnerEditor).uaiEditor.switchEditor();
}
@@ -167,9 +181,8 @@ export class Header extends HTMLElement implements UAIEditorEventListener {
* @param event
*/
switchSourceMenu(event: EditorEvents["create"]) {
this.ribbonMenu.style.display = "none";
this.classicMenu.style.display = "none";
this.sourceMenu.style.display = "flex";
this.removeAllMenus();
this.menus.appendChild(this.sourceMenu);
this.menuMode = "source";
(event.editor as InnerEditor).uaiEditor.switchSource();
}

72
src/components/menus/toolbar/Classic.ts
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");

80
src/components/menus/toolbar/Ribbon.ts
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");

44
src/components/menus/toolbar/ScrollableDiv.ts
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();
});
}
}

156
src/components/modals/CenterModal.ts
View File

@@ -1,75 +1,115 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { Modal } from "bootstrap";
import 'bootstrap/dist/css/bootstrap.css';
/**
* 居中的模态弹出框
*/
export class CenterModal extends Modal {
import './Modal.css';
export class CenterModal {
modalHeader!: HTMLElement;
modalBody!: HTMLElement;
modalFooter!: HTMLElement;
commit: HTMLButtonElement;
constructor(title: string, options?: Partial<Modal.Options>) {
const modal = document.createElement("div");
// 设置模态弹出框
modal.classList.add("modal");
modal.setAttribute("role", "dialog");
modal.setAttribute("tabindex", "-1");
modal.setAttribute("aria-hidden", "true");
modal.setAttribute("aria-labelledby", "exampleModalCenterTitle");
private overlay: HTMLElement;
private container: HTMLElement;
private closeBtn: HTMLButtonElement;
// 模态弹出框居中样式
const modalDialog = document.createElement("div");
modalDialog.classList.add("modal-dialog");
modalDialog.classList.add("modal-dialog-centered");
modalDialog.setAttribute("role", "document");
constructor(title: string) {
// 创建遮罩层
this.overlay = document.createElement('div');
this.overlay.classList.add('modal-overlay');
// 创建模态框容器
this.container = document.createElement('div');
this.container.classList.add('modal-container');
this.container.classList.add('modal-container-center');
// 模态弹出框内容
const modalContent = document.createElement("div");
modalContent.classList.add("modal-content");
modalDialog.appendChild(modalContent);
modal.appendChild(modalDialog);
super(modal, options);
// 标题区
this.modalHeader = document.createElement("div");
this.modalHeader.classList.add("modal-header");
this.modalHeader.innerHTML = `<h5 class="modal-title">${title}</h5>`
modalContent.appendChild(this.modalHeader);
// 主体区
this.modalBody = document.createElement("div");
this.modalBody.classList.add("modal-body");
modalContent.appendChild(this.modalBody);
// 底部按钮区
this.modalFooter = document.createElement("div");
this.modalFooter.classList.add("modal-footer");
modalContent.appendChild(this.modalFooter);
// 头部区域
this.modalHeader = document.createElement('div');
this.modalHeader.classList.add('modal-header');
this.modalHeader.innerHTML = `<h3>${title}</h3>`;
// 关闭按钮
const close = document.createElement("button");
close.classList.add("btn");
close.classList.add("btn-secondary");
close.setAttribute("data-dismiss", "modal");
close.innerHTML = "关闭";
close.addEventListener("click", () => {
this.hide();
});
this.modalFooter.appendChild(close);
this.closeBtn = document.createElement('button');
this.closeBtn.classList.add('modal-close');
this.closeBtn.innerHTML = '×';
this.closeBtn.onclick = () => this.hide();
// 确定按钮
this.commit = document.createElement("button")
this.commit.classList.add("btn");
this.commit.classList.add("btn-primary");
this.commit.innerHTML = "确定";
// 内容区域
this.modalBody = document.createElement('div');
this.modalBody.classList.add('modal-body');
// 底部区域
this.modalFooter = document.createElement('div');
this.modalFooter.classList.add('modal-footer');
// 添加commit按钮
this.commit = document.createElement('button');
this.commit.classList.add('modal-button');
this.commit.classList.add('modal-button-primary');
this.commit.textContent = '确定';
this.modalFooter.appendChild(this.commit);
// 添加cancel按钮
const cancelBtn = document.createElement('button');
cancelBtn.classList.add('modal-button');
cancelBtn.classList.add('modal-button-secondary');
cancelBtn.textContent = '关闭';
cancelBtn.onclick = () => {
this.hide();
};
this.modalFooter.appendChild(cancelBtn);
// 组装结构
this.modalHeader.appendChild(this.closeBtn);
this.container.append(this.modalHeader, this.modalBody, this.modalFooter);
this.overlay.appendChild(this.container);
}
setContent(content: string | HTMLElement) {
this.modalBody.innerHTML = '';
if (typeof content === 'string') {
this.modalBody.innerHTML = content;
} else {
this.modalBody.appendChild(content);
}
}
addButton(text: string, onClick: () => void) {
const btn = document.createElement('button');
btn.className = 'modal-button';
btn.textContent = text;
btn.onclick = () => {
onClick();
this.hide();
};
this.modalFooter.appendChild(btn);
}
show() {
document.body.appendChild(this.overlay);
this.overlay.getBoundingClientRect(); // 强制重绘
this.overlay.style.opacity = '1';
this.container.style.transform = 'translateY(0)';
// 点击遮罩层关闭
this.overlay.onclick = (e) => {
if (e.target === this.overlay) this.hide();
};
// ESC键关闭
document.addEventListener('keydown', this.handleEscape);
}
hide() {
this.overlay.style.opacity = '0';
this.container.style.transform = 'translateY(-3rem)';
setTimeout(() => {
this.overlay.remove();
}, 300);
document.removeEventListener('keydown', this.handleEscape);
}
private handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape') this.hide();
};
}

125
src/components/modals/FullScreenModal.ts
View File

@@ -1,74 +1,89 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { Modal } from "bootstrap";
import 'bootstrap/dist/css/bootstrap.css';
import closeIcon from "../../assets/icons/close.svg";
/**
* 全屏的模态弹出框
*/
export class FullScreenModal extends Modal {
import './Modal.css';
export class FullScreenModal {
modalHeader!: HTMLElement;
modalBody!: HTMLElement;
modalFooter!: HTMLElement;
private overlay: HTMLElement;
private container: HTMLElement;
private closeBtn: HTMLButtonElement;
messageListener?: (evt: MessageEvent) => void
constructor(title: string, options?: Partial<Modal.Options>) {
const modal = document.createElement("div");
// 设置模态弹出框
modal.classList.add("modal");
modal.setAttribute("role", "dialog");
modal.setAttribute("tabindex", "-1");
modal.setAttribute("aria-labelledby", "exampleModalCenterTitle");
constructor(title: string) {
// 创建遮罩层
this.overlay = document.createElement('div');
this.overlay.classList.add('modal-overlay');
// 模态弹出框全屏样式
const modalDialog = document.createElement("div");
modalDialog.classList.add("modal-dialog");
modalDialog.classList.add("modal-fullscreen");
modalDialog.classList.add("modal-dialog-centered");
modalDialog.setAttribute("role", "document");
// 创建模态框容器
this.container = document.createElement('div');
this.container.classList.add('modal-container');
this.container.classList.add('modal-container-fullscreen');
// 模态弹出框内容
const modalContent = document.createElement("div");
modalContent.classList.add("modal-content");
modalDialog.appendChild(modalContent);
modal.appendChild(modalDialog);
super(modal, options);
// 标题区
this.modalHeader = document.createElement("div");
this.modalHeader.classList.add("modal-header");
// 标题
const titleDiv = document.createElement("div");
titleDiv.innerHTML = `<h5 class="modal-title" style="width:calc(100vw - 55px)">${title}</h5>`
this.modalHeader.appendChild(titleDiv);
// 头部区域
this.modalHeader = document.createElement('div');
this.modalHeader.classList.add('modal-header');
this.modalHeader.innerHTML = `<h3>${title}</h3>`;
// 关闭按钮
const closeDiv = document.createElement("div");
closeDiv.innerHTML = `<img src="${closeIcon}" width="24"/>`;
closeDiv.addEventListener("click", () => {
this.hide();
if (this.messageListener) {
window.removeEventListener('message', this.messageListener);
}
});
this.modalHeader.appendChild(closeDiv);
this.closeBtn = document.createElement('button');
this.closeBtn.classList.add('modal-close');
this.closeBtn.innerHTML = '×';
this.closeBtn.onclick = () => this.hide();
modalContent.appendChild(this.modalHeader);
// 主体区
this.modalBody = document.createElement("div");
this.modalBody.classList.add("modal-body");
modalContent.appendChild(this.modalBody);
// 内容区域
this.modalBody = document.createElement('div');
this.modalBody.classList.add('modal-body');
// 组装结构
this.modalHeader.appendChild(this.closeBtn);
this.container.append(this.modalHeader, this.modalBody);
this.overlay.appendChild(this.container);
}
setContent(content: string | HTMLElement) {
this.modalBody.innerHTML = '';
if (typeof content === 'string') {
this.modalBody.innerHTML = content;
} else {
this.modalBody.appendChild(content);
}
}
show() {
document.body.appendChild(this.overlay);
this.overlay.getBoundingClientRect(); // 强制重绘
this.overlay.style.opacity = '1';
this.container.style.transform = 'translateY(0)';
// 点击遮罩层关闭
this.overlay.onclick = (e) => {
if (e.target === this.overlay) this.hide();
};
// ESC键关闭
document.addEventListener('keydown', this.handleEscape);
}
hide() {
this.overlay.style.opacity = '0';
this.container.style.transform = 'translateY(-3rem)';
setTimeout(() => {
this.overlay.remove();
}, 300);
document.removeEventListener('keydown', this.handleEscape);
if (this.messageListener) {
window.removeEventListener('message', this.messageListener);
}
}
private handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape') this.hide();
};
/**
* 添加回调监听
* @param messageListener

119
src/components/modals/Modal.css Normal file
View File

@@ -0,0 +1,119 @@
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 9999;
}
.modal-container {
background: white;
transform: translateY(-3rem);
transition: transform 0.3s ease-in-out;
position: relative;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.modal-container-center {
border-radius: 8px;
min-width: 500px;
width: fit-content;
.modal-body {
padding: 1rem;
}
}
.modal-container-fullscreen {
width: 100%;
height: 100%;
.modal-body {
height: 100%;
}
}
.modal-header {
padding: 1rem;
font-size: 1.25rem;
color: #333;
border-bottom: 1px solid #eee;
h3 {
margin: 0 2rem 0 0;
font-size: 1.25rem;
color: #333;
}
.modal-close {
position: absolute;
top: 0.5rem;
right: 1rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
line-height: 1;
}
}
.modal-body {
min-height: 50px;
.form-group {
margin-bottom: 1rem;
input {
padding: 0.375rem 0.75rem;
font-size: 1rem;
min-width: 400px;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
}
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem;
border-top: 1px solid #eee;
}
.modal-button {
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
border: none;
color: gray;
font-size: 1rem;
}
.modal-button-primary {
background-color: #007bff;
color: white;
}
.modal-button-secondary {
background-color: #6c757d;
color: white;
}
@media (max-width: 768px) {
.modal-container {
min-width: unset;
width: 90%;
padding: 1.5rem;
}
}

2
src/core/UAIEditor.ts
View File

@@ -346,8 +346,6 @@ export class UAIEditor {
rootEl.appendChild(this.container);
this.header = new Header();
this.header.classList.add("uai-toolbar");
this.header.classList.add("toolbar-ribbon");
this.container.appendChild(this.header);
this.center = document.createElement("div");

555
src/styles/uaieditor.less
View File

@@ -58,129 +58,252 @@
user-select: none;
border-bottom: solid 1px var(--uai-border-color);
position: relative;
z-index: 200;
.uai-editor-menu-select {
border: solid 1px var(--uai-border-color-light);
border-radius: var(--uai-radius);
margin-left: 3px;
}
.uai-toolbar-menus {
width: calc(100% - 120px);
position: relative;
z-index: 2;
.uai-editor-menu-select-3 {
padding: 3px;
border: solid 1px var(--uai-border-color-light);
border-radius: var(--uai-radius);
}
.uai-ribbon-menu {
.uai-ribbon-menu {
.uai-ribbon-tabs {
padding: 10px 10px 0;
display: flex;
&-item {
font-size: var(--uai-font-size-small);
margin-right: 25px;
cursor: pointer;
.uai-ribbon-tabs {
padding: 10px 10px 0;
display: flex;
align-items: center;
flex-direction: column;
&:hover {
font-weight: 600;
&-item {
font-size: var(--uai-font-size-small);
margin-right: 25px;
cursor: pointer;
display: flex;
align-items: center;
flex-direction: column;
&::after {
display: block;
content: '';
height: 3px;
width: 100%;
margin-top: 5px;
background-color: var(--uai-border-color);
}
}
&:hover {
font-weight: 600;
&.active {
color: var(--uai-primary-color);
font-weight: 600;
&::after {
display: block;
content: '';
height: 3px;
width: 100%;
margin-top: 5px;
background-color: var(--uai-primary-color);
transition: width 0.3s;
&::after {
display: block;
content: '';
height: 3px;
width: 100%;
margin-top: 5px;
background-color: var(--uai-border-color);
}
}
&:hover::after {
width: 120%;
}
}
&.active {
color: var(--uai-primary-color);
font-weight: 600;
@media screen and (max-width: 640px) {
margin-right: 10px;
&::after {
display: block;
content: '';
height: 3px;
width: 100%;
margin-top: 5px;
background-color: var(--uai-primary-color);
transition: width 0.3s;
}
&:hover::after {
width: 120%;
}
}
@media screen and (max-width: 640px) {
margin-right: 10px;
}
}
}
}
.uai-ribbon-scrollable-container {
padding: 10px;
box-sizing: border-box;
.uai-ribbon-scrollable-container {
padding: 10px 0;
box-sizing: border-box;
align-items: center;
/* 垂直居中子元素 */
justify-content: center;
/* 如果你也想要水平居中 */
vertical-align: middle;
.uai-ribbon-container {
display: flex;
height: 61px;
flex-shrink: 0;
.uai-ribbon-container {
height: 57px;
flex-shrink: 0;
width: 100%;
select {
border: none;
outline: none;
select {
border: solid 1px var(--uai-border-color-light);
background-color: var(--uai-toolbar-background);
border-radius: var(--uai-radius);
padding: 6px;
outline: none;
}
.uai-ribbon-virtual-group {
padding: 0 20px;
border-left: solid 1px var(--uai-border-color-light);
flex-shrink: 0;
.uai-ribbon-heading-container {
width: 321px;
height: 56px;
display: flex;
position: relative;
z-index: 2;
background-color: var(--uai-container-background);
border: solid 1px var(--uai-border-color);
border-radius: var(--uai-radius);
.uai-ribbon-heading-list {
margin: 5px;
display: flex;
flex-wrap: wrap;
max-width: 300px;
overflow: hidden;
}
.uai-ribbon-heading-arrow {
margin-top: 8px;
margin-right: 5px;
padding-top: 15px;
height: 25px;
width: 16px;
border-radius: var(--uai-radius);
&:hover {
cursor: pointer;
background: #ddd; // var(--uai-content-node-selected-background);
border-radius: var(--uai-radius);
}
}
.uai-ribbon-heading-item {
width: 140px;
height: 42px;
margin: 2px;
padding: 0;
text-align: center;
background-color: #fff;
border: solid 1px var(--uai-border-color);
border-radius: var(--uai-radius);
padding: 5px 10px;
box-sizing: border-box;
cursor: pointer;
flex: 0 0 68px;
&:hover,
&.active {
border-color: var(--uai-primary-color);
}
&-title {
line-height: 18px;
font-weight: 600;
&.text {
font-size: 12px;
font-weight: 400;
}
&.h1 {
font-size: 15px;
}
&.h2 {
font-size: 14px;
}
&.h3 {
font-size: 13px;
}
&.h4 {
font-size: 12px;
}
&.h5 {
font-size: 11px;
}
&.h6 {
font-size: 10px;
}
}
&-subtitle {
font-size: 8px;
color: var(--uai-text-color-light);
text-transform: capitalize;
margin-top: 3px;
line-height: 1;
}
}
}
&:empty {
display: none;
}
&:first-child {
padding-left: 0;
}
&:first-child {
border-left: none;
}
&-row {
display: flex;
align-items: center;
:deep(> *:not(:last-child)) {
margin-right: 5px;
}
&:not(:last-child) {
margin-bottom: 5px;
}
}
}
}
.uai-ribbon-virtual-group {
padding: 0 20px;
border-left: solid 1px var(--uai-border-color-light);
flex-shrink: 0;
&:empty {
display: none;
}
&:first-child {
padding-left: 0;
}
&:first-child {
border-left: none;
}
&-row {
.uai-scrollable-control {
.uai-scrollable-control-button {
padding: 0 10px;
border: 1px solid var(--uai-border-color);
background-color: var(--uai-container-background);
border-radius: var(--uai-radius);
display: flex;
align-items: center;
/* 垂直居中子元素 */
justify-content: center;
/* 如果你也想要水平居中 */
vertical-align: middle;
position: absolute;
height: 56px;
z-index: 2;
:deep(> *:not(:last-child)) {
margin-right: 5px;
&-left {
left: 0;
}
&:not(:last-child) {
margin-bottom: 5px;
&-right {
right: 0;
}
&:hover {
cursor: pointer;
background-color: var(--uai-primary-color);
}
}
.uai-scrollable-control-content {
flex: 1;
width: calc(100% - 120px);
}
}
}
}
}
.uai-classic-scrollable-container {
height: 50px;
padding: 10px;
display: flex;
align-items: center;
.uai-classic-scrollable-menu {
display: flex;
overflow: hidden;
}
.uai-classic-menu {
display: flex;
@@ -193,65 +316,123 @@
outline: none;
}
.uai-classic-virtual-group {
.uai-classic-menu-switch {
border: solid 1px var(--uai-border-color-light);
background-color: var(--uai-toolbar-background);
border-radius: var(--uai-radius);
padding: 6px;
display: flex;
align-items: center;
// border-left: solid 1px #db2323;// var(--uai-border-color-light);
flex-shrink: 0;
/* 垂直居中子元素 */
justify-content: center;
/* 如果你也想要水平居中 */
vertical-align: middle;
z-index: 500;
}
&:empty {
display: none;
.uai-classic-scrollable-container {
height: 30px;
padding: 10px 0;
width: calc(100% - 104px);
.uai-editor-menu-select {
border: solid 1px var(--uai-border-color-light);
background-color: var(--uai-toolbar-background);
border-radius: var(--uai-radius);
margin-left: 3px;
padding: 2px;
}
.uai-classic-virtual-group {
display: flex;
align-items: center;
// border-left: solid 1px #db2323;// var(--uai-border-color-light);
flex-shrink: 0;
// &:not(:last-child) {
&::before {
content: '';
display: block;
height: 18px;
width: 1px;
background-color: var(--uai-border-color-light);
margin: 0 10px;
}
&:empty {
display: none;
}
// }
// &:not(:last-child) {
&::before {
content: '';
display: block;
height: 18px;
width: 1px;
background-color: var(--uai-border-color-light);
margin: 0 10px;
}
&:first-child::before {
display: none;
}
// }
:deep(.uai-menu-button .uai-button--shape-square) {
.uai-icon {
font-size: 14px;
&:first-child::before {
display: none;
}
:deep(.uai-menu-button .uai-button--shape-square) {
.uai-icon {
font-size: 14px;
}
}
&-row {
display: flex;
}
}
&-row {
display: flex;
.uai-scrollable-control {
.uai-scrollable-control-button {
padding: 0 10px;
border: 1px solid var(--uai-border-color);
background-color: var(--uai-container-background);
border-radius: var(--uai-radius);
display: flex;
align-items: center;
/* 垂直居中子元素 */
justify-content: center;
/* 如果你也想要水平居中 */
vertical-align: middle;
position: absolute;
height: 28px;
z-index: 2;
&-left {
left: 1;
}
&-right {
right: 0;
}
&:hover {
cursor: pointer;
background-color: var(--uai-primary-color);
}
}
.uai-scrollable-control-content {
width: calc(100%);
}
}
}
}
}
.uai-scrollable-control-button {
padding: 0 10px;
background: var(--uai-primary-color);
border-radius: var(--uai-radius);
display: flex;
align-items: center;
/* 垂直居中子元素 */
justify-content: center;
/* 如果你也想要水平居中 */
vertical-align: middle;
&:hover {
cursor: pointer;
.uai-source-menu {
height: 30px;
padding: 10px;
display: flex;
align-items: center;
}
}
.uai-toolbar-actions {
padding: 6px 10px;
font-size: small;
min-width: 110px;
width: 100px;
z-index: 500;
background-color: var(--uai-toolbar-background);
&.ribbon {
position: absolute;
@@ -370,7 +551,8 @@
.uai-button-icon-arrow {
width: 14px;
margin-left: -3px;
margin-left: -4px;
padding-top: 4px;
border-top-right-radius: var(--uai-radius);
border-bottom-right-radius: var(--uai-radius);
@@ -419,7 +601,7 @@
.uai-button-icon-arrow {
width: 14px;
margin-left: -10px;
padding-top: 10px;
padding-top: 20px;
border-top-right-radius: var(--uai-radius);
border-bottom-right-radius: var(--uai-radius);
@@ -807,102 +989,6 @@
}
}
.uai-ribbon-heading-container {
width: 321px;
height: 56px;
display: flex;
position: relative;
z-index: 100;
background-color: var(--uai-container-background);
border: solid 1px var(--uai-border-color);
border-radius: var(--uai-radius);
.uai-ribbon-heading-list {
margin: 5px;
display: flex;
flex-wrap: wrap;
max-width: 300px;
overflow: hidden;
}
.uai-ribbon-heading-arrow {
margin-top: 8px;
margin-right: 5px;
padding-top: 8px;
height: 40px;
width: 16px;
border-radius: var(--uai-radius);
&:hover {
cursor: pointer;
background: #ddd; // var(--uai-content-node-selected-background);
border-radius: var(--uai-radius);
}
}
.uai-ribbon-heading-item {
width: 140px;
height: 42px;
margin: 2px;
padding: 0;
text-align: center;
background-color: #fff;
border: solid 1px var(--uai-border-color);
border-radius: var(--uai-radius);
padding: 5px 10px;
box-sizing: border-box;
cursor: pointer;
flex: 0 0 68px;
&:hover,
&.active {
border-color: var(--uai-primary-color);
}
&-title {
line-height: 18px;
font-weight: 600;
&.text {
font-size: 12px;
font-weight: 400;
}
&.h1 {
font-size: 15px;
}
&.h2 {
font-size: 14px;
}
&.h3 {
font-size: 13px;
}
&.h4 {
font-size: 12px;
}
&.h5 {
font-size: 11px;
}
&.h6 {
font-size: 10px;
}
}
&-subtitle {
font-size: 8px;
color: var(--uai-text-color-light);
text-transform: capitalize;
margin-top: 3px;
line-height: 1;
}
}
}
.uai-modal {
display: none;
/* 默认隐藏 */
@@ -925,7 +1011,7 @@
.uai-pannel-container {
background-color: var(--uai-color-white);
border-right: solid 1px var(--uai-border-color);
width: 400px;
width: 500px;
height: 100%;
box-sizing: border-box;
display: flex;
@@ -1139,9 +1225,8 @@
.bubble {
padding: 10px;
display: inline-block;
height: 100%;
min-height: auto !important;
max-width: calc(100% - 97px);
max-width: calc(100% - 120px);
}
.bubble-sent {

1
src/styles/variables.less
View File

@@ -7,6 +7,7 @@
--uai-warning-color: #f6913e;
--uai-error-color: #ef3f35;
// 背景颜色
--uai-toolbar-background: #fff;
--uai-container-background: #f4f5f7;
--uai-button-hover-background: #f1f3f5;
// 文本选中时的背景颜色