From e78b66bb95a771a74df2fb51a8aafb9c72b81645 Mon Sep 17 00:00:00 2001
From: hanshiyang <yg_yl@163.com>
Date: Wed, 19 Nov 2025 15:16:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E9=87=8D=E6=9E=84=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B9=E5=B8=83=E5=B1=80=E5=B9=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E6=A0=B7=E5=BC=8F=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将图标菜单项替换为文本样式菜单项，并调整相关样式
移除旧的保存和打开图标按钮，添加新的导出、打开和保存文本按钮
更新对应的点击事件处理逻辑和样式
---
 index.html    | 18 ++++++++++++------
 src/main.ts   |  6 +++---
 src/style.css | 44 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 9b26b74..d3c6af9 100644
--- a/index.html
+++ b/index.html
@@ -12,12 +12,6 @@
   <div id="app">
     <div class="menu" editor-component="menu">
       <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">
           <i></i>
         </div>
@@ -342,6 +336,18 @@
           <i></i>
         </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 class="catalog" editor-component="catalog">
       <div class="catalog__header">
diff --git a/src/main.ts b/src/main.ts
index 3097a79..923dfa1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -129,10 +129,10 @@ window.onload = function () {
     fileInput.click()
   }
 
-  // 保存文档功能
-  const saveDom = document.querySelector<HTMLDivElement>('.menu-item__save')!
+  // 导出文档功能
+  const saveDom = document.querySelector<HTMLDivElement>('.menu-item__export')!
   saveDom.onclick = function () {
-    console.log('save document')
+    console.log('export document')
     
     try {
       // 获取编辑器内容
diff --git a/src/style.css b/src/style.css
index efcbc46..7d5a87d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -198,6 +198,50 @@ ul {
   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 {
   background-image: url('./assets/images/size-add.svg');
 }