快消B2B SaaS系统开源：零依赖多语言技术栈+多端骨架+部署模板，附完整源码下载

本文开源了「分销代理多端触达系统」项目中的 7 个基础设施模块，涵盖 i18n 国际化引擎、零依赖 API 客户端、Node.js 后端认证骨架、UniApp 多端框架、HarmonyOS App 骨架、Docker 部署模板和前端 UI 框架。全部 零第三方依赖，拿来即用。文末附完整源码下载。

一、项目背景

我在做一个快消品 B2B 分销代理 SaaS 系统，技术栈比较杂：


Node.js（零依赖 ESM）    — 后端单体版

Go（Gin）               — 网关/触达/Agent/分析/存档 5个微服务

Java（Spring Boot 3）    — 佣金/代理/合规/培训/报表等 8个微服务

PHP 8.2                  — 门户/看板/文档/CMS 4个服务

HarmonyOS（ArkTS/ArkUI） — 鸿蒙原生App

UniApp（Vue 3）          — H5/小程序/App/企微侧边栏

总共 17 个微服务 + 4 个客户端，7 语种国际化。

项目核心商业逻辑（合规护栏、Agent 意图解析、推荐引擎、佣金计算）不开源，但 基础设施层的代码是通用的，整理出来分享给大家。

二、开源模块总览

| 模块 | 目录 | 技术栈 | 亮点 |

|------|------|--------|------|

| i18n 国际化引擎 | i18n/ | JavaScript | 零依赖，7语种，localStorage 持久化 |

| API 客户端封装 | api-client/ | JavaScript | 零依赖，自动降级，离线检测 |

| 前端 UI 框架 | ui-framework/ | HTML/JS/CSS | 模块化渲染，仪表盘组件 |

| Docker 部署模板 | deploy-templates/ | Docker | Go/Java/PHP 三语言 + Nginx + Compose |

| Node.js 后端骨架 | node-backend-skeleton/ | Node.js ESM | JWT/用户管理/文件存储/审计/健康检查 |

| UniApp 多端框架 | uniapp-skeleton/ | Vue 3 | 一套代码4端运行 |

| HarmonyOS App骨架 | harmony-skeleton/ | ArkTS/ArkUI | API客户端+页面模板+模块配置 |

许可证：Apache License 2.0（可商用、可修改、可闭源）

三、模块详解与代码

3.1 i18n 国际化引擎 — 7语种零依赖

支持简体中文、繁体中文（中国台湾/中国香港/中国澳门）、日语、英语（UK/US），核心就一个文件：


// i18n/i18n.js — 核心API



// 切换语言

setLocale('ja');  // → 日本語



// 翻译（点分键路径 + 参数插值）

t('dashboard.totalGMV');                    // → "総GMV"

t('touch.channels.sms');                    // → "SMS"

t('archive.searchResults', { count: 5 });   // → "5 件の一致記録"



// 获取可用语言列表

getAvailableLocales();

// [{ code: 'zh-CN', label: '简体中文', flag: '🇨🇳' }, ...]

设计要点：

  1. 零依赖 — 不用 i18next、不用 vue-i18n，纯原生 JS

  2. 语言回退 — 找不到翻译自动回退到简体中文

  3. localStorage 持久化 — 用户选过的语言下次自动恢复

  4. 参数插值 — {count} 占位符自动替换

  5. 点分键路径 — t('nav.dashboard') 解析嵌套对象


// 翻译函数核心实现

export function t(key, params) {

  const dict = _messages[_locale] || _messages['zh-CN'];

  let val = _resolvePath(dict, key);

  if (val === undefined) {

    val = _resolvePath(_messages['zh-CN'], key); // 回退

  }

  if (val === undefined) return key;

  if (params && typeof val === 'string') {

    for (const [k, v] of Object.entries(params)) {

      val = val.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v));

    }

  }

  return val;

}

7 个语种全部翻译完成，覆盖系统全部 16 个功能模块的 UI 文案。

3.2 API 客户端 — 自动降级处理

前端调用后端 API 时，后端可能没启动。这个封装能自动检测并降级为占位数据，不会白屏：


