openxiangda 1.0.22 → 1.0.24

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>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { Descriptions, Drawer, Typography } from "antd";
+import type { ReactNode } from "react";
+
+import { StatusTag } from "@/shared/components/StatusTag";
+import type { TicketRecord } from "@/domain/service-ticket";
+
+export function TicketDetailDrawer(props: {
+  ticket: TicketRecord | null;
+  extra?: ReactNode;
+  onClose: () => void;
+}) {
+  return (
+    <Drawer
+      title="工单详情"
+      open={Boolean(props.ticket)}
+      width={520}
+      onClose={props.onClose}
+    >
+      {props.ticket ? (
+        <div className="bp-ticket-detail">
+          <Descriptions column={1} size="small">
+            <Descriptions.Item label="标题">{props.ticket.title}</Descriptions.Item>
+            <Descriptions.Item label="状态">
+              <StatusTag status={props.ticket.status} />
+            </Descriptions.Item>
+            <Descriptions.Item label="负责人">
+              {props.ticket.currentOwner?.label || props.ticket.ownerUserId || "-"}
+            </Descriptions.Item>
+            <Descriptions.Item label="归属部门">
+              {props.ticket.ownerDeptId || "-"}
+            </Descriptions.Item>
+          </Descriptions>
+          <Typography.Paragraph className="bp-ticket-detail__description">
+            {props.ticket.description || "暂无描述"}
+          </Typography.Paragraph>
+          {props.extra}
+        </div>
+      ) : null}
+    </Drawer>
+  );
+}

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

