@attabot/申诉应用程序
投诉管理 UI 作为 npm 软件包 。 与 原子设计 因此,母应用程序可以挂载一个随时可以使用的仪表板 父认证符和 API 基础 URL。 。 。 .
安装
npm install @attabot/complaint-app
同伴依赖性 :
npm install react react-dom react-redux @reduxjs/toolkit
使用量
import ComplaintApp from '@attabot/complaint-app';
import '@attabot/complaint-app/style.css';
import brandTheme from './brandTheme.json'; // static theme file
function App() {
const [darkMode, setDarkMode] = useState(false); // owned by parent
return (
<ComplaintApp
apiUrl="https://your-api.example.com"
authToken={sessionToken}
theme={brandTheme}
darkMode={darkMode}
systemsEndpoint="/api/v1/complaint-systems"
onCreateForm={() => navigate('/forms/new')}
onConfigure={(system) => navigate(`/systems/${system.id}`)}
/>
);
}
主题暗模式( 父控) (C)
通过静态主题文件( JSON/ JS)并切换 darkMode 从父母。 该软件包在整个UI应用CSS变量.
import brandTheme from './brandTheme.json';
<ComplaintApp theme={brandTheme} darkMode={isDark} />
主题文件形状 :
{
"light": { "colors": { "primary": "#2D64B8", "background": "#F5F5F5" } },
"dark": { "colors": { "primary": "#5B8DEF", "background": "#0F1115" } }
}
或通过平面覆盖(合并为两种模式):
<ComplaintApp theme={{ colors: { primary: '#0F766E' } }} darkMode={false} />
导出帮助/ 默认值 : lightTheme, (中文(简体) ), darkTheme, (中文(简体) ), defaultThemeFile, (中文(简体) ), useTheme。 。 。 .
传递父数据( 无获取)
<ComplaintApp
apiUrl={apiUrl}
authToken={authToken}
useDemoData={false}
systems={[
{
id: 'qms',
title: 'QMS - Query Management System',
status: 'active',
description: 'Description of the template',
departments: 3,
workflows: 12,
fields: 55,
formsFilled: 234,
updatedOn: '12 Mar 2024',
titleAsLink: true,
},
]}
onCreateForm={handleCreate}
onConfigure={handleConfigure}
/>
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
apiUrl | string | 环境 VITE_API_URL | Axios 请求的基础 URL |
authToken | string | —— 说 | 为 API 调用而存储的接听符 |
theme | object | 内置光/暗 | 静态主题文件或符号覆盖 |
darkMode | boolean | false | 父控暗模式 |
basePath | string | '/' | 嵌入时反应路由器基名 |
systems | array | —— 说 | 父母控制的系统列表 |
systemsEndpoint | string | —— 说 | 获取路径相对 apiUrl |
useDemoData | boolean | true | 没有数据时显示设计演示卡 |
title | string | 'Complaint Management' | 页面标题 |
description | string | 隐形占位符 | 页面字幕 |
createLabel | string | 'Create New Form' | 主 CTA 标签 |
onCreateForm | fn | —— 说 | 创建按钮处理器 |
onConfigure | fn(system) | —— 说 | 配置按钮处理器 |
onTitleClick | fn(system) | —— 说 | 标题链接单击 |
onDescriptionClick | fn | —— 说 | 描述链接点击 |
onSearch | fn(query) | —— 说 | 搜索更改回调 |
onPublish | fn | —— 说 | 复检出版处理器( P) |
onStepChange | fn | —— 说 | 设置步骤更改回调 |
原子结构
src/components/
atoms/ Button, Input, Typography, StatusBadge, Divider, Icons, Loading
molecules/ SearchBar, DataPoint, CardHeader, CardFooter
organisms/ PageHeader, SystemCard, SystemCardGrid
命名出口可供母体再利用:
import { Button, SearchBar, SystemCard, api } from '@attabot/complaint-app';
认证 & API
- 父母证
apiUrl+ 键authToken输入ComplaintApp编号 :ApiProvider。 。 。 . - Axios 软件包客户端 (
api)在记忆中保留被传递的符号并附加Authorization: Bearer …在每次请求之前 它不会覆盖母应用程序的认证饼干. - 可选令牌刷新针对
POST /api/v1/auth/refresh当 arefreshToken饼干存在. - 没有产品/企业的API是硬编码的——提供
systems或者说systemsEndpoint。 。 。 .
Redux 和路由器集成
当挂入父目录时 react-redux 提供商, ComplaintApp 自动
再利用提供方,而不是添加第二个相竞的Redux上下文. 使用时
独立它回到自己的商店。 通过 store 只有当你
明确想要一个孤立的商店.
同样的规则适用于反应路由器: 现有母路由器被再用; a
BrowserRouter 仅用于独立使用.
发展
npm install
npm run dev # preview Complaint Management UI
npm run build # emit dist/ for publishing
许可证
麻省理工学院
父母拥有的目录
过 roleList, (中文(简体) ), userList,以及 storeList 从母应用程序(例如其Redux选择器)中选择。 每个条目都有 id (单位:千美元) name 或者说 label。父加载这些目录;软件包在类别/工作流程选择器中使用角色和用户,并在Story ID控制器中以投诉表和预览的形式存储. 道具的更新在回放时反映. 存储控件提交ID. 投诉类型、工作流程、领域、状况和投诉提交继续使用投诉API。 通过签名用户为 currentUser; 当 company 道具被省略,软件包也使用 currentUser.company 用于公司特定地点的标签.
<ComplaintApp apiUrl={complaintApiUrl} authToken={token}
roleList={roleList} storeList={storeList} useDemoData={false} />
遗产 rolelist 道具仍为别名; roleList 以优先为准。 缺少角色默认为空列表 。 若为 storeList 省略,存储 ID 字段保留其 API 定义的控件/选项;一个明确提供的空数组使空的存储选择器。 软件包保留了自己的 Redux 提供者, 除非有明文 store 提供.
公司环境
通过母公司对象使用 company={company}。如果省略,则软件包将使用 currentUser.company 当可用时。 软件包用页面道具转发已解析对象并将其同步到 state.appDetails.details.company,因此嵌入组件可以通过现有的软件包Redux提供者读取. 父更新替换公司对象; 通过 null 释出. 软件包不会获取公司细节 .
使用可见位置标签 company.level4 (例如, Branch ID 财务报告和审定财务报表 Select Branch) (中文(简体) ). 缺少或空白名称又回到 Store。 字段密钥、 ID 、 保存的数据, 依赖值保留其原始值.