@nocobase/flow-engine 2.0.0-alpha.10

package/lib/runjs-context/snippets/scene/block/three-users-orbit.snippet.js

@@ -0,0 +1,283 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var three_users_orbit_snippet_exports = {};
+__export(three_users_orbit_snippet_exports, {
+  default: () => three_users_orbit_snippet_default
+});
+module.exports = __toCommonJS(three_users_orbit_snippet_exports);
+var import_JSBlockRunJSContext = require("../../../contexts/JSBlockRunJSContext");
+const snippet = {
+  contexts: [import_JSBlockRunJSContext.JSBlockRunJSContext],
+  prefix: "sn-three-users-orbit",
+  label: "Users orbit (three.js)",
+  description: "Fetch users:list and render a rotating 3D orbit of users with hover/click",
+  locales: {
+    "zh-CN": {
+      label: "Three.js \u7528\u6237\u8F68\u9053",
+      description: "\u4ECE users:list \u52A0\u8F7D\u7528\u6237\uFF0C\u5E76\u4EE5 3D \u8F68\u9053\u65B9\u5F0F\u5C55\u793A\uFF08\u652F\u6301\u60AC\u505C\u9AD8\u4EAE\u4E0E\u70B9\u51FB\u63D0\u793A\uFF09"
+    }
+  },
+  content: `
+// Container
+const container = document.createElement('div');
+container.style.width = '100%';
+container.style.height = '360px';
+container.style.position = 'relative';
+container.style.borderRadius = '10px';
+container.style.overflow = 'hidden';
+container.style.background = 'radial-gradient(700px 300px at 20% 25%, #172036, #0b0f19 60%), radial-gradient(600px 240px at 80% 70%, rgba(56,189,248,0.12), transparent 60%)';
+ctx.element.replaceChildren(container);
+
+// \u4E0D\u505A\u663E\u5F0F\u6E05\u7406\u903B\u8F91\uFF1B\u5982\u9700\u5B58\u50A8\u4FE1\u606F\uFF0C\u7EDF\u4E00\u6302\u5728 ctx.model \u4E0A
+
+// \u4F7F\u7528 ctx.useResource \u52A0\u8F7D users:list\uFF08\u771F\u5B9E\u6570\u636E\uFF09
+ctx.useResource('MultiRecordResource');
+const resource = ctx.resource;
+resource.setDataSourceKey && resource.setDataSourceKey('main');
+resource.setResourceName && resource.setResourceName('users');
+resource.setPageSize && resource.setPageSize(50);
+try {
+  await resource.refresh();
+} catch (err) {
+  var msg = (err && err.message) ? err.message : 'users:list \u8BF7\u6C42\u5931\u8D25';
+  ctx.element.innerHTML = '<div style="color:#cbd5e1; padding: 12px; text-align:center;">' + msg + '</div>';
+  throw err;
+}
+
+// Helpers: generate avatar textures (emoji or initials)
+function makeAvatarTexture(user, idx) {
+  const canvas = document.createElement('canvas');
+  const size = 128;
+  canvas.width = canvas.height = size;
+  const g = canvas.getContext('2d');
+  // background circle with subtle gradient
+  const palettes = ['#60a5fa','#34d399','#fbbf24','#f472b6','#a78bfa','#f87171','#22d3ee'];
+  const c1 = palettes[idx % palettes.length];
+  const grad = g.createRadialGradient(size*0.35, size*0.35, 10, size*0.5, size*0.5, size*0.6);
+  grad.addColorStop(0, c1);
+  grad.addColorStop(1, '#111827');
+  g.fillStyle = grad;
+  g.beginPath();
+  g.arc(size/2, size/2, size*0.48, 0, Math.PI*2);
+  g.fill();
+  // border
+  g.lineWidth = 4; g.strokeStyle = 'rgba(255,255,255,0.25)';
+  g.stroke();
+  // content: emoji if possible, else initials
+  const emojis = ['\u{1F600}','\u{1F60E}','\u{1F680}','\u{1F31F}','\u{1F389}','\u{1F9E0}','\u{1F43C}','\u{1F98A}','\u{1F42F}','\u{1F984}','\u{1F340}','\u{1F355}','\u26A1\uFE0F','\u{1F525}','\u2764\uFE0F'];
+  const text = emojis[idx % emojis.length];
+  g.textAlign = 'center';
+  g.textBaseline = 'middle';
+  g.font = 'bold 68px system-ui, -apple-system, Segoe UI Emoji, Noto Color Emoji, Apple Color Emoji';
+  g.fillStyle = '#fff';
+  g.fillText(text, size/2, size/2 + 4);
+  const tex = new THREE.CanvasTexture(canvas);
+  tex.needsUpdate = true;
+  return tex;
+}
+
+const THREE = await ctx.importAsync('https://esm.sh/three@0.160.0');
+const { Scene, PerspectiveCamera, WebGLRenderer, Color, AmbientLight, DirectionalLight, Group, Mesh, MeshStandardMaterial, SphereGeometry, Raycaster, Vector2 } = THREE;
+
+const scene = new Scene();
+scene.background = new Color(0x0b0f19);
+
+const camera = new PerspectiveCamera(55, container.clientWidth / container.clientHeight, 0.1, 100);
+camera.position.set(0, 1.2, 6.5);
+
+const renderer = new WebGLRenderer({ antialias: true, alpha: false });
+renderer.setSize(container.clientWidth, container.clientHeight);
+renderer.setPixelRatio(1); // sandbox-friendly
+container.appendChild(renderer.domElement);
+
+scene.add(new AmbientLight(0xffffff, 0.8));
+const dir = new DirectionalLight(0xffffff, 0.6);
+dir.position.set(2.5, 3.0, 4.0);
+scene.add(dir);
+
+const orbit = new Group();
+scene.add(orbit);
+
+const users = (resource && resource.getData && Array.isArray(resource.getData())) ? resource.getData() : [];
+if (!users.length) {
+  container.innerHTML = '<div style="color:#cbd5e1; padding: 12px; text-align:center;">users:list \u63A5\u53E3\u65E0\u6570\u636E</div>';
+  return;
+}
+const N = users.length;
+const R = 2.8;
+// background starfield
+const starCount = 500;
+const starPos = new Float32Array(starCount * 3);
+for (let i = 0; i < starCount; i++) {
+  const r = 10 * Math.pow(Math.random(), 0.7) + 4;
+  const th = Math.random() * Math.PI * 2;
+  const ph = Math.acos(2 * Math.random() - 1);
+  starPos[i*3+0] = r * Math.sin(ph) * Math.cos(th);
+  starPos[i*3+1] = r * Math.cos(ph) * 0.5;
+  starPos[i*3+2] = r * Math.sin(ph) * Math.sin(th);
+}
+const starGeo = new THREE.BufferGeometry();
+starGeo.setAttribute('position', new THREE.Float32BufferAttribute(starPos, 3));
+const starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.02, transparent: true, opacity: 0.8 });
+const stars = new THREE.Points(starGeo, starMat);
+scene.add(stars);
+
+const items = [];
+for (let i = 0; i < N; i++) {
+  const u = users[i];
+  const a = (i / N) * Math.PI * 2;
+  const y = (Math.sin(a * 2) * 0.6);
+  const tex = makeAvatarTexture(u, i);
+  const mat = new THREE.SpriteMaterial({ map: tex, transparent: true, depthWrite: false });
+  const sprite = new THREE.Sprite(mat);
+  sprite.scale.set(0.9, 0.9, 1);
+  sprite.position.set(Math.cos(a) * R, y, Math.sin(a) * R);
+  sprite.userData.user = u;
+  orbit.add(sprite);
+  items.push(sprite);
+}
+
+// Simple ring wireframe for context
+const ring = new Group();
+scene.add(ring);
+for (let k = 0; k < 64; k++) {
+  const a = (k / 64) * Math.PI * 2;
+  const seg = new Mesh(new SphereGeometry(0.01, 8, 8), new MeshStandardMaterial({ color: 0xffffff }));
+  seg.position.set(Math.cos(a) * R, 0, Math.sin(a) * R);
+  ring.add(seg);
+}
+
+// Hover + click via Raycaster
+const raycaster = new Raycaster();
+const mouse = new Vector2();
+let over = null;
+
+function updateMouse(e) {
+  const rect = container.getBoundingClientRect();
+  const x = (e.clientX - rect.left) / rect.width;
+  const y = (e.clientY - rect.top) / rect.height;
+  mouse.set(x * 2 - 1, -(y * 2 - 1));
+}
+
+function handleHover() {
+  raycaster.setFromCamera(mouse, camera);
+  const intersects = raycaster.intersectObjects(items, false);
+  const hit = (intersects && intersects[0] && intersects[0].object) ? intersects[0].object : null;
+  if (over && over !== hit) {
+    over.material.opacity = 1.0;
+    over.scale.set(0.9, 0.9, 1);
+    over = null;
+  }
+  if (hit && hit !== over) {
+    over = hit;
+    over.material.opacity = 1.0;
+    over.scale.set(1.15, 1.15, 1);
+  }
+}
+
+const onMouseMove = (e) => { updateMouse(e); handleHover(); };
+// resolve primary key field name from collection meta
+let __pkField = null;
+async function getPrimaryKeyField() {
+  if (__pkField) return __pkField;
+  const name = (resource && resource.getResourceName) ? resource.getResourceName() : 'users';
+  try {
+    const meta = await ctx.api.request({ url: 'collections:get', method: 'get', params: { filterByTk: name } });
+    const data = (meta && meta.data) ? meta.data : {};
+    // prefer filterTargetKey, fallback to fields.primaryKey
+    const ft = (data && data.filterTargetKey) ? data.filterTargetKey : (data && data.options && data.options.filterTargetKey);
+    if (ft && typeof ft === 'string') {
+      __pkField = ft;
+      return __pkField;
+    }
+    const fields = (data && data.fields) ? data.fields : (data && data.options && data.options.fields) ? data.options.fields : [];
+    const pk = Array.isArray(fields) && fields.find(function(f){ return f && (f.primaryKey || (f.uiSchema && f.uiSchema['x-component'] === 'ID')); });
+    if (pk && typeof pk.name === 'string') {
+      __pkField = pk.name;
+      return __pkField;
+    }
+  } catch (_) {}
+  __pkField = 'id';
+  return __pkField;
+}
+
+const onClick = async (e) => {
+  updateMouse(e);
+  handleHover();
+  if (over && over.userData && over.userData.user) {
+    const u = over.userData.user;
+    const baseId = (ctx.model && ctx.model.uid) ? ctx.model.uid : String(ctx.model || 'runjs');
+    const popupUid = baseId + '-details';
+    const pkField = await getPrimaryKeyField();
+    var tk = (u && u[pkField]) ? u[pkField] : (u ? (u.id || u.userId || u.pk) : undefined);
+    await ctx.openView(popupUid, {
+      mode: 'dialog',
+      // \u8BA9\u5F39\u7A97\u81EA\u52A8\u5B9A\u4F4D\u5F53\u524D\u8BB0\u5F55\uFF1A\u9876\u5C42 filterByTk + \u6570\u636E\u6E90/\u96C6\u5408\u4FE1\u606F
+      dataSourceKey: (resource && resource.getDataSourceKey) ? resource.getDataSourceKey() : 'main',
+      collectionName: (resource && resource.getResourceName) ? resource.getResourceName() : 'users',
+      filterByTk: tk,
+      params: { user: u, userId: tk },
+      title: (u.nickname || u.username || u.name || 'User') + ' details',
+      width: 720,
+    });
+  }
+};
+container.addEventListener('mousemove', onMouseMove);
+container.addEventListener('click', onClick);
+
+// Animation (no rAF/use setInterval)
+let t = 0;
+const tick = () => {
+  t += 0.016;
+  orbit.rotation.y += 0.005; // slow spin
+  stars.rotation.y = t * 0.02;
+  // subtle bobbing per item
+  for (let i = 0; i < items.length; i++) {
+    const m = items[i];
+    const a = (i / items.length) * Math.PI * 2;
+    m.position.y = Math.sin(a * 2 + t * 1.5) * 0.6;
+  }
+  renderer.render(scene, camera);
+};
+// \u82E5\u4E0A\u4E00\u6B21\u8FD0\u884C\u7684\u52A8\u753B\u4ECD\u5728\uFF0C\u6E05\u7406\u4E4B\uFF08\u4EC5\u4F7F\u7528 ctx.model \u5B58\u50A8\uFF09
+try { if (ctx.model && ctx.model.__usersOrbitTimer) clearInterval(ctx.model.__usersOrbitTimer); } catch (_) {}
+var __timer = setInterval(tick, 16);
+if (ctx.model) ctx.model.__usersOrbitTimer = __timer;
+
+// Initial sizing
+(() => {
+  const w = container.clientWidth;
+  const h = container.clientHeight;
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+  renderer.setSize(w, h);
+})();
+
+// \u4E0D\u989D\u5916\u6302\u8F7D cleanup\uFF1B\u5BB9\u5668\u88AB\u66FF\u6362\u540E\u65E7 DOM \u5C06\u88AB GC\uFF1B\u5B9A\u65F6\u5668\u5728\u4E0B\u6B21\u8FD0\u884C\u524D\u901A\u8FC7 ctx.model \u6E05\u7406
+`
+};
+var three_users_orbit_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/block/vue-component.snippet.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import type { SnippetModule } from '../../types';
+declare const snippet: SnippetModule;
+export default snippet;

