chrone: optimize the writing page

TFPower-app/src/app/app.routes.ts

@@ -1,71 +1,67 @@
-import { Routes, RouterModule } from '@angular/router';
-import { PostPageComponent } from './post-page/post-page.component'; // 导入 PostPage 组件
-import { CommunityPage } from './community/community.page';
-import { SharePageComponent } from './share-page/share-page.component';
-import { NgModule } from '@angular/core';
-export const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
-  },
-  {
-    path: 'community',
-    loadComponent: () =>
-      import('./community/community.page').then((m) => m.CommunityPage),
-  },
-  { path: '', redirectTo: 'community', pathMatch: 'full' },
-  { path: 'community', component: CommunityPage },
-  { path: 'post-page/:id', component: PostPageComponent }, // 动态详情页面的路由
-  { path: 'share', component: SharePageComponent },
-
-  {
-    path: 'login-page',
-    loadComponent: () =>
-      import('./page/login-page/login-page.page').then((m) => m.LoginPagePage),
-  },
-  {
-    path: 'register-page',
-    loadComponent: () =>
-      import('./page/register-page/register-page.page').then(
-        (m) => m.RegisterPagePage
-      ),
-  },
-  {
-    path: 'modal-edit-page',
-    loadComponent: () =>
-      import('./page/modal/modal-edit-page/modal-edit-page.page').then(
-        (m) => m.ModalEditPagePage
-      ),
-  },
-  {
-    path: 'modal-browse-page',
-    loadComponent: () =>
-      import('./page/modal/modal-browse-page/modal-browse-page.page').then(
-        (m) => m.ModalBrowsePagePage
-      ),
-  },
-  {
-    path: 'modal-newsedit',
-    loadComponent: () =>
-      import('./page/modal/modal-newsedit/modal-newsedit.page').then(
-        (m) => m.ModalNewseditPage
-      ),
-  },
-  {
-    path: 'search-page',
-    loadComponent: () =>
-      import('./page/search-page/search-page.page').then(
-        (m) => m.SearchPagePage
-      ),
-  },
  {
-    path: 'health-page',
-    loadComponent: () => import('./page/homepage/health-page/health-page.page').then( m => m.HealthPagePage)
+import { Routes, RouterModule } from '@angular/router';
+import { PostPageComponent } from './post-page/post-page.component'; // 导入 PostPage 组件
+import { CommunityPage } from './community/community.page';
+import { SharePageComponent } from './share-page/share-page.component';
+import { NgModule } from '@angular/core';
+export const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
   },
+  {
+    path: 'community',
+    loadComponent: () =>
+      import('./community/community.page').then((m) => m.CommunityPage),
+  },
+  { path: '', redirectTo: 'community', pathMatch: 'full' },
+  { path: 'community', component: CommunityPage },
+  { path: 'post-page/:id', component: PostPageComponent }, // 动态详情页面的路由
+  { path: 'share', component: SharePageComponent },
+
+  {
+    path: 'login-page',
+    loadComponent: () =>
+      import('./page/login-page/login-page.page').then((m) => m.LoginPagePage),
+  },
+  {
+    path: 'register-page',
+    loadComponent: () =>
+      import('./page/register-page/register-page.page').then(
+        (m) => m.RegisterPagePage
+      ),
+  },
+  {
+    path: 'modal-edit-page',
+    loadComponent: () =>
+      import('./page/modal/modal-edit-page/modal-edit-page.page').then(
+        (m) => m.ModalEditPagePage
+      ),
+  },
+  {
+    path: 'modal-browse-page',
+    loadComponent: () =>
+      import('./page/modal/modal-browse-page/modal-browse-page.page').then(
+        (m) => m.ModalBrowsePagePage
+      ),
+  },
+  {
+    path: 'modal-newsedit',
+    loadComponent: () =>
+      import('./page/modal/modal-newsedit/modal-newsedit.page').then(
+        (m) => m.ModalNewseditPage
+      ),
+  },
+  {
+    path: 'search-page',
+    loadComponent: () =>
+      import('./page/search-page/search-page.page').then(
+        (m) => m.SearchPagePage
+      ),
+  },
+];
 
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

TFPower-app/src/app/page/modal/modal-newsedit/modal-newsedit.page.html

@@ -23,7 +23,16 @@
     <app-comp-uploader-hwobs [url]="uploadUrl" (UrlChange)="UrlChange($event)"></app-comp-uploader-hwobs>
   </ion-item>
   <ion-item>