// api-client/api.js



const res = await apiFetch('/agents');

// res = { ok: true, status: 200, data: {...}, error: null, offline: false }



// 后端没起时：

// res = { ok: false, status: 0, data: null, error: 'network_unreachable', offline: true }



// UI 中判断占位

if (isPlaceholder(res)) {

  // 显示 "后端未连接 · 占位数据"

}

核心代码：


export async function apiFetch(path, { method = 'GET', body = null } = {}) {

  try {

    const res = await fetch(API_BASE + path, opts);

    let data = null;

    try { data = await res.json(); } catch { /* 无 body */ }

    return { ok: res.ok, status: res.status, data, error: null, offline: false };

  } catch (e) {

    // 网络层错误 → 降级占位

    return { ok: false, status: 0, data: null, error: e.message, offline: true };

  }

}

适用场景：前后端分离项目、MVP 开发阶段前后端并行开发、弱网环境。

3.3 Node.js 后端骨架 — JWT 认证 + 文件存储

这部分是从生产项目中提取的后端基础设施，包含 7 个模块：

| 文件 | 功能 |

|------|------|

| config.js | 环境配置（.env 解析 + 环境变量覆盖） |

| jwt.js | JWT HMAC-SHA256 零依赖实现 |

| auth-middleware.js | Bearer Token + API Key 双模式认证中间件 |

| user-store.js | 用户 CRUD（双角色 RBAC，SHA-256+salt） |

| file-store.js | 文件持久化（原子写入，多机共享） |

| system-handler.js | 健康检查（/api/health + /api/ready + /api/info） |

| audit-handler.js | 不可篡改审计日志 |

JWT 零依赖实现

不装 jsonwebtoken，用 Node.js 内置 crypto 模块手写：


// jwt.js — 签发 token

export function signToken(payload, ttl = 28800, type = 'access') {

  const header = { alg: 'HS256', typ: 'JWT' };

  const now = Math.floor(Date.now() / 1000);

  const body = {

    ...payload,

    iat: now,

    exp: now + ttl,

    iss: config.jwtIssuer,

    type,

    jti: crypto.randomBytes(8).toString('hex'), // 唯一 ID

  };

  const headerB64 = b64url(JSON.stringify(header));

  const payloadB64 = b64url(JSON.stringify(body));

  const signature = sign(`${headerB64}.${payloadB64}`);

  return `${headerB64}.${payloadB64}.${signature}`;

}



// 验证 token（时间安全比较防时序攻击）

export function verifyToken(token, expectedType = 'access') {

  // ... 签名验证用 crypto.timingSafeEqual

}

安全特性：

  • access token 8h + refresh token 7d

  • crypto.timingSafeEqual 防时序攻击

  • token 类型校验（access/refresh 不可混用）

  • 签发者校验 + 过期校验

文件原子写入（多机安全）

// file-store.js — 原子写入

export function saveJSON(filename, data) {

  const tmpPath = `${filePath}.tmp`;

  writeFileSync(tmpPath, serialized, 'utf-8');

  renameSync(tmpPath, filePath); // 原子操作！

}



// 支持 Map/Set 自动序列化

const serialized = JSON.stringify(data, (key, value) => {

  if (value instanceof Map) return Object.fromEntries(value);

  if (value instanceof Set) return [...value];

  return value;

}, 2);

为什么用 tmp + rename？

多机部署时，如果机器 A 正在写文件、机器 B 同时读取，直接 writeFileSync 可能读到半写文件。先写 .tmp 再 rename 是 POSIX 原子操作，B 要么读到旧文件、要么读到新文件，不会读到半成品。

环境配置

// config.js — .env 解析 + 环境变量覆盖

export const config = {

  port: getEnvInt('PORT', 3000),

  jwtSecret: getEnv('JWT_SECRET', randomBytes(32).toString('hex')),

  accessTokenTtl: getEnvInt('ACCESS_TOKEN_TTL', 8 * 3600),    // 8h

  refreshTokenTtl: getEnvInt('REFRESH_TOKEN_TTL', 7 * 24 * 3600), // 7d

  storageMode: getEnv('STORAGE_MODE', 'memory'),               // memory | file

  dataDir: getEnv('DATA_DIR', '.data'),                        // NFS 共享目录

  instanceId: getEnv('INSTANCE_ID', `${hostname()}-${process.pid}`),

  // ...

};

