• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2021-2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { backBar } from "../common/components/backBar";
17import { alphabetIndexerComponent } from "../common/components/alphabeticalIndex";
18import { textInput } from "../common/components/search";
19import router from '@ohos.router';
20import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';
21import audio from '@ohos.multimedia.audio'
22import camera from '@ohos.multimedia.camera'
23import display from '@ohos.display';
24import common from '@ohos.app.ability.common';
25import { groups, userGrantPermissions, globalGroup, permissionGroups, showSubpermissionsGrop } from "../common/model/permissionGroup";
26import { indexValue, getPermissionGroupByName, getGroupIdByPermission, addLocalTag, sortByName } from "../common/utils/utils";
27import { appInfo, permissionApplications, groupPermission, GroupInfo } from "../common/utils/typedef";
28import { GlobalContext } from "../common/utils/globalContext";
29import Constants from '../common/utils/constant';
30import bundleManager from '@ohos.bundle.bundleManager';
31
32const TAG = 'PermissionManager_MainAbility:';
33const FUZZY_LOCATION_PERMISSION = 'ohos.permission.APPROXIMATELY_LOCATION';
34const PRECISE_LOCATION_PERMISSION = 'ohos.permission.LOCATION';
35let storage = LocalStorage.getShared();
36
37@Extend(Image) function customizeImage(width: number, height: number) {
38  .objectFit(ImageFit.Contain)
39  .width(width)
40  .height(height)
41};
42
43@Entry(storage)
44@Component
45struct authorityManagementPage {
46  @Builder ListItemLayout(item: groupPermission) {
47    ListItem() {
48      Row() {
49        Column() {
50          Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
51            Row() {
52              Image(item.icon)
53                .fillColor($r('sys.color.ohos_id_color_secondary'))
54                .customizeImage(Constants.MANAGEMENT_IMAGE_WIDTH, Constants.MANAGEMENT_IMAGE_HEIGHT)
55                .margin({ right: Constants.MANAGEMENT_IMAGE_MARGIN_RIGHT })
56              Text(item.groupName)
57                .fontSize(Constants.TEXT_MIDDLE_FONT_SIZE)
58                .fontWeight(FontWeight.Medium)
59                .fontColor($r('sys.color.ohos_id_color_text_primary'))
60                .flexGrow(Constants.FLEX_GROW)
61              Image($r('app.media.ic_public_arrow_right'))
62                .fillColor($r('sys.color.ohos_id_color_tertiary'))
63                .customizeImage(Constants.IMAGE_WIDTH, Constants.IMAGE_HEIGHT)
64            }
65            .width(Constants.FULL_WIDTH)
66            .height(Constants.MANAGEMENT_ROW_HEIGHT)
67          }
68        }.onClick(() => {
69          if (item.group === 'OTHER' || showSubpermissionsGrop.indexOf(item.group) !== -1) {
70            router.pushUrl({
71              url: 'pages/authority-secondary',
72              params: { list: this.allPermissionApplications, backTitle: item.groupName, group: item.group }
73            })
74          } else {
75            let dataList = this.allPermissionApplications.filter((ele) => {
76              return ele.groupName === item.group;
77            })
78
79            GlobalContext.store('currentPermissionGroup', item.group);
80            if (globalGroup.indexOf(item.group) == -1) {
81              router.pushUrl({
82                url: 'pages/authority-tertiary-groups',
83                params: { list: dataList, backTitle: item.groupName  }
84              })
85            } else {
86              if (item.group == 'MICROPHONE') {
87                let audioManager = audio.getAudioManager();
88                let audioVolumeManager = audioManager.getVolumeManager();
89                let groupid = audio.DEFAULT_VOLUME_GROUP_ID;
90                audioVolumeManager.getVolumeGroupManager(groupid).then(audioVolumeGroupManager => {
91                  audioVolumeGroupManager.isMicrophoneMute().then(value => {
92                    GlobalContext.store('isMuteSupported', true);
93                    router.pushUrl({
94                      url: 'pages/authority-tertiary-groups',
95                      params: { list: dataList, backTitle: item.groupName, globalIsOn: !value }
96                    })
97                  })
98                })
99              } else {
100                let cameraManager = camera.getCameraManager(GlobalContext.load('context'));
101                let mute = cameraManager.isCameraMuted();
102                GlobalContext.store('isMuteSupported', cameraManager.isCameraMuteSupported());
103                router.pushUrl({
104                  url: 'pages/authority-tertiary-groups',
105                  params: { list: dataList, backTitle: item.groupName, globalIsOn: !mute }
106                })
107              }
108            }
109          }
110        })
111      }
112    }.padding({ left: $r('sys.float.ohos_id_card_margin_start'), right: $r('sys.float.ohos_id_card_margin_end') })
113    .borderRadius($r("sys.float.ohos_id_corner_radius_default_l"))
114    .linearGradient((this.isTouch === item.group) ? {
115        angle: 90,
116        direction: GradientDirection.Right,
117        colors: [['#DCEAF9', 0.0], ['#FAFAFA', 1.0]]
118      } : {
119        angle: 90,
120        direction: GradientDirection.Right,
121        colors: [[$r("sys.color.ohos_id_color_list_card_bg"), 1], [$r("sys.color.ohos_id_color_list_card_bg"), 1]]
122      })
123    .onTouch(event => {
124      if (event === undefined) {
125        return;
126      }
127      if (event.type === TouchType.Down) {
128        this.isTouch = item.group;
129      }
130      if (event.type === TouchType.Up) {
131        this.isTouch = '';
132      }
133    })
134  }
135
136  private context = getContext(this) as common.UIAbilityContext;
137  @LocalStorageLink('initialGroups') initialGroups: bundleManager.BundleInfo[] = [];
138  @State allPermissionApplications: permissionApplications [] = []; // All app permissions
139  @State allGroupPermission: groupPermission[] = []; // All group permissions
140  @State allUserPermissions: Permissions[] = [];
141  @State allBundleInfo: appInfo[] = [];
142  @State allGroups: string[] = [];
143  @State currentIndex: number = 0;
144  @State isTouch: string = '';
145  @State isVertical: boolean = true;
146  @Builder TabBuilder(index: number) {
147    Flex({ alignItems: index ? ItemAlign.Start : ItemAlign.End, justifyContent: FlexAlign.Center, direction: FlexDirection.Column }) {
148      Text(index ? $r('app.string.application') : $r('app.string.permission'))
149        .fontSize(Constants.TEXT_MIDDLE_FONT_SIZE)
150        .fontColor(this.currentIndex == index ? $r('sys.color.ohos_id_color_subtab_text_on') : $r('sys.color.ohos_id_color_secondary'))
151        .fontWeight(this.currentIndex == index ? FontWeight.Bold : FontWeight.Regular)
152        .lineHeight(Constants.TEXT_LINE_HEIGHT)
153        .baselineOffset(Constants.TAB_DECORATION_POSITION_Y)
154      if (this.currentIndex == index) {
155        Text(index ? $r('app.string.application') : $r('app.string.permission'))
156          .fontSize(Constants.TEXT_MIDDLE_FONT_SIZE)
157          .fontWeight(FontWeight.Bold)
158          .lineHeight(Constants.TAB_LINE_HEIGHT)
159          .height(Constants.TAB_DECORATION_HEIGHT)
160          .fontColor($r('sys.color.ohos_id_color_subtab_text_on'))
161          .backgroundColor($r('sys.color.ohos_id_color_subtab_text_on'))
162      }
163    }.height(Constants.TAB_HEIGHT)
164    .width(Constants.FULL_WIDTH)
165    .padding({ left: this.isVertical ? Constants.TAB_INNER_PADDING : Constants.DEFAULT_PADDING_START,
166      right: this.isVertical ? Constants.TAB_INNER_PADDING : Constants.DEFAULT_PADDING_END })
167  }
168
169  /**
170   * Get all app permission information
171   */
172  async getAllBundlePermissions() {
173    for (let i = 0; i < this.initialGroups.length; i++) {
174      await this.deduplicationPermissions(this.initialGroups[i]);
175    }
176    this.getAllGroupPermission();
177    this.getAllPermissionApplications();
178    this.getLabelAndIcon();
179    GlobalContext.store('allBundleInfo', this.allBundleInfo);
180  }
181
182  /**
183   * Get the corresponding permission group id according to the permission
184   * @param {String} permission app name id
185   * @return {Number} groupId
186   */
187  getPermissionGroupByPermission(permission: string): GroupInfo {
188    for (let i = 0; i < permissionGroups.length; i++) {
189      if (permissionGroups[i].permissionName == permission) {
190        return groups[permissionGroups[i].groupId];
191      }
192    }
193    return groups[0];
194  }
195
196  /**
197   * Get all permission label
198   */
199  getLabelAndIcon() {
200    this.allBundleInfo.forEach((bundleInfo: appInfo) => {
201      this.updateAppLabel(bundleInfo);
202      this.updateAppIcon(bundleInfo);
203    })
204  }
205
206  /**
207   * Get all app permission information
208   */
209  getAllPermissionApplications() {
210    for (let i = 0; i < this.allUserPermissions.length; i++) {
211      let permission: Permissions = this.allUserPermissions[i];
212      let permissionGroup: GroupInfo = this.getPermissionGroupByPermission(permission);
213      let icon: ResourceStr = permissionGroup.icon;
214      let bundleNames: string[] = [];
215      for (let j = 0; j < this.allBundleInfo.length; j++) {
216        if (this.allBundleInfo[j].permissions.indexOf(permission) != -1) {
217          bundleNames.push(this.allBundleInfo[j].bundleName);
218        }
219      }
220      let pa: permissionApplications = new permissionApplications(permission, permissionGroup.name, bundleNames, icon);
221      this.allPermissionApplications.push(pa);
222    }
223  }
224
225  /**
226   * Get permission group information
227   */
228  getAllGroupPermission() {
229    groups.forEach((item) => {
230      if (item.isShow) {
231        this.allGroups.push(item.name);
232      }
233    })
234    this.allUserPermissions.forEach((userPermission: Permissions) => {
235      let groupId = getGroupIdByPermission(userPermission)
236      if (this.allGroups.indexOf(groups[groupId].name) == -1) {
237        this.allGroups.push(groups[groupId].name);
238      }
239    })
240    // Permission layout
241    for (let i = 0; i < this.allGroups.length; i++) {
242      let group = getPermissionGroupByName(this.allGroups[i]);
243      let gp: groupPermission = new groupPermission(this.allGroups[i], group.permissions, group.groupName, group.icon, group.isShow)
244      this.allGroupPermission.push(gp);
245    }
246  }
247
248  /**
249   * Deduplicate permission information and permission group information
250   * @param {Object} info bundleInfos Application Information
251   */
252  async deduplicationPermissions(info: bundleManager.BundleInfo) {
253    console.log(TAG + 'allBundleInfo start: ' + info.name);
254    let reqPermissions: Array<Permissions> = [];
255    info.reqPermissionDetails.forEach(item => {
256      reqPermissions.push(item.name as Permissions);
257    })
258    let reqPermissionsLen = reqPermissions.length;
259    let reqUserPermissions: Permissions[] = [];
260    let acManager = abilityAccessCtrl.createAtManager()
261    if (reqPermissionsLen > 0) {
262      for (let j = 0; j < reqPermissions.length; j++) {
263        let permission = reqPermissions[j];
264        console.log(TAG + 'getPermissionFlags: ' + permission + 'app: ' + info.name)
265        if ((info.targetVersion < Constants.API_VERSION_SUPPORT_STAGE) && (permission == FUZZY_LOCATION_PERMISSION)) {
266          continue;
267        }
268        if ((info.targetVersion >= Constants.API_VERSION_SUPPORT_STAGE) && (permission == PRECISE_LOCATION_PERMISSION) && !reqPermissions.includes(FUZZY_LOCATION_PERMISSION)) {
269          continue;
270        }
271        try {
272          let flag = await acManager.getPermissionFlags(info.appInfo.accessTokenId, permission);
273          console.log(TAG + 'getPermissionFlags: ' + permission + 'app: ' + info.name + 'flag: ' + flag);
274          if (flag == Constants.PERMISSION_SYSTEM_FIXED) {
275            continue;
276          }
277        }
278        catch(err) {
279          console.log(TAG + 'getPermissionFlags error: ' + JSON.stringify(err));
280        }
281        if (userGrantPermissions.indexOf(permission) != -1) {
282          reqUserPermissions.push(permission);
283          if (this.allUserPermissions.indexOf(permission) == -1) {
284            this.allUserPermissions.push(permission);
285          }
286        }
287      }
288    }
289    let groupIds: number[] = [];
290    for (let i = 0; i < reqUserPermissions.length; i++) {
291      let groupId = getGroupIdByPermission(reqUserPermissions[i])
292      if (groupIds.indexOf(groupId) == -1) {
293        groupIds.push(groupId);
294      }
295    }
296
297    let ap: appInfo = new appInfo(
298      info.name,
299      info.targetVersion,
300      info.appInfo.accessTokenId,
301      '',
302      info.appInfo.iconId,
303      info.appInfo.label,
304      info.appInfo.labelId,
305      reqUserPermissions,
306      groupIds,
307      '',
308      '',
309      ''
310    );
311    console.log(TAG + 'allBundleInfo.push: ' + info.name);
312    this.allBundleInfo.push(ap);
313  }
314
315  /**
316   * Get app name resource
317   * @param {Number} index index of all app permissions array
318   * @param {String} bundleName Package names
319   * @param {String} labelName Application Name
320   */
321  async updateAppLabel(info: appInfo) {
322    console.info(TAG + 'bundleName: ' + JSON.stringify(info.bundleName) + `labelId: ` + JSON.stringify(info.labelId));
323    let resourceManager = this.context.createBundleContext(info.bundleName).resourceManager;
324
325    try {
326      info.label = await resourceManager.getStringValue(info.labelId);
327    } catch (error) {
328      console.error(TAG + "getStringValue promise error is " + error);
329    }
330    addLocalTag(info);
331  }
332
333  /**
334   * Get app icon resources
335   * @param {Number} index index of all app permissions array
336   * @param {String} bundleName Package names
337   */
338  async updateAppIcon(info: appInfo) {
339    console.info(TAG + 'bundleName: ' + JSON.stringify(info.bundleName) + `iconId: ` + JSON.stringify(info.iconId));
340    let resourceManager = this.context.createBundleContext(info.bundleName).resourceManager;
341
342    try {
343      let iconDescriptor = resourceManager.getDrawableDescriptor(info.iconId);
344      info.icon = iconDescriptor?.getPixelMap();
345    } catch (error) {
346      console.error(`getDrawableDescriptor failed, error code: ${error.code}, message: ${error.message}.`);
347    }
348
349    let icon = info.icon;
350    if (!icon) {
351      info.icon = await resourceManager.getMediaContentBase64(info.iconId);
352    }
353    let icon1 = info.icon;
354    if (!icon1) {
355      info.icon = $r('app.media.icon');
356    }
357  }
358
359  /**
360   * Lifecycle function, executed when the page is initialized
361   */
362  aboutToAppear() {
363    console.log(TAG + 'on aboutToAppear, version 1.01');
364    this.getAllBundlePermissions();
365    let dis = display.getDefaultDisplaySync();
366    this.isVertical = dis.height > dis.width ? true : false;
367    GlobalContext.store('isVertical', dis.height > dis.width ? true : false);
368  }
369
370  getPermissionGroup(allGroup: groupPermission[], order: number): groupPermission[] {
371    let fixedName: string[] = ['LOCATION', 'CAMERA', 'MICROPHONE'];
372    let extraName: string[] = ['ADS'];
373    let fixedGroup: groupPermission[] = [];
374    let extraGroup: groupPermission[] = [];
375    let changeGroup: groupPermission[] = [];
376    let otherGroup: groupPermission[] = [];
377
378    allGroup.forEach(group => {
379      if (fixedName.indexOf(group.group) !== -1) {
380        fixedGroup.push(group);
381      } else if (extraName.includes(group.group)) {
382        extraGroup.push(group);
383      } else if (group.group == 'OTHER') {
384        otherGroup.push(group);
385      } else {
386        changeGroup.push(group);
387      }
388    })
389
390    if (order == Constants.FIXED_GROUP){
391      return fixedGroup;
392    } else if (order == Constants.CHANGE_GROUP) {
393      return changeGroup;
394    } else if (order == Constants.OTHER_GROUP) {
395      return otherGroup;
396    } else if (order == Constants.EXTRA_GROUP) {
397      return extraGroup;
398    }
399    return [];
400  }
401
402  build() {
403    GridRow({ gutter: Constants.GUTTER, columns: {
404      xs: Constants.XS_COLUMNS, sm: Constants.SM_COLUMNS, md: Constants.MD_COLUMNS, lg: Constants.LG_COLUMNS } }) {
405      GridCol({ span: { xs: Constants.XS_SPAN, sm: Constants.SM_SPAN, md: Constants.MD_SPAN, lg: Constants.LG_SPAN },
406        offset: { xs: Constants.XS_OFFSET, sm: Constants.SM_OFFSET, md: Constants.MD_OFFSET, lg: Constants.LG_OFFSET } }) {
407        Row() {
408          Column() {
409            Row() {
410              backBar( { title: JSON.stringify($r('app.string.permission_manager')), recordable: true })
411            }
412            Row() {
413              Column() {
414                Column() {
415                  Stack() {
416                    if(this.allGroupPermission.length) {
417                      Tabs() {
418                        TabContent() {
419                          Row() {
420                            Column() {
421                              Scroll() {
422                                Column() {
423                                  List() {
424                                    ListItem() {
425                                      List() {
426                                        ForEach(this.getPermissionGroup(this.allGroupPermission, Constants.FIXED_GROUP), (item: groupPermission) => {
427                                          this.ListItemLayout(item)
428                                        }, (item: groupPermission) => JSON.stringify(item))
429                                      }.backgroundColor($r('sys.color.ohos_id_color_list_card_bg'))
430                                      .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
431                                      .padding(Constants.LIST_PADDING_TOP)
432                                      .margin({ bottom: Constants.LIST_MARGIN_BOTTOM })
433                                      .divider({
434                                        strokeWidth: Constants.DIVIDER,
435                                        color: $r('sys.color.ohos_id_color_list_separator'),
436                                        startMargin: Constants.DIVIDER_MARGIN_RIGHT_PERMISSION,
437                                        endMargin: Constants.DEFAULT_MARGIN_END
438                                      })
439                                    }
440
441                                    ListItem() {
442                                      List() {
443                                        ForEach(this.getPermissionGroup(this.allGroupPermission, Constants.CHANGE_GROUP), (item: groupPermission) => {
444                                          this.ListItemLayout(item)
445                                        }, (item: groupPermission) => JSON.stringify(item))
446                                      }.backgroundColor($r('sys.color.ohos_id_color_list_card_bg'))
447                                      .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
448                                      .padding(Constants.LIST_PADDING_TOP)
449                                      .margin({ bottom: Constants.LIST_MARGIN_BOTTOM })
450                                      .divider({
451                                        strokeWidth: Constants.DIVIDER,
452                                        color: $r('sys.color.ohos_id_color_list_separator'),
453                                        startMargin: Constants.DIVIDER_MARGIN_RIGHT_PERMISSION,
454                                        endMargin: Constants.DEFAULT_MARGIN_END
455                                      })
456                                    }
457
458                                    if(this.getPermissionGroup(this.allGroupPermission, Constants.EXTRA_GROUP).length) {
459                                      ListItem() {
460                                        List() {
461                                          ForEach(this.getPermissionGroup(this.allGroupPermission, Constants.EXTRA_GROUP), (item: groupPermission) => {
462                                            this.ListItemLayout(item)
463                                          }, (item: groupPermission) => JSON.stringify(item))
464                                        }.backgroundColor($r('sys.color.ohos_id_color_list_card_bg'))
465                                        .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
466                                        .padding(Constants.LIST_PADDING_TOP)
467                                        .margin({ bottom: Constants.LIST_MARGIN_BOTTOM })
468                                        .divider({
469                                          strokeWidth: Constants.DIVIDER,
470                                          color: $r('sys.color.ohos_id_color_list_separator'),
471                                          startMargin: Constants.DIVIDER_MARGIN_RIGHT_PERMISSION,
472                                          endMargin: Constants.DEFAULT_MARGIN_END
473                                        })
474                                      }
475                                    }
476
477                                    ListItem() {
478                                      List() {
479                                        ForEach(this.getPermissionGroup(this.allGroupPermission, Constants.OTHER_GROUP), (item: groupPermission) => {
480                                          this.ListItemLayout(item)
481                                        }, (item: groupPermission) => JSON.stringify(item))
482                                      }.backgroundColor($r('sys.color.ohos_id_color_list_card_bg'))
483                                      .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
484                                      .padding(Constants.LIST_PADDING_TOP)
485                                      .divider({
486                                        strokeWidth: Constants.DIVIDER,
487                                        color: $r('sys.color.ohos_id_color_list_separator'),
488                                        startMargin: Constants.DIVIDER_MARGIN_RIGHT_PERMISSION,
489                                        endMargin: Constants.DEFAULT_MARGIN_END
490                                      })
491                                    }.margin({ bottom: Constants.AUTHORITY_ROW_MARGIN_BOTTOM })
492                                  }.height(Constants.FULL_HEIGHT)
493                                  .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
494                                  .clip(true)
495                                }.padding({
496                                  left: Constants.MANAGEMENT_ROW_PADDING_LEFT,
497                                  right: Constants.MANAGEMENT_ROW_PADDING_RIGHT,
498                                })
499                              }.scrollBar(BarState.Off)
500                              .margin({ top: Constants.MANAGEMENT_ROW_PADDING_TOP })
501                            }.width(Constants.FULL_WIDTH)
502                          }
503                        }.tabBar(this.TabBuilder(0))
504                        TabContent() {
505                          applicationItem()
506                        }.tabBar(this.TabBuilder(1))
507                      }
508                      .barMode(BarMode.Fixed)
509                      .onChange((index) => {
510                        this.currentIndex = index
511                      })
512                    } else {
513                      LoadingProgress().width(Constants.LOADING_WIDTH)
514                    }
515                  }.height(Constants.FULL_HEIGHT)
516                }
517              }
518            }
519            .layoutWeight(Constants.LAYOUT_WEIGHT)
520          }
521        }
522        .height(Constants.FULL_HEIGHT)
523        .width(Constants.FULL_WIDTH)
524        .backgroundColor($r("sys.color.ohos_id_color_sub_background"))
525      }
526    }.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
527  }
528}
529
530@Component
531struct applicationItem {
532  @State applicationItem: appInfo[] = GlobalContext.load('allBundleInfo'); // application info array
533  @State searchResult: boolean = true; // search results
534  @State selectedIndex: number = 0;
535  @State isTouch: string = '';
536  scroller: Scroller = new Scroller();
537
538  @Builder ListItemLayout(item: appInfo) {
539    ListItem() {
540      Row() {
541        Column() {
542          Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
543            Row() {
544              Image(item.icon)
545                .customizeImage(Constants.APPLICATION_IMAGE_WIDTH, Constants.APPLICATION_IMAGE_HEIGHT)
546                .margin({ right: Constants.APPLICATION_IMAGE_MARGIN_RIGHT })
547              Text(item.label)
548                .width(Constants.OFFSET)
549                .maxLines(Constants.MAXIMUM_HEADER_LINES)
550                .textOverflow({ overflow: TextOverflow.Ellipsis })
551                .fontSize(Constants.TEXT_MIDDLE_FONT_SIZE)
552                .fontWeight(FontWeight.Medium)
553                .fontColor($r('sys.color.ohos_id_color_text_primary'))
554                .flexGrow(Constants.FLEX_GROW)
555              Text(String(item.groupId.length))
556                .fontSize(Constants.TEXT_SMALL_FONT_SIZE)
557                .fontColor($r('sys.color.ohos_id_color_text_secondary'))
558              Text($r('app.string.right'))
559                .fontSize(Constants.TEXT_SMALL_FONT_SIZE)
560                .fontColor($r('sys.color.ohos_id_color_text_secondary'))
561                .margin({ right: Constants.APPLICATION_TEXT_MARGIN_RIGHT })
562              Image($r('app.media.ic_public_arrow_right'))
563                .fillColor($r('sys.color.ohos_id_color_tertiary'))
564                .customizeImage(Constants.IMAGE_WIDTH, Constants.IMAGE_HEIGHT)
565            }
566            .width(Constants.FULL_WIDTH)
567            .height(Constants.AUTHORITY_ROW_HEIGHT)
568            .constraintSize({ minHeight: Constants.AUTHORITY_CONSTRAINTSIZE_MINHEIGHT })
569          }
570        }.onClick(() => {
571          GlobalContext.store('applicationInfo', item);
572          router.pushUrl({ url: 'pages/application-secondary' });
573        })
574      }
575    }.padding({ left: $r('sys.float.ohos_id_card_margin_start'), right: $r('sys.float.ohos_id_card_margin_end') })
576    .borderRadius($r("sys.float.ohos_id_corner_radius_default_l"))
577    .linearGradient((this.isTouch === item.bundleName) ? {
578         angle: 90,
579         direction: GradientDirection.Right,
580         colors: [['#DCEAF9', 0.0], ['#FAFAFA', 1.0]]
581       } : {
582         angle: 90,
583         direction: GradientDirection.Right,
584         colors: [[$r("sys.color.ohos_id_color_list_card_bg"), 1], [$r("sys.color.ohos_id_color_list_card_bg"), 1]]
585       })
586    .onTouch(event => {
587      if (event === undefined) {
588        return;
589      }
590      if (event.type === TouchType.Down) {
591        this.isTouch = item.bundleName;
592      }
593      if (event.type === TouchType.Up) {
594        this.isTouch = '';
595      }
596    })
597  }
598
599  build() {
600    Column() {
601      Row() {
602        textInput({
603          applicationItem: $applicationItem,
604          searchResult: $searchResult
605        })
606      }.padding({
607        left: Constants.APPLICATION_TEXTINPUT_PADDING_LEFT,
608        top: Constants.APPLICATION_TEXTINPUT_PADDING_TOP,
609        right: Constants.APPLICATION_TEXTINPUT_PADDING_RIGHT
610      })
611      Row() {
612        Flex({ alignItems: ItemAlign.Start }) {
613          Column() {
614            Column() {
615              if (!this.applicationItem.length) {
616                Row() {
617                  Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
618                    Image($r('app.media.searchnoresult'))
619                      .customizeImage(Constants.SEARCHNORESULT_IMAGE_WIDTH, Constants.SEARCHNORESULT_IMAGE_HEIGHT)
620                  }
621                }.margin({ top: Constants.MANAGEMENT_ROW_MARGIN_TOP })
622                .padding({ left: Constants.MANAGEMENT_ROW_PADDING_LEFT })
623              } else {
624                Row() {
625                  List({ scroller: this.scroller }) {
626                    ForEach(sortByName(this.applicationItem), (item: appInfo) => {
627                      this.ListItemLayout(item)
628                    }, (item: appInfo) => JSON.stringify(item))
629                  }.backgroundColor($r('sys.color.ohos_id_color_list_card_bg'))
630                  .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
631                  .padding(Constants.LIST_PADDING_TOP)
632                  .divider({
633                    strokeWidth: Constants.DIVIDER,
634                    color: $r('sys.color.ohos_id_color_list_separator'),
635                    startMargin: Constants.DIVIDER_MARGIN_RIGHT_APPLICATION,
636                    endMargin: Constants.DEFAULT_MARGIN_END
637                  })
638                  .onScrollIndex((start, end) => {
639                    GlobalContext.getContext().set('scroller', this.scroller);
640                    if (this.applicationItem.length > 0) {
641                      let alphabeticalIndex = sortByName(this.applicationItem)[start].indexTag;
642                      let index = indexValue.indexOf(alphabeticalIndex);
643                      this.selectedIndex = index >= 0 ? index : 0;
644                    }
645                  })
646                }.margin({ left: Constants.MANAGEMENT_ROW_PADDING_LEFT })
647                .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
648                .clip(true)
649              }
650            }.height(Constants.FULL_HEIGHT)
651          }.margin({ top: Constants.MANAGEMENT_ROW_MARGIN_TOP, bottom: Constants.APPLICATION_LIST_MARGIN_BOTTOM })
652          Column() {
653            alphabetIndexerComponent({ applicationItem: $applicationItem, index: $selectedIndex })
654          }.margin({ top: Constants.APPLICATION_ALPHABETINDEX_MARGIN_TOP, bottom: Constants.APPLICATION_LIST_MARGIN_BOTTOM })
655          .width(Constants.APPLICATION_ALPHABETINDEX_WIDTH)
656        }
657      }
658    }
659  }
660}