-    <ion-input label="主题" labelPlacement="stacked" placeholder="theme" (ionInput)="InputTheme($event)"></ion-input>
+    <ion-select label="主题" label-placement="stacked" placeholder="theme" (ionChange)="InputTheme($event)">
+      <ion-select-option value="健康">健康</ion-select-option>
+      <ion-select-option value="养生">养生</ion-select-option>
+      <ion-select-option value="中医药">中医药</ion-select-option>
+      <ion-select-option value="食品">食品</ion-select-option>
+      <ion-select-option value="科普">科普</ion-select-option>
+      <ion-select-option value="社会">社会</ion-select-option>
+      <ion-select-option value="运动">运动</ion-select-option>
+      <ion-select-option value="教育">教育</ion-select-option>
+    </ion-select>
   </ion-item>
   <ion-item>
     <ion-input label="标题" labelPlacement="stacked" placeholder="title" (ionInput)="InputTitle($event)"></ion-input>

TFPower-app/src/app/page/modal/modal-newsedit/modal-newsedit.page.ts

@@ -14,6 +14,8 @@ import {
   IonToolbar,
   ModalController,
   IonToast,
+  IonSelect,
+  IonSelectOption,
 } from '@ionic/angular/standalone';
 import { CompUploaderHwobsComponent } from 'src/app/component/comp-uploader-hwobs/comp-uploader-hwobs.component';
 
@@ -40,6 +42,8 @@ import { CompUploaderHwobsComponent } from 'src/app/component/comp-uploader-hwob
     IonTextarea,
     IonToast,
     CompUploaderHwobsComponent,