package/lib/runjs-context/snippets/scene/block/vue-component.snippet.js

@@ -0,0 +1,124 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vue_component_snippet_exports = {};
+__export(vue_component_snippet_exports, {
+  default: () => vue_component_snippet_default
+});
+module.exports = __toCommonJS(vue_component_snippet_exports);
+var import_JSBlockRunJSContext = require("../../../contexts/JSBlockRunJSContext");
+const snippet = {
+  contexts: [import_JSBlockRunJSContext.JSBlockRunJSContext],
+  prefix: "sn-jsb-vue",
+  label: "Embed Vue component",
+  description: "Use ctx.importAsync to load Vue 3 ESM build and render a reactive widget",
+  locales: {
+    "zh-CN": {
+      label: "\u5D4C\u5165 Vue \u7EC4\u4EF6",
+      description: "\u901A\u8FC7 ctx.importAsync \u52A0\u8F7D Vue 3 ESM \u6784\u5EFA\u5E76\u6E32\u67D3\u4EA4\u4E92\u7EC4\u4EF6"
+    }
+  },
+  content: `
+const mountNode = document.createElement('div');
+mountNode.style.padding = '16px';
+mountNode.style.background = '#fff';
+mountNode.style.borderRadius = '8px';
+const target = document.createElement('div');
+target.className = 'nb-vue-counter';
+mountNode.appendChild(target);
+ctx.element.replaceChildren(mountNode);
+
+async function bootstrap() {
+  const mod = await ctx.importAsync('https://esm.sh/vue@3.4.27/dist/vue.runtime.esm-browser.js');
+  const createApp = mod?.createApp;
+  const ref = mod?.ref;
+  const h = mod?.h;
+  if (typeof createApp !== 'function' || typeof ref !== 'function' || typeof h !== 'function') {
+    throw new Error('Vue ESM module not available');
+  }
+
+  const Counter = {
+    setup() {
+      const count = ref(0);
+      const increase = () => {
+        count.value += 1;
+      };
+      const openPopup = async () => {
+        const popupUid = ctx.model?.uid ? ctx.model.uid + '-popup' : 'vue-popup';
+        await ctx.openView(popupUid, {
+          mode: 'drawer',
+          title: ctx.t('Hello from Vue'),
+          params: {
+            fromVue: true,
+            triggerCount: count.value,
+          },
+        });
+      };
+      return () =>
+        h(
+          'div',
+          { style: 'display:flex;align-items:center;gap:12px;' },
+          [
+            h(
+              'button',
+              {
+                style:
+                  'padding:6px 12px;border:1px solid #fa8c16;background:#fa8c16;color:#fff;border-radius:4px;cursor:pointer;',
+                onClick: increase,
+              },
+              ctx.t('Increase'),
+            ),
+            h(
+              'button',
+              {
+                style:
+                  'padding:6px 12px;border:1px solid #1677ff;background:#1677ff;color:#fff;border-radius:4px;cursor:pointer;',
+                onClick: openPopup,
+              },
+              ctx.t('Open popup'),
+            ),
+            h(
+              'span',
+              null,
+              ctx.t('Current count') + ': ' + count.value,
+            ),
+          ],
+        );
+    },
+  };
+
+  const app = createApp(Counter);
+  const mountTarget = ctx.element.querySelector('.nb-vue-counter');
+  app.mount(mountTarget || ctx.element);
+}
+
+bootstrap().catch((error) => {
+  console.error('[RunJS] failed to mount Vue counter', error);
+  mountNode.innerHTML = '<div style="color:#c00;">' + (error?.message || ctx.t('Vue initialization failed')) + '</div>';
+});
+`
+};
+var vue_component_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/detail/color-by-value.snippet.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import type { SnippetModule } from '../../types';
+declare const snippet: SnippetModule;
+export default snippet;