@@ -0,0 +1,55 @@
+import type { DataManagementRowAction } from "openxiangda";
+
+import {
+  getAvailableTicketActions,
+  ticketActionLabels,
+  type TicketAction,
+  type TicketOperator,
+  type TicketRecord,
+} from "@/domain/service-ticket";
+
+const normalizeTicket = (record: any): TicketRecord => ({
+  formInstanceId:
+    record.formInstanceId || record.formInstId || record.id || record.formData?.formInstanceId,
+  title: record.title || record.formData?.title || "未命名工单",
+  status: record.status || record.formData?.status?.value || record.formData?.status || "new",
+  priority: record.priority?.value || record.formData?.priority?.value,
+  ownerUserId: record.ownerUserId || record.formData?.ownerUserId,
+  ownerDeptId: record.ownerDeptId || record.formData?.ownerDeptId,
+  collegeId: record.collegeId || record.formData?.collegeId,
+  classId: record.classId || record.formData?.classId,
+  requester: record.requester || record.formData?.requester,
+  currentOwner: record.currentOwner || record.formData?.currentOwner,
+  description: record.description || record.formData?.description,
+  lastActionAt: record.lastActionAt || record.formData?.lastActionAt,
+});
+
+export function buildTicketRowActions(options: {
+  operator: TicketOperator;
+  submittingAction: TicketAction | null;
+  onAction: (ticket: TicketRecord, action: TicketAction) => Promise<void>;
+  onDetail: (ticket: TicketRecord) => void;
+}): DataManagementRowAction[] {
+  return [
+    {
+      key: "detail",
+      label: "详情",
+      onClick: (record) => options.onDetail(normalizeTicket(record)),
+    },
+    ...(["accept", "start", "pause", "resume", "resolve", "close", "cancel"] as TicketAction[]).map(
+      (action) => ({
+        key: action,
+        label:
+          options.submittingAction === action
+            ? `${ticketActionLabels[action]}中`
+            : ticketActionLabels[action],
+        danger: action === "cancel",
+        onClick: (record: any) => {
+          const ticket = normalizeTicket(record);
+          if (!getAvailableTicketActions(ticket, options.operator).includes(action)) return;
+          void options.onAction(ticket, action);
+        },
+      }),
+    ),
+  ];
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/service-ticket-ops/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/service-ticket-ops/page.config.ts

@@ -0,0 +1,9 @@
+import { definePageConfig } from "@/types/app-workspace.types";
+
+export default definePageConfig({
+  code: "service_ticket_ops",
+  name: "工单运营台",
+  description: "状态流转型业务的数据管理页示例",
+  route: { pathKey: "service_ticket_ops" },
+  menu: { name: "工单运营台" },
+});

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

@@ -0,0 +1,35 @@
+.bp-ticket-ops {
+  min-height: 100%;
+  padding: var(--sy-spacing-lg);
+  background: var(--sy-color-bg-layout);
+}
+
+.bp-ticket-ops__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sy-spacing-md);
+  margin-bottom: var(--sy-spacing-md);
+}
+
+.bp-ticket-ops__title {
+  margin: 0;
+}
+
+.bp-ticket-detail {
+  display: grid;
+  gap: var(--sy-spacing-md);
+}
+
+.bp-ticket-detail__description {
+  padding: var(--sy-spacing-md);
+  border: 1px solid var(--sy-color-border-secondary);
+  border-radius: var(--sy-radius-md);
+  background: var(--sy-color-bg-container);
+}
+
+.bp-query-state {
+  display: grid;
+  min-height: 120px;
+  place-items: center;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/resources/automations/daily-ticket-digest/automation.json

@@ -0,0 +1,25 @@
+{
+  "version": "v3",
+  "nodes": [
+    { "id": "start", "type": "start", "data": { "label": "开始" } },
+    {
+      "id": "daily_digest",
+      "type": "js_code",
+      "data": {
+        "label": "生成每日工单摘要",
+        "runtimeMode": "trusted_node",
+        "sourceType": "file_snapshot",
+        "scriptCode": "daily_ticket_digest",
+        "sourceFile": {
+          "localPath": "src/js-code-nodes/daily_ticket_digest/index.ts"
+        },
+        "timeout": 30000
+      }
+    },
+    { "id": "end", "type": "end", "data": { "label": "结束" } }
+  ],
+  "edges": [
+    { "id": "e_start_digest", "source": "start", "target": "daily_digest" },
+    { "id": "e_digest_end", "source": "daily_digest", "target": "end" }
+  ]
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/resources/automations/daily-ticket-digest/trigger.json

@@ -0,0 +1,9 @@
+{
+  "type": "scheduled",
+  "appType": "APP_XXX",
+  "enabled": true,
+  "scheduleType": "fixed_time",
+  "fixedTime": {
+    "cronExpression": "0 0 9 * * *"
+  }
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/resources/notifications/daily-ticket-digest.json

@@ -0,0 +1,24 @@
+{
+  "templates": [
+    {
+      "code": "daily_ticket_digest",
+      "name": "每日工单摘要",
+      "variables": ["title", "count", "riskCount"],
+      "channelsConfig": {
+        "inapp": {
+          "enabled": true,
+          "title": "{{title}}",
+          "content": "今日待处理 {{count}} 条，其中超时风险 {{riskCount}} 条"
+        }
+      }
+    }
+  ],
+  "typeConfigs": [
+    {
+      "notificationType": "daily_ticket_digest",
+      "templateCode": "daily_ticket_digest",
+      "enabled": true,
+      "priority": 0
+    }
+  ]
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/resources/permissions/form-groups/service-ticket-college.json

@@ -0,0 +1,21 @@
+{
+  "formCode": "service-ticket",
+  "name": "学院管理员查看本学院工单",
+  "type": "view",
+  "roles": ["college_admin"],
+  "operations": ["view", "edit", "change_records"],
+  "dataPermission": {
+    "type": "condition",
+    "condition": {
+      "logic": "AND",
+      "rules": [
+        {
+          "field": "collegeId",
+          "componentType": "Text",
+          "op": "=",
+          "value": "${ROLE_SCOPE_COLLEGE_ID}"
+        }
+      ]
+    }
+  }
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/resources/permissions/roles.json

@@ -0,0 +1,17 @@
+[
+  {
+    "code": "app_admin",
+    "name": "应用管理员",
+    "description": "可以查看和处理全部业务数据"
+  },
+  {
+    "code": "college_admin",
+    "name": "学院管理员",
+    "description": "通过业务角色表动态维护，按 collegeId 隔离数据"
+  },
+  {
+    "code": "class_owner",
+    "name": "班级负责人",
+    "description": "通过业务角色表动态维护，按 classId 隔离数据"
+  }
+]

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/resources/workflows/expense-approval-workflow.json

@@ -0,0 +1,48 @@
+{
+  "version": "v3",
+  "nodes": [
+    { "id": "start", "type": "start", "data": { "label": "提交报销" } },
+    {
+      "id": "amount_branch",
+      "type": "condition",
+      "data": {
+        "label": "金额判断"
+      }
+    },
+    {
+      "id": "manager_approval",
+      "type": "approval",
+      "data": {
+        "label": "直属主管审批"
+      }
+    },
+    {
+      "id": "finance_approval",
+      "type": "approval",
+      "data": {
+        "label": "财务审批"
+      }
+    },
+    {
+      "id": "notify",
+      "type": "work_notification",
+      "data": {
+        "label": "审批结果通知"
+      }
+    },
+    { "id": "end", "type": "end", "data": { "label": "结束" } }
+  ],
+  "edges": [
+    { "id": "e_start_branch", "source": "start", "target": "amount_branch" },
+    { "id": "e_branch_manager", "source": "amount_branch", "target": "manager_approval" },
+    { "id": "e_manager_finance", "source": "manager_approval", "target": "finance_approval" },
+    { "id": "e_finance_notify", "source": "finance_approval", "target": "notify" },
+    { "id": "e_notify_end", "source": "notify", "target": "end" }
+  ],
+  "flowConfig": {
+    "manager_approval": [
+      { "fieldId": "amount", "fieldBehavior": "READONLY" },
+      { "fieldId": "remark", "fieldBehavior": "NORMAL" }
+    ]
+  }
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/shared/components/ConfirmAction.tsx

@@ -0,0 +1,22 @@
+import { Button, Popconfirm } from "antd";
+
+export function ConfirmAction(props: {
+  label: string;
+  title?: string;
+  danger?: boolean;
+  loading?: boolean;
+  onConfirm: () => void;
+}) {
+  return (
+    <Popconfirm
+      title={props.title || `确认${props.label}？`}
+      okText="确认"
+      cancelText="取消"
+      onConfirm={props.onConfirm}
+    >
+      <Button danger={props.danger} loading={props.loading} size="small">
+        {props.label}
+      </Button>
+    </Popconfirm>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/shared/components/QueryState.tsx

@@ -0,0 +1,37 @@
+import { Alert, Button, Empty, Spin } from "antd";
+
+export function QueryState(props: {
+  loading?: boolean;
+  error?: string | null;
+  empty?: boolean;
+  onRetry?: () => void;
+}) {
+  if (props.loading) {
+    return (
+      <div className="bp-query-state">
+        <Spin />
+      </div>
+    );
+  }
+  if (props.error) {
+    return (
+      <Alert
+        type="error"
+        showIcon
+        message="加载失败"
+        description={props.error}
+        action={
+          props.onRetry ? (
+            <Button size="small" onClick={props.onRetry}>
+              重试
+            </Button>
+          ) : null
+        }
+      />
+    );
+  }
+  if (props.empty) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />;
+  }
+  return null;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/shared/components/StatusTag.tsx

@@ -0,0 +1,20 @@
+import { Tag } from "antd";
+
+import {
+  ticketStatusLabels,
+  type TicketStatus,
+} from "@/domain/service-ticket";
+
+const statusColor: Record<TicketStatus, string> = {
+  new: "default",
+  accepted: "processing",
+  processing: "blue",
+  paused: "warning",
+  resolved: "success",
+  closed: "default",
+  cancelled: "error",
+};
+
+export function StatusTag({ status }: { status: TicketStatus }) {
+  return <Tag color={statusColor[status]}>{ticketStatusLabels[status]}</Tag>;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/shared/hooks/useTicketOps.ts

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { PageSdk } from "openxiangda/runtime";
+
+import {
+  getTicketUiPermissions,
+  type TicketAction,
+  type TicketOperator,
+  type TicketRecord,
+  type TicketSearchState,
+} from "@/domain/service-ticket";
+import {
+  queryTickets,
+  transitionTicket,
+  type TicketQueryResult,
+} from "@/shared/services/service-ticket";
+
+const initialResult: TicketQueryResult = { records: [], total: 0 };
+
+export function useTicketOps(sdk: PageSdk, operator: TicketOperator) {
+  const [search, setSearch] = useState<TicketSearchState>({});
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [result, setResult] = useState<TicketQueryResult>(initialResult);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [submittingAction, setSubmittingAction] = useState<TicketAction | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(
+    async (mode: "loading" | "refreshing" = "loading") => {
+      if (mode === "loading") setLoading(true);
+      else setRefreshing(true);
+      setError(null);
+      try {
+        const next = await queryTickets(sdk, {
+          currentPage: page,
+          pageSize,
+          search,
+        });
+        setResult(next);
+      } catch (nextError) {
+        setError(nextError instanceof Error ? nextError.message : "加载失败");
+      } finally {
+        setLoading(false);
+        setRefreshing(false);
+      }
+    },
+    [page, pageSize, sdk, search],
+  );
+
+  useEffect(() => {
+    void load("loading");
+  }, [load]);
+
+  const runAction = useCallback(
+    async (ticket: TicketRecord, action: TicketAction, comment?: string) => {
+      setSubmittingAction(action);
+      setError(null);
+      try {
+        await transitionTicket(sdk, ticket, action, operator, comment);
+        await load("refreshing");
+      } catch (nextError) {
+        setError(nextError instanceof Error ? nextError.message : "操作失败");
+      } finally {
+        setSubmittingAction(null);
+      }
+    },
+    [load, operator, sdk],
+  );
+
+  const recordsWithPermissions = useMemo(
+    () =>
+      result.records.map((ticket) => ({
+        ticket,
+        permissions: getTicketUiPermissions(ticket, operator),
+      })),
+    [operator, result.records],
+  );
+
+  return {
+    search,
+    setSearch,
+    page,
+    setPage,
+    pageSize,
+    setPageSize,
+    total: result.total,
+    recordsWithPermissions,
+    loading,
+    refreshing,
+    submittingAction,
+    error,
+    reload: () => load("refreshing"),
+    runAction,
+  };
+}