(null)
const handleRefresh = async () => {
// Manually refresh async data
await logsPanelRef.current?.refresh()
}
const handleResetFilters = () => {
// Reset all filters to default
logsPanelRef.current?.resetFilters()
}
const handleShowErrors = () => {
// Programmatically apply filters
logsPanelRef.current?.applyFilters({ logType: "error" })
}
const handleExport = () => {
// Get current filtered/sorted logs
const logs = logsPanelRef.current?.exportLogs()
if (logs) {
// Export to CSV, JSON, etc.
downloadAsCSV(logs)
}
}
const handleGetFilters = () => {
// Get current filter state
const filters = logsPanelRef.current?.getCurrentFilters()
console.log("Current filters:", filters)
}
return (
<>
)
}
```
**可用的方法:**
- `refresh()` -手动重新获取当前过滤器/页面的数据
- `resetFilters()` —将所有过滤器重置为默认值
- `applyFilters(filters)` —可编程设置过滤器
- `getCurrentFilters()` -获取当前过滤器状态
- `exportLogs()` —获取当前显示的日志数组
##### 定制
自定义外观和行为：
```tsx
import { LogsPanel } from "@vention/machine-apps-components"
import { VentionIcon } from "@vention/machine-ui"
;}
/>
```
**定制道具:**
- `className` —在根容器中添加自定义CSS类
- `tableHeight` -设置自定义表格高度（例如，“500px”，600）
- `emptyStateMessage` -当没有日志时自定义消息（默认：“你没有日志”）
- `emptyStateIcon` -自定义React节点显示上述空消息
#### LogsTable
只有表组件。如果您想自己处理过滤/排序或使用过滤器组合自己的自定义布局，则非常有用。
```tsx
import { LogsTable } from "@vention/machine-apps-components"
import type { LogEntry } from "@vention/machine-apps-components"
showDetailsModal(log)}
tableHeight="500px"
emptyStateMessage="No logs available"
/>
```
**道具:**
```typescript
interface LogsTableProps {
logs?: LogEntry[]
isLoading?: boolean
error?: string | null
onLoadMoreLogs?: () => void // For infinite scroll
hasMoreLogs?: boolean // For infinite scroll
onLogClick?: (log: LogEntry) => void
tableHeight?: string | number
emptyStateMessage?: string
emptyStateIcon?: ReactNode
}
```
#### LogFilterForm
只有过滤器UI。当您想要完全控制过滤逻辑时，请使用此功能。
```tsx
import { LogFilterForm } from "@vention/machine-apps-components"
import type { LogFilterFormValues } from "@vention/machine-apps-components"
const handleFilterChange = (filters: LogFilterFormValues) => {
// Apply filters to your own data source
const filtered = myLogs.filter(log => {
// Your custom filter logic
})
}
const handleReset = () => {
// Handle reset
}
;
```
#### LogsPagination
只有分页控件。将此用于自定义分页实现。
```tsx
import { LogsPagination } from "@vention/machine-apps-components"
; setCurrentPage(page)} />
```
## 开发
### 运行测试
```bash
# Run tests
nx test machine-apps-components
# Run tests with coverage
nx test machine-apps-components --coverage
# Run tests in watch mode
cd projects/machine-code/libs/machine-apps-components
npx vitest
```
### 测试设置
这个库使用带有jdom环境的Vitest来测试React组件。中提供了测试实用程序 `src/test-utils.tsx` 用必要的提供程序包装组件：
- `ThemeProvider` 与 `machineUiTheme`
- `MemoryRouter` 进行路由
示例测试:
```tsx
import { renderWithProviders } from "../../test-utils"
import { NavigationBar } from "./navigation-bar"
it("should render correctly", () => {
renderWithProviders()
expect(screen.getByText("Operation")).toBeDefined()
})
```
## 建筑
```bash
nx build machine-apps-components
```
## 产品毛羽
```bash
nx lint machine-apps-components
```
## 常见问题
### 如何安装 @vention/machine-apps-components？
在项目目录运行 npm install @vention/machine-apps-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（17\.0\.2）、@mui/material（^5\.0\.0）、react-router-dom（^6\.0\.0）、@vention/machine-ui（^6\.7\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @vention/machine-apps-components 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @vention/machine-apps-components 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @vention/machine-apps-components 可以商用吗？
@vention/machine-apps-components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @vention/machine-apps-components 还在维护吗？
最新版本 1\.30\.27 发布于 2026/11/03（今天）；至今共发布 285 个版本，其中过去 12 个月发布了 279 个；首次发布于 2025/10/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。