openxiangda 1.0.22 → 1.0.25

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/js-code-nodes/sync_roles_to_platform/index.ts

@@ -0,0 +1,33 @@
+export default async function syncRolesToPlatform(ctx: any) {
+  const appType = ctx.app.appType;
+  const roles = await ctx.methods.queryManyData(appType, "FORM_APP_ROLE", {
+    currentPage: 1,
+    pageSize: 100,
+    filters: {
+      logic: "AND",
+      rules: [
+        {
+          key: "enabled",
+          componentName: "RadioField",
+          operator: "EQ",
+          value: "enabled",
+        },
+      ],
+    },
+  });
+
+  const rows = roles?.data || roles?.list || [];
+  const synced: string[] = [];
+  for (const row of rows) {
+    const roleCode = String(row.roleCode || "").trim().toLowerCase();
+    if (!roleCode) continue;
+    await ctx.platform.api.post(`/openxiangda-api/v1/apps/${appType}/roles`, {
+      code: roleCode,
+      name: row.roleName || roleCode,
+      description: "由业务角色维护表同步",
+    });
+    synced.push(roleCode);
+  }
+
+  return { synced };
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/interactive-workbench/App.tsx

@@ -0,0 +1,7 @@
+import "./styles.css";
+
+import { WorkbenchPage } from "./WorkbenchPage";
+
+export default function App() {
+  return <WorkbenchPage />;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/interactive-workbench/WorkbenchPage.tsx

@@ -0,0 +1,36 @@
+import { Button, Card, Space, Typography } from "antd";
+import { useReducer } from "react";
+
+import { ConfigPanel } from "./components/ConfigPanel";
+import { PreviewPanel } from "./components/PreviewPanel";
+import { initialWorkbenchState, workbenchReducer } from "./reducer";
+
+export function WorkbenchPage() {
+  const [state, dispatch] = useReducer(workbenchReducer, initialWorkbenchState);
+  return (
+    <main className="bp-workbench">
+      <section className="bp-workbench__header">
+        <div>
+          <Typography.Title level={3}>交互工作台</Typography.Title>
+          <Typography.Text type="secondary">
+            reducer 管理交互状态，面板拆分，页面只负责组合。
+          </Typography.Text>
+        </div>
+        <Space>
+          <Button disabled={!state.dirty} onClick={() => dispatch({ type: "saved" })}>
+            保存
+          </Button>
+          <Button type="primary">发布</Button>
+        </Space>
+      </section>
+      <section className="bp-workbench__grid">
+        <Card title="配置">
+          <ConfigPanel state={state} dispatch={dispatch} />
+        </Card>
+        <Card title="预览">
+          <PreviewPanel state={state} />
+        </Card>
+      </section>
+    </main>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/interactive-workbench/components/ConfigPanel.tsx

@@ -0,0 +1,34 @@
+import { Input, Segmented, Space } from "antd";
+import type { Dispatch } from "react";
+
+import type { WorkbenchAction, WorkbenchState } from "../reducer";
+
+export function ConfigPanel(props: {
+  state: WorkbenchState;
+  dispatch: Dispatch<WorkbenchAction>;
+}) {
+  return (
+    <Space direction="vertical" className="bp-workbench__panel" size="middle">
+      <Input
+        value={props.state.draftName}
+        onChange={(event) =>
+          props.dispatch({ type: "rename", name: event.target.value })
+        }
+      />
+      <Segmented
+        value={props.state.selectedMode}
+        options={[
+          { label: "规划", value: "plan" },
+          { label: "预览", value: "preview" },
+          { label: "发布", value: "publish" },
+        ]}
+        onChange={(mode) =>
+          props.dispatch({
+            type: "selectMode",
+            mode: mode as WorkbenchState["selectedMode"],
+          })
+        }
+      />
+    </Space>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/interactive-workbench/components/PreviewPanel.tsx

@@ -0,0 +1,17 @@
+import { Descriptions, Tag } from "antd";
+
+import type { WorkbenchState } from "../reducer";
+
+export function PreviewPanel({ state }: { state: WorkbenchState }) {
+  return (
+    <Descriptions column={1} size="small">
+      <Descriptions.Item label="方案">{state.draftName}</Descriptions.Item>
+      <Descriptions.Item label="模式">{state.selectedMode}</Descriptions.Item>
+      <Descriptions.Item label="状态">
+        <Tag color={state.dirty ? "warning" : "success"}>
+          {state.dirty ? "有未保存修改" : "已保存"}
+        </Tag>
+      </Descriptions.Item>
+    </Descriptions>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/interactive-workbench/index.tsx

@@ -0,0 +1,10 @@
+import { createReactPage } from "openxiangda/runtime";
+
+import App from "./App";
+
+const page = createReactPage(App);
+
+export const mount = page.mount;
+export const update = page.update;
+export const unmount = page.unmount;
+export default page;

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/interactive-workbench/page.config.ts

@@ -0,0 +1,9 @@
+import { definePageConfig } from "@/types/app-workspace.types";
+
+export default definePageConfig({
+  code: "interactive_workbench",
+  name: "交互工作台",
+  description: "纯复杂交互页面示例",
+  route: { pathKey: "interactive_workbench" },
+  menu: { name: "交互工作台" },
+});

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/interactive-workbench/reducer.ts

@@ -0,0 +1,29 @@
+export interface WorkbenchState {
+  selectedMode: "plan" | "preview" | "publish";
+  draftName: string;
+  dirty: boolean;
+}
+
+export type WorkbenchAction =
+  | { type: "selectMode"; mode: WorkbenchState["selectedMode"] }
+  | { type: "rename"; name: string }
+  | { type: "saved" };
+
+export const initialWorkbenchState: WorkbenchState = {
+  selectedMode: "plan",
+  draftName: "运营方案",
+  dirty: false,
+};
+
+export function workbenchReducer(
+  state: WorkbenchState,
+  action: WorkbenchAction,
+): WorkbenchState {
+  if (action.type === "selectMode") {
+    return { ...state, selectedMode: action.mode };
+  }
+  if (action.type === "rename") {
+    return { ...state, draftName: action.name, dirty: true };
+  }
+  return { ...state, dirty: false };
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/interactive-workbench/styles.css

@@ -0,0 +1,24 @@
+.bp-workbench {
+  display: grid;
+  gap: var(--sy-spacing-lg);
+  min-height: 100%;
+  padding: var(--sy-spacing-lg);
+  background: var(--sy-color-bg-layout);
+}
+
+.bp-workbench__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sy-spacing-md);
+}
+
+.bp-workbench__grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
+  gap: var(--sy-spacing-md);
+}
+
+.bp-workbench__panel {
+  width: 100%;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mobile-portal-shell/App.tsx

@@ -0,0 +1,7 @@
+import "./styles.css";
+
+import { MobilePortalShell } from "./MobilePortalShell";
+
+export default function App() {
+  return <MobilePortalShell />;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mobile-portal-shell/MobilePortalShell.tsx

@@ -0,0 +1,31 @@
+import { Card, NavBar, SafeArea, TabBar } from "antd-mobile";
+import { useNavigation, usePageRoute } from "openxiangda/runtime";
+
+import { mobilePortalRoutes, parseMobilePortalRoute } from "./routes";
+import { MobileHome } from "./modules/MobileHome";
+
+export function MobilePortalShell() {
+  const route = parseMobilePortalRoute(usePageRoute().query.route as string);
+  const navigation = useNavigation();
+
+  return (
+    <main className="bp-mobile-shell">
+      <NavBar back={null}>移动工作门户</NavBar>
+      <section className="bp-mobile-shell__content">
+        {route === "home" ? (
+          <MobileHome />
+        ) : (
+          <Card title={route === "tickets" ? "工单" : "我的"}>
+            移动端仅保留高频任务，业务规则复用 PC 的 domain/service。
+          </Card>
+        )}
+      </section>
+      <TabBar activeKey={route} onChange={(key) => navigation.replaceRoute(key)}>
+        {mobilePortalRoutes.map((item) => (
+          <TabBar.Item key={item.key} title={item.label} />
+        ))}
+      </TabBar>
+      <SafeArea position="bottom" />
+    </main>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mobile-portal-shell/index.tsx

@@ -0,0 +1,10 @@
+import { createReactPage } from "openxiangda/runtime";
+
+import App from "./App";
+
+const page = createReactPage(App);
+
+export const mount = page.mount;
+export const update = page.update;
+export const unmount = page.unmount;
+export default page;

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mobile-portal-shell/modules/MobileHome.tsx

@@ -0,0 +1,13 @@
+import { Card, List } from "antd-mobile";
+
+export function MobileHome() {
+  return (
+    <Card title="今日概览">
+      <List>
+        <List.Item extra="18">待处理</List.Item>
+        <List.Item extra="5">超时风险</List.Item>
+        <List.Item extra="64">本周完成</List.Item>
+      </List>
+    </Card>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mobile-portal-shell/page.config.ts

@@ -0,0 +1,14 @@
+import { definePageConfig } from "@/types/app-workspace.types";
+
+export default definePageConfig({
+  code: "mobile_portal_shell",
+  name: "移动工作门户",
+  description: "Mobile app-shell 入口示例",
+  route: { pathKey: "mobile_portal_shell" },
+  entry: {
+    mode: "app-shell",
+    hidePlatformNav: true,
+    defaultRoute: "home",
+  },
+  menu: { name: "移动工作门户" },
+});

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mobile-portal-shell/routes.ts

@@ -0,0 +1,13 @@
+export type MobilePortalRoute = "home" | "tickets" | "mine";
+
+export const mobilePortalRoutes: Array<{ key: MobilePortalRoute; label: string }> = [
+  { key: "home", label: "首页" },
+  { key: "tickets", label: "工单" },
+  { key: "mine", label: "我的" },
+];
+
+export function parseMobilePortalRoute(value?: string): MobilePortalRoute {
+  return mobilePortalRoutes.some((item) => item.key === value)
+    ? (value as MobilePortalRoute)
+    : "home";
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mobile-portal-shell/styles.css

@@ -0,0 +1,11 @@
+.bp-mobile-shell {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  background: var(--sy-color-bg-layout);
+}
+
+.bp-mobile-shell__content {
+  flex: 1;
+  padding: var(--sy-spacing-md);
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/pc-portal-shell/App.tsx

@@ -0,0 +1,7 @@
+import "./styles.css";
+
+import { PcPortalShell } from "./PcPortalShell";
+
+export default function App() {
+  return <PcPortalShell />;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/pc-portal-shell/PcPortalShell.tsx

@@ -0,0 +1,35 @@
+import { Layout, Menu, Typography } from "antd";
+import { useNavigation, usePageRoute } from "openxiangda/runtime";
+
+import { pcPortalRoutes, parsePcPortalRoute } from "./routes";
+import { HomeModule } from "./modules/HomeModule";
+import { TicketsModule } from "./modules/TicketsModule";
+
+const { Content, Sider } = Layout;
+
+export function PcPortalShell() {
+  const route = parsePcPortalRoute(usePageRoute().query.route as string);
+  const navigation = useNavigation();
+
+  return (
+    <Layout className="bp-pc-shell">
+      <Sider width={220} className="bp-pc-shell__sider">
+        <Typography.Title level={4} className="bp-pc-shell__brand">
+          运营门户
+        </Typography.Title>
+        <Menu
+          mode="inline"
+          selectedKeys={[route]}
+          items={pcPortalRoutes.map((item) => ({
+            key: item.key,
+            label: item.label,
+          }))}
+          onClick={(item) => navigation.replaceRoute(String(item.key))}
+        />
+      </Sider>
+      <Content className="bp-pc-shell__content">
+        {route === "home" ? <HomeModule /> : <TicketsModule route={route} />}
+      </Content>
+    </Layout>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/pc-portal-shell/components/PortalMetric.tsx

@@ -0,0 +1,11 @@
+import { Card, Typography } from "antd";
+
+export function PortalMetric(props: { label: string; value: string; trend: string }) {
+  return (
+    <Card className="bp-portal-metric">
+      <Typography.Text type="secondary">{props.label}</Typography.Text>
+      <div className="bp-portal-metric__value">{props.value}</div>
+      <Typography.Text type="secondary">{props.trend}</Typography.Text>
+    </Card>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/pc-portal-shell/index.tsx

@@ -0,0 +1,10 @@
+import { createReactPage } from "openxiangda/runtime";
+
+import App from "./App";
+
+const page = createReactPage(App);
+
+export const mount = page.mount;
+export const update = page.update;
+export const unmount = page.unmount;
+export default page;

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/pc-portal-shell/modules/HomeModule.tsx

@@ -0,0 +1,25 @@
+import { Card, Col, Row, Typography } from "antd";
+
+import { PortalMetric } from "../components/PortalMetric";
+
+export function HomeModule() {
+  return (
+    <section className="bp-pc-shell__module">
+      <Typography.Title level={3}>工作台</Typography.Title>
+      <Row gutter={[16, 16]}>
+        <Col span={8}>
+          <PortalMetric label="待处理工单" value="18" trend="较昨日 +3" />
+        </Col>
+        <Col span={8}>
+          <PortalMetric label="本周完成" value="64" trend="完成率 92%" />
+        </Col>
+        <Col span={8}>
+          <PortalMetric label="超时风险" value="5" trend="需要关注" />
+        </Col>
+      </Row>
+      <Card className="bp-pc-shell__card" title="设计说明">
+        PC 门户只做路由和模块组合，业务查询、权限判断、状态流转复用 domain 和 service。
+      </Card>
+    </section>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/pc-portal-shell/modules/TicketsModule.tsx

@@ -0,0 +1,14 @@
+import { Card, Typography } from "antd";
+
+import type { PcPortalRoute } from "../routes";
+
+export function TicketsModule({ route }: { route: PcPortalRoute }) {
+  return (
+    <section className="bp-pc-shell__module">
+      <Typography.Title level={3}>{route === "tickets" ? "工单" : "模块"}</Typography.Title>
+      <Card>
+        复制模板到真实项目后，在这里组合 `service-ticket-ops` 或角色治理模块。
+      </Card>
+    </section>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/pc-portal-shell/page.config.ts

@@ -0,0 +1,14 @@
+import { definePageConfig } from "@/types/app-workspace.types";
+
+export default definePageConfig({
+  code: "pc_portal_shell",
+  name: "PC 工作门户",
+  description: "PC app-shell 入口示例",
+  route: { pathKey: "pc_portal_shell" },
+  entry: {
+    mode: "app-shell",
+    hidePlatformNav: true,
+    defaultRoute: "home",
+  },
+  menu: { name: "PC 工作门户" },
+});

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/pc-portal-shell/routes.ts

@@ -0,0 +1,19 @@
+export type PcPortalRoute = "home" | "tickets" | "roles" | "settings";
+
+export const defaultPcPortalRoute: PcPortalRoute = "home";
+
+export const pcPortalRoutes: Array<{
+  key: PcPortalRoute;
+  label: string;
+}> = [
+  { key: "home", label: "工作台" },
+  { key: "tickets", label: "工单" },
+  { key: "roles", label: "角色治理" },
+  { key: "settings", label: "设置" },
+];
+
+export function parsePcPortalRoute(value?: string): PcPortalRoute {
+  return pcPortalRoutes.some((item) => item.key === value)
+    ? (value as PcPortalRoute)
+    : defaultPcPortalRoute;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/pc-portal-shell/styles.css

@@ -0,0 +1,35 @@
+.bp-pc-shell {
+  min-height: 100%;
+  background: var(--sy-color-bg-layout);
+}
+
+.bp-pc-shell__sider {
+  border-right: 1px solid var(--sy-color-border-secondary);
+  background: var(--sy-color-bg-container);
+}
+
+.bp-pc-shell__brand {
+  margin: 0;
+  padding: var(--sy-spacing-lg);
+}
+
+.bp-pc-shell__content {
+  padding: var(--sy-spacing-lg);
+}
+
+.bp-pc-shell__module {
+  display: grid;
+  gap: var(--sy-spacing-md);
+}
+
+.bp-pc-shell__card,
+.bp-portal-metric {
+  border-radius: var(--sy-radius-lg);
+}
+
+.bp-portal-metric__value {
+  margin: var(--sy-spacing-sm) 0;
+  color: var(--sy-color-text);
+  font-size: var(--sy-font-size-2xl);
+  font-weight: 600;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/service-ticket-ops/App.tsx

@@ -0,0 +1,7 @@
+import "./styles.css";
+
+import { TicketOpsPage } from "./TicketOpsPage";
+
+export default function App() {
+  return <TicketOpsPage />;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/service-ticket-ops/TicketOpsPage.tsx

@@ -0,0 +1,105 @@
+import { App as AntdApp, Button, Input, Space, Typography } from "antd";
+import { DataManagementList } from "openxiangda";
+import { usePageContext, usePageSdk } from "openxiangda/runtime";
+import { useMemo, useState } from "react";
+
+import type { TicketOperator, TicketRecord } from "@/domain/service-ticket";
+import { QueryState } from "@/shared/components/QueryState";
+import { SERVICE_TICKET_FORM_UUID } from "@/shared/services/service-ticket";
+import { useTicketOps } from "@/shared/hooks/useTicketOps";
+
+import { TicketActionTimeline } from "./components/TicketActionTimeline";
+import { TicketDetailDrawer } from "./components/TicketDetailDrawer";
+import { buildTicketRowActions } from "./components/TicketTableActions";
+
+const { Title, Text } = Typography;
+
+function useOperator(): TicketOperator {
+  const context = usePageContext();
+  const roleCodes = Array.isArray(context.permissions.roleCodes)
+    ? (context.permissions.roleCodes as string[])
+    : [];
+  return {
+    userId: context.user.id,
+    userName: context.user.name || context.user.username,
+    roleCodes,
+    departmentIds:
+      context.user.departments
+        ?.map((item) => item.id)
+        .filter((id): id is string => Boolean(id)) || [],
+  };
+}
+
+export function TicketOpsPage() {
+  const sdk = usePageSdk();
+  const context = usePageContext();
+  const operator = useOperator();
+  const ticketOps = useTicketOps(sdk, operator);
+  const [selectedTicket, setSelectedTicket] = useState<TicketRecord | null>(null);
+  const [keyword, setKeyword] = useState("");
+  const { message } = AntdApp.useApp();
+
+  const rowActions = useMemo(
+    () =>
+      buildTicketRowActions({
+        operator,
+        submittingAction: ticketOps.submittingAction,
+        onAction: async (ticket, action) => {
+          await ticketOps.runAction(ticket, action);
+          message.success("工单状态已更新");
+        },
+        onDetail: setSelectedTicket,
+      }),
+    [message, operator, ticketOps],
+  );
+
+  return (
+    <main className="bp-ticket-ops">
+      <section className="bp-ticket-ops__header">
+        <div>
+          <Title level={3} className="bp-ticket-ops__title">
+            工单运营台
+          </Title>
+          <Text type="secondary">
+            状态流转由 domain/state-machine 控制，页面只组合筛选、列表和操作。
+          </Text>
+        </div>
+        <Space>
+          <Input.Search
+            allowClear
+            value={keyword}
+            placeholder="按标题或描述查询"
+            onChange={(event) => setKeyword(event.target.value)}
+            onSearch={(nextKeyword) =>
+              ticketOps.setSearch((current) => ({
+                ...current,
+                keyword: nextKeyword,
+              }))
+            }
+          />
+          <Button loading={ticketOps.refreshing} onClick={ticketOps.reload}>
+            刷新
+          </Button>
+        </Space>
+      </section>
+
+      <QueryState error={ticketOps.error} onRetry={ticketOps.reload} />
+
+      <DataManagementList
+        appType={context.app.appType}
+        formUuid={SERVICE_TICKET_FORM_UUID}
+        title="工单列表"
+        formTitle="服务工单"
+        fullHeight={false}
+        rowActions={rowActions}
+        maxVisibleRowActions={3}
+      />
+
+      <TicketDetailDrawer
+        ticket={selectedTicket}
+        onClose={() => setSelectedTicket(null)}
+        extra={<TicketActionTimeline ticketId={selectedTicket?.formInstanceId || ""} />}
+      />
+    </main>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/service-ticket-ops/components/TicketActionTimeline.tsx

@@ -0,0 +1,22 @@
+import { Timeline, Typography } from "antd";
+
+export function TicketActionTimeline({ ticketId }: { ticketId: string }) {
+  if (!ticketId) return null;
+  return (
+    <section className="bp-ticket-timeline">
+      <Typography.Title level={5}>操作日志</Typography.Title>
+      <Timeline
+        items={[
+          {
+            color: "blue",
+            children: "复制本模板后，在 service 层调用 queryTicketActionLogs 加载真实日志。",
+          },
+          {
+            color: "gray",
+            children: `当前工单实例: ${ticketId}`,
+          },
+        ]}
+      />
+    </section>
+  );
+}