启动
依赖关系
安装依赖关系
npm i
构建/观察
打开包含 CloudSigma 版式和自定义组件的浏览器标签
npm run serve
组件将在
http://local.cloudsigma.com:3000,如果无法访问,则将此行添加到主机文件中.
127.0.0.1 local.cloudsigma.com
检查
CloudSigma 会话整合
CloudSigma 拥有 SSO 刷新并推进当前符号 config.accessToken。 。 。 .
组件同时读取已替换的配置和在位符号更新; 可选
getAccessToken 调用仍然作为主机拥有的当前调用源支持 .
OmniFabric 不读 CloudSigma cookie 或调用 CloudSigma/Keycloak 刷新端点 .
在发出请求之前, 5秒内, JWT 最多等待10秒
用于替换。 一个网关 401(没有) X-Request-Id等待一个不同的
指示并重放请求一次,包括 POST 机构。 保留分组请求
单独的 MO 标志 Access-Token 和 CS 符号 Authorization。 。 。 .
不透明符号继续被服务器验证.
超时或拒绝替换显示会话错误卡 。 接下来 可用主机令牌在读取并恢复投票时自动重排失败 保存 OmniFabric 激活和证书。 恢复不会重现突变.
后退检查 :
rtk npm run test:unit
rtk proxy npx playwright test tests/e2e/session-recovery.spec.ts --project=chromium
浏览器回归模拟符号旋转并延迟发送; 接受 在JHB的测试中,也应涵盖超过15分钟符号寿命的真正计算机睡眠.
测试
测试 剧作家 已使用.
您可以在 tests/e2e 文件夹,
以手动操作测试 :
npm test
软件包
检查是否能够构建软件包
npm run build
支助科
造型组件只能使用内置CSS来制造. 例如:
function ComponentWithInlineCss() {
return (
<div
style={{
width: '10px',
height: '10px',
backgroundColor: '#000',
}}
>
Inline CSS
</div>
);
}
通过遵循这些准则,您在组件中保持了干净而孤立的造型方法,在使用外接cs时防止出乎意料的风格冲突.
图像集成
在组件文件中,使用导入语句将图像带入 :
import logo from '../../assets/logo.svg';
将导入的图像放入您的组件 JSX :
<img src={logo} alt="Logo" />
在工程结构内组织您的图像 。 例如:
project-root/
|-- src/
| |-- component/
| |-- assets/
| |-- logo.svg
|-- ...
图标
对于图标,我们使用Font Cousidon版本4.7,你可以找到它提供的图标 这里
本地化
您可以添加自定义翻译
内 src/component/locales - 说吧 [language].js 文档.
为了在组件中添加翻译, useTranslation 必须导入
从 react-i18next。例如:
import { useTranslation } from 'react-i18next';
...
function ComponentWithTranslation() {
const {t} = useTranslation();
return (
<h2>
{t('Translation Key')}
</h2>
);
}
你可以通过修补测试不同的地点
lng: 'en'静态键src/config.jsx以匹配想要的地盘 .