@locode2/harness 0.1.0-preview.1

package/bundled-plugins/fast-frontend/runtimes/antd-admin/src/shell/RuntimeApp.tsx

@@ -0,0 +1,380 @@
+import {
+  App as AntApp,
+  Avatar,
+  Breadcrumb,
+  ConfigProvider,
+  Empty,
+  Layout,
+  Menu,
+  Result,
+  Skeleton,
+  Space,
+  theme,
+  Typography,
+  type MenuProps,
+} from "antd";
+import {
+  AppstoreOutlined,
+  BarChartOutlined,
+  DashboardOutlined,
+  FileTextOutlined,
+  FormOutlined,
+  HomeOutlined,
+  SettingOutlined,
+  TeamOutlined,
+  UnorderedListOutlined,
+} from "@ant-design/icons";
+import {
+  Component,
+  Suspense,
+  createElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ErrorInfo,
+  type PropsWithChildren,
+  type ReactNode,
+} from "react";
+import {
+  HashRouter,
+  Navigate,
+  Route,
+  Routes,
+  matchPath,
+  useLocation,
+  useNavigate,
+} from "react-router-dom";
+import {
+  appManifest,
+  providers,
+  routes,
+  stylesUrl,
+} from "virtual:harness-business-registry";
+
+import {
+  FrontendChromeContextProvider,
+  FrontendRuntimeContextProvider,
+  type FrontendChromeRegistrationApi,
+  type FrontendPageOptions,
+  type FrontendRouteMetadata,
+  type FrontendRuntimeProvider,
+  type FrontendShellOptions,
+  type FrontendShellUser,
+} from "../sdk/index.js";
+
+const { Header, Sider, Content } = Layout;
+
+const icons: Record<string, ReactNode> = {
+  AppstoreOutlined: <AppstoreOutlined />,
+  BarChartOutlined: <BarChartOutlined />,
+  DashboardOutlined: <DashboardOutlined />,
+  FileTextOutlined: <FileTextOutlined />,
+  FormOutlined: <FormOutlined />,
+  HomeOutlined: <HomeOutlined />,
+  SettingOutlined: <SettingOutlined />,
+  TeamOutlined: <TeamOutlined />,
+  UnorderedListOutlined: <UnorderedListOutlined />,
+};
+
+function orderRoutes(left: FrontendRouteMetadata, right: FrontendRouteMetadata): number {
+  return (left.order ?? 0) - (right.order ?? 0) || left.title.localeCompare(right.title, "zh-CN");
+}
+
+function buildMenuItems(metadata: readonly FrontendRouteMetadata[]): MenuProps["items"] {
+  const visible = metadata.filter((route) => route.hidden !== true);
+  const byParent = new Map<string | undefined, FrontendRouteMetadata[]>();
+  for (const route of visible) {
+    const siblings = byParent.get(route.parentId) ?? [];
+    siblings.push(route);
+    byParent.set(route.parentId, siblings);
+  }
+
+  const visit = (parentId: string | undefined): NonNullable<MenuProps["items"]> =>
+    (byParent.get(parentId) ?? []).sort(orderRoutes).map((route) => {
+      const children = visit(route.id);
+      return {
+        key: route.path,
+        label: route.title,
+        icon: route.icon === undefined ? undefined : icons[route.icon],
+        ...(children.length > 0 ? { children } : {}),
+      };
+    });
+
+  return visit(undefined);
+}
+
+function buildBreadcrumbs(
+  metadata: readonly FrontendRouteMetadata[],
+  active: FrontendRouteMetadata | undefined,
+): FrontendRouteMetadata[] {
+  if (active === undefined) return [];
+  const byId = new Map(metadata.map((route) => [route.id, route]));
+  const breadcrumbs: FrontendRouteMetadata[] = [];
+  const visited = new Set<string>();
+  let current: FrontendRouteMetadata | undefined = active;
+  while (current !== undefined && !visited.has(current.id)) {
+    visited.add(current.id);
+    breadcrumbs.unshift(current);
+    current = current.parentId === undefined ? undefined : byId.get(current.parentId);
+  }
+  return breadcrumbs;
+}
+
+function BusinessProviders({ children }: PropsWithChildren): ReactNode {
+  return providers.reduceRight<ReactNode>(
+    (content, Provider: FrontendRuntimeProvider) => createElement(Provider, null, content),
+    children,
+  );
+}
+
+interface RuntimeErrorBoundaryState {
+  readonly error?: Error;
+}
+
+class RuntimeErrorBoundary extends Component<PropsWithChildren, RuntimeErrorBoundaryState> {
+  state: RuntimeErrorBoundaryState = {};
+
+  static getDerivedStateFromError(error: Error): RuntimeErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    console.error("Business runtime render failed", error, info.componentStack);
+  }
+
+  render(): ReactNode {
+    if (this.state.error !== undefined) {
+      return (
+        <Result
+          status="error"
+          title="页面渲染失败"
+          subTitle={this.state.error.message}
+        />
+      );
+    }
+    return this.props.children;
+  }
+}
+
+function RuntimeRoutes(): ReactNode {
+  const defaultPath = routes
+    .map((route) => route.metadata)
+    .filter((route) => route.hidden !== true)
+    .sort(orderRoutes)[0]?.path;
+  const hasRootRoute = routes.some((route) => route.metadata.path === "/");
+
+  if (routes.length === 0) {
+    return <Empty description="还没有业务页面，请在 src/pages 中创建页面" />;
+  }
+
+  return (
+    <Routes>
+      {routes.map(({ metadata, Component: Page }) => (
+        <Route
+          key={metadata.id}
+          path={metadata.path}
+          element={
+            <RuntimeErrorBoundary>
+              <Suspense fallback={<Skeleton active paragraph={{ rows: 8 }} />}>
+                <Page />
+              </Suspense>
+            </RuntimeErrorBoundary>
+          }
+        />
+      ))}
+      {!hasRootRoute && defaultPath !== undefined && (
+        <Route path="/" element={<Navigate replace to={defaultPath} />} />
+      )}
+      <Route path="*" element={<Result status="404" title="404" subTitle="页面不存在" />} />
+    </Routes>
+  );
+}
+
+function RuntimeCurrentUser({ user }: { readonly user: FrontendShellUser }): ReactNode {
+  const fallback = typeof user.name === "string" && user.name.trim().length > 0
+    ? user.name.trim().slice(0, 1)
+    : "用";
+  return (
+    <div className="harness-runtime-current-user">
+      {user.avatar ?? <Avatar size="small">{fallback}</Avatar>}
+      <div className="harness-runtime-current-user-copy">
+        <Typography.Text ellipsis>{user.name}</Typography.Text>
+        {user.description === undefined
+          ? null
+          : <Typography.Text ellipsis type="secondary" className="harness-runtime-current-user-description">{user.description}</Typography.Text>}
+      </div>
+    </div>
+  );
+}
+
+function RuntimeShell(): ReactNode {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const shellToken = useRef<symbol | undefined>(undefined);
+  const pageToken = useRef<symbol | undefined>(undefined);
+  const [shellOptions, setShellOptions] = useState<FrontendShellOptions>({});
+  const [pageRegistration, setPageRegistration] = useState<{
+    readonly routeKey: string;
+    readonly options: FrontendPageOptions;
+  }>();
+  const metadata = useMemo(() => routes.map((route) => route.metadata), []);
+  const menuItems = useMemo(() => buildMenuItems(metadata), [metadata]);
+  const activeRoute = metadata.find((route) =>
+    matchPath({ path: route.path, end: true }, location.pathname),
+  );
+  const breadcrumbs = useMemo(
+    () => buildBreadcrumbs(metadata, activeRoute),
+    [activeRoute, metadata],
+  );
+  const runtimeApi = useMemo(() => ({
+    app: appManifest,
+    routes: metadata,
+    currentPath: location.pathname,
+    navigate,
+  }), [location.pathname, metadata, navigate]);
+  const registerShell = useCallback((options: FrontendShellOptions) => {
+    const token = Symbol("frontend-shell");
+    shellToken.current = token;
+    setShellOptions(options);
+    return () => {
+      if (shellToken.current !== token) return;
+      shellToken.current = undefined;
+      setShellOptions({});
+    };
+  }, []);
+  const registerPage = useCallback((routeKey: string, options: FrontendPageOptions) => {
+    const token = Symbol("frontend-page");
+    pageToken.current = token;
+    setPageRegistration({ routeKey, options });
+    return () => {
+      if (pageToken.current !== token) return;
+      pageToken.current = undefined;
+      setPageRegistration(undefined);
+    };
+  }, []);
+  const chromeApi = useMemo<FrontendChromeRegistrationApi>(() => ({
+    routeKey: location.pathname,
+    registerShell,
+    registerPage,
+  }), [location.pathname, registerPage, registerShell]);
+  const pageOptions = pageRegistration?.routeKey === location.pathname
+    ? pageRegistration.options
+    : undefined;
+  const pageWidth = pageOptions?.width ?? "full";
+  const pageTitle = pageOptions === undefined ? undefined : pageOptions.title ?? activeRoute?.title;
+  const hasHeaderExtensions = shellOptions.headerActions !== undefined ||
+    shellOptions.currentUser !== undefined || shellOptions.userSwitcher !== undefined;
+  const hasPageHeading = pageOptions !== undefined && (
+    pageTitle !== undefined || pageOptions.description !== undefined || pageOptions.titleActions !== undefined
+  );
+
+  useEffect(() => {
+    if (stylesUrl === undefined) return undefined;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = stylesUrl;
+    link.dataset.harnessBusinessStyles = "true";
+    document.head.append(link);
+    return () => link.remove();
+  }, []);
+
+  return (
+    <FrontendRuntimeContextProvider value={runtimeApi}>
+      <FrontendChromeContextProvider value={chromeApi}>
+        <BusinessProviders>
+          <Layout className="harness-runtime-layout">
+            <Sider className="harness-runtime-sider" breakpoint="lg" collapsedWidth="0" width={232}>
+              <div className="harness-runtime-brand">
+                {appManifest.logo !== undefined && (
+                  <img alt="" className="harness-runtime-logo" src={appManifest.logo} />
+                )}
+                <Typography.Title ellipsis level={4}>{appManifest.name ?? "业务管理平台"}</Typography.Title>
+              </div>
+              <Menu
+                items={menuItems}
+                mode="inline"
+                selectedKeys={activeRoute === undefined ? [] : [activeRoute.path]}
+                onClick={({ key }) => navigate(key)}
+              />
+            </Sider>
+            <Layout className="harness-runtime-main">
+              <Header className="harness-runtime-header">
+                <div className="harness-runtime-header-inner">
+                  <Typography.Text strong ellipsis className="harness-runtime-header-brand">
+                    {appManifest.name ?? "业务管理平台"}
+                  </Typography.Text>
+                  {hasHeaderExtensions && (
+                    <Space className="harness-runtime-header-controls" size="middle">
+                      {shellOptions.headerActions}
+                      {shellOptions.userSwitcher}
+                      {shellOptions.currentUser === undefined
+                        ? null
+                        : <RuntimeCurrentUser user={shellOptions.currentUser} />}
+                    </Space>
+                  )}
+                </div>
+              </Header>
+              <Content className="harness-runtime-content">
+                <div className={`harness-runtime-content-inner harness-runtime-content-${pageWidth}`}>
+                  {breadcrumbs.length > 0 && (
+                    <Breadcrumb
+                      className="harness-runtime-breadcrumb"
+                      items={breadcrumbs.map((route, index) => ({
+                        title: index === breadcrumbs.length - 1
+                          ? route.title
+                          : <a href={`#${route.path}`}>{route.title}</a>,
+                      }))}
+                    />
+                  )}
+                  {hasPageHeading && (
+                    <div className="harness-runtime-page-heading">
+                      <div className="harness-runtime-page-heading-copy">
+                        {pageTitle === undefined
+                          ? null
+                          : <Typography.Title level={3} ellipsis className="harness-runtime-page-title">{pageTitle}</Typography.Title>}
+                        {pageOptions?.description === undefined
+                          ? null
+                          : <Typography.Paragraph type="secondary" className="harness-runtime-page-description">{pageOptions.description}</Typography.Paragraph>}
+                      </div>
+                      {pageOptions?.titleActions === undefined
+                        ? null
+                        : <div className="harness-runtime-page-title-actions">{pageOptions.titleActions}</div>}
+                    </div>
+                  )}
+                  <RuntimeRoutes />
+                </div>
+              </Content>
+            </Layout>
+          </Layout>
+        </BusinessProviders>
+      </FrontendChromeContextProvider>
+    </FrontendRuntimeContextProvider>
+  );
+}
+
+export function RuntimeApp(): ReactNode {
+  const compact = appManifest.theme?.compact === true;
+  return (
+    <ConfigProvider
+      theme={{
+        algorithm: compact ? theme.compactAlgorithm : theme.defaultAlgorithm,
+        token: {
+          colorPrimary: appManifest.theme?.colorPrimary ?? "#1677ff",
+          borderRadius: appManifest.theme?.borderRadius ?? 8,
+        },
+      }}
+    >
+      <AntApp>
+        <HashRouter>
+          <RuntimeErrorBoundary>
+            <Suspense fallback={<Skeleton active paragraph={{ rows: 8 }} />}>
+              <RuntimeShell />
+            </Suspense>
+          </RuntimeErrorBoundary>
+        </HashRouter>
+      </AntApp>
+    </ConfigProvider>
+  );
+}

