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

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

@@ -0,0 +1,721 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Alert,
+  App,
+  Button,
+  Checkbox,
+  ConfigProvider,
+  Dropdown,
+  Empty,
+  Input,
+  Pagination,
+  Select,
+  Spin,
+  Popover,
+  Radio,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  theme,
+} from "antd";
+import {
+  EllipsisOutlined,
+  HomeOutlined,
+  InfoCircleFilled,
+  ReloadOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
+import {
+  useAppTheme,
+  useNavigate,
+  useSdkClient,
+} from "@/context/app-context";
+import { LrSmartFilter } from "@lovrabet/components";
+import {
+  APP_CODE,
+  DATASET_CODE,
+  DEFAULT_ORDER,
+  LIST_PATH,
+  childPaths,
+  fields,
+  formatField,
+  levelOptions,
+  statusOptions,
+  typeOptions,
+  smartWhere,
+  traditionalWhere,
+} from "../shared/model";
+import { ResponsiveDateRange, useMobileLayout } from "../shared/responsive";
+import "../shared/page.css";
+
+const filterItems = [
+  {
+    name: "customer_name",
+    label: "客户名称",
+    control: <Input allowClear placeholder="请输入客户名称" />,
+  },
+  {
+    name: "status",
+    label: "状态",
+    control: <Radio.Group options={statusOptions} />,
+  },
+  {
+    name: "customer_type",
+    label: "客户类型",
+    control: <Radio.Group options={typeOptions} />,
+  },
+  {
+    name: "customer_level",
+    label: "客户等级",
+    control: <Radio.Group options={levelOptions} />,
+  },
+  {
+    name: "onboarding_date",
+    label: "入驻日期",
+    control: <ResponsiveDateRange />,
+  },
+  {
+    name: "region",
+    label: "区域",
+    control: <Input allowClear placeholder="请输入区域" />,
+  },
+  {
+    name: "contact_name",
+    label: "联系人",
+    control: <Input allowClear placeholder="请输入联系人" />,
+  },
+];
+function CustomerList() {
+  const mobile = useMobileLayout();
+  const client = useSdkClient();
+  const navigate = useNavigate();
+  const { token } = theme.useToken();
+  const { message, modal } = App.useApp();
+  const [request, setRequest] = useState({
+    where: {},
+    currentPage: 1,
+    pageSize: mobile ? 10 : 30,
+  });
+  const [revision, setRevision] = useState(0);
+  const [filterKey, setFilterKey] = useState(0);
+  const [rows, setRows] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [selected, setSelected] = useState([]);
+  const preferenceKey = `${APP_CODE}:${DATASET_CODE}:visible-fields`;
+  const [visibleFields, setVisibleFields] = useState(() => {
+    try {
+      const saved = JSON.parse(localStorage.getItem(preferenceKey));
+      if (Array.isArray(saved))
+        return fields.map((f) => f.key).filter((key) => saved.includes(key));
+    } catch {
+      /* 浏览器禁用存储时继续使用默认列。 */
+    }
+    return fields.map((field) => field.key);
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem(preferenceKey, JSON.stringify(visibleFields));
+    } catch {
+      /* 列偏好不影响业务操作。 */
+    }
+  }, [preferenceKey, visibleFields]);
+  function clearFilters() {
+    setFilterKey((value) => value + 1);
+    setSelected([]);
+    setRequest((previous) => ({ ...previous, where: {}, currentPage: 1 }));
+  }
+  const [exporting, setExporting] = useState(false);
+  const alive = useRef(true);
+  const model = client.models[`dataset_${DATASET_CODE}`];
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    const changed = (event) => {
+      if (event.detail === LIST_PATH) setRevision((value) => value + 1);
+    };
+    window.addEventListener("lovrabet:page-generation:changed", changed);
+    return () =>
+      window.removeEventListener("lovrabet:page-generation:changed", changed);
+  }, []);
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setError("");
+    model
+      .filter({ ...request, orderBy: DEFAULT_ORDER })
+      .then((result) => {
+        if (!active) return;
+        const count = Number(result?.paging?.totalCount);
+        if (
+          !Array.isArray(result?.tableData) ||
+          !Number.isSafeInteger(count) ||
+          count < 0
+        )
+          throw Error("列表响应无效，请重试");
+        const lastPage = Math.max(1, Math.ceil(count / request.pageSize));
+        if (request.currentPage > lastPage) {
+          setRequest((previous) => ({ ...previous, currentPage: lastPage }));
+          return;
+        }
+        setRows(result.tableData);
+        setTotal(count);
+        setSelected((previous) =>
+          previous.filter((id) =>
+            result.tableData.some((row) => row.id === id),
+          ),
+        );
+      })
+      .catch((cause) => {
+        if (active) {
+          setError(cause.message || "加载失败，请重试");
+          setRows([]);
+          setSelected([]);
+        }
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [client, request, revision]);
+  function applySearch({ mode, values }) {
+    setSelected([]);
+    setRequest((previous) => ({
+      ...previous,
+      where: mode === "fields" ? traditionalWhere(values) : values,
+      currentPage: 1,
+    }));
+  }
+  function openChild(kind, id) {
+    const path = childPaths[kind];
+    if (!path) return;
+    const target =
+      id === undefined
+        ? path
+        : `${path}?${new URLSearchParams({ id: String(id), ...(kind === "detail" ? { ids: rows.map((row) => row.id).join(",") } : {}) })}`;
+    navigate(target, { onePage: true });
+  }
+  function remove(ids) {
+    modal.confirm({
+      title:
+        ids.length === 1
+          ? "删除这条记录？"
+          : `删除选中的 ${ids.length} 条记录？`,
+      content: "删除后列表将自动刷新。",
+      okText: "删除",
+      cancelText: "取消",
+      okButtonProps: { danger: true },
+      async onOk() {
+        try {
+          await model.delete({ id: ids });
+          setSelected([]);
+          setRevision((value) => value + 1);
+          message.success("删除成功");
+        } catch (cause) {
+          message.error(cause.message || "删除失败，请重试");
+          throw cause;
+        }
+      },
+    });
+  }
+  async function exportRows(onlySelected) {
+    setExporting(true);
+    try {
+      const where = onlySelected ? { id: { $in: selected } } : request.where;
+      const all = [];
+      // Export every matching server page, not only the visible rows.
+      for (let page = 1; ; page++) {
+        const result = await model.filter({
+          where,
+          currentPage: page,
+          pageSize: 200,
+          orderBy: DEFAULT_ORDER,
+        });
+        if (!alive.current) return;
+        if (
+          !Array.isArray(result.tableData) ||
+          !Number.isSafeInteger(Number(result.paging?.totalCount))
+        )
+          throw Error("导出响应无效");
+        all.push(...result.tableData);
+        if (all.length >= Number(result.paging.totalCount)) break;
+        if (!result.tableData.length) throw Error("导出数据不完整，请重试");
+      }
+      const csvCell = (value) =>
+        '"' +
+        String(value)
+          .replace(/^[=+@\-\t\r]/, "'$&")
+          .replaceAll('"', '""') +
+        '"';
+      const text =
+        "\ufeff" +
+        [
+          fields.map((f) => f.label),
+          ...all.map((row) => fields.map((f) => formatField(row[f.key], f))),
+        ]
+          .map((row) => row.map(csvCell).join(","))
+          .join("\r\n");
+      const url = URL.createObjectURL(
+        new Blob([text], { type: "text/csv;charset=utf-8" }),
+      );
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = "客户列表.csv";
+      link.click();
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+      message.success(`已导出 ${all.length} 条记录`);
+    } catch (cause) {
+      message.error(cause.message || "导出失败，请重试");
+    } finally {
+      if (alive.current) setExporting(false);
+    }
+  }
+  const columns = fields
+    .filter((field) => visibleFields.includes(field.key))
+    .map((field) => ({
+      title: field.label,
+      dataIndex: field.key,
+      key: field.key,
+      width: field.width,
+      align: field.align,
+      ellipsis: true,
+      render: (value, row) =>
+        field.key === "customer_name" ? (
+          <Button
+            className="customer-name-link"
+            type="link"
+            onClick={() => openChild("detail", row.id)}
+          >
+            {formatField(value, field)}
+          </Button>
+        ) : field.tag && value != null && value !== "" ? (
+          <Tag>{formatField(value, field)}</Tag>
+        ) : (
+          formatField(value, field)
+        ),
+    }));
+  columns.push({
+    title: "操作",
+    key: "actions",
+    width: 136,
+    fixed: "right",
+    render: (_, row) => (
+      <Space size={4}>
+        <Tooltip title={childPaths.update ? undefined : "更新页面尚未开放"}>
+          <Button
+            size="small"
+            type="link"
+            disabled={!childPaths.update}
+            onClick={() => openChild("update", row.id)}
+          >
+            更新
+          </Button>
+        </Tooltip>
+        <Tooltip
+          title={childPaths.detail ? undefined : "详情页等待 ONEPAGE 路由接通"}
+        >
+          <Button
+            size="small"
+            type="link"
+            disabled={!childPaths.detail}
+            onClick={() => openChild("detail", row.id)}
+          >
+            详情
+          </Button>
+        </Tooltip>
+        <Button
+          size="small"
+          type="link"
+          onClick={() => remove([row.id])}
+          disabled={loading || Boolean(error)}
+        >
+          删除
+        </Button>
+      </Space>
+    ),
+  });
+  const menu = {
+    items: [
+      {
+        key: "exportSelected",
+        label: "导出选中项",
+        disabled: !selected.length || exporting,
+      },
+      {
+        key: "export",
+        label: "导出当前结果",
+        disabled: exporting || Boolean(error),
+      },
+      { type: "divider" },
+      {
+        key: "delete",
+        label: "删除选中项",
+        danger: true,
+        disabled: !selected.length || loading || Boolean(error),
+      },
+    ],
+    onClick: ({ key }) =>
+      key === "delete"
+        ? remove(selected)
+        : exportRows(key === "exportSelected"),
+  };
+  return (
+    <main
+      className="standard-jsx-list"
+      style={{ background: token.colorBgContainer, color: token.colorText }}
+    >
+      <div className="list-breadcrumb">
+        <HomeOutlined />
+        <span>/</span>
+        <span>客户列表</span>
+      </div>
+      <LrSmartFilter
+        key={filterKey}
+        items={filterItems}
+        onSmartSearch={(query, options) => smartWhere(client, query, options)}
+        onSearch={applySearch}
+        labels={{
+          filters: "筛选",
+          smartSearch: "智能搜索",
+          placeholder: "描述要查找的客户",
+          search: "查询",
+          reset: "重置",
+          expand: "更多条件",
+          collapse: "收起条件",
+          failed: "查询失败，请重试",
+        }}
+      />
+      {Object.keys(request.where).length > 0 && (
+        <div className="active-filter-summary" role="status">
+          <span>已应用筛选 · {error ? "—" : total} 条结果</span>
+          <Button type="link" onClick={clearFilters}>
+            清除筛选
+          </Button>
+        </div>
+      )}
+      <div className="list-toolbar">
+        <div className="list-toolbar-left">
+          <div
+            className="selection-summary"
+            style={{
+              background: token.colorPrimaryBg,
+              borderColor: token.colorPrimaryBorder,
+            }}
+          >
+            <InfoCircleFilled style={{ color: token.colorPrimary }} />
+            <span>
+              {`已选 ${selected.length} / 共 ${error ? "—" : total} 条`}
+            </span>
+            {selected.length > 0 && (
+              <Button type="link" size="small" onClick={() => setSelected([])}>
+                清空
+              </Button>
+            )}
+          </div>
+          <Space.Compact>
+            <Button
+              disabled={!selected.length || loading || Boolean(error)}
+              onClick={() => exportRows(true)}
+              loading={exporting}
+            >
+              导出选中
+            </Button>
+            <Dropdown menu={menu} trigger={["click"]} disabled={loading}>
+              <Button icon={<EllipsisOutlined />} aria-label="更多操作" />
+            </Dropdown>
+          </Space.Compact>
+        </div>
+        <Space size={8} className="list-toolbar-actions">
+          <Tooltip title="刷新">
+            <Button
+              type="text"
+              icon={<ReloadOutlined spin={loading} />}
+              aria-label="刷新"
+              onClick={() => setRevision((value) => value + 1)}
+            />
+          </Tooltip>
+          <Popover
+            trigger="click"
+            placement="bottomRight"
+            title="列设置"
+            content={
+              <div className="column-options">
+                <Checkbox.Group
+                  value={visibleFields}
+                  onChange={setVisibleFields}
+                  options={fields.map((f) => ({
+                    label: f.label,
+                    value: f.key,
+                  }))}
+                />
+                <Button
+                  type="link"
+                  onClick={() => setVisibleFields(fields.map((f) => f.key))}
+                >
+                  恢复默认
+                </Button>
+              </div>
+            }
+          >
+            <Button
+              type="text"
+              icon={<SettingOutlined />}
+              aria-label="列设置"
+            />
+          </Popover>
+          <Tooltip title={childPaths.create ? undefined : "新增页面尚未开放"}>
+            <Button
+              type="primary"
+              disabled={!childPaths.create}
+              onClick={() => openChild("create")}
+            >
+              新增
+            </Button>
+          </Tooltip>
+        </Space>
+      </div>
+      {error ? (
+        <Alert
+          type="error"
+          showIcon
+          message="列表加载失败"
+          description={error}
+          action={
+            <Button onClick={() => setRevision((value) => value + 1)}>
+              重试
+            </Button>
+          }
+        />
+      ) : mobile ? (
+        <Spin spinning={loading}>
+          <div
+            className="mobile-record-list"
+            aria-label="客户列表"
+            aria-busy={loading}
+          >
+            {rows.length > 0 && (
+              <Checkbox
+                disabled={loading}
+                checked={selected.length === rows.length}
+                indeterminate={
+                  selected.length > 0 && selected.length < rows.length
+                }
+                onChange={(event) =>
+                  setSelected(
+                    event.target.checked ? rows.map((row) => row.id) : [],
+                  )
+                }
+              >
+                选择本页
+              </Checkbox>
+            )}
+            {rows.map((row) => (
+              <article
+                className="mobile-record-card"
+                key={row.id}
+                aria-label={row.customer_name || `客户 ${row.id}`}
+                style={{
+                  borderColor: token.colorBorderSecondary,
+                  background: token.colorBgContainer,
+                }}
+              >
+                <header>
+                  <Checkbox
+                    aria-label={`选择客户 ${row.id}`}
+                    disabled={loading}
+                    checked={selected.includes(row.id)}
+                    onChange={(event) =>
+                      setSelected((previous) =>
+                        event.target.checked
+                          ? [...previous, row.id]
+                          : previous.filter((id) => id !== row.id),
+                      )
+                    }
+                  />
+                  <Button
+                    type="link"
+                    className="mobile-record-title"
+                    onClick={() => openChild("detail", row.id)}
+                  >
+                    {row.customer_name || "未命名客户"}
+                  </Button>
+                </header>
+                <dl>
+                  {fields
+                    .filter(
+                      (field) =>
+                        field.key !== "customer_name" &&
+                        visibleFields.includes(field.key) &&
+                        ([
+                          "id",
+                          "status",
+                          "customer_type",
+                          "customer_level",
+                          "region",
+                          "annual_revenue",
+                        ].includes(field.key) ||
+                          (row[field.key] != null && row[field.key] !== "")),
+                    )
+                    .map((field) => (
+                      <div key={field.key}>
+                        <dt style={{ color: token.colorTextSecondary }}>
+                          {field.label}
+                        </dt>
+                        <dd>
+                          {field.tag && row[field.key] ? (
+                            <Tag>{formatField(row[field.key], field)}</Tag>
+                          ) : (
+                            formatField(row[field.key], field)
+                          )}
+                        </dd>
+                      </div>
+                    ))}
+                </dl>
+                <footer>
+                  <Button onClick={() => openChild("detail", row.id)}>
+                    详情
+                  </Button>
+                  <Button onClick={() => openChild("update", row.id)}>
+                    更新
+                  </Button>
+                  <Button
+                    danger
+                    disabled={loading}
+                    onClick={() => remove([row.id])}
+                  >
+                    删除
+                  </Button>
+                </footer>
+              </article>
+            ))}
+            {!rows.length && !loading && (
+              <Empty
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description={
+                  Object.keys(request.where).length
+                    ? "暂无匹配结果"
+                    : "暂无数据"
+                }
+              />
+            )}
+          </div>
+          <div className="mobile-pagination">
+            <span>共 {total} 条</span>
+            <Select
+              aria-label="每页条数"
+              value={request.pageSize}
+              options={[10, 20, 30, 50, 100].map((value) => ({
+                value,
+                label: `${value} 条/页`,
+              }))}
+              onChange={(pageSize) => {
+                setSelected([]);
+                setRequest((previous) => ({
+                  ...previous,
+                  currentPage: 1,
+                  pageSize,
+                }));
+              }}
+            />
+            {total > 0 && (
+              <Pagination
+                simple={{ readOnly: true }}
+                current={request.currentPage}
+                pageSize={request.pageSize}
+                total={total}
+                showSizeChanger={false}
+                onChange={(currentPage) => {
+                  setSelected([]);
+                  setRequest((previous) => ({ ...previous, currentPage }));
+                }}
+              />
+            )}
+          </div>
+        </Spin>
+      ) : (
+        <Table
+          size="small"
+          rowKey="id"
+          loading={loading}
+          columns={columns}
+          dataSource={rows}
+          rowSelection={{
+            selectedRowKeys: selected,
+            onChange: setSelected,
+            columnWidth: 48,
+            preserveSelectedRowKeys: false,
+          }}
+          scroll={{ x: columns.reduce((sum, col) => sum + col.width, 48) }}
+          pagination={{
+            current: request.currentPage,
+            pageSize: request.pageSize,
+            total,
+            showSizeChanger: true,
+            locale: {
+              items_per_page: "条/页",
+              prev_page: "上一页",
+              next_page: "下一页",
+              page_size: "每页条数",
+            },
+            pageSizeOptions: [10, 20, 30, 50, 100],
+            showTotal: (count) => `共 ${count} 条`,
+            onChange: (currentPage, pageSize) => {
+              setSelected([]);
+              setRequest((previous) => ({
+                ...previous,
+                currentPage: pageSize === previous.pageSize ? currentPage : 1,
+                pageSize,
+              }));
+            },
+          }}
+          locale={{
+            emptyText: (
+              <Empty
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description={
+                  Object.keys(request.where).length
+                    ? "暂无匹配结果"
+                    : "暂无数据"
+                }
+              />
+            ),
+          }}
+        />
+      )}
+    </main>
+  );
+}
+export default function ListPage() {
+  const hostTheme = useAppTheme();
+  return (
+    <ConfigProvider
+      theme={{
+        algorithm:
+          hostTheme?.mode === "dark"
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
+        token: {
+          fontSize: 12,
+          colorPrimary: hostTheme?.skinColor || "#4548b9",
+          borderRadius: 6,
+        },
+        components: {
+          Table: { cellPaddingBlockSM: 8, cellPaddingInlineSM: 8 },
+          Tag: { fontSizeSM: 10 },
+        },
+      }}
+    >
+      <App>
+        <CustomerList />
+      </App>
+    </ConfigProvider>
+  );
+}