环境变量优先于 .env 文件，方便 Docker 部署时注入配置。

3.4 UniApp 多端框架骨架

一套代码跑 4 个端：H5 / 微信小程序 / App / 企微侧边栏。


uniapp-skeleton/

├── pages.json          # 页面路由配置

├── manifest.json       # 应用清单（H5/小程序/App配置）

├── App.vue             # 根组件

├── main.js             # 入口文件

├── common/             # API封装/工具函数

├── static/             # 静态资源

└── pages/

    ├── login/          # 登录页完整实现

    └── index/          # 首页示例

登录页包含完整的表单验证、API 调用、token 存储、路由跳转逻辑，可直接复用。

3.5 HarmonyOS App 骨架

鸿蒙原生 App 的起步骨架，ArkTS/ArkUI 风格：


// harmony-skeleton/ApiClient.ets



export class ApiClient {

  private static BASE_URL = 'http://10.0.2.2:8080/api'; // 模拟器地址



  static async request(path: string, options?: RequestConfig): Promise<ApiResponse> {

    const token = await this.getToken();

    const res = await fetch(this.BASE_URL + path, {

      method: options?.method || 'GET',

      headers: {

        'Content-Type': 'application/json',

        'Authorization': token ? `Bearer ${token}` : ''

      },

      body: options?.body ? JSON.stringify(options.body) : undefined

    });

    return await res.json();

  }

}

包含：

  • ApiClient.ets — HTTP 客户端（token 管理 + 多环境 BASE_URL）

  • LoginPage-template.ets — 登录页模板

  • module.json5 — 模块配置

  • EntryAbility.ets — 入口 Ability 生命周期管理

3.6 Docker 部署模板

一套 docker-compose 编排 17 个微服务 + 3 个基础设施：


# deploy-templates/docker-compose.yml（精简版）



services:

  # 基础设施

  mysql:      { image: mysql:8.0, ports: ["3306:3306"] }

  redis:      { image: redis:7-alpine, ports: ["6379:6379"] }

  minio:      { image: minio/minio:latest, ports: ["9000:9000", "9001:9001"] }



  # Go 服务层

  go-gateway:   { build: ../go, ports: ["8080:8080"] }

  go-touch:     { build: ../go, ports: ["8081:8081"] }

  go-agent:     { build: ../go, ports: ["8082:8082"] }

  go-analytics: { build: ../go, ports: ["8083:8083"] }

  go-archive:   { build: ../go, ports: ["8084:8084"] }



  # Java 服务层

  java-commission:  { build: ../java/commission, ports: ["9090:9090"] }

  java-agent:       { build: ../java/agent, ports: ["9091:9091"] }

  # ... 共8个Java服务



  # PHP 服务层

  php-portal:    { build: ../php/portal, ports: ["7080:7080"] }

  php-dashboard: { build: ../php/dashboard, ports: ["7081:7081"] }

  # ... 共4个PHP服务



  # Nginx 反向代理

  nginx: { image: nginx:alpine, ports: ["80:80", "443:443"] }

还包含三语言的 Dockerfile 模板：

| 文件 | 说明 |

|------|------|

| Dockerfile.go-gateway | Go 多阶段构建（builder → alpine 运行镜像） |

| Dockerfile.java-service | Java Maven 构建 + JRE 运行 |

| Dockerfile.php-service | PHP-FPM + Nginx 双进程 |

| nginx/nginx.conf | 反向代理 + HTTPS + WebSocket + 负载均衡 |

3.7 前端 UI 框架

不用 React/Vue，纯原生 HTML/JS/CSS 实现的模块化渲染框架：


// ui-framework/dashboard-example.js



// 模块化渲染 — 每个功能模块独立 render 函数

