@difizen/libro-lab 0.0.2-alpha.0 → 0.1.1

package/src/layout/brand/index.less

@@ -0,0 +1,16 @@
+.libro-lab-brand {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 0 22px;
+
+  &-logo {
+    height: 16px;
+  }
+
+  label {
+    font-size: 16px;
+    margin-left: 8px;
+  }
+}

package/src/layout/brand/index.tsx

@@ -0,0 +1,22 @@
+import { BaseView, view, singleton } from '@difizen/mana-app';
+import * as React from 'react';
+import { Logo } from '../../common/index.js';
+
+import './index.less';
+
+export const Brand: React.ForwardRefExoticComponent<any> = React.forwardRef(
+  function Brand(_props, ref: React.ForwardedRef<HTMLDivElement>) {
+    return (
+      <div className="libro-lab-brand" ref={ref}>
+        <Logo className="libro-lab-brand-logo" />
+        <label>libro lab</label>
+      </div>
+    );
+  },
+);
+
+@singleton()
+@view('libro-brand-view')
+export class BrandView extends BaseView {
+  override view = Brand;
+}

package/src/layout/container.tsx

@@ -0,0 +1,28 @@
+import { singleton, Slot, view } from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
+import { BoxPanel } from '@difizen/mana-react';
+import { forwardRef } from 'react';
+
+import './index.less';
+import { LibroLabLayoutSlots } from './protocol.js';
+
+export const LibroLabLayoutContainerComponent = forwardRef(
+  function LibroLabLayoutContainerComponent() {
+    return (
+      <BoxPanel direction="top-to-bottom">
+        <BoxPanel.Pane className="libro-lab-layout-main" flex={1}>
+          <Slot name={LibroLabLayoutSlots.main} />
+        </BoxPanel.Pane>
+        <BoxPanel.Pane className="libro-lab-layout-footer">
+          <Slot name={LibroLabLayoutSlots.footer} />
+        </BoxPanel.Pane>
+      </BoxPanel>
+    );
+  },
+);
+
+@singleton()
+@view('libro-lab-layout-container')
+export class LibroLabLayoutContainerView extends BaseView {
+  override view = LibroLabLayoutContainerComponent;
+}

package/src/layout/footer/current-file-footer-view.tsx

@@ -0,0 +1,40 @@
+import {
+  BaseView,
+  inject,
+  singleton,
+  useInject,
+  view,
+  ViewInstance,
+} from '@difizen/mana-app';
+import * as React from 'react';
+
+import { LayoutService } from '../layout-service.js';
+import { LibroLabLayoutSlots } from '../protocol.js';
+import './index.less';
+
+const CurrentFileFooterComponent = React.forwardRef(function CurrentFileFooterComponent(
+  _props,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const currentFileFooterView = useInject<LibroLabCurrentFileFooterView>(ViewInstance);
+
+  return (
+    <div className="libro-lab-current-file-footer" ref={ref}>
+      <span>{`当前文件：${
+        currentFileFooterView.navigatableView?.title.label || ''
+      }`}</span>
+    </div>
+  );
+});
+
+@singleton()
+@view('libro-lab-current-file-footer-view')
+export class LibroLabCurrentFileFooterView extends BaseView {
+  override view = CurrentFileFooterComponent;
+  @inject(LayoutService) protected layoutService: LayoutService;
+
+  get navigatableView() {
+    const contentView = this.layoutService.getActiveView(LibroLabLayoutSlots.content);
+    return contentView;
+  }
+}

package/src/layout/footer/footer-view.tsx

@@ -0,0 +1,30 @@
+import { DefaultSlotView, singleton, Slot, view } from '@difizen/mana-app';
+import { BoxPanel } from '@difizen/mana-react';
+import * as React from 'react';
+import './index.less';
+
+export enum FooterArea {
+  left = 'libro-lab-footer-left',
+  right = 'libro-lab-footer-right',
+}
+
+const FooterComponent: React.ForwardRefExoticComponent<any> = React.forwardRef(
+  function FooterComponent(_props, ref: React.ForwardedRef<HTMLDivElement>) {
+    return (
+      <BoxPanel direction="left-to-right" className={'libro-lab-footer'} ref={ref}>
+        <BoxPanel.Pane flex={1} className={'libro-lab-footer-left'}>
+          <Slot name={FooterArea.left} />
+        </BoxPanel.Pane>
+        <BoxPanel.Pane flex={1} className={'libro-lab-footer-right'}>
+          <Slot name={FooterArea.right} />
+        </BoxPanel.Pane>
+      </BoxPanel>
+    );
+  },
+);
+
+@singleton()
+@view('libro-lab-footer-view')
+export class LibroLabLayoutFooterView extends DefaultSlotView {
+  override view = FooterComponent;
+}

