weaver-e10-builder 1.6.0 → 1.6.4

package/skill-docs/assets/sample/app/config.js

@@ -0,0 +1,4 @@
+// 填当前 Ebuilder 应用 ID 和表单 objId。
+// 注意：entry.js 里 asyncImport 的 '${appId}' 是固定字符串，不是这里这个应用 ID。
+export var APP_ID = 'YOUR_EBUILDER_APP_ID';
+export var OBJ_ID = 'YOUR_FORM_OBJ_ID';

package/skill-docs/assets/sample/app/fields.js

@@ -0,0 +1,25 @@
+// 用下面的命令导出字段后，把真实 fieldId 填到这里：
+// e10-cli form read <objId> --app-id <appId> --out fields.json
+//
+// F 的 key 是页面里使用的短名，value 是平台 fieldId。
+// D 是明细表字段；DETAIL_SUB_FORM_ID 是明细表 subFormId（稳定，不随 detail1/detail2 节点名变化）。
+// 表单没有明细表时，删掉 D / DETAIL_SUB_FORM_ID 和页面里的明细段。
+export var F = {
+  name: 'FIELD_ID_NAME',
+  status: 'FIELD_ID_STATUS'
+};
+
+export var D = {
+  name: 'DETAIL_FIELD_ID_NAME',
+  quantity: 'DETAIL_FIELD_ID_QUANTITY'
+};
+
+export var DETAIL_SUB_FORM_ID = 'DETAIL_SUB_FORM_ID';
+
+export var LABELS = {
+  name: '名称',
+  status: '状态',
+  detail: '明细',
+  detailName: '明细名称',
+  detailQuantity: '数量'
+};

package/skill-docs/assets/sample/entry.js

@@ -1,22 +1,24 @@
-import React, { useState, useEffect, Suspense } from 'react';
-import { Route } from 'react-router-dom';
-import { regOvProps, appInfo, regReactChildren } from '@weapp/utils';
-import { getSimpleData } from './api/formApi.js';
-import { asyncImport } from '@weapp/ecodesdk';
-
-// 初始的空白模板项目
-const { publicUrl } = appInfo('@weapp/ecodesdk');
-const extract = (
-  <Route path={`${publicUrl}/sp/custom/123123`}>
-    <React.Suspense fallback={<div>Loading...</div>}>
-    <>
-      HELLO WORLD
-    </>
-    </React.Suspense>
-  </Route>
-);
-
-regOvProps('weappEcodesdk', 'Switch', (props) => {
-  regReactChildren(props, extract);
-  return props;
-}, 0);
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { regOvProps, appInfo, regReactChildren } from '@weapp/utils';
+import { asyncImport } from '@weapp/ecodesdk';
+
+var publicUrl = appInfo('@weapp/ecodesdk').publicUrl;
+
+var ItemsPage = React.lazy(function () {
+  // 单引号里的 ${appId} 是固定字符串，不是应用 ID，不要替换成数字
+  return asyncImport('${appId}', 'pages/Items');
+});
+
+var extract = (
+  <Route path={publicUrl + '/sp/custom/ecode/items'}>
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <ItemsPage />
+    </React.Suspense>
+  </Route>
+);
+
+regOvProps('weappEcodesdk', 'Switch', function (props) {
+  regReactChildren(props, extract);
+  return props;
+}, 0);

package/skill-docs/assets/sample/eslint.config.cjs