export function renderDashboard(container) {

  container.innerHTML = `

    <div class="dashboard">

      <div class="metric-cards">

        ${renderMetricCard('总GMV', '¥1,234,567', '#3b82f6')}

        ${renderMetricCard('代理商', '128', '#10b981')}

        ${renderMetricCard('待办', '12', '#f59e0b')}

      </div>

      <div class="charts">...</div>

    </div>

  `;

}

适合快速搭建管理后台原型、内部工具、MVP 界面。

四、技术选型理由

为什么零依赖？

| 传统方案 | 零依赖方案 | 区别 |

|---------|-----------|------|

| npm install i18next | 直接引入 i18n.js | 不用装包，不用配 webpack |

| npm install jsonwebtoken | import crypto from 'node:crypto' | Node.js 内置模块搞定 |

| npm install express | import http from 'node:http' | 原生 http.Server |

好处：

  1. 部署简单 — 不用 npm install，拷贝代码就能跑

  2. 安全 — 没有供应链风险，不会因为某个依赖被投毒导致整个项目被攻击

  3. 学习成本低 — 看源码就知道怎么实现的，没有魔法

  4. 体积小 — 整个开源包 50KB，不包含 node_modules

为什么用多语言微服务？

| 语言 | 擅长的场景 | 在项目中的角色 |

|------|-----------|---------------|

| Go | 高并发、低延迟 | 网关、WebSocket、实时触达、Agent 对话 |

| Java | 复杂业务逻辑、事务 | 佣金计算、合规校验、培训管理、报表 |

| PHP | 快速页面渲染 | 门户、看板、文档站、CMS |

| Node.js | 快速原型、前后端同构 | MVP 版本、全功能验证 |

| HarmonyOS | 鸿蒙原生体验 | 鸿蒙 App |

不是每个项目都需要多语言微服务。如果你在做 MVP，先用 Node.js 单体跑通，验证业务逻辑后再拆分。

五、快速上手

5.1 使用 i18n 引擎


<script type="module">

  import { t, setLocale, getAvailableLocales } from './i18n/i18n.js';



  // 初始化

  setLocale('zh-CN');



  // 使用

  document.title = t('app.title');

  document.querySelector('#dashboard').textContent = t('dashboard.title');



  // 切换语言

  document.querySelector('#lang-switch').onclick = () => {

    setLocale('en');

    location.reload(); // 重新渲染

  };

</script>

5.2 使用 API 客户端


import { apiFetch, isPlaceholder } from './api-client/api.js';



async function loadAgents() {

  const res = await apiFetch('/agents');

  if (isPlaceholder(res)) {

    return mockAgents; // 降级占位数据

  }

  return res.data;

}

5.3 使用后端骨架


// server.js

import http from 'node:http';

import { config } from './config.js';

import { signAccessToken, verifyToken } from './jwt.js';

import { saveJSON, loadJSON } from './file-store.js';



const server = http.createServer((req, res) => {

  // 路由 + 认证 + 业务逻辑

});



server.listen(config.port, config.host, () => {

  console.log(`Server running at http://${config.host}:${config.port}`);

});

5.4 启动 Docker 部署


# 进入部署模板目录

cd deploy-templates/



# 一键启动全部服务

docker-compose up -d



# 查看状态

docker-compose ps



# 只启动基础设施

docker-compose up -d mysql redis minio

六、目录结构


distributor-touch-opensource/

├── README.md                    # 项目说明

├── LICENSE                      # Apache 2.0 许可证

├── i18n/

│   └── i18n.js                  # 零依赖国际化引擎（7语种，846行）

├── api-client/

│   └── api.js                   # 零依赖HTTP API封装

├── ui-framework/

│   ├── index.html               # 前端布局框架模板

│   └── dashboard-example.js     # 仪表盘UI组件示例

├── deploy-templates/

│   ├── docker-compose.yml       # 微服务编排模板

│   ├── Dockerfile.go-gateway    # Go服务Dockerfile

│   ├── Dockerfile.java-service  # Java服务Dockerfile

│   ├── Dockerfile.php-service   # PHP服务Dockerfile

│   └── nginx/

│       └── nginx.conf           # Nginx反向代理配置

