@fasl-work/caos-app-shell (英语)
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。 。 。 .
共享 网络应用外壳、路由类型、视图、图纸、设计系统和测量闸门 cAOS / 费纳
公用app,CAOS基础有产品模板的三个部分之一
(单位:千美元)CAOS PRODUCT TEMPLATE 主题)和政策(ADR-0016),
ADR-0017,ADR-0071,ADR-0078 (英语). 框架、页眉、图标、标签结构、取景口、区域、文字
绘图和数字定义 一次 这里,每个产品都由它们组成, 所以一个固定的土地在一个地方,没有
产品再写一次. 联合国 docs/ (结构、标志、导航、视图、,
画作,图标和数字,大门,释放).
安装
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
使用
<!-- index.html: apply the stored theme and language before the first frame (THEME_BOOT_SCRIPT, ADR-0011) -->
<script>/* paste THEME_BOOT_SCRIPT here, or inject it at build */</script>
// 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)
};
<BrowserRouter basename={import.meta.env.BASE_URL}>
<AppShell config={config}>
<Routes>{/* / = the workbench; the rest are DocPage routes */}</Routes>
</AppShell>
</BrowserRouter>
- 三种路线类型 (单位:千美元)文件/01: 工作台 (单位:千美元)
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下接受它 而一个无法读取的音符, 一个没有理由的声明, 或者一个空白的旁边, 或隐形图仍然失败。 大门检查是否有原因,而不是是否属实. - 填充仪器:
<PlotCard fill>取取其面板叶的高度(若干)fill卡片分享,一个.caos-views-row并肩作战)Stage或者说<UPlotChart height="fill">里面会变成真的 尺寸。 一张表格( 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) (中文(简体) ). - URL 视图 :
CaseWorkbench财务报告和审定财务报表SurfacePage保持开放视图?view=(和案例选择者 实例?case=),因此一个视图可以共享并活过重载. - App 的焦点模式 (0.14.0):
<CaseWorkbench focus />在打开 选中的大小写在全视图端口的打开组( o) :FocusShell:舞台是风景,铁路是留下来的,保持?focus=1旁边?case=财务报告和审定财务报表?view=组合和子视图;带有 模拟必须提供(ADR-0070,caos-shell-gate --require-focus) (中文(简体) ). 见 编号/04。 。 。 . - 小牌和动画(0.14.0):
FlipCard财务报告和审定财务报表CardDecksMALL卡的阅读器按标题扫描(翻牌) 显示其标题并转向其内容; 甲板为一行最多可有四张牌和上方有一把旋转木马, 由执行官使用 (c) 执行插图可以是动画SVG,其中包含:prefers-reduced-motion块编号/04, (中文(简体) ), 文件/06) (中文(简体) ). - 图标 : 清晰的图标按其所坐位置大小(
svg.lucide; 通过否size(单位:千美元)文件/06) (中文(简体) ). - 数字 :
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可控制且仅将打开的面板制成 aPanelBoundary。 。 。 . - 建筑模式 : 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: 执行和技术导言、方法、实施、, 实验,基准; 申报<DocSection area="...">,仅以十二个字母或二个数字的理由放弃 单词通过floorWaivers; 执行视图首先打开, 每一个导言部分坐落在视图中, 一个方法引用 参考文献,alive控件在data-control,且某一部分内的标签列表属于它; 编号/04) (中文(简体) ). 报告 (单位:千美元)gate-output/gate-report.json(a) 列出每个故障和每层最小的边距;index.html旁边显示每个抓获(G14). 细节 : 文件/07。 。 。 . - 你自己的CSS: (英语) 永远不要重塑类
reserved-classes.jsoncomponents页:1modifiers单词(on, (中文(简体) ),active, (中文(简体) ),fill, (中文(简体) ),wide)可以加入自己的班级(.my-row.on),从未单独使用. 模板的后卫读取 那个名单。 值取自符(var(--rail-w), (中文(简体) ),var(--space-3), (中文(简体) ), 文件/02) (中文(简体) ). - 动画视图 : 驱动每张画布或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 主机混合在一起
一个申请.
麻省理工学院法埃纳矿业分析中心的一部分.