设置优化

AiStudy-app/src/agent/tasks/learning-plan/1.collect-basic-info.ts

@@ -37,7 +37,7 @@ export function TaskCollectBasicInfo(options:{
         {
             name: "学习偏好",
             type: "text",
-            desc: "您喜欢什么样的学习方式？例如：视频教程、书籍阅读、实践练习等"
+            desc: "您喜欢什么样的学习方式？例如：AI教师对话、视频教程、书籍阅读、实践练习等"
         },
         {
             name: "当前水平",

AiStudy-app/src/app/app.routes.ts

@@ -67,5 +67,9 @@ export const routes: Routes = [
   {
     path: 'tabs',
     loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
+  {
+    path: 'tabs/tab3/settings',
+    loadComponent: () => import('./tab3/settings/settings.page').then(m => m.SettingsPage)
   }
 ];

AiStudy-app/src/app/tab3/settings/settings.page.html

@@ -0,0 +1,73 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
+    </ion-buttons>
+    <ion-title>设置</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list lines="none">
+    <!-- 显示设置 -->
+    <ion-item>
+      <ion-icon name="moon-outline" slot="start"></ion-icon>
+      <ion-label>深色模式</ion-label>
+      <ion-toggle 
+        [checked]="settings.darkMode" 
+        (ionChange)="toggleDarkMode($event)">
+      </ion-toggle>
+    </ion-item>
+
+    <!-- 专注模式 -->
+    <ion-item>
+      <ion-icon name="eye-outline" slot="start"></ion-icon>
+      <ion-label>
+        <h2>专注模式</h2>
+        <p>关闭社区功能，专注学习</p>
+      </ion-label>
+      <ion-toggle 
+        [checked]="settings.focusMode" 
+        (ionChange)="toggleFocusMode($event)">
+      </ion-toggle>
+    </ion-item>
+
+    <!-- 通知设置 -->
+    <ion-item>
+      <ion-icon name="notifications-outline" slot="start"></ion-icon>
+      <ion-label>推送通知</ion-label>
+      <ion-toggle [(ngModel)]="settings.notifications" (ionChange)="toggleNotifications()"></ion-toggle>
+    </ion-item>
+
+    <!-- 语言设置 -->
+    <ion-item button (click)="selectLanguage()">
+      <ion-icon name="language-outline" slot="start"></ion-icon>
+      <ion-label>
+        <h2>语言</h2>
+        <p>{{ settings.language }}</p>
+      </ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+
+    <!-- 隐私设置 -->
+    <ion-item button routerLink="/tabs/tab3/privacy">
+      <ion-icon name="lock-closed-outline" slot="start"></ion-icon>
+      <ion-label>隐私设置</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+
+    <!-- 帮助与支持 -->
+    <ion-item button routerLink="/tabs/tab3/help">
+      <ion-icon name="help-circle-outline" slot="start"></ion-icon>
+      <ion-label>帮助与支持</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+
+    <!-- 关于 -->
+    <ion-item button routerLink="/tabs/tab3/about">
+      <ion-icon name="information-circle-outline" slot="start"></ion-icon>
+      <ion-label>关于</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+  </ion-list>
+</ion-content> 

AiStudy-app/src/app/tab3/settings/settings.page.scss

@@ -0,0 +1,64 @@
+ion-list {
+  padding: 0;
+  background: transparent;
+  
+  ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --padding-top: 12px;
+    --padding-bottom: 12px;
+    --border-color: transparent;
+    --border-width: 0;
+    --border-style: none;
+    --inner-border-width: 0;
+    --min-height: 50px;
+    margin-bottom: 1px;
+
+    ion-icon[slot="start"] {
+      margin-right: 16px;
+      color: var(--ion-color-primary);
+    }
+
+    ion-label {
+      h2 {
+        font-size: 16px;
+        font-weight: 400;
+      }
+
+      p {
+        font-size: 14px;
+        color: var(--ion-color-medium);
+      }
+    }
+
+    ion-toggle {
+      --background: var(--ion-background-color);
+      --background-checked: var(--ion-color-primary);
+      --handle-background: #ffffff;
+      --handle-background-checked: #ffffff;
+      --handle-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      --handle-border-radius: 50%;
+      --handle-height: 22px;
+      --handle-width: 22px;
+      --handle-spacing: 0px;
+      --handle-border-width: 1px;
+      --handle-border-color: rgba(0,0,0,0.1);
+      padding: 6px;
+    }
+  }
+}
+
+:host-context(.dark) {
+  ion-list {
+    ion-item {
+      --background: var(--ion-color-dark);
+      --color: var(--ion-color-light);
+
+      ion-toggle {
+        --background: var(--ion-background-color);
+        --handle-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        --handle-border-color: rgba(255,255,255,0.1);
+      }
+    }
+  }
+} 

AiStudy-app/src/app/tab3/settings/settings.page.ts

@@ -0,0 +1,197 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonToggle,
+  IonIcon,
+  IonBackButton,
+  IonButtons,
+  AlertController
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {
+  moonOutline,
+  notificationsOutline,
+  languageOutline,
+  lockClosedOutline,
+  helpCircleOutline,
+  informationCircleOutline,
+  chevronForward,
+  eyeOutline
+} from 'ionicons/icons';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.page.html',
+  styleUrls: ['./settings.page.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonList,
+    IonItem,
+    IonLabel,
+    IonToggle,
+    IonIcon,
+    IonBackButton,
+    IonButtons
+  ]
+})
+export class SettingsPage implements OnInit {
+  // 设置选项
+  settings = {
+    darkMode: false,
+    notifications: true,
+    language: '简体中文',
+    focusMode: false
+  };
+
+  constructor(private alertController: AlertController) {
+    addIcons({
+      moonOutline,
+      notificationsOutline, 
+      languageOutline,
+      lockClosedOutline,
+      helpCircleOutline,
+      informationCircleOutline,
+      chevronForward,
+      eyeOutline
+    });
+  }
+
+  ngOnInit() {
+    // 从本地存储加载设置
+    this.loadSettings();
+    // 初始化深色模式
+    this.initDarkMode();
+  }
+
+  // 加载设置
+  private loadSettings() {
+    const savedSettings = localStorage.getItem('appSettings');
+    if (savedSettings) {
+      this.settings = JSON.parse(savedSettings);
+    } else {
+      // 如果没有保存的设置，检查系统颜色模式偏好
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+      this.settings.darkMode = prefersDark.matches;
+      this.saveSettings();
+    }
+  }
+
+  // 初始化深色模式
+  private initDarkMode() {
+    // 应用保存的深色模式设置
+    document.body.classList.toggle('dark', this.settings.darkMode);
+    
+    // 监听系统颜色模式变化
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+    prefersDark.addListener((e) => {
+      if (e.matches) {
+        document.body.classList.add('dark');
+        this.settings.darkMode = true;
+      } else {
+        document.body.classList.remove('dark');
+        this.settings.darkMode = false;
+      }
+      this.saveSettings();
+    });
+  }
+
+  // 切换深色模式
+  toggleDarkMode(event: any) {
+    // 使用 event.detail.checked 来获取切换后的状态
+    this.settings.darkMode = event.detail.checked;
+    document.body.classList.toggle('dark', this.settings.darkMode);
+    this.saveSettings();
+    
+    // 应用深色模式到所有相关组件
+    const elements = document.querySelectorAll('ion-content, ion-header, ion-toolbar');
+    elements.forEach(element => {
+      if (this.settings.darkMode) {
+        element.classList.add('dark');
+      } else {
+        element.classList.remove('dark');
+      }
+    });
+  }
+
+  // 保存设置
+  private saveSettings() {
+    localStorage.setItem('appSettings', JSON.stringify(this.settings));
+  }
+
+  // 切换通知
+  toggleNotifications() {
+    this.settings.notifications = !this.settings.notifications;
+    this.saveSettings();
+  }
+
+  // 选择语言
+  async selectLanguage() {
+    const alert = await this.alertController.create({
+      header: '选择语言',
+      inputs: [
+        {
+          label: '简体中文',
+          type: 'radio',
+          value: '简体中文',
+          checked: this.settings.language === '简体中文'
+        },
+        {
+          label: 'English',
+          type: 'radio',
+          value: 'English',
+          checked: this.settings.language === 'English'
+        }
+      ],
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel'
+        },
+        {
+          text: '确定',
+          handler: (value) => {
+            this.settings.language = value;
+            this.saveSettings();
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  // 添加切换专注模式的方法
+  toggleFocusMode(event: any) {
+    this.settings.focusMode = event.detail.checked;
+    this.saveSettings();
+    
+    // 如果开启专注模式，显示提示
+    if (this.settings.focusMode) {
+      this.showFocusModeEnabledAlert();
+    }
+  }
+
+  // 显示专注模式开启提示
+  private async showFocusModeEnabledAlert() {
+    const alert = await this.alertController.create({
+      header: '专注模式已开启',
+      message: '在专注模式下，社区功能将被暂时关闭，帮助你专注于学习。',
+      buttons: ['我知道了']
+    });
+    await alert.present();
+  }
+} 

AiStudy-app/src/app/tabs/tabs.page.html

@@ -1,11 +1,13 @@
-<ion-tabs>
+<ion-tabs 
+  (ionTabsWillChange)="onTabWillChange($event)"
+  (ionTabsDidChange)="onTabDidChange($event)">
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon name="chatbubbles"></ion-icon> <!-- 对话气泡图标 -->
+      <ion-icon name="chatbubbles"></ion-icon>
       <ion-label>对话</ion-label>
     </ion-tab-button>
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon name="planet"></ion-icon> <!-- 小星球图标表示“拓展” -->
+      <ion-icon name="planet"></ion-icon>
       <ion-label>拓展</ion-label>
     </ion-tab-button>
     <ion-tab-button tab="tab-community" href="/tabs/tab-community">
@@ -13,7 +15,7 @@
       <ion-label>社区</ion-label>
     </ion-tab-button>
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon name="person"></ion-icon> <!-- 人像图标 -->
+      <ion-icon name="person"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>

AiStudy-app/src/app/tabs/tabs.page.ts

@@ -1,7 +1,8 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
-import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, AlertController } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { chatbubbles, planet, person, people } from 'ionicons/icons';
+import { chatbubbles, planet, person, people, eyeOutline } from 'ionicons/icons';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-tabs',
@@ -12,8 +13,54 @@ import { chatbubbles, planet, person, people } from 'ionicons/icons';
 })
 export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
+  private previousTab: string = 'tab1';
 
-  constructor() {
-    addIcons({ chatbubbles, planet, person, people });
+  constructor(
+    private router: Router,
+    private alertController: AlertController
+  ) {
+    addIcons({ chatbubbles, planet, person, people, eyeOutline });
+  }
+
+  // 在切换前记录当前标签
+  onTabWillChange(event: any) {
+    if (event.tab !== 'tab-community') {
+      this.previousTab = event.tab;
+    }
+  }
+
+  // 处理标签切换
+  async onTabDidChange(event: any) {
+    const tab = event.tab;
+    
+    // 检查是否是社区tab且专注模式开启
+    if (tab === 'tab-community') {
+      const settings = localStorage.getItem('appSettings');
+      if (settings) {
+        const { focusMode } = JSON.parse(settings);
+        if (focusMode) {
+          // 立即跳转回之前的标签
+          await this.router.navigate([`/tabs/${this.previousTab}`]);
+          
+          const alert = await this.alertController.create({
+            header: '专注模式已开启',
+            message: '请先在设置中关闭专注模式，才能访问社区功能。',
+            buttons: [
+              {
+                text: '继续学习',
+                role: 'cancel'
+              },
+              {
+                text: '去设置',
+                handler: () => {
+                  this.router.navigate(['/tabs/tab3/settings']);
+                }
+              }
+            ]
+          });
+          await alert.present();
+        }
+      }
+    }
   }
 }

AiStudy-app/src/theme/variables.scss

@@ -1,2 +1,46 @@
 // For information on how to create your own theme, please see:
 // http://ionicframework.com/docs/theming/
+
+body.dark {
+  --ion-color-primary: #428cff;
+  --ion-color-primary-rgb: 66,140,255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255,255,255;
+  --ion-color-primary-shade: #3a7be0;
+  --ion-color-primary-tint: #5598ff;
+
+  --ion-color-secondary: #50c8ff;
+  --ion-color-secondary-rgb: 80,200,255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255,255,255;
+  --ion-color-secondary-shade: #46b0e0;
+  --ion-color-secondary-tint: #62ceff;
+
+  --ion-background-color: #121212;
+  --ion-background-color-rgb: 18,18,18;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255,255,255;
+
+  --ion-border-color: #222222;
+
+  --ion-color-step-50: #1e1e1e;
+  --ion-color-step-100: #2a2a2a;
+  --ion-color-step-150: #363636;
+  --ion-color-step-200: #414141;
+  --ion-color-step-250: #4d4d4d;
+  --ion-color-step-300: #595959;
+  --ion-color-step-350: #656565;
+  --ion-color-step-400: #717171;
+  --ion-color-step-450: #7d7d7d;
+  --ion-color-step-500: #898989;
+  --ion-color-step-550: #949494;
+  --ion-color-step-600: #a0a0a0;
+  --ion-color-step-650: #acacac;
+  --ion-color-step-700: #b8b8b8;
+  --ion-color-step-750: #c4c4c4;
+  --ion-color-step-800: #d0d0d0;
+  --ion-color-step-850: #dbdbdb;
+  --ion-color-step-900: #e7e7e7;
+  --ion-color-step-950: #f3f3f3;
+}