openxiangda 1.0.62 → 1.0.63

package/templates/openxiangda-react-spa/src/pages/defaults/FormRoutePage.tsx

@@ -1,8 +1,18 @@
-import { useEffect, useState } from "react";
+import { FileText, LogIn, Shield, Workflow } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { StandardFormPage } from "openxiangda";
 import { normalizeRuntimeFormSchema } from "openxiangda/runtime";
-import { useOpenXiangda } from "openxiangda/runtime/react";
+import { useOpenXiangda, useRuntimeAuth } from "openxiangda/runtime/react";
+
+import {
+  MacDiagnosticPanel,
+  MacPageHeader,
+  MacPanel,
+  MacPrimaryButton,
+  MacStatePage,
+  MacStatusPill,
+} from "@/shared/mac-admin";
 import {
   defaultPageOverrides,
   resolveDefaultPageOverride,
@@ -11,14 +21,28 @@ import {
 
 type Mode = "submit" | "detail" | "process";
 
+type PageError = {
+  message: string;
+  status?: number;
+  type: "unauthenticated" | "forbidden" | "unknown";
+};
+
 export function FormRoutePage({ mode }: { mode: Mode }) {
   const { appType = "", formUuid = "", formInstId = "" } = useParams();
   const navigate = useNavigate();
   const runtime = useOpenXiangda();
   const [schema, setSchema] = useState<any>(null);
-  const [error, setError] = useState<string>("");
+  const [error, setError] = useState<PageError | null>(null);
 
   useEffect(() => {
+    if (runtime.error && !runtime.data) {
+      setError({
+        message: runtime.error.message,
+        status: runtime.error.status,
+        type: runtime.error.type === "unauthenticated" || runtime.error.type === "forbidden" ? runtime.error.type : "unknown",
+      });
+      return;
+    }
     let disposed = false;
     const load = async () => {
       try {
@@ -26,27 +50,29 @@ export function FormRoutePage({ mode }: { mode: Mode }) {
           `${runtime.servicePrefix}/openxiangda-api/v1/apps/${encodeURIComponent(appType)}/forms/${encodeURIComponent(formUuid)}`,
           { credentials: "include", headers: { accept: "application/json" } },
         );
-        const payload = await response.json();
+        const payload = await response.json().catch(() => null);
         if (!response.ok || payload?.code >= 400) {
-          throw new Error(payload?.message || "表单 schema 加载失败");
+          throw createPageError(response.status, payload?.code, payload?.message || "表单 schema 加载失败");
         }
         const normalizedSchema = normalizeRuntimeFormSchema(payload, { appType, formUuid });
         if (!normalizedSchema) {
-          throw new Error("表单 schema 格式暂不支持或没有可渲染字段");
+          throw createPageError(undefined, undefined, "表单 schema 格式暂不支持或没有可渲染字段");
+        }
+        if (!disposed) {
+          setSchema(normalizedSchema);
+          setError(null);
         }
-        if (!disposed) setSchema(normalizedSchema);
       } catch (err) {
-        if (!disposed) setError(err instanceof Error ? err.message : String(err));
+        if (!disposed) {
+          setError(normalizePageError(err));
+        }
       }
     };
     void load();
     return () => {
       disposed = true;
     };
-  }, [appType, formUuid, runtime.fetchImpl, runtime.servicePrefix]);
-
-  if (error) return <DefaultState title="加载失败" description={error} />;
-  if (!schema) return <DefaultState title="加载中" description="正在读取表单配置" />;
+  }, [appType, formUuid, runtime.data, runtime.error, runtime.fetchImpl, runtime.servicePrefix]);
 
   const formType = String(schema?.template?.formType || schema?.formMeta?.formType || "").toLowerCase();
   const isProcessForm = mode === "process" || formType === "process" || formType === "flow";
@@ -61,6 +87,11 @@ export function FormRoutePage({ mode }: { mode: Mode }) {
         : isProcessForm
           ? "process-submit"
           : "form-submit";
+  const pageCopy = useMemo(() => resolvePageCopy(overrideKind, mode), [mode, overrideKind]);
+
+  if (error) return <DefaultErrorState error={error} />;
+  if (!schema) return <DefaultLoadingState description="正在读取表单配置、字段权限和默认值。" title="加载默认页" />;
+
   const Override = resolveDefaultPageOverride(defaultPageOverrides, overrideKind, formUuid);
   const defaultNode = (
     <StandardFormPage
@@ -80,28 +111,120 @@ export function FormRoutePage({ mode }: { mode: Mode }) {
   );
 
   return (
-    <div className="ox-panel p-5">
-      {Override ? (
-        <Override
-          appType={appType}
-          defaultNode={defaultNode}
-          formInstId={formInstId}
-          formUuid={formUuid}
-          kind={overrideKind}
-          schema={schema}
-        />
-      ) : (
-        defaultNode
-      )}
+    <div className="min-w-0 space-y-5">
+      <MacPageHeader
+        description={pageCopy.description}
+        eyebrow={pageCopy.eyebrow}
+        meta={
+          <>
+            <MacStatusPill tone={isProcessForm ? "amber" : "blue"}>{isProcessForm ? "流程表单" : "普通表单"}</MacStatusPill>
+            <MacStatusPill tone="emerald">后端权限兜底</MacStatusPill>
+            <MacStatusPill tone="violet">override ready</MacStatusPill>
+          </>
+        }
+        title={pageCopy.title}
+      />
+      <MacPanel className="min-w-0 overflow-hidden">
+        {Override ? (
+          <Override
+            appType={appType}
+            defaultNode={defaultNode}
+            formInstId={formInstId}
+            formUuid={formUuid}
+            kind={overrideKind}
+            schema={schema}
+          />
+        ) : (
+          defaultNode
+        )}
+      </MacPanel>
+      <MacDiagnosticPanel data={{ appType, formInstId, formUuid, kind: overrideKind }} title="默认页上下文" />
     </div>
   );
 }
 
-function DefaultState({ title, description }: { title: string; description: string }) {
+function DefaultLoadingState({ description, title }: { description: string; title: string }) {
   return (
-    <div className="ox-panel p-8">
-      <div className="text-base font-semibold text-slate-950">{title}</div>
-      <div className="mt-2 text-sm text-slate-500">{description}</div>
-    </div>
+    <MacStatePage
+      description={description}
+      icon={<FileText size={24} />}
+      status="LOADING"
+      title={title}
+    />
   );
 }
+
+function DefaultErrorState({ error }: { error: PageError }) {
+  const auth = useRuntimeAuth();
+
+  useEffect(() => {
+    if (error.type === "unauthenticated") {
+      void auth.redirectToLogin({ replace: true });
+    }
+  }, [auth, error.type]);
+
+  if (error.type === "unauthenticated") {
+    return (
+      <MacStatePage
+        actions={<MacPrimaryButton onClick={() => void auth.redirectToLogin({ replace: true })}>去登录</MacPrimaryButton>}
+        description="当前没有有效登录态，正在跳转到登录页。"
+        icon={<LogIn size={24} />}
+        status="401"
+        title="需要登录"
+      />
+    );
+  }
+
+  return (
+    <MacStatePage
+      description={error.message || "请确认当前用户是否拥有表单、流程或数据访问权限。"}
+      icon={error.type === "forbidden" ? <Shield size={24} /> : <Workflow size={24} />}
+      status={error.type === "forbidden" ? "403" : String(error.status || "ERROR")}
+      title={error.type === "forbidden" ? "无权访问默认页" : "默认页加载失败"}
+    />
+  );
+}
+
+function resolvePageCopy(kind: DefaultPageKind, mode: Mode) {
+  if (kind === "process-submit") {
+    return {
+      description: "使用 SDK 内置提交页发起流程，审批预览和字段权限由后端接口决定。",
+      eyebrow: "Process Submit",
+      title: "发起流程",
+    };
+  }
+  if (kind === "process-detail" || mode === "process") {
+    return {
+      description: "查看流程详情、审批动作和流程节点信息，操作权限由后端判定。",
+      eyebrow: "Process Detail",
+      title: "流程详情",
+    };
+  }
+  if (kind === "form-detail") {
+    return {
+      description: "查看表单详情、变更记录和字段权限状态。",
+      eyebrow: "Form Detail",
+      title: "表单详情",
+    };
+  }
+  return {
+    description: "使用 SDK 内置提交页提交普通表单，提交成功后跳转到详情页。",
+    eyebrow: "Form Submit",
+    title: "发起表单",
+  };
+}
+
+function createPageError(status: number | undefined, code: number | string | undefined, message: string): PageError {
+  const normalizedCode = typeof code === "string" ? Number(code) : code;
+  if (status === 401 || normalizedCode === 401) return { message, status, type: "unauthenticated" };
+  if (status === 403 || normalizedCode === 403) return { message, status, type: "forbidden" };
+  return { message, status, type: "unknown" };
+}
+
+function normalizePageError(error: unknown): PageError {
+  if (error && typeof error === "object" && "type" in error) return error as PageError;
+  return {
+    message: error instanceof Error ? error.message : String(error),
+    type: "unknown",
+  };
+}

package/templates/openxiangda-react-spa/src/pages/portal/UserPortalPage.tsx

@@ -1,27 +1,66 @@
-import { FileText, Inbox, Search } from "lucide-react";
+import { ArrowRight, FileText, Inbox, Search, Sparkles } from "lucide-react";
+
+import {
+  MacListItem,
+  MacMetricCard,
+  MacPageHeader,
+  MacPanel,
+  MacStatusPill,
+} from "@/shared/mac-admin";
 
 const entries = [
-  { title: "发起申请", desc: "打开常用表单和流程", icon: FileText },
-  { title: "我的待办", desc: "处理审批与办理任务", icon: Inbox },
-  { title: "数据查询", desc: "查看有权限的数据列表", icon: Search },
+  { desc: "打开常用表单和流程", icon: FileText, title: "发起申请", tone: "blue" as const },
+  { desc: "处理审批与办理任务", icon: Inbox, title: "我的待办", tone: "amber" as const },
+  { desc: "查看有权限的数据列表", icon: Search, title: "数据查询", tone: "emerald" as const },
 ];
 
 export function UserPortalPage() {
   return (
-    <div className="space-y-5">
-      <section className="ox-panel p-5">
-        <h1 className="text-xl font-semibold text-slate-950">用户门户</h1>
-        <p className="mt-1 text-sm text-slate-500">面向普通用户的入口页，和后台共享同一套权限与 SDK。</p>
-      </section>
+    <div className="min-w-0 space-y-5">
+      <MacPageHeader
+        description="面向普通用户的入口页，和后台共享同一套登录、权限与 SDK。你可以把这里替换成业务门户、移动端入口或任务中心。"
+        eyebrow="User Portal"
+        meta={
+          <>
+            <MacStatusPill tone="emerald">真实用户身份</MacStatusPill>
+            <MacStatusPill tone="blue">页面 code 权限</MacStatusPill>
+            <MacStatusPill tone="violet">可自定义路由</MacStatusPill>
+          </>
+        }
+        title="用户门户"
+      />
       <section className="grid gap-4 md:grid-cols-3">
         {entries.map(entry => (
-          <div className="ox-panel p-5" key={entry.title}>
-            <entry.icon className="text-blue-600" size={20} />
-            <div className="mt-4 text-sm font-semibold text-slate-950">{entry.title}</div>
-            <div className="mt-1 text-sm text-slate-500">{entry.desc}</div>
-          </div>
+          <MacMetricCard
+            caption={entry.desc}
+            icon={entry.icon}
+            key={entry.title}
+            label={entry.title}
+            tone={entry.tone}
+            value={<span className="text-base">进入</span>}
+          />
         ))}
       </section>
+      <MacPanel title="最近任务" description="示例内容来自 starter，真实项目可以接入流程待办或业务表单。">
+        <div className="grid gap-3 md:grid-cols-2">
+          {entries.map(entry => (
+            <MacListItem key={entry.title} tone={entry.tone}>
+              <div className="flex items-center justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-semibold text-slate-950">{entry.title}</div>
+                  <div className="mt-1 truncate text-xs text-slate-500">{entry.desc}</div>
+                </div>
+                <ArrowRight className="shrink-0 text-slate-400" size={17} />
+              </div>
+            </MacListItem>
+          ))}
+          <MacListItem icon={<Sparkles size={17} />} tone="violet">
+            <div className="text-sm leading-6 text-slate-600">
+              AI 可以通过一次性登录链接，以不同真实用户身份验证门户权限和页面状态。
+            </div>
+          </MacListItem>
+        </div>
+      </MacPanel>
     </div>
   );
 }

package/templates/openxiangda-react-spa/src/pages/public/PublicHomePage.tsx

@@ -1,10 +1,50 @@
+import { FileCheck2, Globe2, LockKeyhole, MessageSquareText } from "lucide-react";
+
+import {
+  MacListItem,
+  MacPageHeader,
+  MacPanel,
+  MacStatusPill,
+} from "@/shared/mac-admin";
+
 export function PublicHomePage() {
   return (
-    <section className="ox-panel p-6">
-      <h1 className="text-xl font-semibold text-slate-950">公开访问</h1>
-      <p className="mt-2 text-sm text-slate-500">
-        公开表单、公开查询和 ticket 状态页都应在 PublicShell 下实现，不依赖旧平台导航参数。
-      </p>
-    </section>
+    <div className="min-w-0 space-y-5">
+      <MacPageHeader
+        description="公开表单、公开查询和 ticket 状态页都在 PublicShell 下实现，不再依赖旧平台导航参数。公开链路仍需要后端接口校验。"
+        eyebrow="Public Runtime"
+        meta={
+          <>
+            <MacStatusPill tone="blue">guest</MacStatusPill>
+            <MacStatusPill tone="emerald">publicAccess</MacStatusPill>
+            <MacStatusPill tone="amber">ticket 状态</MacStatusPill>
+          </>
+        }
+        title="公开访问"
+      />
+      <MacPanel title="公开链路" description="这些是 starter 默认提供的公开页能力方向。">
+        <div className="grid gap-3 md:grid-cols-3">
+          <MacListItem icon={<Globe2 size={17} />} tone="blue">
+            <div className="text-sm font-semibold text-slate-950">公开页面</div>
+            <div className="mt-1 text-xs text-slate-500">用于无需登录的说明、查询或入口。</div>
+          </MacListItem>
+          <MacListItem icon={<FileCheck2 size={17} />} tone="emerald">
+            <div className="text-sm font-semibold text-slate-950">公开表单</div>
+            <div className="mt-1 text-xs text-slate-500">通过后端公开访问策略提交数据。</div>
+          </MacListItem>
+          <MacListItem icon={<LockKeyhole size={17} />} tone="amber">
+            <div className="text-sm font-semibold text-slate-950">Ticket 校验</div>
+            <div className="mt-1 text-xs text-slate-500">文件预览、邀请链接等短期凭证入口。</div>
+          </MacListItem>
+        </div>
+      </MacPanel>
+      <MacPanel title="公开提示">
+        <MacListItem icon={<MessageSquareText size={17} />} tone="violet">
+          <div className="text-sm leading-6 text-slate-600">
+            公开访问不是绕过权限。默认模板只负责展示与路由，最终是否允许访问仍由平台接口和公开访问配置决定。
+          </div>
+        </MacListItem>
+      </MacPanel>
+    </div>
   );
 }

package/templates/openxiangda-react-spa/src/pages/states/NotFoundPage.tsx

@@ -1,16 +1,31 @@
-import { Link } from "react-router-dom";
+import { Compass, Home } from "lucide-react";
+import { useParams } from "react-router-dom";
+
+import { MacPrimaryButton, MacSecondaryButton, MacStatePage } from "@/shared/mac-admin";
 
 export function NotFoundPage() {
+  const { appType = process.env.OPENXIANGDA_APP_TYPE || "" } = useParams();
+  const home = appType ? `/view/${appType}/admin` : "/";
+
   return (
-    <main className="grid min-h-screen place-items-center bg-[#f6f7f9] p-5">
-      <section className="ox-panel max-w-md p-8 text-center">
-        <div className="text-sm font-semibold text-blue-700">404</div>
-        <h1 className="mt-2 text-xl font-semibold text-slate-950">页面不存在</h1>
-        <p className="mt-2 text-sm text-slate-500">请检查当前 React Router 路由或平台 routeCode 配置。</p>
-        <Link className="mt-5 inline-flex rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white" to="/">
-          返回入口
-        </Link>
-      </section>
-    </main>
+    <MacStatePage
+      actions={
+        <>
+          <MacSecondaryButton onClick={() => window.history.back()}>
+            <Compass size={17} />
+            返回上一页
+          </MacSecondaryButton>
+          <MacPrimaryButton onClick={() => window.location.assign(home)}>
+            <Home size={17} />
+            返回入口
+          </MacPrimaryButton>
+        </>
+      }
+      description="请检查当前 React Router 路由、页面 code 或平台 route resolver 配置。"
+      fullScreen
+      icon={<Compass size={24} />}
+      status="404"
+      title="页面不存在"
+    />
   );
 }