新增 设置块组件；

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

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>
-      <div class="settings-section">
+      <SettingGroup title="账户">
         <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>
-      <div class="settings-section">
+      <SettingGroup title="偏好设置">
         <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>
-      <div class="settings-section">
+      <SettingGroup title="关于">
         <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);
-  }
-
-  .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;
+    color: #b4b4b4;
   }
 }
 </style>