# @attabot/complaint-app 中文文档 规范地址：https://npmcn.com/package/%40attabot/complaint-app/ 版本：1\.0\.52 npm 元数据更新时间：2026-11-06T08:39:32.051Z 中文译文更新时间：2026-11-07T04:00:53.072Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40attabot/complaint-app 原文对照：https://npmcn.com/package/%40attabot/complaint-app/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：4.2 MB，8 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：4 个 - peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，react-redux \>=8，@reduxjs/toolkit \>=1\.9 - 首次发布：2026-08-05T07:40:16.819Z - 最新版本发布：2026-11-06T08:39:31.830Z - 近 30 天下载量：4096（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：52（近 12 个月 52 个） ## 中文简介 申诉管理 UI 软件包 — 运行在父应用程序的认证和 API 上的原子反应组件 ## 安装 ```sh npm install @attabot/complaint-app ``` 也可以使用：`pnpm add @attabot/complaint-app`、`yarn add @attabot/complaint-app`、`bun add @attabot/complaint-app` ## README # @attabot/申诉应用程序 投诉管理 UI 作为 npm 软件包 。 与 **原子设计** 因此,母应用程序可以挂载一个随时可以使用的仪表板 **父认证符和 API 基础 URL**。 。 。 . ## 安装 ```bash npm install @attabot/complaint-app ``` 同伴依赖性 : ```bash npm install react react-dom react-redux @reduxjs/toolkit ``` ## 使用量 ```jsx 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 ( navigate('/forms/new')} onConfigure={(system) => navigate(`/systems/${system.id}`)} /> ); } ``` ### 主题暗模式( 父控) (C) 通过静态主题文件( JSON/ JS)并切换 `darkMode` 从父母。 该软件包在整个UI应用CSS变量. ```jsx import brandTheme from './brandTheme.json'; ``` 主题文件形状 : ```json { "light": { "colors": { "primary": "#2D64B8", "background": "#F5F5F5" } }, "dark": { "colors": { "primary": "#5B8DEF", "background": "#0F1115" } } } ``` 或通过平面覆盖(合并为两种模式): ```jsx ``` 导出帮助/ 默认值 : `lightTheme`, (中文(简体) ), `darkTheme`, (中文(简体) ), `defaultThemeFile`, (中文(简体) ), `useTheme`。 。 。 . ### 传递父数据( 无获取) ```jsx ``` ## 道具 | 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 ``` 命名出口可供母体再利用: ```jsx import { Button, SearchBar, SystemCard, api } from '@attabot/complaint-app'; ``` ## 认证 & API 1. 父母证 `apiUrl` + 键 `authToken` 输入 `ComplaintApp` 编号 : `ApiProvider`。 。 。 . 2. Axios 软件包客户端 (`api`)在记忆中保留被传递的符号并附加 `Authorization: Bearer …` 在每次请求之前 它不会覆盖母应用程序的认证饼干. 3. 可选令牌刷新针对 `POST /api/v1/auth/refresh` 当 a `refreshToken` 饼干存在. 4. 没有产品/企业的API是硬编码的——提供 `systems` 或者说 `systemsEndpoint`。 。 。 . ## Redux 和路由器集成 当挂入父目录时 `react-redux` 提供商, `ComplaintApp` 自动 再利用提供方,而不是添加第二个相竞的Redux上下文. 使用时 独立它回到自己的商店。 通过 `store` 只有当你 明确想要一个孤立的商店. 同样的规则适用于反应路由器: 现有母路由器被再用; a `BrowserRouter` 仅用于独立使用. ## 发展 ```bash 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` 用于公司特定地点的标签. ```jsx ``` 遗产 `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 、 保存的数据, 依赖值保留其原始值. ## 常见问题 ### @attabot/complaint-app 是什么？ 申诉管理 UI 软件包 — 运行在父应用程序的认证和 API 上的原子反应组件 ### 如何安装 @attabot/complaint-app？ 在项目目录运行 npm install @attabot/complaint-app，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、react-redux（\>=8）、@reduxjs/toolkit（\>=1\.9）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @attabot/complaint-app 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @attabot/complaint-app 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @attabot/complaint-app 可以商用吗？ @attabot/complaint-app 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @attabot/complaint-app 的下载量有多少？ 根据 npm 官方下载统计，@attabot/complaint-app 在 2026/10/07 – 2026/11/05 这 30 天内被下载 4,096 次，日均约 137 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @attabot/complaint-app 还在维护吗？ 最新版本 1\.0\.52 发布于 2026/11/06（1 天前）；至今共发布 52 个版本，其中过去 12 个月发布了 52 个；首次发布于 2026/08/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。