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

package/skills/rabetbase-page-generation/templates/onepage/shared/page.css

@@ -0,0 +1,377 @@
+.standard-jsx-list {
+  box-sizing: border-box;
+  padding: 0 24px 24px;
+  min-height: calc(100vh - 56px);
+  min-width: 0;
+}
+.standard-jsx-list .list-toolbar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+.standard-jsx-list .list-toolbar-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.standard-jsx-list .selection-summary {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-width: 220px;
+  padding: 4px 8px;
+  min-height: 30px;
+  box-sizing: border-box;
+  border: 1px solid;
+  border-radius: 4px;
+}
+.standard-jsx-list .ant-table-cell .ant-btn-link {
+  padding-inline: 4px;
+  font-size: 12px;
+}
+.standard-jsx-list .ant-table-cell .ant-tag {
+  margin-inline-end: 0;
+  border-radius: 3px;
+  line-height: 18px;
+  padding-inline: 6px;
+}
+.standard-jsx-list .ant-table-cell {
+  white-space: nowrap;
+}
+.standard-jsx-list .ant-table-pagination {
+  margin-bottom: 0;
+}
+.column-options {
+  max-width: 220px;
+}
+.column-options .ant-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+@media (max-width: 767px) {
+  .standard-jsx-list {
+    padding: 12px;
+  }
+  .standard-jsx-list .selection-summary {
+    min-width: 180px;
+  }
+}
+
+.standard-jsx-list .list-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 48px;
+  margin-bottom: 0;
+}
+.standard-jsx-list .list-breadcrumb .anticon {
+  color: #aaa;
+}
+.standard-jsx-list .list-toolbar-left .ant-space-compact {
+  width: auto;
+}
+
+/* 与旧标准页的实际 ONEPAGE 内容区、分组及字段间距保持一致。 */
+.customer-record {
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 28px 24px 24px;
+}
+.customer-record .record-back {
+  margin-bottom: 16px;
+}
+.customer-record .record-fields,
+.customer-record .record-group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.customer-record .record-group h2 {
+  position: relative;
+  margin: 0;
+  padding: 16px 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 26.6667px;
+  color: inherit;
+}
+.customer-record .record-group h2::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: -8px;
+  width: 100%;
+  height: 1px;
+  background: rgba(128, 128, 128, 0.18);
+}
+.customer-record .ant-form-item {
+  margin-bottom: 0;
+}
+.customer-record .ant-form-item-label {
+  padding-bottom: 8px;
+}
+.customer-record .record-readonly .ant-form-item-control-input {
+  min-height: 24px;
+}
+.customer-record .record-readonly .ant-form-item-label > label {
+  color: #999;
+}
+.customer-record .record-value {
+  min-height: 24px;
+  line-height: 24px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.customer-record .record-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 64px;
+  margin-top: 32px;
+  padding: 0 20px;
+}
+
+.customer-record .record-footer {
+  border-radius: 8px;
+}
+.customer-record textarea {
+  resize: none;
+}
+
+.standard-jsx-list .list-breadcrumb > span:last-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.standard-jsx-list .list-toolbar-actions {
+  margin-left: auto;
+}
+.standard-jsx-list .yt-smart-search > .ant-input-search {
+  flex: 1;
+  width: 0;
+}
+.standard-jsx-list .yt-smart-search > .ant-btn {
+  flex-shrink: 0;
+}
+.mobile-record-list {
+  display: grid;
+  gap: 12px;
+}
+.mobile-record-card {
+  border: 1px solid;
+  border-radius: 8px;
+  padding: 12px;
+  min-width: 0;
+}
+.mobile-record-card header {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+.mobile-record-card .mobile-record-title {
+  height: auto;
+  min-height: 44px;
+  padding: 8px 0;
+  text-align: left;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  font-size: 15px;
+  font-weight: 600;
+  min-width: 0;
+}
+.mobile-record-card dl {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin: 8px 0 16px;
+}
+.mobile-record-card dd {
+  margin: 4px 0 0;
+  overflow-wrap: anywhere;
+}
+.mobile-record-card footer {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+.mobile-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 20px 0;
+}
+.mobile-pagination .ant-pagination {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.mobile-date-range {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+@media (max-width: 600px) {
+  .standard-jsx-list {
+    padding: 0 12px max(16px, env(safe-area-inset-bottom));
+    font-size: 14px;
+  }
+  .standard-jsx-list .list-breadcrumb {
+    height: 52px;
+  }
+  .standard-jsx-list .list-toolbar-left {
+    width: 100%;
+  }
+  .standard-jsx-list .selection-summary {
+    flex: 1;
+    min-width: 0;
+    min-height: 44px;
+    gap: 6px;
+  }
+  .standard-jsx-list .list-toolbar {
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+  .standard-jsx-list .yt-smart-search {
+    gap: 8px;
+  }
+  .standard-jsx-list .yt-filter .ant-col {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  .standard-jsx-list .lr-jsx-filter-actions {
+    justify-content: flex-start;
+  }
+  .standard-jsx-list .ant-btn,
+  .customer-record .ant-btn {
+    min-height: 44px;
+  }
+  .standard-jsx-list .ant-input,
+  .customer-record .ant-input,
+  .customer-record .ant-input-number-input {
+    font-size: 16px;
+  }
+  .standard-jsx-list .ant-input-affix-wrapper,
+  .customer-record .ant-input-affix-wrapper,
+  .customer-record .ant-input-number {
+    min-height: 44px;
+    align-items: center;
+  }
+  .standard-jsx-list .ant-radio-wrapper,
+  .customer-record .ant-radio-wrapper {
+    min-height: 40px;
+    align-items: center;
+  }
+  .mobile-record-list > .ant-checkbox-wrapper,
+  .mobile-record-card header > .ant-checkbox-wrapper {
+    min-height: 44px;
+    align-items: center;
+  }
+  .customer-record {
+    padding: 12px 16px max(16px, env(safe-area-inset-bottom));
+  }
+  .customer-record .ant-form-item-label > label,
+  .customer-record .record-value {
+    font-size: 14px;
+  }
+  .customer-record input.ant-input,
+  .customer-record .ant-input-number-input {
+    min-height: 42px;
+  }
+  .customer-record input[type="datetime-local"],
+  .mobile-date-range input {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+  .customer-record .record-group h2 {
+    font-size: 17px;
+  }
+  .customer-record .record-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 5;
+    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
+    margin-top: 24px;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+  }
+  .customer-record .record-footer .ant-space {
+    width: 100%;
+  }
+  .customer-record .record-footer .ant-space-item {
+    flex: 1;
+  }
+  .customer-record .record-footer .ant-btn {
+    width: 100%;
+  }
+}
+
+/* 操作效率：详情上下文、顶部保存、同页记录导航。 */
+.customer-record .record-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
+}
+.customer-record .record-heading-title {
+  min-width: 0;
+  flex: 1 1 160px;
+}
+.customer-record .record-heading h1 {
+  font-size: 18px;
+  line-height: 1.5;
+  margin: 0 0 4px;
+  overflow-wrap: anywhere;
+}
+.customer-record .record-save-status {
+  opacity: 0.65;
+}
+.customer-record .record-sequence {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.standard-jsx-list .active-filter-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: -8px 0 12px;
+}
+.standard-jsx-list .customer-name-link {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0;
+  height: auto;
+  text-align: left;
+}
+@media (max-width: 600px) {
+  .customer-record .record-heading .ant-space {
+    width: 100%;
+  }
+  .customer-record .record-sequence {
+    width: 100%;
+  }
+  .customer-record .record-footer .ant-space {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+  .customer-record .record-footer .ant-space-item {
+    flex: 1 1 auto;
+  }
+  .customer-record .record-footer .ant-btn {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,90 @@
+import { Form } from "antd";
+import { fields } from "./model";
+
+// 分组顺序来自同 Dataset 的旧详情／更新页面；说明来自 Dataset 元信息。
+export const recordGroups = [
+  { title: "基本信息", keys: ["id", "customer_name", "customer_type"] },
+  { title: "联系信息", keys: ["contact_name", "phone", "email", "region"] },
+  {
+    title: "业务信息",
+    keys: ["customer_level", "status", "annual_revenue", "onboarding_date"],
+  },
+  { title: "详细描述", keys: ["notes"] },
+];
+const descriptions = {
+  id: "系统自动生成的主键",
+  customer_name: "客户名称",
+  customer_type: "客户类型：企业或个人",
+  customer_level: "客户等级：A、B、C",
+  status: "客户状态：活跃或非活跃",
+  contact_name: "联系人姓名",
+  phone: "联系电话",
+  email: "电子邮箱",
+  region: "客户所在区域",
+  annual_revenue: "客户年度营收金额",
+  onboarding_date: "客户入驻日期",
+  notes: "备注信息",
+};
+export const recordFields = Object.fromEntries(
+  [...fields, { key: "notes", label: "备注", type: "TEXTAREA" }].map(
+    (field) => [
+      field.key,
+      {
+        ...field,
+        description: descriptions[field.key],
+        required: ["id", "customer_name"].includes(field.key),
+      },
+    ],
+  ),
+);
+export function RecordGroups({ children, includeId = true }) {
+  return (
+    <div className="record-fields">
+      {recordGroups.map((group) => (
+        <section
+          className="record-group"
+          key={group.title}
+          aria-label={group.title}
+        >
+          <h2>{group.title}</h2>
+          {group.keys
+            .filter((key) => includeId || key !== "id")
+            .map((key) => children(recordFields[key]))}
+        </section>
+      ))}
+    </div>
+  );
+}
+export function RecordItem({ field, children, ...props }) {
+  return (
+    <Form.Item
+      label={field.label}
+      tooltip={field.description}
+      required={field.required}
+      {...props}
+    >
+      {children}
+    </Form.Item>
+  );
+}
+export const recordTheme = (hostTheme, algorithm) => ({
+  algorithm,
+  token: {
+    fontSize: 12,
+    lineHeight: 5 / 3,
+    colorPrimary: hostTheme?.skinColor || "#4548b9",
+    borderRadius: 6,
+    controlHeight: 32,
+    ...(hostTheme?.mode !== "dark"
+      ? {
+          colorText: "rgba(51,51,51,.88)",
+          colorTextHeading: "#333",
+          colorTextDescription: "#999",
+        }
+      : {}),
+  },
+  components: {
+    Radio: { radioSize: 16, dotSize: 8 },
+    Form: { itemMarginBottom: 0, verticalLabelPadding: "0 0 8px" },
+  },
+});

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

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { DatePicker, Input } from "antd";
+import dayjs from "dayjs";
+
+export function useMobileLayout() {
+  const [mobile, setMobile] = useState(
+    () => window.matchMedia("(max-width: 600px)").matches,
+  );
+  useEffect(() => {
+    const media = window.matchMedia("(max-width: 600px)");
+    const changed = () => setMobile(media.matches);
+    media.addEventListener("change", changed);
+    return () => media.removeEventListener("change", changed);
+  }, []);
+  return mobile;
+}
+
+// 手机使用系统日期控件，避免桌面日期／时间浮层超出屏幕；表单中仍存 dayjs。
+export function ResponsiveDateTime({ value, onChange, ...props }) {
+  const mobile = useMobileLayout();
+  return mobile ? (
+    <Input
+      {...props}
+      type="datetime-local"
+      step={1}
+      value={value?.format("YYYY-MM-DDTHH:mm:ss") || ""}
+      onChange={(event) =>
+        onChange?.(event.target.value ? dayjs(event.target.value) : null)
+      }
+    />
+  ) : (
+    <DatePicker
+      {...props}
+      value={value}
+      onChange={onChange}
+      showTime
+      format="YYYY-MM-DD HH:mm:ss"
+      style={{ width: "100%" }}
+    />
+  );
+}
+export function ResponsiveDateRange({ value, onChange, ...props }) {
+  const mobile = useMobileLayout();
+  if (!mobile)
+    return (
+      <DatePicker.RangePicker
+        {...props}
+        value={value}
+        onChange={onChange}
+        placeholder={["请选择入驻日期", "请选择入驻日期"]}
+      />
+    );
+  return (
+    <div className="mobile-date-range">
+      {[0, 1].map((index) => (
+        <Input
+          key={index}
+          type="date"
+          aria-label={index ? "结束日期" : "开始日期"}
+          value={value?.[index]?.format("YYYY-MM-DD") || ""}
+          onChange={(event) => {
+            const next = [...(value || [null, null])];
+            next[index] = event.target.value ? dayjs(event.target.value) : null;
+            onChange?.(next);
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/skills/rabetbase-page-generation/templates/onepage/update/README.md

@@ -0,0 +1,21 @@
+# 更新页
+
+入口是 `index.jsx`，以 `mode="update"` 使用 `../shared/editor.jsx`。它与详情是独立页面，与新增共享表单实现。
+
+![更新页效果示例](preview.png)
+
+图中为本模板加载本地示例记录后的桌面效果，供布局、字段状态和操作位置参考；外层“关闭子页”是本地预览容器，真实运行使用 ONEPAGE 宿主。
+
+## 保留的交互
+
+- 进入页面后按主键读取真实记录；主键只读，其余字段按 Dataset 类型编辑。
+- 顶部及底部支持保存，Ctrl/⌘+Enter 提交；重置恢复读取到的原值。
+- 从详情进入时，保存后回到最新详情；从列表进入时返回父列表并刷新，保留筛选和分页。
+- 页面“返回详情”对未保存修改提供继续编辑/放弃确认；宿主关闭行为由宿主管理，模板不声称已拦截宿主关闭。
+- 保存失败保留输入，加载失败可重试，保存中阻止重复提交。
+
+## 生成时修改
+
+在 `shared/editor.jsx` 中调整主键类型、字段控件、校验及更新白名单；分组和说明来自 `shared/record-layout.jsx`。ONEPAGE 从内部查询参数读取主键，直接访问从 URL 查询参数读取。不能修改用户未编辑的只读字段或将空值错误转为零。
+
+更新成功后发送按入口路径区分的刷新事件，详情重新读取最新记录。完整构建及发布见 [生成流程](../../../references/generation.md)。

package/skills/rabetbase-page-generation/templates/onepage/update/index.jsx

@@ -0,0 +1,4 @@
+import EditorPage from "../shared/editor";
+export default function UpdatePage() {
+  return <EditorPage mode="update" />;
+}

package/skills/rabetbase.manifest.json

@@ -2,8 +2,8 @@
   "schemaVersion": 1,
   "name": "rabetbase",
   "packageName": "@lovrabet/rabetbase-cli",
-  "packageVersion": "2.5.4",
-  "skillVersion": "2.5.4",
+  "packageVersion": "2.5.5-beta.2",
+  "skillVersion": "2.5.5-beta.2",
   "files": [
     "SKILL.md",
     "guides/approval-flow-development-workflow.md",
@@ -155,5 +155,5 @@
     "references/rabetbase-user-account.md",
     "references/rabetbase-workspace.md"
   ],
-  "digest": "74a9c0d783a16c3b0881f4bfcbae651c32b3c540d5c9d1cbe24ecf80f0bda0b4"
+  "digest": "46e08874ae244a126497186b6f930955164184baac9690d026efbbdb07b820a8"
 }