新增 设置块组件；

新增 开关按钮组件；
调整了若干样式；

src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
+  <router-view />
-    <router-view />
-  </div>
 </template>
 
 <script setup>

src/components/Header.vue

@@ -151,7 +151,7 @@ const handleTitlePress = () => {
 
 <style scoped lang="less">
 .component {
-  padding: 2.5rem 0.72rem 0.5rem;
+  padding: 2.5rem 0.72rem 0.35rem;
   background: v-bind(background);
   background-size: 100% 100%;
   display: flex;
@@ -166,8 +166,8 @@ const handleTitlePress = () => {
   }
   .left-icon,
   .image_4 {
-    width: 1.8rem;
+    width: 1.9rem;
-    height: 1.8rem;
+    height: 1.9rem;
     cursor: pointer;
   }
   .right-group {
@@ -175,8 +175,8 @@ const handleTitlePress = () => {
   }
 
   .image_4-placeholder {
-    width: 1.8rem;
+    width: 1.9rem;
-    height: 1.8rem;
+    height: 1.9rem;
   }
 
   .title-container {
@@ -197,6 +197,8 @@ const handleTitlePress = () => {
       color: v-bind(color);
       font-size: 1.01rem;
       line-height: 1.01rem;
+      letter-spacing: 0.05em;
+      text-indent: 0.05em;
     }
   }
 }

src/components/NoteItem.vue

@@ -207,9 +207,6 @@ const handleTouchEnd = () => {
 </script>
 
 <style lang="less" scoped>
-.ml-15 {
-  margin-left: 0.94rem;
-}
 .mt-17-5 {
   margin-top: -1rem;
 }
@@ -230,6 +227,7 @@ const handleTouchEnd = () => {
   span {
     margin-right: 0.7rem;
     font-size: 0.6rem;
+    display: block;
   }
 }
 .list-item_7 {
@@ -239,11 +237,21 @@ const handleTouchEnd = () => {
     box-sizing: border-box;
     width: 95%;
     height: 100%;
-    background: var(--background);
+    background: linear-gradient(to bottom, #fffdf6, #f3eee4);
     z-index: 2;
-    padding: 0.44rem 0.69rem 0.88rem 2.69rem;
+    padding: 0.44rem 0.69rem 0.88rem 2.09rem;
-    box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.23);
+    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;

src/components/SettingGroup.vue

@@ -0,0 +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>

src/components/SwitchButton.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="switch-button" :class="{ 'switch-button--on': modelValue }" @click="handleTouchStart">
+    <div class="switch-button__background">
+      <img src="/assets/icons/drawable-xxhdpi/switch_ex_bottom.png" alt="开关底图" class="switch-button__image switch-button__image--bottom" />
+      <img src="/assets/icons/drawable-xxhdpi/switch_ex_frame.png" alt="开关边框" class="switch-button__image switch-button__image--frame" />
+      <img src="/assets/icons/drawable-xxhdpi/switch_ex_mask.png" alt="开关遮罩" class="switch-button__image switch-button__image--mask" />
+      <img src="/assets/icons/drawable-xxhdpi/switch_ex_unpressed.png" alt="开关按钮" class="switch-button__image switch-button__image--unpressed" :class="{ 'switch-button__image--unpressed-on': modelValue }" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const handleTouchStart = event => {
+  // 触摸开始时直接触发状态切换
+  emit('update:modelValue', !props.modelValue)
+}
+
+// 保持原来的toggle方法以兼容其他可能的调用
+const toggle = () => {
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<style scoped lang="less">
+.switch-button {
+  display: inline-block;
+  width: 3.325rem; /* 50px */
+  height: 2.275rem; /* 30px */
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+
+  &__background {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.2s ease;
+    transform: translateX(0);
+
+    &--bottom {
+      z-index: 1;
+    }
+
+    &--frame {
+      z-index: 2;
+    }
+
+    &--mask {
+      z-index: 3;
+      /* 遮罩层是全黑图片，使用screen混合模式 */
+      mix-blend-mode: screen;
+    }
+
+    &--unpressed {
+      z-index: 4;
+      transform: translateX(-25%); /* 20px */
+    }
+
+    &--unpressed-on {
+      transform: translateX(25%); /* 20px */
+    }
+  }
+}
+</style>

src/pages/NoteListPage.vue

@@ -393,6 +393,6 @@ const notes = computed(() => store.notes)
 }
 
 .note-item {
-  margin: 0.4rem 0;
+  margin: 0.6rem 0;
 }
 </style>

src/pages/SettingsPage.vue

@@ -3,24 +3,21 @@
     <Header title="设置" :onBack="handleBackPress" background="#f9f9f9" color="#8e8e8e" />
 
     <div class="settings-content">
-      <div class="section-header"> 账户 </div>
+      <SettingGroup title="账户">
-      <div class="settings-section">
         <div button @click="handleLogin" class="settings-item settings-item-clickable">
           <div class="item-text-primary">登录云同步</div>
           <div class="item-text-tertiary">未登录</div>
         </div>
-      </div>
+      </SettingGroup>
 
-      <div class="section-header"> 偏好设置 </div>
+      <SettingGroup title="偏好设置">
-      <div class="settings-section">
         <div class="settings-item settings-item-border">
           <div class="item-text-primary">云同步</div>
-          <ion-toggle slot="end" :checked="settings.cloudSync" @ion-change="toggleCloudSync"></ion-toggle>
+          <SwitchButton :model-value="settings.cloudSync" @update:model-value="toggleCloudSync" />
         </div>
-      </div>
+      </SettingGroup>
 
-      <div class="section-header"> 关于 </div>
+      <SettingGroup title="关于">
-      <div class="settings-section">
         <div class="settings-item settings-item-border">
           <div class="item-text-primary">版本</div>
           <div class="item-text-tertiary">1.0.0</div>
@@ -31,7 +28,7 @@
         <div button @click="handleTermsOfService" class="settings-item settings-item-clickable">
           <div class="item-text-primary">服务条款</div>
         </div>
-      </div>
+      </SettingGroup>
     </div>
   </ion-page>
 </template>
@@ -41,6 +38,8 @@ import { computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAppStore } from '../stores/useAppStore'
 import Header from '../components/Header.vue'
+import SettingGroup from '../components/SettingGroup.vue'
+import SwitchButton from '../components/SwitchButton.vue'
 
 const store = useAppStore()
 const router = useRouter()
@@ -53,7 +52,7 @@ onMounted(() => {
 
 // 切换云同步设置
 // 调用store中的方法更新云同步状态
-const toggleCloudSync = () => {
+const toggleCloudSync = (value) => {
   store.toggleCloudSync()
 }
 
@@ -89,70 +88,14 @@ const settings = computed(() => store.settings)
   height: 100vh;
   overflow-y: scroll;
 
-  .section-header {
-    font-size: 0.75rem;
-    color: var(--text-tertiary);
-    padding: 0.3125rem 1rem;
-    width: 95%;
-    margin: 0.75rem auto 0 auto;
-  }
-
-  .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%);
-  }
-
-  .settings-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #f9f9f9;
-    padding: 0.875rem 1rem;
-  }
-
-  .settings-item-border {
-    border-top: 1px solid var(--divider);
-    border-bottom: 1px solid var(--divider);
-    &:first-child {
-      border: none;
-    }
-    &:last-child {
-      border: none;
-    }
-  }
-
-  .settings-item-clickable {
-    cursor: pointer;
-  }
-
   .item-text-primary {
     font-size: 1rem;
-    color: var(--text-primary);
+    color: #8e8e8e;
   }
 
   .item-text-tertiary {
     font-size: 0.9375rem;
-    color: var(--text-tertiary);
+    color: #b4b4b4;
-  }
-
-  .item-icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    color: var(--text-primary);
-    margin-right: 0.75rem;
-  }
-
-  .settings-item-clickable .item-text-primary {
-    flex: 1;
-  }
-
-  .settings-item-clickable {
-    display: flex;
-    align-items: center;
   }
 }
 </style>