# @fasl-work/caos-app-shell 中文文档 规范地址：https://npmcn.com/package/%40fasl-work/caos-app-shell/ 版本：0\.26\.0 npm 元数据更新时间：2026-11-11T16:45:24.683Z 中文译文更新时间：2026-11-14T10:51:31.501Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40fasl-work/caos-app-shell 原文对照：https://npmcn.com/package/%40fasl-work/caos-app-shell/?lang=original 项目主页：https://github.com/fsantibanezleal/CAOS_APP_SHELL#readme 源码仓库：https://github.com/fsantibanezleal/CAOS_APP_SHELL ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1 MB，27 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：katex ^0\.16\.0 \|\| ^0\.17\.0 \|\| ^0\.18\.0 \|\| ^0\.19\.0，react ^18 \|\| ^19，uplot ^1\.6\.30，zustand ^4 \|\| ^5，react-dom ^18 \|\| ^19，playwright \>=1\.40，lucide-react \>=0\.400\.0，react-router ^6 \|\| ^7 \|\| ^8 - 首次发布：2026-06-19T13:52:50.640Z - 最新版本发布：2026-11-11T16:45:24.331Z - 近 30 天下载量：5705（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：63（近 12 个月 63 个） ## 中文简介 共享的网络应用外壳,活生生原始,内容原始,CAOS/Faena公用应用的设计系统和测量门(ADR-0016,ADR-0017,ADR-0071). ## 安装 ```sh npm install @fasl-work/caos-app-shell ``` 也可以使用：`pnpm add @fasl-work/caos-app-shell`、`yarn add @fasl-work/caos-app-shell`、`bun add @fasl-work/caos-app-shell` ## README # @fasl-work/caos-app-shell (英语) [![License](https://img.shields.io/github/license/fsantibanezleal/CAOS_APP_SHELL)](https://npmcn.com/package/%40fasl-work/caos-app-shell/LICENSE) [![npm](https://img.shields.io/npm/v/@fasl-work/caos-app-shell?label=npm)](https://www.npmjs.com/package/@fasl-work/caos-app-shell) [![Release](https://img.shields.io/github/v/tag/fsantibanezleal/CAOS_APP_SHELL?label=release&sort=semver)](https://github.com/fsantibanezleal/CAOS_APP_SHELL/tags) **1放出,2个拼写.** npm 用 semver 写出一个版本(`0.19.7`(三); `VERSION`,变换和标记 在显示表单中写入同样的发布 `X.XX.XXX` (单位:千美元)`0.19.007`标记 `v0.19.007`),因为 npm 禁止引导 0 (ADR-0068) (英语). 在 npm 上发布的每个版本,其标签及其承诺: [`docs/09_versions.md`](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/09_versions.md)。 。 。 . 共享 **网络应用外壳、路由类型、视图、图纸、设计系统和测量闸门** cAOS / 费纳 公用app,CAOS基础有产品模板的三个部分之一 (单位:千美元)[CAOS PRODUCT TEMPLATE 主题](https://github.com/fsantibanezleal/CAOS_PRODUCT_TEMPLATE))和政策(ADR-0016), ADR-0017,ADR-0071,ADR-0078 (英语). 框架、页眉、图标、标签结构、取景口、区域、文字 绘图和数字定义 **一次** 这里,每个产品都由它们组成, 所以一个固定的土地在一个地方,没有 产品再写一次. **联合国 [`docs/`](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/README.md)** (结构、标志、导航、视图、, 画作,图标和数字,大门,释放). ## 安装 ```bash npm i -E @fasl-work/caos-app-shell # an exact pin: the build you gated is the build you ship # peer deps (the app provides them): npm i react react-dom react-router lucide-react katex zustand # optional: the house chart and the measured gate npm i uplot && npm i -D playwright ``` ## 使用 ```html ``` ```tsx // main.tsx import "@fasl-work/caos-app-shell/styles.css"; import "@fasl-work/caos-app-shell/chart.css"; // only with the chart entry import { BrowserRouter, Routes, Route } from "react-router"; import { AppShell, STANDARD_ROUTES, type ShellConfig } from "@fasl-work/caos-app-shell"; const config: ShellConfig = { product: { name: "RotorVitals" }, routes: STANDARD_ROUTES, // App, Introduction, Methodology, Implementation, Experiments, Benchmark links: { github: "https://github.com/fsantibanezleal/CAOS_RotorVitals" }, version: "0.01.000", // X.XX.XXX, checked on mount build: import.meta.env.VITE_BUILD_ID, // short commit, shown beside the version license: { en: "MIT licence", es: "Licencia MIT" }, // required; no default visibility: "public", // "private" hides every source link contain: true, // every route is the viewport (ADR-0071 rule 1) }; {/* / = the workbench; the rest are DocPage routes */} ``` - **三种路线类型** (单位:千美元)[文件/01](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/01_structure.md): **工作台** (单位:千美元)`CaseWorkbench`,一个关于 联合国 **表面** (单位:千美元)`SurfacePage`,中枢,探险家或控制台:头部,一行视图,开放视图 补足其余的 **文档** (单位:千美元)`DocPage`) (中文(简体) ). 下 `contain` 每一个在视图端口内填充或滚动; 无产品 写入 CSS. - **在工具上降落:** `/` 是 App 路由; 五个文档路由是单独的页. - **一个反应,一个路由器:** 设定 `resolve.dedupe: ['react', 'react-dom', 'react-router']` 在维特。 第二个副本 将外壳置于路由器上下文; `AppShell` 报告它与 `console.error` 并命名事业. - **产品元数据 :** `license` 财务报告和审定财务报表 `visibility` 需要:页脚显示产品的许可证和 私人产品没有显示源链接. `footer.attribution` 接受双语文本或 `false`。 。 。 . - **枢纽案(法纳):** 通过 `routes: []` (或一)和导航被隐藏;页眉和页脚保持不变. - **App 路线 :** 一个 `CaseWorkbench` 整个路线是: 铁路有取案员(`cases`,则 `CaseSelector` 道具),变种 (:`variants`还有你 `rail` (参数为: `Knob` 财务报告和审定财务报表 `ChipGroup`现场直播 数值为 `Readout` 编号 : `Gauge` 编号 : `Verdict`) 文书最多有六个问题 `groups`,然后是 变量比较和上下文。 拾取器和数字都存放在铁道里 所以图纸保留了仪器. 每个控件都写着 `data-control`。 。 。 . `PlotCard` 财务报告和审定财务报表 `Readout` 带 `lane`, (中文(简体) ), `provenance` (单位:千美元) `dataKey`数字 : 通过 `useWorkbenchState().stateKey` 以便在计算开始时所记录的;以及 仍显示较早选择的视图被覆盖为 stale。 任何装入声明 `data-state="loading"` 直到它准备就绪;大门等待它,永远不要为网络服务。 数据缺失的视图宣布 `data-state="unavailable"` 在读取器可以看到的元素上(一个40乘以12 px的可见盒,至少是在仪器内部), 不透明, 它的文字被画在盒子里: 不是被推出 `text-indent`切换 `clip-path` 或低于8px),其提供的案文说明理由(至少用两个字表示12个字母或数字),并且没有绘图要素; 然后在G6下接受它 而一个无法读取的音符, 一个没有理由的声明, 或者一个空白的旁边, 或隐形图仍然失败。 大门检查是否有原因,而不是是否属实. - **填充仪器:** `` 取取其面板叶的高度(若干) `fill` 卡片分享,一个 `.caos-views-row` 并肩作战) `Stage` 或者说 `` 里面会变成真的 尺寸。 一张表格( A)`.caos-table`)被大小到其行:将其置于相同数字的绘图上方,从不单独. - **绘图 :** 将画布、 WebGL 和 SVG 仪器放入 `Stage` (或 `useStageSize`: 零时无绘图 大小,颜色来自 `useThemeTokens()` (画布不能读取 CSS 变量). - **图:** `import { UPlotChart } from "@fasl-work/caos-app-shell/chart"`: x 和 y 有单位的标题, 系列 以物色, `marks` 发动机检测到的(在图中),每组的钥匙 有两个或两个以上,一个光标读出行,主题和语言重建,每个轴一个勾选标记。 分类走 内 `BarChart` (主条目,无uPlot). 绘制您自己的衡量标准,其标签为文本包(`textWidth`, (中文(简体) ), `fitLabel`, (中文(简体) ), `niceTicks`)并宣布 `data-chart` (单位:千美元)[文件/05](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/05_drawings.md)) (中文(简体) ). - **URL 视图 :** `CaseWorkbench` 财务报告和审定财务报表 `SurfacePage` 保持开放视图 `?view=` (和案例选择者 实例 `?case=`),因此一个视图可以共享并活过重载. - **App 的焦点模式 (0.14.0):** `` 在打开 选中的大小写在全视图端口的打开组( o) :`FocusShell`:舞台是风景,铁路是留下来的,保持 `?focus=1` 旁边 `?case=` 财务报告和审定财务报表 `?view=`组合和子视图;带有 模拟必须提供(ADR-0070, `caos-shell-gate --require-focus`) (中文(简体) ). 见 [编号/04](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/04_views.md)。 。 。 . - **小牌和动画(0.14.0):** `FlipCard` 财务报告和审定财务报表 `CardDeck` sMALL卡的阅读器按标题扫描(翻牌) 显示其标题并转向其内容; 甲板为一行最多可有四张牌和上方有一把旋转木马, 由执行官使用 (c) 执行插图可以是动画SVG,其中包含: `prefers-reduced-motion` 块[编号/04](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/04_views.md), (中文(简体) ), [文件/06](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/06_executive-view.md)) (中文(简体) ). - **图标 :** 清晰的图标按其所坐位置大小(`svg.lucide`; 通过否 `size` (单位:千美元)[文件/06](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/06_icons-and-numbers.md)) (中文(简体) ). - **数字 :** `formatNumber(value, lang, opts)` 或者说 `useFormat()`从来没有 `toFixed` 在风景。 1e-4以下的量级 以科学符号写成(p-值为 1e-200 是 `1E-200`,而不是200个零;给予 `digits`没有 `decimals`,用于p值. 百分之一和一个单位被一个不突破的空间加入. - **文件路线:** `DocPage` 财务报告和审定财务报表 `DocSection` (每节结束于 `Refs`或者说为什么 毫无理由, `Equation` 有字幕, `CitationsProvider` 财务报告和审定财务报表 `Cite` (每个引用都有DOI或URL). `Tabs`, (中文(简体) ), `SubTabs` 财务报告和审定财务报表 `TabGroups` 可控制且仅将打开的面板制成 a `PanelBoundary`。 。 。 . - **建筑模式 :** 5个或更多分页,每个内置 SVG 字符串(`import svg from "./x.svg?raw"`用于 仅限 `SHELL_TOKENS`· ; `validateArchitectureConfig` 报告挂载上的其他情况. - **测量它:** `npx caos-shell-gate --serve dist --expect-brand "RotorVitals"` 服务于该建筑为 GitHub 页面确实如此(没有 SPA倒置),或 `--url https://...` 测量部署的来源(需要) `playwright`) (中文(简体) ). 它行走着 每条路由,标签,子tab和大小写,都以5个大小,既包括主题,也包括两种语言,并失败于:一个错误的主题 (G1)或模式(G2),控制台错误和4xx/5xx(G3),断开深链接或 HTML 对于一件文物(G4),任意一个a 读取器不能滚动到、查看整个或点击(G5)、空白或填充不足的图纸和低于 视图(G6),一个从未结对的视图(G7),循环处于休止状态(G8),控制任何变化(G9),标签剪接或 在绘图中重叠,同样在更宽的倒置字体中(G10),西班牙页上的小数点(G11),跨行的数字或百分比(G19),垂直 滚动去去(G12)的子tab列表,WCAG AA对比下的文本(G13,文档页上每种语言),以及没有文档页 需要此类领域`ADR-0017.2`: 执行和技术导言、方法、实施、, 实验,基准; 申报 ``,仅以十二个字母或二个数字的理由放弃 单词通过 `floorWaivers`; 执行视图首先打开, 每一个导言部分坐落在视图中, 一个方法引用 参考文献,a `live` 控件在 `data-control`,且某一部分内的标签列表属于它; [编号/04](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/04_views.md)) (中文(简体) ). 报告 (单位:千美元)`gate-output/gate-report.json`(a) 列出每个故障和每层最小的边距; `index.html` 旁边显示每个抓获(G14). 细节 : [文件/07](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/07_gate.md)。 。 。 . - **你自己的CSS: (英语)** 永远不要重塑类 `reserved-classes.json` `components`页:1 `modifiers` 单词(`on`, (中文(简体) ), `active`, (中文(简体) ), `fill`, (中文(简体) ), `wide`)可以加入自己的班级(`.my-row.on`),从未单独使用. 模板的后卫读取 那个名单。 值取自符(`var(--rail-w)`, (中文(简体) ), `var(--space-3)`, (中文(简体) ), [文件/02](https://npmcn.com/package/%40fasl-work/caos-app-shell/docs/02_tokens.md)) (中文(简体) ). - **动画视图 :** 驱动每张画布或3D回路 `usePausedViz` (默认暂停,运行一次,停止在 隐藏标签,从不调用 `requestAnimationFrame` 直接说. ## 出口 `AppShell`, (中文(简体) ), `STANDARD_ROUTES`, (中文(简体) ), `WorkbenchShell`, (中文(简体) ), `FocusShell`, (中文(简体) ), `ArchitectureModal`, (中文(简体) ), `validateArchitectureConfig`, (中文(简体) ), `ThemeToggle`, (中文(简体) ), `LanguageToggle`, (中文(简体) ), `useThemeStore`, (中文(简体) ), `applyTheme`, (中文(简体) ), `readTheme`, (中文(简体) ), `THEME_BOOT_SCRIPT`, (中文(简体) ), `THEME_STORAGE_KEY`, (中文(简体) ), `LANG_STORAGE_KEY`, (中文(简体) ), `useLangStore`, (中文(简体) ), `useShellLang`, (中文(简体) ), `formatNumber`, (中文(简体) ), `useFormat`, (中文(简体) ), `NOT_AVAILABLE`, (中文(简体) ), `SHELL_TOKENS`, (中文(简体) ), `resolveToken`, (中文(简体) ), `useThemeTokens`, (中文(简体) ), `PanelBoundary`, (中文(简体) ), `usePausedViz`, (中文(简体) ), `createVizLoop`, (中文(简体) ), `CaseSelector` (和 `caseModel` 援助者, `Tabs`, (中文(简体) ), `MAX_PEER_TABS`, (中文(简体) ), `SubTabs`, (中文(简体) ), `TabGroups`, (中文(简体) ), `Callout`, (中文(简体) ), `Equation`, (中文(简体) ), `InlineMath`, (中文(简体) ), `Figure`, (中文(简体) ), `CitationsProvider`, (中文(简体) ), `Cite`, (中文(简体) ), `Refs`, (中文(简体) ), `ReferenceList` (折旧), `DocPage`, (中文(简体) ), `DocSection`, (中文(简体) ), `WorkbenchLayout`, (中文(简体) ), `CaseWorkbench`, (中文(简体) ), `MAX_WORKBENCH_GROUPS`, (中文(简体) ), `VariantBar`, (中文(简体) ), `LaneBadge`, (中文(简体) ), `Readout`, (中文(简体) ), `Gauge`, (中文(简体) ), `Verdict`, (中文(简体) ), `PlotCard`, (中文(简体) ), `Knob`, (中文(简体) ), `ChipGroup`, (中文(简体) ), `Stage`, (中文(简体) ), `useStageSize`, (中文(简体) ), `makeStateKey`, (中文(简体) ), `isStale`, (中文(简体) ), `useWorkbenchState`, (中文(简体) ), `WorkbenchStateContext`, (中文(简体) ), `pick`;自0.8.0起 `SurfacePage`, (中文(简体) ), `useUrlView`, (中文(简体) ), `viewParamOf`, (中文(简体) ), `replaceQueryParam`, (中文(简体) ), `BREAKPOINTS`, (中文(简体) ), `BarChart`, (中文(简体) ), `textWidth`, (中文(简体) ), `widestLabel`, (中文(简体) ), `fitLabel`, (中文(简体) ), `niceTicks`, (中文(简体) ), `niceStep`, (中文(简体) ), `fontFamily`, (中文(简体) ), `formatTicks`, (中文(简体) ), `NBSP`, (中文(简体) ), `SCIENTIFIC_BELOW`类型 `ShellColorToken`;自0.9.0起 `ViewsRow`自0.14.0起 `FlipCard`, (中文(简体) ), `CardDeck` (与 `FLIP_LIMITS`, (中文(简体) ), `FLIP_TEXT`, (中文(简体) ), `DECK_TEXT`, (中文(简体) ), `perPageFor`, (中文(简体) ), `deckWindow`, (中文(简体) ), `deckPosition`页:1 `focus` 参考文献 `CaseWorkbench` (单位:千美元)`CaseFocusConfig`, (中文(简体) ), `FOCUS_TEXT`, (中文(简体) ), `FOCUS_PARAM`和 `removeQueryParam`。单独的条目: `/chart` (单位:千美元)`UPlotChart` 与 `x.log`, (中文(简体) ), `parity`, (中文(简体) ), `onPick`· ; `drawMarks`, (中文(简体) ), `tickSteps`, (中文(简体) ), `repeatedLabels`, (中文(简体) ), `seriesStyle`, (中文(简体) ), `sortOrder`, (中文(简体) ), `parityRange`, (中文(简体) ), `/keys` (存储键,无反应), `/styles.css`, (中文(简体) ), `/chart.css`, (中文(简体) ), `/reserved-classes.json`。宾: `caos-shell-gate`。 。 。 . ### 认证的工作本位 `WorkbenchShell` 是被认证的用户界面需要桌面侧边栏和 移动底层导航. 它使打字路线和主要地标 产品供应它 自有状态控制通过 `brand`, (中文(简体) ), `sidebarFooter`, (中文(简体) ), `headerLead`, (中文(简体) ), `headerActions`,以及 `overlays`。 。 。 . 认证、账户政策、优先权的坚持、聊天和模式内容仍然是产品所有. 组件使用稳定的核心 `NavLink` 合同和支持 `react-router` 6、7和8页. 6/7 上的浏览器应用程序安装匹配 `react-router-dom`,提供核心对等点; 提供8个应用程序 `react-router` 直接说 不将不同的核心和 DOM 主机混合在一起 一个申请. 麻省理工学院法埃纳矿业分析中心的一部分. ## 常见问题 ### @fasl-work/caos-app-shell 是什么？ 共享的网络应用外壳,活生生原始,内容原始,CAOS/Faena公用应用的设计系统和测量门\(ADR-0016,ADR-0017,ADR-0071\)\. ### 如何安装 @fasl-work/caos-app-shell？ 在项目目录运行 npm install @fasl-work/caos-app-shell，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：katex（^0\.16\.0 \|\| ^0\.17\.0 \|\| ^0\.18\.0 \|\| ^0\.19\.0）、react（^18 \|\| ^19）、zustand（^4 \|\| ^5）、react-dom（^18 \|\| ^19）、lucide-react（\>=0\.400\.0）、react-router（^6 \|\| ^7 \|\| ^8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 caos-shell-gate，可以用 npx caos-shell-gate 直接运行。 ### @fasl-work/caos-app-shell 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @fasl-work/caos-app-shell 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @fasl-work/caos-app-shell 可以商用吗？ @fasl-work/caos-app-shell 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @fasl-work/caos-app-shell 的下载量有多少？ 根据 npm 官方下载统计，@fasl-work/caos-app-shell 在 2026/10/15 – 2026/11/13 这 30 天内被下载 5,705 次，日均约 190 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @fasl-work/caos-app-shell 还在维护吗？ 最新版本 0\.26\.0 发布于 2026/11/12（2 天前）；至今共发布 63 个版本，其中过去 12 个月发布了 63 个；首次发布于 2026/06/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。