@nocobase/flow-engine 2.0.0-alpha.4 → 2.0.0-alpha.41

package/src/runjs-context/snippets/scene/block/three-users-orbit.snippet.ts

@@ -0,0 +1,264 @@
+/**
+ * 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';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [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 用户轨道',
+      description: '从 users:list 加载用户，并以 3D 轨道方式展示（支持悬停高亮与点击提示）',
+    },
+  },
+  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);
+
+// 不做显式清理逻辑；如需存储信息，统一挂在 ctx.model 上
+
+// 使用 ctx.useResource 加载 users:list（真实数据）
+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 请求失败';
+  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 = ['😀','😎','🚀','🌟','🎉','🧠','🐼','🦊','🐯','🦄','🍀','🍕','⚡️','🔥','❤️'];
+  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 接口无数据</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',
+      // 让弹窗自动定位当前记录：顶层 filterByTk + 数据源/集合信息
+      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);
+};
+// 若上一次运行的动画仍在，清理之（仅使用 ctx.model 存储）
+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);
+})();
+
+// 不额外挂载 cleanup；容器被替换后旧 DOM 将被 GC；定时器在下次运行前通过 ctx.model 清理
+`,
+};
+
+export default snippet;

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

@@ -0,0 +1,105 @@
+/**
+ * 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';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [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: '嵌入 Vue 组件',
+      description: '通过 ctx.importAsync 加载 Vue 3 ESM 构建并渲染交互组件',
+    },
+  },
+  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>';
+});
+`,
+};
+
+export default snippet;

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

@@ -0,0 +1,33 @@
+/**
+ * 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';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../../contexts/FormJSFieldItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext, 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: '将数字字段显示为彩色文本',
+      description: '根据数值正负设置显示颜色',
+    },
+  },
+  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>';
+`,
+};
+
+export default snippet;

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

@@ -0,0 +1,45 @@
+/**
+ * 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';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [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: '将文本字段显示为复制按钮',
+      description: '展示字段值并提供快捷复制到剪贴板的按钮',
+    },
+  },
+  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'));
+});
+`,
+};
+
+export default snippet;

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

@@ -0,0 +1,32 @@
+/**
+ * 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';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../../contexts/FormJSFieldItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext, 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: '将数字字段显示为本地化格式',
+      description: '按本地化格式输出数值',
+    },
+  },
+  content: `
+// Format number using locale
+const n = Number(ctx.value ?? 0);
+ctx.element.innerHTML = String(Number.isFinite(n) ? n.toLocaleString() : ctx.value ?? '');
+`,
+};
+
+export default snippet;

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

@@ -0,0 +1,31 @@
+/**
+ * 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';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../../contexts/FormJSFieldItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext, FormJSFieldItemRunJSContext],
+  prefix: 'sn-jsf-value',
+  label: 'Display text field as highlighted text',
+  description: 'Render the current text field value with simple highlight styling',
+  locales: {
+    'zh-CN': {
+      label: '将文本字段显示为高亮文本',
+      description: '将字段值写入容器并添加高亮样式',
+    },
+  },
+  content: `
+const v = String(ctx.value ?? '');
+ctx.element.innerHTML = \`<span class="nb-js-field-value" style="color:#1890ff;font-weight:600">\${v}</span>\`;
+`,
+};
+
+export default snippet;

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

@@ -0,0 +1,63 @@
+/**
+ * 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';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../../contexts/FormJSFieldItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext, FormJSFieldItemRunJSContext],
+  prefix: 'sn-jsf-percent',
+  label: 'Display number field as percentage bar',
+  description: 'Render numeric values as a percentage progress bar',
+  locales: {
+    'zh-CN': {
+      label: '将数字字段显示为百分比进度条',
+      description: '将数字格式化为百分比并显示进度条',
+    },
+  },
+  content: `
+const value = Number(ctx.value ?? 0);
+
+if (!Number.isFinite(value)) {
+  ctx.element.innerHTML = '-';
+  return;
+}
+
+// Ensure value is between 0 and 100
+const percent = Math.max(0, Math.min(100, value));
+
+// Color based on value
+const getColor = (val) => {
+  if (val >= 80) return '#52c41a';
+  if (val >= 50) return '#faad14';
+  return '#f5222d';
+};
+
+const color = getColor(percent);
+
+ctx.element.innerHTML = \`
+  <div style="display: flex; align-items: center; gap: 8px;">
+    <div style="flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
+      <div style="
+        width: \${percent}%;
+        height: 100%;
+        background: \${color};
+        transition: width 0.3s ease;
+      "></div>
+    </div>
+    <span style="color: \${color}; font-weight: 500; min-width: 45px; text-align: right;">
+      \${percent.toFixed(1)}%
+    </span>
+  </div>
+\`;
+`,
+};
+
+export default snippet;

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

@@ -0,0 +1,61 @@
+/**
+ * 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';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../../contexts/FormJSFieldItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext, FormJSFieldItemRunJSContext],
+  prefix: 'sn-jsf-relative-time',
+  label: 'Display date field as relative time',
+  description: 'Render date values as “3 days ago”, “just now”, etc.',
+  locales: {
+    'zh-CN': {
+      label: '将日期字段显示为相对时间',
+      description: '将日期显示为“3天前”、“刚刚”等相对时间',
+    },
+  },
+  content: `
+const formatRelativeTime = (date) => {
+  const now = new Date();
+  const diff = now - new Date(date);
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+
+  if (seconds < 60) return ctx.t('just now');
+  if (minutes < 60) return ctx.t('{{count}} minutes ago', { count: minutes });
+  if (hours < 24) return ctx.t('{{count}} hours ago', { count: hours });
+  if (days < 30) return ctx.t('{{count}} days ago', { count: days });
+  if (months < 12) return ctx.t('{{count}} months ago', { count: months });
+  return ctx.t('{{count}} years ago', { count: years });
+};
+
+const dateStr = ctx.value;
+if (!dateStr) {
+  ctx.element.innerHTML = '-';
+  return;
+}
+
+const relativeTime = formatRelativeTime(dateStr);
+const fullDate = new Date(dateStr).toLocaleString();
+
+ctx.element.innerHTML = \`
+  <span title="\${fullDate}" style="cursor: help; color: #666;">
+    \${relativeTime}
+  </span>
+\`;
+`,
+};
+
+export default snippet;