mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-07-02 03:02:19 +08:00
feat: add i18n into lowcode context
This commit is contained in:
gchust
parent
6733102ed3
commit
5797f84237
@ -102,7 +102,7 @@ const floatContainerStyles = ({ showBackground, showBorder }) => css`
|
||||
|
||||
// 悬浮右键菜单组件接口
|
||||
interface ModelProvidedProps {
|
||||
model: any;
|
||||
model: FlowModel;
|
||||
children?: React.ReactNode;
|
||||
enabled?: boolean;
|
||||
showDeleteButton?: boolean;
|
||||
@ -192,7 +192,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
|
||||
className,
|
||||
showBackground = true,
|
||||
showBorder = true,
|
||||
}) => {
|
||||
}: ModelProvidedProps) => {
|
||||
const [hideMenu, setHideMenu] = useState<boolean>(false);
|
||||
const [hasButton, setHasButton] = useState<boolean>(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@ -11,6 +11,7 @@ import { BlockModel } from '@nocobase/client';
|
||||
import { APIResource } from '@nocobase/flow-engine';
|
||||
import { Card, Spin } from 'antd';
|
||||
import React, { createRef } from 'react';
|
||||
import { NAMESPACE } from './locale';
|
||||
|
||||
export class LowcodeBlockModel extends BlockModel {
|
||||
ref = createRef<HTMLDivElement>();
|
||||
@ -46,33 +47,64 @@ LowcodeBlockModel.define({
|
||||
stepParams: {
|
||||
default: {
|
||||
executionStep: {
|
||||
code: `
|
||||
code:
|
||||
`
|
||||
// Welcome to the lowcode block
|
||||
// Create powerful interactive components with JavaScript
|
||||
ctx.element.innerHTML = \`
|
||||
<div style="padding: 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; max-width: 600px;">
|
||||
<h2 style="color: #1890ff; margin: 0 0 20px 0; font-size: 24px; font-weight: 600;">
|
||||
🚀 Welcome to Lowcode Block
|
||||
🚀 \${ctx.i18n.t('Welcome to Lowcode Block', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}
|
||||
</h2>
|
||||
|
||||
<p style="color: #666; margin-bottom: 24px; font-size: 16px;">
|
||||
Build interactive components with JavaScript and external libraries
|
||||
\${ctx.i18n.t('Build interactive components with JavaScript and external libraries', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}
|
||||
</p>
|
||||
|
||||
<div style="background: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
|
||||
<h3 style="color: #333; margin: 0 0 16px 0; font-size: 18px;">✨ Key Features</h3>
|
||||
<h3 style="color: #333; margin: 0 0 16px 0; font-size: 18px;">✨ \${ctx.i18n.t('Key Features', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</h3>
|
||||
<ul style="margin: 0; padding-left: 20px; color: #555;">
|
||||
<li style="margin-bottom: 8px;">🎨 <strong>Custom JavaScript execution</strong> - Full programming capabilities</li>
|
||||
<li style="margin-bottom: 8px;">📚 <strong>External library support</strong> - Load any npm package or CDN library</li>
|
||||
<li style="margin-bottom: 8px;">🔗 <strong>NocoBase API integration</strong> - Access your data and collections</li>
|
||||
<li style="margin-bottom: 8px;">💡 <strong>Async/await support</strong> - Handle asynchronous operations</li>
|
||||
<li style="margin-bottom: 8px;">🎯 <strong>Direct DOM manipulation</strong> - Full control over rendering</li>
|
||||
<li style="margin-bottom: 8px;">🎨 <strong>\${ctx.i18n.t('Custom JavaScript execution', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> - \${ctx.i18n.t('Full programming capabilities', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</li>
|
||||
<li style="margin-bottom: 8px;">📚 <strong>\${ctx.i18n.t('External library support', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> - \${ctx.i18n.t('Load any npm package or CDN library', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</li>
|
||||
<li style="margin-bottom: 8px;">🔗 <strong>\${ctx.i18n.t('NocoBase API integration', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> - \${ctx.i18n.t('Access your data and collections', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</li>
|
||||
<li style="margin-bottom: 8px;">💡 <strong>\${ctx.i18n.t('Async/await support', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> - \${ctx.i18n.t('Handle asynchronous operations', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</li>
|
||||
<li style="margin-bottom: 8px;">🎯 <strong>\${ctx.i18n.t('Direct DOM manipulation', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> - \${ctx.i18n.t('Full control over rendering', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="background: #e6f7ff; border-left: 4px solid #1890ff; padding: 16px; border-radius: 4px;">
|
||||
<p style="margin: 0; color: #333; font-size: 14px;">
|
||||
💡 <strong>Ready to start?</strong> Replace this code with your custom JavaScript to build amazing components!
|
||||
💡 <strong>\${ctx.i18n.t('Ready to start?', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> \${ctx.i18n.t('Replace this code with your custom JavaScript to build amazing components!', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -86,6 +118,7 @@ ctx.element.innerHTML = \`
|
||||
|
||||
LowcodeBlockModel.registerFlow({
|
||||
key: 'default',
|
||||
title: 'Configuration',
|
||||
auto: true,
|
||||
steps: {
|
||||
setMainResource: {
|
||||
@ -98,6 +131,7 @@ LowcodeBlockModel.registerFlow({
|
||||
},
|
||||
},
|
||||
executionStep: {
|
||||
title: 'Code',
|
||||
uiSchema: {
|
||||
code: {
|
||||
type: 'string',
|
||||
@ -111,33 +145,64 @@ LowcodeBlockModel.registerFlow({
|
||||
},
|
||||
},
|
||||
defaultParams: {
|
||||
code: `
|
||||
code:
|
||||
`
|
||||
// Welcome to the lowcode block
|
||||
// Create powerful interactive components with JavaScript
|
||||
ctx.element.innerHTML = \`
|
||||
<div style="padding: 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; max-width: 600px;">
|
||||
<h2 style="color: #1890ff; margin: 0 0 20px 0; font-size: 24px; font-weight: 600;">
|
||||
🚀 Welcome to Lowcode Block
|
||||
🚀 \${ctx.i18n.t('Welcome to Lowcode Block', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}
|
||||
</h2>
|
||||
|
||||
<p style="color: #666; margin-bottom: 24px; font-size: 16px;">
|
||||
Build interactive components with JavaScript and external libraries
|
||||
\${ctx.i18n.t('Build interactive components with JavaScript and external libraries', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}
|
||||
</p>
|
||||
|
||||
<div style="background: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
|
||||
<h3 style="color: #333; margin: 0 0 16px 0; font-size: 18px;">✨ Key Features</h3>
|
||||
<h3 style="color: #333; margin: 0 0 16px 0; font-size: 18px;">✨ \${ctx.i18n.t('Key Features', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</h3>
|
||||
<ul style="margin: 0; padding-left: 20px; color: #555;">
|
||||
<li style="margin-bottom: 8px;">🎨 <strong>Custom JavaScript execution</strong> - Full programming capabilities</li>
|
||||
<li style="margin-bottom: 8px;">📚 <strong>External library support</strong> - Load any npm package or CDN library</li>
|
||||
<li style="margin-bottom: 8px;">🔗 <strong>NocoBase API integration</strong> - Access your data and collections</li>
|
||||
<li style="margin-bottom: 8px;">💡 <strong>Async/await support</strong> - Handle asynchronous operations</li>
|
||||
<li style="margin-bottom: 8px;">🎯 <strong>Direct DOM manipulation</strong> - Full control over rendering</li>
|
||||
<li style="margin-bottom: 8px;">🎨 <strong>\${ctx.i18n.t('Custom JavaScript execution', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> - \${ctx.i18n.t('Full programming capabilities', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</li>
|
||||
<li style="margin-bottom: 8px;">📚 <strong>\${ctx.i18n.t('External library support', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> - \${ctx.i18n.t('Load any npm package or CDN library', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</li>
|
||||
<li style="margin-bottom: 8px;">🔗 <strong>\${ctx.i18n.t('NocoBase API integration', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> - \${ctx.i18n.t('Access your data and collections', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</li>
|
||||
<li style="margin-bottom: 8px;">💡 <strong>\${ctx.i18n.t('Async/await support', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> - \${ctx.i18n.t('Handle asynchronous operations', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</li>
|
||||
<li style="margin-bottom: 8px;">🎯 <strong>\${ctx.i18n.t('Direct DOM manipulation', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> - \${ctx.i18n.t('Full control over rendering', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="background: #e6f7ff; border-left: 4px solid #1890ff; padding: 16px; border-radius: 4px;">
|
||||
<p style="margin: 0; color: #333; font-size: 14px;">
|
||||
💡 <strong>Ready to start?</strong> Replace this code with your custom JavaScript to build amazing components!
|
||||
💡 <strong>\${ctx.i18n.t('Ready to start?', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}</strong> \${ctx.i18n.t('Replace this code with your custom JavaScript to build amazing components!', { ns: '` +
|
||||
NAMESPACE +
|
||||
`' })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -145,7 +210,6 @@ ctx.element.innerHTML = \`
|
||||
`.trim(),
|
||||
},
|
||||
settingMode: 'drawer',
|
||||
title: 'Code',
|
||||
async handler(flowContext, params: any) {
|
||||
flowContext.model.setProps('loading', true);
|
||||
flowContext.model.setProps('error', null);
|
||||
@ -218,6 +282,7 @@ ctx.element.innerHTML = \`
|
||||
loadCSS,
|
||||
getModelById,
|
||||
request,
|
||||
i18n: flowContext.app.i18n,
|
||||
};
|
||||
// Execute the code
|
||||
await executionFunction(ctx);
|
||||
|
||||
@ -11,6 +11,8 @@
|
||||
import pkg from '../../package.json';
|
||||
import { useApp } from '@nocobase/client';
|
||||
|
||||
export const NAMESPACE = pkg.name;
|
||||
|
||||
export function useT() {
|
||||
const app = useApp();
|
||||
return (str: string) => app.i18n.t(str, { ns: [pkg.name, 'client'] });
|
||||
|
||||
@ -5,5 +5,22 @@
|
||||
"Execution step": "Execution step",
|
||||
"Enter the execution code to render the component": "Enter the execution code to render the component",
|
||||
"Failed to execute code": "Failed to execute code",
|
||||
"Component executed successfully": "Component executed successfully"
|
||||
"Component executed successfully": "Component executed successfully",
|
||||
"Configuration": "Configuration",
|
||||
"Code": "Code",
|
||||
"Welcome to Lowcode Block": "Welcome to Lowcode Block",
|
||||
"Build interactive components with JavaScript and external libraries": "Build interactive components with JavaScript and external libraries",
|
||||
"Key Features": "Key Features",
|
||||
"Custom JavaScript execution": "Custom JavaScript execution",
|
||||
"Full programming capabilities": "Full programming capabilities",
|
||||
"External library support": "External library support",
|
||||
"Load any npm package or CDN library": "Load any npm package or CDN library",
|
||||
"NocoBase API integration": "NocoBase API integration",
|
||||
"Access your data and collections": "Access your data and collections",
|
||||
"Async/await support": "Async/await support",
|
||||
"Handle asynchronous operations": "Handle asynchronous operations",
|
||||
"Direct DOM manipulation": "Direct DOM manipulation",
|
||||
"Full control over rendering": "Full control over rendering",
|
||||
"Ready to start?": "Ready to start?",
|
||||
"Replace this code with your custom JavaScript to build amazing components!": "Replace this code with your custom JavaScript to build amazing components!"
|
||||
}
|
||||
|
||||
@ -5,5 +5,22 @@
|
||||
"Execution step": "执行步骤",
|
||||
"Enter the execution code to render the component": "输入执行代码来渲染组件",
|
||||
"Failed to execute code": "执行代码失败",
|
||||
"Component executed successfully": "组件执行成功"
|
||||
"Component executed successfully": "组件执行成功",
|
||||
"Configuration": "配置",
|
||||
"Code": "代码",
|
||||
"Welcome to Lowcode Block": "欢迎使用低代码区块",
|
||||
"Build interactive components with JavaScript and external libraries": "使用 JavaScript 和外部库构建交互式组件",
|
||||
"Key Features": "核心功能",
|
||||
"Custom JavaScript execution": "自定义 JavaScript 执行",
|
||||
"Full programming capabilities": "完整的编程能力",
|
||||
"External library support": "外部库支持",
|
||||
"Load any npm package or CDN library": "加载任何 npm 包或 CDN 库",
|
||||
"NocoBase API integration": "NocoBase API 集成",
|
||||
"Access your data and collections": "访问您的数据和集合",
|
||||
"Async/await support": "异步/等待支持",
|
||||
"Handle asynchronous operations": "处理异步操作",
|
||||
"Direct DOM manipulation": "直接 DOM 操作",
|
||||
"Full control over rendering": "完全控制渲染",
|
||||
"Ready to start?": "准备开始了吗？",
|
||||
"Replace this code with your custom JavaScript to build amazing components!": "用您的自定义 JavaScript 替换此代码以构建出色的组件！"
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user