feat: add website layout 01

packages/bis/index.less

@@ -1 +1,2 @@
 @import './layout/style/index.less';
+@import './layout/style/layout-website-01.less';

packages/bis/layout/style/layout-website-01.less

@@ -0,0 +1,85 @@
+.yz-layout-website-01 {
+  min-height: 100%;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    min-height: @yz-layout-website-01-linear-min-height;
+    background: linear-gradient(to bottom, @yz-layout-website-01-linear-bg @yz-layout-website-01-linear-bg-percent, @yunzai-default-content-bg 100%);
+    z-index: -1;
+  }
+
+  &-nav{
+    padding: 30px 24px 40px;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+
+    &__logo{
+      max-height: @yz-layout-website-01-nav-logo-max-height;
+      max-width: @yz-layout-website-01-nav-logo-max-width;
+
+      &__full{
+        color: @yz-layout-website-01-nav-logo-full-color;
+        font-size: @yz-layout-website-01-nav-logo-full-font-size;
+        font-weight: @yz-layout-website-01-nav-logo-full-font-weight;
+        line-height: @yz-layout-website-01-nav-logo-full-line-height;
+      }
+    }
+
+    &__user{
+      color: @yz-layout-website-01-nav-user-color;
+      background: @yz-layout-website-01-nav-user-bg;
+      padding: 6px 24px;
+      width: 100%;
+      text-align: right;
+    }
+
+    &__slogan{
+      color: @yz-layout-website-01-nav-slogan-color;
+      font-size: @yz-layout-website-01-nav-slogan-font-size;
+      font-weight: @yz-layout-website-01-nav-slogan-font-weight;
+      margin-right: @yz-layout-website-01-nav-slogan-margin-right;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &-link{
+    color: @yz-layout-website-01-nav-link-color;
+    font-size: @yz-layout-website-01-nav-link-font-size;
+    span {
+      margin: 0 5px;
+    }
+
+    &:hover {
+      color: @yz-layout-website-01-nav-link-hover-color;
+    }
+
+    &__li{
+      text-align: center;
+      justify-content: center;
+    }
+  }
+}
+
+
+@media screen and (max-width: 1200px) {
+  .yz-layout-website-01-nav__slogan {
+    margin-right: 0;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .yz-layout-website-nav__slogan {
+    display: none;
+  }
+}

packages/bis/public_api.ts

@@ -6,3 +6,4 @@ export * from './src/refresh-token';
 export * from './src/startup.service';
 export * from './src/yunzai-analysis-addon.guard';
 export * from './src/yunzai-act.guard';
+export * from './src/website/layout-website-01.component';

packages/bis/src/website/layout-website-01.component.ts

@@ -0,0 +1,128 @@
+import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, Input, TemplateRef } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+import { YA_SERVICE_TOKEN } from '@yelon/auth';
+import { YunzaiStartupService } from '../startup.service';
+import { I18nPipe } from '@yelon/theme';
+import {
+  YunzaiProfile,
+  useLocalStorageProjectInfo,
+  useLocalStorageUser,
+  WINDOW,
+  YunzaiConfigService
+} from '@yelon/util';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzI18nModule } from 'ng-zorro-antd/i18n';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
+@Component({
+  selector: 'yunzai-layout-website-01',
+  template: `
+    <div class="yz-layout-website-01">
+      <div class="yz-layout-website-01-nav__user">
+        @if (isLogin) {
+          <a
+            class="yz-layout-website-01-link"
+            nz-dropdown
+            [nzDropdownMenu]="menu"
+            [nzOverlayStyle]="{ width: '120px' }"
+          >
+            <span nz-icon nzType="user" nzTheme="outline"></span>{{ _username }}<span nz-icon nzType="down"></span>
+          </a>
+          <nz-dropdown-menu #menu="nzDropdownMenu">
+            <ul nz-menu nzSelectable>
+              @for (link of _links; track $index) {
+                <li nz-menu-item class="yz-layout-website-01-link__li" (click)="to(link.url)">{{ link.name }}</li>
+              }
+              <li nz-menu-item nzDanger class="yz-layout-website-01-link__li" (click)="logout()"
+                >{{ 'menu.account.logout' | i18n }}
+              </li>
+            </ul>
+          </nz-dropdown-menu>
+        } @else {
+          <a class="yz-layout-website-01-link" (click)="login()">
+            <span nz-icon nzType="login" nzTheme="outline"></span>{{ 'app.login.login' | i18n }}</a
+          >
+        }
+      </div>
+
+      <header class="yz-layout-website-01-nav">
+        @if (_logoSrc) {
+          <img [alt]="_logoAlt" class="yz-layout-website-01-nav__logo" [src]="_logoSrc" />
+        } @else {
+          <div class="yz-layout-website-01-nav__logo__full">LOGO</div>
+        }
+
+        <div class="yz-layout-website-01-nav__content">
+          <ng-template *ngTemplateOutlet="_contentTpl" />
+        </div>
+        <div class="yz-layout-website-01-nav__slogan">
+          {{ _slogan }}
+        </div>
+      </header>
+      <main class="yz-layout-website-01-container">
+        <router-outlet />
+      </main>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [RouterOutlet, I18nPipe, NzI18nModule, NgFor, NgIf, NzDropDownModule, NzIconModule, NgTemplateOutlet]
+})
+export class YunzaiLayoutWebsite01Component {
+  @Input() logoSrc?: string | NzSafeAny;
+  @Input() logoAlt?: string = 'logo';
+  @Input() slogan?: string = '';
+  @Input() contentTpl?: TemplateRef<void> | NzSafeAny;
+
+  private readonly tokenService = inject(YA_SERVICE_TOKEN);
+  private readonly configService = inject(YunzaiConfigService);
+  private readonly startupSrv = inject(YunzaiStartupService);
+  private readonly win = inject(WINDOW);
+
+  get _logoSrc(): string | NzSafeAny {
+    return this.logoSrc;
+  }
+
+  get _logoAlt(): string {
+    return this.logoAlt || 'logo';
+  }
+
+  get _slogan(): string {
+    return this.slogan || '';
+  }
+
+  get _contentTpl(): TemplateRef<void> | NzSafeAny {
+    return this.contentTpl;
+  }
+
+  get _username(): string {
+    const [_, getUser] = useLocalStorageUser();
+    return getUser()?.realname || '';
+  }
+
+  get isLogin(): boolean {
+    const [_, getUser] = useLocalStorageUser();
+    return !!this.tokenService.get()?.access_token && !!getUser();
+  }
+
+  get _links(): YunzaiProfile[] {
+    const [_, getProjectInfo] = useLocalStorageProjectInfo();
+    return getProjectInfo()?.profileList || [];
+  }
+
+  login(): void {
+    this.startupSrv.load({ force: true }).subscribe(() => {});
+  }
+
+  logout(): void {
+    const baseUrl = this.configService.get('bis')?.baseUrl || '/backstage';
+    this.win.location.href = `${baseUrl}/cas-proxy/app/logout`;
+  }
+
+  to(url?: string): void {
+    if (url) this.win.location.href = url;
+  }
+}

packages/bis/theme-default.less

@@ -46,3 +46,22 @@
 @yz-application-list-item-p-line-height: 20px;
 @yz-application-list-item-li-hover-color: #fff;
 @yz-application-list-item-li-hover-bgColor: @yz-application-list-ul-a-hover-bgColor;
+// website layout
+@yz-layout-website-01-linear-bg: #94080b;
+@yz-layout-website-01-linear-bg-percent: 3%;
+@yz-layout-website-01-linear-min-height: 1000px;
+@yz-layout-website-01-nav-user-color: #fff;
+@yz-layout-website-01-nav-user-bg: #760407;
+@yz-layout-website-01-nav-logo-max-height: 90px;
+@yz-layout-website-01-nav-logo-max-width: 50%;
+@yz-layout-website-01-nav-logo-full-color: #fff;
+@yz-layout-website-01-nav-logo-full-font-size: 80px;
+@yz-layout-website-01-nav-logo-full-font-weight: 600;
+@yz-layout-website-01-nav-logo-full-line-height: 74px;
+@yz-layout-website-01-nav-link-color: #fff;
+@yz-layout-website-01-nav-link-font-size: 14px;
+@yz-layout-website-01-nav-link-hover-color: #d98910;
+@yz-layout-website-01-nav-slogan-color: #da8b12;
+@yz-layout-website-01-nav-slogan-font-size: 44px;
+@yz-layout-website-01-nav-slogan-font-weight: 600;
+@yz-layout-website-01-nav-slogan-margin-right: 50px;