openxiangda 1.0.41 → 1.0.43

package/templates/sy-lowcode-app-workspace/src/dev/App.tsx

@@ -1,36 +1,788 @@
-import { Card, Divider, Space, Typography } from "antd";
+import { ReloadOutlined, UserSwitchOutlined } from "@ant-design/icons";
+import { Alert, Button, Card, Empty, Input, Select, Space, Spin, Tag, Typography, message, Modal } from "antd";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { BuiltinRouteRenderer, resolveBrowserRuntimeRoute } from "openxiangda/runtime";
+import type {
+  BrowserRuntimeRouteResolution,
+  PageApiResponse,
+  PageBinaryResponse,
+  PageContext,
+  PageRequestOptions,
+} from "openxiangda/runtime";
+import { runtimeRouteOverrides } from "../runtime/builtin-overrides";
 
-const { Paragraph, Text, Title } = Typography;
+type PageConfig = {
+  code?: string;
+  name?: string;
+  description?: string;
+  route?: {
+    pathKey?: string;
+    [key: string]: unknown;
+  };
+  entry?: {
+    mode?: string;
+    hidePlatformNav?: boolean;
+    defaultRoute?: string;
+    [key: string]: unknown;
+  };
+  menu?: {
+    name?: string;
+    [key: string]: unknown;
+  };
+  publish?: boolean;
+  [key: string]: unknown;
+};
+
+type RuntimeModule = {
+  mount?: (el: HTMLElement, context: PageContext) => void | Promise<void>;
+  update?: (el: HTMLElement, context: PageContext) => void | Promise<void>;
+  unmount?: (el?: HTMLElement, context?: PageContext) => void | Promise<void>;
+  default?: RuntimeModule;
+};
+
+type PageOption = {
+  dirName: string;
+  config: PageConfig;
+  module?: RuntimeModule;
+};
+
+type UserProfile = {
+  id?: string;
+  username?: string;
+  name?: string;
+  tenantId?: string;
+  departments?: Array<{ id: string; name: string }>;
+  isGuest?: boolean;
+  isPlatFormAdmin?: boolean;
+  isAppAdmin?: boolean;
+};
+
+const configModules = (import.meta as any).glob("../pages/*/page.config.ts", {
+  eager: true,
+}) as Record<string, { default?: PageConfig } & PageConfig>;
+
+const pageModules = (import.meta as any).glob("../pages/*/index.tsx", {
+  eager: true,
+}) as Record<string, RuntimeModule>;
+
+const servicePrefix = (process.env.APP_SERVICE_PREFIX || "/service").replace(
+  /\/+$/,
+  "",
+);
+
+const appType =
+  process.env.OPENXIANGDA_APP_TYPE ||
+  process.env.APP_TYPE ||
+  "APP_XXXXXXXXXXXXXXXX";
+
+const hasPlatformProxy = Boolean(
+  process.env.OPENXIANGDA_BASE_URL || process.env.APP_PLATFORM_URL,
+);
+
+const LOCATION_CHANGE_EVENT = "openxiangda:location-change";
+
+const getDirName = (path: string) => path.match(/\/pages\/([^/]+)\//)?.[1] || "";
+
+const getPageIdentity = (page: PageOption) =>
+  page.config.route?.pathKey || page.config.code || page.dirName;
+
+const getLocationKey = () =>
+  `${window.location.pathname}${window.location.search}${window.location.hash}`;
+
+const emitLocationChange = () => {
+  window.dispatchEvent(new Event(LOCATION_CHANGE_EVENT));
+};
+
+const setBrowserUrl = (
+  method: "pushState" | "replaceState",
+  url: string,
+) => {
+  window.history[method](null, "", url);
+  emitLocationChange();
+};
+
+const createSearchParams = (query?: Record<string, unknown>) => {
+  const params = new URLSearchParams();
+  Object.entries(query || {}).forEach(([key, value]) => {
+    if (value === undefined || value === null || value === "") return;
+    if (Array.isArray(value)) {
+      value.forEach(item => params.append(key, String(item)));
+      return;
+    }
+    params.set(key, String(value));
+  });
+  return params;
+};
+
+const getRouteSegments = (pathname = window.location.pathname) => {
+  const segments = pathname.split("/").filter(Boolean);
+  return segments[0] === "view" ? segments.slice(1) : segments;
+};
+
+const getWorkbenchPageKeyFromPath = (pathname = window.location.pathname) => {
+  const segments = getRouteSegments(pathname);
+  if (segments[0] === appType && segments[1] === "workbench") {
+    return segments[2] || "";
+  }
+  return "";
+};
+
+const normalizeModule = (moduleValue?: RuntimeModule): RuntimeModule => {
+  if (moduleValue?.default && (moduleValue.default.mount || moduleValue.default.unmount)) {
+    return {
+      ...moduleValue.default,
+      ...moduleValue,
+    };
+  }
+  return moduleValue || {};
+};
+
+const appendQuery = (url: string, query?: string) => {
+  if (!query) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}${query}`;
+};
+
+const normalizeQueryString = (query?: unknown) => {
+  if (!query) return undefined;
+  if (typeof query === "string") return query;
+  if (query instanceof URLSearchParams) return query.toString();
+  if (typeof query === "object") {
+    const params = createSearchParams(query as Record<string, unknown>);
+    return params.toString() || undefined;
+  }
+  return String(query);
+};
+
+const joinServicePath = (path: string) => {
+  if (/^https?:\/\//i.test(path)) return path;
+  if (path.startsWith(servicePrefix || "/service")) return path;
+  return `${servicePrefix}${path.startsWith("/") ? path : `/${path}`}`;
+};
+
+const normalizeMethod = (method?: string) => {
+  const value = String(method || "get").toUpperCase();
+  return ["GET", "POST", "PUT", "DELETE", "PATCH"].includes(value)
+    ? value
+    : "GET";
+};
+
+const parseJsonResponse = async <T,>(response: Response): Promise<PageApiResponse<T>> => {
+  const payload = await response.json().catch(() => null);
+  if (!response.ok) {
+    throw new Error(payload?.message || response.statusText || "请求失败");
+  }
+  if (payload && typeof payload === "object" && "code" in payload) {
+    return {
+      code: Number(payload.code || response.status),
+      success: payload.code === 200 || payload.success === true,
+      message: payload.message,
+      result: payload.data ?? payload.result ?? null,
+      data: payload.data,
+      raw: payload,
+    };
+  }
+  return {
+    code: response.status,
+    success: response.ok,
+    message: response.statusText,
+    result: payload,
+    data: payload,
+    raw: payload,
+  };
+};
+
+const requestJson = async <T,>(options: PageRequestOptions): Promise<PageApiResponse<T>> => {
+  const url = appendQuery(joinServicePath(options.path), normalizeQueryString(options.query));
+  const headers = new Headers(options.headers as HeadersInit);
+  let body: BodyInit | undefined;
+  if (options.body !== undefined) {
+    headers.set("Content-Type", headers.get("Content-Type") || "application/json");
+    body = JSON.stringify(options.body);
+  }
+  const response = await fetch(url, {
+    method: normalizeMethod(options.method),
+    headers,
+    body,
+    credentials: "include",
+  });
+  return parseJsonResponse<T>(response);
+};
+
+const requestBinary = async (
+  options: PageRequestOptions,
+): Promise<PageBinaryResponse> => {
+  const url = appendQuery(joinServicePath(options.path), normalizeQueryString(options.query));
+  const response = await fetch(url, {
+    method: normalizeMethod(options.method),
+    headers: options.headers as HeadersInit,
+    body: options.body === undefined ? undefined : JSON.stringify(options.body),
+    credentials: "include",
+  });
+  if (!response.ok) {
+    throw new Error(response.statusText || "下载失败");
+  }
+  const headers = Object.fromEntries(response.headers.entries());
+  return {
+    blob: await response.blob(),
+    contentType: response.headers.get("content-type") || undefined,
+    fileName: response.headers.get("content-disposition") || undefined,
+    headers,
+  };
+};
+
+const buildRouteInfo = (selected?: PageOption) => {
+  const url = new URL(window.location.href);
+  const query: Record<string, string | string[]> = {};
+  url.searchParams.forEach((value, key) => {
+    const current = query[key];
+    if (current === undefined) {
+      query[key] = value;
+    } else if (Array.isArray(current)) {
+      query[key] = [...current, value];
+    } else {
+      query[key] = [current, value];
+    }
+  });
+  return {
+    pathname: url.pathname,
+    fullPath: `${url.pathname}${url.search}${url.hash}`,
+    params: {
+      appType,
+      pageKey: selected?.config.route?.pathKey || selected?.config.code || selected?.dirName,
+    },
+    query,
+    hash: url.hash,
+  };
+};
+
+const createFallbackUser = (profile?: UserProfile) => ({
+  id: profile?.id || "local-dev-user",
+  name: profile?.name || profile?.username || "Local Developer",
+  username: profile?.username || profile?.name || "local-dev-user",
+  tenantId: profile?.tenantId || "",
+  departments: profile?.departments || [],
+  isGuest: profile?.isGuest || false,
+});
+
+const createPageContext = (
+  selected: PageOption,
+  profile: UserProfile | null,
+): PageContext => ({
+  protocolVersion: "1.0",
+  app: {
+    appType,
+    name: appType,
+  } as any,
+  page: {
+    id: selected.config.code || selected.dirName,
+    code: selected.config.code || selected.dirName,
+    name: selected.config.name || selected.dirName,
+    type: "custom",
+    rendererType: "custom_bundle",
+    routeKey:
+      selected.config.route?.pathKey || selected.config.code || selected.dirName,
+    legacyFormUuid: selected.config.code || selected.dirName,
+    status: "local",
+    props: {},
+    route: selected.config.route || {},
+    entry: selected.config.entry || {},
+    dataSources: [],
+    capabilities: {},
+  },
+  user: createFallbackUser(profile || undefined) as any,
+  route: buildRouteInfo(selected),
+  env: {
+    mode: "local",
+    servicePrefix,
+  },
+  permissions: {
+    canView: true,
+    hasFullAccess: true,
+  } as any,
+  capabilities: ["navigation", "ui.message", "ui.modal", "transport.request", "transport.download"],
+  ui: {
+    message: {
+      success: (text: string) => message.success(text),
+      error: (text: string) => message.error(text),
+      warning: (text: string) => message.warning(text),
+      info: (text: string) => message.info(text),
+      loading: (text: string) => {
+        const hide = message.loading(text, 0);
+        return () => {
+          if (typeof hide === "function") hide();
+        };
+      },
+    },
+    modal: {
+      confirm: (input: { title: string; content: string }) =>
+        new Promise<boolean>(resolve => {
+          Modal.confirm({
+            title: input.title,
+            content: input.content,
+            onOk: () => resolve(true),
+            onCancel: () => resolve(false),
+          });
+        }),
+    },
+  },
+  navigation: {
+    pushPage: (pageKey: string, query?: Record<string, unknown>) => {
+      const params = createSearchParams(query);
+      setBrowserUrl(
+        "pushState",
+        `/view/${appType}/workbench/${pageKey}${params.size ? `?${params}` : ""}`,
+      );
+    },
+    replacePage: (pageKey: string, query?: Record<string, unknown>) => {
+      const params = createSearchParams(query);
+      setBrowserUrl(
+        "replaceState",
+        `/view/${appType}/workbench/${pageKey}${params.size ? `?${params}` : ""}`,
+      );
+    },
+    pushRoute: (route: string) => {
+      const url = new URL(window.location.href);
+      url.searchParams.set("route", route);
+      setBrowserUrl("pushState", `${url.pathname}${url.search}${url.hash}`);
+    },
+    replaceRoute: (route: string) => {
+      const url = new URL(window.location.href);
+      url.searchParams.set("route", route);
+      setBrowserUrl("replaceState", `${url.pathname}${url.search}${url.hash}`);
+    },
+    updateQuery: (query: Record<string, unknown>) => {
+      const url = new URL(window.location.href);
+      Object.entries(query || {}).forEach(([key, value]) => {
+        if (value === undefined || value === null || value === "") {
+          url.searchParams.delete(key);
+        } else {
+          url.searchParams.set(key, String(value));
+        }
+      });
+      setBrowserUrl("replaceState", `${url.pathname}${url.search}${url.hash}`);
+    },
+    setHash: (hash: string) => {
+      window.location.hash = hash ? (hash.startsWith("#") ? hash : `#${hash}`) : "";
+    },
+    back: () => window.history.back(),
+  },
+  bridge: {
+    invoke: async <T = unknown>(method: string, payload?: unknown): Promise<T> => {
+      if (method === "transport.request") {
+        return (await requestJson((payload || {}) as PageRequestOptions)) as T;
+      }
+      if (method === "transport.download") {
+        return (await requestBinary((payload || {}) as PageRequestOptions)) as T;
+      }
+      throw new Error(`不支持的 bridge 方法: ${method}`);
+    },
+  },
+  sdk: {
+    packageName: "openxiangda",
+    supportedBridgeMethods: ["transport.request", "transport.download"],
+  },
+});
+
+const discoverPages = (): PageOption[] => {
+  return Object.entries(configModules)
+    .map(([configPath, moduleValue]) => {
+      const dirName = getDirName(configPath);
+      const modulePath = `../pages/${dirName}/index.tsx`;
+      const config = moduleValue.default || moduleValue;
+      return {
+        dirName,
+        config,
+        module: normalizeModule(pageModules[modulePath]),
+      };
+    })
+    .filter(item => item.dirName && item.config.publish !== false)
+    .sort((left, right) =>
+      String(left.config.name || left.dirName).localeCompare(
+        String(right.config.name || right.dirName),
+        "zh-Hans-CN",
+      ),
+    );
+};
+
+const findPageByIdentity = (pages: PageOption[], identity: string) =>
+  pages.find(
+    page =>
+      page.config.code === identity ||
+      page.config.route?.pathKey === identity ||
+      page.dirName === identity,
+  );
+
+const RuntimeRouteNotice = ({
+  route,
+  routeError,
+  resolving,
+}: {
+  route: BrowserRuntimeRouteResolution | null;
+  routeError: string;
+  resolving: boolean;
+}) => {
+  if (resolving) {
+    return (
+      <Alert
+        type="info"
+        showIcon
+        message="正在解析 /view 路由..."
+        style={{ margin: 16 }}
+      />
+    );
+  }
+
+  if (routeError) {
+    return (
+      <Alert
+        type="warning"
+        showIcon
+        message="后端 runtime route resolver 不可用"
+        description={routeError}
+        style={{ margin: 16 }}
+      />
+    );
+  }
+
+  if (!route) return null;
+
+  if (route.mode === "builtin-route") {
+    return null;
+  }
+
+  if (route.mode === "legacy-fallback") {
+    return (
+      <Alert
+        type="info"
+        showIcon
+        message="后端建议走旧 view fallback"
+        description={route.fallback?.reason || route.message || "legacy-fallback"}
+        style={{ margin: 16 }}
+      />
+    );
+  }
+
+  if (route.mode === "not-found") {
+    return (
+      <Alert
+        type="warning"
+        showIcon
+        message="后端未识别该 runtime 路由"
+        description={route.message || route.path}
+        style={{ margin: 16 }}
+      />
+    );
+  }
+
+  return null;
+};
 
 export default function App() {
+  const pages = useMemo(discoverPages, []);
+  const [selectedCode, setSelectedCode] = useState(
+    () => getWorkbenchPageKeyFromPath() || (pages[0] ? getPageIdentity(pages[0]) : ""),
+  );
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [profileLoading, setProfileLoading] = useState(false);
+  const [targetUserId, setTargetUserId] = useState("");
+  const [mountError, setMountError] = useState("");
+  const [mountSeed, setMountSeed] = useState(0);
+  const [locationKey, setLocationKey] = useState(() => getLocationKey());
+  const [routeResolution, setRouteResolution] =
+    useState<BrowserRuntimeRouteResolution | null>(null);
+  const [routeResolving, setRouteResolving] = useState(false);
+  const [routeError, setRouteError] = useState("");
+  const mountRef = useRef<HTMLDivElement | null>(null);
+
+  const selected = useMemo(
+    () => findPageByIdentity(pages, selectedCode),
+    [pages, selectedCode],
+  );
+
+  const shouldBlockLocalMount =
+    routeResolution?.mode === "builtin-route" ||
+    routeResolution?.kind === "work-center" ||
+    (routeResolution?.mode === "not-found" &&
+      routeResolution.params?.routeAppType !== undefined);
+  const shouldRenderBuiltinRoute = routeResolution?.mode === "builtin-route";
+
+  const handleSelectPage = (value: string) => {
+    setSelectedCode(value);
+    setBrowserUrl("pushState", `/view/${appType}/workbench/${value}`);
+  };
+
+  const loadProfile = async () => {
+    setProfileLoading(true);
+    try {
+      const response = await requestJson<UserProfile>({
+        path: "/api/auth/profile",
+        method: "post",
+        body: { appType },
+      });
+      setProfile((response.result || response.data || null) as UserProfile | null);
+      if (response.success) {
+        message.success("已读取当前登录用户");
+      }
+    } catch (error: any) {
+      setProfile(null);
+      message.warning(error?.message || "未读取到当前登录用户");
+    } finally {
+      setProfileLoading(false);
+    }
+  };
+
+  const loginAsTargetUser = async () => {
+    const normalizedTarget = targetUserId.trim();
+    if (!normalizedTarget) {
+      message.warning("请输入目标用户 ID");
+      return;
+    }
+    const redirectPageKey =
+      (selected ? getPageIdentity(selected) : selectedCode) ||
+      getWorkbenchPageKeyFromPath();
+    const redirectUri = `${window.location.origin}/view/${appType}/workbench/${
+      redirectPageKey || ""
+    }`;
+    const response = await requestJson<{ loginUrl: string; expireIn: number }>({
+      path: `/openxiangda-api/v1/apps/${appType}/verification-login-links`,
+      method: "post",
+      body: {
+        targetUserId: normalizedTarget,
+        redirectUri,
+        purpose: "workspace-dev-preview",
+      },
+    });
+    const loginUrl = response.result?.loginUrl || response.data?.loginUrl;
+    if (!loginUrl) {
+      throw new Error(response.message || "未生成登录链接");
+    }
+    window.location.href = loginUrl;
+  };
+
+  useEffect(() => {
+    void loadProfile();
+  }, []);
+
+  useEffect(() => {
+    const syncLocation = () => setLocationKey(getLocationKey());
+    window.addEventListener("popstate", syncLocation);
+    window.addEventListener(LOCATION_CHANGE_EVENT, syncLocation);
+    return () => {
+      window.removeEventListener("popstate", syncLocation);
+      window.removeEventListener(LOCATION_CHANGE_EVENT, syncLocation);
+    };
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const resolveRoute = async () => {
+      const pageKey = getWorkbenchPageKeyFromPath();
+      if (pageKey) {
+        setSelectedCode(pageKey);
+      }
+
+      if (!hasPlatformProxy) {
+        setRouteResolution(null);
+        setRouteError("");
+        setRouteResolving(false);
+        return;
+      }
+
+      setRouteResolving(true);
+      setRouteError("");
+      try {
+        const route = await resolveBrowserRuntimeRoute({
+          appType,
+          path: window.location.pathname,
+          search: window.location.search,
+          servicePrefix,
+        });
+        if (cancelled) return;
+        setRouteResolution(route);
+        const resolvedPageKey = route.params?.pageKey || pageKey;
+        if (
+          resolvedPageKey &&
+          (route.kind === "custom-page" || route.kind === "legacy-workbench")
+        ) {
+          setSelectedCode(resolvedPageKey);
+        }
+      } catch (error: any) {
+        if (!cancelled) {
+          setRouteResolution(null);
+          setRouteError(error?.message || "解析运行时路由失败");
+        }
+      } finally {
+        if (!cancelled) {
+          setRouteResolving(false);
+        }
+      }
+    };
+
+    void resolveRoute();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [locationKey]);
+
+  useEffect(() => {
+    let cancelled = false;
+    let cleanup: (() => Promise<void> | void) | undefined;
+
+    const mount = async () => {
+      setMountError("");
+      const host = mountRef.current;
+      if (!host) return;
+      host.innerHTML = "";
+      if (shouldBlockLocalMount) return;
+      if (!selected) {
+        if (selectedCode) {
+          setMountError(`本地 src/pages 中没有找到页面: ${selectedCode}`);
+        }
+        return;
+      }
+      const moduleValue = selected.module;
+      if (!moduleValue?.mount) {
+        setMountError(`页面 ${selected.dirName} 缺少 index.tsx runtime export`);
+        return;
+      }
+      const context = createPageContext(selected, profile);
+      try {
+        await moduleValue.mount(host, context);
+        cleanup = async () => {
+          await moduleValue.unmount?.(host, context);
+          host.innerHTML = "";
+        };
+      } catch (error: any) {
+        if (!cancelled) {
+          setMountError(error?.message || "本地页面挂载失败");
+        }
+      }
+    };
+
+    void mount();
+
+    return () => {
+      cancelled = true;
+      void cleanup?.();
+    };
+  }, [selected, profile, mountSeed, selectedCode, shouldBlockLocalMount]);
+
   return (
-    <main style={{ maxWidth: 960, margin: "0 auto", padding: 24 }}>
-      <Card>
-        <Space direction="vertical" size={12}>
-          <Title level={3} style={{ margin: 0 }}>
-            OpenXiangda Workspace
-          </Title>
-          <Paragraph style={{ margin: 0 }}>
-            Add form pages under <Text code>src/forms</Text>, code pages under{" "}
-            <Text code>src/pages</Text>, and JS_CODE nodes under{" "}
-            <Text code>src/js-code-nodes</Text>.
-          </Paragraph>
-          <Paragraph style={{ margin: 0 }}>
-            Publish from this workspace with{" "}
-            <Text code>openxiangda workspace publish --profile &lt;name&gt;</Text>.
-          </Paragraph>
-          <Divider style={{ margin: "4px 0" }} />
-          <Paragraph style={{ margin: 0 }}>
-            Best-practice templates live under{" "}
-            <Text code>examples/best-practices</Text>. They are not published by
-            default. Copy selected modules into <Text code>src</Text> when you
-            want to use them.
-          </Paragraph>
-          <Paragraph style={{ margin: 0 }}>
-            Validate the cookbook with <Text code>pnpm examples:check</Text>.
-          </Paragraph>
+    <main style={{ minHeight: "100vh", background: "#f7f8fb" }}>
+      <header
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 16,
+          padding: "16px 20px",
+          borderBottom: "1px solid #e5e7eb",
+          background: "#fff",
+          position: "sticky",
+          top: 0,
+          zIndex: 10,
+        }}
+      >
+        <Space size={16} wrap>
+          <Typography.Title level={4} style={{ margin: 0 }}>
+            OpenXiangda Runtime
+          </Typography.Title>
+          <Tag color="blue">{appType}</Tag>
+          <Select
+            style={{ minWidth: 240 }}
+            value={selected ? getPageIdentity(selected) : selectedCode || undefined}
+            placeholder="选择本地页面"
+            onChange={handleSelectPage}
+            options={pages.map(page => ({
+              value: getPageIdentity(page),
+              label: page.config.name || page.config.code || page.dirName,
+            }))}
+          />
+          <Button
+            icon={<ReloadOutlined />}
+            onClick={() => setMountSeed(value => value + 1)}
+          >
+            重新挂载
+          </Button>
+        </Space>
+
+        <Space wrap>
+          <Button loading={profileLoading} onClick={loadProfile}>
+            {profile?.name || profile?.username || "读取登录态"}
+          </Button>
+          <Input
+            style={{ width: 220 }}
+            value={targetUserId}
+            placeholder="目标用户 ID"
+            onChange={event => setTargetUserId(event.target.value)}
+            onPressEnter={() => void loginAsTargetUser()}
+          />
+          <Button
+            type="primary"
+            icon={<UserSwitchOutlined />}
+            onClick={() => void loginAsTargetUser()}
+          >
+            以该用户打开
+          </Button>
         </Space>
-      </Card>
+      </header>
+
+      {!process.env.OPENXIANGDA_BASE_URL && !process.env.APP_PLATFORM_URL ? (
+        <Alert
+          type="warning"
+          showIcon
+          message="未配置远端平台地址"
+          description="设置 OPENXIANGDA_BASE_URL 或 APP_PLATFORM_URL 后，Vite 会代理 /service 并重写 Cookie，SDK 请求才能访问远端后端。"
+          style={{ margin: 16 }}
+        />
+      ) : null}
+
+      {mountError ? (
+        <Alert type="error" showIcon message={mountError} style={{ margin: 16 }} />
+      ) : null}
+
+      <RuntimeRouteNotice
+        route={routeResolution}
+        routeError={routeError}
+        resolving={routeResolving}
+      />
+
+      {shouldRenderBuiltinRoute ? (
+        <BuiltinRouteRenderer
+          route={routeResolution}
+          appType={appType}
+          servicePrefix={servicePrefix}
+          overrides={runtimeRouteOverrides}
+          style={{ minHeight: "calc(100vh - 73px)" }}
+        />
+      ) : pages.length === 0 ? (
+        <Card style={{ margin: 16 }}>
+          <Empty
+            description={
+              <span>
+                在 <Typography.Text code>src/pages/&lt;page&gt;</Typography.Text>{" "}
+                下添加 <Typography.Text code>index.tsx</Typography.Text>、
+                <Typography.Text code>App.tsx</Typography.Text> 和{" "}
+                <Typography.Text code>page.config.ts</Typography.Text> 后即可本地预览。
+              </span>
+            }
+          />
+        </Card>
+      ) : (
+        <section style={{ minHeight: "calc(100vh - 73px)" }}>
+          {shouldBlockLocalMount ? (
+            <div style={{ padding: 16 }}>
+              <Empty description="当前路由不挂载本地代码页" />
+            </div>
+          ) : !selected && !selectedCode ? (
+            <Spin style={{ margin: 32 }} />
+          ) : (
+            <div ref={mountRef} style={{ minHeight: "calc(100vh - 73px)" }} />
+          )}
+        </section>
+      )}
     </main>
   );
 }