├── node-backend-skeleton/

│   ├── config.js                # 环境配置管理

│   ├── jwt.js                   # JWT HMAC-SHA256实现

│   ├── auth-middleware.js       # 认证中间件

│   ├── user-store.js            # 用户CRUD存储

│   ├── file-store.js            # 文件原子写入存储

│   ├── system-handler.js        # 健康检查/系统信息

│   └── audit-handler.js         # 审计日志

├── uniapp-skeleton/

│   ├── pages.json               # 页面路由配置

│   ├── manifest.json            # 应用清单

│   ├── App.vue                  # 根组件

│   ├── main.js                  # 入口文件

│   ├── common/                  # API封装/工具函数

│   ├── static/                  # 静态资源

│   └── pages/

│       ├── login/               # 登录页示例

│       └── index/               # 首页示例

└── harmony-skeleton/

    ├── ApiClient.ets            # HTTP客户端封装

    ├── LoginPage-template.ets   # 登录页模板

    ├── module.json5             # 模块配置

    └── EntryAbility.ets         # 入口Ability

七、什么没开源？

以下核心商业逻辑 未包含 在开源包中：

| 模块 | 原因 |

|------|------|

| 合规护栏（G01-G15） | 已申请软件著作权 + 发明专利，核心知识产权 |

| Agent 意图解析器 | 30+ 意图 + 参数提取 + 多步编排，核心交互层 |

| 推荐引擎权重 | 标签匹配/热度/新鲜度三策略混合评分参数 |

| 佣金计算引擎 | 分润层级 + 计酬基数 + 结算规则 |

开源的是 基础设施层，不开源的是 业务逻辑层。基础设施层可以帮你快速搭起项目骨架，业务逻辑需要你自己实现。

八、许可证

Apache License 2.0

你可以：

  • ✅ 商业使用

  • ✅ 修改代码

  • ✅ 分发代码

  • ✅ 闭源使用

  • ✅ 更换许可证

你需要：

  • 📋 保留版权声明和许可证文本

  • 📋 注明对代码的修改

九、下载方式

完整源码已打包为 ZIP 文件（约 50KB，29 个文件），可通过 CSDN 下载获取。

下载后解压即可使用，无需 npm install，无需任何依赖安装。

十、总结

| 模块 | 代码量 | 核心价值 |

|------|--------|---------|

| i18n 引擎 | 846 行 | 零依赖7语种国际化，直接引入即用 |

| API 客户端 | 49 行 | 自动降级 + 离线检测，前后端分离必备 |

| Node.js 后端骨架 | 7 个文件 | JWT认证/文件存储/审计日志/健康检查 |

| UniApp 骨架 | 完整项目 | 4端一套代码，登录页+首页示例 |

| HarmonyOS 骨架 | 4 个文件 | 鸿蒙App起步模板 |

| Docker 模板 | 6 个文件 | 三语言Dockerfile + Compose编排 + Nginx |

| UI 框架 | 2 个文件 | 模块化渲染 + 仪表盘组件 |

设计理念：零依赖、拿来即用、看源码就能改。

如果你觉得有用，点个赞 + 收藏，有问题评论区交流。

作者：姚腾

许可证：Apache 2.0

项目：分销代理多端触达系统（distributor-touch）

Tags：零依赖 Node.js Go Java PHP HarmonyOS UniApp 微服务 Docker JWT i18n 开源 B2B SaaS 前端框架 鸿蒙开发

# golang # 开发语言 # 后端 # 开源
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

Ling‑3.0‑flash 昇腾 0‑Day 适配落地@ACP#GSV2221 在国产 Agent 算力矩阵中的可视化机会与落地场景

avatar 人工智能6S服务平台
cover

蚂蚁百灵 Ling‑3.0‑flash 开源 + 昇腾 0‑Day 原生适配@ACP#GSV6155 在国产算力矩阵中的机会与落地场景

avatar 人工智能6S服务平台
cover

Grok 文字怎么转为 word？结合 AI 导出鸭解析各类转换方案，理清技术用法与优劣

avatar 人工智能6S服务平台