@nocobase/flow-engine 2.1.0-alpha.1 → 2.1.0-alpha.11

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

@@ -23,10 +23,22 @@ const snippet: SnippetModule = {
   },
   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 () => {
+const wrapper = document.createElement('span');
+wrapper.style.display = 'inline-flex';
+wrapper.style.alignItems = 'center';
+wrapper.style.gap = '8px';
+
+const valueEl = document.createElement('span');
+valueEl.textContent = text;
+valueEl.style.color = '#666';
+
+const copyEl = document.createElement('a');
+copyEl.textContent = ctx.t('Copy');
+copyEl.style.cursor = 'pointer';
+copyEl.style.color = '#1677ff';
+
+copyEl.addEventListener('click', async () => {
   if (navigator?.clipboard?.writeText) {
     await navigator.clipboard.writeText(text);
   } else {
@@ -39,6 +51,11 @@ ctx.element.querySelector('.nb-copy')?.addEventListener('click', async () => {
   }
   ctx.message.success(ctx.t('Copied'));
 });
+
+wrapper.appendChild(valueEl);
+wrapper.appendChild(copyEl);
+
+ctx.render(wrapper);
 `,
 };
 

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

@@ -25,7 +25,7 @@ const snippet: SnippetModule = {
   content: `
 // Format number using locale
 const n = Number(ctx.value ?? 0);
-ctx.element.innerHTML = String(Number.isFinite(n) ? n.toLocaleString() : ctx.value ?? '');
+ctx.render(String(Number.isFinite(n) ? n.toLocaleString() : ctx.value ?? ''));
 `,
 };
 

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

@@ -24,7 +24,7 @@ const snippet: SnippetModule = {
   },
   content: `
 const v = String(ctx.value ?? '');
-ctx.element.innerHTML = \`<span class="nb-js-field-value" style="color:#1890ff;font-weight:600">\${v}</span>\`;
+ctx.render(\`<span class="nb-js-field-value" style="color:#1890ff;font-weight:600">\${v}</span>\`);
 `,
 };
 

package/src/runjs-context/snippets/scene/detail/percentage-bar.snippet.ts

@@ -26,7 +26,7 @@ const snippet: SnippetModule = {
 const value = Number(ctx.value ?? 0);
 
 if (!Number.isFinite(value)) {
-  ctx.element.innerHTML = '-';
+  ctx.render('-');
   return;
 }
 
@@ -42,7 +42,7 @@ const getColor = (val) => {
 
 const color = getColor(percent);
 
-ctx.element.innerHTML = \`
+ctx.render(\`
   <div style="display: flex; align-items: center; gap: 8px;">
     <div style="flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
       <div style="
@@ -56,7 +56,7 @@ ctx.element.innerHTML = \`
       \${percent.toFixed(1)}%
     </span>
   </div>
-\`;
+\`);
 `,
 };
 

package/src/runjs-context/snippets/scene/detail/relative-time.snippet.ts

@@ -43,18 +43,18 @@ const formatRelativeTime = (date) => {
 
 const dateStr = ctx.value;
 if (!dateStr) {
-  ctx.element.innerHTML = '-';
+  ctx.render('-');
   return;
 }
 
 const relativeTime = formatRelativeTime(dateStr);
 const fullDate = new Date(dateStr).toLocaleString();
 
-ctx.element.innerHTML = \`
+ctx.render(\`
   <span title="\${fullDate}" style="cursor: help; color: #666;">
     \${relativeTime}
   </span>
-\`;
+\`);
 `,
 };
 

package/src/runjs-context/snippets/scene/detail/status-tag.snippet.ts

@@ -36,7 +36,7 @@ const statusColors = {
 const status = String(ctx.value || 'unknown');
 const color = statusColors[status] || 'default';
 
-ctx.element.innerHTML = \`
+ctx.render(\`
   <span style="
     display: inline-block;
     padding: 2px 8px;
@@ -48,7 +48,7 @@ ctx.element.innerHTML = \`
   ">
     \${ctx.t(status)}
   </span>
-\`;
+\`);
 `,
 };
 

package/src/runjs-context/snippets/scene/form/cascade-select.snippet.ts

@@ -29,7 +29,7 @@ if (!parentRoleId) {
   return;
 }
 
-const res = await ctx.api.request({
+const res = await ctx.request({
   url: 'roles:list',
   method: 'get',
   params: {

package/src/runjs-context/snippets/scene/form/render-basic.snippet.ts

@@ -21,18 +21,13 @@ const snippet: SnippetModule = {
       description: '在表单项容器中渲染自定义内容',
     },
   },
-  content:
-    `
-ctx.element.innerHTML = ` +
-    '`' +
-    `
+  content: `
+ctx.render(\`
   <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6;">
     <h3 style="color: #1890ff; margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">\${ctx.t('JS Item')}</h3>
     <div style="color:#555">\${ctx.t('This area is rendered by your JavaScript code.')}</div>
   </div>
-` +
-    '`' +
-    `;
+\`);
 `,
 };
 

package/src/runjs-context/snippets/scene/table/cell-open-dialog.snippet.ts

@@ -23,9 +23,10 @@ const snippet: SnippetModule = {
   },
   content: `
 // Render a button inside the cell
-ctx.element.innerHTML = '<button class="nb-cell-btn" style="padding:4px 8px">' + ctx.t('View') + '</button>';
-
-const button = ctx.element.querySelector('.nb-cell-btn');
+const button = document.createElement('button');
+button.className = 'nb-cell-btn';
+button.style.padding = '4px 8px';
+button.textContent = ctx.t('View');
 const popupUid = ctx.model.uid + '-1'; // popupUid should be stable and better bound to ctx.model.uid
 const primaryKey = ctx.collection?.primaryKey || 'id';
 
@@ -39,6 +40,8 @@ button?.addEventListener('click', async () => {
     },
   });
 });
+
+ctx.render(button);
 `,
 };
 

package/src/runjs-context/snippets/scene/table/concat-fields.snippet.ts

@@ -53,7 +53,9 @@ const valueB = normalize(ctx.record?.[fieldB]);
 
 const parts = [valueA, valueB].filter((item) => item.length > 0);
 
-ctx.element.textContent = parts.length ? parts.join(' / ') : ctx.t('N/A');
+const result = document.createElement('span');
+result.textContent = parts.length ? parts.join(' / ') : ctx.t('N/A');
+ctx.render(result);
 `,
 };