package/src/layout/footer/index.less

@@ -0,0 +1,20 @@
+.libro-lab-footer {
+  .libro-lab-footer-left,
+  .libro-lab-footer-right {
+    padding: 0 24px;
+  }
+}
+
+.libro-lab-current-file-footer,
+.libro-lab-status-footer {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 12px;
+  color: rgba(0, 10, 26, 68%);
+}
+
+.libro-lab-status-footer {
+  justify-content: end;
+}

package/src/layout/footer/status-footer-view.tsx

@@ -0,0 +1,45 @@
+import { BaseView, inject, singleton, useInject, view } from '@difizen/mana-app';
+import * as React from 'react';
+import { Loadding, SuccIcon } from '../../common/icon.js';
+
+import { LayoutService } from '../layout-service.js';
+import { LibroLabLayoutSlots } from '../protocol.js';
+import type { StatusItem, StatusType } from '../protocol.js';
+import './index.less';
+
+const Status: Record<StatusType, StatusItem> = {
+  loading: {
+    label: '启动中',
+    icon: <Loadding />,
+  },
+  success: {
+    label: '启动成功',
+    icon: <SuccIcon />,
+  },
+};
+
+const StatusFooterComponent = React.forwardRef(function CurrentFileFooterComponent(
+  _props,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const layoutService = useInject(LayoutService);
+  return (
+    <div className="libro-lab-status-footer" ref={ref}>
+      <span>服务状态：</span>
+      {Status[layoutService.serverSatus].icon}
+      {Status[layoutService.serverSatus].label}
+    </div>
+  );
+});
+
+@singleton()
+@view('libro-lab-status-footer-view')
+export class LibroLabStatusFooterView extends BaseView {
+  override view = StatusFooterComponent;
+  @inject(LayoutService) protected layoutService: LayoutService;
+
+  get navigatableView() {
+    const contentView = this.layoutService.getActiveView(LibroLabLayoutSlots.content);
+    return contentView;
+  }
+}

package/src/layout/index.less

@@ -0,0 +1,59 @@
+@ant-prefix: ant;
+
+.libro-lab-layout {
+  width: 100%;
+  height: 100%;
+
+  &-header {
+    height: 56px;
+    min-height: 56px;
+  }
+
+  &-container {
+    overflow: auto;
+  }
+
+  &-main {
+    overflow: auto;
+  }
+
+  &-footer {
+    height: 28px;
+    min-height: 28px;
+    background-image: linear-gradient(270deg, #fafafa 0%, #fff 100%);
+    box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 12%);
+  }
+
+  .mana-header {
+    background: var(--mana-color-bg-container);
+    border-bottom: none;
+
+    .mana-header-left,
+    .mana-header-right {
+      flex: unset !important;
+    }
+
+    .mana-menubar {
+      height: 100%;
+      padding: unset;
+    }
+
+    .mana-menubar-item-text {
+      color: rgba(0, 10, 26, 89%);
+      font-weight: 400;
+    }
+  }
+}
+
+.libro-lab-editor-tab-tail {
+  width: 16px;
+
+  .libro-lab-editor-tab-dirty {
+    padding: 0 4px;
+
+    .ant-badge.ant-badge-status .ant-badge-status-dot {
+      height: 8px;
+      width: 8px;
+    }
+  }
+}

package/src/layout/index.tsx

@@ -0,0 +1,4 @@
+export * from './protocol.js';
+export * from './module.js';
+export * from './layout.js';
+export * from './footer/footer-view.js';

package/src/layout/layout-service.ts

