ohayolibs/src/app/routes/dev/layout.component.ts

Ohayo is a set of essential modules for ohayojp.

import { Component, HostBinding, Inject, OnInit } from '@angular/core';
// import { Router } from '@angular/router';
import { OHAYO_I18N_TOKEN, Menu, MenuService, SettingsService } from '@ohayo/theme';
import { NzIconService } from 'ng-zorro-antd/icon';
import { NzMessageService } from 'ng-zorro-antd/message';

// #region icons

import {
  AppstoreOutline,
  BellOutline,
  EllipsisOutline,
  FullscreenExitOutline,
  FullscreenOutline,
  GithubOutline,
  GlobalOutline,
  LockOutline,
  LogoutOutline,
  MenuFoldOutline,
  MenuUnfoldOutline,
  PlusOutline,
  SearchOutline,
  // Optional
  SettingOutline,
  UserOutline,
} from '@ant-design/icons-angular/icons';
import { I18NService, LangType } from '@core';
import { ReuseCustomContextMenu } from '@ohayo/components/reuse-tab';

const ICONS = [
  MenuFoldOutline,
  MenuUnfoldOutline,
  SearchOutline,
  SettingOutline,
  FullscreenOutline,
  FullscreenExitOutline,
  BellOutline,
  LockOutline,
  PlusOutline,
  UserOutline,
  LogoutOutline,
  EllipsisOutline,
  GlobalOutline,
  // Optional
  GithubOutline,
  AppstoreOutline,
];

// #endregion

@Component({
  selector: 'dev-layout',
  templateUrl: './layout.component.html',
  host: {
    '[class.ohayo-default]': 'true',
  },
  preserveWhitespaces: false,
})
export class DevLayoutComponent implements OnInit {
  @HostBinding('class.ohayo-default__fixed')
  get isFixed(): boolean {
    return this.settings.layout.fixed;
  }
  @HostBinding('class.ohayo-default__boxed')
  get isBoxed(): boolean {
    return this.settings.layout.boxed;
  }
  @HostBinding('class.ohayo-default__collapsed')
  get isCollapsed(): boolean {
    return this.settings.layout.collapsed;
  }

  lang: LangType = 'zh-CN';

  menus: Menu[] = [
    {
      text: 'test',
      group: true,
      children: [
        {
          text: 'Dashboard-DISABLED',
          link: '/dev',
          icon: 'anticon anticon-dashboard',
          i18n: 'app.header.menu.home',
          badge: 5,
          disabled: true,
        },
        { text: '测试view1-id', link: '/dev/view/1' },
        { text: '测试view2-id', link: '/dev/view/2' },
        { text: 'lazy测试1', link: '/dev/lazy/p1' },
        { text: 'lazy测试2', link: '/dev/lazy/p2' },
        { text: 'lazy测试view1-id', link: '/dev/lazy/1/view' },
        { text: 'lazy测试view2-id', link: '/dev/lazy/2/view' },
        {
          text: 'Level1',
          link: '#',
          icon: 'anticon anticon-appstore',
          children: [
            {
              text: 'Level2',
              link: '#',
              children: [
                { text: 'Level3A', link: '/dev/l1' },
                { text: 'Level3B-DISABLED', link: '/dev/l1', disabled: true },
              ],
            },
            { text: 'Level2-DISABLED', link: '/dev/l2', disabled: true },
          ],
        },
        {
          text: 'components',
          icon: 'anticon anticon-appstore',
          children: [
            { text: 'Reuse Tab1', link: '/dev/l1', i18n: 'app.header.menu.docs' },
            { text: 'Reuse Tab2', link: '/dev/l2' },
            { text: 'Reuse Tab3', link: '/dev/l3' },
            { text: 'Reuse Tab4', link: '/dev/l4' },
            { text: 'Reuse Tab5', link: '/dev/l5' },
            { text: 'Reuse Tab6', link: '/dev/l6' },
            { text: 'Reuse Tab7', link: '/dev/l7' },
            { text: 'Ellipsis', link: '/dev/l8' },
          ],
        },
      ],
    },
  ];

  customContextMenu: ReuseCustomContextMenu[] = [
    {
      id: 'custom1',
      title: '自定义1',
      fn: (item, m) => {
        console.log('自定义1', item, m);
      },
    },
    {
      id: 'custom2',
      title: '自定义2',
      disabled: () => true,
      fn: (item, m) => {
        console.log('自定义2', item, m);
      },
    },
  ];

  constructor(
    iconSrv: NzIconService,
    private menuSrv: MenuService,
    public settings: SettingsService,
    public msgSrv: NzMessageService,
    // private router: Router,
    @Inject(OHAYO_I18N_TOKEN) private i18n: I18NService,
  ) {
    iconSrv.addIcon(...ICONS);
    // this.testReuse();
  }

  // private testReuse(): void {
  //   const urls = ['/dev/l2', '/dev/l3', '/dev/l4', '/dev/l5', '/dev/l6'];
  //   const fn = (pos: number) => {
  //     if (pos >= urls.length) return;

  //     setTimeout(() => {
  //       console.log('--------------------');
  //       this.router.navigateByUrl(urls[pos]);
  //       fn(++pos);
  //     }, 300);
  //   };
  //   fn(0);
  // }

  toggleCollapsedSideabar(): void {
    this.settings.setLayout('collapsed', !this.settings.layout.collapsed);
  }

  toggleLang(): void {
    this.lang = this.lang === 'zh-CN' ? 'en-US' : 'zh-CN';
    this.i18n.use(this.lang);
  }

  ngOnInit(): void {
    this.menuSrv.add(this.menus);
  }
}