diff --git a/index.html b/index.html
index 26d14dc..b543b90 100644
--- a/index.html
+++ b/index.html
@@ -1,126 +1,127 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <!-- 透明 -->
-    <meta name="apple-mobile-web-app-orientation" content="portrait" />
-    <!-- 纵向 -->
-    <title>锤子便签</title>
-    <style>
-      /* Smartisan Notes Color Scheme - Based on Original Design */
-      :root {
-        /* Primary colors - Original Smartisan Notes brown/gold palette */
-        --primary: #5c3c2a; /* Main brown color for UI elements */
-        --primary-dark: #4a3224; /* Darker shade of primary */
-        --primary-light: #f5f0e6; /* Light background tone */
-
-        /* Editor typography - Consistent font size and line height */
-        --editor-font-size: 1.4375rem; /* Base font size for editor */
-        --editor-line-height: 1.1; /* Line height for editor */
-
-        /* Background colors - Warm paper-like tones */
-        --background: #fbf7ed; /* Main app background - warm off-white */
-        --background-secondary: #f7f2e9; /* Slightly darker background */
-        --background-card: #ffffff; /* Pure white for cards/notes */
-        --search-bar-background: #f0f0f0; /* Search bar background - light gray */
-
-        /* Text colors - Brown/black tones for readability */
-        --text-primary: #5c3c2a; /* Main text color - dark brown */
-        --text-secondary: #6e482f; /* Secondary text - medium brown */
-        --text-tertiary: #9e836c; /* Tertiary text - light brown/gray */
-        --text-inverted: #ffffff; /* White text for dark backgrounds */
-
-        /* Accent colors - Smartisan's signature colors */
-        --accent-blue: #5c89f2; /* Blue for links/actions */
-        --accent-green: #97cc4e; /* Green for success/positive actions */
-        --accent-red: #e65c53; /* Red for errors/dangerous actions */
-        --accent-orange: #f0880d; /* Orange for warnings/highlights */
-        --accent-yellow: #ffffdd33; /* Yellow for starred items/highlights (updated to match original) */
-
-        /* Note specific colors */
-        --note-title: #5c3c2a; /* Note title color */
-        --note-content: #6e482f; /* Note content color */
-        --note-date: #705c3c2a; /* Date/time color */
-        --note-star: #ffffdd33; /* Star/favorite color (updated to match original) */
-
-        /* Folder colors */
-        --folder-name: #9b9b9b; /* Folder name color (60% black) */
-        --folder-count: #b4b4b4; /* Folder item count color (30% black) */
-        --folder-item-selected: #f5f5f5; /* Folder item selected background color */
-
-        /* Button colors - Based on Smartisan's button styles */
-        --button-primary: #5c3c2a; /* Primary button - brown */
-        --button-secondary: #97cc4e; /* Secondary button - green */
-        --button-danger: #e65c53; /* Danger button - red */
-        --button-disabled: #d4d4d5; /* Disabled button - light gray */
-
-        /* Status colors */
-        --success: #79ad31; /* Success - green */
-        --warning: #f0880d; /* Warning - orange */
-        --error: #e64746; /* Error - red */
-        --info: #5c89f2; /* Info - blue */
-
-        /* UI elements - Borders, dividers, shadows */
-        --border: #e5ddca; /* Light brown border */
-        --divider: #e5e5e5; /* Light gray divider */
-        --shadow: #00000014; /* Subtle shadow */
-
-        /* Transparency variants */
-        --black-05: #0000000d; /* 5% black */
-        --black-10: #0000001a; /* 10% black */
-        --black-14: #00000024; /* 14% black */
-        --black-20: #00000033; /* 20% black */
-        --black-30: #0000004d; /* 30% black */
-        --black-40: #00000066; /* 40% black */
-        --black-50: #00000080; /* 50% black */
-        --black-60: #00000099; /* 60% black */
-        --black-80: #000000cc; /* 80% black */
-        --black-90: #000000e6; /* 90% black */
-
-        --white-10: #ffffff1a; /* 10% white */
-        --white-20: #ffffff33; /* 20% white */
-        --white-30: #ffffff4d; /* 30% white */
-        --white-40: #ffffff66; /* 40% white */
-        --white-50: #ffffff80; /* 50% white */
-        --white-60: #ffffff99; /* 60% white */
-        --white-80: #ffffffcc; /* 80% white */
-        --white-90: #ffffffe6; /* 90% white */
-
-        --confirmFontSize: 0.8rem;
-        --confirmBg: rgba(0, 0, 0, 0.15);
-        --confirmBtnColor: #000000cc;
-      }
-
-      body {
-        margin: 0;
-        padding: 0;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-        background-color: white;
-        background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
-        color: var(--text-primary);
-        /* 适配iPhone X及更新机型的刘海屏 */
-        padding-top: env(safe-area-inset-top);
-        padding-right: env(safe-area-inset-right);
-        padding-bottom: env(safe-area-inset-bottom);
-        padding-left: env(safe-area-inset-left);
-      }
-
-      #app {
-        height: 100vh;
-        overflow: hidden;
-        /* 适配iPhone X及更新机型的刘海屏 */
-        padding-top: env(safe-area-inset-top);
-        padding-right: env(safe-area-inset-right);
-        padding-bottom: env(safe-area-inset-bottom);
-        padding-left: env(safe-area-inset-left);
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <!-- 透明 -->
+    <meta name="apple-mobile-web-app-orientation" content="portrait" />
+    <!-- 纵向 -->
+    <title>锤子便签</title>
+    <style>
+      /* Smartisan Notes Color Scheme - Based on Original Design */
+      :root {
+        /* Primary colors - Original Smartisan Notes brown/gold palette */
+        --primary: #5c3c2a; /* Main brown color for UI elements */
+        --primary-dark: #4a3224; /* Darker shade of primary */
+        --primary-light: #f5f0e6; /* Light background tone */
+
+        /* Editor typography - Consistent font size and line height */
+        --editor-font-size: 1.4375rem; /* Base font size for editor */
+        --editor-line-height: 1.1; /* Line height for editor */
+
+        /* Background colors - Warm paper-like tones */
+        --background: #fbf7ed; /* Main app background - warm off-white */
+        --background-secondary: #f7f2e9; /* Slightly darker background */
+        --background-card: #ffffff; /* Pure white for cards/notes */
+        --search-bar-background: #f0f0f0; /* Search bar background - light gray */
+
+        /* Text colors - Brown/black tones for readability */
+        --text-primary: #5c3c2a; /* Main text color - dark brown */
+        --text-secondary: #6e482f; /* Secondary text - medium brown */
+        --text-tertiary: #9e836c; /* Tertiary text - light brown/gray */
+        --text-inverted: #ffffff; /* White text for dark backgrounds */
+
+        /* Accent colors - Smartisan's signature colors */
+        --accent-blue: #5c89f2; /* Blue for links/actions */
+        --accent-green: #97cc4e; /* Green for success/positive actions */
+        --accent-red: #e65c53; /* Red for errors/dangerous actions */
+        --accent-orange: #f0880d; /* Orange for warnings/highlights */
+        --accent-yellow: #ffffdd33; /* Yellow for starred items/highlights (updated to match original) */
+
+        /* Note specific colors */
+        --note-title: #5c3c2a; /* Note title color */
+        --note-content: #6e482f; /* Note content color */
+        --note-date: #705c3c2a; /* Date/time color */
+        --note-star: #ffffdd33; /* Star/favorite color (updated to match original) */
+
+        /* Folder colors */
+        --folder-name: #9b9b9b; /* Folder name color (60% black) */
+        --folder-count: #b4b4b4; /* Folder item count color (30% black) */
+        --folder-item-selected: #f5f5f5; /* Folder item selected background color */
+
+        /* Button colors - Based on Smartisan's button styles */
+        --button-primary: #5c3c2a; /* Primary button - brown */
+        --button-secondary: #97cc4e; /* Secondary button - green */
+        --button-danger: #e65c53; /* Danger button - red */
+        --button-disabled: #d4d4d5; /* Disabled button - light gray */
+
+        /* Status colors */
+        --success: #79ad31; /* Success - green */
+        --warning: #f0880d; /* Warning - orange */
+        --error: #e64746; /* Error - red */
+        --info: #5c89f2; /* Info - blue */
+
+        /* UI elements - Borders, dividers, shadows */
+        --border: #e5ddca; /* Light brown border */
+        --divider: #e5e5e5; /* Light gray divider */
+        --shadow: #00000014; /* Subtle shadow */
+
+        /* Transparency variants */
+        --black-05: #0000000d; /* 5% black */
+        --black-10: #0000001a; /* 10% black */
+        --black-14: #00000024; /* 14% black */
+        --black-20: #00000033; /* 20% black */
+        --black-30: #0000004d; /* 30% black */
+        --black-40: #00000066; /* 40% black */
+        --black-50: #00000080; /* 50% black */
+        --black-60: #00000099; /* 60% black */
+        --black-80: #000000cc; /* 80% black */
+        --black-90: #000000e6; /* 90% black */
+
+        --white-10: #ffffff1a; /* 10% white */
+        --white-20: #ffffff33; /* 20% white */
+        --white-30: #ffffff4d; /* 30% white */
+        --white-40: #ffffff66; /* 40% white */
+        --white-50: #ffffff80; /* 50% white */
+        --white-60: #ffffff99; /* 60% white */
+        --white-80: #ffffffcc; /* 80% white */
+        --white-90: #ffffffe6; /* 90% white */
+
+        --confirmFontSize: 0.8rem;
+        --confirmBg: rgba(0, 0, 0, 0.15);
+        --confirmBtnColor: #000000cc;
+      }
+      html {
+        background-color: var(--note-title);
+      }
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
+        color: var(--text-primary);
+        /* 适配iPhone X及更新机型的刘海屏 */
+        padding-top: env(safe-area-inset-top);
+        padding-right: env(safe-area-inset-right);
+        padding-bottom: env(safe-area-inset-bottom);
+        padding-left: env(safe-area-inset-left);
+      }
+
+      #app {
+        height: 100vh;
+        overflow: hidden;
+        /* 适配iPhone X及更新机型的刘海屏 */
+        padding-top: env(safe-area-inset-top);
+        padding-right: env(safe-area-inset-right);
+        padding-bottom: env(safe-area-inset-bottom);
+        padding-left: env(safe-area-inset-left);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
index d7f932d..b507c52 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -114,6 +114,12 @@ onUnmounted(() => {
   position: relative;
   overflow: hidden;
   background-color: #f5f5f5; // 设置默认背景色，防止闪烁
+  touch-action: pan-y;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -ms-touch-action: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 // 网络状态指示器
@@ -128,20 +134,20 @@ onUnmounted(() => {
   pointer-events: none;
 }
 
-.offline-indicator {
-  background-color: #ff6b6b;
-  color: white;
-  padding: 8px 16px;
-  border-radius: 0 0 4px 4px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  pointer-events: auto;
-}
-
-.offline-icon {
-  margin-right: 8px;
+.offline-indicator {
+  background-color: #ff6b6b;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0 0 0.25rem 0.25rem;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
+  pointer-events: auto;
+}
+
+.offline-icon {
+  margin-right: 0.5rem;
 }
 
 .offline-text {
diff --git a/src/common/base.css b/src/common/base.css
index 2354854..e5bdd08 100644
--- a/src/common/base.css
+++ b/src/common/base.css
@@ -1,544 +1,556 @@
-/************************************************************
-** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
-** 否则页面将无法正常显示                                  **
-************************************************************/
-
-html {
-  font-size: 16px;
-  user-select: none;
-  -webkit-user-drag: none;
-  -webkit-tap-highlight-color: transparent;
-  touch-action: none;
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-img {
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  outline-color: transparent;
-  lighting-color: transparent;
-}
-::selection {
-  background-color: #d3b9a7; /* 选中时的背景颜色 */
-  color: #ffffff; /* 选中时的文字颜色 */
-}
-img::selection {
-  background-color: transparent; /* 选中时的背景颜色 */
-  color: #ffffff; /* 选中时的文字颜色 */
-}
-button {
-  border: none;
-}
-
-#app {
-  width: 100vw;
-  height: 100vh;
-}
-
-.code-fun-flex-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.code-fun-flex-col {
-  display: flex;
-  flex-direction: column;
-}
-
-.code-fun-justify-start {
-  justify-content: flex-start;
-}
-
-.code-fun-justify-end {
-  justify-content: flex-end;
-}
-
-.code-fun-justify-center {
-  justify-content: center;
-}
-
-.code-fun-justify-between {
-  justify-content: space-between;
-}
-
-.code-fun-justify-around {
-  justify-content: space-around;
-}
-
-.code-fun-justify-evenly {
-  justify-content: space-evenly;
-}
-
-.code-fun-items-start {
-  align-items: flex-start;
-}
-
-.code-fun-items-end {
-  align-items: flex-end;
-}
-
-.code-fun-items-center {
-  align-items: center;
-}
-
-.code-fun-items-baseline {
-  align-items: baseline;
-}
-
-.code-fun-items-stretch {
-  align-items: stretch;
-}
-
-.code-fun-self-start {
-  align-self: flex-start;
-}
-
-.code-fun-self-end {
-  align-self: flex-end;
-}
-
-.code-fun-self-center {
-  align-self: center;
-}
-
-.code-fun-self-baseline {
-  align-self: baseline;
-}
-
-.code-fun-self-stretch {
-  align-self: stretch;
-}
-
-.code-fun-flex-1 {
-  flex: 1 1 0%;
-}
-
-.code-fun-flex-auto {
-  flex: 1 1 auto;
-}
-
-.code-fun-grow {
-  flex-grow: 1;
-}
-
-.code-fun-grow-0 {
-  flex-grow: 0;
-}
-
-.code-fun-shrink {
-  flex-shrink: 1;
-}
-
-.code-fun-shrink-0 {
-  flex-shrink: 0;
-}
-
-.code-fun-relative {
-  position: relative;
-}
-
-.code-fun-ml-2 {
-  margin-left: 0.13rem;
-}
-
-.code-fun-mt-2 {
-  margin-top: 0.13rem;
-}
-
-.code-fun-ml-4 {
-  margin-left: 0.25rem;
-}
-
-.code-fun-mt-4 {
-  margin-top: 0.25rem;
-}
-
-.code-fun-ml-6 {
-  margin-left: 0.38rem;
-}
-
-.code-fun-mt-6 {
-  margin-top: 0.38rem;
-}
-
-.code-fun-ml-8 {
-  margin-left: 0.5rem;
-}
-
-.code-fun-mt-8 {
-  margin-top: 0.5rem;
-}
-
-.code-fun-ml-10 {
-  margin-left: 0.63rem;
-}
-
-.code-fun-mt-10 {
-  margin-top: 0.63rem;
-}
-
-.code-fun-ml-12 {
-  margin-left: 0.75rem;
-}
-
-.code-fun-mt-12 {
-  margin-top: 0.75rem;
-}
-
-.code-fun-ml-14 {
-  margin-left: 0.88rem;
-}
-
-.code-fun-mt-14 {
-  margin-top: 0.88rem;
-}
-
-.code-fun-ml-16 {
-  margin-left: 1rem;
-}
-
-.code-fun-mt-16 {
-  margin-top: 1rem;
-}
-
-.code-fun-ml-18 {
-  margin-left: 1.13rem;
-}
-
-.code-fun-mt-18 {
-  margin-top: 1.13rem;
-}
-
-.code-fun-ml-20 {
-  margin-left: 1.25rem;
-}
-
-.code-fun-mt-20 {
-  margin-top: 1.25rem;
-}
-
-.code-fun-ml-22 {
-  margin-left: 1.38rem;
-}
-
-.code-fun-mt-22 {
-  margin-top: 1.38rem;
-}
-
-.code-fun-ml-24 {
-  margin-left: 1.5rem;
-}
-
-.code-fun-mt-24 {
-  margin-top: 1.5rem;
-}
-
-.code-fun-ml-26 {
-  margin-left: 1.63rem;
-}
-
-.code-fun-mt-26 {
-  margin-top: 1.63rem;
-}
-
-.code-fun-ml-28 {
-  margin-left: 1.75rem;
-}
-
-.code-fun-mt-28 {
-  margin-top: 1.75rem;
-}
-
-.code-fun-ml-30 {
-  margin-left: 1.88rem;
-}
-
-.code-fun-mt-30 {
-  margin-top: 1.88rem;
-}
-
-.code-fun-ml-32 {
-  margin-left: 2rem;
-}
-
-.code-fun-mt-32 {
-  margin-top: 2rem;
-}
-
-.code-fun-ml-34 {
-  margin-left: 2.13rem;
-}
-
-.code-fun-mt-34 {
-  margin-top: 2.13rem;
-}
-
-.code-fun-ml-36 {
-  margin-left: 2.25rem;
-}
-
-.code-fun-mt-36 {
-  margin-top: 2.25rem;
-}
-
-.code-fun-ml-38 {
-  margin-left: 2.38rem;
-}
-
-.code-fun-mt-38 {
-  margin-top: 2.38rem;
-}
-
-.code-fun-ml-40 {
-  margin-left: 2.5rem;
-}
-
-.code-fun-mt-40 {
-  margin-top: 2.5rem;
-}
-
-.code-fun-ml-42 {
-  margin-left: 2.63rem;
-}
-
-.code-fun-mt-42 {
-  margin-top: 2.63rem;
-}
-
-.code-fun-ml-44 {
-  margin-left: 2.75rem;
-}
-
-.code-fun-mt-44 {
-  margin-top: 2.75rem;
-}
-
-.code-fun-ml-46 {
-  margin-left: 2.88rem;
-}
-
-.code-fun-mt-46 {
-  margin-top: 2.88rem;
-}
-
-.code-fun-ml-48 {
-  margin-left: 3rem;
-}
-
-.code-fun-mt-48 {
-  margin-top: 3rem;
-}
-
-.code-fun-ml-50 {
-  margin-left: 3.13rem;
-}
-
-.code-fun-mt-50 {
-  margin-top: 3.13rem;
-}
-
-.code-fun-ml-52 {
-  margin-left: 3.25rem;
-}
-
-.code-fun-mt-52 {
-  margin-top: 3.25rem;
-}
-
-.code-fun-ml-54 {
-  margin-left: 3.38rem;
-}
-
-.code-fun-mt-54 {
-  margin-top: 3.38rem;
-}
-
-.code-fun-ml-56 {
-  margin-left: 3.5rem;
-}
-
-.code-fun-mt-56 {
-  margin-top: 3.5rem;
-}
-
-.code-fun-ml-58 {
-  margin-left: 3.63rem;
-}
-
-.code-fun-mt-58 {
-  margin-top: 3.63rem;
-}
-
-.code-fun-ml-60 {
-  margin-left: 3.75rem;
-}
-
-.code-fun-mt-60 {
-  margin-top: 3.75rem;
-}
-
-.code-fun-ml-62 {
-  margin-left: 3.88rem;
-}
-
-.code-fun-mt-62 {
-  margin-top: 3.88rem;
-}
-
-.code-fun-ml-64 {
-  margin-left: 4rem;
-}
-
-.code-fun-mt-64 {
-  margin-top: 4rem;
-}
-
-.code-fun-ml-66 {
-  margin-left: 4.13rem;
-}
-
-.code-fun-mt-66 {
-  margin-top: 4.13rem;
-}
-
-.code-fun-ml-68 {
-  margin-left: 4.25rem;
-}
-
-.code-fun-mt-68 {
-  margin-top: 4.25rem;
-}
-
-.code-fun-ml-70 {
-  margin-left: 4.38rem;
-}
-
-.code-fun-mt-70 {
-  margin-top: 4.38rem;
-}
-
-.code-fun-ml-72 {
-  margin-left: 4.5rem;
-}
-
-.code-fun-mt-72 {
-  margin-top: 4.5rem;
-}
-
-.code-fun-ml-74 {
-  margin-left: 4.63rem;
-}
-
-.code-fun-mt-74 {
-  margin-top: 4.63rem;
-}
-
-.code-fun-ml-76 {
-  margin-left: 4.75rem;
-}
-
-.code-fun-mt-76 {
-  margin-top: 4.75rem;
-}
-
-.code-fun-ml-78 {
-  margin-left: 4.88rem;
-}
-
-.code-fun-mt-78 {
-  margin-top: 4.88rem;
-}
-
-.code-fun-ml-80 {
-  margin-left: 5rem;
-}
-
-.code-fun-mt-80 {
-  margin-top: 5rem;
-}
-
-.code-fun-ml-82 {
-  margin-left: 5.13rem;
-}
-
-.code-fun-mt-82 {
-  margin-top: 5.13rem;
-}
-
-.code-fun-ml-84 {
-  margin-left: 5.25rem;
-}
-
-.code-fun-mt-84 {
-  margin-top: 5.25rem;
-}
-
-.code-fun-ml-86 {
-  margin-left: 5.38rem;
-}
-
-.code-fun-mt-86 {
-  margin-top: 5.38rem;
-}
-
-.code-fun-ml-88 {
-  margin-left: 5.5rem;
-}
-
-.code-fun-mt-88 {
-  margin-top: 5.5rem;
-}
-
-.code-fun-ml-90 {
-  margin-left: 5.63rem;
-}
-
-.code-fun-mt-90 {
-  margin-top: 5.63rem;
-}
-
-.code-fun-ml-92 {
-  margin-left: 5.75rem;
-}
-
-.code-fun-mt-92 {
-  margin-top: 5.75rem;
-}
-
-.code-fun-ml-94 {
-  margin-left: 5.88rem;
-}
-
-.code-fun-mt-94 {
-  margin-top: 5.88rem;
-}
-
-.code-fun-ml-96 {
-  margin-left: 6rem;
-}
-
-.code-fun-mt-96 {
-  margin-top: 6rem;
-}
-
-.code-fun-ml-98 {
-  margin-left: 6.13rem;
-}
-
-.code-fun-mt-98 {
-  margin-top: 6.13rem;
-}
-
-.code-fun-ml-100 {
-  margin-left: 6.25rem;
-}
-
-.code-fun-mt-100 {
-  margin-top: 6.25rem;
-}
+/************************************************************
+** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
+** 否则页面将无法正常显示                                  **
+************************************************************/
+
+html {
+  font-size: 18px;
+  user-select: none;
+  -webkit-user-drag: none;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: pan-y;
+  overflow: hidden;
+}
+
+/* 禁止页面整体滚动 */
+body {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: none;
+  touch-action: pan-y;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+img {
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline-color: transparent;
+  lighting-color: transparent;
+}
+::selection {
+  background-color: #d3b9a7; /* 选中时的背景颜色 */
+  color: #ffffff; /* 选中时的文字颜色 */
+}
+img::selection {
+  background-color: transparent; /* 选中时的背景颜色 */
+  color: #ffffff; /* 选中时的文字颜色 */
+}
+button {
+  border: none;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+}
+
+.code-fun-flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.code-fun-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.code-fun-justify-start {
+  justify-content: flex-start;
+}
+
+.code-fun-justify-end {
+  justify-content: flex-end;
+}
+
+.code-fun-justify-center {
+  justify-content: center;
+}
+
+.code-fun-justify-between {
+  justify-content: space-between;
+}
+
+.code-fun-justify-around {
+  justify-content: space-around;
+}
+
+.code-fun-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.code-fun-items-start {
+  align-items: flex-start;
+}
+
+.code-fun-items-end {
+  align-items: flex-end;
+}
+
+.code-fun-items-center {
+  align-items: center;
+}
+
+.code-fun-items-baseline {
+  align-items: baseline;
+}
+
+.code-fun-items-stretch {
+  align-items: stretch;
+}
+
+.code-fun-self-start {
+  align-self: flex-start;
+}
+
+.code-fun-self-end {
+  align-self: flex-end;
+}
+
+.code-fun-self-center {
+  align-self: center;
+}
+
+.code-fun-self-baseline {
+  align-self: baseline;
+}
+
+.code-fun-self-stretch {
+  align-self: stretch;
+}
+
+.code-fun-flex-1 {
+  flex: 1 1 0%;
+}
+
+.code-fun-flex-auto {
+  flex: 1 1 auto;
+}
+
+.code-fun-grow {
+  flex-grow: 1;
+}
+
+.code-fun-grow-0 {
+  flex-grow: 0;
+}
+
+.code-fun-shrink {
+  flex-shrink: 1;
+}
+
+.code-fun-shrink-0 {
+  flex-shrink: 0;
+}
+
+.code-fun-relative {
+  position: relative;
+}
+
+.code-fun-ml-2 {
+  margin-left: 0.13rem;
+}
+
+.code-fun-mt-2 {
+  margin-top: 0.13rem;
+}
+
+.code-fun-ml-4 {
+  margin-left: 0.25rem;
+}
+
+.code-fun-mt-4 {
+  margin-top: 0.25rem;
+}
+
+.code-fun-ml-6 {
+  margin-left: 0.38rem;
+}
+
+.code-fun-mt-6 {
+  margin-top: 0.38rem;
+}
+
+.code-fun-ml-8 {
+  margin-left: 0.5rem;
+}
+
+.code-fun-mt-8 {
+  margin-top: 0.5rem;
+}
+
+.code-fun-ml-10 {
+  margin-left: 0.63rem;
+}
+
+.code-fun-mt-10 {
+  margin-top: 0.63rem;
+}
+
+.code-fun-ml-12 {
+  margin-left: 0.75rem;
+}
+
+.code-fun-mt-12 {
+  margin-top: 0.75rem;
+}
+
+.code-fun-ml-14 {
+  margin-left: 0.88rem;
+}
+
+.code-fun-mt-14 {
+  margin-top: 0.88rem;
+}
+
+.code-fun-ml-16 {
+  margin-left: 1rem;
+}
+
+.code-fun-mt-16 {
+  margin-top: 1rem;
+}
+
+.code-fun-ml-18 {
+  margin-left: 1.13rem;
+}
+
+.code-fun-mt-18 {
+  margin-top: 1.13rem;
+}
+
+.code-fun-ml-20 {
+  margin-left: 1.25rem;
+}
+
+.code-fun-mt-20 {
+  margin-top: 1.25rem;
+}
+
+.code-fun-ml-22 {
+  margin-left: 1.38rem;
+}
+
+.code-fun-mt-22 {
+  margin-top: 1.38rem;
+}
+
+.code-fun-ml-24 {
+  margin-left: 1.5rem;
+}
+
+.code-fun-mt-24 {
+  margin-top: 1.5rem;
+}
+
+.code-fun-ml-26 {
+  margin-left: 1.63rem;
+}
+
+.code-fun-mt-26 {
+  margin-top: 1.63rem;
+}
+
+.code-fun-ml-28 {
+  margin-left: 1.75rem;
+}
+
+.code-fun-mt-28 {
+  margin-top: 1.75rem;
+}
+
+.code-fun-ml-30 {
+  margin-left: 1.88rem;
+}
+
+.code-fun-mt-30 {
+  margin-top: 1.88rem;
+}
+
+.code-fun-ml-32 {
+  margin-left: 2rem;
+}
+
+.code-fun-mt-32 {
+  margin-top: 2rem;
+}
+
+.code-fun-ml-34 {
+  margin-left: 2.13rem;
+}
+
+.code-fun-mt-34 {
+  margin-top: 2.13rem;
+}
+
+.code-fun-ml-36 {
+  margin-left: 2.25rem;
+}
+
+.code-fun-mt-36 {
+  margin-top: 2.25rem;
+}
+
+.code-fun-ml-38 {
+  margin-left: 2.38rem;
+}
+
+.code-fun-mt-38 {
+  margin-top: 2.38rem;
+}
+
+.code-fun-ml-40 {
+  margin-left: 2.5rem;
+}
+
+.code-fun-mt-40 {
+  margin-top: 2.5rem;
+}
+
+.code-fun-ml-42 {
+  margin-left: 2.63rem;
+}
+
+.code-fun-mt-42 {
+  margin-top: 2.63rem;
+}
+
+.code-fun-ml-44 {
+  margin-left: 2.75rem;
+}
+
+.code-fun-mt-44 {
+  margin-top: 2.75rem;
+}
+
+.code-fun-ml-46 {
+  margin-left: 2.88rem;
+}
+
+.code-fun-mt-46 {
+  margin-top: 2.88rem;
+}
+
+.code-fun-ml-48 {
+  margin-left: 3rem;
+}
+
+.code-fun-mt-48 {
+  margin-top: 3rem;
+}
+
+.code-fun-ml-50 {
+  margin-left: 3.13rem;
+}
+
+.code-fun-mt-50 {
+  margin-top: 3.13rem;
+}
+
+.code-fun-ml-52 {
+  margin-left: 3.25rem;
+}
+
+.code-fun-mt-52 {
+  margin-top: 3.25rem;
+}
+
+.code-fun-ml-54 {
+  margin-left: 3.38rem;
+}
+
+.code-fun-mt-54 {
+  margin-top: 3.38rem;
+}
+
+.code-fun-ml-56 {
+  margin-left: 3.5rem;
+}
+
+.code-fun-mt-56 {
+  margin-top: 3.5rem;
+}
+
+.code-fun-ml-58 {
+  margin-left: 3.63rem;
+}
+
+.code-fun-mt-58 {
+  margin-top: 3.63rem;
+}
+
+.code-fun-ml-60 {
+  margin-left: 3.75rem;
+}
+
+.code-fun-mt-60 {
+  margin-top: 3.75rem;
+}
+
+.code-fun-ml-62 {
+  margin-left: 3.88rem;
+}
+
+.code-fun-mt-62 {
+  margin-top: 3.88rem;
+}
+
+.code-fun-ml-64 {
+  margin-left: 4rem;
+}
+
+.code-fun-mt-64 {
+  margin-top: 4rem;
+}
+
+.code-fun-ml-66 {
+  margin-left: 4.13rem;
+}
+
+.code-fun-mt-66 {
+  margin-top: 4.13rem;
+}
+
+.code-fun-ml-68 {
+  margin-left: 4.25rem;
+}
+
+.code-fun-mt-68 {
+  margin-top: 4.25rem;
+}
+
+.code-fun-ml-70 {
+  margin-left: 4.38rem;
+}
+
+.code-fun-mt-70 {
+  margin-top: 4.38rem;
+}
+
+.code-fun-ml-72 {
+  margin-left: 4.5rem;
+}
+
+.code-fun-mt-72 {
+  margin-top: 4.5rem;
+}
+
+.code-fun-ml-74 {
+  margin-left: 4.63rem;
+}
+
+.code-fun-mt-74 {
+  margin-top: 4.63rem;
+}
+
+.code-fun-ml-76 {
+  margin-left: 4.75rem;
+}
+
+.code-fun-mt-76 {
+  margin-top: 4.75rem;
+}
+
+.code-fun-ml-78 {
+  margin-left: 4.88rem;
+}
+
+.code-fun-mt-78 {
+  margin-top: 4.88rem;
+}
+
+.code-fun-ml-80 {
+  margin-left: 5rem;
+}
+
+.code-fun-mt-80 {
+  margin-top: 5rem;
+}
+
+.code-fun-ml-82 {
+  margin-left: 5.13rem;
+}
+
+.code-fun-mt-82 {
+  margin-top: 5.13rem;
+}
+
+.code-fun-ml-84 {
+  margin-left: 5.25rem;
+}
+
+.code-fun-mt-84 {
+  margin-top: 5.25rem;
+}
+
+.code-fun-ml-86 {
+  margin-left: 5.38rem;
+}
+
+.code-fun-mt-86 {
+  margin-top: 5.38rem;
+}
+
+.code-fun-ml-88 {
+  margin-left: 5.5rem;
+}
+
+.code-fun-mt-88 {
+  margin-top: 5.5rem;
+}
+
+.code-fun-ml-90 {
+  margin-left: 5.63rem;
+}
+
+.code-fun-mt-90 {
+  margin-top: 5.63rem;
+}
+
+.code-fun-ml-92 {
+  margin-left: 5.75rem;
+}
+
+.code-fun-mt-92 {
+  margin-top: 5.75rem;
+}
+
+.code-fun-ml-94 {
+  margin-left: 5.88rem;
+}
+
+.code-fun-mt-94 {
+  margin-top: 5.88rem;
+}
+
+.code-fun-ml-96 {
+  margin-left: 6rem;
+}
+
+.code-fun-mt-96 {
+  margin-top: 6rem;
+}
+
+.code-fun-ml-98 {
+  margin-left: 6.13rem;
+}
+
+.code-fun-mt-98 {
+  margin-top: 6.13rem;
+}
+
+.code-fun-ml-100 {
+  margin-left: 6.25rem;
+}
+
+.code-fun-mt-100 {
+  margin-top: 6.25rem;
+}
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 2015756..0f9b632 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,257 +1,257 @@
-<template>
-  <div class="component">
-    <div class="inner code-fun-flex-row code-fun-items-center">
-      <!-- 左侧图标 -->
-      <img class="left-icon" :src="leftIconSource" @click="handleLeftAction" />
-
-      <!-- 标题区域 -->
-      <div class="title-container">
-        <span class="text" @click="handleTitlePress">{{ title }}</span>
-        <!-- 文件夹展开图标 -->
-        <img v-if="showFolderIcon" class="folder-icon" :src="folderExpanded ? '/assets/icons/drawable-xxhdpi/folder_title_arrow_pressed.png' : '/assets/icons/drawable-xxhdpi/folder_title_arrow_normal.png'" @click.stop="handleFolderToggle" />
-      </div>
-
-      <!-- 右侧操作按钮 -->
-      <!-- 新建便签 -->
-      <img v-if="actionIcon === 'create'" class="image_4" src="/assets/icons/drawable-xxhdpi/btn_create.png" @click="handleAction('create')" />
-
-      <!-- 编辑模式 -->
-      <div v-else-if="actionIcon === 'edit'" class="code-fun-flex-row code-fun-items-center right-group">
-        <!-- 插入图片 -->
-        <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_pic.png" @click="handleAction('insertImage')" />
-        <!-- 保存便签 -->
-        <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_save_notes.png" @click="handleAction('save')" />
-      </div>
-
-      <!-- 预览模式 -->
-      <div v-else-if="actionIcon === 'preview'" class="code-fun-flex-row code-fun-items-center right-group">
-        <!-- 删除便签 -->
-        <img 
-          ref="deleteButtonRef"
-          class="image_4" 
-          :src="deleteButtonFrame" 
-          @click="handleAction('delete')" 
-        />
-        <!-- 分享便签 -->
-        <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_share_notes.png" @click="handleAction('share')" />
-      </div>
-      <!-- 占位符 -->
-      <div v-else class="image_4-placeholder"></div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, defineExpose } from 'vue'
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  onBack: {
-    type: Function,
-    default: null,
-  },
-  onAction: {
-    type: Function,
-    default: null,
-  },
-  actionText: {
-    type: String,
-    default: '',
-  },
-  actionIcon: {
-    type: String,
-    default: '',
-  },
-  leftIcon: {
-    type: String,
-    default: '',
-  },
-  leftType: {
-    type: String,
-    default: 'back',
-  },
-  onLeftAction: {
-    type: Function,
-    default: null,
-  },
-  onFolderToggle: {
-    type: Function,
-    default: null,
-  },
-  isFolderExpanded: {
-    type: Boolean,
-    default: undefined,
-  },
-  onTitlePress: {
-    type: Function,
-    default: null,
-  },
-  background: {
-    type: String,
-    default: 'url(/assets/icons/drawable-xxhdpi/action_bar_default.png)',
-  },
-  color: {
-    type: String,
-    default: 'white',
-  },
-})
-
-const localFolderExpanded = ref(false)
-const deleteButtonRef = ref(null)
-const deleteButtonFrame = ref('/assets/icons/drawable-xxhdpi/btn_delete_notes.png')
-const isDeleteAnimating = ref(false)
-
-const folderExpanded = computed(() => {
-  // 优先使用父组件传递的isFolderExpanded状态，否则使用本地状态
-  return props.isFolderExpanded !== undefined ? props.isFolderExpanded : localFolderExpanded.value
-})
-
-const showFolderIcon = computed(() => {
-  // 只有当leftType为settings且有onFolderToggle回调时才显示文件夹图标
-  return props.leftType === 'settings' && props.onFolderToggle
-})
-
-const leftIconSource = computed(() => {
-  // 根据leftType属性返回对应的图标路径
-  if (props.leftType === 'settings') {
-    return '/assets/icons/drawable-xxhdpi/btn_settings.png'
-  } else {
-    if (props.color !== 'white') {
-      return '/assets/icons/drawable-xxhdpi/btn_back_black.png'
-    } else {
-      return '/assets/icons/drawable-xxhdpi/btn_back.png'
-    }
-  }
-})
-
-const handleFolderToggle = () => {
-  // 切换文件夹展开状态
-  if (props.isFolderExpanded === undefined) {
-    // 如果父组件没有传递isFolderExpanded，则使用本地状态
-    localFolderExpanded.value = !localFolderExpanded.value
-  }
-
-  // 调用父组件传递的回调函数
-  if (props.onFolderToggle) {
-    props.onFolderToggle()
-  }
-}
-
-// 播放删除按钮动画（只使用存在的帧）
-const playDeleteAnimation = () => {
-  if (isDeleteAnimating.value) return
-  
-  isDeleteAnimating.value = true
-  // 只使用存在的帧编号
-  const frames = [1, 6, 9, 10, 13, 16, 19, 21, 23, 25, 26, 27, 28, 29, 30]
-  let currentFrameIndex = 0
-  
-  const playFrame = () => {
-    if (currentFrameIndex < frames.length) {
-      // 格式化帧编号（补零）
-      const frameNumber = frames[currentFrameIndex].toString().padStart(4, '0')
-      deleteButtonFrame.value = `/assets/icons/drawable-xxhdpi/title_bar_del_btn_mov_${frameNumber}.png`
-      currentFrameIndex++
-      
-      // 使用setTimeout控制动画播放速度
-      setTimeout(playFrame, 50) // 约20fps，调整速度以适应帧数
-    } else {
-      // 动画播放完成，重置为默认图标
-      setTimeout(() => {
-        deleteButtonFrame.value = '/assets/icons/drawable-xxhdpi/btn_delete_notes.png'
-        isDeleteAnimating.value = false
-      }, 100)
-    }
-  }
-  
-  // 开始播放动画
-  playFrame()
-}
-
-// 暴露播放删除动画的方法给父组件
-defineExpose({
-  playDeleteAnimation
-})
-
-const handleLeftAction = () => {
-  // 处理左侧图标点击事件
-  if (props.onLeftAction) {
-    props.onLeftAction()
-  } else if (props.leftType !== 'settings' && props.onBack) {
-    // 兼容旧版本的onBack属性
-    props.onBack()
-  }
-}
-
-const handleAction = actionType => {
-  // 处理右侧操作按钮点击事件
-  if (props.onAction) {
-    props.onAction(actionType)
-  }
-}
-
-const handleTitlePress = () => {
-  // 处理标题点击事件
-  if (props.onTitlePress) {
-    props.onTitlePress()
-  }
-}
-</script>
-
-<style scoped lang="less">
-.component {
-  padding: 2.5rem 0.72rem 0.35rem;
-  background: v-bind(background);
-  background-size: 100% 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  position: relative;
-  box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.2);
-  .inner {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-  .left-icon,
-  .image_4 {
-    width: 1.9rem;
-    height: 1.9rem;
-    cursor: pointer;
-  }
-  .right-group {
-    gap: 0.6rem;
-  }
-
-  .image_4-placeholder {
-    width: 1.9rem;
-    height: 1.9rem;
-  }
-
-  .title-container {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    flex: 1;
-    justify-content: center;
-
-    .folder-icon {
-      width: 0.8rem;
-      height: 0.8rem;
-      margin-left: 0.2rem;
-      cursor: pointer;
-    }
-
-    .text {
-      color: v-bind(color);
-      font-size: 1.01rem;
-      line-height: 1.01rem;
-      letter-spacing: 0.05em;
-      text-indent: 0.05em;
-    }
-  }
-}
-</style>
+<template>
+  <div class="component">
+    <div class="inner code-fun-flex-row code-fun-items-center">
+      <!-- 左侧图标 -->
+      <img class="left-icon" :src="leftIconSource" @click="handleLeftAction" />
+
+      <!-- 标题区域 -->
+      <div class="title-container">
+        <span class="text" @click="handleTitlePress">{{ title }}</span>
+        <!-- 文件夹展开图标 -->
+        <img v-if="showFolderIcon" class="folder-icon" :src="folderExpanded ? '/assets/icons/drawable-xxhdpi/folder_title_arrow_pressed.png' : '/assets/icons/drawable-xxhdpi/folder_title_arrow_normal.png'" @click.stop="handleFolderToggle" />
+      </div>
+
+      <!-- 右侧操作按钮 -->
+      <!-- 新建便签 -->
+      <img v-if="actionIcon === 'create'" class="image_4" src="/assets/icons/drawable-xxhdpi/btn_create.png" @click="handleAction('create')" />
+
+      <!-- 编辑模式 -->
+      <div v-else-if="actionIcon === 'edit'" class="code-fun-flex-row code-fun-items-center right-group">
+        <!-- 插入图片 -->
+        <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_pic.png" @click="handleAction('insertImage')" />
+        <!-- 保存便签 -->
+        <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_save_notes.png" @click="handleAction('save')" />
+      </div>
+
+      <!-- 预览模式 -->
+      <div v-else-if="actionIcon === 'preview'" class="code-fun-flex-row code-fun-items-center right-group">
+        <!-- 删除便签 -->
+        <img 
+          ref="deleteButtonRef"
+          class="image_4" 
+          :src="deleteButtonFrame" 
+          @click="handleAction('delete')" 
+        />
+        <!-- 分享便签 -->
+        <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_share_notes.png" @click="handleAction('share')" />
+      </div>
+      <!-- 占位符 -->
+      <div v-else class="image_4-placeholder"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineExpose } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  onBack: {
+    type: Function,
+    default: null,
+  },
+  onAction: {
+    type: Function,
+    default: null,
+  },
+  actionText: {
+    type: String,
+    default: '',
+  },
+  actionIcon: {
+    type: String,
+    default: '',
+  },
+  leftIcon: {
+    type: String,
+    default: '',
+  },
+  leftType: {
+    type: String,
+    default: 'back',
+  },
+  onLeftAction: {
+    type: Function,
+    default: null,
+  },
+  onFolderToggle: {
+    type: Function,
+    default: null,
+  },
+  isFolderExpanded: {
+    type: Boolean,
+    default: undefined,
+  },
+  onTitlePress: {
+    type: Function,
+    default: null,
+  },
+  background: {
+    type: String,
+    default: 'url(/assets/icons/drawable-xxhdpi/action_bar_default.png)',
+  },
+  color: {
+    type: String,
+    default: 'white',
+  },
+})
+
+const localFolderExpanded = ref(false)
+const deleteButtonRef = ref(null)
+const deleteButtonFrame = ref('/assets/icons/drawable-xxhdpi/btn_delete_notes.png')
+const isDeleteAnimating = ref(false)
+
+const folderExpanded = computed(() => {
+  // 优先使用父组件传递的isFolderExpanded状态，否则使用本地状态
+  return props.isFolderExpanded !== undefined ? props.isFolderExpanded : localFolderExpanded.value
+})
+
+const showFolderIcon = computed(() => {
+  // 只有当leftType为settings且有onFolderToggle回调时才显示文件夹图标
+  return props.leftType === 'settings' && props.onFolderToggle
+})
+
+const leftIconSource = computed(() => {
+  // 根据leftType属性返回对应的图标路径
+  if (props.leftType === 'settings') {
+    return '/assets/icons/drawable-xxhdpi/btn_settings.png'
+  } else {
+    if (props.color !== 'white') {
+      return '/assets/icons/drawable-xxhdpi/btn_back_black.png'
+    } else {
+      return '/assets/icons/drawable-xxhdpi/btn_back.png'
+    }
+  }
+})
+
+const handleFolderToggle = () => {
+  // 切换文件夹展开状态
+  if (props.isFolderExpanded === undefined) {
+    // 如果父组件没有传递isFolderExpanded，则使用本地状态
+    localFolderExpanded.value = !localFolderExpanded.value
+  }
+
+  // 调用父组件传递的回调函数
+  if (props.onFolderToggle) {
+    props.onFolderToggle()
+  }
+}
+
+// 播放删除按钮动画（只使用存在的帧）
+const playDeleteAnimation = () => {
+  if (isDeleteAnimating.value) return
+  
+  isDeleteAnimating.value = true
+  // 只使用存在的帧编号
+  const frames = [1, 6, 9, 10, 13, 16, 19, 21, 23, 25, 26, 27, 28, 29, 30]
+  let currentFrameIndex = 0
+  
+  const playFrame = () => {
+    if (currentFrameIndex < frames.length) {
+      // 格式化帧编号（补零）
+      const frameNumber = frames[currentFrameIndex].toString().padStart(4, '0')
+      deleteButtonFrame.value = `/assets/icons/drawable-xxhdpi/title_bar_del_btn_mov_${frameNumber}.png`
+      currentFrameIndex++
+      
+      // 使用setTimeout控制动画播放速度
+      setTimeout(playFrame, 50) // 约20fps，调整速度以适应帧数
+    } else {
+      // 动画播放完成，重置为默认图标
+      setTimeout(() => {
+        deleteButtonFrame.value = '/assets/icons/drawable-xxhdpi/btn_delete_notes.png'
+        isDeleteAnimating.value = false
+      }, 100)
+    }
+  }
+  
+  // 开始播放动画
+  playFrame()
+}
+
+// 暴露播放删除动画的方法给父组件
+defineExpose({
+  playDeleteAnimation
+})
+
+const handleLeftAction = () => {
+  // 处理左侧图标点击事件
+  if (props.onLeftAction) {
+    props.onLeftAction()
+  } else if (props.leftType !== 'settings' && props.onBack) {
+    // 兼容旧版本的onBack属性
+    props.onBack()
+  }
+}
+
+const handleAction = actionType => {
+  // 处理右侧操作按钮点击事件
+  if (props.onAction) {
+    props.onAction(actionType)
+  }
+}
+
+const handleTitlePress = () => {
+  // 处理标题点击事件
+  if (props.onTitlePress) {
+    props.onTitlePress()
+  }
+}
+</script>
+
+<style scoped lang="less">
+.component {
+  padding: 2.5rem 0.72rem 0.35rem;
+  background: v-bind(background);
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  position: relative;
+  box-shadow: 0 0 1.875rem 0.3125rem rgba(0, 0, 0, 0.2);
+  .inner {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .left-icon,
+  .image_4 {
+    width: 1.9rem;
+    height: 1.9rem;
+    cursor: pointer;
+  }
+  .right-group {
+    gap: 0.6rem;
+  }
+
+  .image_4-placeholder {
+    width: 1.9rem;
+    height: 1.9rem;
+  }
+
+  .title-container {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    flex: 1;
+    justify-content: center;
+
+    .folder-icon {
+      width: 0.8rem;
+      height: 0.8rem;
+      margin-left: 0.2rem;
+      cursor: pointer;
+    }
+
+    .text {
+      color: v-bind(color);
+      font-size: 1.01rem;
+      line-height: 1.01rem;
+      letter-spacing: 0.05em;
+      text-indent: 0.05em;
+    }
+  }
+}
+</style>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 13fcb10..9d89656 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -246,8 +246,8 @@ defineExpose({ show })
   font-size: var(--confirmFontSize, 1rem);
   max-width: 75vw;
   min-width: 20em;
-  box-shadow: 0px 35px 35px -10px rgba(0, 0, 0, 0.33);
-  border-radius: 10px;
+  box-shadow: 0rem 2.1875rem 2.1875rem -0.625rem rgba(0, 0, 0, 0.33);
+  border-radius: 0.625rem;
   position: relative;
   white-space: break-spaces;
   word-break: break-all;
@@ -288,13 +288,13 @@ defineExpose({ show })
   width: 100%;
   padding: 0.8em;
   font-size: 1em;
-  border: 1px solid var(--confirmBtnBorder, #f1f1f1);
-  border-radius: 4px;
+  border: 0.0625rem solid var(--confirmBtnBorder, #f1f1f1);
+  border-radius: 0.25rem;
   box-sizing: border-box;
   outline: none;
   background: var(--confirmTheme, #fff);
   color: var(--confirmColor, #636363);
-  box-shadow: 0px 0px 4px inset rgba(0, 0, 0, 0.12);
+  box-shadow: 0rem 0rem 0.25rem inset rgba(0, 0, 0, 0.12);
 }
 
 .pd-input::placeholder {
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index fec9c05..b023bc1 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -1,411 +1,378 @@
-<template>
-  <div class="code-fun-flex-row code-fun-justify-center code-fun-relative list-item_7" @touchstart="handleContainerTouchStart" @touchmove="handleContainerTouchMove" @touchend="handleContainerTouchEnd">
-    <!-- 删除按钮 -->
-    <button class="btn_delete" @click.stop="handleDelete" :style="deleteButtonStyle">
-      <span>删除</span>
-    </button>
-    <!-- 便签条 -->
-    <div class="code-fun-flex-col code-fun-relative section_17" @click="handlePress" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" :style="{ transform: `translateX(${slideOffset}px)` }">
-      <div class="code-fun-flex-row code-fun-justify-between">
-        <!-- 便签编辑时间 -->
-        <span class="font_2 text_18">{{ formattedDate }}</span>
-        <div class="code-fun-flex-row group_3">
-          <!-- 是否置顶状态&置顶按钮 -->
-          <img class="image_11 image_29" :src="isTop ? '/assets/icons/drawable-xxhdpi/icon_top_checked.png' : '/assets/icons/drawable-xxhdpi/icon_top_normal.png'" @click.stop="handleTopToggle" />
-          <!-- 是否收藏状态&收藏按钮 -->
-          <img class="image_26 ml-5" :src="isStarred ? '/assets/icons/drawable-xxhdpi/icon_detail_star_checked.png' : '/assets/icons/drawable-xxhdpi/icon_detail_star_unchecked.png'" @click.stop="handleStarToggle" />
-        </div>
-      </div>
-      <div class="code-fun-flex-row code-fun-justify-between mt-17-5">
-        <!-- 便签正文第一行 -->
-        <span class="font_3 text_19">{{ displayContent }}</span>
-        <!-- 便签中是否存在图片 -->
-        <img v-if="hasImage" class="image_28" src="/assets/icons/drawable-xxhdpi/list_item_image_icon.png" />
-      </div>
-    </div>
-    <!-- 便签夹未滑动状态 -->
-    <img class="image_27 pos_18" :src="isSliding ? '/assets/icons/drawable-xxhdpi/note_item_clip_up.png' : '/assets/icons/drawable-xxhdpi/note_item_clip_normal.png'" />
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const emit = defineEmits(['update:modelValue'])
-
-const props = defineProps({
-  content: {
-    type: String,
-    required: true,
-  },
-  date: {
-    type: String,
-    required: true,
-  },
-  isStarred: {
-    type: Boolean,
-    default: false,
-  },
-  isTop: {
-    type: Boolean,
-    default: false,
-  },
-  hasImage: {
-    type: Boolean,
-    default: false,
-  },
-  onPress: {
-    type: Function,
-    default: () => {},
-  },
-  onStarToggle: {
-    type: Function,
-    default: () => {},
-  },
-  onTopToggle: {
-    type: Function,
-    default: () => {},
-  },
-  onDelete: {
-    type: Function,
-    default: () => {},
-  },
-})
-
-// 滑动相关状态
-const slideOffset = ref(0)
-const startX = ref(0)
-const startY = ref(0) // 记录起始Y坐标
-const isSliding = ref(false)
-const isSlided = ref(false) // 是否已经滑动到阈值
-const isScrolling = ref(false) // 是否正在滚动
-
-const formattedDate = computed(() => {
-  // 直接返回已经格式化的日期字符串
-  // 日期格式化已在父组件中完成
-  return props.date
-})
-
-// 处理显示内容，过滤HTML标签并只显示第一行
-// 用于在便签列表中显示便签的预览内容
-const displayContent = computed(() => {
-  // 过滤HTML标签，只保留纯文本内容
-  let text = props.content.replace(/<[^>]*>/g, '')
-  // 处理换行符，统一为\n
-  text = text.replace(/\\n/g, '\n')
-
-  // 按换行符分割并获取第一行
-  const lines = text.split('\n')
-
-  // 返回第一行内容，如果为空则显示默认文本
-  return lines[0]?.trim() || '无内容'
-})
-
-// 计算删除按钮的样式
-const deleteButtonStyle = computed(() => {
-  return {
-    opacity: isSlided.value ? 1 : 0,
-    pointerEvents: isSlided.value ? 'auto' : 'none',
-  }
-})
-
-// 滑动阈值（删除按钮宽度）
-// 当滑动距离超过此值时，显示删除按钮
-const SLIDE_THRESHOLD = 64 // 4rem 转换为 px
-
-// 容器触摸事件处理函数
-const handleContainerTouchStart = e => {
-  // 阻止事件冒泡到父组件
-  e.stopPropagation()
-  // 阻止父级滚动容器的滚动行为
-  e.stopImmediatePropagation()
-}
-
-const handleContainerTouchMove = e => {
-  // 阻止事件冒泡到父组件
-  e.stopPropagation()
-  // 阻止父级滚动容器的滚动行为
-  e.stopImmediatePropagation()
-}
-
-const handleContainerTouchEnd = e => {
-  // 阻止事件冒泡到父组件
-  e.stopPropagation()
-  // 阻止父级滚动容器的滚动行为
-  e.stopImmediatePropagation()
-}
-
-// 处理便签点击事件
-// 只有在未滑动状态下才触发点击事件，避免与滑动操作冲突
-const handlePress = () => {
-  // 只有在未滑动状态下才触发点击事件
-  if (slideOffset.value === 0 && props.onPress) {
-    props.onPress()
-  } else if (slideOffset.value !== 0) {
-    // 如果当前处于滑动状态，重置滑动状态（收回便签条）
-    resetSlideState()
-  }
-}
-
-// 处理星标切换事件
-// 点击星标图标时调用父组件传递的回调函数
-const handleStarToggle = () => {
-  if (props.onStarToggle) {
-    props.onStarToggle()
-  }
-}
-
-// 处理置顶切换事件
-// 点击置顶图标时调用父组件传递的回调函数
-const handleTopToggle = () => {
-  if (props.onTopToggle) {
-    props.onTopToggle()
-  }
-}
-
-// 处理删除事件
-// 点击删除按钮时调用父组件传递的回调函数
-const handleDelete = () => {
-  // 阻止事件冒泡，避免触发便签条的点击事件
-  props.onDelete()
-  // 重置滑动状态
-  slideOffset.value = 0
-  isSliding.value = false
-  isSlided.value = false
-}
-
-// 重置滑动状态
-const resetSlideState = () => {
-  slideOffset.value = 0
-  isSliding.value = false
-  isSlided.value = false
-}
-
-// 获取滑动状态
-const getSlideState = () => {
-  return isSlided.value
-}
-
-// 暴露方法给父组件
-defineExpose({ resetSlideState, getSlideState })
-
-// 触摸开始事件处理函数
-// 记录触摸开始时的X坐标，用于计算滑动距离
-const handleTouchStart = e => {
-  // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
-  e.stopPropagation()
-  // 阻止父级滚动容器的滚动行为
-  e.stopImmediatePropagation()
-  // 重置滑动状态
-  startX.value = e.touches[0].clientX
-  startY.value = e.touches[0].clientY // 记录起始Y坐标
-  isSliding.value = false
-  isSlided.value = false
-  isScrolling.value = false // 重置滚动状态
-}
-
-// 触摸移动事件处理函数
-// 根据手指移动距离计算便签条的水平偏移量
-const handleTouchMove = e => {
-  if (!startX.value || !startY.value) return
-
-  const currentX = e.touches[0].clientX
-  const currentY = e.touches[0].clientY
-  const diffX = currentX - startX.value
-  const diffY = currentY - startY.value
-
-  // 如果已经确定是滚动，则不再处理
-  if (isScrolling.value) {
-    // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
-    e.stopPropagation()
-    return
-  }
-
-  // 判断是滚动还是滑动操作
-  // 如果Y轴移动距离大于X轴移动距离，则认为是滚动
-  if (Math.abs(diffY) > Math.abs(diffX)) {
-    isScrolling.value = true
-    // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
-    e.stopPropagation()
-    return
-  }
-
-  // 只处理右滑动（正值）
-  if (diffX > 0) {
-    // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
-    e.stopPropagation()
-    // 阻止父级滚动容器的滚动行为
-    e.stopImmediatePropagation()
-
-    // 只有当滑动达到一定距离时才阻止页面滚动
-    if (diffX > 5) {
-      e.preventDefault() // 防止页面滚动
-    }
-
-    // 设置滑动状态
-    isSliding.value = true
-
-    // 应用阻尼效果，使超过阈值后的滑动更加困难
-    let offset = 0
-    if (diffX <= SLIDE_THRESHOLD) {
-      // 线性滑动，在阈值内正常滑动
-      offset = diffX
-    } else {
-      // 超过阈值后应用阻尼效果，增加滑动阻力
-      const excess = diffX - SLIDE_THRESHOLD
-      offset = SLIDE_THRESHOLD + excess * 0.03 // 0.03 为阻尼系数
-    }
-
-    slideOffset.value = offset
-    isSlided.value = offset >= SLIDE_THRESHOLD
-  } else if (diffX < 0) {
-    // 左滑动，将便签条移回原位
-    const offset = Math.max(0, slideOffset.value + diffX)
-    slideOffset.value = offset
-    isSlided.value = offset >= SLIDE_THRESHOLD
-
-    // 更新 startX 以确保连续滑动的正确性
-    startX.value = currentX
-  }
-}
-
-// 触摸结束事件处理函数
-// 根据滑动距离决定便签条的最终位置
-const handleTouchEnd = e => {
-  if (!startX.value) return
-
-  // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
-  e?.stopPropagation()
-  // 阻止父级滚动容器的滚动行为
-  e?.stopImmediatePropagation()
-
-  // 如果滑动超过阈值，保持滑出状态；否则回弹
-  if (slideOffset.value >= SLIDE_THRESHOLD) {
-    // 保持滑出状态，显示删除按钮
-    slideOffset.value = SLIDE_THRESHOLD
-    isSlided.value = true
-  } else {
-    // 回弹到初始位置
-    slideOffset.value = 0
-    isSliding.value = false
-    isSlided.value = false
-  }
-
-  // 重置起始位置和滚动状态
-  startX.value = 0
-  startY.value = 0
-  isScrolling.value = false
-}
-</script>
-
-<style lang="less" scoped>
-.mt-17-5 {
-  margin-top: -1rem;
-}
-.btn_delete {
-  background: url(/assets/icons/drawable-xxhdpi/btn_slide_delete_normal.png);
-  background-size: cover;
-  width: 4rem;
-  height: 2rem;
-  position: absolute;
-  top: 50%;
-  left: 1rem;
-  z-index: 1;
-  transform: translate(0, -50%);
-  color: white;
-  text-align: right;
-  border: none;
-  padding: 0;
-  transition: opacity 0.2s ease;
-  span {
-    margin-right: 0.7rem;
-    font-size: 0.6rem;
-    display: block;
-  }
-}
-.list-item_7 {
-  width: 100%;
-  height: 3.16rem;
-  touch-action: pan-y; /* 只允许垂直滚动，禁止水平滑动 */
-  .section_17 {
-    box-sizing: border-box;
-    width: 95%;
-    height: 100%;
-    background: linear-gradient(to bottom, #fffdf6, #f3eee4);
-    z-index: 2;
-    padding: 0.44rem 0.69rem 0.88rem 2.09rem;
-    box-shadow: 0 2px 2px 1px rgb(0 0 0 / 15%);
-    transition: transform 0.2s ease-out;
-    border-radius: 3px;
-    &:before {
-      content: '';
-      width: 1.5rem;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      background: linear-gradient(to bottom, #f9f5ee, #eee6dc);
-    }
-    .font_2 {
-      font-size: 0.71rem;
-      line-height: 0.71rem;
-      color: #c2bdb1;
-    }
-    .text_18 {
-      margin-top: 0.061rem;
-      color: #c3beb4;
-    }
-    .group_3 {
-      margin-right: 0.19rem;
-      margin-bottom: 0.063rem;
-      .image_11 {
-        width: 2.2rem;
-        height: 2.2rem;
-        object-fit: contain;
-        position: relative;
-        top: -0.15rem;
-      }
-      .image_29 {
-        margin-top: 0.063rem;
-      }
-      .image_26 {
-        width: 1.2rem;
-        height: 1.2rem;
-      }
-    }
-    .font_3 {
-      font-size: 0.88rem;
-      line-height: 0.88rem;
-    }
-    .text_19 {
-      margin-bottom: 0.065rem;
-      color: #816d61;
-      font-size: 0.9rem;
-      line-height: 0.9rem;
-      word-break: break-all;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      -webkit-line-clamp: 1;
-    }
-    .image_28 {
-      width: 1.06rem;
-      height: 0.91rem;
-    }
-  }
-  .image_27 {
-    width: 1.7rem;
-    height: 1.7rem;
-    object-fit: cover;
-  }
-  .pos_18 {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translate(0, -50%);
-    z-index: 3;
-    transition: transform 0.3s ease-out;
-  }
-}
-</style>
+<template>
+  <div class="code-fun-flex-row code-fun-justify-center code-fun-relative list-item_7" @touchstart="handleContainerTouchStart" @touchmove="handleContainerTouchMove" @touchend="handleContainerTouchEnd">
+    <!-- 删除按钮 -->
+    <button class="btn_delete" @click.stop="handleDelete" :style="deleteButtonStyle">
+      <span>删除</span>
+    </button>
+    <!-- 便签条 -->
+    <div class="code-fun-flex-col code-fun-relative section_17" @click="handlePress" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" :style="{ transform: `translateX(${slideOffset}px)` }">
+      <div class="code-fun-flex-row code-fun-justify-between">
+        <!-- 便签编辑时间 -->
+        <span class="font_2 text_18">{{ formattedDate }}</span>
+        <div class="code-fun-flex-row group_3">
+          <!-- 是否置顶状态&置顶按钮 -->
+          <img class="image_11 image_29" :src="isTop ? '/assets/icons/drawable-xxhdpi/icon_top_checked.png' : '/assets/icons/drawable-xxhdpi/icon_top_normal.png'" @click.stop="handleTopToggle" />
+          <!-- 是否收藏状态&收藏按钮 -->
+          <img class="image_26 ml-5" :src="isStarred ? '/assets/icons/drawable-xxhdpi/icon_detail_star_checked.png' : '/assets/icons/drawable-xxhdpi/icon_detail_star_unchecked.png'" @click.stop="handleStarToggle" />
+        </div>
+      </div>
+      <div class="code-fun-flex-row code-fun-justify-between mt-17-5">
+        <!-- 便签正文第一行 -->
+        <span class="font_3 text_19">{{ displayContent }}</span>
+        <!-- 便签中是否存在图片 -->
+        <img v-if="hasImage" class="image_28" src="/assets/icons/drawable-xxhdpi/list_item_image_icon.png" />
+      </div>
+    </div>
+    <!-- 便签夹未滑动状态 -->
+    <img class="image_27 pos_18" :src="isSliding ? '/assets/icons/drawable-xxhdpi/note_item_clip_up.png' : '/assets/icons/drawable-xxhdpi/note_item_clip_normal.png'" />
+  </div>
+</template>
+<script setup>
+import { computed, ref } from 'vue'
+import { getRootFontSize } from '@/utils/sizeUtils'
+const emit = defineEmits(['update:modelValue'])
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  date: {
+    type: String,
+    required: true,
+  },
+  isStarred: {
+    type: Boolean,
+    default: false,
+  },
+  isTop: {
+    type: Boolean,
+    default: false,
+  },
+  hasImage: {
+    type: Boolean,
+    default: false,
+  },
+  onPress: {
+    type: Function,
+    default: () => {},
+  },
+  onStarToggle: {
+    type: Function,
+    default: () => {},
+  },
+  onTopToggle: {
+    type: Function,
+    default: () => {},
+  },
+  onDelete: {
+    type: Function,
+    default: () => {},
+  },
+})
+// 滑动相关状态
+const slideOffset = ref(0)
+const startX = ref(0)
+const startY = ref(0) // 记录起始Y坐标
+const isSliding = ref(false)
+const isSlided = ref(false) // 是否已经滑动到阈值
+const isScrolling = ref(false) // 是否正在滚动
+const formattedDate = computed(() => {
+  // 直接返回已经格式化的日期字符串
+  // 日期格式化已在父组件中完成
+  return props.date
+})
+// 处理显示内容，过滤HTML标签并只显示第一行
+// 用于在便签列表中显示便签的预览内容
+const displayContent = computed(() => {
+  // 过滤HTML标签，只保留纯文本内容
+  let text = props.content.replace(/<[^>]*>/g, '')
+  // 处理换行符，统一为\n
+  text = text.replace(/\\n/g, '\n')
+  // 按换行符分割并获取第一行
+  const lines = text.split('\n')
+  // 返回第一行内容，如果为空则显示默认文本
+  return lines[0]?.trim() || '无内容'
+})
+// 计算删除按钮的样式
+const deleteButtonStyle = computed(() => {
+  return {
+    opacity: isSlided.value ? 1 : 0,
+    pointerEvents: isSlided.value ? 'auto' : 'none',
+  }
+})
+// 滑动阈值（删除按钮宽度）
+// 当滑动距离超过此值时，显示删除按钮
+const scaleNum = getRootFontSize() / 16
+const SLIDE_THRESHOLD = 64 * scaleNum
+
+// 容器触摸事件处理函数
+const handleContainerTouchStart = e => {
+  // 阻止事件冒泡到父组件
+  e.stopPropagation()
+  // 阻止父级滚动容器的滚动行为
+  e.stopImmediatePropagation()
+}
+const handleContainerTouchMove = e => {
+  // 阻止事件冒泡到父组件
+  e.stopPropagation()
+  // 阻止父级滚动容器的滚动行为
+  e.stopImmediatePropagation()
+}
+const handleContainerTouchEnd = e => {
+  // 阻止事件冒泡到父组件
+  e.stopPropagation()
+  // 阻止父级滚动容器的滚动行为
+  e.stopImmediatePropagation()
+}
+// 处理便签点击事件
+// 只有在未滑动状态下才触发点击事件，避免与滑动操作冲突
+const handlePress = () => {
+  // 只有在未滑动状态下才触发点击事件
+  if (slideOffset.value === 0 && props.onPress) {
+    props.onPress()
+  } else if (slideOffset.value !== 0) {
+    // 如果当前处于滑动状态，重置滑动状态（收回便签条）
+    resetSlideState()
+  }
+}
+// 处理星标切换事件
+// 点击星标图标时调用父组件传递的回调函数
+const handleStarToggle = () => {
+  if (props.onStarToggle) {
+    props.onStarToggle()
+  }
+}
+// 处理置顶切换事件
+// 点击置顶图标时调用父组件传递的回调函数
+const handleTopToggle = () => {
+  if (props.onTopToggle) {
+    props.onTopToggle()
+  }
+}
+// 处理删除事件
+// 点击删除按钮时调用父组件传递的回调函数
+const handleDelete = () => {
+  // 阻止事件冒泡，避免触发便签条的点击事件
+  props.onDelete()
+  // 重置滑动状态
+  slideOffset.value = 0
+  isSliding.value = false
+  isSlided.value = false
+}
+// 重置滑动状态
+const resetSlideState = () => {
+  slideOffset.value = 0
+  isSliding.value = false
+  isSlided.value = false
+}
+// 获取滑动状态
+const getSlideState = () => {
+  return isSlided.value
+}
+// 暴露方法给父组件
+defineExpose({ resetSlideState, getSlideState })
+// 触摸开始事件处理函数
+// 记录触摸开始时的X坐标，用于计算滑动距离
+const handleTouchStart = e => {
+  // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
+  e.stopPropagation()
+  // 阻止父级滚动容器的滚动行为
+  e.stopImmediatePropagation()
+  // 重置滑动状态
+  startX.value = e.touches[0].clientX
+  startY.value = e.touches[0].clientY // 记录起始Y坐标
+  isSliding.value = false
+  isSlided.value = false
+  isScrolling.value = false // 重置滚动状态
+}
+// 触摸移动事件处理函数
+// 根据手指移动距离计算便签条的水平偏移量
+const handleTouchMove = e => {
+  if (!startX.value || !startY.value) return
+  const currentX = e.touches[0].clientX
+  const currentY = e.touches[0].clientY
+  const diffX = currentX - startX.value
+  const diffY = currentY - startY.value
+  // 如果已经确定是滚动，则不再处理
+  if (isScrolling.value) {
+    // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
+    e.stopPropagation()
+    return
+  }
+  // 判断是滚动还是滑动操作
+  // 如果Y轴移动距离大于X轴移动距离，则认为是滚动
+  if (Math.abs(diffY) > Math.abs(diffX)) {
+    isScrolling.value = true
+    // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
+    e.stopPropagation()
+    return
+  }
+  // 只处理右滑动（正值）
+  if (diffX > 0) {
+    // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
+    e.stopPropagation()
+    // 阻止父级滚动容器的滚动行为
+    e.stopImmediatePropagation()
+    // 只有当滑动达到一定距离时才阻止页面滚动
+    if (diffX > 5) {
+      e.preventDefault() // 防止页面滚动
+    }
+    // 设置滑动状态
+    isSliding.value = true
+    // 应用阻尼效果，使超过阈值后的滑动更加困难
+    let offset = 0
+    if (diffX <= SLIDE_THRESHOLD) {
+      // 线性滑动，在阈值内正常滑动
+      offset = diffX
+    } else {
+      // 超过阈值后应用阻尼效果，增加滑动阻力
+      const excess = diffX - SLIDE_THRESHOLD
+      offset = SLIDE_THRESHOLD + excess * 0.03 // 0.03 为阻尼系数
+    }
+    slideOffset.value = offset
+    isSlided.value = offset >= SLIDE_THRESHOLD
+  } else if (diffX < 0) {
+    // 左滑动，将便签条移回原位
+    const offset = Math.max(0, slideOffset.value + diffX)
+    slideOffset.value = offset
+    isSlided.value = offset >= SLIDE_THRESHOLD
+    // 更新 startX 以确保连续滑动的正确性
+    startX.value = currentX
+  }
+}
+// 触摸结束事件处理函数
+// 根据滑动距离决定便签条的最终位置
+const handleTouchEnd = e => {
+  if (!startX.value) return
+  // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
+  e?.stopPropagation()
+  // 阻止父级滚动容器的滚动行为
+  e?.stopImmediatePropagation()
+  // 如果滑动超过阈值，保持滑出状态；否则回弹
+  if (slideOffset.value >= SLIDE_THRESHOLD) {
+    // 保持滑出状态，显示删除按钮
+    slideOffset.value = SLIDE_THRESHOLD
+    isSlided.value = true
+  } else {
+    // 回弹到初始位置
+    slideOffset.value = 0
+    isSliding.value = false
+    isSlided.value = false
+  }
+  // 重置起始位置和滚动状态
+  startX.value = 0
+  startY.value = 0
+  isScrolling.value = false
+}
+</script>
+<style lang="less" scoped>
+.mt-17-5 {
+  margin-top: -1rem;
+}
+.btn_delete {
+  background: url(/assets/icons/drawable-xxhdpi/btn_slide_delete_normal.png);
+  background-size: cover;
+  width: 4rem;
+  height: 2rem;
+  position: absolute;
+  top: 50%;
+  left: 1rem;
+  z-index: 1;
+  transform: translate(0, -50%);
+  color: white;
+  text-align: right;
+  border: none;
+  padding: 0;
+  transition: opacity 0.2s ease;
+  span {
+    margin-right: 0.7rem;
+    font-size: 0.6rem;
+    display: block;
+  }
+}
+.list-item_7 {
+  width: 100%;
+  height: 3.16rem;
+  touch-action: pan-y; /* 只允许垂直滚动，禁止水平滑动 */
+  .section_17 {
+    box-sizing: border-box;
+    width: 95%;
+    height: 100%;
+    background: linear-gradient(to bottom, #fffdf6, #f3eee4);
+    z-index: 2;
+    padding: 0.44rem 0.69rem 0.88rem 2.09rem;
+    box-shadow: 0 0.125rem 0.125rem 0.0625rem rgb(0 0 0 / 15%);
+    transition: transform 0.2s ease-out;
+    border-radius: 0.1875rem;
+    &:before {
+      content: '';
+      width: 1.5rem;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: linear-gradient(to bottom, #f9f5ee, #eee6dc);
+    }
+    .font_2 {
+      font-size: 0.71rem;
+      line-height: 0.71rem;
+      color: #c2bdb1;
+    }
+    .text_18 {
+      margin-top: 0.061rem;
+      color: #c3beb4;
+    }
+    .group_3 {
+      margin-right: 0.19rem;
+      margin-bottom: 0.063rem;
+      .image_11 {
+        width: 2.2rem;
+        height: 2.2rem;
+        object-fit: contain;
+        position: relative;
+        top: -0.15rem;
+      }
+      .image_29 {
+        margin-top: 0.063rem;
+      }
+      .image_26 {
+        width: 1.2rem;
+        height: 1.2rem;
+      }
+    }
+    .font_3 {
+      font-size: 0.88rem;
+      line-height: 0.88rem;
+    }
+    .text_19 {
+      margin-bottom: 0.065rem;
+      color: #816d61;
+      font-size: 0.9rem;
+      line-height: 0.9rem;
+      word-break: break-all;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+    }
+    .image_28 {
+      width: 1.06rem;
+      height: 0.91rem;
+    }
+  }
+  .image_27 {
+    width: 1.7rem;
+    height: 1.7rem;
+    object-fit: cover;
+  }
+  .pos_18 {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+    z-index: 3;
+    transition: transform 0.3s ease-out;
+  }
+}
+</style>
diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue
index 8a01f15..77e68f3 100644
--- a/src/components/RichTextEditor.vue
+++ b/src/components/RichTextEditor.vue
@@ -6,27 +6,22 @@
         <img :src="tool.icon" :alt="tool.name" class="toolbar-icon" />
       </button>
     </div>
-
     <!-- 编辑区域 -->
     <div ref="editorRef" contenteditable="true" class="editor-content" @input="handleInput" @keydown="handleKeydown" @click="updateToolbarState" @keyup="updateToolbarState" @focus="showToolbar" @blur="handleBlur"></div>
   </div>
 </template>
-
 <script setup>
 import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
-
+import { pxToRemStr } from '@/utils/sizeUtils'
 const props = defineProps({
   modelValue: {
     type: String,
     default: '',
   },
 })
-
 const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
-
 // 全局常量定义
 const DELETE_BUTTON_DELAY = 1000 // 删除按钮延时时间（毫秒），用于防止误触
-
 const editorRef = ref(null)
 const content = ref(props.modelValue || '')
 const isToolbarVisible = ref(false)
@@ -44,33 +39,28 @@ const dragState = ref({
   lastCheckTime: 0,
   lastMoveTime: 0,
 })
-
 // 统一的事件监听器管理器
 const eventManager = {
   // 为图片容器添加事件监听器
   addImageContainerListeners(container, deleteBtn, downloadBtn, previewBtn, cropBtn) {
     // 先移除可能已有的事件监听器，避免重复
     this.removeImageContainerListeners(container)
-
     // 添加触摸事件监听器
     container.addEventListener('touchstart', handleTouchStart)
     container.addEventListener('touchmove', handleTouchMove)
     container.addEventListener('touchend', handleTouchEnd)
     container.addEventListener('touchcancel', handleTouchCancel)
-
     // 为删除按钮添加点击事件
     if (deleteBtn) {
       // 保存事件处理函数的引用，以便后续移除
       const deleteHandler = function (e) {
         e.stopPropagation()
         e.preventDefault()
-
         // 检查删除按钮是否可见，只有在可见状态下才能触发删除
         if (deleteBtn.classList.contains('visible')) {
           // 检查是否是刚显示的按钮点击（通过时间戳判断）
           const lastVisibleTime = deleteBtn._lastVisibleTime || 0
           const currentTime = Date.now()
-
           // 如果距离上次显示时间超过300ms，才执行删除操作
           if (currentTime - lastVisibleTime > 300) {
             container.remove()
@@ -78,23 +68,19 @@ const eventManager = {
           }
         }
       }
-
       deleteBtn.addEventListener('click', deleteHandler)
       deleteBtn._deleteHandler = deleteHandler
     }
-
     // 为下载按钮添加点击事件
     if (downloadBtn) {
       const downloadHandler = function (e) {
         e.stopPropagation()
         e.preventDefault()
-
         // 检查下载按钮是否可见，只有在可见状态下才能触发下载
         if (downloadBtn.classList.contains('visible')) {
           // 检查是否是刚显示的按钮点击（通过时间戳判断）
           const lastVisibleTime = downloadBtn._lastVisibleTime || 0
           const currentTime = Date.now()
-
           // 如果距离上次显示时间超过300ms，才执行下载操作
           if (currentTime - lastVisibleTime > 300) {
             const img = container.querySelector('img.editor-image')
@@ -110,23 +96,19 @@ const eventManager = {
           }
         }
       }
-
       downloadBtn.addEventListener('click', downloadHandler)
       downloadBtn._downloadHandler = downloadHandler
     }
-
     // 为预览按钮添加点击事件
     if (previewBtn) {
       const previewHandler = function (e) {
         e.stopPropagation()
         e.preventDefault()
-
         // 检查预览按钮是否可见，只有在可见状态下才能触发预览
         if (previewBtn.classList.contains('visible')) {
           // 检查是否是刚显示的按钮点击（通过时间戳判断）
           const lastVisibleTime = previewBtn._lastVisibleTime || 0
           const currentTime = Date.now()
-
           // 如果距离上次显示时间超过300ms，才执行预览操作
           if (currentTime - lastVisibleTime > 300) {
             const img = container.querySelector('img.editor-image')
@@ -144,33 +126,28 @@ const eventManager = {
               modal.style.justifyContent = 'center'
               modal.style.alignItems = 'center'
               modal.style.zIndex = '9999'
-
               const modalImg = document.createElement('img')
               modalImg.src = img.src
               modalImg.style.maxWidth = '90%'
               modalImg.style.maxHeight = '90%'
               modalImg.style.objectFit = 'contain'
-
               // 添加关闭按钮
               const closeBtn = document.createElement('div')
               closeBtn.textContent = '×'
               closeBtn.style.position = 'absolute'
-              closeBtn.style.top = '20px'
-              closeBtn.style.right = '20px'
-              closeBtn.style.fontSize = '30px'
+              closeBtn.style.top = pxToRemStr(20)
+              closeBtn.style.right = pxToRemStr(20)
+              closeBtn.style.fontSize = pxToRemStr(30)
               closeBtn.style.color = 'white'
               closeBtn.style.cursor = 'pointer'
-
               closeBtn.addEventListener('click', function () {
                 document.body.removeChild(modal)
               })
-
               modal.addEventListener('click', function (e) {
                 if (e.target === modal) {
                   document.body.removeChild(modal)
                 }
               })
-
               modal.appendChild(modalImg)
               modal.appendChild(closeBtn)
               document.body.appendChild(modal)
@@ -178,23 +155,19 @@ const eventManager = {
           }
         }
       }
-
       previewBtn.addEventListener('click', previewHandler)
       previewBtn._previewHandler = previewHandler
     }
-
     // 为裁切按钮添加点击事件
     if (cropBtn) {
       const cropHandler = function (e) {
         e.stopPropagation()
         e.preventDefault()
-
         // 检查裁切按钮是否可见，只有在可见状态下才能触发裁切
         if (cropBtn.classList.contains('visible')) {
           // 检查是否是刚显示的按钮点击（通过时间戳判断）
           const lastVisibleTime = cropBtn._lastVisibleTime || 0
           const currentTime = Date.now()
-
           // 如果距离上次显示时间超过300ms，才执行裁切操作
           if (currentTime - lastVisibleTime > 300) {
             const img = container.querySelector('img.editor-image')
@@ -213,43 +186,37 @@ const eventManager = {
               modal.style.justifyContent = 'center'
               modal.style.alignItems = 'center'
               modal.style.zIndex = '9999'
-
               const modalImg = document.createElement('img')
               modalImg.src = img.src
               modalImg.style.maxWidth = '90%'
               modalImg.style.maxHeight = '70%'
               modalImg.style.objectFit = 'contain'
-
               // 创建裁切区域容器
               const cropContainer = document.createElement('div')
               cropContainer.style.position = 'relative'
               cropContainer.style.display = 'inline-block'
               cropContainer.appendChild(modalImg)
-
               // 添加确认和取消按钮
               const buttonContainer = document.createElement('div')
-              buttonContainer.style.marginTop = '20px'
-
+              buttonContainer.style.marginTop = pxToRemStr(20)
               const confirmBtn = document.createElement('button')
               confirmBtn.textContent = '确认'
-              confirmBtn.style.margin = '0 10px'
-              confirmBtn.style.padding = '10px 20px'
+              confirmBtn.style.margin = `0 ${pxToRemStr(10)}`
+              confirmBtn.style.padding = `${pxToRemStr(10)} ${pxToRemStr(20)}`
               confirmBtn.style.backgroundColor = '#007AFF'
               confirmBtn.style.color = 'white'
               confirmBtn.style.border = 'none'
-              confirmBtn.style.borderRadius = '5px'
+              confirmBtn.style.borderRadius = pxToRemStr(5)
               confirmBtn.style.cursor = 'pointer'
-
               const cancelBtn = document.createElement('button')
               cancelBtn.textContent = '取消'
-              cancelBtn.style.margin = '0 10px'
-              cancelBtn.style.padding = '10px 20px'
+              cancelBtn.style.margin = `0 ${pxToRemStr(10)}`
+              cancelBtn.style.padding = `${pxToRemStr(10)} ${pxToRemStr(20)}`
               cancelBtn.style.backgroundColor = '#FF3B30'
               cancelBtn.style.color = 'white'
               cancelBtn.style.border = 'none'
-              cancelBtn.style.borderRadius = '5px'
+              cancelBtn.style.borderRadius = pxToRemStr(5)
               cancelBtn.style.cursor = 'pointer'
-
               confirmBtn.addEventListener('click', function () {
                 // 这里应该实现实际的裁切逻辑
                 // 简化实现：直接更新原图片
@@ -257,14 +224,11 @@ const eventManager = {
                 document.body.removeChild(modal)
                 handleInput()
               })
-
               cancelBtn.addEventListener('click', function () {
                 document.body.removeChild(modal)
               })
-
               buttonContainer.appendChild(confirmBtn)
               buttonContainer.appendChild(cancelBtn)
-
               modal.appendChild(cropContainer)
               modal.appendChild(buttonContainer)
               document.body.appendChild(modal)
@@ -272,15 +236,12 @@ const eventManager = {
           }
         }
       }
-
       cropBtn.addEventListener('click', cropHandler)
       cropBtn._cropHandler = cropHandler
     }
-
     // 为图片容器添加短按事件以显示/隐藏所有按钮
     let touchStartTime = 0
     let isAnyButtonClicked = false
-
     // 标记按钮被点击
     const markButtonClicked = function () {
       isAnyButtonClicked = true
@@ -289,18 +250,15 @@ const eventManager = {
         isAnyButtonClicked = false
       }, 300)
     }
-
     // 为所有按钮添加标记事件
     const allButtons = [deleteBtn, downloadBtn, previewBtn, cropBtn].filter(btn => btn)
     allButtons.forEach(btn => {
       btn._markClickHandler = markButtonClicked
       btn.addEventListener('touchstart', markButtonClicked)
     })
-
     const touchStartHandler = function (e) {
       touchStartTime = Date.now()
     }
-
     const touchEndHandler = function (e) {
       const touchDuration = Date.now() - touchStartTime
       // 短按（小于200ms）且非长按拖拽状态且不是按钮点击时切换所有按钮显示
@@ -326,16 +284,13 @@ const eventManager = {
         isAnyButtonClicked = false
       }, 50)
     }
-
     container.addEventListener('touchstart', touchStartHandler)
     container.addEventListener('touchend', touchEndHandler)
-
     // 保存事件处理函数的引用，以便后续移除
     container._touchStartHandler = touchStartHandler
     container._touchEndHandler = touchEndHandler
     container._markButtonClicked = markButtonClicked
   },
-
   // 移除图片容器的事件监听器
   removeImageContainerListeners(container) {
     // 移除拖拽事件监听器
@@ -343,53 +298,44 @@ const eventManager = {
     container.removeEventListener('touchmove', handleTouchMove)
     container.removeEventListener('touchend', handleTouchEnd)
     container.removeEventListener('touchcancel', handleTouchCancel)
-
     // 移除短按事件监听器
     const touchStartHandler = container._touchStartHandler
     const touchEndHandler = container._touchEndHandler
     const markButtonClicked = container._markButtonClicked
-
     if (touchStartHandler) {
       container.removeEventListener('touchstart', touchStartHandler)
       delete container._touchStartHandler
     }
-
     if (touchEndHandler) {
       container.removeEventListener('touchend', touchEndHandler)
       delete container._touchEndHandler
     }
-
     if (markButtonClicked) {
       delete container._markButtonClicked
     }
-
     // 移除所有按钮事件监听器
     const deleteBtn = container.querySelector('.image-delete-btn')
     const downloadBtn = container.querySelector('.image-download-btn')
     const previewBtn = container.querySelector('.image-preview-btn')
     const cropBtn = container.querySelector('.image-crop-btn')
-
     const removeButtonListeners = (btn, handlerName, markHandlerName) => {
       if (btn) {
         if (btn[handlerName]) {
           btn.removeEventListener('click', btn[handlerName])
           delete btn[handlerName]
         }
-
         if (btn[markHandlerName]) {
           btn.removeEventListener('touchstart', btn[markHandlerName])
           delete btn[markHandlerName]
         }
       }
     }
-
     removeButtonListeners(deleteBtn, '_deleteHandler', '_markClickHandler')
     removeButtonListeners(downloadBtn, '_downloadHandler', '_markClickHandler')
     removeButtonListeners(previewBtn, '_previewHandler', '_markClickHandler')
     removeButtonListeners(cropBtn, '_cropHandler', '_markClickHandler')
   },
 }
-
 // 初始化编辑器内容
 onMounted(() => {
   if (editorRef.value) {
@@ -407,27 +353,22 @@ onMounted(() => {
       editorRef.value.contentEditable = true
     }
   }
-
   // 记录初始视口高度
   initialViewportHeight.value = window.visualViewport?.height || window.innerHeight
-
   // 初始化CSS变量
   document.documentElement.style.setProperty('--viewport-height', `${initialViewportHeight.value}px`)
-
   // 添加虚拟键盘检测事件监听器
   if (window.visualViewport) {
     window.visualViewport.addEventListener('resize', handleViewportResize)
   } else {
     window.addEventListener('resize', handleWindowResize)
   }
-
   // 为已有图片添加拖拽事件监听器
   setTimeout(() => {
     const imageContainers = editorRef.value.querySelectorAll('.image-container')
     imageContainers.forEach(container => {
       const img = container.querySelector('img.editor-image')
       if (!img) return
-
       // 为删除按钮添加点击事件
       let deleteBtn = container.querySelector('.image-delete-btn')
       if (!deleteBtn) {
@@ -436,7 +377,6 @@ onMounted(() => {
         deleteBtn.className = 'image-delete-btn'
         container.appendChild(deleteBtn)
       }
-
       // 为下载按钮添加点击事件
       let downloadBtn = container.querySelector('.image-download-btn')
       if (!downloadBtn) {
@@ -445,7 +385,6 @@ onMounted(() => {
         downloadBtn.className = 'image-download-btn'
         container.appendChild(downloadBtn)
       }
-
       // 为预览按钮添加点击事件
       let previewBtn = container.querySelector('.image-preview-btn')
       if (!previewBtn) {
@@ -454,7 +393,6 @@ onMounted(() => {
         previewBtn.className = 'image-preview-btn'
         container.appendChild(previewBtn)
       }
-
       // 为裁切按钮添加点击事件
       let cropBtn = container.querySelector('.image-crop-btn')
       if (!cropBtn) {
@@ -463,13 +401,11 @@ onMounted(() => {
         cropBtn.className = 'image-crop-btn'
         container.appendChild(cropBtn)
       }
-
       // 使用事件管理器添加事件监听器
       eventManager.addImageContainerListeners(container, deleteBtn, downloadBtn, previewBtn, cropBtn)
     })
   }, 0)
 })
-
 // 组件卸载时移除事件监听器
 onUnmounted(() => {
   if (window.visualViewport) {
@@ -477,7 +413,6 @@ onUnmounted(() => {
   } else {
     window.removeEventListener('resize', handleWindowResize)
   }
-
   // 清理所有图片容器的事件监听器
   if (editorRef.value) {
     const imageContainers = editorRef.value.querySelectorAll('.image-container')
@@ -486,7 +421,6 @@ onUnmounted(() => {
     })
   }
 })
-
 // 工具栏配置
 // 定义富文本编辑器的所有工具按钮及其功能
 const tools = ref([
@@ -527,13 +461,11 @@ const tools = ref([
     active: false,
   },
 ])
-
 // 处理输入事件
 const handleInput = () => {
   if (editorRef.value) {
     // 获取编辑器内容（不清理，保持功能完整）
     let innerHTML = editorRef.value.innerHTML
-
     // 处理换行符，确保在段落之间有明确的分隔
     innerHTML = innerHTML.replace(/<\/p><p>/g, '</p>\n<p>')
     // 处理div标签换行
@@ -543,12 +475,10 @@ const handleInput = () => {
     innerHTML = innerHTML.replace(/<br\/>/g, '\n')
     // 处理div标签内的换行
     innerHTML = innerHTML.replace(/<div>/g, '\n<div>')
-
     content.value = innerHTML
     emit('update:modelValue', content.value)
   }
 }
-
 // 检查当前选区是否已经在某种格式中
 // 用于防止重复应用相同的格式，例如重复加粗
 const isAlreadyInFormat = formatType => {
@@ -556,7 +486,6 @@ const isAlreadyInFormat = formatType => {
   if (selection.rangeCount > 0) {
     const range = selection.getRangeAt(0)
     const container = range.commonAncestorContainer
-
     // 向上查找父元素，检查是否已经在指定格式中
     let current = container.nodeType === Node.TEXT_NODE ? container.parentElement : container
     while (current && current !== editorRef.value) {
@@ -575,7 +504,6 @@ const isAlreadyInFormat = formatType => {
   }
   return false
 }
-
 // 检查是否在列表、引用或待办事项中（用于嵌套限制）
 // 防止在已有的列表、引用或待办事项中再次插入相同类型的元素
 const isInListOrQuote = () => {
@@ -583,7 +511,6 @@ const isInListOrQuote = () => {
   if (selection.rangeCount > 0) {
     const range = selection.getRangeAt(0)
     const container = range.commonAncestorContainer
-
     // 向上查找父元素，检查是否在列表、引用或待办事项中
     let current = container.nodeType === Node.TEXT_NODE ? container.parentElement : container
     while (current && current !== editorRef.value) {
@@ -596,7 +523,6 @@ const isInListOrQuote = () => {
   }
   return false
 }
-
 // 格式化文本
 // 根据指定的命令和值对选中文本应用格式
 const formatText = (command, value = null) => {
@@ -608,7 +534,6 @@ const formatText = (command, value = null) => {
     handleInput()
     return
   }
-
   // 处理居中对齐切换：如果已居中则取消居中
   if (command === 'justifyCenter' && isAlreadyInFormat('center')) {
     document.execCommand('justifyLeft', false, null)
@@ -616,7 +541,6 @@ const formatText = (command, value = null) => {
     handleInput()
     return
   }
-
   // 处理标题格式切换：如果已是标题则转为普通段落
   if (command === 'formatBlock' && value === 'h2' && isAlreadyInFormat('header')) {
     document.execCommand('formatBlock', false, '<p>')
@@ -624,7 +548,6 @@ const formatText = (command, value = null) => {
     handleInput()
     return
   }
-
   // 处理列表格式切换：如果已是列表则取消列表
   if (command === 'insertUnorderedList' && isAlreadyInFormat('list')) {
     document.execCommand('insertUnorderedList', false, null)
@@ -632,19 +555,16 @@ const formatText = (command, value = null) => {
     handleInput()
     return
   }
-
   // 处理自定义待办事项
   if (command === 'insertTodoList') {
     insertTodoList()
     updateToolbarState()
     return
   }
-
   // 检查嵌套限制，防止在列表、引用中再次插入列表或引用
   if ((command === 'insertUnorderedList' || (command === 'formatBlock' && value === 'blockquote')) && isInListOrQuote()) {
     return
   }
-
   // 执行格式化命令
   document.execCommand(command, false, value)
   // 更新工具栏状态以反映当前格式
@@ -652,19 +572,16 @@ const formatText = (command, value = null) => {
   // 触发输入事件以更新内容
   handleInput()
 }
-
 // 插入水平线
 const insertHorizontalRule = () => {
   document.execCommand('insertHorizontalRule', false, null)
   handleInput()
 }
-
 // 插入引用格式
 const insertQuote = () => {
   const selection = window.getSelection()
   if (selection.rangeCount > 0) {
     const range = selection.getRangeAt(0)
-
     // 检查是否已经在引用中
     const container = range.commonAncestorContainer
     let current = container.nodeType === Node.TEXT_NODE ? container.parentElement : container
@@ -672,34 +589,26 @@ const insertQuote = () => {
       if (current.tagName === 'BLOCKQUOTE' || (current.classList && current.classList.contains('quote-content'))) return
       current = current.parentElement
     }
-
     // 检查嵌套限制
     if (isInListOrQuote()) return
-
     // 创建引用容器
     const quoteContainer = document.createElement('div')
     quoteContainer.className = 'quote-container'
-
     // 创建图标元素（使用CSS背景而非img标签）
     const icon = document.createElement('div')
     icon.className = 'quote-icon'
-
     // 创建内容容器
     const contentSpan = document.createElement('div')
     contentSpan.className = 'quote-content'
     contentSpan.textContent = '引用内容'
-
     // 组装元素
     quoteContainer.appendChild(icon)
     quoteContainer.appendChild(contentSpan)
-
     // 插入到当前光标位置
     range.insertNode(quoteContainer)
-
     // 添加换行
     const br = document.createElement('br')
     quoteContainer.parentNode.insertBefore(br, quoteContainer.nextSibling)
-
     // 聚焦到内容区域（延迟执行，确保在handleToolClick处理完后再聚焦）
     setTimeout(() => {
       if (editorRef.value) {
@@ -709,12 +618,10 @@ const insertQuote = () => {
         const sel = window.getSelection()
         sel.removeAllRanges()
         sel.addRange(newRange)
-
         // 确保编辑器保持焦点状态
         editorRef.value.focus()
       }
     }, 0)
-
     // 添加事件监听器到内容区域，监听内容变化
     const checkContent = () => {
       // 延迟检查，确保内容已更新
@@ -726,38 +633,30 @@ const insertQuote = () => {
         }
       }, 0)
     }
-
     contentSpan.addEventListener('input', checkContent)
     contentSpan.addEventListener('blur', checkContent)
-
     handleInput()
   }
 }
-
 // 统一的待办事项创建函数
 const createTodoItem = (text = '') => {
   // 创建待办事项容器
   const todoContainer = document.createElement('div')
   todoContainer.contentEditable = false // 容器本身不可编辑
   todoContainer.className = 'todo-container'
-
   // 创建图标元素（复选框，使用CSS背景而非img标签）
   const icon = document.createElement('div')
   icon.className = 'todo-icon'
-
   // 创建内容容器（可编辑区域）
   const contentSpan = document.createElement('div')
   contentSpan.contentEditable = true // 内容区域可编辑
   contentSpan.className = 'todo-content'
   contentSpan.textContent = text || '待办事项' // 默认文本
-
   // 组装元素：将图标和内容区域添加到容器中
   todoContainer.appendChild(icon)
   todoContainer.appendChild(contentSpan)
-
   return { todoContainer, icon, contentSpan }
 }
-
 // 为待办事项添加事件监听器
 const addTodoEventListeners = (icon, contentSpan, todoContainer) => {
   // 添加事件监听器到图标，实现待办事项完成状态切换
@@ -776,7 +675,6 @@ const addTodoEventListeners = (icon, contentSpan, todoContainer) => {
     }
     handleInput() // 触发内容更新
   })
-
   // 添加事件监听器到内容区域，监听内容变化和按键事件
   const checkContent = () => {
     // 延迟检查，确保内容已更新
@@ -788,39 +686,30 @@ const addTodoEventListeners = (icon, contentSpan, todoContainer) => {
       }
     }, 0)
   }
-
   contentSpan.addEventListener('input', checkContent) // 内容输入时检查
   contentSpan.addEventListener('blur', checkContent) // 失去焦点时检查
-
   // 添加焦点事件监听器，确保工具栏在待办事项获得焦点时保持可见
   contentSpan.addEventListener('focus', () => {
     isToolbarVisible.value = true
   })
 }
-
 // 插入待办事项列表
 // 创建一个可交互的待办事项元素，包含复选框图标和可编辑内容区域
 const insertTodoList = () => {
   const selection = window.getSelection()
   if (selection.rangeCount > 0) {
     const range = selection.getRangeAt(0)
-
     // 检查嵌套限制，防止在列表或引用中插入待办事项
     if (isInListOrQuote()) return
-
     // 创建待办事项
     const { todoContainer, icon, contentSpan } = createTodoItem()
-
     // 插入到当前光标位置
     range.insertNode(todoContainer)
-
     // 添加换行，确保待办事项下方有空白行
     const br = document.createElement('br')
     todoContainer.parentNode.insertBefore(br, todoContainer.nextSibling)
-
     // 为待办事项添加事件监听器
     addTodoEventListeners(icon, contentSpan, todoContainer)
-
     // 聚焦到内容区域（延迟执行，确保在handleToolClick处理完后再聚焦）
     setTimeout(() => {
       if (editorRef.value) {
@@ -830,49 +719,38 @@ const insertTodoList = () => {
         const sel = window.getSelection()
         sel.removeAllRanges()
         sel.addRange(newRange)
-
         // 重要：不要重新聚焦到编辑器，因为待办事项有自己的可编辑区域
         // 但我们仍需要确保当前可编辑区域有焦点
         contentSpan.focus()
-
         // 确保工具栏保持可见
         isToolbarVisible.value = true
       }
     }, 0)
-
     // 监听回车键，创建同级待办事项
     contentSpan.addEventListener('keydown', e => {
       if (e.key === 'Enter') {
         e.preventDefault()
-
         // 创建新的待办事项
         const { todoContainer: newTodoContainer, icon: newIcon, contentSpan: newContentSpan } = createTodoItem()
-
         // 插入到当前待办事项后面
         todoContainer.parentNode.insertBefore(newTodoContainer, todoContainer.nextSibling)
-
         // 添加换行
         const newBr = document.createElement('br')
         newTodoContainer.parentNode.insertBefore(newBr, newTodoContainer.nextSibling)
-
         // 为新待办事项添加事件监听器
         addTodoEventListeners(newIcon, newContentSpan, newTodoContainer)
-
         // 聚焦到新内容区域
         const newRange = document.createRange()
         newRange.selectNodeContents(newContentSpan)
         newRange.collapse(false)
         selection.removeAllRanges()
         selection.addRange(newRange)
-
         handleInput()
       }
     })
-
     handleInput()
   }
 }
-
 // 重置拖拽状态
 const resetDragState = () => {
   // 清除长按定时器
@@ -880,7 +758,6 @@ const resetDragState = () => {
     clearTimeout(dragState.value.longPressTimer)
     dragState.value.longPressTimer = null
   }
-
   // 重置所有拖拽状态
   dragState.value.isLongPress = false
   dragState.value.draggedImage = null
@@ -888,7 +765,6 @@ const resetDragState = () => {
   dragState.value.startY = 0
   dragState.value.currentY = 0
   dragState.value.lastMoveTime = 0
-
   // 移除拖拽指示器
   if (dragState.value.indicator) {
     const indicator = dragState.value.indicator
@@ -900,7 +776,6 @@ const resetDragState = () => {
     }, 150)
     dragState.value.indicator = null
   }
-
   // 重置所有图片的拖拽样式
   if (editorRef.value) {
     const draggedImages = editorRef.value.querySelectorAll('.editor-image.dragging')
@@ -913,7 +788,6 @@ const resetDragState = () => {
     })
   }
 }
-
 // 统一的图片容器创建函数
 const createImageContainer = imageDataUrl => {
   // 创建图片容器
@@ -921,7 +795,6 @@ const createImageContainer = imageDataUrl => {
   imgContainer.className = 'image-container'
   imgContainer.style.position = 'relative'
   imgContainer.style.display = 'inline-block'
-
   // 创建图片元素
   const img = document.createElement('img')
   img.src = imageDataUrl
@@ -934,7 +807,7 @@ const createImageContainer = imageDataUrl => {
   img.style.boxSizing = 'border-box'
   img.style.border = '0.625rem solid white'
   img.style.borderRadius = '0.2rem'
-  img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)'
+  img.style.boxShadow = `0 ${pxToRemStr(1)} ${pxToRemStr(5)} rgba(0, 0, 0, 0.18)`
   img.style.background = 'var(--background-secondary)'
   img.style.position = 'relative'
   img.style.outline = 'none' // 移除默认焦点轮廓
@@ -945,36 +818,28 @@ const createImageContainer = imageDataUrl => {
   img.style.webkitTouchCallout = 'none' // 防止长按弹出菜单
   img.style.webkitTapHighlightColor = 'transparent' // 防止点击高亮
   img.draggable = true
-
   // 创建删除按钮
   const deleteBtn = document.createElement('div')
   deleteBtn.className = 'image-delete-btn'
-
   // 创建下载按钮
   const downloadBtn = document.createElement('div')
   downloadBtn.className = 'image-download-btn'
-
   // 创建预览按钮
   const previewBtn = document.createElement('div')
   previewBtn.className = 'image-preview-btn'
-
   // 创建裁切按钮
   const cropBtn = document.createElement('div')
   cropBtn.className = 'image-crop-btn'
-
   // 将图片和所有按钮添加到容器中
   imgContainer.appendChild(img)
   imgContainer.appendChild(deleteBtn)
   imgContainer.appendChild(downloadBtn)
   imgContainer.appendChild(previewBtn)
   imgContainer.appendChild(cropBtn)
-
   // 使用事件管理器添加事件监听器
   eventManager.addImageContainerListeners(imgContainer, deleteBtn, downloadBtn, previewBtn, cropBtn)
-
   return { imgContainer, img, deleteBtn, downloadBtn, previewBtn, cropBtn }
 }
-
 // 调整图片尺寸的函数
 const adjustImageSize = img => {
   // 创建一个临时图片来获取原始尺寸
@@ -985,35 +850,27 @@ const adjustImageSize = img => {
     const editorLineHeight = getComputedStyle(document.documentElement).getPropertyValue('--editor-line-height').trim() || '1.6'
     const fontSize = parseInt(editorFontSize)
     const lineHeight = parseFloat(editorLineHeight)
-
     // 计算行高
     const computedLineHeight = fontSize * lineHeight
-
     // 获取编辑器的宽度（减去一些内边距）
     const editorWidth = editorRef.value.offsetWidth - 20 // 20px为左右内边距
-
     // 按宽度撑满计算调整后的尺寸
     const originalHeight = tempImg.height
     const originalWidth = tempImg.width
     const scaleRatio = editorWidth / originalWidth
     const scaledHeight = originalHeight * scaleRatio
-
     // 计算调整后的高度，使其为行高的整数倍
     const scaleFactor = Math.max(1, Math.round(scaledHeight / computedLineHeight))
     const adjustedHeight = scaleFactor * computedLineHeight
-
     // 按比例调整宽度
     const adjustedWidth = (originalWidth * adjustedHeight) / originalHeight
-
     img.style.height = `${adjustedHeight}px`
     img.style.width = `${adjustedWidth}px`
-
     // 确保图片与基准线对齐
     img.style.verticalAlign = 'top'
   }
   tempImg.src = img.src
 }
-
 // 插入图片
 const insertImage = () => {
   // 创建文件输入元素
@@ -1021,10 +878,8 @@ const insertImage = () => {
   fileInput.type = 'file'
   fileInput.accept = 'image/*'
   fileInput.style.display = 'none'
-
   // 添加到文档中
   document.body.appendChild(fileInput)
-
   // 监听文件选择事件
   fileInput.addEventListener('change', function (event) {
     const file = event.target.files[0]
@@ -1034,16 +889,13 @@ const insertImage = () => {
       reader.onload = function (e) {
         // 获取图片数据URL
         const imageDataUrl = e.target.result
-
         // 获取当前选区
         const selection = window.getSelection()
         if (selection.rangeCount > 0) {
           let range = selection.getRangeAt(0)
-
           // 检查选区是否在图片容器内部，如果是则调整到容器后面
           const startContainer = range.startContainer
           let imageContainer = null
-
           // 如果startContainer是图片容器本身
           if (startContainer.classList && startContainer.classList.contains('image-container')) {
             imageContainer = startContainer
@@ -1063,27 +915,21 @@ const insertImage = () => {
               parent = parent.parentNode
             }
           }
-
           // 如果选区在图片容器内部，调整到容器后面
           if (imageContainer) {
             range = document.createRange()
             range.setStartAfter(imageContainer)
             range.collapse(true)
           }
-
           // 创建图片容器
           const { imgContainer, img, deleteBtn, downloadBtn, previewBtn, cropBtn } = createImageContainer(imageDataUrl)
-
           // 调整图片尺寸
           adjustImageSize(img)
-
           // 插入图片容器到当前光标位置
           range.insertNode(imgContainer)
-
           // 添加换行
           const br = document.createElement('br')
           imgContainer.parentNode.insertBefore(br, imgContainer.nextSibling)
-
           // 修正选区位置，避免嵌套插入
           // 使用setTimeout确保DOM更新完成后再设置选区
           setTimeout(() => {
@@ -1093,28 +939,23 @@ const insertImage = () => {
             const sel = window.getSelection()
             sel.removeAllRanges()
             sel.addRange(newRange)
-
             // 重新聚焦到编辑器
             if (editorRef.value) {
               editorRef.value.focus()
             }
           }, 0)
-
           // 触发输入事件更新内容
           handleInput()
         }
       }
       reader.readAsDataURL(file)
     }
-
     // 清理文件输入元素
     document.body.removeChild(fileInput)
   })
-
   // 触发文件选择对话框
   fileInput.click()
 }
-
 // 处理键盘事件
 const handleKeydown = e => {
   // 处理Shift+Enter键换行
@@ -1124,7 +965,6 @@ const handleKeydown = e => {
     handleInput()
     return
   }
-
   // 处理Tab键缩进
   if (e.key === 'Tab') {
     e.preventDefault()
@@ -1132,7 +972,6 @@ const handleKeydown = e => {
     handleInput()
     return
   }
-
   // 处理回车键创建新列表项
   if (e.key === 'Enter' && !e.shiftKey) {
     // 检查是否在列表中
@@ -1140,11 +979,9 @@ const handleKeydown = e => {
     if (selection.rangeCount > 0) {
       const range = selection.getRangeAt(0)
       const container = range.startContainer
-
       // 检查是否在ul或ol内
       let listElement = null
       let current = container.nodeType === Node.TEXT_NODE ? container.parentElement : container
-
       while (current && current !== editorRef.value) {
         if (current.tagName === 'LI') {
           listElement = current
@@ -1152,7 +989,6 @@ const handleKeydown = e => {
         }
         current = current.parentElement
       }
-
       // 如果在列表项中且为空，退出列表
       if (listElement) {
         const liContent = listElement.textContent.trim()
@@ -1166,12 +1002,10 @@ const handleKeydown = e => {
     }
   }
 }
-
 // 处理触摸开始事件
 const handleTouchStart = e => {
   const img = e.target
   if (!img.classList.contains('editor-image')) return
-
   // 防止图片被选中 - 在触摸开始时就应用
   img.style.userSelect = 'none'
   img.style.webkitUserSelect = 'none'
@@ -1179,30 +1013,25 @@ const handleTouchStart = e => {
   img.style.msUserSelect = 'none'
   img.style.webkitTouchCallout = 'none'
   img.style.webkitTapHighlightColor = 'transparent'
-
   // 清除之前的定时器
   if (dragState.value.longPressTimer) {
     clearTimeout(dragState.value.longPressTimer)
   }
-
   // 记录触摸开始位置
   dragState.value.startX = e.touches[0].clientX
   dragState.value.startY = e.touches[0].clientY
-
   // 设置长按检测定时器（500毫秒）
   dragState.value.longPressTimer = setTimeout(() => {
     dragState.value.isLongPress = true
     dragState.value.draggedImage = img
     dragState.value.startY = e.touches[0].clientY
     dragState.value.currentY = e.touches[0].clientY
-
     // 添加拖拽样式
     img.classList.add('dragging')
     img.style.opacity = '0.85'
     img.style.transform = 'scale(0.96)'
     img.style.zIndex = '999'
     img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
-
     // 添加拖拽指示器
     const indicator = document.createElement('div')
     indicator.className = 'drag-indicator'
@@ -1210,54 +1039,45 @@ const handleTouchStart = e => {
     indicator.style.top = '50%'
     indicator.style.left = '50%'
     indicator.style.transform = 'translate(-50%, -50%)'
-    indicator.style.padding = '8px 16px'
+    indicator.style.padding = `${pxToRemStr(8)} ${pxToRemStr(16)}`
     indicator.style.background = 'rgba(0, 0, 0, 0.85)'
     indicator.style.color = 'white'
-    indicator.style.borderRadius = '16px'
-    indicator.style.fontSize = '14px'
+    indicator.style.borderRadius = pxToRemStr(16)
+    indicator.style.fontSize = pxToRemStr(14)
     indicator.style.fontWeight = '500'
     indicator.style.zIndex = '1000'
     indicator.style.opacity = '0'
     indicator.style.transition = 'opacity 0.1s ease-out'
-    indicator.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)'
+    indicator.style.boxShadow = `0 ${pxToRemStr(4)} ${pxToRemStr(12)} rgba(0, 0, 0, 0.3)`
     indicator.textContent = '拖拽排序'
     document.body.appendChild(indicator)
-
     // 渐显指示器
     setTimeout(() => {
       indicator.style.opacity = '1'
     }, 1)
-
     // 保存指示器引用以便后续移除
     dragState.value.indicator = indicator
-
     // 添加震动反馈（如果设备支持）
     if (navigator.vibrate) {
       navigator.vibrate(15)
     }
-
     // 阻止页面滚动
     e.preventDefault()
   }, 500) // 500毫秒长按触发拖拽
 }
-
 // 处理触摸移动事件
 const handleTouchMove = e => {
   if (!dragState.value.longPressTimer && !dragState.value.isLongPress) return
-
   const img = dragState.value.draggedImage
   const currentX = e.touches[0].clientX
   const currentY = e.touches[0].clientY
-
   // 防止图片被选中
   e.preventDefault()
-
   // 如果还没有触发长按，检查是否移动过多（超过6px则取消长按）
   if (!dragState.value.isLongPress) {
     const deltaX = Math.abs(currentX - dragState.value.startX)
     const deltaY = Math.abs(currentY - dragState.value.startY)
     const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-
     if (distance > 6) {
       // 移动过多，取消长按
       if (dragState.value.longPressTimer) {
@@ -1267,21 +1087,16 @@ const handleTouchMove = e => {
       return
     }
   }
-
   if (!dragState.value.isLongPress || !img) return
-
   dragState.value.currentY = currentY
-
   // 计算位移
   const deltaY = dragState.value.currentY - dragState.value.startY
-
   // 使用requestAnimationFrame确保流畅的动画
   requestAnimationFrame(() => {
     // 更新图片位置，添加缓动效果
     const easeFactor = 0.95 // 调整缓动因子使拖拽更跟手
     img.style.transform = `translateY(${deltaY * easeFactor}px) scale(0.96)`
   })
-
   // 使用节流优化，避免过于频繁的检查
   const now = Date.now()
   // 限制检查频率为每16ms一次（约60fps），提高响应速度
@@ -1290,14 +1105,12 @@ const handleTouchMove = e => {
     checkAndSwapImages(img, deltaY)
   }
 }
-
 // 重置拖拽动画
 const resetDragAnimation = img => {
   // 添加释放动画
   img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
   img.style.transform = 'translateY(0) scale(1)'
   img.style.opacity = '1'
-
   // 移除拖拽指示器
   if (dragState.value.indicator) {
     const indicator = dragState.value.indicator
@@ -1309,7 +1122,6 @@ const resetDragAnimation = img => {
       }
     }, 100)
   }
-
   // 延迟重置样式以显示动画
   setTimeout(() => {
     if (img) {
@@ -1319,7 +1131,6 @@ const resetDragAnimation = img => {
     }
   }, 150)
 }
-
 // 处理触摸结束事件
 const handleTouchEnd = e => {
   // 清除长按定时器
@@ -1327,34 +1138,27 @@ const handleTouchEnd = e => {
     clearTimeout(dragState.value.longPressTimer)
     dragState.value.longPressTimer = null
   }
-
   if (!dragState.value.isLongPress || !dragState.value.draggedImage) {
     dragState.value.isLongPress = false
     return
   }
-
   // 重置拖拽状态
   const img = dragState.value.draggedImage
-
   // 重置拖拽动画
   resetDragAnimation(img)
-
   // 添加震动反馈（如果设备支持）
   if (navigator.vibrate) {
     navigator.vibrate(8)
   }
-
   // 重置状态
   dragState.value.isLongPress = false
   dragState.value.draggedImage = null
   dragState.value.startY = 0
   dragState.value.currentY = 0
   dragState.value.indicator = null
-
   // 触发内容更新
   handleInput()
 }
-
 // 处理触摸取消事件
 const handleTouchCancel = e => {
   // 清除长按定时器
@@ -1362,18 +1166,14 @@ const handleTouchCancel = e => {
     clearTimeout(dragState.value.longPressTimer)
     dragState.value.longPressTimer = null
   }
-
   if (!dragState.value.isLongPress || !dragState.value.draggedImage) {
     dragState.value.isLongPress = false
     return
   }
-
   // 重置拖拽状态
   const img = dragState.value.draggedImage
-
   // 重置拖拽动画
   resetDragAnimation(img)
-
   // 重置状态
   dragState.value.isLongPress = false
   dragState.value.draggedImage = null
@@ -1381,31 +1181,24 @@ const handleTouchCancel = e => {
   dragState.value.currentY = 0
   dragState.value.indicator = null
 }
-
 // 检查并交换图片位置
 const checkAndSwapImages = (draggedImg, deltaY) => {
   const allImages = Array.from(editorRef.value.querySelectorAll('.editor-image'))
   const draggedIndex = allImages.indexOf(draggedImg)
-
   if (draggedIndex === -1) return
-
   // 计算拖拽图片的中心位置
   const draggedRect = draggedImg.getBoundingClientRect()
   const draggedCenterY = draggedRect.top + draggedRect.height / 2 + deltaY * 0.95 // 调整缓动因子以匹配触摸移动
-
   // 查找最近的图片进行交换
   for (let i = 0; i < allImages.length; i++) {
     if (i === draggedIndex) continue
-
     const targetImg = allImages[i]
     const targetRect = targetImg.getBoundingClientRect()
     const targetCenterY = targetRect.top + targetRect.height / 2
-
     // 检查是否与目标图片重叠，使用更精确的碰撞检测
     // 当拖拽图片覆盖目标图片高度的60%时触发排序
     const overlapThreshold = targetRect.height * 0.6
     const distance = Math.abs(draggedCenterY - targetCenterY)
-
     if (distance < overlapThreshold) {
       // 直接交换位置，移除视觉反馈以避免闪烁
       swapImages(draggedImg, targetImg)
@@ -1413,48 +1206,39 @@ const checkAndSwapImages = (draggedImg, deltaY) => {
     }
   }
 }
-
 // 交换两张图片的位置
 const swapImages = (img1, img2) => {
   // 为交换添加平滑过渡效果
   const parent1 = img1.parentNode
   const parent2 = img2.parentNode
-
   // 添加交换动画类
   img1.classList.add('swap-animation')
   img2.classList.add('swap-animation')
-
   // 如果两张图片在同一父元素中
   if (parent1 === parent2) {
     // 计算两个图片的位置差
     const rect1 = img1.getBoundingClientRect()
     const rect2 = img2.getBoundingClientRect()
     const deltaY = rect2.top - rect1.top
-
     // 添加临时的变换动画
     img1.style.transform = `translateY(${deltaY}px)`
     img2.style.transform = `translateY(${-deltaY}px)`
-
     // 在动画完成后交换DOM位置
     setTimeout(() => {
       // 移除临时变换
       img1.style.transform = ''
       img2.style.transform = ''
-
       // 移除交换动画类
       img1.classList.remove('swap-animation')
       img2.classList.remove('swap-animation')
-
       // 交换DOM位置
       const tempMarker = document.createElement('div')
       parent1.insertBefore(tempMarker, img1)
       parent1.insertBefore(img1, img2)
       parent1.insertBefore(img2, tempMarker)
       tempMarker.remove()
-
       // 触发内容更新
       handleInput()
-
       // 自动退出排序模式，提高响应速度
       setTimeout(() => {
         resetDragState()
@@ -1466,23 +1250,19 @@ const swapImages = (img1, img2) => {
     // 移除交换动画类
     img1.classList.remove('swap-animation')
     img2.classList.remove('swap-animation')
-
     const temp = document.createElement('div')
     parent1.insertBefore(temp, img1)
     parent2.insertBefore(img1, img2)
     parent1.insertBefore(img2, temp)
     temp.remove()
-
     // 触发内容更新
     handleInput()
-
     // 自动退出排序模式，提高响应速度
     setTimeout(() => {
       resetDragState()
     }, 10)
   }
 }
-
 // 更新工具栏状态
 const updateToolbarState = () => {
   nextTick(() => {
@@ -1501,36 +1281,27 @@ const updateToolbarState = () => {
     })
   })
 }
-
 // 处理视口大小变化（用于检测虚拟键盘）
 const handleViewportResize = () => {
   if (!window.visualViewport) return
-
   const currentHeight = window.visualViewport.height
   const heightDifference = initialViewportHeight.value - currentHeight
-
   // 如果高度差超过150px，认为虚拟键盘已弹出
   isKeyboardVisible.value = heightDifference > 150
-
   // 动态设置CSS变量以调整工具栏位置
   document.documentElement.style.setProperty('--viewport-height', `${currentHeight}px`)
-
   // 根据虚拟键盘状态更新工具栏可见性
   updateToolbarVisibility()
 }
-
 // 处理窗口大小变化（备用方案）
 const handleWindowResize = () => {
   const currentHeight = window.innerHeight
   const heightDifference = initialViewportHeight.value - currentHeight
-
   // 如果高度差超过150px，认为虚拟键盘已弹出
   isKeyboardVisible.value = heightDifference > 150
-
   // 根据虚拟键盘状态更新工具栏可见性
   updateToolbarVisibility()
 }
-
 // 更新工具栏可见性
 const updateToolbarVisibility = () => {
   // 只有当编辑器有焦点且虚拟键盘可见时才显示工具栏
@@ -1546,7 +1317,6 @@ const updateToolbarVisibility = () => {
     }, 200)
   }
 }
-
 // 检查是否有待办事项内容区域获得焦点
 const isTodoContentActive = () => {
   const todoContentElements = document.querySelectorAll('.todo-content')
@@ -1557,19 +1327,16 @@ const isTodoContentActive = () => {
   }
   return false
 }
-
 // 监听虚拟键盘状态变化
 watch(isKeyboardVisible, newVal => {
   updateToolbarVisibility()
 })
-
 // 初始化编辑器内容
 onMounted(() => {
   if (editorRef.value) {
     editorRef.value.innerHTML = content.value
   }
 })
-
 // 显示工具栏
 const showToolbar = () => {
   // 只有当虚拟键盘可见时才显示工具栏
@@ -1579,7 +1346,6 @@ const showToolbar = () => {
   // 通知父组件编辑器获得焦点
   emit('focus')
 }
-
 // 处理编辑器失焦
 const handleBlur = () => {
   // 不立即隐藏工具栏，而是通过handleToolbarFocusOut处理
@@ -1590,7 +1356,6 @@ const handleBlur = () => {
     emit('blur')
   }, 200)
 }
-
 // 处理工具栏按钮点击事件
 const handleToolClick = (action, event) => {
   // 阻止事件冒泡，防止触发编辑器失焦
@@ -1598,10 +1363,8 @@ const handleToolClick = (action, event) => {
     event.preventDefault()
     event.stopPropagation()
   }
-
   // 执行工具操作
   action()
-
   // 对于待办事项，不需要重新聚焦到编辑器，因为它有自己的可编辑区域
   // 其他工具需要重新聚焦到编辑器
   const isTodoAction = action === insertTodoList
@@ -1613,16 +1376,13 @@ const handleToolClick = (action, event) => {
       }
     }, 0)
   }
-
   // 确保工具栏保持可见
   isToolbarVisible.value = true
 }
-
 // 保持工具栏可见
 const keepToolbarVisible = () => {
   isToolbarVisible.value = true
 }
-
 // 处理工具栏失焦
 const handleToolbarFocusOut = () => {
   // 添加一个小延迟，以便处理工具栏按钮的点击事件
@@ -1630,7 +1390,6 @@ const handleToolbarFocusOut = () => {
     // 检查焦点是否在工具栏上
     const activeElement = document.activeElement
     const toolbarElement = document.querySelector('.toolbar')
-
     // 如果焦点不在工具栏上才隐藏
     if (!toolbarElement || !toolbarElement.contains(activeElement)) {
       // 额外检查是否有待办事项的内容区域有焦点
@@ -1642,7 +1401,6 @@ const handleToolbarFocusOut = () => {
           break
         }
       }
-
       // 只有在没有待办事项获得焦点且虚拟键盘不可见时才隐藏工具栏
       if (!todoHasFocus && !isKeyboardVisible.value) {
         isToolbarVisible.value = false
@@ -1650,24 +1408,19 @@ const handleToolbarFocusOut = () => {
     }
   }, 200) // 增加延迟时间，确保有足够时间处理点击事件
 }
-
 // 包装孤立的图片（没有被.image-container包装的图片）
 const wrapOrphanedImages = () => {
   if (!editorRef.value) return
-
   // 查找所有没有被.image-container包装的图片
   const images = editorRef.value.querySelectorAll('img:not(.editor-image)')
-
   images.forEach(img => {
     // 检查图片是否已经在.image-container中
     if (img.closest('.image-container')) return
-
     // 检查图片的父元素是否是.image-container，避免嵌套
     if (img.parentNode && img.parentNode.classList && img.parentNode.classList.contains('image-container')) {
       // 确保图片有正确的类名
       img.className = 'editor-image'
       img.setAttribute('data-draggable', 'true')
-
       // 为已存在的图片容器添加删除按钮事件监听器
       const imgContainer = img.parentNode
       let deleteBtn = imgContainer.querySelector('.image-delete-btn')
@@ -1677,7 +1430,6 @@ const wrapOrphanedImages = () => {
         deleteBtn.className = 'image-delete-btn'
         imgContainer.appendChild(deleteBtn)
       }
-
       // 为下载按钮添加点击事件
       let downloadBtn = imgContainer.querySelector('.image-download-btn')
       if (!downloadBtn) {
@@ -1686,7 +1438,6 @@ const wrapOrphanedImages = () => {
         downloadBtn.className = 'image-download-btn'
         imgContainer.appendChild(downloadBtn)
       }
-
       // 为预览按钮添加点击事件
       let previewBtn = imgContainer.querySelector('.image-preview-btn')
       if (!previewBtn) {
@@ -1695,7 +1446,6 @@ const wrapOrphanedImages = () => {
         previewBtn.className = 'image-preview-btn'
         imgContainer.appendChild(previewBtn)
       }
-
       // 为裁切按钮添加点击事件
       let cropBtn = imgContainer.querySelector('.image-crop-btn')
       if (!cropBtn) {
@@ -1704,23 +1454,18 @@ const wrapOrphanedImages = () => {
         cropBtn.className = 'image-crop-btn'
         imgContainer.appendChild(cropBtn)
       }
-
       // 使用事件管理器添加事件监听器
       eventManager.addImageContainerListeners(imgContainer, deleteBtn, downloadBtn, previewBtn, cropBtn)
       return
     }
-
     // 创建图片容器
     const { imgContainer, img: editorImg, deleteBtn } = createImageContainer(img.src)
-
     // 替换原来的图片
     img.parentNode.replaceChild(imgContainer, img)
-
     // 调整图片尺寸
     adjustImageSize(editorImg)
   })
 }
-
 // 调整已有图片的高度
 const adjustExistingImages = () => {
   // 等待DOM更新完成
@@ -1730,22 +1475,18 @@ const adjustExistingImages = () => {
       imageContainers.forEach(container => {
         const img = container.querySelector('img.editor-image')
         if (!img) return
-
         // 只处理还没有调整过高度的图片
         if (!img.dataset.heightAdjusted) {
           // 调整图片尺寸
           adjustImageSize(img)
-
           // 标记图片已调整过高度
           img.dataset.heightAdjusted = 'true'
         }
       })
-
       // 为现有图片添加拖拽功能和删除按钮功能
       imageContainers.forEach(container => {
         const img = container.querySelector('img.editor-image')
         if (!img) return
-
         // 为删除按钮添加点击事件
         let deleteBtn = container.querySelector('.image-delete-btn')
         if (!deleteBtn) {
@@ -1754,7 +1495,6 @@ const adjustExistingImages = () => {
           deleteBtn.className = 'image-delete-btn'
           container.appendChild(deleteBtn)
         }
-
         // 为下载按钮添加点击事件
         let downloadBtn = container.querySelector('.image-download-btn')
         if (!downloadBtn) {
@@ -1763,7 +1503,6 @@ const adjustExistingImages = () => {
           downloadBtn.className = 'image-download-btn'
           container.appendChild(downloadBtn)
         }
-
         // 为预览按钮添加点击事件
         let previewBtn = container.querySelector('.image-preview-btn')
         if (!previewBtn) {
@@ -1772,7 +1511,6 @@ const adjustExistingImages = () => {
           previewBtn.className = 'image-preview-btn'
           container.appendChild(previewBtn)
         }
-
         // 为裁切按钮添加点击事件
         let cropBtn = container.querySelector('.image-crop-btn')
         if (!cropBtn) {
@@ -1781,24 +1519,19 @@ const adjustExistingImages = () => {
           cropBtn.className = 'image-crop-btn'
           container.appendChild(cropBtn)
         }
-
         // 使用事件管理器添加事件监听器
         eventManager.addImageContainerListeners(container, deleteBtn, downloadBtn, previewBtn, cropBtn)
-
         img.setAttribute('data-touch-listeners', 'true')
       })
     }
   }, 0)
 }
-
 // 清理动态添加的属性（仅在保存时移除临时属性，保留必要属性）
 const cleanContentForSave = () => {
   if (!editorRef.value) return content.value
-
   // 创建一个临时的div来操作内容
   const tempDiv = document.createElement('div')
   tempDiv.innerHTML = editorRef.value.innerHTML
-
   // 移除图片上的临时动态属性
   const images = tempDiv.querySelectorAll('img.editor-image')
   images.forEach(img => {
@@ -1807,49 +1540,40 @@ const cleanContentForSave = () => {
     img.style.removeProperty('transition')
     img.style.removeProperty('transform')
     img.style.removeProperty('opacity')
-
     // 移除拖拽时的临时类名
     img.classList.remove('dragging')
     img.classList.remove('swap-animation')
-
     // 移除临时的数据属性（保留必要的属性如data-draggable）
     img.removeAttribute('data-height-adjusted')
     img.removeAttribute('data-touch-listeners')
   })
-
   // 移除删除按钮的显示状态类
   const deleteButtons = tempDiv.querySelectorAll('.image-delete-btn')
   deleteButtons.forEach(btn => {
     btn.classList.remove('visible')
   })
-
   // 移除下载按钮的显示状态类
   const downloadButtons = tempDiv.querySelectorAll('.image-download-btn')
   downloadButtons.forEach(btn => {
     btn.classList.remove('visible')
   })
-
   // 移除预览按钮的显示状态类
   const previewButtons = tempDiv.querySelectorAll('.image-preview-btn')
   previewButtons.forEach(btn => {
     btn.classList.remove('visible')
   })
-
   // 移除裁切按钮的显示状态类
   const cropButtons = tempDiv.querySelectorAll('.image-crop-btn')
   cropButtons.forEach(btn => {
     btn.classList.remove('visible')
   })
-
   // 移除拖拽指示器（如果存在）
   const indicators = tempDiv.querySelectorAll('.drag-indicator')
   indicators.forEach(indicator => {
     indicator.remove()
   })
-
   return tempDiv.innerHTML
 }
-
 // 暴露方法给父组件
 defineExpose({
   getContent: () => cleanContentForSave(),
@@ -1903,7 +1627,6 @@ defineExpose({
   insertImage,
 })
 </script>
-
 <style scoped>
 .editor-container {
   display: flex;
@@ -1912,7 +1635,6 @@ defineExpose({
   background-color: var(--background-card);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
-
 .toolbar {
   position: fixed;
   bottom: 0;
@@ -1920,7 +1642,7 @@ defineExpose({
   right: 0;
   display: flex;
   padding: 0.5rem 0.75rem;
-  border-top: 1px solid var(--border);
+  border-top: 0.0625rem solid var(--border);
   background-color: var(--background-card);
   flex-shrink: 0;
   transform: translateY(100%);
@@ -1929,25 +1651,20 @@ defineExpose({
   /* 确保工具栏能正确获取焦点 */
   tabindex: 0;
 }
-
 .toolbar.visible {
   transform: translateY(0);
 }
-
 /* 当虚拟键盘可见时，调整工具栏位置 */
 .toolbar.keyboard-visible {
   bottom: 0;
 }
-
 /* 使用visualViewport API动态调整工具栏位置 */
 .toolbar.dynamic-position {
   bottom: calc(100vh - var(--viewport-height, 100vh));
 }
-
 .toolbar.visible {
   transform: translateY(0);
 }
-
 .toolbar-btn {
   padding: 0.375rem;
   margin-right: 0.375rem;
@@ -1962,26 +1679,21 @@ defineExpose({
   /* 确保按钮能正确获取焦点 */
   tabindex: 0;
 }
-
 .toolbar-btn:hover {
   background-color: var(--background-secondary);
 }
-
 .toolbar-btn.active {
   background-color: var(--primary-light);
-  border: 1px solid var(--border);
+  border: 0.0625rem solid var(--border);
 }
-
 .toolbar-icon {
   width: 1.25rem;
   height: 1.25rem;
   opacity: 0.8;
 }
-
 .toolbar-btn.active .toolbar-icon {
   opacity: 1;
 }
-
 .editor-content {
   flex: 1;
   padding: 0 0.625rem 3.75rem 0.625rem; /* 添加底部内边距，防止内容被工具栏遮挡 */
@@ -1995,34 +1707,35 @@ defineExpose({
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   position: relative;
   /* 基准线样式 */
-  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
+  background-image: linear-gradient(to bottom, var(--border) 0.0625rem, transparent 0.0625rem);
   background-size: 100% calc(var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6)); /* var(--editor-font-size) * var(--editor-line-height) */
   background-repeat: repeat-y;
   background-position: 0 calc((var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6) - var(--editor-font-size, 1rem)) / 2);
+  touch-action: pan-y;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-overflow-scrolling: touch;
 }
-
 .editor-content::before {
   display: none;
 }
-
 /* 统一处理所有直接子元素的间距 */
 .editor-content > * {
   margin: 0;
   padding: 0;
 }
-
 .editor-content:focus,
 .editor-content * {
   outline: none;
 }
-
 /* 优化段落样式，确保与基准线对齐 */
 :deep(.editor-content p) {
   margin: 0;
   line-height: var(--editor-line-height, 1.6);
-  letter-spacing: 0.3px;
+  letter-spacing: 0.01875rem;
 }
-
 /* 自定义内容样式 - 统一行高和间距 */
 :deep(.editor-content h2) {
   font-size: var(--editor-font-size, 1rem);
@@ -2030,13 +1743,12 @@ defineExpose({
   margin: 0;
   color: var(--note-title);
   line-height: var(--editor-line-height, 1.6);
-  letter-spacing: 0.3px;
+  letter-spacing: 0.01875rem;
   text-align: center;
   position: relative;
 }
-
 :deep(.editor-content blockquote) {
-  border-left: 3px solid var(--primary);
+  border-left: 0.1875rem solid var(--primary);
   padding: 0 1rem 0 1rem;
   margin: 0;
   color: var(--text-secondary);
@@ -2044,13 +1756,11 @@ defineExpose({
   font-style: italic;
   line-height: var(--editor-line-height, 1.6);
 }
-
 :deep(.quote-container) {
   position: relative;
   margin: 0;
   line-height: var(--editor-line-height, 1.6);
 }
-
 :deep(.quote-icon) {
   position: absolute;
   left: 0;
@@ -2063,9 +1773,8 @@ defineExpose({
   background-repeat: no-repeat;
   background-position: center;
 }
-
 :deep(.quote-content) {
-  border-left: 3px solid var(--primary);
+  border-left: 0.1875rem solid var(--primary);
   padding: 0 var(--editor-font-size, 1rem) 0 1rem;
   margin-left: var(--editor-font-size, 1rem);
   color: var(--text-secondary);
@@ -2073,35 +1782,29 @@ defineExpose({
   font-style: italic;
   line-height: var(--editor-line-height, 1.6);
 }
-
 :deep(.editor-content ul) {
   margin: 0;
   padding-left: 2rem;
   position: relative;
   line-height: var(--editor-line-height, 1.6);
 }
-
 :deep(.editor-content li) {
   margin: 0;
   line-height: var(--editor-line-height, 1.6);
   padding: 0;
 }
-
 :deep(.editor-content strong) {
   color: var(--text-primary);
   font-weight: 600;
 }
-
 .editor-content div[style*='text-align: center'] {
   text-align: center;
 }
-
 :deep(.editor-content .image-container) {
   display: inline-block;
   position: relative;
-  margin: calc((var(--editor-line-height, 1.6) * 10) * 1px) auto;
+  margin: calc((var(--editor-line-height, 1.6) * 10) * 0.0625rem) auto;
 }
-
 :deep(.editor-content .editor-image) {
   max-width: 100%;
   height: auto;
@@ -2110,7 +1813,7 @@ defineExpose({
   box-sizing: border-box;
   border: 0.625rem solid white;
   border-radius: 0.2rem;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 0.0625rem 0.3125rem rgba(0, 0, 0, 0.18);
   background: var(--background-secondary);
   position: relative;
   outline: none; /* 移除默认焦点轮廓 */
@@ -2121,13 +1824,12 @@ defineExpose({
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
 }
-
 :deep(.editor-content .image-delete-btn) {
   position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 40px;
-  height: 40px;
+  top: 0.25rem;
+  right: 0.25rem;
+  width: 2.5rem;
+  height: 2.5rem;
   cursor: pointer;
   z-index: 1000;
   transition: opacity calc(v-bind(DELETE_BUTTON_DELAY) / 2 * 1ms) ease;
@@ -2140,13 +1842,12 @@ defineExpose({
   pointer-events: none;
   opacity: 0;
 }
-
 :deep(.editor-content .image-download-btn) {
   position: absolute;
-  top: 4px;
-  right: 50px; /* 在删除按钮左侧 */
-  width: 40px;
-  height: 40px;
+  top: 0.25rem;
+  right: 3.125rem; /* 在删除按钮左侧 */
+  width: 2.5rem;
+  height: 2.5rem;
   cursor: pointer;
   z-index: 1000;
   transition: opacity calc(v-bind(DELETE_BUTTON_DELAY) / 2 * 1ms) ease;
@@ -2159,13 +1860,12 @@ defineExpose({
   pointer-events: none;
   opacity: 0;
 }
-
 :deep(.editor-content .image-preview-btn) {
   position: absolute;
-  top: 4px;
-  right: 96px; /* 在下载按钮左侧 */
-  width: 40px;
-  height: 40px;
+  top: 0.25rem;
+  right: 6rem; /* 在下载按钮左侧 */
+  width: 2.5rem;
+  height: 2.5rem;
   cursor: pointer;
   z-index: 1000;
   transition: opacity calc(v-bind(DELETE_BUTTON_DELAY) / 2 * 1ms) ease;
@@ -2178,13 +1878,12 @@ defineExpose({
   pointer-events: none;
   opacity: 0;
 }
-
 :deep(.editor-content .image-crop-btn) {
   position: absolute;
-  top: 4px;
-  right: 142px; /* 在预览按钮左侧 */
-  width: 40px;
-  height: 40px;
+  top: 0.25rem;
+  right: 8.875rem; /* 在预览按钮左侧 */
+  width: 2.5rem;
+  height: 2.5rem;
   cursor: pointer;
   z-index: 1000;
   transition: opacity calc(v-bind(DELETE_BUTTON_DELAY) / 2 * 1ms) ease;
@@ -2197,7 +1896,6 @@ defineExpose({
   pointer-events: none;
   opacity: 0;
 }
-
 :deep(.editor-content .image-delete-btn.visible),
 :deep(.editor-content .image-download-btn.visible),
 :deep(.editor-content .image-preview-btn.visible),
@@ -2205,29 +1903,25 @@ defineExpose({
   pointer-events: auto;
   opacity: 1;
 }
-
 :deep(.editor-content .editor-image.draggable) {
   cursor: move;
 }
-
 :deep(.editor-content .editor-image.dragging) {
   opacity: 0.85;
   transform: scale(0.96);
   z-index: 999;
   transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease; /* 优化过渡效果 */
-  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.22);
+  box-shadow: 0 0.75rem 1.5625rem rgba(0, 0, 0, 0.22);
   will-change: transform, opacity; /* 提示浏览器优化这些属性 */
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
 }
-
 /* 图片交换动画 */
 :deep(.editor-content .editor-image.swap-animation) {
   transition: transform 0.2s ease-out;
 }
-
 /* 待办事项样式 */
 :deep(.todo-container) {
   display: flex;
@@ -2237,7 +1931,6 @@ defineExpose({
   position: relative;
   padding-left: calc(var(--editor-font-size, 1rem) * 1.5);
 }
-
 :deep(.todo-icon) {
   width: calc(var(--editor-font-size, 1rem) * 1.5);
   height: calc(var(--editor-font-size, 1rem) * 1.5);
@@ -2252,11 +1945,9 @@ defineExpose({
   background-repeat: no-repeat;
   background-position: center;
 }
-
 :deep(.todo-icon.completed) {
   background-image: url('/assets/icons/drawable-xxhdpi/rtf_icon_gtasks_light.png');
 }
-
 :deep(.todo-content) {
   flex: 1;
   outline: none;
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 2528d90..e42be07 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,104 +1,104 @@
-<template>
-  <div class="code-fun-flex-col code-fun-justify-start section_3">
-    <div class="view">
-      <div class="image-wrapper">
-        <!-- 搜索图标 -->
-        <img class="image_7" :src="`assets/icons/drawable-xxhdpi/search_bar_left_icon.png`" />
-        <!-- 搜索输入框 -->
-        <input ref="searchInput" type="input" placeholder="搜索便签..." :value="modelValue" @input="handleInput" @keydown.enter="handleSearch" @focus="handleFocus" @blur="handleBlur" />
-        <!-- 清除按钮 -->
-        <img v-if="modelValue && modelValue.length > 0" class="clear-button" :src="`assets/icons/drawable-xxhdpi/search_clear_normal.png`" @click="handleClear" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['update:modelValue', 'search', 'clear', 'focus', 'blur'])
-
-const searchInput = ref(null)
-
-const handleInput = event => {
-  emit('update:modelValue', event.target.value)
-}
-
-const handleSearch = event => {
-  emit('search', event.target.value)
-}
-
-const handleClear = () => {
-  emit('update:modelValue', '')
-  emit('clear')
-  if (searchInput.value) {
-    searchInput.value.focus()
-  }
-}
-
-const handleFocus = event => {
-  emit('focus', event)
-}
-
-const handleBlur = event => {
-  emit('blur', event)
-}
-
-// 暴露方法给父组件
-defineExpose({
-  focus: () => {
-    if (searchInput.value) {
-      searchInput.value.focus()
-    }
-  },
-  blur: () => {
-    if (searchInput.value) {
-      searchInput.value.blur()
-    }
-  },
-})
-</script>
-
-<style lang="less" scoped>
-.section_3 {
-  .view {
-    .image-wrapper {
-      position: relative;
-      padding: 0.25rem 0.5rem;
-      border-radius: 2rem;
-      background: #f6f9fa;
-      border: 1px solid #ccb8a3;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .image_7,
-      .clear-button {
-        width: 1.2rem;
-        height: 1.2rem;
-        object-fit: contain;
-        margin-right: 0.1rem;
-      }
-
-      input {
-        flex: 1;
-        height: 1.2rem;
-        line-height: 1.2rem;
-        background: transparent;
-        border: none;
-        outline: none;
-        font-size: 0.75rem;
-        color: #333;
-        padding: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="code-fun-flex-col code-fun-justify-start section_3">
+    <div class="view">
+      <div class="image-wrapper">
+        <!-- 搜索图标 -->
+        <img class="image_7" :src="`assets/icons/drawable-xxhdpi/search_bar_left_icon.png`" />
+        <!-- 搜索输入框 -->
+        <input ref="searchInput" type="input" placeholder="搜索便签..." :value="modelValue" @input="handleInput" @keydown.enter="handleSearch" @focus="handleFocus" @blur="handleBlur" />
+        <!-- 清除按钮 -->
+        <img v-if="modelValue && modelValue.length > 0" class="clear-button" :src="`assets/icons/drawable-xxhdpi/search_clear_normal.png`" @click="handleClear" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'search', 'clear', 'focus', 'blur'])
+
+const searchInput = ref(null)
+
+const handleInput = event => {
+  emit('update:modelValue', event.target.value)
+}
+
+const handleSearch = event => {
+  emit('search', event.target.value)
+}
+
+const handleClear = () => {
+  emit('update:modelValue', '')
+  emit('clear')
+  if (searchInput.value) {
+    searchInput.value.focus()
+  }
+}
+
+const handleFocus = event => {
+  emit('focus', event)
+}
+
+const handleBlur = event => {
+  emit('blur', event)
+}
+
+// 暴露方法给父组件
+defineExpose({
+  focus: () => {
+    if (searchInput.value) {
+      searchInput.value.focus()
+    }
+  },
+  blur: () => {
+    if (searchInput.value) {
+      searchInput.value.blur()
+    }
+  },
+})
+</script>
+
+<style lang="less" scoped>
+.section_3 {
+  .view {
+    .image-wrapper {
+      position: relative;
+      padding: 0.25rem 0.5rem;
+      border-radius: 2rem;
+      background: #f6f9fa;
+      border: 0.0625rem solid #ccb8a3;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .image_7,
+      .clear-button {
+        width: 1.2rem;
+        height: 1.2rem;
+        object-fit: contain;
+        margin-right: 0.1rem;
+      }
+
+      input {
+        flex: 1;
+        height: 1.2rem;
+        line-height: 1.2rem;
+        background: transparent;
+        border: none;
+        outline: none;
+        font-size: 0.75rem;
+        color: #333;
+        padding: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/SettingGroup.vue b/src/components/SettingGroup.vue
index b4d5616..37dc8e4 100644
--- a/src/components/SettingGroup.vue
+++ b/src/components/SettingGroup.vue
@@ -1,75 +1,75 @@
-<template>
-  <div class="setting-group">
-    <div class="section-header">{{ title }}</div>
-    <div class="settings-section">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-})
-</script>
-
-<style scoped lang="less">
-.setting-group {
-  .section-header {
-    font-size: 0.75rem;
-    color: rgb(95 95 95);
-    padding: 0.3125rem 0.5rem;
-    width: 95%;
-    margin: 0.75rem auto 0 auto;
-    box-sizing: border-box;
-  }
-
-  .settings-section {
-    width: 95%;
-    border-radius: 0.625rem;
-    overflow: hidden;
-    margin: 0 auto;
-    border: 1px solid var(--divider);
-    box-shadow: 0 1.25rem 3.125rem 0px rgb(0 0 0 / 5%);
-    /* 确保不会阻止事件传播 */
-    pointer-events: auto;
-  }
-}
-
-:global(.settings-item) {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: linear-gradient(to bottom, #fefdfe, #fcfbfb);
-  padding: 0.875rem 1rem;
-}
-
-:global(.settings-item-border) {
-  border-top: 1px solid var(--divider);
-  border-bottom: 1px solid var(--divider);
-}
-
-:global(.settings-item-border:first-child) {
-  border: none;
-}
-
-:global(.settings-item-border:last-child) {
-  border: none;
-}
-
-:global(.settings-item-clickable) {
-  cursor: pointer;
-}
-
-:global(.settings-item-clickable .item-text-primary) {
-  flex: 1;
-}
-
-:global(.settings-item-clickable) {
-  display: flex;
-  align-items: center;
-}
-</style>
+<template>
+  <div class="setting-group">
+    <div class="section-header">{{ title }}</div>
+    <div class="settings-section">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<style scoped lang="less">
+.setting-group {
+  .section-header {
+    font-size: 0.75rem;
+    color: rgb(95 95 95);
+    padding: 0.3125rem 0.5rem;
+    width: 95%;
+    margin: 0.75rem auto 0 auto;
+    box-sizing: border-box;
+  }
+
+  .settings-section {
+    width: 95%;
+    border-radius: 0.625rem;
+    overflow: hidden;
+    margin: 0 auto;
+    border: 1px solid var(--divider);
+    box-shadow: 0 1.25rem 3.125rem 0rem rgb(0 0 0 / 5%);
+    /* 确保不会阻止事件传播 */
+    pointer-events: auto;
+  }
+}
+
+:global(.settings-item) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(to bottom, #fefdfe, #fcfbfb);
+  padding: 0.875rem 1rem;
+}
+
+:global(.settings-item-border) {
+  border-top: 1px solid var(--divider);
+  border-bottom: 1px solid var(--divider);
+}
+
+:global(.settings-item-border:first-child) {
+  border: none;
+}
+
+:global(.settings-item-border:last-child) {
+  border: none;
+}
+
+:global(.settings-item-clickable) {
+  cursor: pointer;
+}
+
+:global(.settings-item-clickable .item-text-primary) {
+  flex: 1;
+}
+
+:global(.settings-item-clickable) {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/pages/FolderPage.vue b/src/pages/FolderPage.vue
index 4351efd..be7d0c3 100644
--- a/src/pages/FolderPage.vue
+++ b/src/pages/FolderPage.vue
@@ -1,152 +1,153 @@
-<template>
-  <ion-page>
-    <Header title="文件夹" :onBack="() => window.history.back()" />
-    <div class="folder-page-container">
-      <div class="search-container">
-        <ion-icon :icon="search" class="search-icon"></ion-icon>
-        <ion-input placeholder="搜索文件夹..." :value="searchQuery" @ionChange="e => setSearchQuery(e.detail.value)" class="search-input"></ion-input>
-        <ion-button v-if="searchQuery.length > 0" fill="clear" @click="() => setSearchQuery('')">
-          <ion-icon :icon="closeCircle" class="clear-icon"></ion-icon>
-        </ion-button>
-      </div>
-    </div>
-    <ion-content>
-      <ion-list class="folder-list">
-        <FolderManage
-          :allCount="allNotesCount"
-          :starredCount="starredNotesCount"
-          :trashCount="trashNotesCount"
-          :archiveCount="archiveCount"
-          :selectedFolder="selectedFolder"
-          :onAllClick="() => handleFolderPress('all')"
-          :onStarredClick="() => handleFolderPress('starred')"
-          :onTrashClick="() => handleFolderPress('trash')"
-          :onArchiveClick="() => handleFolderPress('archive')" />
-      </ion-list>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAppStore } from '../stores/useAppStore'
-import { search, closeCircle } from 'ionicons/icons'
-import FolderManage from '../components/FolderManage.vue'
-import Header from '../components/Header.vue'
-
-const store = useAppStore()
-const router = useRouter()
-
-// 加载初始数据
-onMounted(() => {
-  store.loadData()
-})
-
-const searchQuery = ref('')
-const selectedFolder = ref('all')
-
-// 计算每个文件夹中的便签数量
-// 遍历所有自定义文件夹，统计每个文件夹中的便签数量
-const foldersWithCount = computed(() => {
-  return store.folders.map(folder => {
-    const noteCount = store.notes.filter(note => note.folderId === folder.id).length
-    return {
-      ...folder,
-      noteCount,
-    }
-  })
-})
-
-// 添加默认文件夹（全部便签、加星便签、回收站）到列表开头
-// 计算全部便签数量
-const allNotesCount = computed(() => store.notes.length)
-// 计算加星便签数量
-const starredNotesCount = computed(() => store.notes.filter(note => note.isStarred).length)
-// 回收站便签数量（暂未实现完整功能）
-const trashNotesCount = 0
-// 归档便签数量（暂未实现完整功能）
-const archiveCount = 0
-
-// 合并默认文件夹和自定义文件夹
-const foldersWithAllNotes = computed(() => {
-  return [
-    { id: 'all', name: '全部便签', noteCount: allNotesCount.value, createdAt: new Date() },
-    { id: 'starred', name: '加星便签', noteCount: starredNotesCount.value, createdAt: new Date() },
-    { id: 'trash', name: '回收站', noteCount: trashNotesCount, createdAt: new Date() },
-    ...foldersWithCount.value,
-  ]
-})
-
-const handleFolderPress = folderId => {
-  // 更新选中的文件夹状态
-  selectedFolder.value = folderId
-  // 使用vue-router导航回便签列表页面，并传递文件夹参数
-  router.push(`/notes?folder=${folderId}`)
-}
-
-// 处理添加文件夹按钮点击事件
-// 在完整实现中，这里会打开文件夹创建对话框
-const handleAddFolder = () => {
-  console.log('Add folder pressed')
-}
-
-// 处理搜索功能
-// 在完整实现中，这里会根据搜索关键词过滤文件夹
-const handleSearch = () => {
-  console.log('Search for:', searchQuery.value)
-}
-
-const handleBackPress = () => {
-  router.back()
-}
-
-// 根据搜索关键词过滤文件夹
-// 将文件夹名称转换为小写进行模糊匹配
-const filteredFolders = computed(() => {
-  return foldersWithAllNotes.value.filter(folder => folder.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
-})
-
-const setSearchQuery = value => {
-  searchQuery.value = value
-}
-</script>
-
-<style scoped>
-.folder-page-container {
-  padding: 0.625rem;
-  background-color: var(--background);
-}
-
-.search-container {
-  display: flex;
-  align-items: center;
-  background-color: var(--search-bar-background);
-  border-radius: 0.5rem;
-  padding: 0 0.625rem;
-}
-
-.search-icon {
-  font-size: 1.25rem;
-  color: var(--text-tertiary);
-}
-
-.search-input {
-  --padding-start: 0.625rem;
-  --padding-end: 0.625rem;
-  flex: 1;
-  font-size: 1rem;
-  color: var(--text-primary);
-}
-
-.clear-icon {
-  font-size: 1.25rem;
-  color: var(--text-tertiary);
-}
-
-.folder-list {
-  background-color: var(--background);
-  padding: 0 1rem;
-  --ion-item-background: var(--background);
-}
-</style>
+<template>
+  <ion-page>
+    <Header title="文件夹" :onBack="() => window.history.back()" />
+    <div class="folder-page-container">
+      <div class="search-container">
+        <ion-icon :icon="search" class="search-icon"></ion-icon>
+        <ion-input placeholder="搜索文件夹..." :value="searchQuery" @ionChange="e => setSearchQuery(e.detail.value)" class="search-input"></ion-input>
+        <ion-button v-if="searchQuery.length > 0" fill="clear" @click="() => setSearchQuery('')">
+          <ion-icon :icon="closeCircle" class="clear-icon"></ion-icon>
+        </ion-button>
+      </div>
+    </div>
+    <ion-content>
+      <ion-list class="folder-list">
+        <FolderManage
+          :allCount="allNotesCount"
+          :starredCount="starredNotesCount"
+          :trashCount="trashNotesCount"
+          :archiveCount="archiveCount"
+          :selectedFolder="selectedFolder"
+          :onAllClick="() => handleFolderPress('all')"
+          :onStarredClick="() => handleFolderPress('starred')"
+          :onTrashClick="() => handleFolderPress('trash')"
+          :onArchiveClick="() => handleFolderPress('archive')" />
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAppStore } from '../stores/useAppStore'
+import { search, closeCircle } from 'ionicons/icons'
+import FolderManage from '../components/FolderManage.vue'
+import Header from '../components/Header.vue'
+
+const store = useAppStore()
+const router = useRouter()
+
+// 加载初始数据
+onMounted(() => {
+  store.loadData()
+})
+
+const searchQuery = ref('')
+const selectedFolder = ref('all')
+
+// 计算每个文件夹中的便签数量
+// 遍历所有自定义文件夹，统计每个文件夹中的便签数量
+const foldersWithCount = computed(() => {
+  return store.folders.map(folder => {
+    const noteCount = store.notes.filter(note => note.folderId === folder.id).length
+    return {
+      ...folder,
+      noteCount,
+    }
+  })
+})
+
+// 添加默认文件夹（全部便签、加星便签、回收站）到列表开头
+// 计算全部便签数量
+const allNotesCount = computed(() => store.notes.length)
+// 计算加星便签数量
+const starredNotesCount = computed(() => store.notes.filter(note => note.isStarred).length)
+// 回收站便签数量（暂未实现完整功能）
+const trashNotesCount = 0
+// 归档便签数量（暂未实现完整功能）
+const archiveCount = 0
+
+// 合并默认文件夹和自定义文件夹
+const foldersWithAllNotes = computed(() => {
+  return [
+    { id: 'all', name: '全部便签', noteCount: allNotesCount.value, createdAt: new Date() },
+    { id: 'starred', name: '加星便签', noteCount: starredNotesCount.value, createdAt: new Date() },
+    { id: 'trash', name: '回收站', noteCount: trashNotesCount, createdAt: new Date() },
+    ...foldersWithCount.value,
+  ]
+})
+
+const handleFolderPress = folderId => {
+  // 更新选中的文件夹状态
+  selectedFolder.value = folderId
+  // 使用vue-router导航回便签列表页面，并传递文件夹参数
+  router.push(`/notes?folder=${folderId}`)
+}
+
+// 处理添加文件夹按钮点击事件
+// 在完整实现中，这里会打开文件夹创建对话框
+const handleAddFolder = () => {
+  console.log('Add folder pressed')
+}
+
+// 处理搜索功能
+// 在完整实现中，这里会根据搜索关键词过滤文件夹
+const handleSearch = () => {
+  console.log('Search for:', searchQuery.value)
+}
+
+const handleBackPress = () => {
+  router.back()
+}
+
+// 根据搜索关键词过滤文件夹
+// 将文件夹名称转换为小写进行模糊匹配
+const filteredFolders = computed(() => {
+  return foldersWithAllNotes.value.filter(folder => folder.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+})
+
+const setSearchQuery = value => {
+  searchQuery.value = value
+}
+</script>
+
+<style scoped>
+.folder-page-container {
+  padding: 0.625rem;
+  background-color: var(--background);
+  touch-action: pan-y;
+}
+
+.search-container {
+  display: flex;
+  align-items: center;
+  background-color: var(--search-bar-background);
+  border-radius: 0.5rem;
+  padding: 0 0.625rem;
+}
+
+.search-icon {
+  font-size: 1.25rem;
+  color: var(--text-tertiary);
+}
+
+.search-input {
+  --padding-start: 0.625rem;
+  --padding-end: 0.625rem;
+  flex: 1;
+  font-size: 1rem;
+  color: var(--text-primary);
+}
+
+.clear-icon {
+  font-size: 1.25rem;
+  color: var(--text-tertiary);
+}
+
+.folder-list {
+  background-color: var(--background);
+  padding: 0 1rem;
+  --ion-item-background: var(--background);
+}
+</style>
diff --git a/src/pages/NoteEditorPage.vue b/src/pages/NoteEditorPage.vue
index 9dac095..279768f 100644
--- a/src/pages/NoteEditorPage.vue
+++ b/src/pages/NoteEditorPage.vue
@@ -438,37 +438,47 @@ onBeforeUnmount(async () => {
   flex-direction: column;
   height: 100vh;
   background-color: var(--background);
+  overflow: hidden;
   section {
     width: 100%;
     height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
   }
 }
-.offline-banner {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
-  background-color: #ff6b6b;
-  color: white;
-  padding: 8px 16px;
-  text-align: center;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-.offline-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 500;
-}
-.offline-icon {
-  margin-right: 8px;
+.offline-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  background-color: #ff6b6b;
+  color: white;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
+}
+.offline-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.offline-icon {
+  margin-right: 0.5rem;
 }
 .note-container {
   flex: 1;
-  overflow-y: scroll;
+  overflow-y: auto;
   background-color: var(--background);
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+.rich-text-editor {
+  min-height: 100%;
+  touch-action: pan-y;
 }
 .rich-text-editor {
   min-height: 100%;
diff --git a/src/pages/NoteListPage.vue b/src/pages/NoteListPage.vue
index 9108354..35217a1 100644
--- a/src/pages/NoteListPage.vue
+++ b/src/pages/NoteListPage.vue
@@ -67,440 +67,442 @@
       </ion-content>
     </div>
   </ion-page>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAppStore } from '../stores/useAppStore'
-import NoteItem from '../components/NoteItem.vue'
-import Header from '../components/Header.vue'
-import FolderManage from '../components/FolderManage.vue'
-import SearchBar from '../components/Search.vue'
-import { formatNoteListDate } from '../utils/dateUtils'
-import { IonContent, IonPage } from '@ionic/vue'
-
-const store = useAppStore()
-const router = useRouter()
-const noteItemRefs = ref({})
-
-// 页面挂载时加载初始数据
-onMounted(() => {
-  // 检查URL参数是否包含mock数据加载指令，用于开发和演示
-  const urlParams = new URLSearchParams(window.location.search)
-  if (urlParams.get('mock') === 'true') {
-    // 加载预设的模拟数据
-    store.loadMockData()
-  } else {
-    // 从Storage加载用户数据
-    store.loadData()
-  }
-})
-
-const searchQuery = ref('')
-const sortBy = ref('date') // 排序方式：'date'(按日期)、'title'(按标题)、'starred'(按星标)
-const isFolderExpanded = ref(false) // 文件夹列表是否展开
-const currentFolder = ref('all') // 当前选中的文件夹，默认是"全部便签"
-const noteToDelete = ref(null)
-
-// 计算加星便签数量（未删除的）
-const starredNotesCount = computed(() => {
-  return store.notes.filter(note => note.isStarred && !note.isDeleted).length
-})
-
-// 计算回收站便签数量
-const trashNotesCount = computed(() => {
-  return store.notes.filter(note => note.isDeleted).length
-})
-
-// 根据当前文件夹过滤便签
-const filteredNotes = computed(() => {
-  // 预处理搜索查询，提高性能
-  const lowerCaseQuery = searchQuery.value?.toLowerCase().trim() || ''
-
-  return store.notes.filter(note => {
-    // 先检查搜索条件
-    const matchesSearch =
-      !lowerCaseQuery || (note.title && typeof note.title === 'string' && note.title.toLowerCase().includes(lowerCaseQuery)) || (note.content && typeof note.content === 'string' && note.content.toLowerCase().includes(lowerCaseQuery))
-
-    if (!matchesSearch) return false
-
-    // 再检查文件夹条件
-    switch (currentFolder.value) {
-      case 'all':
-        // 全部便签中不显示已删除的便签
-        return !note.isDeleted
-      case 'starred':
-        // 加星便签中只显示未删除的加星便签
-        return note.isStarred && !note.isDeleted
-      case 'trash':
-        // 回收站中只显示已删除的便签
-        return note.isDeleted
-      default:
-        // 自定义文件夹中不显示已删除的便签
-        return note.folderId === currentFolder.value && !note.isDeleted
-    }
-  })
-})
-
-// 过滤并排序便签列表
-// 首先按置顶状态排序，置顶的便签排在前面
-// 然后根据sortBy的值进行二次排序
-const filteredAndSortedNotes = computed(() => {
-  return [...filteredNotes.value].sort((a, b) => {
-    // 置顶的便签排在前面
-    if (a.isTop && !b.isTop) return -1
-    if (!a.isTop && b.isTop) return 1
-
-    // 根据排序方式排序
-    switch (sortBy.value) {
-      case 'title':
-        // 按标题字母顺序排序
-        return a.title.localeCompare(b.title)
-      case 'starred':
-        // 按星标状态排序，加星的便签排在前面
-        return (b.isStarred ? 1 : 0) - (a.isStarred ? 1 : 0)
-      case 'date':
-      default:
-        // 按更新时间倒序排列（最新的在前）
-        return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-    }
-  })
-})
-
-// 计算头部标题
-const headerTitle = computed(() => {
-  switch (currentFolder.value) {
-    case 'all':
-      return '全部便签'
-    case 'starred':
-      return '加星便签'
-    case 'trash':
-      return '回收站'
-    default:
-      // 查找自定义文件夹的名称
-      const folder = store.folders.find(f => f.id === currentFolder.value)
-      return folder ? folder.name : '全部便签'
-  }
-})
-
-// 计算全部便签数量（未删除的）
-const allNotesCount = computed(() => {
-  return store.notes.filter(note => !note.isDeleted).length
-})
-
-const handleNotePress = noteId => {
-  // 检查是否有便签条处于展开状态
-  let hasSlidedNote = false
-  Object.values(noteItemRefs.value).forEach(noteItem => {
-    // 注意：isSlided是ref值，需要通过.value访问
-    if (noteItem && noteItem.getSlideState()) {
-      hasSlidedNote = true
-      noteItem.resetSlideState()
-    }
-  })
-
-  // 如果有便签条处于展开状态，不跳转到编辑页面
-  if (hasSlidedNote) {
-    return
-  }
-
-  // 使用vue-router导航到编辑页面
-  router.push(`/editor/${noteId}`)
-}
-
-const handleAddNote = () => {
-  // 使用vue-router导航到新建便签页面
-  router.push('/editor')
-}
-
-// 处理Header组件的操作按钮点击事件
-const handleHeaderAction = actionType => {
-  if (actionType === 'create') {
-    handleAddNote()
-  }
-}
-
-const handleStarToggle = async noteId => {
-  const note = store.notes.find(n => n.id === noteId)
-  if (note) {
-    try {
-      await store.updateNote(noteId, { isStarred: !note.isStarred })
-      console.log(`便签 ${noteId} 星标状态已更新`)
-    } catch (error) {
-      console.error('更新便签星标状态失败:', error)
-    }
-  }
-}
-
-const handleTopToggle = async noteId => {
-  const note = store.notes.find(n => n.id === noteId)
-  if (note) {
-    try {
-      await store.updateNote(noteId, { isTop: !note.isTop })
-      console.log(`便签 ${noteId} 置顶状态已更新`)
-    } catch (error) {
-      console.error('更新便签置顶状态失败:', error)
-    }
-  }
-}
-
-const confirmDeleteNote = async noteId => {
-  noteToDelete.value = noteId
-  if (noteToDelete.value) {
-    try {
-      // 检查当前是否在回收站中
-      if (currentFolder.value === 'trash') {
-        // 在回收站中删除便签，彻底删除
-        await store.permanentlyDeleteNote(noteToDelete.value)
-        console.log(`便签 ${noteToDelete.value} 已彻底删除`)
-      } else {
-        // 不在回收站中，将便签移至回收站
-        await store.moveToTrash(noteToDelete.value)
-        console.log(`便签 ${noteToDelete.value} 已移至回收站`)
-      }
-      noteToDelete.value = null
-    } catch (error) {
-      console.error('删除便签失败:', error)
-    }
-  }
-}
-
-// 处理排序方式切换
-// 循环切换排序选项：按日期 -> 按标题 -> 按星标 -> 按日期...
-const handleSort = () => {
-  const sortOptions = ['date', 'title', 'starred']
-  const currentIndex = sortOptions.indexOf(sortBy.value)
-  const nextIndex = (currentIndex + 1) % sortOptions.length
-  sortBy.value = sortOptions[nextIndex]
-  console.log('当前排序方式:', sortOptions[nextIndex])
-}
-
-const handleAllNotesClick = () => {
-  setCurrentFolder('all')
-  setIsFolderExpanded(false)
-}
-
-const handleStarredNotesClick = () => {
-  setCurrentFolder('starred')
-  setIsFolderExpanded(false)
-}
-
-const handleTrashNotesClick = () => {
-  setCurrentFolder('trash')
-  setIsFolderExpanded(false)
-}
-
-const handleFolderClick = folderId => {
-  setCurrentFolder(folderId)
-  setIsFolderExpanded(false)
-}
-
-const handleAddFolder = () => {
-  // 文件夹添加功能已在FolderManage组件中实现
-  // 这里只需关闭文件夹列表
-  setIsFolderExpanded(false)
-}
-
-const handleFolderPress = () => {
-  // 使用vue-router导航到文件夹页面
-  router.push('/folders')
-}
-
-const handleSettingsPress = () => {
-  // 使用vue-router导航到设置页面
-  router.push('/settings')
-}
-
-const handleFolderToggle = () => {
-  // 在实际应用中，这里会触发文件夹列表的展开/收起
-  isFolderExpanded.value = !isFolderExpanded.value
-}
-
-const handleSearch = query => {
-  // 搜索功能已在computed属性filteredAndSortedNotes中实现
-  console.log('搜索:', query)
-
-  // 可以在这里添加搜索统计或其它功能
-  if (query && query.length > 0) {
-    console.log(`找到 ${filteredAndSortedNotes.value.length} 个匹配的便签`)
-  }
-}
-
-const handleClearSearch = () => {
-  // 清除搜索已在v-model中处理
-  console.log('搜索已清除')
-
-  // 清除搜索后可以重置一些状态
-  setSearchQuery('')
-}
-
-const handleSearchFocus = () => {
-  console.log('搜索栏获得焦点')
-  // 可以在这里添加获得焦点时的特殊处理
-}
-
-const handleSearchBlur = () => {
-  console.log('搜索栏失去焦点')
-  // 可以在这里添加失去焦点时的特殊处理
-}
-
-// 防抖函数，用于避免频繁触发搜索
-// 通过延迟执行函数，只在最后一次调用后执行
-const debounceSearch = (func, delay) => {
-  let timeoutId
-  return function (...args) {
-    clearTimeout(timeoutId)
-    timeoutId = setTimeout(() => func.apply(this, args), delay)
-  }
-}
-
-// 防抖搜索处理函数，延迟300ms执行搜索
-const debouncedHandleSearch = debounceSearch(query => {
-  handleSearch(query)
-}, 300)
-
-// 改进的日期格式化函数
-const formatDate = dateString => {
-  return formatNoteListDate(dateString)
-}
-
-const setCurrentFolder = folder => {
-  currentFolder.value = folder
-}
-
-const setIsFolderExpanded = expanded => {
-  isFolderExpanded.value = expanded
-}
-
-const setSearchQuery = query => {
-  searchQuery.value = query
-}
-
-const notes = computed(() => store.notes)
-</script>
-<style lang="less" scoped>
-.container {
-  width: 100vw;
-  height: 100vh;
-  background: url(/assets/icons/drawable-xxhdpi/note_background.png);
-  background-size: cover;
-}
-
-.offline-banner {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
-  background-color: #ff6b6b;
-  color: white;
-  padding: 8px 16px;
-  text-align: center;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.offline-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.offline-icon {
-  margin-right: 8px;
-}
-
-.folder-list {
-  position: absolute;
-  top: 3.125rem;
-  left: 10%;
-  right: 10%;
-  z-index: 1000;
-  background-color: var(--background-card);
-  border-radius: 0.5rem;
-  box-shadow: 0 0.125rem 0.25rem var(--shadow);
-  border: 1px solid #f0ece7;
-  overflow: hidden;
-}
-
-.folder-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: transparent;
-  z-index: 99;
-}
-.content {
-  --background: transparent;
-  --padding-top: 4.5rem;
-  --padding-bottom: 2rem;
-}
-
-.search-container {
-  padding: 0.8rem 0.5rem;
-}
-
-.notes-container {
-  flex: 1;
-  position: relative;
-}
-
-.notes-list {
-  position: relative;
-}
-
-.note-item {
-  margin: 0.6rem 0;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* 便签列表动画 */
-.note-list-enter-active,
-.note-list-leave-active {
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.note-list-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.note-list-move {
-  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.note-list-leave-active {
-  position: absolute;
-  width: calc(100% - 1rem);
-}
-
-/* 文件夹列表动画 */
-.folder-slide-enter-active,
-.folder-slide-leave-active {
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.folder-slide-enter-from {
-  opacity: 0;
-  transform: scale(0.8) translateY(-20px);
-}
-
-.folder-slide-enter-to {
-  opacity: 1;
-  transform: scale(1) translateY(0);
-}
-
-.folder-slide-leave-from {
-  opacity: 1;
-  transform: scale(1) translateY(0);
-}
-
-.folder-slide-leave-to {
-  opacity: 0;
-  transform: scale(0.8) translateY(-20px);
-}
-</style>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAppStore } from '../stores/useAppStore'
+import NoteItem from '../components/NoteItem.vue'
+import Header from '../components/Header.vue'
+import FolderManage from '../components/FolderManage.vue'
+import SearchBar from '../components/Search.vue'
+import { formatNoteListDate } from '../utils/dateUtils'
+import { IonContent, IonPage } from '@ionic/vue'
+
+const store = useAppStore()
+const router = useRouter()
+const noteItemRefs = ref({})
+
+// 页面挂载时加载初始数据
+onMounted(() => {
+  // 检查URL参数是否包含mock数据加载指令，用于开发和演示
+  const urlParams = new URLSearchParams(window.location.search)
+  if (urlParams.get('mock') === 'true') {
+    // 加载预设的模拟数据
+    store.loadMockData()
+  } else {
+    // 从Storage加载用户数据
+    store.loadData()
+  }
+})
+
+const searchQuery = ref('')
+const sortBy = ref('date') // 排序方式：'date'(按日期)、'title'(按标题)、'starred'(按星标)
+const isFolderExpanded = ref(false) // 文件夹列表是否展开
+const currentFolder = ref('all') // 当前选中的文件夹，默认是"全部便签"
+const noteToDelete = ref(null)
+
+// 计算加星便签数量（未删除的）
+const starredNotesCount = computed(() => {
+  return store.notes.filter(note => note.isStarred && !note.isDeleted).length
+})
+
+// 计算回收站便签数量
+const trashNotesCount = computed(() => {
+  return store.notes.filter(note => note.isDeleted).length
+})
+
+// 根据当前文件夹过滤便签
+const filteredNotes = computed(() => {
+  // 预处理搜索查询，提高性能
+  const lowerCaseQuery = searchQuery.value?.toLowerCase().trim() || ''
+
+  return store.notes.filter(note => {
+    // 先检查搜索条件
+    const matchesSearch =
+      !lowerCaseQuery || (note.title && typeof note.title === 'string' && note.title.toLowerCase().includes(lowerCaseQuery)) || (note.content && typeof note.content === 'string' && note.content.toLowerCase().includes(lowerCaseQuery))
+
+    if (!matchesSearch) return false
+
+    // 再检查文件夹条件
+    switch (currentFolder.value) {
+      case 'all':
+        // 全部便签中不显示已删除的便签
+        return !note.isDeleted
+      case 'starred':
+        // 加星便签中只显示未删除的加星便签
+        return note.isStarred && !note.isDeleted
+      case 'trash':
+        // 回收站中只显示已删除的便签
+        return note.isDeleted
+      default:
+        // 自定义文件夹中不显示已删除的便签
+        return note.folderId === currentFolder.value && !note.isDeleted
+    }
+  })
+})
+
+// 过滤并排序便签列表
+// 首先按置顶状态排序，置顶的便签排在前面
+// 然后根据sortBy的值进行二次排序
+const filteredAndSortedNotes = computed(() => {
+  return [...filteredNotes.value].sort((a, b) => {
+    // 置顶的便签排在前面
+    if (a.isTop && !b.isTop) return -1
+    if (!a.isTop && b.isTop) return 1
+
+    // 根据排序方式排序
+    switch (sortBy.value) {
+      case 'title':
+        // 按标题字母顺序排序
+        return a.title.localeCompare(b.title)
+      case 'starred':
+        // 按星标状态排序，加星的便签排在前面
+        return (b.isStarred ? 1 : 0) - (a.isStarred ? 1 : 0)
+      case 'date':
+      default:
+        // 按更新时间倒序排列（最新的在前）
+        return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+    }
+  })
+})
+
+// 计算头部标题
+const headerTitle = computed(() => {
+  switch (currentFolder.value) {
+    case 'all':
+      return '全部便签'
+    case 'starred':
+      return '加星便签'
+    case 'trash':
+      return '回收站'
+    default:
+      // 查找自定义文件夹的名称
+      const folder = store.folders.find(f => f.id === currentFolder.value)
+      return folder ? folder.name : '全部便签'
+  }
+})
+
+// 计算全部便签数量（未删除的）
+const allNotesCount = computed(() => {
+  return store.notes.filter(note => !note.isDeleted).length
+})
+
+const handleNotePress = noteId => {
+  // 检查是否有便签条处于展开状态
+  let hasSlidedNote = false
+  Object.values(noteItemRefs.value).forEach(noteItem => {
+    // 注意：isSlided是ref值，需要通过.value访问
+    if (noteItem && noteItem.getSlideState()) {
+      hasSlidedNote = true
+      noteItem.resetSlideState()
+    }
+  })
+
+  // 如果有便签条处于展开状态，不跳转到编辑页面
+  if (hasSlidedNote) {
+    return
+  }
+
+  // 使用vue-router导航到编辑页面
+  router.push(`/editor/${noteId}`)
+}
+
+const handleAddNote = () => {
+  // 使用vue-router导航到新建便签页面
+  router.push('/editor')
+}
+
+// 处理Header组件的操作按钮点击事件
+const handleHeaderAction = actionType => {
+  if (actionType === 'create') {
+    handleAddNote()
+  }
+}
+
+const handleStarToggle = async noteId => {
+  const note = store.notes.find(n => n.id === noteId)
+  if (note) {
+    try {
+      await store.updateNote(noteId, { isStarred: !note.isStarred })
+      console.log(`便签 ${noteId} 星标状态已更新`)
+    } catch (error) {
+      console.error('更新便签星标状态失败:', error)
+    }
+  }
+}
+
+const handleTopToggle = async noteId => {
+  const note = store.notes.find(n => n.id === noteId)
+  if (note) {
+    try {
+      await store.updateNote(noteId, { isTop: !note.isTop })
+      console.log(`便签 ${noteId} 置顶状态已更新`)
+    } catch (error) {
+      console.error('更新便签置顶状态失败:', error)
+    }
+  }
+}
+
+const confirmDeleteNote = async noteId => {
+  noteToDelete.value = noteId
+  if (noteToDelete.value) {
+    try {
+      // 检查当前是否在回收站中
+      if (currentFolder.value === 'trash') {
+        // 在回收站中删除便签，彻底删除
+        await store.permanentlyDeleteNote(noteToDelete.value)
+        console.log(`便签 ${noteToDelete.value} 已彻底删除`)
+      } else {
+        // 不在回收站中，将便签移至回收站
+        await store.moveToTrash(noteToDelete.value)
+        console.log(`便签 ${noteToDelete.value} 已移至回收站`)
+      }
+      noteToDelete.value = null
+    } catch (error) {
+      console.error('删除便签失败:', error)
+    }
+  }
+}
+
+// 处理排序方式切换
+// 循环切换排序选项：按日期 -> 按标题 -> 按星标 -> 按日期...
+const handleSort = () => {
+  const sortOptions = ['date', 'title', 'starred']
+  const currentIndex = sortOptions.indexOf(sortBy.value)
+  const nextIndex = (currentIndex + 1) % sortOptions.length
+  sortBy.value = sortOptions[nextIndex]
+  console.log('当前排序方式:', sortOptions[nextIndex])
+}
+
+const handleAllNotesClick = () => {
+  setCurrentFolder('all')
+  setIsFolderExpanded(false)
+}
+
+const handleStarredNotesClick = () => {
+  setCurrentFolder('starred')
+  setIsFolderExpanded(false)
+}
+
+const handleTrashNotesClick = () => {
+  setCurrentFolder('trash')
+  setIsFolderExpanded(false)
+}
+
+const handleFolderClick = folderId => {
+  setCurrentFolder(folderId)
+  setIsFolderExpanded(false)
+}
+
+const handleAddFolder = () => {
+  // 文件夹添加功能已在FolderManage组件中实现
+  // 这里只需关闭文件夹列表
+  setIsFolderExpanded(false)
+}
+
+const handleFolderPress = () => {
+  // 使用vue-router导航到文件夹页面
+  router.push('/folders')
+}
+
+const handleSettingsPress = () => {
+  // 使用vue-router导航到设置页面
+  router.push('/settings')
+}
+
+const handleFolderToggle = () => {
+  // 在实际应用中，这里会触发文件夹列表的展开/收起
+  isFolderExpanded.value = !isFolderExpanded.value
+}
+
+const handleSearch = query => {
+  // 搜索功能已在computed属性filteredAndSortedNotes中实现
+  console.log('搜索:', query)
+
+  // 可以在这里添加搜索统计或其它功能
+  if (query && query.length > 0) {
+    console.log(`找到 ${filteredAndSortedNotes.value.length} 个匹配的便签`)
+  }
+}
+
+const handleClearSearch = () => {
+  // 清除搜索已在v-model中处理
+  console.log('搜索已清除')
+
+  // 清除搜索后可以重置一些状态
+  setSearchQuery('')
+}
+
+const handleSearchFocus = () => {
+  console.log('搜索栏获得焦点')
+  // 可以在这里添加获得焦点时的特殊处理
+}
+
+const handleSearchBlur = () => {
+  console.log('搜索栏失去焦点')
+  // 可以在这里添加失去焦点时的特殊处理
+}
+
+// 防抖函数，用于避免频繁触发搜索
+// 通过延迟执行函数，只在最后一次调用后执行
+const debounceSearch = (func, delay) => {
+  let timeoutId
+  return function (...args) {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => func.apply(this, args), delay)
+  }
+}
+
+// 防抖搜索处理函数，延迟300ms执行搜索
+const debouncedHandleSearch = debounceSearch(query => {
+  handleSearch(query)
+}, 300)
+
+// 改进的日期格式化函数
+const formatDate = dateString => {
+  return formatNoteListDate(dateString)
+}
+
+const setCurrentFolder = folder => {
+  currentFolder.value = folder
+}
+
+const setIsFolderExpanded = expanded => {
+  isFolderExpanded.value = expanded
+}
+
+const setSearchQuery = query => {
+  searchQuery.value = query
+}
+
+const notes = computed(() => store.notes)
+</script>
+<style lang="less" scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  background: url(/assets/icons/drawable-xxhdpi/note_background.png);
+  background-size: cover;
+}
+
+.offline-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  background-color: #ff6b6b;
+  color: white;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
+}
+
+.offline-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.offline-icon {
+  margin-right: 0.5rem;
+}
+
+.folder-list {
+  position: absolute;
+  top: 3.125rem;
+  left: 10%;
+  right: 10%;
+  z-index: 1000;
+  background-color: var(--background-card);
+  border-radius: 0.5rem;
+  box-shadow: 0 0.125rem 0.25rem var(--shadow);
+  border: 0.0625rem solid #f0ece7;
+  overflow: hidden;
+}
+
+.folder-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: transparent;
+  z-index: 99;
+}
+.content {
+  --background: transparent;
+  --padding-top: 4.5rem;
+  --padding-bottom: 2rem;
+}
+
+.search-container {
+  padding: 0.8rem 0.5rem;
+}
+
+.notes-container {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;
+}
+
+.notes-list {
+  position: relative;
+}
+
+.note-item {
+  margin: 0.6rem 0;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* 便签列表动画 */
+.note-list-enter-active,
+.note-list-leave-active {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.note-list-leave-to {
+  opacity: 0;
+  transform: translateX(-1.875rem);
+}
+
+.note-list-move {
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.note-list-leave-active {
+  position: absolute;
+  width: calc(100% - 1rem);
+}
+
+/* 文件夹列表动画 */
+.folder-slide-enter-active,
+.folder-slide-leave-active {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.folder-slide-enter-from {
+  opacity: 0;
+  transform: scale(0.8) translateY(-1.25rem);
+}
+
+.folder-slide-enter-to {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.folder-slide-leave-from {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.folder-slide-leave-to {
+  opacity: 0;
+  transform: scale(0.8) translateY(-1.25rem);
+}
+</style>
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index 96d9677..62acae6 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -115,16 +115,8 @@ const settings = computed(() => store.settings)
   background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
   width: 100%;
   height: 100vh;
-  overflow-y: scroll;
-
-  .item-text-primary {
-    font-size: 1rem;
-    color: #8e8e8e;
-  }
-
-  .item-text-tertiary {
-    font-size: 0.9375rem;
-    color: #b4b4b4;
-  }
+  overflow-y: auto;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
 }
 </style>
diff --git a/src/utils/sizeUtils.js b/src/utils/sizeUtils.js
new file mode 100644
index 0000000..9734c4f
--- /dev/null
+++ b/src/utils/sizeUtils.js
@@ -0,0 +1,29 @@
+/**
+ * 获取根元素的字体大小（以像素为单位）
+ * @returns {number} 根元素的字体大小（像素）
+ */
+export function getRootFontSize() {
+  return parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+
+/**
+ * 将像素值转换为rem值
+ * @param {number} px - 像素值
+ * @param {number} [rootFontSize] - 根字体大小，如果不提供则自动获取
+ * @returns {number} rem值
+ */
+export function pxToRem(px, rootFontSize = null) {
+  const fontSize = rootFontSize || getRootFontSize();
+  return px / fontSize;
+}
+
+/**
+ * 将像素值转换为rem字符串（带rem单位）
+ * @param {number} px - 像素值
+ * @param {number} [rootFontSize] - 根字体大小，如果不提供则自动获取
+ * @returns {string} rem字符串
+ */
+export function pxToRemStr(px, rootFontSize = null) {
+  const remValue = pxToRem(px, rootFontSize);
+  return `${remValue}rem`;
+}
\ No newline at end of file
