# @bigbinary/neeto-themes-frontend 中文文档 规范地址：https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/ 版本：4\.2\.3 npm 元数据更新时间：2026-11-02T08:19:27.590Z 中文译文更新时间：2026-11-08T02:08:30.193Z 软件包许可：UNLICENSED 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bigbinary/neeto-themes-frontend 原文对照：https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/?lang=original 项目主页：https://github.com/bigbinary/neeto-themes-nano ## 关键信息（来自 npm 元数据） - 包体积（解压后）：3.5 MB，95 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=22\.13 - 运行依赖：2 个 - peer 依赖：qs 6\.16\.2，url 0\.11\.4，yup 0\.32\.11，antd 5\.22\.1，util ^0\.12\.5，axios 1\.20\.0，ramda 0\.29\.0，react 18\.3\.1，buffer ^6\.0\.3，formik 2\.4\.6，i18next 22\.5\.1，zustand 4\.4\.2，dompurify 3\.4\.17，js-logger 1\.6\.1，react-dom 18\.3\.1，classnames 2\.5\.1，stream-http 3\.2\.0，tailwindcss 4\.1\.17，lucide-react ^0\.577\.0，react-helmet ^6\.1\.0，os-browserify 0\.3\.0，react-i18next 12\.3\.1，vm-browserify 1\.1\.2，@babel/runtime 7\.29\.7，react-toastify 8\.0\.2，tty-browserify 0\.0\.1，path-browserify ^1\.0\.1，https-browserify 1\.0\.0，mixpanel-browser 2\.45\.0，react-router-dom 5\.3\.3，crypto-browserify 3\.12\.1，source-map-loader 4\.0\.1，stream-browserify ^3\.0\.0，@bigbinary/neetoui 8\.8\.3，@honeybadger-io/js 6\.10\.1，@monaco-editor/react 4\.6\.0，@bigbinary/neeto-cist 1\.0\.17，@honeybadger-io/react 6\.1\.25，@tanstack/react-query 5\.59\.20，@bigbinary/neeto-atoms 1\.1\.2，@bigbinary/neeto-icons 1\.20\.89，@bigbinary/neeto-molecules 5\.9\.13，@tailwindcss/container-queries 0\.1\.1，@tanstack/react-query-devtools 5\.59\.20，@bigbinary/neeto-commons-frontend 4\.14\.8，@bigbinary/neeto-filters-frontend 4\.6\.3，@bigbinary/neeto-image-uploader-frontend 4\.1\.14 - 首次发布：2024-05-07T06:42:03.795Z - 最新版本发布：2026-11-02T08:19:27.051Z - 近 30 天下载量：11858（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：158（近 12 个月 71 个） ## 中文简介 一个回波作为新纳米结构,配置,数据等的真理来源. ## 安装 ```sh npm install @bigbinary/neeto-themes-frontend ``` 也可以使用：`pnpm add @bigbinary/neeto-themes-frontend`、`yarn add @bigbinary/neeto-themes-frontend`、`bun add @bigbinary/neeto-themes-frontend` ## README # 需要主题 - 不 这个 `neeto-themes-nano` 允许我们在 neto 中构建和使用主题 应用。 这个纳米出口 `@bigbinary/neeto-themes-frontend` 国家防范机制一揽子计划 财务报告和审定财务报表 `neeto-themes-engine` 铁路发动机. ## 目录 1. [用主机应用程序开发](https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/#readme-development-with-host-application) - [发动机](https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/#readme-engine) - [安装](https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/#readme-installation) - [使用量](https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/#readme-usage) - [前端软件包](https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/#readme-frontend-package) - [安装](https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/#readme-installation-1) - [发展指示](https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/#readme-instructions-for-development) - [使用量](https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/#readme-usage-1) 2. [出版指令](https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/#readme-instructions-for-publishing) ## 用主机应用程序开发 ### 发动机 #### 安装 1. 将此行添加到您的应用程序的 Gemfile 中 : ```ruby source "NEETO_GEM_SERVER_URL" do # ..existing gems gem 'neeto-themes-engine' end ``` 2. 然后执行: ```shell bundle install ``` 3. 将此行添加到您的应用程序 `config/routes.rb` 文件 ```ruby mount NeetoThemesEngine::Engine, at: "/neeto_themes" ``` 4. 在表格中添加所需的迁移 `db/migrate` 文件夹。 运行以下 命令复制从引擎到主机应用程序的迁移. ```shell bundle exec rails neeto_themes_engine:install:migrations bundle exec rails db:migrate ``` 5. 添加以下一行为 `models/organization.rb` 文档. ```ruby has_many :themes, class_name: "NeetoThemesEngine::Theme", as: :owner ``` 6. 配置在关联下添加的模型以附加主题 . ```ruby has_one :theme_entity, as: :themeable, class_name: "NeetoThemesEngine::ThemeEntity", dependent: :destroy has_one :theme, through: :theme_entity, class_name: "NeetoThemesEngine::Theme" ``` ### 使用量 1. **创建引擎初始化器** 创建名为的文件 `neeto_themes_engine.rb` 输入 `config/initializers` 文件夹. 2. **自定义主题方案** 引擎支持根据主机需求定制主题计划 应用。 此方案将在前端使用以渲染主题 属性。 缩写: ```ruby NeetoThemesEngine.theme_properties_schema = [ { kind: "color", key: "primary_color", default_value: "#2D36D4" }, { kind: "color", key: "secondary_color", default_value: "#ECF4FF" }, ] ``` 阵列中的每个对象应该有以下密钥: - `key`:主题属性的独特标识符. - `kind`:主题属性的类型. 可包含的可选密钥 : - `default_value`: 在创建新主题时设置默认值. - `hidden`:这个布尔道具有助于隐藏UI的财产,但是 允许将其作为 CSS 变量使用. - `depends_on`:提供对其他属性的依赖。 如果一个键是 ,它将检查它的值,并且只有在UI中出现,如果 附属财产存在. - `parent_class`: 此密钥需要为自定义 SS 特性添加才能工作 适当的。 更多见 [自定义 css](https://npmcn.com/package/%40bigbinary/neeto-themes-frontend/#readme-custom-css) 特性. - `use_default_image_size`: 曾应用默认图像Size 道具传递给 图像加载器组件 . - `default_image_size`: 曾经通过默认图像Size 道具 图像加载器组件 。 应该是一个对象 `width` 财务报告和审定财务报表 `height` 属性. - `fixed_aspect_ratio`:过去通过固定的SpectRatio道具 图像加载器组件 。 应该是一个对象 `width` 财务报告和审定财务报表 `height` 属性. - `max_image_size_in_mb`: MB 中上传图像的最大尺寸 `image` 同类财产。 接受小数,例如: `0.1`默认为 `1`。 。 。 . 3. **提供 Css 变量前缀** 此值将用于前置所有 CSS 变量 。 缩写: ```ruby NeetoThemesEngine.css_variable_prefix = "neeto-cal" ``` 为主题属性生成变量 `primary_color` 将会是 `--neeto-cal-primary-color`。 。 。 . 4. **提供主题属性所附带的实体** 此值将被用于确定主题属性所在的实体 随函附上。 我们可以提供多个实体。 缩写: ```ruby NeetoThemesEngine.valid_themeable_types = ["Meeting", "Booking"] ``` 5. **提供默认主题名称** (备选) 此提供值将用来识别默认主题 。 如果没有 ,默认主题将命名为"Plain Blue". ```ruby NeetoThemesEngine.default_theme_name = "My theme" ``` ### 前端软件包 #### 安装 1. 添加数据 `neeto-themes-frontend` 软件包到 `package.json` ```shell yarn add @bigbinary/neeto-themes-frontend ``` ### 发展指示 检查 [前端软件包开发指南](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) 用于开发前端软件包的分步指令. ### 使用量 #### 构成部分 1. 导入 `NeetoThemesBuilder` 构成部分从 `@bigbinary/neeto-themes-frontend`数字 : ```javascript import React from "react"; import { NeetoThemesBuilder } from "@bigbinary/neeto-themes-frontend"; const App = () => ( ); export default App; ``` **道具 :** - `entityId` (需要):主题所依附的实体的ID. - `entityType` (需要):实体的类型(如"会","会"等). - `thumbnail` (需要):一个作为主题缩略图显示的回放组件. - `children` (需要):要渲染的预览组件. - `onPropertiesChange` (可选的):主题属性改变时触发回调函数. - `defaultImageSize` (可选) : 图像上传的默认图像大小 。 应该是一个对象 `width` 财务报告和审定财务报表 `height` 属性. - `fixedAspectRatio` (可选):图像上传的固定相相相比. 应该是一个对象 `width` 财务报告和审定财务报表 `height` 属性. - `helpDocUrl` (可选):帮助文档的URL. - `isTemplateThemesEnabled` (可选的):布尔以启用模板主题特性 。 默认 : `false`。 。 。 . - `pageTitle` (可选):主题构建器自定义页面标题. - `onApplyThemeSuccess` (可选):一个主题成功应用时触发的回调函数. - `onUpdateThemeSuccess` (可选的):一个主题成功更新时触发的回调函数. - `onApplyGlobalThemeSuccess` (可选):当一个全局主题被成功应用时触发回调函数. - `helpPopoverProps` (可选的):向帮助弹出组件传递的道具. - `enabledFeatures` (可选) : 用于控制启用哪些特性的对象 。 默认 : `{ customCSS: true }`设置 `{ customCSS: false }` 以禁用自定义 CSS 特性. - `proFeatures` (可选):指定哪些特性应被标记为"pro"特性的对象. 示例 `{ customCSS: true }` 将自定义 CSS 标记为亲特性 . #### 钩子 1. 导入 `useThemeUtils` 钩从“ @ bigbinary/ neto-主题- 前端” ```javascript import { useThemeUtils } from "@bigbinary/neeto-themes-frontend"; const { setTheme, previewingTheme, currentTheme } = useThemeUtils(); ``` - `setTheme`:此方法用于设定实体的主题. - `previewingTheme`: 此对象包含当前预览主题 . - `currentTheme`: 此对象包含当前应用到 实体. ### 自定义 CSS `neeto-themes-nano` 将会在您的应用程序中输入自定义 css 作为 a 的一部分 主题。 你可以提供 `enabledFeatures={{ customCSS: false }}` 内 `NeetoThemesBuilder` 手动 **隐藏** customCSS 特性. 你可以把它配对 `proFeatures={{ customCSS: true }}` 来展示它 _已禁用_ 在非辅助性案件中. 此特性 要求将初始化器与附加属性一同设置 `{ kind: "custom_css", key: "custom_css", default_value: "", parent_class: "neeto-form-eui" }`。 。 。 . 这个 `parent_class` 键将用作导入样式和 CSS 的父键 筑巢而来. 这将确保样式不会被注入到您不插入的页面 想要它,并确保样式规则针对此类以外的元素 将不适用。 请确保所提供的价值`parent_class`实值 以 CSS 类包装方式显示。 例如:`neeto-form-eui` 在 netoForm 中,所有需要应用主题的外部页面都存在. 它还提供了一个代码编辑器,其中带有语法加亮,这取决于 [摩纳哥编辑](https://github.com/suren-atoyan/monaco-react) 作为对等点 依赖性。 请在主机应用程序中安装, 以便正常工作 . ## 出版指令 传统发展 咨询 [构建和释放软件包](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) 关于如何出版的详细指南. ## 常见问题 ### @bigbinary/neeto-themes-frontend 是什么？ 一个回波作为新纳米结构,配置,数据等的真理来源\. ### 如何安装 @bigbinary/neeto-themes-frontend？ 在项目目录运行 npm install @bigbinary/neeto-themes-frontend，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：qs（6\.16\.2）、url（0\.11\.4）、yup（0\.32\.11）、antd（5\.22\.1）、util（^0\.12\.5）、axios（1\.20\.0）、ramda（0\.29\.0）、react（18\.3\.1）、buffer（^6\.0\.3）、formik（2\.4\.6）、i18next（22\.5\.1）、zustand（4\.4\.2）、dompurify（3\.4\.17）、js-logger（1\.6\.1）、react-dom（18\.3\.1）、classnames（2\.5\.1）、stream-http（3\.2\.0）、tailwindcss（4\.1\.17）、lucide-react（^0\.577\.0）、react-helmet（^6\.1\.0）、os-browserify（0\.3\.0）、react-i18next（12\.3\.1）、vm-browserify（1\.1\.2）、@babel/runtime（7\.29\.7）、react-toastify（8\.0\.2）、tty-browserify（0\.0\.1）、path-browserify（^1\.0\.1）、https-browserify（1\.0\.0）、mixpanel-browser（2\.45\.0）、react-router-dom（5\.3\.3）、crypto-browserify（3\.12\.1）、source-map-loader（4\.0\.1）、stream-browserify（^3\.0\.0）、@bigbinary/neetoui（8\.8\.3）、@honeybadger-io/js（6\.10\.1）、@monaco-editor/react（4\.6\.0）、@bigbinary/neeto-cist（1\.0\.17）、@honeybadger-io/react（6\.1\.25）、@tanstack/react-query（5\.59\.20）、@bigbinary/neeto-atoms（1\.1\.2）、@bigbinary/neeto-icons（1\.20\.89）、@bigbinary/neeto-molecules（5\.9\.13）、@tailwindcss/container-queries（0\.1\.1）、@tanstack/react-query-devtools（5\.59\.20）、@bigbinary/neeto-commons-frontend（4\.14\.8）、@bigbinary/neeto-filters-frontend（4\.6\.3）、@bigbinary/neeto-image-uploader-frontend（4\.1\.14）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bigbinary/neeto-themes-frontend 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @bigbinary/neeto-themes-frontend 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @bigbinary/neeto-themes-frontend 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=22\.13。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @bigbinary/neeto-themes-frontend 可以商用吗？ @bigbinary/neeto-themes-frontend 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。 ### @bigbinary/neeto-themes-frontend 的下载量有多少？ 根据 npm 官方下载统计，@bigbinary/neeto-themes-frontend 在 2026/10/08 – 2026/11/06 这 30 天内被下载 11,858 次，日均约 395 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bigbinary/neeto-themes-frontend 还在维护吗？ 最新版本 4\.2\.3 发布于 2026/11/02（6 天前）；至今共发布 158 个版本，其中过去 12 个月发布了 71 个；首次发布于 2024/05/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。