@@ -25,6 +25,7 @@ module.exports = [
         Array: "readonly",
         Date: "readonly",
         String: "readonly",
+        Number: "readonly",
         parseInt: "readonly",
         encodeURIComponent: "readonly",
         Error: "readonly",

package/skill-docs/assets/sample/pages/Items.js

@@ -0,0 +1,247 @@
+// 先填 app/config.js（APP_ID / OBJ_ID）和 app/fields.js（真实字段 ID），再运行。
+import React, { useEffect, useState } from 'react';
+import { formClient } from '../api/formApi.js';
+import { APP_ID, OBJ_ID } from '../app/config.js';
+import { F, D, DETAIL_SUB_FORM_ID, LABELS } from '../app/fields.js';
+import { PROTOTYPE_CSS } from '../styles/prototypeStyles.js';
+
+// 模块顶层创建一次，字段和选项缓存会复用；不要放进组件 render。
+var items = formClient({ objId: OBJ_ID, appId: APP_ID });
+
+var EMPTY = {};
+Object.keys(F).forEach(function (key) {
+  EMPTY[F[key]] = '';
+});
+
+var EMPTY_DETAIL = {};
+Object.keys(D).forEach(function (key) {
+  EMPTY_DETAIL[D[key]] = '';
+});
+
+export default function Items() {
+  var [rows, setRows] = useState([]);
+  var [total, setTotal] = useState(null);
+  var [loading, setLoading] = useState(true);
+  var [error, setError] = useState('');
+  var [statusOptions, setStatusOptions] = useState([]);
+  var [form, setForm] = useState(EMPTY);
+  var [detailRows, setDetailRows] = useState([]);
+  var [editingId, setEditingId] = useState('');
+  var [showForm, setShowForm] = useState(false);
+
+  function load() {
+    setLoading(true);
+    setError('');
+    items.list({ page: 1, size: 20, withDetail: true }).then(function (page) {
+      setRows(page.rows);
+      setTotal(page.total);
+    }).catch(function (err) {
+      setError(err.message);
+    }).then(function () {
+      setLoading(false);
+    });
+  }
+
+  useEffect(function () {
+    load();
+    items.options(F.status).then(setStatusOptions).catch(function () {});
+  }, []);
+
+  function openCreate() {
+    setEditingId('');
+    setForm(Object.assign({}, EMPTY));
+    setDetailRows([]);
+    setShowForm(true);
+  }
+
+  function openEdit(row) {
+    var detail = (row.detailRows && row.detailRows[DETAIL_SUB_FORM_ID]) || [];
+    setEditingId(row.id);
+    setForm(Object.assign({}, row.values));
+    setDetailRows(detail.map(function (line) {
+      return Object.assign({}, line.values);
+    }));
+    setShowForm(true);
+  }
+
+  function closeForm() {
+    setShowForm(false);
+    setEditingId('');
+  }
+
+  function change(fieldId, value) {
+    var next = Object.assign({}, form);
+    next[fieldId] = value;
+    setForm(next);
+  }
+
+  function changeDetail(index, fieldId, value) {
+    setDetailRows(detailRows.map(function (line, i) {
+      if (i !== index) return line;
+      var next = Object.assign({}, line);
+      next[fieldId] = value;
+      return next;
+    }));
+  }
+
+  function addDetailRow() {
+    setDetailRows(detailRows.concat([Object.assign({}, EMPTY_DETAIL)]));
+  }
+
+  function removeDetailRow(index) {
+    setDetailRows(detailRows.filter(function (line, i) { return i !== index; }));
+  }
+
+  function submit() {
+    var details = {};
+    details[DETAIL_SUB_FORM_ID] = detailRows;
+    var writeOptions = { details: details };
+    var action;
+    if (editingId) {
+      writeOptions.detailMode = 'cover';
+      action = items.update(editingId, form, writeOptions);
+    } else {
+      action = items.save(form, writeOptions);
+    }
+    action.then(function () {
+      closeForm();
+      load();
+    }).catch(function (err) {
+      setError(err.message);
+    });
+  }
+
+  function remove(row) {
+    if (!window.confirm('确认删除「' + (row.display[F.name] || row.id) + '」？')) return;
+    items.remove(row.id).then(load).catch(function (err) {
+      setError(err.message);
+    });
+  }
+
+  function detailCount(row) {
+    var detail = row.detailRows && row.detailRows[DETAIL_SUB_FORM_ID];
+    return detail ? detail.length : 0;
+  }
+
+  return (
+    <div className="items-page">
+      <style>{PROTOTYPE_CSS}</style>
+
+      <div className="items-head">
+        <h2>物品列表</h2>
+        <button className="items-btn" onClick={openCreate}>新增</button>
+      </div>
+
+      {error ? <div className="items-error">{error}</div> : null}
+      {loading ? <div className="items-empty">加载中...</div> : null}
+      {!loading && rows.length === 0 ? <div className="items-empty">暂无数据</div> : null}
+
+      {!loading && rows.length > 0 ? (
+        <table className="items-table">
+          <thead>
+            <tr>
+              <th>{LABELS.name}</th>
+              <th>{LABELS.status}</th>
+              <th>{LABELS.detail}</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map(function (row) {
+              return (
+                <tr key={row.id}>
+                  <td>{row.display[F.name]}</td>
+                  <td>{row.display[F.status]}</td>
+                  <td>{detailCount(row)} 行</td>
+                  <td>
+                    <button className="items-link" onClick={function () { openEdit(row); }}>编辑</button>
+                    <button className="items-link items-link-danger" onClick={function () { remove(row); }}>删除</button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      ) : null}
+
+      {total !== null ? <div className="items-total">共 {total} 条</div> : null}
+
+      {showForm ? (
+        <div className="items-form">
+          <h3>{editingId ? '编辑物品' : '新增物品'}</h3>
+
+          <label>
+            名称
+            <input
+              value={form[F.name] || ''}
+              onChange={function (e) { change(F.name, e.target.value); }}
+            />
+          </label>
+
+          <label>
+            状态
+            <select
+              value={form[F.status] || ''}
+              onChange={function (e) { change(F.status, e.target.value); }}
+            >
+              <option value="">请选择</option>
+              {statusOptions.map(function (opt) {
+                return <option key={opt.valueKey} value={opt.valueKey}>{opt.name}</option>;
+              })}
+            </select>
+          </label>
+
+          <div className="items-detail">
+            <div className="items-detail-head">
+              <strong>{LABELS.detail}</strong>
+              <button className="items-btn items-btn-plain" onClick={addDetailRow}>加一行</button>
+            </div>
+
+            {detailRows.length === 0 ? (
+              <div className="items-empty">暂无明细</div>
+            ) : (
+              <table className="items-detail-table">
+                <thead>
+                  <tr>
+                    <th>{LABELS.detailName}</th>
+                    <th>{LABELS.detailQuantity}</th>
+                    <th>操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {detailRows.map(function (line, index) {
+                    return (
+                      <tr key={index}>
+                        <td>
+                          <input
+                            value={line[D.name] || ''}
+                            onChange={function (e) { changeDetail(index, D.name, e.target.value); }}
+                          />
+                        </td>
+                        <td>
+                          <input
+                            type="number"
+                            value={line[D.quantity] || ''}
+                            onChange={function (e) { changeDetail(index, D.quantity, e.target.value); }}
+                          />
+                        </td>
+                        <td>
+                          <button className="items-link items-link-danger" onClick={function () { removeDetailRow(index); }}>删除</button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            )}
+          </div>
+
+          <div className="items-actions">
+            <button className="items-btn" onClick={submit}>保存</button>
+            <button className="items-btn items-btn-plain" onClick={closeForm}>取消</button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/skill-docs/assets/sample/styles/prototypeStyles.js

@@ -0,0 +1,137 @@
+/**
+ * 原型 HTML 的 <style> 内容原样放这里。
+ * 不要改写选择器、不要拆成独立 .css 文件、不要逐条转成内联 style。
+ * 页面用 <style>{PROTOTYPE_CSS}</style> 渲染一次。
+ */
+export var PROTOTYPE_CSS = `
+.items-page {
+  padding: 24px;
+  color: #1f2937;
+  background: #f7f8fa;
+  min-height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.items-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.items-head h2 {
+  margin: 0;
+  font-size: 20px;
+}
+.items-btn {
+  border: 0;
+  border-radius: 6px;
+  padding: 7px 16px;
+  color: #fff;
+  background: #2563eb;
+  cursor: pointer;
+}
+.items-btn-plain {
+  color: #374151;
+  background: #e5e7eb;
+}
+.items-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.items-table th,
+.items-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #eef0f3;
+  text-align: left;
+  font-size: 14px;
+}
+.items-table th {
+  color: #6b7280;
+  font-weight: 500;
+  background: #fafbfc;
+}
+.items-link {
+  border: 0;
+  padding: 0;
+  margin-right: 12px;
+  color: #2563eb;
+  background: none;
+  cursor: pointer;
+}
+.items-link-danger {
+  color: #dc2626;
+}
+.items-empty,
+.items-error,
+.items-total {
+  padding: 12px 0;
+  font-size: 14px;
+}
+.items-error {
+  color: #dc2626;
+}
+.items-form {
+  margin-top: 20px;
+  padding: 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+}
+.items-form h3 {
+  margin: 0 0 12px;
+  font-size: 16px;
+}
+.items-form label {
+  display: block;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+.items-form input,
+.items-form select {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 6px;
+  padding: 8px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font: inherit;
+}
+.items-actions {
+  display: flex;
+  gap: 8px;
+}
+.items-detail {
+  margin: 16px 0;
+  padding-top: 12px;
+  border-top: 1px solid #eef0f3;
+}
+.items-detail-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+.items-detail-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.items-detail-table th,
+.items-detail-table td {
+  padding: 6px 8px;
+  border-bottom: 1px solid #eef0f3;
+  text-align: left;
+  font-size: 13px;
+}
+.items-detail-table input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font: inherit;
+}
+`;