package/bundled-plugins/fast-frontend/runtimes/antd-admin/src/shell/runtime.css

@@ -0,0 +1,246 @@
+:root {
+  color: #172033;
+  background: #f4f7fb;
+  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-width: 320px;
+  height: 100% !important;
+  min-height: 0 !important;
+  margin: 0;
+  overflow: hidden !important;
+}
+
+.harness-runtime-layout {
+  height: 100vh !important;
+  height: 100dvh !important;
+  min-height: 0 !important;
+  overflow: hidden !important;
+}
+
+.harness-runtime-main {
+  min-width: 0 !important;
+  min-height: 0 !important;
+  overflow: hidden !important;
+}
+
+.harness-runtime-sider {
+  height: 100%;
+  border-right: 1px solid #e7ebf2;
+  background: #fff !important;
+}
+
+.harness-runtime-sider .ant-layout-sider-children {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.harness-runtime-sider .ant-menu {
+  min-height: 0;
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.harness-runtime-brand {
+  display: flex;
+  min-height: 64px;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 20px;
+  border-bottom: 1px solid #eef1f6;
+}
+
+.harness-runtime-brand .ant-typography {
+  margin: 0;
+}
+
+.harness-runtime-logo {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
+.harness-runtime-header {
+  display: flex;
+  flex: 0 0 64px;
+  align-items: center;
+  height: 64px;
+  padding: 0 24px;
+  border-bottom: 1px solid #e7ebf2;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(10px);
+}
+
+.harness-runtime-header-inner {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.harness-runtime-header-brand {
+  min-width: 0;
+}
+
+.harness-runtime-header-controls {
+  flex: none;
+}
+
+.harness-runtime-current-user {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.harness-runtime-current-user-copy {
+  display: grid;
+  min-width: 0;
+  max-width: 168px;
+  line-height: 1.25;
+}
+
+.harness-runtime-current-user-description {
+  font-size: 12px;
+}
+
+.harness-runtime-content {
+  min-width: 0 !important;
+  min-height: 0 !important;
+  padding: 24px;
+  overflow: auto !important;
+  overscroll-behavior: contain;
+}
+
+.harness-runtime-content-inner {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.harness-runtime-content-standard {
+  max-width: 960px;
+}
+
+.harness-runtime-content-wide {
+  max-width: 1280px;
+}
+
+.harness-runtime-content-full {
+  max-width: none;
+}
+
+.harness-runtime-breadcrumb {
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.harness-runtime-page-heading {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.harness-runtime-page-heading-copy {
+  min-width: 0;
+}
+
+.harness-runtime-page-title.ant-typography,
+.harness-runtime-page-description.ant-typography {
+  margin: 0;
+}
+
+.harness-runtime-page-description.ant-typography {
+  max-width: 720px;
+  margin-top: 4px;
+}
+
+.harness-runtime-page-title-actions {
+  flex: none;
+}
+
+.harness-page-container {
+  display: grid;
+  min-width: 0;
+  gap: 16px;
+}
+
+.harness-runtime-metric-grid {
+  width: 100%;
+}
+
+.harness-runtime-metric-card {
+  height: 100%;
+}
+
+.harness-runtime-metric-description {
+  display: block;
+  margin-top: 8px;
+}
+
+.harness-runtime-data-table-card {
+  min-width: 0;
+}
+
+.harness-runtime-data-table-heading {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.harness-runtime-data-table-heading .ant-typography {
+  margin: 0;
+}
+
+.harness-runtime-crud-drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 768px) {
+  .harness-runtime-content {
+    padding: 16px;
+  }
+
+  .harness-runtime-breadcrumb {
+    margin-bottom: 12px;
+    font-size: 12px;
+  }
+
+  .harness-runtime-header-controls {
+    max-width: 72%;
+    overflow-x: auto;
+  }
+
+  .harness-runtime-current-user-copy {
+    display: none;
+  }
+
+  .harness-runtime-page-heading {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .harness-runtime-page-title-actions {
+    width: 100%;
+    overflow-x: auto;
+  }
+}

package/bundled-plugins/fast-frontend/runtimes/antd-admin/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "types"]
+}

package/bundled-plugins/fast-frontend/runtimes/antd-admin/types/runtime.consumer-smoke.ts

@@ -0,0 +1,70 @@
+import {
+  CrudDrawer,
+  DataTable,
+  FrontendShellProvider,
+  MetricGrid,
+  PageContainer,
+  StatusTag,
+  createFrontendStore,
+  defineFrontendProviders,
+  getFrontendStorage,
+  usePersistentFrontendState,
+  useFrontendRuntime,
+  type FrontendStorage,
+  type FrontendRouteMetadata,
+  type FrontendRuntimeProvider,
+} from "@harness/frontend-runtime";
+import { createElement, type ReactNode } from "react";
+
+const provider: FrontendRuntimeProvider = ({ children }) => createElement(
+  FrontendShellProvider,
+  {
+    currentUser: { name: "Runtime user", description: "管理员" },
+    headerActions: createElement("span", null, "全局操作"),
+  },
+  children,
+);
+export const smokeProviders = defineFrontendProviders([provider]);
+export const smokeStorage: FrontendStorage = getFrontendStorage("smoke");
+export const smokeStore = createFrontendStore({ rows: [{ id: "1", title: "Smoke" }] });
+
+export const smokeRoute = {
+  id: "smoke",
+  path: "/smoke",
+  title: "Smoke",
+} satisfies FrontendRouteMetadata;
+
+export function useRuntimeContractSmoke(): string {
+  return useFrontendRuntime().currentPath;
+}
+
+export function RuntimePrimitiveSmoke(): ReactNode {
+  const [filter] = usePersistentFrontendState("filter", "", { namespace: "smoke" });
+  const rows = smokeStore.useStore((state) => state.rows);
+  return createElement(
+    PageContainer,
+    {
+      title: "Runtime primitives",
+      description: filter,
+      titleActions: createElement(StatusTag, { status: "进行中" }),
+      width: "standard",
+    },
+    createElement(MetricGrid, {
+      columns: 2,
+      items: [{ key: "rows", title: "Rows", value: rows.length }],
+    }),
+    createElement(DataTable, {
+      rowKey: "id",
+      dataSource: rows,
+      columns: [{ title: "Title", dataIndex: "title" }],
+      toolbar: createElement("span", null, "Toolbar"),
+    }),
+    createElement(CrudDrawer, {
+      open: false,
+      title: "Edit",
+      initialValues: rows[0],
+      onClose: () => undefined,
+      onSubmit: () => undefined,
+    }),
+  );
+}