@@ -0,0 +1,66 @@
+import type { SlotView, View, ViewOpenHandlerOptions } from '@difizen/mana-app';
+import {
+  DefaultSlotView,
+  inject,
+  prop,
+  singleton,
+  SlotViewManager,
+} from '@difizen/mana-app';
+
+import type { LibroLabLayoutSlotsType, StatusType } from './protocol.js';
+import { LibroLabLayoutSlots } from './protocol.js';
+
+export type VisibilityMap = Record<LibroLabLayoutSlotsType, boolean>;
+
+@singleton()
+export class LayoutService {
+  @inject(SlotViewManager) protected readonly slotViewManager: SlotViewManager;
+
+  @prop()
+  serverSatus: StatusType = 'loading';
+  @prop()
+  visibilityMap: VisibilityMap = {
+    [LibroLabLayoutSlots.header]: true,
+    [LibroLabLayoutSlots.container]: true,
+    [LibroLabLayoutSlots.main]: true,
+    [LibroLabLayoutSlots.footer]: true,
+    [LibroLabLayoutSlots.navigator]: false,
+    [LibroLabLayoutSlots.content]: true,
+    [LibroLabLayoutSlots.contentBottom]: false,
+    [LibroLabLayoutSlots.alert]: true,
+  };
+
+  isAreaVisible(slot: LibroLabLayoutSlotsType): boolean {
+    return this.visibilityMap[slot];
+  }
+
+  setAreaVisible(slot: LibroLabLayoutSlotsType, visible: boolean) {
+    this.visibilityMap[slot] = visible;
+  }
+
+  async addView(view: View, option?: ViewOpenHandlerOptions): Promise<void> {
+    const { slot = LibroLabLayoutSlots.main, ...viewOpenOption } = option || {};
+    const slotView = this.slotViewManager.getSlotView(slot) as SlotView;
+    await slotView.addView(view, viewOpenOption);
+  }
+
+  getActiveView(slot: LibroLabLayoutSlotsType) {
+    if (this.isAreaVisible(slot)) {
+      const slotView = this.slotViewManager.getSlotView(slot);
+      if (slotView instanceof DefaultSlotView) {
+        return slotView.active;
+      }
+    }
+    return undefined;
+  }
+
+  onSlotActiveChange(slot: LibroLabLayoutSlotsType, handler: () => void) {
+    if (this.isAreaVisible(slot)) {
+      const slotView = this.slotViewManager.getSlotView(slot);
+      if (slotView instanceof DefaultSlotView) {
+        return slotView.onActiveChange(handler);
+      }
+    }
+    return undefined;
+  }
+}

package/src/layout/layout.tsx

@@ -0,0 +1,61 @@
+import { inject, singleton, Slot, useInject, view } from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
+import { BoxPanel } from '@difizen/mana-react';
+import { Alert } from 'antd';
+import { forwardRef } from 'react';
+
+import { Loadding } from '../common/icon.js';
+
+import './index.less';
+import type { VisibilityMap } from './layout-service.js';
+import { LayoutService } from './layout-service.js';
+import { LibroLabLayoutSlots } from './protocol.js';
+
+export const LibroLabLayoutContainerComponent = forwardRef(
+  function LibroLabLayoutContainerComponent() {
+    const layoutService = useInject(LayoutService);
+
+    return (
+      <div className="libro-lab-layout">
+        <BoxPanel direction="top-to-bottom">
+          {layoutService.isAreaVisible(LibroLabLayoutSlots.header) && (
+            <BoxPanel.Pane className="libro-lab-layout-header">
+              <Slot name={LibroLabLayoutSlots.header} />
+            </BoxPanel.Pane>
+          )}
+          {layoutService.isAreaVisible(LibroLabLayoutSlots.alert) && (
+            <Alert
+              message="服务启动中，请稍后，待容器启动完成后即可编辑文件。"
+              type="info"
+              banner
+              closable
+              icon={<Loadding className="libro-lab-loadding" />}
+            />
+          )}
+          {layoutService.isAreaVisible(LibroLabLayoutSlots.container) && (
+            <BoxPanel.Pane className="libro-lab-layout-container" flex={1}>
+              <Slot name={LibroLabLayoutSlots.container} />
+            </BoxPanel.Pane>
+          )}
+        </BoxPanel>
+      </div>
+    );
+  },
+);
+
+@singleton()
+@view('libro-lab-layout')
+export class LibroLabLayoutView extends BaseView {
+  override view = LibroLabLayoutContainerComponent;
+
+  @inject(LayoutService) layoutService: LayoutService;
+
+  storeState(): object {
+    return { visibilityMap: this.layoutService.visibilityMap };
+  }
+
+  restoreState(oldState: object): void {
+    const state = oldState as { visibilityMap: VisibilityMap };
+    this.layoutService.visibilityMap = state.visibilityMap;
+  }
+}

