# @asante-org/atlascopco-vt-litesitegenerator 中文文档 规范地址：https://npmcn.com/package/%40asante-org/atlascopco-vt-litesitegenerator/ 版本：3\.9\.0 npm 元数据更新时间：2026-10-30T11:45:50.550Z 中文译文更新时间：2026-11-06T22:08:18.412Z 软件包许可：UNLICENSED 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40asante-org/atlascopco-vt-litesitegenerator 原文对照：https://npmcn.com/package/%40asante-org/atlascopco-vt-litesitegenerator/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：6 MB，178 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：4 个 - peer 依赖：react \>=18\.2\.0，react-dom \>=18\.2\.0 - 首次发布：2026-06-04T13:08:23.632Z - 最新版本发布：2026-10-30T11:45:50.338Z - 近 30 天下载量：2927（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：97（近 12 个月 97 个） ## 中文简介 Atlas Copco VT 站点生成器 ## 安装 ```sh npm install @asante-org/atlascopco-vt-litesitegenerator ``` 也可以使用：`pnpm add @asante-org/atlascopco-vt-litesitegenerator`、`yarn add @asante-org/atlascopco-vt-litesitegenerator`、`bun add @asante-org/atlascopco-vt-litesitegenerator` ## README # Atlas Copco VT 站点生成器 Atlas Copco VT 的独立站点生成器包。 这个软件包包含LSG组件集,故事本文档,以及主题的AEM-ready CSS/JS输出. ## 技术堆栈 - **反应 18** + 键 **类型脚本** - **故事本 第7册** 与 `@storybook/nextjs` - **常设委员会** + 键 **尾风 CSS** + 键 **邮政** - **下册.js 13** 保存现有的故事本/运行时间基础 ## 开始 ```bash # Install dependencies npm install # Run Storybook (default: http://localhost:6006) npm run storybook # Build static Storybook npm run build-storybook ``` ## 脚本 | 脚本 | 说明 | | --- | --- | | `npm run storybook` | 启动 Storybook dev 服务器 | | `npm run build-storybook` | 构建静态故事书 | | `npm run build:npm` | 构建组件库加所有主题资产 | | `npm run build:themes:css` | 释放 `theme-1.css`, (中文(简体) ), `theme-2.css`, (中文(简体) ), `theme-3.css` | | `npm run build:themes:js` | 释放 `theme-1.js`, (中文(简体) ), `theme-2.js`, (中文(简体) ), `theme-3.js` | | `npm run dev` | 启动下一个.js dev 服务器 | | `npm run build` | 构建下一个.js app | | `npm run lint` | 运行 ESLint | ## 项目结构 ``` .storybook/ # Storybook config, theme, preview src/ components/lsg/ # Shared base LSG React components, docs, and clientlib runtime themes/ # Theme component wrappers plus Theme 1 / 2 / 3 CSS and JS entry points stories/foundation/_components/ # Minimal Storybook layout helpers used by LSG docs utils/styles/ # Shared spacing/style primitives still used by LSG SCSS public/ # Static assets ``` ## 建筑层 1. 底层 : `src/components/lsg/` 包含共享的结构组件和每个主题构建的共同SCSS. 2. 主题层: 下方每个文件夹 `src/themes/` 曝光其自己的主题组件集,这些组件包接了基础组件,并可以在上方添加额外的特定主题的样式. 3. 品牌层: `--lsg-*` CSS自定义属性定义了颜色,字体,弧度和大小的品牌合同. 每个品牌/主题都为合同提供自己的价值. ## 主题如何运作 主题作为扩展模型来构建,而不是作为组件库的单独重写. ### 1\. 基本构成部分 B. 共同执行 `src/components/lsg/`。 。 。 . - 此层包含反应结构以及用于 `LsgButton`, (中文(简体) ), `LsgHeader`, (中文(简体) ), `LsgFooter`还有LSG的其余部分. - 基础组件应当拥有共享的标记,可访问性,交互逻辑,以及稳定的AEM-facing类名. - 基础SCSS应使用 `--lsg-*` 代号合同 而不是硬编码品牌风格. 这是每个主题之上的层. ### 2\. 主题组成部分 每个主题都有自己的组成部分切入点 `src/themes//components.tsx`。 。 。 . - 主题组件是围绕基础组件的包裹. - 包装的一代发生于 `src/themes/createThemeComponents.tsx`。 。 。 . - 每个包装器会添加主题特定类, 如 `lsg-themed-component--theme-1` 因此一个主题可以以额外的外型来瞄准基础组件. 这意味着主题可以将共享的功能从基础组件中保留下来,同时仍然改变演示文稿或者添加有品牌的处理. 示例流量 : 1. `Theme1LsgButton` 使共享 `LsgButton`。 。 。 . 2. 包装纸加上 `lsg-themed-component--theme-1` 课. 3. `src/themes/theme-1/components.scss` 对共享应用额外的样式 `.lsg-button` 记在主题包里. ### 3\. 品牌变量 品牌层为CSS可变合同. - 诸如 `--lsg-color-primary`, (中文(简体) ), `--lsg-font-family-primary`,以及 `--lsg-radius-rounded` 定义品牌价值. - 默认合同存在于 `src/components/lsg/lsg-tokens.scss`。 。 。 . - 每个主题条目文件都超越了这些相同的变量 `:root` 块. 这保持了API的稳定. 组件总是读取相同的变量,而每个品牌为它们提供不同的值. ## 故事书主题行为 故事书运行时切换主题 . - 工具栏配置在 `.storybook/preview.tsx` 结束 `globalTypes.lsgTheme`。 。 。 . - 这个 `LSG_THEMES` 对象映射主题名称到一组 `--lsg-*` 数值. - 这个 `withLsgTheme` 装饰器将所选主题变成 `:root` CSS 块并注入到预览文档中. - 装饰器也设置 `document.documentElement.dataset.lsgTheme = themeKey`。 。 。 . 那个 `data-lsg-theme` 属性很重要,因为主题SCSS可以瞄准: - 整个故事书画布 `:root[data-lsg-theme="theme-x"]` - 特定主题的包装 `.lsg-themed-component--theme-x` 所以在故事书里你得到两个: - 以品牌代号交换颜色、打字、间距和弧度 - 在共享组件上方分层设置主题特定组件 ## 生产主题产出 每个主题都有自己的CSS和JS捆绑. - `src/themes/theme-1/theme.scss`, (中文(简体) ), `src/themes/theme-2/theme.scss`,以及 `src/themes/theme-3/theme.scss` 导入共享的 LSG 样式及其自己的主题组件样式. - 这些文件还覆盖了 `:root` 主题的契约. - `build:themes:css` 每个主题发布一个 CSS 文件 . - `build:themes:js` 每个主题发布一个JS文件,用于客户端lib运行时的行为. 这是AEM的传送模式: 1. 共同的组成部分结构来自基础执行. 2. 主题 CSS 添加组件级扩展. 3. 主题变量应用品牌颜色,字体,和大小. 4. 主题JS为这个主题的运行时间行为提供靴子. ## 何时使用每层 - 在修改应用于每个主题时使用基元层. - 当一个主题需要在共享组件行为的上方有明显的视觉处理时,使用主题组件层. - 当变化为颜色,打字相,大小等品牌价值或边框半径时使用符号层. 通常,将结构和行为放在基部组件中先行. 只有移动到 `src/themes/` 当主题真正需要它自己的构件 在共享的核心之上. ## 添加新的主题组件 1. 添加或更新共享组件于 `src/components/lsg/`。 。 。 . 2. 保持基础SCSS驱动由 `var(--lsg-*)` 标志. 3. 添加主题特定样式 `src/themes//components.scss` 如果主题需要的不仅仅是符号变化. 4. 导出主题包 `src/themes//components.tsx`。 。 。 . 5. 如果需要在故事书中添加或更新主题值 `.storybook/preview.tsx`。 。 。 . ## 添加组件 1. 在下方添加一个组件 `src/components/lsg//` 并保持其风格平坦 `.scss` 因此,AEM-faceing班名保持稳定. 2. 添加 `*.stories.tsx` 或 MDX 文档与该组件并列 `src/components/lsg/`。 。 。 . 3. 如果一个主题比品牌变量更需要,请在 `src/themes//components.scss` 并揭发一个包裹 `src/themes//components.tsx`。 。 。 . 4. 使用根令牌合同从 `src/components/lsg/lsg-tokens.scss` 喜欢 `var(--lsg-*)` 值高于硬编码的主题颜色. ## 设计符号 - **核心颜色 :** `--lsg-color-primary`, (中文(简体) ), `--lsg-color-secondary`, (中文(简体) ), `--lsg-color-tertiary`, (中文(简体) ), `--lsg-color-light`, (中文(简体) ), `--lsg-color-dark`, (中文(简体) ), `--lsg-color-black`, (中文(简体) ), `--lsg-color-white` - **类型 :** `--lsg-font-family-primary`, (中文(简体) ), `--lsg-font-family-secondary`附加时 `--lsg-size-*` 缩放符号 - **形状 :** `--lsg-radius-square`, (中文(简体) ), `--lsg-radius-rounded`, (中文(简体) ), `--lsg-radius-pill` 特定主题的覆盖在 `src/themes/`,但是它们扩展了共享基元而不是替换根 `--lsg-*` 合同. ## 常见问题 ### @asante-org/atlascopco-vt-litesitegenerator 是什么？ Atlas Copco VT 站点生成器 ### 如何安装 @asante-org/atlascopco-vt-litesitegenerator？ 在项目目录运行 npm install @asante-org/atlascopco-vt-litesitegenerator，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.2\.0）、react-dom（\>=18\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @asante-org/atlascopco-vt-litesitegenerator 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @asante-org/atlascopco-vt-litesitegenerator 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @asante-org/atlascopco-vt-litesitegenerator 可以商用吗？ @asante-org/atlascopco-vt-litesitegenerator 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。 ### @asante-org/atlascopco-vt-litesitegenerator 的下载量有多少？ 根据 npm 官方下载统计，@asante-org/atlascopco-vt-litesitegenerator 在 2026/10/07 – 2026/11/05 这 30 天内被下载 2,927 次，日均约 98 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @asante-org/atlascopco-vt-litesitegenerator 还在维护吗？ 最新版本 3\.9\.0 发布于 2026/10/30（8 天前）；至今共发布 97 个版本，其中过去 12 个月发布了 97 个；首次发布于 2026/06/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。