Tabs({ barPosition: BarPosition.End }) {
  TabContent() {
    HomeComponent()
  }.align(Alignment.Top)
  .tabBar(this.tabBuilder("Главная", 0, $r("app.media.main_index_select_icon"), $r("app.media.main_index_icon")))
  TabContent() {
    SystemComponent()
  }.align(Alignment.Top)
  .tabBar(this.tabBuilder("Система", 1, $r("app.media.main_house_select_icon"), $r("app.media.main_house_icon")))
  TabContent() {
    ProjectComponent()
  }.tabBar(this.tabBuilder("Проекты", 2, $r("app.media.main_message_select_icon"), $r("app.media.main_message_icon")))
  TabContent() {
    MyComponent()
  }.align(Alignment.Top)
  .tabBar(this.tabBuilder("Мои", 3, $r("app.media.main_me_select_icon"), $r("app.media.main_me_icon")))
}.scrollable(false)
.divider({strokeWidth: 0.3})
.animationDuration(0)
.onChange((index) => {
  this.currentIndex = index
})
```barPosition управляет положением панели навигации, BarPosition.Start указывает на верхнюю панель навигации, а BarPosition.End — на нижнюю; divider определяет стиль разделительной линии панели навигации; animationDuration устанавливает время анимации при переходе между страницами; onChange — это обработчик события при смене страницы.HomeComponent, SystemComponent, ProjectComponent, MyComponent — это пользовательские компоненты страниц. При смене панели навигации происходит переход на соответствующую страницу.

### Пользовательский компонент главной страницы (HomeComponent)
Главная страница HomeComponent состоит из компонента слайдера Swiper и компонента списка, который используется для отображения списка статей. Внешне это обёрнуто в компонент PullToRefresh для поддержки функции обновления при прокрутке вверх. Структура примерно такая:```ts
```Пусть страница будет обновлена при свайпе вниз/вверх
 PullToRefresh({
   data: this.articleList,
   scroller: this.scroller,
   onRefresh: () => {
     //Обновление данных при свайпе вниз
   },
   onLoadMore: () => {
     //Загрузка дополнительных данных при свайпе вверх
   },
   customList: () => {
     //Обновление содержимого страницы
     Scroll(this.scroller) {
       Column() {
         //Слайдер
         Swiper() {}
         //Список статей
         ForEach(this.articleList, (item: ArticleData) => {
           ArticleListItem({ article: item })
         })
       }
     }
   }
 })

### Системный пользовательский компонент (SystemComponent)
Системная страница состоит из верхней панели Tabs, содержащей Grid и компонента PullToRefresh для списка. Компонент Grid — это системный компонент для отображения плиток. Структура страницы следующая:
```ts
// Верхняя панель навигации
Tabs({ barPosition: BarPosition.Start }) {
  TabContent() {
    Column() {
      // Верхняя панель плиток
      Grid() {}
      // Компонент PullToRefresh
      PullToRefresh({
        customList: () => {
          // Компонент скроллинга
          Scroll() {
            Column() {
              // Элементы списка статей
              ArticleListItem()
            }
          }
        }
      })
    }
  }
}

// Верхняя панель навигации
Tabs({ barPosition: BarPosition.Start }) {
  TabContent() {
    // Компонент PullToRefresh
    PullToRefresh({
      customList: () => {
        Grid(this.scroller) {
          ForEach(this.projectList, (item: ArticleData) => {
            GridItem() {
              // Стили элемента плитки
            }
          })
        }
      }
    })
  }
}

.columnsTemplate("1fr 1fr")
.width("95%")
.columnsGap(10)
.scrollBar(BarState.Off)
.padding(1)

Запросы к сети используются с помощью библиотеки [@ohos/axios](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios). Библиотека была немного переопределена.```ts
export class HttpUtils {
  private static instance: HttpUtils = new HttpUtils();
  private axiosInstance: AxiosInstance;
  private constructor() {
    this.axiosInstance = axios.create({
      baseURL: 'https://www.wanandroid.com/',
      timeout: 10 * 1000,
      // Установка глобальных заголовков запроса
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      // Установка прокси
      // proxy: { host: "192.168.10.229", port: 8888, exclusionList: [] }
    });
    // Обработка запросов, добавление cookie в заголовок запроса
    this.axiosInstance.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
      if (config.url != WanAndroidUrl.Login) {
        // Если это не запрос на вход, добавляем cookie в заголовок
        const cookies = await PFUtils.get<string>("cookies").then();
        config.headers["Cookie"] = cookies;
      }
      console.log("Запрос: ", JSON.stringify(config.headers));
      return config;
    });
    // Обработка ответов, сохранение cookie
    this.axiosInstance.interceptors.response.use((response: AxiosResponse) => {
      console.log("Ответ: ", response.config.url);
      console.log("Ответ: ", JSON.stringify(response.data));
      if (response.config.url == WanAndroidUrl.Login) {
        // Если это запрос на вход, сохраняем cookie
        const cookies = response.headers["set-cookie"] as string[];
        // Сохраняем cookie в кэше
        PFUtils.put<string>("cookies", cookies.toString());
        // Сохраняем состояние входа
        PFUtils.put<boolean>("LoginState", true);
        // Уведомляем другие страницы о успешном входе пользователя
        emitter.emit({ eventId: Constant.USER_LOGIN });
      }
      return response;
    }, (error: AxiosError) => {
      // Обработка ошибок ответа
      console.log("Ошибка: ", JSON.stringify(error));
    });
  }
}
``````markdown
log("Запрос ошибочных данных:", JSON.stringify(error))