pure-todo/miniprogram/pages/settings/settings.wxml

<!--pages/settings/settings.wxml-->
<view class="container">
  <!-- 顶部标题 -->
  <view class="header-section">
    <text class="header-title">设置</text>
    <text class="header-subtitle">个性化你的使用体验</text>
  </view>

  <!-- 应用信息 -->
  <view class="app-info-section">
    <view class="app-info-card">
      <view class="app-info">
        <view class="app-icon">
          <t-icon name="check-circle" size="24" color="#0052d9" />
        </view>
        <view class="app-details">
          <text class="app-name">Pure Todo</text>
          <text class="app-version">版本 {{appVersion}}</text>
        </view>
      </view>
      <view class="app-stats">
        <text class="stat-item">总任务: {{stats.total || 0}}</text>
        <text class="stat-item">已完成: {{stats.completed || 0}}</text>
        <text class="stat-item">完成率: {{stats.completionRate || 0}}%</text>
      </view>
    </view>
  </view>

  <!-- 外观设置 -->
  <view class="settings-section">
    <view class="section-header">
      <text class="section-title">外观</text>
    </view>
    <view class="settings-list">
      <view class="setting-item">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="theme" size="16" color="#0052d9" />
            <text class="setting-label">深色模式</text>
          </view>
          <t-switch 
            value="{{darkMode}}" 
            bind:change="onDarkModeChange"
            color="#0052d9"
          />
        </view>
        <text class="setting-desc">切换深色主题，保护眼睛</text>
      </view>
    </view>
  </view>

  <!-- 通知设置 -->
  <view class="settings-section">
    <view class="section-header">
      <text class="section-title">通知</text>
    </view>
    <view class="settings-list">
      <view class="setting-item">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="notification" size="16" color="#0052d9" />
            <text class="setting-label">推送通知</text>
          </view>
          <t-switch 
            value="{{notifications}}" 
            bind:change="onNotificationsChange"
            color="#0052d9"
          />
        </view>
        <text class="setting-desc">接收任务提醒和完成通知</text>
      </view>
    </view>
  </view>

  <!-- 数据管理 -->
  <view class="settings-section">
    <view class="section-header">
      <text class="section-title">数据管理</text>
    </view>
    <view class="settings-list">
      <view class="setting-item">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="cloud" size="16" color="#0052d9" />
            <text class="setting-label">自动备份</text>
          </view>
          <t-switch 
            value="{{autoBackup}}" 
            bind:change="onAutoBackupChange"
            color="#0052d9"
          />
        </view>
        <text class="setting-desc">定期自动备份数据到云端</text>
      </view>
      
      <view class="setting-item" bind:tap="exportData">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="download" size="16" color="#0052d9" />
            <text class="setting-label">导出数据</text>
          </view>
          <t-icon name="chevron-right" size="14" color="#ccc" />
        </view>
        <text class="setting-desc">将数据导出为备份文件</text>
      </view>
      
      <view class="setting-item" bind:tap="importData">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="upload" size="16" color="#0052d9" />
            <text class="setting-label">导入数据</text>
          </view>
          <t-icon name="chevron-right" size="14" color="#ccc" />
        </view>
        <text class="setting-desc">从备份文件恢复数据</text>
      </view>
      
      <view class="setting-item" bind:tap="clearData">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="delete" size="16" color="#e34d59" />
            <text class="setting-label danger">清空数据</text>
          </view>
          <t-icon name="chevron-right" size="14" color="#ccc" />
        </view>
        <text class="setting-desc">删除所有任务和设置</text>
      </view>
    </view>
  </view>

  <!-- 应用设置 -->
  <view class="settings-section">
    <view class="section-header">
      <text class="section-title">应用</text>
    </view>
    <view class="settings-list">
      <view class="setting-item" bind:tap="resetSettings">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="refresh" size="16" color="#0052d9" />
            <text class="setting-label">重置设置</text>
          </view>
          <t-icon name="chevron-right" size="14" color="#ccc" />
        </view>
        <text class="setting-desc">恢复所有设置为默认值</text>
      </view>
      
      <view class="setting-item" bind:tap="checkUpdate">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="update" size="16" color="#0052d9" />
            <text class="setting-label">检查更新</text>
          </view>
          <t-icon name="chevron-right" size="14" color="#ccc" />
        </view>
        <text class="setting-desc">检查是否有新版本可用</text>
      </view>
      
      <view class="setting-item" bind:tap="rateApp">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="star" size="16" color="#0052d9" />
            <text class="setting-label">给应用评分</text>
          </view>
          <t-icon name="chevron-right" size="14" color="#ccc" />
        </view>
        <text class="setting-desc">在应用商店给我们好评</text>
      </view>
      
      <view class="setting-item" bind:tap="showAbout">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="info-circle" size="16" color="#0052d9" />
            <text class="setting-label">关于应用</text>
          </view>
          <t-icon name="chevron-right" size="14" color="#ccc" />
        </view>
        <text class="setting-desc">查看应用信息和开发者联系方式</text>
      </view>
      
      <view class="setting-item" bind:tap="contactDeveloper">
        <view class="setting-content">
          <view class="setting-info">
            <t-icon name="service" size="16" color="#0052d9" />
            <text class="setting-label">联系开发者</text>
          </view>
          <t-icon name="chevron-right" size="14" color="#ccc" />
        </view>
        <text class="setting-desc">反馈问题或建议新功能</text>
      </view>
    </view>
  </view>

  <!-- 关于对话框 -->
  <t-dialog
    visible="{{showAboutDialog}}"
    title="关于 Pure Todo"
    confirm-btn="确定"
    bind:confirm="hideAbout"
  >
    <view class="about-content">
      <view class="about-header">
        <t-icon name="check-circle" size="32" color="#0052d9" />
        <text class="about-title">Pure Todo</text>
        <text class="about-version">版本 {{appVersion}}</text>
      </view>
      <text class="about-desc">
        一个简洁高效的待办事项管理应用，帮助你更好地管理时间和任务。
      </text>
      <view class="about-features">
        <text class="feature-item">• 简洁直观的界面设计</text>
        <text class="feature-item">• 智能的任务分类和筛选</text>
        <text class="feature-item">• 详细的数据统计和分析</text>
        <text class="feature-item">• 安全的数据备份和恢复</text>
      </view>
    </view>
  </t-dialog>

  <!-- 备份数据对话框 -->
  <t-dialog
    visible="{{showBackupDialog}}"
    title="备份数据"
    confirm-btn="复制"
    cancel-btn="关闭"
    bind:confirm="copyBackupData"
    bind:cancel="hideBackup"
  >
    <view class="backup-content">
      <text class="backup-desc">以下是你的备份数据，请妥善保存：</text>
      <view class="backup-data">
        <text class="backup-text">{{backupData}}</text>
      </view>
    </view>
  </t-dialog>

  <!-- 自定义标签栏 -->
  <t-tab-bar value="{{activeTab}}" bind:change="onTabChange" t-class="custom-tab-bar">
    <t-tab-bar-item value="home" icon="home" aria-label="首页">首页</t-tab-bar-item>
    <t-tab-bar-item value="list" icon="bulletpoint" aria-label="任务">任务</t-tab-bar-item>
    <t-tab-bar-item value="statistics" icon="chart" aria-label="统计">统计</t-tab-bar-item>
    <t-tab-bar-item value="settings" icon="setting" aria-label="设置">设置</t-tab-bar-item>
  </t-tab-bar>
</view>