boyun/by-onlineeditor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): 重构菜单项布局并添加文本样式菜单

Browse Source 
将图标菜单项替换为文本样式菜单项，并调整相关样式
移除旧的保存和打开图标按钮，添加新的导出、打开和保存文本按钮
更新对应的点击事件处理逻辑和样式
This commit is contained in:
hanshiyang 2025-11-19 15:16:59 +08:00
parent 3aa15f7894
commit e78b66bb95
3 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -12,12 +12,6 @@
<div id="app"> <div id="app">
<div class="menu" editor-component="menu"> <div class="menu" editor-component="menu">
<div class="menu-item"> <div class="menu-item">
<div class="menu-item__open" title="打开文档">
<i></i>
</div>
<div class="menu-item__save" title="保存文档">
<i></i>
</div>
<div class="menu-item__undo"> <div class="menu-item__undo">
<i></i> <i></i>
</div> </div>
@ -342,6 +336,18 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<div class="menu-divider"></div>
<div class="menu-item-text">
<div class="menu-item__export" title="导出">
<span>导出</span>
</div>
<div class="menu-item__open" title="打开">
<span>打开</span>
</div>
<div class="menu-item__save" title="保存">
<span>保存</span>
</div>
</div>
</div> </div>
<div class="catalog" editor-component="catalog"> <div class="catalog" editor-component="catalog">
<div class="catalog__header"> <div class="catalog__header">

6
src/main.ts
View File

@ -129,10 +129,10 @@ window.onload = function () {
fileInput.click() fileInput.click()
} }
// 保存文档功能 // 导出文档功能
const saveDom = document.querySelector<HTMLDivElement>('.menu-item__save')! const saveDom = document.querySelector<HTMLDivElement>('.menu-item__export')!
saveDom.onclick = function () { saveDom.onclick = function () {
console.log('save document') console.log('export document')
try { try {
// 获取编辑器内容 // 获取编辑器内容

44
src/style.css
View File

@ -198,6 +198,50 @@ ul {
background-image: url('./assets/images/format.svg'); background-image: url('./assets/images/format.svg');
} }
/* -------------------------------------------------- */
/* Text menu items: horizontal link-style buttons */
/* -------------------------------------------------- */
.menu-item-text {
height: 24px;
display: flex;
align-items: center;
gap: 4px;
}
.menu-item-text > div {
height: 24px;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
border-radius: 3px;
color: #0969da; /* link blue */
font-size: 12px;
line-height: 24px;
}
.menu-item-text > div:hover {
background: rgba(25, 55, 88, .06);
text-decoration: underline;
}
.menu-item-text > div.active {
background: rgba(25, 55, 88, .10);
}
.menu-item-text > div.disable {
color: #c0c4cc;
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
.menu-item-text > div span {
pointer-events: none; /* 保证点击作用在父容器 */
}
.menu-item__size-add i { .menu-item__size-add i {
background-image: url('./assets/images/size-add.svg'); background-image: url('./assets/images/size-add.svg');
} }