初始化提交

src/pages/SettingsPage.vue

@@ -0,0 +1,156 @@
+<template>
+  <ion-page>
+    <Header 
+      title="设置"
+      :onBack="handleBackPress"
+    />
+    
+    <ion-content style="background-color: var(--background)">
+      <div style="margin-bottom: 12px; background-color: var(--background-card)">
+        <div style="background-color: var(--background-secondary); font-size: 13px; font-weight: 600; color: var(--text-tertiary); padding: 10px 16px">
+          账户
+        </div>
+        <div button @click="handleLogin" style="display: flex; justify-content: space-between; align-items: center; background-color: var(--background-card); padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer">
+          <div style="font-size: 16px; color: var(--text-primary)">登录云同步</div>
+          <div style="font-size: 15px; color: var(--text-tertiary)">未登录</div>
+        </div>
+      </div>
+      
+      <div style="margin-bottom: 12px; background-color: var(--background-card)">
+        <div style="background-color: var(--background-secondary); font-size: 13px; font-weight: 600; color: var(--text-tertiary); padding: 10px 16px">
+          偏好设置
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center; background-color: var(--background-card); padding: 14px 16px; border-bottom: 1px solid var(--border)">
+          <div style="font-size: 16px; color: var(--text-primary)">云同步</div>
+          <ion-toggle 
+            slot="end" 
+            :checked="settings.cloudSync" 
+            @ion-change="toggleCloudSync"
+          ></ion-toggle>
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center; background-color: var(--background-card); padding: 14px 16px">
+          <div style="font-size: 16px; color: var(--text-primary)">深色模式</div>
+          <ion-toggle 
+            slot="end" 
+            :checked="settings.darkMode" 
+            @ion-change="toggleDarkMode"
+          ></ion-toggle>
+        </div>
+      </div>
+      
+      <div style="margin-bottom: 12px; background-color: var(--background-card)">
+        <div style="background-color: var(--background-secondary); font-size: 13px; font-weight: 600; color: var(--text-tertiary); padding: 10px 16px">
+          数据管理
+        </div>
+        <div button @click="handleBackup" style="display: flex; align-items: center; background-color: var(--background-card); padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer">
+          <img :src="'/assets/icons/drawable-xxhdpi/btn_save_pic.png'" style="width: 20px; height: 20px; color: var(--text-primary); margin-right: 12px" />
+          <div style="font-size: 16px; color: var(--text-primary)">备份便签</div>
+        </div>
+        <div button @click="handleRestore" style="display: flex; align-items: center; background-color: var(--background-card); padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer">
+          <img :src="'/assets/icons/drawable-xxhdpi/btn_restore.png'" style="width: 20px; height: 20px; color: var(--text-primary); margin-right: 12px" />
+          <div style="font-size: 16px; color: var(--text-primary)">恢复便签</div>
+        </div>
+        <div button @click="handleExport" style="display: flex; align-items: center; background-color: var(--background-card); padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer">
+          <img :src="'/assets/icons/drawable-xxhdpi/btn_share.png'" style="width: 20px; height: 20px; color: var(--text-primary); margin-right: 12px" />
+          <div style="font-size: 16px; color: var(--text-primary)">导出便签</div>
+        </div>
+        <div button @click="handleImport" style="display: flex; align-items: center; background-color: var(--background-card); padding: 14px 16px; cursor: pointer">
+          <img :src="'/assets/icons/drawable-xxhdpi/btn_load_error.png'" style="width: 20px; height: 20px; color: var(--text-primary); margin-right: 12px" />
+          <div style="font-size: 16px; color: var(--text-primary)">导入便签</div>
+        </div>
+      </div>
+      
+      <div style="margin-bottom: 12px; background-color: var(--background-card)">
+        <div style="background-color: var(--background-secondary); font-size: 13px; font-weight: 600; color: var(--text-tertiary); padding: 10px 16px">
+          关于
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center; background-color: var(--background-card); padding: 14px 16px; border-bottom: 1px solid var(--border)">
+          <div style="font-size: 16px; color: var(--text-primary)">版本</div>
+          <div style="font-size: 15px; color: var(--text-tertiary)">1.0.0</div>
+        </div>
+        <div button @click="handlePrivacyPolicy" style="display: flex; justify-content: space-between; align-items: center; background-color: var(--background-card); padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer">
+          <div style="font-size: 16px; color: var(--text-primary)">隐私政策</div>
+        </div>
+        <div button @click="handleTermsOfService" style="display: flex; justify-content: space-between; align-items: center; background-color: var(--background-card); padding: 14px 16px; cursor: pointer">
+          <div style="font-size: 16px; color: var(--text-primary)">服务条款</div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { useAppData } from '../utils/AppDataContext';
+import Header from '../components/Header.vue';
+
+export default {
+  name: 'SettingsPage',
+  components: {
+    Header
+  },
+  setup() {
+    const { state, updateSettings } = useAppData();
+    
+    const toggleCloudSync = () => {
+      updateSettings({ cloudSync: !state.settings.cloudSync });
+    };
+    
+    const toggleDarkMode = () => {
+      updateSettings({ darkMode: !state.settings.darkMode });
+    };
+    
+    const handleLogin = () => {
+      // In a full implementation, this would open a login screen
+      console.log('Login to cloud');
+    };
+    
+    const handlePrivacyPolicy = () => {
+      // In a full implementation, this would show the privacy policy
+      console.log('Privacy policy');
+    };
+    
+    const handleTermsOfService = () => {
+      // In a full implementation, this would show the terms of service
+      console.log('Terms of service');
+    };
+    
+    const handleBackup = () => {
+      // In a full implementation, this would backup notes
+      console.log('Backup notes');
+    };
+    
+    const handleRestore = () => {
+      // In a full implementation, this would restore notes
+      console.log('Restore notes');
+    };
+    
+    const handleExport = () => {
+      // In a full implementation, this would export notes
+      console.log('Export notes');
+    };
+    
+    const handleImport = () => {
+      // In a full implementation, this would import notes
+      console.log('Import notes');
+    };
+    
+    const handleBackPress = () => {
+      window.history.back();
+    };
+    
+    return {
+      settings: state.settings,
+      toggleCloudSync,
+      toggleDarkMode,
+      handleLogin,
+      handlePrivacyPolicy,
+      handleTermsOfService,
+      handleBackup,
+      handleRestore,
+      handleExport,
+      handleImport,
+      handleBackPress
+    };
+  }
+};
+</script>