package/src/layout/main.tsx

@@ -0,0 +1,67 @@
+import { singleton, Slot, useInject, view } from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
+import { SplitPanel } from '@difizen/mana-react';
+import { forwardRef } from 'react';
+
+import './index.less';
+import { LayoutService } from './layout-service.js';
+import { LibroLabLayoutSlots } from './protocol.js';
+
+export const LibroLabLayoutMainComponent = forwardRef(
+  function LibroLabLayoutMainComponent() {
+    const layoutService = useInject(LayoutService);
+
+    return (
+      <SplitPanel id="libro-lab-content-layout">
+        {layoutService.isAreaVisible(LibroLabLayoutSlots.navigator) && (
+          <SplitPanel.Pane
+            id="libro-lab-content-layout-left"
+            className="libro-lab-content-layout-left"
+            defaultSize={300}
+          >
+            <Slot name={LibroLabLayoutSlots.navigator} />
+          </SplitPanel.Pane>
+        )}
+        <SplitPanel.Pane
+          id="libro-lab-content-layout-main-container"
+          className="libro-lab-content-layout-main-container"
+          flex={1}
+          minResize={200}
+        >
+          <SplitPanel
+            id="libro-lab-content-layout-main-panel"
+            direction="top-to-bottom"
+          >
+            {layoutService.isAreaVisible(LibroLabLayoutSlots.content) && (
+              <SplitPanel.Pane
+                id="libro-lab-content-layout-main"
+                className="libro-lab-content-layout-main"
+                flex={2}
+                flexGrow={1}
+                minResize={200}
+              >
+                <Slot name={LibroLabLayoutSlots.content} />
+              </SplitPanel.Pane>
+            )}
+            {layoutService.isAreaVisible(LibroLabLayoutSlots.contentBottom) && (
+              <SplitPanel.Pane
+                id="libro-lab-content-layout-bottom"
+                className="libro-lab-content-layout-bottom"
+                flex={1}
+                defaultSize={200}
+              >
+                <Slot name={LibroLabLayoutSlots.contentBottom} />
+              </SplitPanel.Pane>
+            )}
+          </SplitPanel>
+        </SplitPanel.Pane>
+      </SplitPanel>
+    );
+  },
+);
+
+@singleton()
+@view('libro-lab-layout-main')
+export class LibroLabLayoutMainView extends BaseView {
+  override view = LibroLabLayoutMainComponent;
+}

package/src/layout/module.ts

@@ -0,0 +1,68 @@
+import {
+  createSlotPreference,
+  FlexSlotView,
+  HeaderArea,
+  HeaderView,
+  ManaModule,
+} from '@difizen/mana-app';
+
+import { BrandView } from './brand/index.js';
+import { LibroLabLayoutContainerView } from './container.js';
+import { LibroLabCurrentFileFooterView } from './footer/current-file-footer-view.js';
+import { FooterArea, LibroLabLayoutFooterView } from './footer/footer-view.js';
+import { LibroLabStatusFooterView } from './footer/status-footer-view.js';
+import { LayoutService } from './layout-service.js';
+import { LibroLabLayoutView } from './layout.js';
+import { LibroLabLayoutMainView } from './main.js';
+import { LibroLabLayoutSlots } from './protocol.js';
+import { SaveableTabView } from './saveable-tab-view.js';
+
+export const LibroLabLayoutModule = ManaModule.create('LibroLabLayoutModule').register(
+  LibroLabLayoutView,
+  LibroLabLayoutContainerView,
+  LibroLabLayoutMainView,
+  BrandView,
+  SaveableTabView,
+  LibroLabLayoutFooterView,
+  LibroLabCurrentFileFooterView,
+  LayoutService,
+  createSlotPreference({
+    slot: LibroLabLayoutSlots.header,
+    view: HeaderView,
+  }),
+  createSlotPreference({
+    slot: HeaderArea.left,
+    view: BrandView,
+  }),
+  createSlotPreference({
+    slot: LibroLabLayoutSlots.container,
+    view: LibroLabLayoutContainerView,
+  }),
+  createSlotPreference({
+    slot: LibroLabLayoutSlots.main,
+    view: LibroLabLayoutMainView,
+  }),
+  createSlotPreference({
+    slot: LibroLabLayoutSlots.footer,
+    view: LibroLabLayoutFooterView,
+  }),
+  createSlotPreference({
+    slot: FooterArea.right,
+    view: FlexSlotView,
+    options: { sort: true },
+  }),
+  createSlotPreference({
+    slot: FooterArea.left,
+    view: FlexSlotView,
+    options: { sort: true },
+  }),
+  createSlotPreference({
+    slot: FooterArea.left,
+    view: LibroLabCurrentFileFooterView,
+  }),
+  LibroLabStatusFooterView,
+  createSlotPreference({
+    slot: FooterArea.right,
+    view: LibroLabStatusFooterView,
+  }),
+);