package/lib/runjs-context/snippets/scene/detail/color-by-value.snippet.js

@@ -0,0 +1,52 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_by_value_snippet_exports = {};
+__export(color_by_value_snippet_exports, {
+  default: () => color_by_value_snippet_default
+});
+module.exports = __toCommonJS(color_by_value_snippet_exports);
+var import_JSFieldRunJSContext = require("../../../contexts/JSFieldRunJSContext");
+var import_FormJSFieldItemRunJSContext = require("../../../contexts/FormJSFieldItemRunJSContext");
+const snippet = {
+  contexts: [import_JSFieldRunJSContext.JSFieldRunJSContext, import_FormJSFieldItemRunJSContext.FormJSFieldItemRunJSContext],
+  prefix: "sn-jsf-color",
+  label: "Display number field as colored text",
+  description: "Display numeric values using colors based on their sign",
+  locales: {
+    "zh-CN": {
+      label: "\u5C06\u6570\u5B57\u5B57\u6BB5\u663E\u793A\u4E3A\u5F69\u8272\u6587\u672C",
+      description: "\u6839\u636E\u6570\u503C\u6B63\u8D1F\u8BBE\u7F6E\u663E\u793A\u989C\u8272"
+    }
+  },
+  content: `
+// Colorize based on numeric sign
+const n = Number(ctx.value ?? 0);
+const color = Number.isFinite(n) ? (n > 0 ? 'green' : n < 0 ? 'red' : '#999') : '#555';
+ctx.element.innerHTML = '<span style=' + JSON.stringify('color:' + color) + '>' + String(ctx.value ?? '') + '</span>';
+`
+};
+var color_by_value_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/detail/copy-to-clipboard.snippet.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import type { SnippetModule } from '../../types';
+declare const snippet: SnippetModule;
+export default snippet;

