@semic/layout

This package contains a set of utility components, hooks, layouts and TypeScript types used by admin application module. It is intended to be directly depended upon by an end-user project.

installation

`npm install @sights/layout`

build

flat build forge -p="packages/layout" -d

如果编译生成类型失败, 可以考虑删除node_modules/@types/{eslint, eslint-scope, estree} 重新执行

installation

`npm install @semic/layout`

// index.ts
import { logoSvg } from '@/config/logo';
import { adminDataService } from '@/data';
import { onMySignOut } from '@/shared/configs';
import '@/shared/style';
import { bootstrap } from '@sights/layout';
import { allBreads } from './configs';
import { routeConfig } from './routes';
bootstrap(routeConfig, allBreads(), {
  sidebarWidth: 220,
  disableTopbarMenu: false,
  disableDefaultErrorHandling: false,
  disableDefaultPwdModal: false,
  onError(err: Error, info) {
    console.log('@sights application error:', err, info);
  },
  onSignOut(user, hostUrl) {
    console.log('@sights `onSignOut()...`', user, hostUrl);
    onMySignOut(hostUrl);
  },
  onPwdUpdate(password, user, hostUrl) {
    console.log('@sights `onPwdUpdate()...`', password, user, hostUrl);
    return adminDataService.updateActiveAdministrator({
      password,
    });
  },
  onErrorReset() {
    console.log();
  },
  logoPath: logoSvg,
  siteName: '·银河系·',
});

// routes.ts
import { RouteConfig } from '@sights/layout';
import { lazy } from 'react';

export const routeConfig = new RouteConfig([
  {
    path: '/setting/menus',
    exact: false,
    redirect: false,
    module: lazy(() => import(/* webpackChunkName: "semic/admin/setting/chunks/menus" */ './modules/menus')),
  },
  {
    path: '/setting/modules',
    exact: false,
    redirect: false,
    module: lazy(
      () => import(/* webpackChunkName: "semic/admin/setting/chunks/modules" */ './modules/modules'),
    ),
  },
  {
    path: '/setting/tasks',
    exact: false,
    redirect: false,
    module: lazy(() => import(/* webpackChunkName: "semic/admin/setting/chunks/tasks" */ './modules/tasks')),
  },
  {
    path: '/setting/users',
    exact: false,
    redirect: false,
    module: lazy(() => import(/* webpackChunkName: "semic/admin/setting/chunks/users" */ './modules/users')),
  },
  {
    path: '/setting',
    exact: true,
    module: null,
    redirect: '/setting/users',
  },
]).create();

IFrame 通讯

import { IframeHandler, iframe } from '@sights/layout';
import { hooks } from '@wove/react';
import { useState } from 'react';

type MessageData = {
  name: string;
};

export const MyHeader = () => {
  const [message, updateMessage] = useState({});

  const iframeApi = useIframe<MessageData>((data) => {
    console.log('onMainMessageReceived', data.name);
    updateMessage(data);
  });

  const handleClick = hooks.useCallbackRef(() => {
    iframeApi.broadcastMessages({
      fromHeader: '1',
    });
  });

  return (
    <div style={{ position: 'absolute', right: 50, top: 0 }} onClick={handleClick}>
      MyHeader {JSON.stringify(message)}
    </div>
  );
};