面向真实业务软件的 Total.js

开发更快,更好地掌控整个栈。

没有不必要层次的业务软件。

Total.js 将快速的 Node.js 框架、可直接用于生产的 UI 组件以及经过验证的应用整合在一起,让团队能够以更少的胶水代码和更强的掌控力构建仪表板、门户、SaaS 产品和内部工具。

0依赖项
300+界面组件
MIT许可证
totaljs.es / 软件栈
后端核心

在同一处集中管理路由、动作、REST、WebSocket、模式、文件、视图、邮件和运行时控制。

jComponents

输入控件、数据网格、表单、图表、仪表板、模态框以及可直接用于生产的界面。

# Node.js 服务器端框架
$ npm install total5

# Total.js CLI
$ npm install total5 -g
$ total5
# 翻译、压缩、打包、提取、编辑
# proxyclient 和即时本地 Web 服务器
Node.js
NoSQL
WebSocket
API/REST
Actions
查看实际效果
从扎实的基础开始

一个你可以理解、扩展并真正掌控的技术栈

Total.js 将关键部分紧密结合:后端、UI、数据、实时通信和业务逻辑,而不会把你的产品拆散到不必要的层次中。

框架

一个无外部依赖的 Node.js 基础,用于构建 API、Sockets、管理面板、门户、内部应用和长期运行的产品。

  • 直接路由与简洁的动作
  • 模式、校验和数据访问
  • REST、WebSocket、邮件、文件和视图

jComponents

专为业务应用设计的 UI 层:真实组件、简单绑定,以及无需笨重前端栈即可直接投入使用的界面。

  • 表单、数据网格、图表和仪表盘
  • 自动绑定与轻量视图
  • 超过 300 个生产级组件
框架 + jComponents

一个后端。一种 UI 哲学。

路由、动作、模式、视图、绑定和组件自然契合。更少胶水代码、更少决策,从想法到生产的路径更清晰。

纯框架

total5 / node.js

一个清晰的结构,用于业务逻辑、API、Sockets、任务和真实流程,而不会被框架噪音淹没。

framework.js
// 路由、模式、数据库、邮件、TMS、文件、作业和套接字
require('total5');

exports.install = function() {
	ROUTE('GET /', 'view');
	ROUTE('+API ? orders-query      --> Orders|query');
	ROUTE('+POST /api/orders/      --> Orders|create');
	ROUTE('SOCKET /live/ @json <2MB', live);
	ROUTE('FILE /invoice/{id}/', invoice);
	ON('service', counter => counter % 5 === 0 && ACTION('Orders|sync').callback(NOOP));
};

NEWACTION('Orders|query', {
	query: 'page:Number, q:String',
	action: function($) {
		DATA.find('orders')
			.search('email', $.query.q)
			.paginate($.query.page || 1, 20)
			.sort('dtcreated_desc')
			.callback($);
	}
});

NEWACTION('Orders|create', {
	input: '*email:Email,*total:Number,items:[Object]',
	output: 'id:String,email:Email,total:Number,dtcreated:Date',
	publish: true,
	action: function($, model) {
		model.dtcreated = new Date();
		DATA.insert('orders', model).callback(function(err, doc) {
			if (err)
				return $.invalid(err);

			MAIL(model.email, '订单已接收', 'mail/order', doc, NOOP);
			$.success(doc);
		});
	}
});

NEWACTION('Orders|sync', {
	action: function($) {
		// 后台作业使用同一条动作流水线
		$.success();
	}
});

function live($) {
	$.autodestroy();
	SUBSCRIBE('Orders|create', order => $.send(order));
	$.on('message', (client, message) => ACTION('Orders|create', message, client).callback(response => client.send(response)));
}

function invoice($) {
	FILESTORAGE('orders').read($.params.id, $.callback);
}

Total.run();
直观路由
可复用动作
集成 WebSocket
NoSQL 与数据模式
MVC 与无服务器架构
可扩展且简洁

基于 jComponents 的界面

spa.min@20

使用专为真实业务界面设计的组件构建表单、仪表板、表格和完整工作流。

ui.html
<!-- 带作用域状态和组件的客户端 UI 库 -->
<script src="https://cdn.componentator.com/spa.min@20.js"></script>
<link rel="stylesheet" href="https://cdn.componentator.com/spa.min@20.css" />

<!-- 开箱即用的多语言 UI: @(Orders), @(Save order), @(Customer) -->