package/lib/runjs-context/snippets/scene/detail/copy-to-clipboard.snippet.js

@@ -0,0 +1,64 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var copy_to_clipboard_snippet_exports = {};
+__export(copy_to_clipboard_snippet_exports, {
+  default: () => copy_to_clipboard_snippet_default
+});
+module.exports = __toCommonJS(copy_to_clipboard_snippet_exports);
+var import_JSFieldRunJSContext = require("../../../contexts/JSFieldRunJSContext");
+const snippet = {
+  contexts: [import_JSFieldRunJSContext.JSFieldRunJSContext],
+  prefix: "sn-jsf-copy",
+  label: "Display text field with copy button",
+  description: "Render the text field value with a copy-to-clipboard button",
+  locales: {
+    "zh-CN": {
+      label: "\u5C06\u6587\u672C\u5B57\u6BB5\u663E\u793A\u4E3A\u590D\u5236\u6309\u94AE",
+      description: "\u5C55\u793A\u5B57\u6BB5\u503C\u5E76\u63D0\u4F9B\u5FEB\u6377\u590D\u5236\u5230\u526A\u8D34\u677F\u7684\u6309\u94AE"
+    }
+  },
+  content: `
+const text = String(ctx.value ?? '');
+ctx.element.innerHTML = '<a class="nb-copy" style="cursor:pointer;color:#1677ff">' +
+  ctx.t('Copy') + '</a>';
+
+ctx.element.querySelector('.nb-copy')?.addEventListener('click', async () => {
+  if (navigator?.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+  } else {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+  }
+  ctx.message.success(ctx.t('Copied'));
+});
+`
+};
+var copy_to_clipboard_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/detail/format-number.snippet.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import type { SnippetModule } from '../../types';
+declare const snippet: SnippetModule;
+export default snippet;

