@hopgoldy/cube-ui

Shared responsive application shell and UI primitives for Cube applications.

Install

pnpm add @hopgoldy/cube-ui

Import styles once in your app entry:

import "@hopgoldy/cube-ui/styles.css";

Example

// the app's top-level layout (in place of a hand-rolled AppContainer + theme provider)
import { CubeApp } from "@hopgoldy/cube-ui";
import { Outlet } from "react-router-dom";

export const AppContainer = () => (
  <CubeApp
    sidebarTop={<Logo />}
    sidebarList={<nav>Sidebar links</nav>}
    headerLeft="Cube App"
    headerSearchBtnLabel="搜索"
    onHeaderSearchBtnClick={() => openSearch()}
    accountMenuStats={[{ key: "pages", title: "页面", value: 3 }]}
    accountMenuItems={[{ key: "settings", label: "设置", onClick: () => navigate("/settings") }]}
    onLogoutBtnClick={() => logout()}
    userName={currentUser.name}
    about={{ name: "Cube App", version: "1.0.0", repository: "https://github.com/you/app" }}
  >
    <Outlet />
  </CubeApp>
);

// any page that needs a mobile settings entry point
import { MobileAccountSheet } from "@hopgoldy/cube-ui";

const [visible, setVisible] = useState(false);
<MobileAccountSheet visible={visible} onVisibleChange={setVisible} />;

// any page rendered inside CubeApp's children
import { ActionButton, ActionIcon, CubePage } from "@hopgoldy/cube-ui";
import { SettingOutlined } from "@ant-design/icons";

const HomePage = () => (
  <CubePage
    desktopHeaderLeft="首页"
    mobileActionBar={
      <>
        <ActionIcon icon={<SettingOutlined />} aria-label="打开设置" />
        <ActionButton>操作</ActionButton>
      </>
    }
  >
    page content
  </CubePage>
);

CubeApp is the single component every app configures: it composes CubeConfigProvider, renders the desktop shell (collapsible sidebar, header, account popover), and exposes the account/about configuration through context so MobileAccountSheet — a mobile-only settings drawer mounted by whichever page needs it, reached through the router's <Outlet/> — renders from the same data without taking it as props. Mobile has no persistent header or sidebar, matching how Cube apps actually behave today — mobile pages are bare content plus whatever action bar the page itself renders.

CubeConfigProvider applies the fixed Cube antd configuration (zh_CN locale, primaryColor token, a larger base font size on mobile) without rendering any shell. Mount it on its own for pages that should follow the Cube theme but live outside CubeApp — no configuration needed:

// a themed page outside the CubeApp shell (login, share, embedded views, ...)
import { CubeConfigProvider } from "@hopgoldy/cube-ui";

export const LoginPage = () => (
  <CubeConfigProvider>
    <LoginForm />
  </CubeConfigProvider>
);

CubePage is the single page-level container every page renders: it lays out scrollable content and an optional mobile-only action bar, and lets the page override CubeApp's header-left slot via desktopHeaderLeft for as long as it stays mounted. ActionIcon and ActionButton are the shared mobile action-bar primitives, matching the pattern already used in cube-xxx apps.

This package is intentionally UI-only. It does not depend on routers, HTTP clients, application stores, or authentication logic.