diff --git a/src/web/src/app/app.component.ts b/src/web/src/app/app.component.ts
index f45defc8..65ca31e9 100644
--- a/src/web/src/app/app.component.ts
+++ b/src/web/src/app/app.component.ts
@@ -39,10 +39,7 @@ export class AppComponent implements OnInit {
   }
 
   switchTheme() {
-    console.log('test');
-    this.themeService.getTheme().subscribe(console.log);
     this.themeService.getTheme().subscribe(theme => {
-      console.log('getTheme', theme);
       document.body.className = theme;
     });
   }
diff --git a/src/web/src/app/modules/my-apps/components/local-app/local-app.component.html b/src/web/src/app/modules/my-apps/components/local-app/local-app.component.html
index 3b3abe48..7cf22d04 100644
--- a/src/web/src/app/modules/my-apps/components/local-app/local-app.component.html
+++ b/src/web/src/app/modules/my-apps/components/local-app/local-app.component.html
@@ -3,7 +3,11 @@
   <button routerLink="../local" routerLinkActive="active">
     <ng-container i18n>Local App</ng-container>
   </button>
-  <button routerLink="../remote" routerLinkActive="active">
+  <button
+    *ngIf="(logged | async)"
+    routerLink="../remote"
+    routerLinkActive="active"
+  >
     <ng-container i18n>Remote App</ng-container>
   </button>
 </dstore-center-title>
@@ -16,9 +20,7 @@
   dstoreResize
   (resize)="listHeight$.next($event.height)"
 >
-  <ng-container
-    *ngIf="(apps$ | async) as installedList; else: loadingContainer"
-  >
+  <ng-container *ngIf="(apps$ | async) as installedList; else loadingContainer">
     <ng-container *ngFor="let installed of installedList">
       <div class="installed-app">
         <img
@@ -41,7 +43,7 @@
                 >
               </div>
             </ng-template>