+    IonSelect,
+    IonSelectOption,
   ],
 })
 export class ModalNewseditPage implements OnInit {
@@ -70,6 +74,7 @@ export class ModalNewseditPage implements OnInit {
 
   InputTheme(ev: any) {
     this.theme = ev.detail.value;
+    console.log(this.theme);
   }
   InputTitle(ev: any) {
     this.title = ev.detail.value;
@@ -98,8 +103,7 @@ export class ModalNewseditPage implements OnInit {
       article: this.article,
     };
 
-    console.log(newsData);
-    console.log(!newsData.author.objectId.length);
+    // console.log(newsData);
 
     if (!newsData.author.objectId.length) {
       this.setOpenWarning(true);

TFPower-app/src/app/tab1/tab1.page.html

@@ -63,10 +63,55 @@
       <app-draggable-button></app-draggable-button>
       <!-- <button (click)="test()">test</button> -->
 
+      <!-- 签到 -->
+      <!-- <ion-card color="secondary" id="allChange">
+        <ion-card-header>
+          @if(!sexChecked){
+          <ion-card-title>戒色签到</ion-card-title>
+          }@else {
+          <ion-card-title>签到成功</ion-card-title>
+          }
+          <ion-card-subtitle>戒色行动</ion-card-subtitle>
+        </ion-card-header>
+      
+        <ion-card-content>
+          <ion-grid>
+            <ion-row>
+              <ion-col>
+                <ion-card color="light" id="present-alert-success" (click)="goodbody()">
+                  <ion-card-header>
+                    <ion-card-title>身强体壮</ion-card-title>
+                  </ion-card-header>
+                  <ion-card-content>
+                    连续戒色 {{duringday}} 天 <br />
+                    累计戒色 {{goodday}} 天
+                  </ion-card-content>
+                </ion-card>
+                <ion-alert trigger="present-alert-success" header="戒色成功" [buttons]="alertButtons"></ion-alert>
+              </ion-col>
+              <ion-col>
+                <ion-card color="light" id="present-alert-fail" (click)="badbody()">
+                  <ion-card-header>
+                    <ion-card-title>眼神涣散</ion-card-title>
+                  </ion-card-header>
+      
+                  <ion-card-content>
+                    累计破戒 {{badday}} 天 <br />
+                    继续加油！
+                  </ion-card-content>
+                  <ion-alert trigger="present-alert-fail" header="破解了啊" [buttons]="alertButtons"></ion-alert>
+                </ion-card>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+        </ion-card-content>
+      </ion-card> -->
+
+
       <!-- 主体 -->
       <ion-content class="ion-padding">
         <div *ngIf="!is_loading">
-          <ion-card *ngFor="let news of newslists" (click)="openModal(news)">
+          <ion-card *ngFor="let news of needlists" (click)="openModal(news)">
             <img [src]="news.illustration" />
             <ion-card-header>
               <ion-card-subtitle>{{news.column}}</ion-card-subtitle>
@@ -79,7 +124,7 @@
         </div>
 
 
-        <!-- 第一张卡片 -->
+        <!-- 卡片示例1 -->
         <ion-card class="bigcard">
           <img src="../../assets/images/26547.png" />
           <ion-card-header>
@@ -111,7 +156,7 @@
           </ion-card-content>
         </ion-card>
 
-        <!-- 中间卡片 -->
+        <!-- 卡片示例2 -->
         <ion-card color="primary">
           <ion-card-header>
             <ion-card-title>戒色提醒</ion-card-title>
@@ -120,53 +165,6 @@
           <ion-card-content>戒色就是一种历练，是一种蜕变，是一种升华，戒掉后你才能真正把握自己的人生，而不是做欲望的奴隶，无法自拔直至身体彻底垮掉。</ion-card-content>
         </ion-card>
 
-
-
-        <ion-card color="secondary" id="allChange">
-          <ion-card-header>
-            @if(!sexChecked){
-            <ion-card-title>戒色签到</ion-card-title>
-            }@else {
-            <ion-card-title>签到成功</ion-card-title>
-            }
-            <ion-card-subtitle>戒色行动</ion-card-subtitle>
-          </ion-card-header>
-
-          <ion-card-content>
-            <ion-grid>
-              <ion-row>
-                <ion-col>
-                  <ion-card color="light" id="present-alert-success" (click)="goodbody()">
-                    <ion-card-header>
-                      <ion-card-title>身强体壮</ion-card-title>
-                      <!-- <ion-card-subtitle>走向光明</ion-card-subtitle> -->
-                    </ion-card-header>
-                    <ion-card-content>
-                      连续戒色 {{duringday}} 天 <br />
-                      累计戒色 {{goodday}} 天
-                    </ion-card-content>
-                  </ion-card>
-                  <ion-alert trigger="present-alert-success" header="戒色成功" [buttons]="alertButtons"></ion-alert>
-                </ion-col>
-                <ion-col>
-                  <ion-card color="light" id="present-alert-fail" (click)="badbody()">
-                    <ion-card-header>
-                      <ion-card-title>眼神涣散</ion-card-title>
-                      <!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle> -->
-                    </ion-card-header>
-
-                    <ion-card-content>
-                      累计破戒 {{badday}} 天 <br />
-                      继续加油！
-                    </ion-card-content>
-                    <ion-alert trigger="present-alert-fail" header="破解了啊" [buttons]="alertButtons"></ion-alert>
-                  </ion-card>
-                </ion-col>
-              </ion-row>
-            </ion-grid>
-          </ion-card-content>
-        </ion-card>
-
         <ion-card class="bigcard">
           <img src="../../assets/images/13363.png" />
           <ion-card-header>
@@ -192,45 +190,6 @@
             </p>
           </ion-card-content>
         </ion-card>
-
-        <!-- 第二张卡片 -->
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>Card Title</ion-card-title>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          </ion-card-header>
-          <ion-card-content>
-            <ion-list>
-              <ion-item>
-                <ion-thumbnail slot="start">
-                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-                </ion-thumbnail>
-                <ion-label>Item</ion-label>
-              </ion-item>
-
-              <ion-item>
-                <ion-thumbnail slot="start">
-                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-                </ion-thumbnail>
-                <ion-label>Item</ion-label>
-              </ion-item>
-
-              <ion-item>
-                <ion-thumbnail slot="start">
-                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-                </ion-thumbnail>
-                <ion-label>Item</ion-label>
-              </ion-item>
-
-              <ion-item lines="none">
-                <ion-thumbnail slot="start">
-                  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
-                </ion-thumbnail>
-                <ion-label>Item</ion-label>
-              </ion-item>
-            </ion-list>
-          </ion-card-content>
-        </ion-card>
       </ion-content>
     </div>
   </ion-app>

TFPower-app/src/app/tab1/tab1.page.ts

@@ -44,6 +44,17 @@ import { ModalBrowsePagePage } from '../page/modal/modal-browse-page/modal-brows
 import { DraggableButtonComponent } from '../component/draggable-button/draggable-button.component';
 import { addIcons } from 'ionicons';
 import { searchOutline } from 'ionicons/icons';
+interface Article {
+  article: string;
+  author: { objectId: string; __type: string; className: string };
+  column: string;
+  createdAt: string;
+  illustration: string;
+  objectId: string;
+  theme: string;
+  title: string;
+  updatedAt: string;
+}
 
 @Component({
   selector: 'app-tab1',
@@ -129,12 +140,11 @@ export class Tab1Page implements OnInit {
   navItems = [
     { label: '首页', link: '/home' },
     { label: '健康', link: '/health' },
-    { label: '生活', link: '/live' },
-    { label: '社会', link: '/society' },
+    { label: '养生', link: '/wellness' },
+    { label: '中医药', link: '/chineseMedicine' },
+    { label: '食品', link: '/food' },
     { label: '科普', link: '/science' },
-    { label: '体育', link: '/physical' },
-    { label: '文旅', link: '/cultural' },
-    { label: '教育', link: '/education' },
+    { label: '运动', link: '/sports' },
   ];
   ngAfterViewInit() {
     // 在视图初始化之后动态生成导航按钮
@@ -149,7 +159,7 @@ export class Tab1Page implements OnInit {
       this.renderer.appendChild(button, text);
 
       this.renderer.addClass(button, 'nav-item');
-      this.renderer.listen(button, 'click', () => this.navigateTo(item.link));
+      this.renderer.listen(button, 'click', () => this.getneeds(item.link));
 
       this.renderer.appendChild(navContainer, button);
     }
@@ -163,37 +173,13 @@ export class Tab1Page implements OnInit {
     this.router.navigate([`${path}`]);
   }
 
-  goodbody() {
-    let allChange = document.querySelector('#allChange');
-    if (allChange) {
-      allChange.setAttribute('color', 'success');
-    }
-    this.goodday++;
-    this.duringday++;
-    this.sexChecked = true;
-  }
-  badbody() {
-    let allChange = document.querySelector('#allChange');
-    if (allChange) {
-      allChange.setAttribute('color', 'danger');
-    }
-    this.badday++;
-    this.duringday = 0;
-    this.sexChecked = true;
-  }
-  changeTodolist(ev: any) {
-    this.todolist = ev;
-  }
-  deleteThisTodolist(todo: string) {
-    let idx = this.todolist.findIndex((item) => item === todo);
-    this.todolist.splice(idx, 1);
-  }
-
   // 首页新闻
-  newslists: any[] = [];
+  newslists: Article[] = [];
   is_loading: boolean = true;
 
+  // 获取所有文章
   async getAllNews() {
+    this.newslists = [];
     let className = 'News';
     let newsQuery = new CloudQuery(className);
     let newslist = await newsQuery.getAll();
@@ -207,9 +193,52 @@ export class Tab1Page implements OnInit {
         '</p>';
       return news;
     });
+    this.needlists = this.newslists;
     this.is_loading = false;
   }
 
+  needlists: Article[] = [];
+  getneeds(userinput: string): any {
+    // 清空 needlists，防止重复数据
+    this.needlists = [];
+
+    if (!userinput.trim()) {
+      return;
+    }
+    if (userinput === '/home') {
+      this.getAllNews();
+    }
+    if (userinput === '/health') {
+      userinput = '健康';
+    }
+    if (userinput === '/wellness') {
+      userinput = '养生';
+    }
+    if (userinput === '/chineseMedicine') {
+      userinput = '中医药';
+    }
+    if (userinput === '/food') {
+      userinput = '食品';
+    }
+    if (userinput === '/science') {
+      userinput = '科普';
+    }
+    if (userinput === '/sports') {
+      userinput = '运动';
+    }
+    this.newslists.forEach((item) => {
+      const themeMatch = item.theme
+        .toLowerCase()
+        .includes(userinput.toLowerCase());
+      if (themeMatch) {
+        this.needlists.push(item);
+      }
+    });
+
+    console.log(userinput + ' 匹配的文章：', this.needlists);
+    return this.needlists;
+  }
+
   // test
   test() {
     let newsData = {
@@ -222,4 +251,30 @@ export class Tab1Page implements OnInit {
     let news = new CloudNews();
     let res = news.add(newsData);
   }
+
+  goodbody() {
+    let allChange = document.querySelector('#allChange');
+    if (allChange) {
+      allChange.setAttribute('color', 'success');
+    }
+    this.goodday++;
+    this.duringday++;
+    this.sexChecked = true;
+  }
+  badbody() {
+    let allChange = document.querySelector('#allChange');
+    if (allChange) {
+      allChange.setAttribute('color', 'danger');
+    }
+    this.badday++;
+    this.duringday = 0;
+    this.sexChecked = true;
+  }
+  changeTodolist(ev: any) {
+    this.todolist = ev;
+  }
+  deleteThisTodolist(todo: string) {
+    let idx = this.todolist.findIndex((item) => item === todo);
+    this.todolist.splice(idx, 1);
+  }
 }

TFPower-app/src/app/tab4/tab4.page.html

@@ -47,6 +47,7 @@
     </ion-grid>
   </ion-card>
 
+
   @if(is_login) {
   <ion-card>
     <ion-list>