package/src/layout/protocol.tsx

@@ -0,0 +1,20 @@
+export const LibroLabLayoutSlots = {
+  header: 'libro-lab-header',
+  container: 'libro-lab-container',
+  main: 'libro-lab-main',
+  footer: 'libro-lab-footer',
+  navigator: 'libro-lab-navigator',
+  content: 'libro-lab-content',
+  contentBottom: 'libro-lab-content-bottom',
+  alert: 'libro-lab-alert',
+};
+
+export type StatusType = 'loading' | 'success';
+
+export interface StatusItem {
+  label: string;
+  icon: JSX.Element;
+}
+
+export type LibroLabLayoutSlotsType =
+  (typeof LibroLabLayoutSlots)[keyof typeof LibroLabLayoutSlots];

package/src/layout/saveable-tab-view.tsx

@@ -0,0 +1,66 @@
+import { CloseOutlined } from '@ant-design/icons';
+import type { View } from '@difizen/mana-app';
+import {
+  CardTabView,
+  MenuRender,
+  transient,
+  view,
+  ViewContext,
+  Saveable,
+} from '@difizen/mana-app';
+import { Dropdown } from '@difizen/mana-react';
+import { Badge } from 'antd';
+import classnames from 'classnames';
+
+@transient()
+@view('LibroLabSaveableTab')
+export class SaveableTabView extends CardTabView {
+  protected override renderTab(item: View) {
+    return (
+      <ViewContext view={item}>
+        <Dropdown
+          trigger={['contextMenu']}
+          overlay={<MenuRender menuPath={['tab-bar-context-menu']} data={undefined} />}
+        >
+          <div
+            title={item.title.caption}
+            className={classnames('mana-tab-title', item.title.className)}
+          >
+            {item.title.icon && (
+              <span className="mana-tab-icon">
+                {this.renderTitleIcon(item.title.icon)}
+              </span>
+            )}
+            {this.renderTitleLabel(item.title.label)}
+            {this.renderTail(item)}
+          </div>
+        </Dropdown>
+      </ViewContext>
+    );
+  }
+  protected renderTail(item: View) {
+    const isDirty = Saveable.is(item) && Saveable.isDirty(item);
+    return (
+      <div className="libro-lab-editor-tab-tail">
+        {isDirty ? (
+          <div className="libro-lab-editor-tab-dirty">
+            <Badge status="default" />
+          </div>
+        ) : (
+          item.title.closable && (
+            <CloseOutlined
+              onClick={(e) => {
+                e.stopPropagation();
+                this.close(item);
+                if (this.children.length > 0) {
+                  this.active = this.children[this.children.length - 1];
+                }
+              }}
+              className="mana-tab-close"
+            />
+          )
+        )}
+      </div>
+    );
+  }
+}

package/src/menu/menu-bar-view.tsx

@@ -0,0 +1,28 @@
+import { MacCommandOutlined } from '@ant-design/icons';
+import {
+  BaseView,
+  MAIN_MENU_BAR,
+  MenuBarRender,
+  prop,
+  singleton,
+  view,
+} from '@difizen/mana-app';
+import { forwardRef } from 'react';
+
+export const ManaMenubarComponent = forwardRef(function GithubLinkComponent() {
+  return <MenuBarRender menuPath={MAIN_MENU_BAR} />;
+});
+
+@singleton()
+@view('MenuBarView')
+export class MenuBarView extends BaseView {
+  override view = ManaMenubarComponent;
+  @prop()
+  count = 0;
+  constructor() {
+    super();
+    this.title.icon = MacCommandOutlined;
+    this.title.label = '菜单';
+    this.id = 'menu-bar';
+  }
+}