@lovrabet/rabetbase-cli 2.5.4 → 2.5.5-beta.2

package/skills/rabetbase-page-generation/templates/onepage/shared/editor.jsx

@@ -0,0 +1,395 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Alert,
+  App,
+  Button,
+  ConfigProvider,
+  Form,
+  Input,
+  InputNumber,
+  Radio,
+  Space,
+  Spin,
+  theme,
+} from "antd";
+import dayjs from "dayjs";
+import {
+  useAppContext,
+  useAppTheme,
+  useLocation,
+  useNavigate,
+  useSdkClient,
+} from "@/context/app-context";
+import {
+  DATASET_CODE,
+  LIST_PATH,
+  childPaths,
+  statusOptions,
+  typeOptions,
+  levelOptions,
+} from "./model";
+import { RecordGroups, RecordItem, recordTheme } from "./record-layout";
+import { ResponsiveDateTime } from "./responsive";
+import "./page.css";
+
+function CustomerEditor({ mode }) {
+  const hostTheme = useAppTheme();
+  const client = useSdkClient(),
+    navigate = useNavigate(),
+    location = useLocation();
+  const { onePageInfo } = useAppContext();
+  const { message, modal } = App.useApp();
+  const continueAfterSave = useRef(false);
+  const focusNextRecord = useRef(false);
+  const customerNameInput = useRef(null);
+  const [dirty, setDirty] = useState(false);
+  const [form] = Form.useForm();
+  const updating = mode === "update";
+  const rawId =
+    onePageInfo?.innerSearchParams?.id ??
+    new URLSearchParams(location.search).get("id");
+  const id = rawId == null ? "" : String(rawId).trim();
+  const [loading, setLoading] = useState(updating),
+    [error, setError] = useState("");
+  const [saving, setSaving] = useState(false),
+    [revision, setRevision] = useState(0);
+  const original = useRef(null),
+    submitting = useRef(false);
+  const model = client.models[`dataset_${DATASET_CODE}`];
+  const params =
+    onePageInfo?.innerSearchParams ??
+    Object.fromEntries(new URLSearchParams(location.search));
+  const returnDetail = updating && params.returnDetail === "1";
+  const goBack = () =>
+    returnDetail
+      ? navigate(
+          `${childPaths.detail}?${new URLSearchParams({ id, ids: String(params.ids || "") })}`,
+          { replace: true },
+        )
+      : navigate(onePageInfo ? "../" : LIST_PATH);
+  const saveLabel = returnDetail ? "保存并返回详情" : "保存并返回";
+  function backToDetail() {
+    if (!dirty) return goBack();
+    modal.confirm({
+      title: "放弃未保存的修改？",
+      content: "返回后将显示上次保存的客户信息。",
+      okText: "放弃修改",
+      cancelText: "继续编辑",
+      onOk: goBack,
+    });
+  }
+
+  useEffect(() => {
+    let active = true;
+    original.current = null;
+    setError("");
+    form.resetFields();
+    if (!updating) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    (async () => {
+      try {
+        if (!/^\d+$/.test(id))
+          throw Error("缺少或无效的客户主键，请从列表重新打开更新页");
+        const record = await model.getOne(id);
+        if (!record) throw Error("客户不存在或已被删除");
+        if (active) {
+          original.current = {
+            ...record,
+            onboarding_date: record.onboarding_date
+              ? dayjs(record.onboarding_date)
+              : null,
+          };
+          form.setFieldsValue(original.current);
+        }
+      } catch (cause) {
+        if (active) setError(cause.message || "加载失败，请重试");
+      } finally {
+        if (active) setLoading(false);
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [client, id, updating, revision, form]);
+
+  useEffect(() => {
+    if (!saving && focusNextRecord.current) {
+      focusNextRecord.current = false;
+      const frame = requestAnimationFrame(() =>
+        customerNameInput.current?.focus(),
+      );
+      return () => cancelAnimationFrame(frame);
+    }
+  }, [saving, form]);
+  const formName = `customer-${mode}`;
+  function submit(stay = false) {
+    if (submitting.current || saving || loading || error) return;
+    continueAfterSave.current = stay;
+    form.submit();
+  }
+  async function save(values) {
+    if (submitting.current || (updating && !original.current)) return;
+    submitting.current = true;
+    const stayOnCreate = !updating && continueAfterSave.current;
+    setSaving(true);
+    try {
+      const payload = {};
+      for (const key of [
+        "customer_name",
+        "status",
+        "customer_type",
+        "customer_level",
+        "contact_name",
+        "phone",
+        "email",
+        "region",
+        "annual_revenue",
+        "notes",
+      ])
+        payload[key] = values[key] ?? null;
+      payload.customer_name = values.customer_name.trim();
+      payload.onboarding_date = values.onboarding_date
+        ? values.onboarding_date.format("YYYY-MM-DD HH:mm:ss")
+        : null;
+      if (updating) await model.update(id, payload);
+      else await model.create(payload);
+      window.dispatchEvent(
+        new CustomEvent("lovrabet:page-generation:changed", {
+          detail: LIST_PATH,
+        }),
+      );
+      message.success("保存成功");
+      setDirty(false);
+      if (stayOnCreate) {
+        focusNextRecord.current = true;
+        form.resetFields();
+      } else goBack();
+    } catch (cause) {
+      message.error(cause.message || "保存失败，请重试");
+    } finally {
+      continueAfterSave.current = false;
+      submitting.current = false;
+      setSaving(false);
+    }
+  }
+
+  const controls = [
+    [
+      "customer_name",
+      "客户名称",
+      <Input allowClear />,
+      [{ required: true, whitespace: true, message: "请输入客户名称" }],
+    ],
+    ["status", "状态", <Radio.Group options={statusOptions} />],
+    ["customer_type", "客户类型", <Radio.Group options={typeOptions} />],
+    ["customer_level", "客户等级", <Radio.Group options={levelOptions} />],
+    ["contact_name", "联系人", <Input allowClear />],
+    ["phone", "电话", <Input allowClear />],
+    [
+      "email",
+      "邮箱",
+      <Input allowClear />,
+      [{ type: "email", message: "请输入有效邮箱" }],
+    ],
+    ["region", "区域", <Input allowClear />],
+    [
+      "annual_revenue",
+      "年营收",
+      <InputNumber precision={2} style={{ width: "100%" }} />,
+    ],
+    [
+      "onboarding_date",
+      "入驻日期",
+      <ResponsiveDateTime
+        placeholder="请选择入驻日期"
+        style={{ width: "100%" }}
+      />,
+    ],
+  ];
+  return (
+    <main
+      className="customer-record customer-editor"
+      onKeyDown={(event) => {
+        if (
+          (event.ctrlKey || event.metaKey) &&
+          event.key === "Enter" &&
+          !event.nativeEvent.isComposing
+        ) {
+          event.preventDefault();
+          if (!saving && !loading && !error) submit();
+        }
+      }}
+    >
+      {!onePageInfo && !returnDetail && (
+        <Button className="record-back" disabled={saving} onClick={goBack}>
+          返回列表
+        </Button>
+      )}
+      <header className="record-heading">
+        <div className="record-heading-title">
+          <h1>{updating ? "编辑客户" : "新增客户"}</h1>
+          <span className="record-save-status" role="status">
+            {saving
+              ? "正在保存…"
+              : dirty
+                ? "有未保存的修改"
+                : updating
+                  ? `主键 ${id}`
+                  : "填写客户信息"}
+          </span>
+        </div>
+        <Space wrap>
+          {returnDetail && (
+            <Button disabled={saving} onClick={backToDetail}>
+              返回详情
+            </Button>
+          )}
+          <Button
+            type="primary"
+            loading={saving}
+            disabled={loading || Boolean(error)}
+            onClick={() => submit()}
+            title="Ctrl / ⌘ + Enter 保存"
+          >
+            {saveLabel}
+          </Button>
+        </Space>
+      </header>
+      {loading ? (
+        <Spin />
+      ) : error ? (
+        <Alert
+          type="error"
+          showIcon
+          message="加载失败"
+          description={error}
+          action={
+            <Button onClick={() => setRevision((v) => v + 1)}>重试</Button>
+          }
+        />
+      ) : (
+        <Form
+          name={formName}
+          form={form}
+          layout="vertical"
+          onFinish={save}
+          onValuesChange={() => setDirty(true)}
+          scrollToFirstError={{
+            behavior: "smooth",
+            block: "center",
+            focus: true,
+          }}
+          onFinishFailed={() => {
+            continueAfterSave.current = false;
+          }}
+          disabled={saving}
+        >
+          <RecordGroups includeId={updating}>
+            {(field) => {
+              if (field.key === "id")
+                return (
+                  <RecordItem key={field.key} field={field}>
+                    <InputNumber
+                      stringMode
+                      value={id}
+                      disabled
+                      style={{ width: "100%" }}
+                    />
+                  </RecordItem>
+                );
+              if (field.key === "notes")
+                return (
+                  <RecordItem key={field.key} field={field} name="notes">
+                    <Input.TextArea
+                      rows={2}
+                      allowClear
+                      placeholder="请输入备注"
+                    />
+                  </RecordItem>
+                );
+              const [, , control, rules] = controls.find(
+                ([name]) => name === field.key,
+              );
+              return (
+                <RecordItem
+                  key={field.key}
+                  field={field}
+                  name={field.key}
+                  rules={rules}
+                >
+                  {field.type === "TEXT" ? (
+                    <Input
+                      ref={
+                        field.key === "customer_name"
+                          ? customerNameInput
+                          : undefined
+                      }
+                      allowClear
+                      type={
+                        field.key === "phone"
+                          ? "tel"
+                          : field.key === "email"
+                            ? "email"
+                            : "text"
+                      }
+                      placeholder={`请输入${field.label}`}
+                    />
+                  ) : (
+                    control
+                  )}
+                </RecordItem>
+              );
+            }}
+          </RecordGroups>
+          <footer
+            className="record-footer"
+            style={{
+              background: hostTheme?.mode === "dark" ? "#1f1f1f" : "#f5f5f5",
+            }}
+          >
+            <Space>
+              <Button
+                onClick={() => {
+                  setDirty(false);
+                  form.resetFields();
+                  if (original.current) form.setFieldsValue(original.current);
+                }}
+              >
+                重置
+              </Button>
+              {!updating && (
+                <Button loading={saving} onClick={() => submit(true)}>
+                  保存并继续新增
+                </Button>
+              )}
+              <Button type="primary" loading={saving} onClick={() => submit()}>
+                {saveLabel}
+              </Button>
+            </Space>
+          </footer>
+        </Form>
+      )}
+    </main>
+  );
+}
+
+export default function EditorPage({ mode }) {
+  const hostTheme = useAppTheme();
+  return (
+    <ConfigProvider
+      theme={recordTheme(
+        hostTheme,
+        hostTheme?.mode === "dark"
+          ? theme.darkAlgorithm
+          : theme.defaultAlgorithm,
+      )}
+    >
+      <App>
+        <CustomerEditor mode={mode} />
+      </App>
+    </ConfigProvider>
+  );
+}

package/skills/rabetbase-page-generation/templates/onepage/shared/model.js

@@ -0,0 +1,141 @@
+// 生成时按 Dataset 元信息改写字段、枚举、排序、筛选和页面路径；这些客户字段仅表示模板写法。
+import dayjs from "dayjs";
+export const APP_CODE = "__APP_CODE__";
+export const DATASET_CODE = "__DATASET_CODE__";
+export const DEFAULT_ORDER = [{ customer_name: "desc" }, { id: "desc" }];
+export const LIST_PATH = "__LIST_PATH__";
+export const childPaths = {
+  create: "__CREATE_PATH__",
+  update: "__UPDATE_PATH__",
+  detail: "__DETAIL_PATH__",
+};
+export const statusOptions = [
+  { label: "活跃", value: "active" },
+  { label: "非活跃", value: "inactive" },
+];
+export const typeOptions = [
+  { label: "企业", value: "enterprise" },
+  { label: "个人", value: "individual" },
+];
+export const levelOptions = ["a", "b", "c"].map((value) => ({
+  label: value.toUpperCase(),
+  value,
+}));
+export const fields = [
+  { key: "id", label: "主键", type: "NUMBER", width: 56, align: "right" },
+  { key: "customer_name", label: "客户名称", type: "TEXT", width: 212 },
+  {
+    key: "status",
+    label: "状态",
+    type: "SELECT",
+    width: 70,
+    options: statusOptions,
+    tag: true,
+  },
+  {
+    key: "customer_type",
+    label: "客户类型",
+    type: "SELECT",
+    width: 64,
+    options: typeOptions,
+  },
+  {
+    key: "customer_level",
+    label: "客户等级",
+    type: "SELECT",
+    width: 64,
+    options: levelOptions,
+    tag: true,
+  },
+  { key: "contact_name", label: "联系人", type: "TEXT", width: 104 },
+  { key: "phone", label: "电话", type: "TEXT", width: 64 },
+  { key: "email", label: "邮箱", type: "TEXT", width: 188 },
+  { key: "region", label: "区域", type: "TEXT", width: 60 },
+  {
+    key: "annual_revenue",
+    label: "年营收",
+    type: "NUMBER",
+    width: 104,
+    align: "right",
+    precision: 2,
+  },
+  { key: "onboarding_date", label: "入驻日期", type: "DATETIME", width: 128 },
+];
+export function traditionalWhere(values) {
+  const where = {};
+  for (const key of ["customer_name", "region", "contact_name"]) {
+    const value = values[key]?.trim();
+    if (value) where[key] = { $contain: value };
+  }
+  for (const key of ["status", "customer_type", "customer_level"])
+    if (values[key] !== undefined) where[key] = { $eq: values[key] };
+  if (values.onboarding_date?.[0] && values.onboarding_date?.[1])
+    where.onboarding_date = {
+      $gte: values.onboarding_date[0]
+        .startOf("day")
+        .format("YYYY-MM-DD HH:mm:ss"),
+      $lte: values.onboarding_date[1]
+        .endOf("day")
+        .format("YYYY-MM-DD HH:mm:ss"),
+    };
+  return where;
+}
+// Uses the host SDK's public runtime address. No credentials or environment fallback in page files.
+export async function smartWhere(client, query, { signal }) {
+  const properties = fields.map(
+    ({ key: code, label: name, type, options }) => ({
+      code,
+      name,
+      type,
+      options,
+    }),
+  );
+  const response = await fetch(new URL("/api/search", client.getBaseUrl()), {
+    method: "POST",
+    credentials: "include",
+    signal,
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      id: "TEXT_TO_FILTER_PARAM",
+      appCode: APP_CODE,
+      query: `**当前时间的 ISO 字符串**\n${new Date().toISOString()}\n**用户的查询需求（自然语言）**\n${query}\n**可用于 filter 的详细字段说明（含字段名和类型）**\n${JSON.stringify(properties)}`,
+    }),
+  });
+  if (!response.ok) throw Error(`智能搜索失败（${response.status}），请重试`);
+  const envelope = await response.json();
+  if (envelope.success === false)
+    throw Error(envelope.errorMsg || "智能搜索失败，请重试");
+  const result = JSON.parse((envelope.data ?? envelope).content);
+  if (
+    !result ||
+    typeof result !== "object" ||
+    Array.isArray(result) ||
+    !result.where ||
+    typeof result.where !== "object" ||
+    Array.isArray(result.where)
+  )
+    throw Error("智能搜索未返回有效筛选条件，请换一种描述");
+  return result.where;
+}
+
+export function formatField(value, field) {
+  if (value === undefined || value === null || value === "") return "--";
+  if (field.options)
+    return (
+      field.options.find((option) => option.value === value)?.label ??
+      String(value)
+    );
+  if (field.type === "NUMBER")
+    return Number.isFinite(Number(value))
+      ? Number(value).toLocaleString("en-US", {
+          useGrouping: false,
+          minimumFractionDigits: field.precision ?? 0,
+          maximumFractionDigits: field.precision ?? 0,
+        })
+      : String(value);
+  if (field.type === "DATETIME")
+    return dayjs(value).isValid()
+      ? dayjs(value).format("YYYY-MM-DD HH:mm")
+      : String(value);
+  return String(value);
+}