package/lib/runjs-context/snippets/scene/detail/format-number.snippet.js

@@ -0,0 +1,51 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var format_number_snippet_exports = {};
+__export(format_number_snippet_exports, {
+  default: () => format_number_snippet_default
+});
+module.exports = __toCommonJS(format_number_snippet_exports);
+var import_JSFieldRunJSContext = require("../../../contexts/JSFieldRunJSContext");
+var import_FormJSFieldItemRunJSContext = require("../../../contexts/FormJSFieldItemRunJSContext");
+const snippet = {
+  contexts: [import_JSFieldRunJSContext.JSFieldRunJSContext, import_FormJSFieldItemRunJSContext.FormJSFieldItemRunJSContext],
+  prefix: "sn-jsf-num",
+  label: "Display number field as localized number",
+  description: "Format numeric values with locale-aware separators before rendering",
+  locales: {
+    "zh-CN": {
+      label: "\u5C06\u6570\u5B57\u5B57\u6BB5\u663E\u793A\u4E3A\u672C\u5730\u5316\u683C\u5F0F",
+      description: "\u6309\u672C\u5730\u5316\u683C\u5F0F\u8F93\u51FA\u6570\u503C"
+    }
+  },
+  content: `
+// Format number using locale
+const n = Number(ctx.value ?? 0);
+ctx.element.innerHTML = String(Number.isFinite(n) ? n.toLocaleString() : ctx.value ?? '');
+`
+};
+var format_number_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/detail/innerHTML-value.snippet.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import type { SnippetModule } from '../../types';
+declare const snippet: SnippetModule;
+export default snippet;