<ui-plugin path="orders">
	<ui-component name="input" path="?.filter.q" config="placeholder:搜索订单;autofill:1"></ui-component>

	<ui-component name="validate" path="?.form">
		<button class="exec" data-exec="?/save">保存订单</button>
	</ui-component>

	<ui-component name="datagrid" path="?.orders" config="margin:0;click:?/detail">
		<script type="text/plain">
		[
			{ name: 'email', text: '客户', width: 220 },
			{ name: 'total', text: 'Total', align: 2, template: "{{ total | format(2) }}" },
			{ name: 'dtcreated', text: '创建时间', template: "{{ dtcreated | format('dd.MM.yyyy') }}" }
		]
		</script>
	</ui-component>

	<ui-component name="linechart" path="?.sales" config="height:180;type:curves"></ui-component>

	<ui-bind path="?.online" config="text:value + ' 在线'"></ui-bind>
	<ui-bind path="?.order" config="template">
		<script type="text/html">{{ value.email }} · {{ value.total | format(2) }}</script>
	</ui-bind>
</ui-plugin>

<script>
PLUGIN('orders', function(exports) {
	exports.reload = function() {
		exports.tapi('Orders|query', exports.model.filter, function(response) {
			exports.set('?.orders', response);
		});
	};

	exports.save = function() {
		SETTER('loading/show');
		exports.tapi('Orders|create ERROR @showloading', exports.model.form, function(response) {
			SETTER('loading/hide');
			PUSH('?.orders', response);
			exports.set('?.form', {});
			SETTER('message/success', '订单已保存');
		});
	};

	exports.websocket = function(message) {
		PUSH('?.orders', message);
		EMIT('orders/live', message);
	};
});
</script>
300+ 组件
数据网格与表单
自动绑定
仪表盘与图表
面向业务的界面
更快的页面
基于 Total.js 构建的应用

真实产品,一个基础

Flow、OpenPlatform、CMS 和其他 Total.js 应用并非演示程序,而是可投入使用的产品,你可以用同一基础为自己的平台搭建解决方案。

Flow

与 API、服务和 AI 打通的自动化、集成和业务流程。

OpenPlatform

一个私有门户基础,包含身份、应用、用户和受控访问。

CMS

一个既可独立运行,又能融入更大业务解决方案的内容管理系统。

Code

面向 Total.js 开发的协作式 Web 代码编辑器,直接运行在您自己的服务器上,实现更快的修改和完全掌控。

UI Builder

用于仪表盘、门户、表单和业务界面的可视化界面构建。

Todomator

适用于需要清晰优先级、执行力和日常运营聚焦的团队任务管理。

企业版

Tables

用于设计表、关联数据并通过自定义视图管理记录的零代码 PostgreSQL 工作空间。

更多应用

秉持相同理念打造的工具:务实、直接,随时可用于真实工作。

为真实产品而生的性能

更快上线。
自信扩展。

更快速的基础意味着更短的交付周期、更低的维护成本,以及无需推倒重来就能持续扩展的业务软件。

框架速度对比
Total.js
100%
Fastify
90%
Koa
77%
Express
70%
NestJS
67%
Sails
60%
Meteor
55%
Hapi
50%
已连接的原生应用

TotalDesktop Suite

专为真实 Total.js 工作流程设计的 macOS 和 iPadOS 原生工具:资源、代码、监控、项目以及日常工作。

TotalResources app icon

TotalResources

通过原生应用管理多语言内容:翻译、拼写辅助、审校以及对每条产品文案的 AI 支持。

多语言
Total.js API
Athena AI
MCP / MVP
TotalCode app icon

TotalCode

Total.js Code 的原生工作区,在一款应用中即可管理本地控制和多个实例。

原生 IDE
多实例
MCP / MVP
TotalMonitor app icon

TotalMonitor

实时监控项目健康状况、指标、告警和规则,让问题在变得紧急之前就能被看见。

实时
告警
MCP / MVP
More applications icon

更多应用

更多原生工具将扩展同一生态,用于开发、管理、监控和产品演进。

进行中
新应用
生态系统
可用性

macOS 和 iPadOS 独家提供,即将推出

首个版本将专注于 Apple 生态系统。Windows 和 Linux 会在之后推出,目前尚未计划具体日期。

macOS
iPadOS
App Store
Mac App Store
专业开发

在 Total.js,我们打造经得起时间考验的软件。

基于一致基础而非偶然复杂性构建的定制应用、仪表板、门户、SaaS 产品和私有平台。

内部应用
私有门户
控制面板
SaaS 产品
重构与改进
技术支持

定制开发

使用 Total.js 构建的应用、仪表盘、门户、内部工具和数字产品。

架构与咨询

技术决策、基础审查,以及在产品扩张前制定的务实计划。

实施与演进

从第一个版本到持续改进,一直保持同一技术方向。

维护与改进

对现有平台进行优化、重构、新功能开发和渐进式演进。

Spanish Total.js Platform

我们将业务需求转化为真正可运行的软件

我们以清晰的技术基础和务实的落地路径,设计并交付真正可用的应用。

业务应用和仪表板
私有平台和门户
架构、实施与演进

世界各地的团队已经在使用 Total.js 构建产品。

查看所有参考案例
Siemens
Orange
Datalan
Metrostav
Slovalco
Volkswagen
告诉我们您的项目

请把您的情况告诉我们。我们会认真评估,并尽快给出清晰回复。