-            <ng-container *ngIf="select != installed.name; else: confirm">
+            <ng-container *ngIf="select != installed.name; else confirm">
               <div class="time">
                 <span i18n>Date installed:</span>
                 {{
@@ -63,7 +65,7 @@
                 <ng-container i18n>Confirm</ng-container>
               </button>
             </ng-template>
-            <ng-container *ngIf="select != installed.name; else: confirmBtn">
+            <ng-container *ngIf="select != installed.name; else confirmBtn">
               <ng-template #uninstall>
                 <button (click)="select = installed.name">
                   <ng-container i18n>Uninstall</ng-container>
@@ -73,7 +75,7 @@
                 *ngIf="
                   removingList.includes(installed.name) ||
                     removing.includes(installed.name);
-                  else: uninstall
+                  else uninstall
                 "
                 disabled
               >
diff --git a/src/web/src/app/modules/my-apps/components/local-app/local-app.component.ts b/src/web/src/app/modules/my-apps/components/local-app/local-app.component.ts
index 48d69309..d60a9baa 100644
--- a/src/web/src/app/modules/my-apps/components/local-app/local-app.component.ts
+++ b/src/web/src/app/modules/my-apps/components/local-app/local-app.component.ts
@@ -1,10 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { combineLatest, BehaviorSubject } from 'rxjs';
-import { map, tap, share, shareReplay, distinctUntilChanged, debounceTime } from 'rxjs/operators';
+import {
+  map,
+  tap,
+  share,
+  shareReplay,
+  distinctUntilChanged,
+  debounceTime,
+} from 'rxjs/operators';
 
 import { LocalAppService } from '../../services/local-app.service';
 import { App } from 'app/services/app.service';
+import { AuthService } from 'app/services/auth.service';
 
 @Component({
   selector: 'dstore-local-app',
@@ -16,8 +24,9 @@ export class LocalAppComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private localAppService: LocalAppService,
+    private authService: AuthService,
   ) {}
-
+  logged = this.authService.logged$;
   removing: string[] = [];
   select: string;
   listHeight$ = new BehaviorSubject<number>(0);
@@ -26,7 +35,9 @@ export class LocalAppComponent implements OnInit {
     map(height => Math.floor(height / 64)),
     distinctUntilChanged(),
   );
-  pageIndex$ = this.route.queryParamMap.pipe(map(query => Number(query.get('page') || 1) - 1));
+  pageIndex$ = this.route.queryParamMap.pipe(
+    map(query => Number(query.get('page') || 1) - 1),
+  );
   localApps$ = this.localAppService.LocalAppList().pipe(share());
   apps$ = combineLatest(this.localApps$, this.pageSize$, this.pageIndex$).pipe(
     map(([apps, size, index]) => {
diff --git a/src/web/src/app/modules/my-apps/services/auto-install.service.ts b/src/web/src/app/modules/my-apps/services/auto-install.service.ts
index 5108ba13..20ceb62e 100644
--- a/src/web/src/app/modules/my-apps/services/auto-install.service.ts
+++ b/src/web/src/app/modules/my-apps/services/auto-install.service.ts
@@ -10,8 +10,6 @@ export class AutoInstallService {
     return Channel.exec('settings.setAutoInstall', auto);
   }
   getAutoInstall() {
-    return Channel.exec('settings.getAutoInstall').then(auto =>
-      this.zone.run(() => auto),
-    );
+    return Channel.exec('settings.getAutoInstall');
   }
 }
diff --git a/src/web/src/app/modules/my-donates/donates.service.ts b/src/web/src/app/modules/my-donates/donates.service.ts
index 75840641..a866ad6f 100644
--- a/src/web/src/app/modules/my-donates/donates.service.ts
+++ b/src/web/src/app/modules/my-donates/donates.service.ts
@@ -9,7 +9,7 @@ import { environment } from 'environments/environment';
   providedIn: 'root',
 })
 export class DonatesService {
-  apiURL = environment.operationServer + '/api/user/my/donate';
+  apiURL = environment.metadataServer + '/api/donation/user';
   constructor(private http: HttpClient, private appService: AppService) {}
   donateList(page: number, count: number) {
     return this.http
@@ -19,7 +19,6 @@ export class DonatesService {
       .pipe(
         switchMap(
           result => {
-            console.log('switchMap');
             const names = result.donations.map(d => d.appName);
             return this.appService.getApps(names, false, false);
           },
diff --git a/src/web/src/app/modules/my-donates/donates/donates.component.ts b/src/web/src/app/modules/my-donates/donates/donates.component.ts
index 6b9fc971..5d548257 100644
--- a/src/web/src/app/modules/my-donates/donates/donates.component.ts
+++ b/src/web/src/app/modules/my-donates/donates/donates.component.ts
@@ -1,5 +1,11 @@
 import { Payment } from './../../details/services/donate.model';
-import { distinctUntilChanged, map, switchMap, share, tap } from 'rxjs/operators';
+import {
+  distinctUntilChanged,
+  map,
+  switchMap,
+  share,
+  tap,
+} from 'rxjs/operators';
 import { BehaviorSubject, combineLatest } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DonatesService } from './../donates.service';
@@ -22,11 +28,13 @@ export class DonatesComponent implements OnInit {
   listHeight$ = new BehaviorSubject<number>(0);
   // 根据列表高度计算列表行数
   pageSize$ = this.listHeight$.pipe(
-    map(height => Math.floor(height / 160)),
+    map(height => Math.floor(height / 60)),
     distinctUntilChanged(),
   );
   // 监听当前页
-  pageIndex$ = this.route.queryParamMap.pipe(map(query => Number(query.get('page') || 1) - 1));
+  pageIndex$ = this.route.queryParamMap.pipe(
+    map(query => Number(query.get('page') || 1) - 1),
+  );
   // 根据列表行数和页数的变动,拉取列表数据
   result$ = combineLatest(this.pageIndex$, this.pageSize$).pipe(
     switchMap(([pageIndex, pageSize]) => {
@@ -41,9 +49,7 @@ export class DonatesComponent implements OnInit {
   donates$ = this.result$.pipe(map(result => result.donations));
   length$ = this.result$.pipe(map(result => result.totalCount));
 
-  ngOnInit() {
-    this.result$.subscribe(console.log);
-  }
+  ngOnInit() {}
   gotoPage(pageIndex: number) {
     this.router.navigate([], { queryParams: { page: pageIndex + 1 } });
   }
diff --git a/src/web/src/app/modules/share/components/app-title/app-title.component.html b/src/web/src/app/modules/share/components/app-title/app-title.component.html
index 9ee7c431..cf37ed61 100644
--- a/src/web/src/app/modules/share/components/app-title/app-title.component.html
+++ b/src/web/src/app/modules/share/components/app-title/app-title.component.html
@@ -1,37 +1,30 @@
 <div class="titleGroup">
   <div class="title">
     <ng-content></ng-content>
-    <span class="number"
-          *ngIf="count"
-          i18n>{{count}} applications</span>
-    <span class="number"
-          *ngIf="top"
-          i18n>Top {{top}}</span>
+    <span class="number" *ngIf="count" i18n>{{ count }} applications</span>
+    <span class="number" *ngIf="top" i18n>Top {{ top }}</span>
   </div>
-  <div class="dropdown"
-       tabIndex="-1"
-       (click)="dropMenu.hidden=!dropMenu.hidden;dorpBtn.focus()"
-       [hidden]="sortHidden"
-       (blur)="dropMenu.hidden=true"
-       #dorpBtn>
-
-    <ng-container *ngIf="sortBy===SortOrder.Downloads"
-                  i18n>Downloads</ng-container>
-    <ng-container *ngIf="sortBy===SortOrder.Score"
-                  i18n>Rating</ng-container>
+  <div
+    class="dropdown"
+    tabIndex="-1"
+    (click)="dropMenu.hidden = !dropMenu.hidden; dorpBtn.focus()"
+    [hidden]="sortHidden"
+    (blur)="dropMenu.hidden = true"
+    #dorpBtn
+  >
+    <ng-container *ngIf="sortBy === SortOrder.Downloads" i18n
+      >Downloads</ng-container
+    >
+    <ng-container *ngIf="sortBy === SortOrder.Score" i18n>Rating</ng-container>
   </div>
-  <ul class="dropdown-menu"
-      hidden
-      #dropMenu>
+  <ul class="dropdown-menu" hidden #dropMenu>
     <li (mousedown)="change(SortOrder.Downloads)">
-      <div class="select"
-           [class.ok]="sortBy===SortOrder.Downloads"></div>
+      <div class="select" [class.ok]="sortBy === SortOrder.Downloads"></div>
       <ng-container i18n>Downloads</ng-container>
     </li>
     <li (mousedown)="change(SortOrder.Score)">
-      <div class="select"
-           [class.ok]="sortBy===SortOrder.Score"></div>
+      <div class="select" [class.ok]="sortBy === SortOrder.Score"></div>
       <ng-container i18n>Rating</ng-container>
     </li>
   </ul>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/web/src/app/services/auth.service.ts b/src/web/src/app/services/auth.service.ts
index 10dfdd28..84b3596c 100644
--- a/src/web/src/app/services/auth.service.ts
+++ b/src/web/src/app/services/auth.service.ts
@@ -11,15 +11,11 @@ import { Channel } from 'app/modules/client/utils/channel';
 export class AuthService {
   constructor(private zone: NgZone) {
     Channel.exec<UserInfo>('account.getUserInfo').then(info => {
-      this.zone.run(() => {
-        this.userInfo$.next(info);
-      });
+      this.userInfo$.next(info);
     });
     Channel.connect<UserInfo>('account.userInfoChanged').subscribe(info => {
       console.log('userinfo', info);
-      this.zone.run(() => {
-        this.userInfo$.next(info);
-      });
+      this.userInfo$.next(info);
     });
   }
   private userInfo$ = new BehaviorSubject<UserInfo>(null);
@@ -34,11 +30,7 @@ export class AuthService {
   logged$ = this.info$.pipe(map(info => info && info.IsLoggedIn));
   // get token
   getToken() {
-    return Channel.exec<string>('account.getToken').then(token => {
-      return this.zone.run(() => {
-        return token;
-      });
-    });
+    return Channel.exec<string>('account.getToken');
   }
   // 登录方法
   login() {
diff --git a/src/web/src/app/services/job.service.ts b/src/web/src/app/services/job.service.ts
index 649c1536..63c2fa39 100644
--- a/src/web/src/app/services/job.service.ts
+++ b/src/web/src/app/services/job.service.ts
@@ -24,39 +24,40 @@ export class JobService {
     this.StoreServer.jobListChange().subscribe(list => this.update(list));
   }
   private update(list: string[]) {
-    this.zone.run(() => {
-      this.jobList$.next(list);
-      if (this.interval) {
-        this.interval.unsubscribe();
-      }
-      const defer = Array.from(this.cache.values())
-        .filter(job => !list.includes(job.job))
-        .map(job => job.id);
-      if (defer.length > 0) {
-        setTimeout(() => {
-          defer.forEach(id => this.cache.delete(id));
-          this.jobInfoList$.next(Array.from(this.cache.values()));
-        }, 500);
-      }
-      if (list.length > 0) {
-        this.interval = timer(0, 1000)
-          .pipe(switchMap(() => this.StoreServer.getJobsInfo(list)))
-          .subscribe(infoList => {
-            infoList = infoList.filter(job => {
-              if (job.type === StoreJobType.uninstall && job.status === StoreJobStatus.failed) {
-                return false;
-              }
-              return true;
-            });
-            infoList.forEach(job => {
-              this.cache.set(job.id, job);
-            });
-            this.jobInfoList$.next(Array.from(this.cache.values()));
-          });
-      } else {
+    this.jobList$.next(list);
+    if (this.interval) {
+      this.interval.unsubscribe();
+    }
+    const defer = Array.from(this.cache.values())
+      .filter(job => !list.includes(job.job))
+      .map(job => job.id);
+    if (defer.length > 0) {
+      setTimeout(() => {
+        defer.forEach(id => this.cache.delete(id));
         this.jobInfoList$.next(Array.from(this.cache.values()));
-      }
-    });
+      }, 500);
+    }
+    if (list.length > 0) {
+      this.interval = timer(0, 1000)
+        .pipe(switchMap(() => this.StoreServer.getJobsInfo(list)))
+        .subscribe(infoList => {
+          infoList = infoList.filter(job => {
+            if (
+              job.type === StoreJobType.uninstall &&
+              job.status === StoreJobStatus.failed
+            ) {
+              return false;
+            }
+            return true;
+          });
+          infoList.forEach(job => {
+            this.cache.set(job.id, job);
+          });
+          this.jobInfoList$.next(Array.from(this.cache.values()));
+        });
+    } else {
+      this.jobInfoList$.next(Array.from(this.cache.values()));
+    }
   }
   jobList(): Observable<string[]> {
     return this.jobList$.asObservable();
diff --git a/src/web/src/app/services/menu.service.ts b/src/web/src/app/services/menu.service.ts
index 0fda9721..853067f2 100644
--- a/src/web/src/app/services/menu.service.ts
+++ b/src/web/src/app/services/menu.service.ts
@@ -18,9 +18,9 @@ export class MenuService {
     // menu user info
     this.auth.info$.subscribe(async userInfo => {
       if (!userInfo) {
+        Channel.exec('menu.setUserInfo', {});
         return;
       }
-      console.log('setUserInfo');
       const dInfo = await this.dService.getDeepinUserInfo(userInfo.UserID);
       const avatar = await fetch(dInfo.profile_image).then(resp => resp.blob());
       const data = await new Promise<string>((resolve, reject) => {
@@ -43,9 +43,7 @@ export class MenuService {
 
   connectToRouter(signal: string, url: string) {
     Channel.connect(signal).subscribe(() => {
-      this.zone.run(() => {
-        this.router.navigateByUrl(url);
-      });
+      this.router.navigateByUrl(url);
     });
   }
 }
diff --git a/src/web/src/app/services/notify.service.ts b/src/web/src/app/services/notify.service.ts
index fa050fd1..5a99c7e3 100644
--- a/src/web/src/app/services/notify.service.ts
+++ b/src/web/src/app/services/notify.service.ts
@@ -15,19 +15,20 @@ export class NotifyService {
     this.getBulletin();
     if (BaseService.isNative) {
       DstoreObject.clearArchives().subscribe(() => {
-        this.zone.run(() => {
-          this.success(NotifyType.Clear);
-        });
+        this.success(NotifyType.Clear);
       });
     }
   }
 
   private getBulletin() {
     this.http
-      .get(BaseService.serverHosts.operationServer + '/api/bulletin', { responseType: 'text' })
+      .get(BaseService.serverHosts.operationServer + '/api/bulletin', {
+        responseType: 'text',
+      })
       .subscribe(body => {
-        const { bulletin }: { bulletin: Bulletin } = JSON.parse(body, (k: string, v) =>
-          k.includes('Time') ? new Date(v) : v,
+        const { bulletin }: { bulletin: Bulletin } = JSON.parse(
+          body,
+          (k: string, v) => (k.includes('Time') ? new Date(v) : v),
         );
         const t = new Date();
         if (bulletin.startTime <= t && bulletin.endTime > t) {
diff --git a/src/web/src/app/services/recommend.service.ts b/src/web/src/app/services/recommend.service.ts
index 59a6e7fa..8d705414 100644
--- a/src/web/src/app/services/recommend.service.ts
+++ b/src/web/src/app/services/recommend.service.ts
@@ -12,9 +12,7 @@ import { BaseService } from '../dstore/services/base.service';
 export class RecommendService {
   constructor(private zone: NgZone, private http: HttpClient) {
     Channel.connect<void>('menu.recommendAppRequested').subscribe(() => {
-      zone.run(() => {
-        this.openRecommend();
-      });
+      this.openRecommend();
     });
   }
 
diff --git a/src/web/src/app/services/search.service.ts b/src/web/src/app/services/search.service.ts
index 7b9e4cc3..1f0602f0 100644
--- a/src/web/src/app/services/search.service.ts
+++ b/src/web/src/app/services/search.service.ts
@@ -10,23 +10,14 @@ export class SearchService {
   constructor(private zone: NgZone) {}
 
   onOpenApp(): Observable<string> {
-    return new Observable(obs => {
-      Channel.connect<string>('search.openApp').subscribe(app =>
-        this.zone.run(() => {
-          obs.next(app);
-        }),
-      );
-    });
+    return Channel.connect<string>('search.openApp');
   }
 
   onOpenAppList(): Observable<SearchResult> {
     return new Observable(obs => {
       Channel.connect<[string, string[]]>('search.openAppList').subscribe(
         ([keyword, appNameList]) => {
-          console.log(keyword, appNameList);
-          this.zone.run(() => {
-            obs.next({ keyword, appNameList });
-          });
+          obs.next({ keyword, appNameList });
         },
       );
     });
diff --git a/src/web/src/main.ts b/src/web/src/main.ts
index bced788b..d7ab0282 100644
--- a/src/web/src/main.ts
+++ b/src/web/src/main.ts
@@ -4,19 +4,20 @@ import {
   TRANSLATIONS_FORMAT,
   MissingTranslationStrategy,
   CompilerOptions,
+  NgZone,
 } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
-
 // use the require method provided by webpack
 declare const require;
-
+//  qt web channel run ng zone
+let zone: NgZone = null;
 async function main() {
   let opts: CompilerOptions;
   // Native client mode.
@@ -35,6 +36,12 @@ async function main() {
         onmessage(msg) {},
       };
       channelTransport.objects.channelProxy.message.connect(msg => {
+        if (zone) {
+          zone.run(() => {
+            t.onmessage({ data: msg });
+          });
+          return;
+        }
         t.onmessage({ data: msg });
       });
       return new QWebChannel(t, resolve);
@@ -73,7 +80,7 @@ async function main() {
       }
     }
   }
-  return await bootstrap(opts);
+  return bootstrap(opts);
 }
 function bootstrap(opts = null) {
   return platformBrowserDynamic().bootstrapModule(AppModule, opts);
@@ -81,7 +88,10 @@ function bootstrap(opts = null) {
 main()
   .catch(err => {
     console.error('load locale fail', err);
-    bootstrap();
+    return bootstrap();
+  })
+  .then(app => {
+    zone = app.injector.get(NgZone);
   })
   .finally(() => {
     console.log('bootstrap');